rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Rename .navbar-toggleable-xs to .navbar-toggleable + more cleanup (#21226)

Browse Source 
* 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 2016-11-27 23:23:12 -07:00 committed by Mark Otto
parent 869bd23937
commit 54908a95a8
15 changed files with 82 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/_includes/nav-home.html
View File

@ -1,7 +1,7 @@
<header class="navbar navbar-light navbar-static-top bd-navbar">
<div class="container">
{% comment %}
<nav class="nav navbar-nav float-xs-right">
<nav class="nav navbar-nav float-right">
<div class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v{{ site.current_version }}
@ -27,12 +27,12 @@
<nav>
<div class="clearfix">
<button class="navbar-toggler float-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation"></button>
<button class="navbar-toggler float-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
Bootstrap
</a>
</div>
<div class="collapse navbar-toggleable-xs" id="bd-main-nav">
<div class="collapse navbar-toggleable" id="bd-main-nav">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>

2
docs/examples/album/index.html
View File

@ -103,7 +103,7 @@
<footer class="text-muted">
<div class="container">
<p class="float-xs-right">
<p class="float-right">
<a href="#">Back to top</a>
</p>
<p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>

2
docs/examples/carousel/index.html
View File

@ -164,7 +164,7 @@
<!-- FOOTER -->
<footer>
<p class="float-xs-right"><a href="#">Back to top</a></p>
<p class="float-right"><a href="#">Back to top</a></p>
<p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</footer>

2
docs/examples/narrow-jumbotron/index.html
View File

@ -23,7 +23,7 @@
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills float-xs-right">
<ul class="nav nav-pills float-right">
<li class="nav-item">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
</li>

4
docs/examples/navbar/index.html
View File

@ -23,7 +23,7 @@
<div class="container">
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-xs" id="navbar-header">
<div class="collapse navbar-toggleable" id="navbar-header">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
@ -39,7 +39,7 @@
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline float-xs-right">
<form class="form-inline float-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>

2
docs/examples/offcanvas/index.html
View File

@ -35,7 +35,7 @@
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-12 col-sm-9">
<p class="float-xs-right hidden-sm-up">
<p class="float-right hidden-sm-up">
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">

2
docs/examples/sticky-footer-navbar/index.html
View File

@ -31,7 +31,7 @@
<nav class="navbar navbar-light navbar-static-top bg-faded">
<div class="container">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-expanded="false" aria-controls="exCollapsingNavbar2" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<div class="collapse navbar-toggleable" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#">Sticky footer</a>
<ul class="nav navbar-nav">
<li class="nav-item active">

4
docs/examples/tooltip-viewport/index.html
View File

@ -20,7 +20,7 @@
<body>
<button class="btn btn-secondary float-xs-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
<button class="btn btn-secondary float-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
<button class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button>
<button class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button>
@ -30,7 +30,7 @@
<button class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button>
<button class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button>
<button class="btn btn-secondary float-xs-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
<button class="btn btn-secondary float-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
<button class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
</div>

104
scss/_navbar.scss
View File

@ -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

10
scss/utilities/_align.scss
View File

@ -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; }

8
scss/utilities/_borders.scss
View File

@ -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

24
scss/utilities/_display.scss
View File

@ -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; }
}
}
}

8
scss/utilities/_float.scss
View File

@ -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; }
}
}
}

4
scss/utilities/_spacing.scss
View File

@ -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; }

18
scss/utilities/_text.scss
View File

@ -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