mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-25 22:41:20 +02:00
Rename .navbar-toggleable-xs to .navbar-toggleable + more cleanup (#21226)
* Clean up some utilities - Align CSS properties - In `_spacing.scss`, we had a comment saying what 'a' was for, but we removed that so this comment no longer applies * Remove '-xs' from `.navbar-toggleable-xs` and remove duplication * Fix outdated classes to use newer ones
This commit is contained in:
Starsam80
Mark Otto
@@ -128,42 +128,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// scss-lint:disable ImportantRule
|
||||
.navbar-toggleable {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
|
||||
&-#{$breakpoint} {
|
||||
@include clearfix;
|
||||
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
.navbar-brand {
|
||||
display: block;
|
||||
float: none;
|
||||
margin-top: .5rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
|
||||
.dropdown-menu {
|
||||
position: static;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($next) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// scss-lint:enable ImportantRule
|
||||
|
||||
|
||||
// Navigation
|
||||
//
|
||||
// Custom navbar navigation built on the base `.nav` styles.
|
||||
@@ -284,48 +248,48 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar toggleable
|
||||
//
|
||||
// Custom override for collapse plugin in navbar.
|
||||
|
||||
// Placed at the end of the file so it can override some CSS properties
|
||||
// scss-lint:disable ImportantRule
|
||||
.navbar-toggleable {
|
||||
&-xs {
|
||||
@include clearfix;
|
||||
@include media-breakpoint-down(xs) {
|
||||
.navbar-nav .nav-item {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
|
||||
&-sm {
|
||||
@include clearfix;
|
||||
@include media-breakpoint-down(sm) {
|
||||
.navbar-nav .nav-item {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
// Get rid of the 'xs' prefix while reducing duplication
|
||||
#{if(breakpoint-min($breakpoint, $grid-breakpoints), "&-#{$breakpoint}", "&")} {
|
||||
@include clearfix;
|
||||
|
||||
&-md {
|
||||
@include clearfix;
|
||||
@include media-breakpoint-down(md) {
|
||||
.navbar-nav .nav-item {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
.navbar-brand {
|
||||
display: block;
|
||||
float: none;
|
||||
margin-top: .5rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
|
||||
.dropdown-menu {
|
||||
position: static;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($next) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// scss-lint:enable ImportantRule
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.align-baseline { vertical-align: baseline !important; } // Browser default
|
||||
.align-top { vertical-align: top !important; }
|
||||
.align-middle { vertical-align: middle !important; }
|
||||
.align-bottom { vertical-align: bottom !important; }
|
||||
.align-baseline { vertical-align: baseline !important; } // Browser default
|
||||
.align-top { vertical-align: top !important; }
|
||||
.align-middle { vertical-align: middle !important; }
|
||||
.align-bottom { vertical-align: bottom !important; }
|
||||
.align-text-bottom { vertical-align: text-bottom !important; }
|
||||
.align-text-top { vertical-align: text-top !important; }
|
||||
.align-text-top { vertical-align: text-top !important; }
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
// Border
|
||||
//
|
||||
|
||||
.border-0 { border: 0 !important; }
|
||||
.border-top-0 { border-top: 0 !important; }
|
||||
.border-right-0 { border-right: 0 !important; }
|
||||
.border-0 { border: 0 !important; }
|
||||
.border-top-0 { border-top: 0 !important; }
|
||||
.border-right-0 { border-right: 0 !important; }
|
||||
.border-bottom-0 { border-bottom: 0 !important; }
|
||||
.border-left-0 { border-left: 0 !important; }
|
||||
.border-left-0 { border-left: 0 !important; }
|
||||
|
||||
//
|
||||
// Border-radius
|
||||
|
||||
@@ -8,21 +8,21 @@
|
||||
$min: breakpoint-min($breakpoint, $grid-breakpoints);
|
||||
|
||||
@if $min {
|
||||
.d-#{$breakpoint}-none { display: none !important; }
|
||||
.d-#{$breakpoint}-inline { display: inline !important; }
|
||||
.d-#{$breakpoint}-none { display: none !important; }
|
||||
.d-#{$breakpoint}-inline { display: inline !important; }
|
||||
.d-#{$breakpoint}-inline-block { display: inline-block !important; }
|
||||
.d-#{$breakpoint}-block { display: block !important; }
|
||||
.d-#{$breakpoint}-table { display: table !important; }
|
||||
.d-#{$breakpoint}-table-cell { display: table-cell !important; }
|
||||
.d-#{$breakpoint}-flex { display: flex !important; }
|
||||
.d-#{$breakpoint}-block { display: block !important; }
|
||||
.d-#{$breakpoint}-table { display: table !important; }
|
||||
.d-#{$breakpoint}-table-cell { display: table-cell !important; }
|
||||
.d-#{$breakpoint}-flex { display: flex !important; }
|
||||
} @else {
|
||||
.d-none { display: none !important; }
|
||||
.d-inline { display: inline !important; }
|
||||
.d-none { display: none !important; }
|
||||
.d-inline { display: inline !important; }
|
||||
.d-inline-block { display: inline-block !important; }
|
||||
.d-block { display: block !important; }
|
||||
.d-table { display: table !important; }
|
||||
.d-table-cell { display: table-cell !important; }
|
||||
.d-flex { display: flex !important; }
|
||||
.d-block { display: block !important; }
|
||||
.d-table { display: table !important; }
|
||||
.d-table-cell { display: table-cell !important; }
|
||||
.d-flex { display: flex !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,14 +4,14 @@
|
||||
|
||||
@if $min {
|
||||
// everything else
|
||||
.float-#{$breakpoint}-left { @include float-left; }
|
||||
.float-#{$breakpoint}-left { @include float-left; }
|
||||
.float-#{$breakpoint}-right { @include float-right; }
|
||||
.float-#{$breakpoint}-none { @include float-none; }
|
||||
.float-#{$breakpoint}-none { @include float-none; }
|
||||
} @else {
|
||||
// xs
|
||||
.float-left { @include float-left; }
|
||||
.float-left { @include float-left; }
|
||||
.float-right { @include float-right; }
|
||||
.float-none { @include float-none; }
|
||||
.float-none { @include float-none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
@if $min {
|
||||
// everything else
|
||||
.#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
|
||||
.#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}: $length-y $length-x !important; }
|
||||
.#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top: $length-y !important; }
|
||||
.#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right: $length-x !important; }
|
||||
.#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; }
|
||||
@@ -39,7 +39,7 @@
|
||||
}
|
||||
} @else {
|
||||
// xs
|
||||
.#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
|
||||
.#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; }
|
||||
.#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; }
|
||||
.#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; }
|
||||
.#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
|
||||
// Alignment
|
||||
|
||||
.text-justify { text-align: justify !important; }
|
||||
.text-nowrap { white-space: nowrap !important; }
|
||||
.text-truncate { @include text-truncate; }
|
||||
.text-justify { text-align: justify !important; }
|
||||
.text-nowrap { white-space: nowrap !important; }
|
||||
.text-truncate { @include text-truncate; }
|
||||
|
||||
// Responsive alignment
|
||||
|
||||
@@ -28,15 +28,15 @@
|
||||
|
||||
// Transformation
|
||||
|
||||
.text-lowercase { text-transform: lowercase !important; }
|
||||
.text-uppercase { text-transform: uppercase !important; }
|
||||
.text-capitalize { text-transform: capitalize !important; }
|
||||
.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: $font-weight-normal; }
|
||||
.font-weight-bold { font-weight: $font-weight-bold; }
|
||||
.font-italic { font-style: italic; }
|
||||
.font-weight-normal { font-weight: $font-weight-normal; }
|
||||
.font-weight-bold { font-weight: $font-weight-bold; }
|
||||
.font-italic { font-style: italic; }
|
||||
|
||||
// Contextual colors
|
||||
|
||||
|
||||
Reference in New Issue
Block a user