mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 08:39:56 +02:00
Code Issues Releases Wiki Activity

Merge branch 'v4-dev' into carousel

Browse Source
This commit is contained in:
Mark Otto
2016-12-04 21:05:19 -08:00
parent 6782dd6e92 5a19d48705
commit 1e3ec89355
144 changed files with 2863 additions and 2399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/.scss-lint.yml
View File

@@ -492,7 +492,7 @@ linters:
SpaceBeforeBrace:
enabled: true
style: space # or 'new_line'
allow_single_line_padding: false
allow_single_line_padding: true
SpaceBetweenParens:
enabled: true

7
scss/_alert.scss
View File

@@ -4,7 +4,7 @@
.alert {
padding: $alert-padding-y $alert-padding-x;
margin-bottom: $spacer-y;
margin-bottom: $alert-margin-bottom;
border: $alert-border-width solid transparent;
@include border-radius($alert-border-radius);
}
@@ -26,13 +26,12 @@
// Expand the right padding and account for the close button's positioning.
.alert-dismissible {
padding-right: ($alert-padding-x * 2);
// Adjust close link position
.close {
position: relative;
top: -.125rem;
top: -$alert-padding-y;
right: -$alert-padding-x;
padding: $alert-padding-y $alert-padding-x;
color: inherit;
}
}

8
scss/_animation.scss
View File

