mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +03:00
Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into patch-1
This commit is contained in:
Alexandr Kondrashov
@@ -381,6 +381,9 @@ linters:
|
||||
enabled: true
|
||||
extra_properties: []
|
||||
|
||||
PseudoElement:
|
||||
enabled: true
|
||||
|
||||
QualifyingElement:
|
||||
enabled: false
|
||||
allow_element_with_attribute: false
|
||||
+2
-2
@@ -5,7 +5,7 @@
|
||||
.alert {
|
||||
padding: $alert-padding;
|
||||
margin-bottom: $spacer-y;
|
||||
border: 1px solid transparent;
|
||||
border: $alert-border-width solid transparent;
|
||||
@include border-radius($alert-border-radius);
|
||||
|
||||
// Improve alignment and spacing of inner content
|
||||
@@ -61,5 +61,5 @@
|
||||
@include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
|
||||
}
|
||||
.alert-danger {
|
||||
@include alert-variant($alert-danger-bg, $alert-danger-border,$alert-danger-text);
|
||||
@include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
.btn + .btn-group,
|
||||
.btn-group + .btn,
|
||||
.btn-group + .btn-group {
|
||||
margin-left: -1px;
|
||||
margin-left: -$btn-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -167,7 +167,7 @@
|
||||
> .btn + .btn-group,
|
||||
> .btn-group + .btn,
|
||||
> .btn-group + .btn-group {
|
||||
margin-top: -1px;
|
||||
margin-top: -$btn-border-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
+1
-2
@@ -8,10 +8,9 @@
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border: $border-width solid transparent;
|
||||
border: $btn-border-width solid transparent;
|
||||
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
|
||||
@include transition(all .2s ease-in-out);
|
||||
|
||||
|
||||
+10
-5
@@ -4,8 +4,9 @@
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: $card-spacer-y;
|
||||
background-color: #fff;
|
||||
background-color: $card-bg;
|
||||
border: $card-border-width solid $card-border-color;
|
||||
@include border-radius($card-border-radius);
|
||||
}
|
||||
@@ -120,7 +121,7 @@
|
||||
.card-inverse {
|
||||
.card-header,
|
||||
.card-footer {
|
||||
border-bottom: .075rem solid rgba(255,255,255,.2);
|
||||
border-bottom: $card-border-width solid rgba(255,255,255,.2);
|
||||
}
|
||||
.card-header,
|
||||
.card-footer,
|
||||
@@ -135,7 +136,7 @@
|
||||
}
|
||||
.card-link {
|
||||
@include hover-focus {
|
||||
color: #fff;
|
||||
color: $card-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -169,10 +170,10 @@
|
||||
|
||||
// Card image caps
|
||||
.card-img-top {
|
||||
@include border-radius(.25rem .25rem 0 0);
|
||||
@include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
|
||||
}
|
||||
.card-img-bottom {
|
||||
@include border-radius(0 0 .25rem .25rem);
|
||||
@include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
|
||||
}
|
||||
|
||||
|
||||
@@ -246,6 +247,8 @@
|
||||
// Handle rounded corners
|
||||
@if $enable-rounded {
|
||||
&:first-child {
|
||||
@include border-right-radius(0);
|
||||
|
||||
.card-img-top {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
@@ -254,6 +257,8 @@
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
@include border-left-radius(0);
|
||||
|
||||
.card-img-top {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
+3
-3
@@ -178,9 +178,9 @@
|
||||
cursor: pointer;
|
||||
// IE9 hack for event handling
|
||||
//
|
||||
// Internet Explorer 9 does not support clicks on elements without a set
|
||||
// `background-color`. We cannot use `filter` since that's not viewed as a
|
||||
// background color by the browser. Thus, a hack is needed.
|
||||
// Internet Explorer 9 does not properly handle clicks on elements with a `background-color` of `transparent`,
|
||||
// so we use `rgba(0,0,0,0)` instead since it's a non-buggy equivalent.
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
|
||||
background-color: rgba(0,0,0,0); // IE9
|
||||
border: 1px solid $carousel-indicator-border-color;
|
||||
border-radius: 10px;
|
||||
|
||||
+1
-1
@@ -27,7 +27,7 @@ kbd {
|
||||
kbd {
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
font-weight: $nested-kbd-font-weight;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -142,7 +142,7 @@
|
||||
background-image: none \9;
|
||||
>>>>>>> twbs/v4-dev
|
||||
background-size: 8px 10px;
|
||||
border: 1px solid $input-border;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
// Use vendor prefixes as `appearance` isn't part of the CSS spec.
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
@@ -199,7 +199,7 @@
|
||||
color: #555;
|
||||
user-select: none;
|
||||
background-color: #fff;
|
||||
border: .075rem solid #ddd;
|
||||
border: $input-border-width solid #ddd;
|
||||
border-radius: .25rem;
|
||||
@include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05));
|
||||
}
|
||||
@@ -219,7 +219,7 @@
|
||||
color: #555;
|
||||
content: "Browse";
|
||||
background-color: #eee;
|
||||
border: .075rem solid #ddd;
|
||||
border: $input-border-width solid #ddd;
|
||||
border-radius: 0 .25rem .25rem 0;
|
||||
}
|
||||
|
||||
|
||||
+8
-6
@@ -1,4 +1,4 @@
|
||||
// The dropdown wrapper (div)
|
||||
// The dropdown wrapper (`<div>`)
|
||||
.dropup,
|
||||
.dropdown {
|
||||
position: relative;
|
||||
@@ -10,6 +10,7 @@
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-right: .25rem;
|
||||
margin-left: .25rem;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
@@ -33,7 +34,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// The dropdown menu (ul)
|
||||
// The dropdown menu
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
@@ -45,23 +46,24 @@
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0; // override default ul
|
||||
font-size: $font-size-base;
|
||||
color: $body-color;
|
||||
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
||||
list-style: none;
|
||||
background-color: $dropdown-bg;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid $dropdown-border;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
@include border-radius($border-radius);
|
||||
@include box-shadow(0 6px 12px rgba(0,0,0,.175));
|
||||
}
|
||||
|
||||
// Dividers (basically an hr) within the dropdown
|
||||
// Dividers (basically an `<hr>`) within the dropdown
|
||||
.dropdown-divider {
|
||||
@include nav-divider($dropdown-divider-bg);
|
||||
}
|
||||
|
||||
// Links, buttons, and more within the dropdown menu
|
||||
//
|
||||
// `<button>`-specific styles are denoted with `// for <button>s`
|
||||
// `<button>`-specific styles are denoted with `// For <button>s`
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
width: 100%; // For `<button>`s
|
||||
@@ -170,7 +172,7 @@
|
||||
|
||||
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
||||
//
|
||||
// Just add .dropup after the standard .dropdown class and you're set, bro.
|
||||
// Just add .dropup after the standard .dropdown class and you're set.
|
||||
// TODO: abstract this so that the navbar fixed styles are not placed here?
|
||||
|
||||
.dropup,
|
||||
|
||||
+13
-13
@@ -14,14 +14,14 @@
|
||||
background-color: $input-bg;
|
||||
// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
|
||||
background-image: none;
|
||||
border: $border-width solid $input-border;
|
||||
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||
border: $input-border-width solid $input-border-color;
|
||||
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||
@include border-radius($input-border-radius);
|
||||
@include box-shadow($input-box-shadow);
|
||||
@include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
|
||||
|
||||
// Make inputs at least the height of their button counterpart (base line-height + padding + border).
|
||||
// Only apply the height to textual inputs and some selcts.
|
||||
// Only apply the height to textual inputs and some selects.
|
||||
// &:not(textarea),
|
||||
// &:not(select[size]),
|
||||
// &:not(select[multiple]) {
|
||||
@@ -76,7 +76,7 @@
|
||||
// For use with horizontal and inline forms, when you need the label text to
|
||||
// align with the form controls.
|
||||
.form-control-label {
|
||||
padding: ($input-padding-y + $border-width) $input-padding-x;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
margin-bottom: 0; // Override the `<label>` default
|
||||
}
|
||||
|
||||
@@ -89,6 +89,8 @@
|
||||
// text within the input to become vertically misaligned. As a workaround, we
|
||||
// set a pixel line-height that matches the given height of the input, but only
|
||||
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
|
||||
//
|
||||
// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
input[type="date"],
|
||||
@@ -120,8 +122,8 @@
|
||||
.form-control-static {
|
||||
min-height: $input-height;
|
||||
// Size it appropriately next to real form controls
|
||||
padding-top: ($input-padding-y + $border-width);
|
||||
padding-bottom: ($input-padding-y + $border-width);
|
||||
padding-top: $input-padding-y;
|
||||
padding-bottom: $input-padding-y;
|
||||
// Remove default margin from `p`
|
||||
margin-bottom: 0;
|
||||
|
||||
@@ -259,7 +261,7 @@ input[type="checkbox"] {
|
||||
|
||||
.form-control-success,
|
||||
.form-control-warning,
|
||||
.form-control-error {
|
||||
.form-control-danger {
|
||||
padding-right: ($input-padding-x * 3);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right ($input-height * .25);
|
||||
@@ -283,11 +285,11 @@ input[type="checkbox"] {
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
.has-danger {
|
||||
@include form-control-validation($brand-danger);
|
||||
|
||||
.form-control-error {
|
||||
background-image: url($form-icon-error);
|
||||
.form-control-danger {
|
||||
background-image: url($form-icon-danger);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -352,7 +354,7 @@ input[type="checkbox"] {
|
||||
// .has-warning {
|
||||
// @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
|
||||
// }
|
||||
// .has-error {
|
||||
// .has-danger {
|
||||
// @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
|
||||
// }
|
||||
//
|
||||
@@ -378,8 +380,6 @@ input[type="checkbox"] {
|
||||
//
|
||||
// Requires wrapping inputs and labels with `.form-group` for proper display of
|
||||
// default HTML form controls and our custom form controls (e.g., input groups).
|
||||
//
|
||||
// Heads up! This is mixin-ed into `.navbar-form` in _navbar.scss.
|
||||
|
||||
.form-inline {
|
||||
|
||||
|
||||
+17
-65
@@ -47,78 +47,30 @@
|
||||
|
||||
// Flex column reordering
|
||||
|
||||
.col-xs-first { order: -1; }
|
||||
.col-xs-last { order: 1; }
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.col-sm-first { order: -1; }
|
||||
.col-sm-last { order: 1; }
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
.col-md-first { order: -1; }
|
||||
.col-md-last { order: 1; }
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
.col-lg-first { order: -1; }
|
||||
.col-lg-last { order: 1; }
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
.col-xl-first { order: -1; }
|
||||
.col-xl-last { order: 1; }
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.col-#{$breakpoint}-first { order: -1; }
|
||||
.col-#{$breakpoint}-last { order: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
// Alignment for every column in row
|
||||
|
||||
.row-xs-top { align-items: flex-start; }
|
||||
.row-xs-center { align-items: center; }
|
||||
.row-xs-bottom { align-items: flex-end; }
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.row-sm-top { align-items: flex-start; }
|
||||
.row-sm-center { align-items: center; }
|
||||
.row-sm-bottom { align-items: flex-end; }
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
.row-md-top { align-items: flex-start; }
|
||||
.row-md-center { align-items: center; }
|
||||
.row-md-bottom { align-items: flex-end; }
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
.row-lg-top { align-items: flex-start; }
|
||||
.row-lg-center { align-items: center; }
|
||||
.row-lg-bottom { align-items: flex-end; }
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
.row-xl-top { align-items: flex-start; }
|
||||
.row-xl-center { align-items: center; }
|
||||
.row-xl-bottom { align-items: flex-end; }
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.row-#{$breakpoint}-top { align-items: flex-start; }
|
||||
.row-#{$breakpoint}-center { align-items: center; }
|
||||
.row-#{$breakpoint}-bottom { align-items: flex-end; }
|
||||
}
|
||||
}
|
||||
|
||||
// Alignment per column
|
||||
|
||||
.col-xs-top { align-self: flex-start; }
|
||||
.col-xs-center { align-self: center; }
|
||||
.col-xs-bottom { align-self: flex-end; }
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.col-sm-top { align-self: flex-start; }
|
||||
.col-sm-center { align-self: center; }
|
||||
.col-sm-bottom { align-self: flex-end; }
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.col-#{$breakpoint}-top { align-self: flex-start; }
|
||||
.col-#{$breakpoint}-center { align-self: center; }
|
||||
.col-#{$breakpoint}-bottom { align-self: flex-end; }
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
.col-md-top { align-self: flex-start; }
|
||||
.col-md-center { align-self: center; }
|
||||
.col-md-bottom { align-self: flex-end; }
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
.col-lg-top { align-self: flex-start; }
|
||||
.col-lg-center { align-self: center; }
|
||||
.col-lg-bottom { align-self: flex-end; }
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
.col-xl-top { align-self: flex-start; }
|
||||
.col-xl-center { align-self: center; }
|
||||
.col-xl-bottom { align-self: flex-end; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
+26
-1
@@ -1,4 +1,10 @@
|
||||
// Responsive images (ensure images don't scale beyond their parents)
|
||||
//
|
||||
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
|
||||
// We previously tried the "images are responsive by default" approach in Bootstrap v2,
|
||||
// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
|
||||
// which weren't expecting the images within themselves to be involuntarily resized.
|
||||
// See also https://github.com/twbs/bootstrap/issues/18178
|
||||
.img-fluid {
|
||||
@include img-fluid();
|
||||
}
|
||||
@@ -13,7 +19,7 @@
|
||||
padding: $thumbnail-padding;
|
||||
line-height: $line-height;
|
||||
background-color: $thumbnail-bg;
|
||||
border: 1px solid $thumbnail-border;
|
||||
border: $thumbnail-border-width solid $thumbnail-border-color;
|
||||
border-radius: $thumbnail-border-radius;
|
||||
transition: all .2s ease-in-out;
|
||||
@include box-shadow(0 1px 2px rgba(0,0,0,.075));
|
||||
@@ -26,3 +32,22 @@
|
||||
.img-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
//
|
||||
// Figures
|
||||
//
|
||||
|
||||
.figure {
|
||||
// Ensures the caption's text aligns with the image.
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.figure-img {
|
||||
margin-bottom: ($spacer-y / 2);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.figure-caption {
|
||||
font-size: 90%;
|
||||
color: $gray-light;
|
||||
}
|
||||
|
||||
+14
-6
@@ -19,6 +19,10 @@
|
||||
// proper border colors.
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
// Bring the "active" form control to the front
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
}
|
||||
@if $enable-flex {
|
||||
flex: 1;
|
||||
} @else {
|
||||
@@ -87,7 +91,7 @@
|
||||
color: $input-color;
|
||||
text-align: center;
|
||||
background-color: $input-group-addon-bg;
|
||||
border: 1px solid $input-group-addon-border-color;
|
||||
border: $input-border-width solid $input-group-addon-border-color;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// Sizing
|
||||
@@ -156,26 +160,30 @@
|
||||
> .btn {
|
||||
position: relative;
|
||||
+ .btn {
|
||||
margin-left: -1px;
|
||||
margin-left: (-$btn-border-width);
|
||||
}
|
||||
// Bring the "active" button to the front
|
||||
@include hover-focus-active {
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
// Negative margin to only have a 1px border between the two
|
||||
// Negative margin to only have a single, shared border between the two
|
||||
&:first-child {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
margin-right: -1px;
|
||||
margin-right: (-$btn-border-width);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
z-index: 2;
|
||||
margin-left: -1px;
|
||||
margin-left: (-$btn-border-width);
|
||||
// Because specificity
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,18 +3,16 @@
|
||||
margin-bottom: $jumbotron-padding;
|
||||
background-color: $jumbotron-bg;
|
||||
@include border-radius($border-radius-lg);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: ($jumbotron-padding * 2) $jumbotron-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron-hr {
|
||||
border-top-color: darken($jumbotron-bg, 10%);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.jumbotron {
|
||||
padding: ($jumbotron-padding * 2) $jumbotron-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron-fluid {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
|
||||
+4
-3
@@ -7,7 +7,7 @@
|
||||
display: inline-block;
|
||||
padding: .25em .4em;
|
||||
font-size: 75%;
|
||||
font-weight: bold;
|
||||
font-weight: $label-font-weight;
|
||||
line-height: 1;
|
||||
color: $label-color;
|
||||
text-align: center;
|
||||
@@ -43,10 +43,11 @@ a.label {
|
||||
.label-pill {
|
||||
padding-right: .6em;
|
||||
padding-left: .6em;
|
||||
border-radius: 1rem;
|
||||
// Use a higher than normal value to ensure completely rounded edges when
|
||||
// customizing padding or font-size on labels.
|
||||
@include border-radius(10rem);
|
||||
}
|
||||
|
||||
|
||||
// Colors
|
||||
//
|
||||
// Contextual variations (linked labels get darker on :hover).
|
||||
|
||||
+15
-3
@@ -18,9 +18,9 @@
|
||||
display: block;
|
||||
padding: .75rem 1.25rem;
|
||||
// Place the border on the list items and negative margin up for better styling
|
||||
margin-bottom: -$border-width;
|
||||
margin-bottom: -$list-group-border-width;
|
||||
background-color: $list-group-bg;
|
||||
border: $border-width solid $list-group-border;
|
||||
border: $list-group-border-width solid $list-group-border-color;
|
||||
|
||||
// Round the first and last items
|
||||
&:first-child {
|
||||
@@ -34,9 +34,21 @@
|
||||
|
||||
.list-group-flush {
|
||||
.list-group-item {
|
||||
border-width: $border-width 0;
|
||||
border-width: $list-group-border-width 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.list-group-item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.list-group-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
+1
-6
@@ -2,12 +2,6 @@
|
||||
//
|
||||
// Used in conjunction with global variables to enable certain theme features.
|
||||
|
||||
@mixin border-radius($radius: $border-radius) {
|
||||
@if $enable-rounded {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin box-shadow($shadow...) {
|
||||
@if $enable-shadows {
|
||||
box-shadow: $shadow;
|
||||
@@ -39,6 +33,7 @@
|
||||
@import "mixins/alert";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/pagination";
|
||||
@import "mixins/lists";
|
||||
@import "mixins/list-group";
|
||||
@import "mixins/nav-divider";
|
||||
@import "mixins/forms";
|
||||
|
||||
+8
-1
@@ -32,6 +32,11 @@
|
||||
// Nav inline
|
||||
|
||||
.nav-inline {
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.nav-item + .nav-item,
|
||||
.nav-link + .nav-link {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
@@ -59,7 +64,7 @@
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: $nav-link-padding;
|
||||
border: 1px solid transparent;
|
||||
border: $nav-tabs-link-border-width solid transparent;
|
||||
@include border-radius($border-radius $border-radius 0 0);
|
||||
|
||||
@include hover-focus {
|
||||
@@ -91,6 +96,8 @@
|
||||
//
|
||||
|
||||
.nav-pills {
|
||||
@include clearfix();
|
||||
|
||||
.nav-item {
|
||||
float: left;
|
||||
|
||||
|
||||
+1
-1
@@ -14,7 +14,7 @@
|
||||
display: inline-block;
|
||||
padding: 5px 14px;
|
||||
background-color: $pager-bg;
|
||||
border: 1px solid $pager-border;
|
||||
border: $pager-border-width solid $pager-border-color;
|
||||
border-radius: $pager-border-radius;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
color: $pagination-color;
|
||||
text-decoration: none;
|
||||
background-color: $pagination-bg;
|
||||
border: 1px solid $pagination-border;
|
||||
border: $pagination-border-width solid $pagination-border-color;
|
||||
}
|
||||
&:first-child {
|
||||
> a,
|
||||
|
||||
+2
-2
@@ -12,7 +12,7 @@
|
||||
font-size: $font-size-sm;
|
||||
background-color: $popover-bg;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid $popover-border-color;
|
||||
border: $popover-border-width solid $popover-border-color;
|
||||
@include border-radius($border-radius-lg);
|
||||
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
|
||||
|
||||
@@ -107,7 +107,7 @@
|
||||
margin: 0; // reset heading margin
|
||||
font-size: $font-size-base;
|
||||
background-color: $popover-title-bg;
|
||||
border-bottom: 1px solid darken($popover-title-bg, 5%);
|
||||
border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
|
||||
@include border-radius(($border-radius-lg - 1) ($border-radius-lg - 1) 0 0);
|
||||
}
|
||||
|
||||
|
||||
+2
-2
@@ -24,7 +24,7 @@
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
border: $border-width solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
}
|
||||
}
|
||||
.label {
|
||||
border: 1px solid #000;
|
||||
border: $border-width solid #000;
|
||||
}
|
||||
|
||||
.table {
|
||||
|
||||
@@ -111,6 +111,7 @@
|
||||
@include gradient-striped();
|
||||
background-size: $spacer-y $spacer-y;
|
||||
}
|
||||
// IE9
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-bar-striped {
|
||||
@include gradient-striped();
|
||||
@@ -129,6 +130,7 @@
|
||||
.progress-animated[value]::-moz-progress-bar {
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
// IE9
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-animated .progress-bar-striped {
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
|
||||
+37
-5
@@ -41,10 +41,11 @@ html {
|
||||
// and apply some conditional CSS.
|
||||
//
|
||||
// See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
|
||||
|
||||
|
||||
//
|
||||
// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
|
||||
// `.class-name { @import "bootstrap"; }`).
|
||||
//
|
||||
// Includes future-proofed vendor prefixes as well.
|
||||
@at-root {
|
||||
@-moz-viewport { width: device-width; }
|
||||
@-ms-viewport { width: device-width; }
|
||||
@@ -53,6 +54,7 @@ html {
|
||||
@viewport { width: device-width; }
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Reset HTML, body, and more
|
||||
//
|
||||
@@ -127,7 +129,7 @@ ul ol {
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
font-weight: $dt-font-weight;
|
||||
}
|
||||
|
||||
dd {
|
||||
@@ -191,6 +193,8 @@ img {
|
||||
// By default, `<img>`s are `inline-block`. This assumes that, and vertically
|
||||
// centers them. This won't apply should you reset them to `block` level.
|
||||
vertical-align: middle;
|
||||
// Note: `<img>`s are deliberately not made responsive by default.
|
||||
// For the rationale behind this, see the comments on the `.img-fluid` class.
|
||||
}
|
||||
|
||||
|
||||
@@ -199,13 +203,34 @@ img {
|
||||
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
|
||||
// for traditionally non-focusable elements with role="button"
|
||||
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||
// Upstream patch for normalize.css submitted: https://github.com/necolas/normalize.css/pull/379 - remove this fix once that is merged
|
||||
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
|
||||
//
|
||||
// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
|
||||
// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
|
||||
// However, they DO support removing the click delay via `touch-action: manipulation`.
|
||||
// See:
|
||||
// * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
|
||||
// * http://caniuse.com/#feat=css-touch-action
|
||||
// * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role="button"],
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
//
|
||||
// Tables
|
||||
//
|
||||
@@ -234,7 +259,7 @@ th {
|
||||
//
|
||||
|
||||
label {
|
||||
// Allow labels can use `margin` for spacing.
|
||||
// Allow labels to use `margin` for spacing.
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
@@ -249,6 +274,8 @@ textarea {
|
||||
// properly inherited. However, `line-height` isn't addressed there. Using this
|
||||
// ensures we don't need to unnecessarily redeclare the global font stack.
|
||||
line-height: inherit;
|
||||
// iOS adds rounded borders by default
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
@@ -295,3 +322,8 @@ output {
|
||||
// line-height: $line-height;
|
||||
// color: $input-color;
|
||||
}
|
||||
|
||||
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -22,17 +22,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Modifier class for 21:9 aspect ratio
|
||||
.embed-responsive-21by9 {
|
||||
padding-bottom: percentage(9 / 21);
|
||||
}
|
||||
|
||||
// Modifier class for 16:9 aspect ratio
|
||||
.embed-responsive-16by9 {
|
||||
padding-bottom: percentage(9 / 16);
|
||||
}
|
||||
|
||||
// Modifier class for 4:3 aspect ratio
|
||||
.embed-responsive-4by3 {
|
||||
padding-bottom: percentage(3 / 4);
|
||||
}
|
||||
|
||||
.embed-responsive-1by1 {
|
||||
padding-bottom: percentage(1 / 1);
|
||||
}
|
||||
|
||||
+15
-15
@@ -12,16 +12,16 @@
|
||||
padding: $table-cell-padding;
|
||||
line-height: $line-height;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid $table-border-color;
|
||||
border-top: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
thead th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid $table-border-color;
|
||||
border-bottom: (2 * $table-border-width) solid $table-border-color;
|
||||
}
|
||||
|
||||
tbody + tbody {
|
||||
border-top: 2px solid $table-border-color;
|
||||
border-top: (2 * $table-border-width) solid $table-border-color;
|
||||
}
|
||||
|
||||
.table {
|
||||
@@ -47,17 +47,17 @@
|
||||
// Add borders all around the table and between all the columns.
|
||||
|
||||
.table-bordered {
|
||||
border: 1px solid $table-border-color;
|
||||
border: $table-border-width solid $table-border-color;
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid $table-border-color;
|
||||
border: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
thead {
|
||||
th,
|
||||
td {
|
||||
border-bottom-width: 2px;
|
||||
border-bottom-width: (2 * $table-border-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -109,13 +109,13 @@
|
||||
.table-responsive {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
|
||||
overflow-x: auto;
|
||||
|
||||
// Todo: find out if we need this still.
|
||||
// TODO: find out if we need this still.
|
||||
//
|
||||
// border: 1px solid $table-border-color;
|
||||
// -ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
// min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
|
||||
// border: $table-border-width solid $table-border-color;
|
||||
// -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
|
||||
}
|
||||
|
||||
|
||||
@@ -160,11 +160,11 @@
|
||||
|
||||
th,
|
||||
td {
|
||||
border-top: 1px solid $table-border-color;
|
||||
border-left: 1px solid $table-border-color;
|
||||
border-top: $table-border-width solid $table-border-color;
|
||||
border-left: $table-border-width solid $table-border-color;
|
||||
|
||||
&:last-child {
|
||||
border-right: 1px solid $table-border-color;
|
||||
border-right: $table-border-width solid $table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -175,7 +175,7 @@
|
||||
tr:last-child {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 1px solid $table-border-color;
|
||||
border-bottom: $table-border-width solid $table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -187,7 +187,7 @@
|
||||
th,
|
||||
td {
|
||||
display: block !important;
|
||||
border: 1px solid $table-border-color;
|
||||
border: $table-border-width solid $table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+21
-44
@@ -4,29 +4,29 @@
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
font-family: $headings-font-family;
|
||||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
color: $headings-color;
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3 {
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
}
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
}
|
||||
h1 { font-size: $font-size-h1; }
|
||||
h2 { font-size: $font-size-h2; }
|
||||
h3 { font-size: $font-size-h3; }
|
||||
h4 { font-size: $font-size-h4; }
|
||||
h5 { font-size: $font-size-h5; }
|
||||
h6 { font-size: $font-size-h6; }
|
||||
|
||||
h1, .h1 { font-size: $font-size-h1; }
|
||||
h2, .h2 { font-size: $font-size-h2; }
|
||||
h3, .h3 { font-size: $font-size-h3; }
|
||||
h4, .h4 { font-size: $font-size-h4; }
|
||||
h5, .h5 { font-size: $font-size-h5; }
|
||||
h6, .h6 { font-size: $font-size-h6; }
|
||||
// These declarations are kept separate from and placed after
|
||||
// the previous tag-based declarations so that the classes beat the tags in
|
||||
// the CSS cascade, and thus <h1 class="h2"> will be styled like an h2.
|
||||
.h1 { font-size: $font-size-h1; }
|
||||
.h2 { font-size: $font-size-h2; }
|
||||
.h3 { font-size: $font-size-h3; }
|
||||
.h4 { font-size: $font-size-h4; }
|
||||
.h5 { font-size: $font-size-h5; }
|
||||
.h6 { font-size: $font-size-h6; }
|
||||
|
||||
.lead {
|
||||
font-size: $lead-font-size;
|
||||
@@ -85,22 +85,19 @@ mark,
|
||||
// Lists
|
||||
//
|
||||
|
||||
// Unstyled keeps list items block level, just removes default browser padding and list-style
|
||||
.list-unstyled {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
@include list-unstyled;
|
||||
}
|
||||
|
||||
// Inline turns list items into inline-block
|
||||
.list-inline {
|
||||
padding-left: 0;
|
||||
margin-left: -5px;
|
||||
list-style: none;
|
||||
@include list-unstyled;
|
||||
margin-left: -$list-inline-padding;
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
padding-right: $list-inline-padding;
|
||||
padding-left: $list-inline-padding;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -165,23 +162,3 @@ mark,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Figures
|
||||
//
|
||||
|
||||
.figure {
|
||||
// Ensures the caption's text aligns with the image.
|
||||
display: inline-block;
|
||||
|
||||
> img {
|
||||
@extend .img-fluid;
|
||||
margin-bottom: ($spacer-y / 2);
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.figure-caption {
|
||||
font-size: 90%;
|
||||
color: $gray-light;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
//
|
||||
// Contextual backgrounds
|
||||
//
|
||||
|
||||
// Inverse
|
||||
// TODO: redo this as a proper class
|
||||
.bg-inverse {
|
||||
color: $gray-lighter;
|
||||
background-color: $gray-dark;
|
||||
}
|
||||
|
||||
.bg-faded {
|
||||
background-color: $gray-lightest;
|
||||
}
|
||||
|
||||
@include bg-variant('.bg-primary', $brand-primary);
|
||||
|
||||
@include bg-variant('.bg-success', $brand-success);
|
||||
|
||||
@include bg-variant('.bg-info', $brand-info);
|
||||
|
||||
@include bg-variant('.bg-warning', $brand-warning);
|
||||
|
||||
@include bg-variant('.bg-danger', $brand-danger);
|
||||
@@ -1,5 +1,5 @@
|
||||
//
|
||||
// Mixins
|
||||
// Responsive utilities
|
||||
//
|
||||
|
||||
@each $bp in map-keys($grid-breakpoints) {
|
||||
|
||||
+30
-72
@@ -10,12 +10,18 @@
|
||||
@include center-block();
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
@include pull-right();
|
||||
}
|
||||
|
||||
.pull-left {
|
||||
@include pull-left();
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.pull-#{$breakpoint}-left {
|
||||
@include pull-left();
|
||||
}
|
||||
.pull-#{$breakpoint}-right {
|
||||
@include pull-right();
|
||||
}
|
||||
.pull-#{$breakpoint}-none {
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -31,13 +37,8 @@
|
||||
@include sr-only-focusable();
|
||||
}
|
||||
|
||||
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.text-hide {
|
||||
@@ -51,48 +52,31 @@
|
||||
|
||||
// Alignment
|
||||
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-center { text-align: center; }
|
||||
.text-justify { text-align: justify; }
|
||||
.text-nowrap { white-space: nowrap; }
|
||||
.text-justify { text-align: justify !important; }
|
||||
.text-nowrap { white-space: nowrap !important; }
|
||||
.text-truncate { @include text-truncate; }
|
||||
|
||||
// Responsive alignment
|
||||
|
||||
.text-xs-left { text-align: left; }
|
||||
.text-xs-right { text-align: right; }
|
||||
.text-xs-center { text-align: center; }
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.text-sm-left { text-align: left; }
|
||||
.text-sm-right { text-align: right; }
|
||||
.text-sm-center { text-align: center; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.text-md-left { text-align: left; }
|
||||
.text-md-right { text-align: right; }
|
||||
.text-md-center { text-align: center; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.text-lg-left { text-align: left; }
|
||||
.text-lg-right { text-align: right; }
|
||||
.text-lg-center { text-align: center; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
.text-xl-left { text-align: left; }
|
||||
.text-xl-right { text-align: right; }
|
||||
.text-xl-center { text-align: center; }
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.text-#{$breakpoint}-left { text-align: left !important; }
|
||||
.text-#{$breakpoint}-right { text-align: right !important; }
|
||||
.text-#{$breakpoint}-center { text-align: center !important; }
|
||||
}
|
||||
}
|
||||
|
||||
// Transformation
|
||||
|
||||
.text-lowercase { text-transform: lowercase; }
|
||||
.text-uppercase { text-transform: uppercase; }
|
||||
.text-capitalize { text-transform: capitalize; }
|
||||
.text-lowercase { text-transform: lowercase !important; }
|
||||
.text-uppercase { text-transform: uppercase !important; }
|
||||
.text-capitalize { text-transform: capitalize !important; }
|
||||
|
||||
// Weight and italics
|
||||
|
||||
.font-weight-normal { font-weight: normal; }
|
||||
.font-weight-bold { font-weight: bold; }
|
||||
.font-italic { font-style: italic; }
|
||||
|
||||
// Contextual colors
|
||||
|
||||
@@ -109,29 +93,3 @@
|
||||
@include text-emphasis-variant('.text-warning', $brand-warning);
|
||||
|
||||
@include text-emphasis-variant('.text-danger', $brand-danger);
|
||||
|
||||
|
||||
// Contextual backgrounds
|
||||
// For now we'll leave these alongside the text classes until v4 when we can
|
||||
// safely shift things around (per SemVer rules).
|
||||
|
||||
// Inverse
|
||||
// Todo: redo this as a proper class
|
||||
.bg-inverse {
|
||||
color: $gray-lighter;
|
||||
background-color: $gray-dark;
|
||||
}
|
||||
|
||||
.bg-faded {
|
||||
background-color: $gray-lightest;
|
||||
}
|
||||
|
||||
@include bg-variant('.bg-primary', $brand-primary);
|
||||
|
||||
@include bg-variant('.bg-success', $brand-success);
|
||||
|
||||
@include bg-variant('.bg-info', $brand-info);
|
||||
|
||||
@include bg-variant('.bg-warning', $brand-warning);
|
||||
|
||||
@include bg-variant('.bg-danger', $brand-danger);
|
||||
|
||||
Vendored
+22
-17
@@ -8,41 +8,46 @@
|
||||
// Variables
|
||||
//
|
||||
|
||||
// Grid system
|
||||
|
||||
// Grid breakpoints
|
||||
//
|
||||
// Define your custom responsive grid.
|
||||
// Define the minimum and maximum dimensions at which your layout will change,
|
||||
// adapting to different screen sizes, for use in media queries.
|
||||
|
||||
$grid-breakpoints: (
|
||||
// Extra small screen / phone
|
||||
xs: 0,
|
||||
// Small screen / phone
|
||||
sm: 34em,
|
||||
sm: 544px,
|
||||
// Medium screen / tablet
|
||||
md: 48em,
|
||||
md: 768px,
|
||||
// Large screen / desktop
|
||||
lg: 62em,
|
||||
lg: 992px,
|
||||
// Extra large screen / wide desktop
|
||||
xl: 75em
|
||||
xl: 1200px
|
||||
) !default;
|
||||
|
||||
// Number of columns in the grid.
|
||||
$grid-columns: 12 !default;
|
||||
|
||||
// Padding between columns. Gets divided in half for the left and right.
|
||||
$grid-gutter-width: 1.5rem !default;
|
||||
|
||||
|
||||
// Container sizes
|
||||
// Grid containers
|
||||
//
|
||||
// Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
$container-max-widths: (
|
||||
sm: 34rem, // 480
|
||||
md: 45rem, // 720
|
||||
lg: 60rem, // 960
|
||||
xl: 72.25rem // 1140
|
||||
sm: 576px,
|
||||
md: 720px,
|
||||
lg: 940px,
|
||||
xl: 1140px
|
||||
) !default;
|
||||
|
||||
|
||||
// Grid columns
|
||||
//
|
||||
// Set the number of columns and specify the width of the gutters.
|
||||
|
||||
$grid-columns: 12 !default;
|
||||
$grid-gutter-width: 1.875rem !default; // 30px
|
||||
|
||||
|
||||
//
|
||||
// Grid mixins
|
||||
//
|
||||
|
||||
Vendored
+4
-3
@@ -4,11 +4,11 @@
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
// Core variables and mixins
|
||||
// Core variables and mixins
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
// // Reset and dependencies
|
||||
// Reset and dependencies
|
||||
@import "normalize";
|
||||
@import "print";
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
@import "forms";
|
||||
@import "buttons";
|
||||
|
||||
// // Components
|
||||
// Components
|
||||
@import "animation";
|
||||
@import "dropdown";
|
||||
@import "button-group";
|
||||
@@ -51,5 +51,6 @@
|
||||
|
||||
// Utility classes
|
||||
@import "utilities";
|
||||
@import "utilities-background";
|
||||
@import "utilities-spacing";
|
||||
@import "utilities-responsive";
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
// Contextual backgrounds
|
||||
|
||||
// [converter] $parent hack
|
||||
@mixin bg-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
color: #fff !important;
|
||||
background-color: $color !important;
|
||||
}
|
||||
a#{$parent} {
|
||||
@include hover-focus {
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
// Single side border-radius
|
||||
|
||||
@mixin border-radius($radius: $border-radius) {
|
||||
@if $enable-rounded {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-top-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-top-right-radius: $radius;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
//
|
||||
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||||
//
|
||||
// (xs: 0, sm: 34rem, md: 45rem)
|
||||
// (xs: 0, sm: 544px, md: 768px)
|
||||
//
|
||||
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
//
|
||||
// >> breakpoint-next(sm)
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoints: (xs: 0, sm: 34rem, md: 45rem))
|
||||
// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
|
||||
// md
|
||||
@@ -21,8 +21,8 @@
|
||||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
//
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 34rem, md: 45rem))
|
||||
// 34rem
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px))
|
||||
// 544px
|
||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
@return if($min != 0, $min, null);
|
||||
@@ -31,11 +31,11 @@
|
||||
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
||||
// The maximum value is calculated as the minimum of the next one less 0.1.
|
||||
//
|
||||
// >> breakpoint-max(sm, (xs: 0, sm: 34rem, md: 45rem))
|
||||
// 44.9rem
|
||||
// >> breakpoint-max(sm, (xs: 0, sm: 544px, md: 768px))
|
||||
// 767px
|
||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||
$next: breakpoint-next($name, $breakpoints);
|
||||
@return if($next, breakpoint-min($next, $breakpoints) - 0.1, null);
|
||||
@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
@@ -74,3 +74,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Media that spans multiple breakpoint widths.
|
||||
// Makes the @content apply between the min and max breakpoints
|
||||
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
|
||||
@include media-breakpoint-up($lower, $breakpoints) {
|
||||
@include media-breakpoint-down($upper, $breakpoints) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
@mixin form-control-validation($color) {
|
||||
// Color the label and help text
|
||||
.help-block,
|
||||
.text-help,
|
||||
.form-control-label,
|
||||
.radio,
|
||||
.checkbox,
|
||||
|
||||
@@ -3,11 +3,13 @@
|
||||
// Generate semantic grid columns with these mixins.
|
||||
|
||||
@mixin make-container($gutter: $grid-gutter-width) {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
@include clearfix();
|
||||
@if not $enable-flex {
|
||||
@include clearfix();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -33,9 +35,7 @@
|
||||
|
||||
@mixin make-col($gutter: $grid-gutter-width) {
|
||||
position: relative;
|
||||
@if $enable-flex {
|
||||
// Do nothing
|
||||
} @else {
|
||||
@if not $enable-flex {
|
||||
float: left;
|
||||
}
|
||||
min-height: 1px;
|
||||
|
||||
@@ -21,12 +21,13 @@
|
||||
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
|
||||
background-image: url($file-1x);
|
||||
|
||||
// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
|
||||
// but doesn't convert dppx=>dpi.
|
||||
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
|
||||
// Compatibility info: http://caniuse.com/#feat=css-media-resolution
|
||||
@media
|
||||
only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
||||
only screen and ( min-device-pixel-ratio: 2),
|
||||
only screen and ( min-resolution: 192dpi),
|
||||
only screen and ( min-resolution: 2dppx) {
|
||||
only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
|
||||
only screen and (min-resolution: 2dppx) { // Standardized
|
||||
background-image: url($file-2x);
|
||||
background-size: $width-1x $height-1x;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
// Lists
|
||||
|
||||
// Unstyled keeps list items block level, just removes default browser padding and list-style
|
||||
@mixin list-unstyled {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
@@ -9,6 +9,7 @@
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
// IE9
|
||||
@media screen and (min-width:0\0) {
|
||||
.progress-bar {
|
||||
background-color: $color;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
@mixin text-emphasis-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
color: $color;
|
||||
color: $color !important;
|
||||
}
|
||||
a#{$parent} {
|
||||
@include hover-focus {
|
||||
|
||||
Reference in New Issue
Block a user