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

Rename .flex-xs-* and .flex-items-xs-* to .flex-* and .flex-items-* (#21218)

Browse Source 
* Clean up _flex.scss a little

This commit just cleans up the formating of _flex.scss by changing
it so that it uses a single `@include media-breakpoint-up` instead
of multiple. It also aligns all of the CSS properties so it looks
a bit nicer.

* Remove `-xs` from flex classes
This commit is contained in:
Starsam80 2016-11-27 16:19:27 -07:00 committed by Mark Otto
parent 94be2d2254
commit 8d031090d0
5 changed files with 66 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/assets/scss/_component-examples.scss
View File

@ -19,9 +19,9 @@
}
}
.flex-items-xs-top,
.flex-items-xs-middle,
.flex-items-xs-bottom {
.flex-items-top,
.flex-items-middle,
.flex-items-bottom {
min-height: 6rem;
background-color: rgba(255,0,0,.1);
}

8
docs/components/list-group.md
View File

@ -46,19 +46,19 @@ Add badges to any list group item to show unread counts, activity, etc.
</ul>
{% endexample %}
When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-xs-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges.
When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges.
{% highlight html %}
<ul class="list-group">
<li class="list-group-item flex-items-xs-between">
<li class="list-group-item flex-items-between">
Cras justo odio
<span class="badge badge-default badge-pill">14</span>
</li>
<li class="list-group-item flex-items-xs-between">
<li class="list-group-item flex-items-between">
Dapibus ac facilisis in
<span class="badge badge-default badge-pill">2</span>
</li>
<li class="list-group-item flex-items-xs-between">
<li class="list-group-item flex-items-between">
Morbi leo risus
<span class="badge badge-default badge-pill">1</span>
</li>

2
docs/components/navs.md
View File

@ -282,7 +282,7 @@ And pills, too:
Using our [flexbox utilities]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), you can also customize your navigation components to change the alignment of nav items. For example, here are center aligned links on the inline nav component.
{% example html %}
<ul class="nav nav-inline d-flex flex-items-xs-center">
<ul class="nav nav-inline d-flex flex-items-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>

28
docs/layout/flexbox-grid.md
View File

@ -157,7 +157,7 @@ Use the flexbox alignment utilities to vertically align columns.
<div class="bd-example-row">
{% example html %}
<div class="container">
<div class="row flex-items-xs-top">
<div class="row flex-items-top">
<div class="col-xs">
One of three columns
</div>
@ -168,7 +168,7 @@ Use the flexbox alignment utilities to vertically align columns.
One of three columns
</div>
</div>
<div class="row flex-items-xs-middle">
<div class="row flex-items-middle">
<div class="col-xs">
One of three columns
</div>
@ -179,7 +179,7 @@ Use the flexbox alignment utilities to vertically align columns.
One of three columns
</div>
</div>
<div class="row flex-items-xs-bottom">
<div class="row flex-items-bottom">
<div class="col-xs">
One of three columns
</div>
@ -198,13 +198,13 @@ Use the flexbox alignment utilities to vertically align columns.
{% example html %}
<div class="container">
<div class="row">
<div class="col-xs flex-xs-top">
<div class="col-xs flex-top">
One of three columns
</div>
<div class="col-xs flex-xs-middle">
<div class="col-xs flex-middle">
One of three columns
</div>
<div class="col-xs flex-xs-bottom">
<div class="col-xs flex-bottom">
One of three columns
</div>
</div>
@ -219,7 +219,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
<div class="bd-example-row">
{% example html %}
<div class="container">
<div class="row flex-items-xs-left">
<div class="row flex-items-left">
<div class="col-4">
One of two columns
</div>
@ -227,7 +227,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
One of two columns
</div>
</div>
<div class="row flex-items-xs-center">
<div class="row flex-items-center">
<div class="col-4">
One of two columns
</div>
@ -235,7 +235,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
One of two columns
</div>
</div>
<div class="row flex-items-xs-right">
<div class="row flex-items-right">
<div class="col-4">
One of two columns
</div>
@ -243,7 +243,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
One of two columns
</div>
</div>
<div class="row flex-items-xs-around">
<div class="row flex-items-around">
<div class="col-4">
One of two columns
</div>
@ -251,7 +251,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
One of two columns
</div>
</div>
<div class="row flex-items-xs-between">
<div class="row flex-items-between">
<div class="col-4">
One of two columns
</div>
@ -271,13 +271,13 @@ Flexbox utilities for controlling the **visual order** of your content.
{% example html %}
<div class="container">
<div class="row">
<div class="col-xs flex-xs-unordered">
<div class="col-xs flex-unordered">
First, but unordered
</div>
<div class="col-xs flex-xs-last">
<div class="col-xs flex-last">
Second, but last
</div>
<div class="col-xs flex-xs-first">
<div class="col-xs flex-first">
Third, but first
</div>
</div>