@@ -1,6 +1,7 @@
.fade {
opacity: 0;
transition: opacity .15s linear;
@include transition(opacity .15s linear);
&.active {
opacity: 1;
@@ -30,7 +31,6 @@ tbody {
position: relative;
height: 0;
overflow: hidden;
transition-timing-function: ease;
transition-duration: .35s;
transition-property: height;
@include transition(height .35s ease);
}

3
scss/_card.scss
View File

@@ -7,9 +7,8 @@
display: block;
margin-bottom: $card-spacer-y;
background-color: $card-bg;
// border: $card-border-width solid $card-border-color;
@include border-radius($card-border-radius);
border: $card-border-width solid $card-border-color;
@include border-radius($card-border-radius);
}
.card-block {

2
scss/_carousel.scss
View File

@@ -16,7 +16,7 @@
// CSS3 transforms when supported by the browser
@include if-supports-3d-transforms() {
transition: transform .6s ease-in-out;
@include transition(transform .6s ease-in-out);
backface-visibility: hidden;
perspective: 1000px;
}

3
scss/_custom-forms.scss
View File

@@ -133,7 +133,8 @@
// Replaces the browser default select with a custom one, mostly pulled from
// http://primercss.io.
//
// Includes IE9-specific hacks (noted by ` \9`).
// Includes hacks for IE9 (noted by ` \9`), which may apply to other versions of
// IE, but not with any adverse affects.
.custom-select {
display: inline-block;

97
scss/_forms.scss
View File

@@ -67,7 +67,7 @@
select.form-control {
&:not([size]):not([multiple]) {
$select-border-width: ($border-width * 2);
height: calc(#{$input-height} - #{$select-border-width});
height: calc(#{$input-height} + #{$select-border-width});
}
&:focus::-ms-value {
@@ -235,21 +235,15 @@ select.form-control-lg {
// Radios and checkboxes on same line
.form-check-inline {
position: relative;
display: inline-block;
padding-left: 1.25rem;
margin-bottom: 0; // Override default `<label>` bottom margin
vertical-align: middle;
cursor: pointer;
.form-check-label {
vertical-align: middle;
}
+ .form-check-inline {
margin-left: .75rem;
}
&.disabled {
color: $text-muted;
cursor: $cursor-disabled;
}
}
@@ -306,14 +300,40 @@ select.form-control-lg {
// default HTML form controls and our custom form controls (e.g., input groups).
.form-inline {
@if $enable-flex {
display: flex;
flex-flow: row wrap;
// Because we use flex, the initial sizing of checkboxes is collapsed and
// doesn't occupy the full-width (which is what we want for xs grid tier),
// so we force that here.
.form-check {
width: 100%;
}
}
// Kick in the inline
@include media-breakpoint-up(sm) {
label {
@if $enable-flex {
display: flex;
align-items: center;
justify-content: center;
}
margin-bottom: 0;
}
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
@if $enable-flex {
display: flex;
flex: 0 0 auto;
flex-flow: row wrap;
} @else {
display: inline-block;
vertical-align: middle;
}
margin-bottom: 0;
vertical-align: middle;
}
// Allow folks to *not* use `.form-group`
@@ -329,20 +349,25 @@ select.form-control-lg {
}
.input-group {
display: inline-table;
width: auto;
vertical-align: middle;
.input-group-addon,
.input-group-btn,
.form-control {
width: auto;
@if not $enable-flex {
display: inline-table;
vertical-align: middle;
.input-group-addon,
.input-group-btn,
.form-control {
width: auto;
}
}
}
// Input groups need that 100% width though
.input-group > .form-control {
width: 100%;
@if not $enable-flex {
width: 100%;
}
}
.form-control-label {
@@ -353,10 +378,17 @@ select.form-control-lg {
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match.
.form-check {
display: inline-block;
@if $enable-flex {
display: flex;
align-items: center;
justify-content: center;
} @else {
display: inline-block;
vertical-align: middle;
}
width: auto;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
.form-check-label {
padding-left: 0;
@@ -366,6 +398,27 @@ select.form-control-lg {
margin-left: 0;
}
// Custom form controls
.custom-control {
padding-left: 0;
@if $enable-flex {
display: flex;
align-items: center;
justify-content: center;
} @else {
vertical-align: middle;
}
}
.custom-control-indicator {
position: static;
display: inline-block;
@if $enable-flex {
margin-right: .25rem; // Flexbox alignment means we lose our HTML space here, so we compensate.
}
vertical-align: text-bottom;
}
// Re-override the feedback icon.
.has-feedback .form-control-feedback {
top: 0;

13
scss/_grid.scss
View File

@@ -28,6 +28,19 @@
.row {
@include make-row();
}
// Remove the negative margin from default .row, then the horizontal padding
// from all immediate children columns (to prevent runaway style inheritance).
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
}
// Columns

2
scss/_images.scss
View File

@@ -16,7 +16,7 @@
background-color: $thumbnail-bg;
border: $thumbnail-border-width solid $thumbnail-border-color;
@include border-radius($thumbnail-border-radius);
transition: all .2s ease-in-out;
@include transition(all .2s ease-in-out);
@include box-shadow($thumbnail-box-shadow);
// Keep them at most 100% wide

2
scss/_modal.scss
View File

@@ -28,7 +28,7 @@
// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
transition: transform .3s ease-out;
@include transition(transform .3s ease-out);
transform: translate(0, -25%);
}
&.active .modal-dialog { transform: translate(0, 0); }

111
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.
@@ -206,6 +170,10 @@
@include hover-focus {
color: $navbar-light-hover-color;
}
&.disabled {
color: $navbar-light-disabled-color;
}
}
.open > .nav-link,
@@ -250,6 +218,10 @@
@include hover-focus {
color: $navbar-dark-hover-color;
}
&.disabled {
color: $navbar-dark-disabled-color;
}
}
.open > .nav-link,
@@ -276,48 +248,47 @@
}
}
// 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);
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
&#{$infix} {
@include clearfix;
&-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;
}
}
@include media-breakpoint-down($breakpoint) {
.navbar-brand {
display: block;
float: none;
margin-top: .5rem;
margin-right: 0;
}
&-md {
@include clearfix;
@include media-breakpoint-down(md) {
.navbar-nav .nav-item {
float: none;
margin-left: 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
scss/_pagination.scss
View File

@@ -47,6 +47,7 @@
float: left; // Collapse white-space
padding: $pagination-padding-y $pagination-padding-x;
margin-left: -1px;
line-height: $pagination-line-height;
color: $pagination-color;
background-color: $pagination-bg;
border: $pagination-border-width solid $pagination-border-color;

16
scss/_progress.scss
View File

@@ -17,6 +17,7 @@
width: 100%;
height: $spacer-y; // todo: make a new var for this
margin-bottom: $spacer-y;
overflow: hidden; // force rounded corners by cropping it
}
.progress[value] {
// Set overall background
@@ -37,30 +38,19 @@
}
.progress[value]::-moz-progress-bar {
background-color: $progress-bar-color;
@include border-left-radius($progress-border-radius);
}
.progress[value]::-webkit-progress-value {
background-color: $progress-bar-color;
@include border-left-radius($progress-border-radius);
}
// Tweaks for full progress bar
.progress[value="100"]::-moz-progress-bar {
@include border-right-radius($progress-border-radius);
}
.progress[value="100"]::-webkit-progress-value {
@include border-right-radius($progress-border-radius);
}
// Unfilled portion of the bar
.progress[value]::-webkit-progress-bar {
background-color: $progress-bg;
@include border-radius($progress-border-radius);
@include box-shadow($progress-box-shadow);
}
base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only
.progress[value] {
background-color: $progress-bg;
@include border-radius($progress-border-radius);
@include box-shadow($progress-box-shadow);
}
@@ -76,10 +66,6 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes
height: $spacer-y;
text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
background-color: $progress-bar-color;
@include border-left-radius($progress-border-radius);
}
.progress[width="100%"] {
@include border-right-radius($progress-border-radius);
}
}

16
scss/_reboot.scss
View File

@@ -63,6 +63,7 @@ html {
// thus making it hard to click on stuff near the right edge of the page.
// So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
// See https://github.com/twbs/bootstrap/issues/18543
// and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383/
-ms-overflow-style: scrollbar;
// Changes the default tap highlight to be completely transparent in iOS.
-webkit-tap-highlight-color: rgba(0,0,0,0);
@@ -112,12 +113,11 @@ p {
margin-bottom: 1rem;
}
// Abbreviations and acronyms
// Abbreviations
abbr[title],
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted $abbr-border-color;
}
address {
@@ -336,8 +336,8 @@ input[type="month"] {
// Remove the default appearance of temporal inputs to avoid a Mobile Safari
// bug where setting a custom line-height prevents text from being vertically
// centered within the input.
//
// Bug report: https://github.com/twbs/bootstrap/issues/11266
// See https://bugs.webkit.org/show_bug.cgi?id=139848
// and https://github.com/twbs/bootstrap/issues/11266
-webkit-appearance: listbox;
}
@@ -347,9 +347,11 @@ textarea {
}
fieldset {
// Chrome and Firefox set a `min-width: min-content;` on fieldsets,
// so we reset that to ensure it behaves more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359.
// Browsers set a default `min-width: min-content;` on fieldsets,
// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
// So we reset that to ensure fieldsets behave more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
min-width: 0;
// Reset the default outline behavior of fieldsets so they don't affect page layout.
padding: 0;

13
scss/_tables.scss
View File

@@ -136,8 +136,8 @@
// Responsive tables
//
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// Add `.table-responsive` to `.table`s and we'll make them mobile friendly by
// enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.
.table-responsive {
@@ -145,11 +145,12 @@
width: 100%;
min-height: 0%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
// TODO: find out if we need this still.
//
// border: $table-border-width solid $table-border-color;
// -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
// Prevent double border on horizontal scroll due to use of `display: block;`
&.table-bordered {
border: 0;
}
}

25
scss/_variables.scss
View File

@@ -114,7 +114,7 @@ $enable-flex: false !default;
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: false !default;
$enable-transitions: true !default;
$enable-hover-media-query: false !default;
$enable-grid-classes: true !default;
$enable-print-styles: true !default;
@@ -416,7 +416,7 @@ $input-padding-y-sm: .25rem !default;
$input-padding-x-lg: 1.5rem !default;
$input-padding-y-lg: .75rem !default;
$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
$input-height: (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default;
$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
@@ -532,7 +532,7 @@ $dropdown-box-shadow: 0 .5rem 1rem rgba(0,0,0,.175) !default;
$dropdown-link-color: $gray-dark !default;
$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
$dropdown-link-hover-bg: #f5f5f5 !default;
$dropdown-link-hover-bg: $gray-lightest !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
@@ -618,11 +618,11 @@ $nav-pills-active-link-bg: $component-active-bg !default;
$pagination-padding-x: .75rem !default;
$pagination-padding-y: .5rem !default;
$pagination-padding-x-sm: .75rem !default;
$pagination-padding-y-sm: .275rem !default;
$pagination-padding-x-sm: .5rem !default;
$pagination-padding-y-sm: .25rem !default;
$pagination-padding-x-lg: 1.5rem !default;
$pagination-padding-y-lg: .75rem !default;
$pagination-line-height: 1.25 !default;
$pagination-color: $link-color !default;
$pagination-bg: #fff !default;
@@ -677,7 +677,7 @@ $card-border-width: 1px !default;
$card-border-radius: $border-radius !default;
$card-border-color: rgba(0,0,0,.125) !default;
$card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default;
$card-cap-bg: #f5f5f5 !default;
$card-cap-bg: $gray-lightest !default;
$card-bg: #fff !default;
$card-link-hover-color: #fff !default;
@@ -772,8 +772,8 @@ $modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-border-width !default;
$modal-header-padding: 15px !default;
$modal-lg: 900px !default;
$modal-md: 600px !default;
$modal-lg: 800px !default;
$modal-md: 500px !default;
$modal-sm: 300px !default;
@@ -783,6 +783,7 @@ $modal-sm: 300px !default;
$alert-padding-x: 1.25rem !default;
$alert-padding-y: .75rem !default;
$alert-margin-bottom: $spacer-y !default;
$alert-border-radius: $border-radius !default;
$alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: $border-width !default;
@@ -825,7 +826,7 @@ $list-group-border-color: rgba(0,0,0,.125) !default;
$list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default;
$list-group-hover-bg: #f5f5f5 !default;
$list-group-hover-bg: $gray-lightest !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border: $list-group-active-bg !default;
@@ -913,12 +914,12 @@ $code-font-size: 90% !default;
$code-padding-x: .4rem !default;
$code-padding-y: .2rem !default;
$code-color: #bd4147 !default;
$code-bg: #f7f7f9 !default;
$code-bg: $gray-lightest !default;
$kbd-color: #fff !default;
$kbd-bg: #333 !default;
$pre-bg: #f7f7f9 !default;
$pre-bg: $gray-lightest !default;
$pre-color: $gray-dark !default;
$pre-border-color: #ccc !default;
$pre-scrollable-max-height: 340px !default;

19
scss/bootstrap-grid.scss vendored
View File

@@ -3,6 +3,25 @@
// Includes relevant variables and mixins for the regular (non-flexbox) grid
// system, as well as the generated predefined classes (e.g., `.col-4-sm`).
//
// Box sizing, responsive, and more
//
@at-root {
@-ms-viewport { width: device-width; }
}
html {
box-sizing: border-box;
-ms-overflow-style: scrollbar;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
//
// Variables

11
scss/mixins/_breakpoints.scss
View File

@@ -38,6 +38,17 @@
@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
}
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
// Useful for making responsive utilities.
//
// >> breakpoint-infix(xs, (xs: 0, sm: 544px, md: 768px))
// "" (Returns a blank string)
// >> breakpoint-infix(sm, (xs: 0, sm: 544px, md: 768px))
// "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {

3
scss/mixins/_cards.scss
View File

@@ -20,8 +20,11 @@
//
@mixin card-inverse {
color: rgba(255,255,255,.65);
.card-header,
.card-footer {
background-color: transparent;
border-color: rgba(255,255,255,.2);
}
.card-header,

2
scss/mixins/_clearfix.scss
View File

@@ -1,7 +1,7 @@
@mixin clearfix() {
&::after {
display: block;
content: "";
display: table;
clear: both;
}
}

1
scss/mixins/_forms.scss
View File

@@ -9,7 +9,6 @@
.form-control-label,
.col-form-label,
.form-check-label,
.form-check-inline,
.custom-control {
color: $color;
}

68
scss/mixins/_grid-framework.scss
View File

@@ -17,87 +17,55 @@
@include make-gutters($gutters);
}
$breakpoint-counter: 0;
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
$breakpoint-counter: ($breakpoint-counter + 1);
@if $breakpoint-counter == 1 {
@for $i from 1 through $columns {
.col-#{$i} {
@extend %grid-column;
}
}
}
@if $breakpoint-counter != 1 {
// Allow columns to stretch full width below their breakpoints
.col-#{$breakpoint} {
// Allow columns to stretch full width below their breakpoints
@for $i from 1 through $columns {
.col#{$infix}-#{$i} {
@extend %grid-column;
}
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@extend %grid-column;
}
}
@if $enable-flex {
.col#{$infix} {
@extend %grid-column;
}
}
@include media-breakpoint-up($breakpoint, $breakpoints) {
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
@if $enable-flex {
.col-#{$breakpoint} {
.col#{$infix} {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.col-#{$breakpoint}-auto {
.col#{$infix}-auto {
flex: 0 0 auto;
width: auto;
}
}
@for $i from 1 through $columns {
@if $breakpoint-counter == 1 {
.col-#{$i} {
@include make-col($i, $columns);
}
}
@if $breakpoint-counter != 1 {
.col-#{$breakpoint}-#{$i} {
@include make-col($i, $columns);
}
.col#{$infix}-#{$i} {
@include make-col($i, $columns);
}
}
@each $modifier in (pull, push) {
@for $i from 0 through $columns {
@if $breakpoint-counter == 1 {
.#{$modifier}-#{$i} {
@include make-col-modifier($modifier, $i, $columns)
}
}
@if $breakpoint-counter != 1 {
.#{$modifier}-#{$breakpoint}-#{$i} {
@include make-col-modifier($modifier, $i, $columns)
}
.#{$modifier}#{$infix}-#{$i} {
@include make-col-modifier($modifier, $i, $columns)
}
}
}
// `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) {
@if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .offset-xs-0
@if $breakpoint-counter == 1 {
.offset-#{$i} {
@include make-col-modifier(offset, $i, $columns)
}
}
@if $breakpoint-counter != 1 {
.offset-#{$breakpoint}-#{$i} {
@include make-col-modifier(offset, $i, $columns)
}
}
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-xs-0
.offset#{$infix}-#{$i} {
@include make-col-modifier(offset, $i, $columns)
}
}
}
}

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

13
scss/utilities/_borders.scss
View File

@@ -1,9 +1,12 @@
//
// Border-width
// Border
//
// TBD...?
.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-radius
@@ -28,3 +31,7 @@
.rounded-circle {
border-radius: 50%;
}
.rounded-0 {
border-radius: 0;
}

28
scss/utilities/_display.scss
View File

@@ -5,26 +5,14 @@
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$min: breakpoint-min($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@if $min {
@media (min-width: $min) {
.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; }
}
} @else {
.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#{$infix}-none { display: none !important; }
.d#{$infix}-inline { display: inline !important; }
.d#{$infix}-inline-block { display: inline-block !important; }
.d#{$infix}-block { display: block !important; }
.d#{$infix}-table { display: table !important; }
.d#{$infix}-table-cell { display: table-cell !important; }
.d#{$infix}-flex { display: flex !important; }
}
}

44
scss/utilities/_flex.scss
View File

@@ -4,34 +4,30 @@
@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; }
}
$infix: breakpoint-infix($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; }
}
// Flex column reordering
.flex#{$infix}-first { order: -1; }
.flex#{$infix}-last { order: 1; }
.flex#{$infix}-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#{$infix}-top { align-items: flex-start; }
.flex-items#{$infix}-middle { align-items: center; }
.flex-items#{$infix}-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#{$infix}-top { align-self: flex-start; }
.flex#{$infix}-middle { align-self: center; }
.flex#{$infix}-bottom { align-self: flex-end; }
// Horizontal alignment of item
.flex-items#{$infix}-left { justify-content: flex-start; }
.flex-items#{$infix}-center { justify-content: center; }
.flex-items#{$infix}-right { justify-content: flex-end; }
.flex-items#{$infix}-around { justify-content: space-around; }
.flex-items#{$infix}-between { justify-content: space-between; }
}
}
}