68
scss/utilities/_flex.scss
View File

@ -4,34 +4,54 @@
@if $enable-flex {
@each $breakpoint in map-keys($grid-breakpoints) {
// Flex column reordering
@include media-breakpoint-up($breakpoint) {
.flex-#{$breakpoint}-first { order: -1; }
.flex-#{$breakpoint}-last { order: 1; }
.flex-#{$breakpoint}-unordered { order: 0; }
}
$min: breakpoint-min($breakpoint, $grid-breakpoints);
// Alignment for every item
@include media-breakpoint-up($breakpoint) {
.flex-items-#{$breakpoint}-top { align-items: flex-start; }
.flex-items-#{$breakpoint}-middle { align-items: center; }
.flex-items-#{$breakpoint}-bottom { align-items: flex-end; }
}
@if $min {
// Flex column reordering
.flex-#{$breakpoint}-first { order: -1; }
.flex-#{$breakpoint}-last { order: 1; }
.flex-#{$breakpoint}-unordered { order: 0; }
// Alignment per item
@include media-breakpoint-up($breakpoint) {
.flex-#{$breakpoint}-top { align-self: flex-start; }
.flex-#{$breakpoint}-middle { align-self: center; }
.flex-#{$breakpoint}-bottom { align-self: flex-end; }
}
// Alignment for every item
.flex-items-#{$breakpoint}-top { align-items: flex-start; }
.flex-items-#{$breakpoint}-middle { align-items: center; }
.flex-items-#{$breakpoint}-bottom { align-items: flex-end; }
// Horizontal alignment of item
@include media-breakpoint-up($breakpoint) {
.flex-items-#{$breakpoint}-left { justify-content: flex-start; }
.flex-items-#{$breakpoint}-center { justify-content: center; }
.flex-items-#{$breakpoint}-right { justify-content: flex-end; }
.flex-items-#{$breakpoint}-around { justify-content: space-around; }
.flex-items-#{$breakpoint}-between { justify-content: space-between; }
// Alignment per item
.flex-#{$breakpoint}-top { align-self: flex-start; }
.flex-#{$breakpoint}-middle { align-self: center; }
.flex-#{$breakpoint}-bottom { align-self: flex-end; }
// Horizontal alignment of item
.flex-items-#{$breakpoint}-left { justify-content: flex-start; }
.flex-items-#{$breakpoint}-center { justify-content: center; }
.flex-items-#{$breakpoint}-right { justify-content: flex-end; }
.flex-items-#{$breakpoint}-around { justify-content: space-around; }
.flex-items-#{$breakpoint}-between { justify-content: space-between; }
} @else {
// Flex column reordering
.flex-first { order: -1; }
.flex-last { order: 1; }
.flex-unordered { order: 0; }
// Alignment for every item
.flex-items-top { align-items: flex-start; }
.flex-items-middle { align-items: center; }
.flex-items-bottom { align-items: flex-end; }
// Alignment per item
.flex-top { align-self: flex-start; }
.flex-middle { align-self: center; }
.flex-bottom { align-self: flex-end; }
// Horizontal alignment of item
.flex-items-left { justify-content: flex-start; }
.flex-items-center { justify-content: center; }
.flex-items-right { justify-content: flex-end; }
.flex-items-around { justify-content: space-around; }
.flex-items-between { justify-content: space-between; }
}
}
}
}