18
scss/utilities/_float.scss
View File

@@ -1,19 +1,9 @@
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$min: breakpoint-min($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@if $min {
// everything else
@media (min-width: $min) {
.float-#{$breakpoint}-left { @include float-left; }
.float-#{$breakpoint}-right { @include float-right; }
.float-#{$breakpoint}-none { @include float-none; }
}
} @else {
// xs
.float-left { @include float-left; }
.float-right { @include float-right; }
.float-none { @include float-none; }
}
.float#{$infix}-left { @include float-left; }
.float#{$infix}-right { @include float-right; }
.float#{$infix}-none { @include float-none; }
}
}

50
scss/utilities/_spacing.scss
View File

@@ -3,6 +3,9 @@
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }
// Margin and Padding
.mx-auto {
@@ -17,42 +20,21 @@
$length-y: map-get($lengths, y);
@include media-breakpoint-up($breakpoint) {
$min: breakpoint-min($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@if $min {
// everything else
@media (min-width: $min) {
.#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
.#{$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; }
.#{$abbrev}l-#{$breakpoint}-#{$size} { #{$prop}-left: $length-x !important; }
.#{$abbrev}x-#{$breakpoint}-#{$size} {
#{$prop}-right: $length-x !important;
#{$prop}-left: $length-x !important;
}
.#{$abbrev}y-#{$breakpoint}-#{$size} {
#{$prop}-top: $length-y !important;
#{$prop}-bottom: $length-y !important;
}
}
} @else {
// xs
.#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
.#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; }
.#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; }
.#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }
.#{$abbrev}l-#{$size} { #{$prop}-left: $length-x !important; }
.#{$abbrev}x-#{$size} {
#{$prop}-right: $length-x !important;
#{$prop}-left: $length-x !important;
}
.#{$abbrev}y-#{$size} {
#{$prop}-top: $length-y !important;
#{$prop}-bottom: $length-y !important;
}
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length-y $length-x !important; }
.#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top: $length-y !important; }
.#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right: $length-x !important; }
.#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length-y !important; }
.#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left: $length-x !important; }
.#{$abbrev}x#{$infix}-#{$size} {
#{$prop}-right: $length-x !important;
#{$prop}-left: $length-x !important;
}
.#{$abbrev}y#{$infix}-#{$size} {
#{$prop}-top: $length-y !important;
#{$prop}-bottom: $length-y !important;
}
}
}
}

26
scss/utilities/_text.scss
View File

@@ -4,31 +4,33 @@
// 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
@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; }
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.text#{$infix}-left { text-align: left !important; }
.text#{$infix}-right { text-align: right !important; }
.text#{$infix}-center { text-align: center !important; }
}
}
// 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