diff options
author | Gleb Mazovetskiy <glex.spb@gmail.com> | 2017-09-03 18:50:19 +0300 |
---|---|---|
committer | Gleb Mazovetskiy <glex.spb@gmail.com> | 2017-09-03 18:50:19 +0300 |
commit | b12fdcd48c26cee905c3365626247f452fb941f2 (patch) | |
tree | 96dd5cefb67fc380b71ae589672fa415b4903d81 /assets/stylesheets | |
parent | fb2f045b8ed4a17ec5cacffd19bb5bea7e7fe9fd (diff) |
rake update[v4-dev]
Diffstat (limited to 'assets/stylesheets')
25 files changed, 254 insertions, 214 deletions
diff --git a/assets/stylesheets/bootstrap/_badge.scss b/assets/stylesheets/bootstrap/_badge.scss index 8a76263..fea10eb 100644 --- a/assets/stylesheets/bootstrap/_badge.scss +++ b/assets/stylesheets/bootstrap/_badge.scss @@ -9,7 +9,6 @@ font-size: $badge-font-size; font-weight: $badge-font-weight; line-height: 1; - color: $badge-color; text-align: center; white-space: nowrap; vertical-align: baseline; diff --git a/assets/stylesheets/bootstrap/_breadcrumb.scss b/assets/stylesheets/bootstrap/_breadcrumb.scss index 2bc0e20..52fadec 100644 --- a/assets/stylesheets/bootstrap/_breadcrumb.scss +++ b/assets/stylesheets/bootstrap/_breadcrumb.scss @@ -1,6 +1,6 @@ .breadcrumb { padding: $breadcrumb-padding-y $breadcrumb-padding-x; - margin-bottom: 1rem; + margin-bottom: $breadcrumb-margin-bottom; list-style: none; background-color: $breadcrumb-bg; @include border-radius($border-radius); diff --git a/assets/stylesheets/bootstrap/_button-group.scss b/assets/stylesheets/bootstrap/_button-group.scss index 30a14d8..4063506 100644 --- a/assets/stylesheets/bootstrap/_button-group.scss +++ b/assets/stylesheets/bootstrap/_button-group.scss @@ -10,7 +10,6 @@ > .btn { position: relative; flex: 0 1 auto; - margin-bottom: 0; // Bring the hover, focused, and "active" buttons to the front to overlay // the borders properly @@ -66,15 +65,18 @@ .btn-group > .btn-group { float: left; } + .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } + .btn-group > .btn-group:first-child:not(:last-child) { > .btn:last-child, > .dropdown-toggle { @include border-right-radius(0); } } + .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { @include border-left-radius(0); } @@ -129,7 +131,6 @@ // .btn-group-vertical { - display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; @@ -146,30 +147,35 @@ margin-top: -$input-btn-border-width; margin-left: 0; } -} -.btn-group-vertical > .btn { - &:not(:first-child):not(:last-child) { - border-radius: 0; + > .btn { + &:not(:first-child):not(:last-child) { + border-radius: 0; + } } + &:first-child:not(:last-child) { @include border-bottom-radius(0); } + &:last-child:not(:first-child) { @include border-top-radius(0); } -} -.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { - border-radius: 0; -} -.btn-group-vertical > .btn-group:first-child:not(:last-child) { - > .btn:last-child, - > .dropdown-toggle { - @include border-bottom-radius(0); + + > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; + } + + > .btn-group:first-child:not(:last-child) { + > .btn:last-child, + > .dropdown-toggle { + @include border-bottom-radius(0); + } + } + + > .btn-group:last-child:not(:first-child) > .btn:first-child { + @include border-top-radius(0); } -} -.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { - @include border-top-radius(0); } diff --git a/assets/stylesheets/bootstrap/_buttons.scss b/assets/stylesheets/bootstrap/_buttons.scss index 607f24a..c6dbb5d 100644 --- a/assets/stylesheets/bootstrap/_buttons.scss +++ b/assets/stylesheets/bootstrap/_buttons.scss @@ -58,7 +58,11 @@ fieldset[disabled] a.btn { @each $color, $value in $theme-colors { .btn-outline-#{$color} { - @include button-outline-variant($value, #fff); + @if $color == "light" { + @include button-outline-variant($value, $gray-900); + } @else { + @include button-outline-variant($value, $white); + } } } @@ -71,36 +75,28 @@ fieldset[disabled] a.btn { .btn-link { font-weight: $font-weight-normal; color: $link-color; + background-color: transparent; border-radius: 0; - &, - &:active, - &.active, - &:disabled { + @include hover { + color: $link-hover-color; + text-decoration: $link-hover-decoration; background-color: transparent; - @include box-shadow(none); + border-color: transparent; } - &, + &:focus, - &:active { + &.focus { border-color: transparent; box-shadow: none; } - @include hover { - border-color: transparent; - } - @include hover-focus { - color: $link-hover-color; - text-decoration: $link-hover-decoration; - background-color: transparent; - } - &:disabled { - color: $btn-link-disabled-color; - @include hover-focus { - text-decoration: none; - } + &:disabled, + &.disabled { + color: $btn-link-disabled-color; } + + // No need for an active state here } @@ -109,11 +105,11 @@ fieldset[disabled] a.btn { // .btn-lg { - @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg); + @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $input-btn-line-height-lg, $btn-border-radius-lg); } .btn-sm { - @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm); + @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $input-btn-line-height-sm, $btn-border-radius-sm); } diff --git a/assets/stylesheets/bootstrap/_card.scss b/assets/stylesheets/bootstrap/_card.scss index 1ab85a4..40fa425 100644 --- a/assets/stylesheets/bootstrap/_card.scss +++ b/assets/stylesheets/bootstrap/_card.scss @@ -56,6 +56,10 @@ @include border-bottom-radius($card-border-radius); } } + + .card-header + .list-group > .list-group-item:first-child { + border-top: 0; + } } @@ -130,9 +134,15 @@ // Card deck -@include media-breakpoint-up(sm) { - .card-deck { - display: flex; +.card-deck { + display: flex; + flex-direction: column; + + .card { + margin-bottom: $card-deck-margin; + } + + @include media-breakpoint-up(sm) { flex-flow: row wrap; margin-right: -$card-deck-margin; margin-left: -$card-deck-margin; @@ -142,6 +152,7 @@ flex: 1 0 0%; flex-direction: column; margin-right: $card-deck-margin; + margin-bottom: 0; // Override the default margin-left: $card-deck-margin; } } @@ -152,13 +163,20 @@ // Card groups // -@include media-breakpoint-up(sm) { - .card-group { - display: flex; +.card-group { + display: flex; + flex-direction: column; + + .card { + margin-bottom: $card-group-margin; + } + + @include media-breakpoint-up(sm) { flex-flow: row wrap; .card { flex: 1 0 0%; + margin-bottom: 0; + .card { margin-left: 0; @@ -177,6 +195,7 @@ border-bottom-right-radius: 0; } } + &:last-child { @include border-left-radius(0); diff --git a/assets/stylesheets/bootstrap/_custom-forms.scss b/assets/stylesheets/bootstrap/_custom-forms.scss index d1fbf95..1bf268b 100644 --- a/assets/stylesheets/bootstrap/_custom-forms.scss +++ b/assets/stylesheets/bootstrap/_custom-forms.scss @@ -139,6 +139,7 @@ color: $custom-select-color; vertical-align: middle; background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; + background-clip: padding-box; background-size: $custom-select-bg-size; border: $custom-select-border-width solid $custom-select-border-color; @if $enable-rounded { @@ -203,7 +204,7 @@ opacity: 0; &:focus ~ .custom-file-control { - @include box-shadow($custom-file-focus-box-shadow); + box-shadow: $custom-file-focus-box-shadow; } } @@ -214,12 +215,14 @@ left: 0; z-index: 5; height: $custom-file-height; - padding: $custom-file-padding-x $custom-file-padding-y; + padding: $custom-file-padding-y $custom-file-padding-x; + overflow: hidden; line-height: $custom-file-line-height; color: $custom-file-color; pointer-events: none; user-select: none; background-color: $custom-file-bg; + background-clip: padding-box; border: $custom-file-border-width solid $custom-file-border-color; @include border-radius($custom-file-border-radius); @include box-shadow($custom-file-box-shadow); @@ -232,18 +235,16 @@ &::before { position: absolute; - top: -$custom-file-border-width; - right: -$custom-file-border-width; - bottom: -$custom-file-border-width; + top: 0; + right: 0; z-index: 6; display: block; height: $custom-file-height; - padding: $custom-file-padding-x $custom-file-padding-y; + padding: $custom-file-padding-y $custom-file-padding-x; line-height: $custom-file-line-height; color: $custom-file-button-color; background-color: $custom-file-button-bg; - border: $custom-file-border-width solid $custom-file-border-color; - @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); + border-left: $custom-file-border-width solid $custom-file-border-color; } @each $lang, $text in map-get($custom-file-text, button-label) { diff --git a/assets/stylesheets/bootstrap/_forms.scss b/assets/stylesheets/bootstrap/_forms.scss index 519554b..33163a0 100644 --- a/assets/stylesheets/bootstrap/_forms.scss +++ b/assets/stylesheets/bootstrap/_forms.scss @@ -7,8 +7,6 @@ .form-control { display: block; width: 100%; - // // Make inputs at least the height of their button counterpart (base line-height + padding + border) - // height: $input-height; padding: $input-btn-padding-y $input-btn-padding-x; font-size: $font-size-base; line-height: $input-btn-line-height; @@ -236,23 +234,16 @@ select.form-control-lg { position: absolute; margin-top: $form-check-input-margin-y; margin-left: -$form-check-input-gutter; - - &:only-child { - position: static; - } } // Radios and checkboxes on same line .form-check-inline { display: inline-block; + margin-right: $form-check-inline-margin-x; .form-check-label { vertical-align: middle; } - - + .form-check-inline { - margin-left: $form-check-inline-margin-x; - } } diff --git a/assets/stylesheets/bootstrap/_functions.scss b/assets/stylesheets/bootstrap/_functions.scss index 6c0601c..a63680a 100644 --- a/assets/stylesheets/bootstrap/_functions.scss +++ b/assets/stylesheets/bootstrap/_functions.scss @@ -72,7 +72,7 @@ @return map-get($theme-colors, $key); } -@function grayscale($key: "100") { +@function gray($key: "100") { @return map-get($grays, $key); } diff --git a/assets/stylesheets/bootstrap/_grid.scss b/assets/stylesheets/bootstrap/_grid.scss index 9ab9ae0..a227515 100644 --- a/assets/stylesheets/bootstrap/_grid.scss +++ b/assets/stylesheets/bootstrap/_grid.scss @@ -16,7 +16,6 @@ @if $enable-grid-classes { .container-fluid { - width: 100%; @include make-container(); } } diff --git a/assets/stylesheets/bootstrap/_input-group.scss b/assets/stylesheets/bootstrap/_input-group.scss index 0b668bf..95b17be 100644 --- a/assets/stylesheets/bootstrap/_input-group.scss +++ b/assets/stylesheets/bootstrap/_input-group.scss @@ -5,6 +5,7 @@ .input-group { position: relative; display: flex; + align-items: center; width: 100%; .form-control { @@ -28,10 +29,6 @@ .input-group-addon, .input-group-btn, .input-group .form-control { - // Vertically centers the content of the addons within the input group - display: flex; - align-items: center; - &:not(:first-child):not(:last-child) { @include border-radius(0); } @@ -40,7 +37,6 @@ .input-group-addon, .input-group-btn { white-space: nowrap; - vertical-align: middle; // Match the inputs } @@ -71,9 +67,10 @@ font-size: $font-size-base; // Match inputs font-weight: $font-weight-normal; line-height: $input-btn-line-height; - color: $input-color; + color: $input-group-addon-color; text-align: center; background-color: $input-group-addon-bg; + background-clip: padding-box; border: $input-btn-border-width solid $input-group-addon-border-color; @include border-radius($input-border-radius); @@ -144,6 +141,8 @@ // element above the siblings. > .btn { position: relative; + background-clip: padding-box; + border: $input-btn-border-width solid $input-group-btn-border-color; + .btn { margin-left: (-$input-btn-border-width); diff --git a/assets/stylesheets/bootstrap/_modal.scss b/assets/stylesheets/bootstrap/_modal.scss index c0c4067..a563e6f 100644 --- a/assets/stylesheets/bootstrap/_modal.scss +++ b/assets/stylesheets/bootstrap/_modal.scss @@ -43,6 +43,8 @@ position: relative; width: auto; margin: $modal-dialog-margin; + // allow clicks to pass through for custom click handling to close modal + pointer-events: none; } // Actual modal @@ -50,6 +52,8 @@ position: relative; display: flex; flex-direction: column; + // counteract the pointer-events: none; in the .modal-dialog + pointer-events: auto; background-color: $modal-content-bg; background-clip: padding-box; border: $modal-content-border-width solid $modal-content-border-color; @@ -82,6 +86,10 @@ justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends padding: $modal-header-padding; border-bottom: $modal-header-border-width solid $modal-header-border-color; + + .close { + margin-left: auto; // Force icon to the right even when there's no .modal-title + } } // Title text within header diff --git a/assets/stylesheets/bootstrap/_pagination.scss b/assets/stylesheets/bootstrap/_pagination.scss index a049299..4ef1442 100644 --- a/assets/stylesheets/bootstrap/_pagination.scss +++ b/assets/stylesheets/bootstrap/_pagination.scss @@ -38,7 +38,7 @@ position: relative; display: block; padding: $pagination-padding-y $pagination-padding-x; - margin-left: -1px; + margin-left: -$pagination-border-width; line-height: $pagination-line-height; color: $pagination-color; background-color: $pagination-bg; diff --git a/assets/stylesheets/bootstrap/_progress.scss b/assets/stylesheets/bootstrap/_progress.scss index f7491a6..efbb440 100644 --- a/assets/stylesheets/bootstrap/_progress.scss +++ b/assets/stylesheets/bootstrap/_progress.scss @@ -5,21 +5,19 @@ .progress { display: flex; + height: $progress-height; overflow: hidden; // force rounded corners by cropping it font-size: $progress-font-size; - line-height: $progress-height; - text-align: center; background-color: $progress-bg; @include border-radius($progress-border-radius); - @include box-shadow($progress-box-shadow); } .progress-bar { - height: $progress-height; - line-height: $progress-height; + display: flex; + align-items: center; + justify-content: center; color: $progress-bar-color; background-color: $progress-bar-bg; - @include transition($progress-bar-transition); } .progress-bar-striped { diff --git a/assets/stylesheets/bootstrap/_reboot.scss b/assets/stylesheets/bootstrap/_reboot.scss index 33fc2d6..41f084b 100644 --- a/assets/stylesheets/bootstrap/_reboot.scss +++ b/assets/stylesheets/bootstrap/_reboot.scss @@ -18,8 +18,13 @@ // we force a non-overlapping, non-auto-hiding scrollbar to counteract. // 6. Change the default tap highlight to be completely transparent in iOS. -html { +*, +*::before, +*::after { box-sizing: border-box; // 1 +} + +html { font-family: sans-serif; // 2 line-height: 1.15; // 3 -webkit-text-size-adjust: 100%; // 4 @@ -28,12 +33,6 @@ html { -webkit-tap-highlight-color: rgba(0,0,0,0); // 6 } -*, -*::before, -*::after { - box-sizing: inherit; // 1 -} - // IE10+ doesn't honor `<meta name="viewport">` in some cases. @at-root { @-ms-viewport { width: device-width; } @@ -48,6 +47,8 @@ article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, s // // 1. Remove the margin in all browsers. // 2. As a best practice, apply a default `background-color`. +// 3. Set an explicit initial text-align value so that we can later use the +// the `inherit` value on things like `<th>` elements. body { margin: 0; // 1 @@ -56,6 +57,7 @@ body { font-weight: $font-weight-base; line-height: $line-height-base; color: $body-color; + text-align: left; // 3 background-color: $body-bg; // 2 } @@ -100,7 +102,7 @@ h1, h2, h3, h4, h5, h6 { // bottom margin to use `rem` units instead of `em`. p { margin-top: 0; - margin-bottom: 1rem; + margin-bottom: $paragraph-margin-bottom; } // Abbreviations @@ -270,7 +272,7 @@ svg:not(:root) { // 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: -// * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch +// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch // * http://caniuse.com/#feat=css-touch-action // * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay @@ -278,7 +280,7 @@ a, area, button, [role="button"], -input, +input:not([type=range]), label, select, summary, @@ -304,8 +306,9 @@ caption { } th { - // Matches default `<td>` alignment - text-align: left; + // Matches default `<td>` alignment by inheriting from the `<body>`, or the + // closest parent with a set `text-align`. + text-align: inherit; } diff --git a/assets/stylesheets/bootstrap/_tables.scss b/assets/stylesheets/bootstrap/_tables.scss index a652d17..3238439 100644 --- a/assets/stylesheets/bootstrap/_tables.scss +++ b/assets/stylesheets/bootstrap/_tables.scss @@ -99,32 +99,36 @@ @include table-row-variant(active, $table-active-bg); -// Inverse styles +// Dark styles // // Same table markup, but inverted color scheme: dark background and light text. -.thead-inverse { - th { - color: $table-inverse-color; - background-color: $table-inverse-bg; +.table { + .thead-dark { + th { + color: $table-dark-color; + background-color: $table-dark-bg; + border-color: $table-dark-border-color; + } } -} -.thead-default { - th { - color: $table-head-color; - background-color: $table-head-bg; + .thead-light { + th { + color: $table-head-color; + background-color: $table-head-bg; + border-color: $table-border-color; + } } } -.table-inverse { - color: $table-inverse-color; - background-color: $table-inverse-bg; +.table-dark { + color: $table-dark-color; + background-color: $table-dark-bg; th, td, thead th { - border-color: $table-inverse-border-color; + border-color: $table-dark-border-color; } &.table-bordered { @@ -133,14 +137,14 @@ &.table-striped { tbody tr:nth-of-type(odd) { - background-color: $table-inverse-accent-bg; + background-color: $table-dark-accent-bg; } } &.table-hover { tbody tr { @include hover { - background-color: $table-inverse-hover-bg; + background-color: $table-dark-hover-bg; } } } @@ -149,20 +153,27 @@ // Responsive tables // -// 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. +// Generate series of `.table-responsive-*` classes for configuring the screen +// size of where your table will overflow. .table-responsive { - @include media-breakpoint-down(md) { - display: block; - width: 100%; - overflow-x: auto; - -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; + @each $breakpoint in map-keys($grid-breakpoints) { + $next: breakpoint-next($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($next, $grid-breakpoints); + + &#{$infix} { + @include media-breakpoint-down($breakpoint) { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + -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; + } + } } } } diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss index e2bacef..c0b5494 100644 --- a/assets/stylesheets/bootstrap/_variables.scss +++ b/assets/stylesheets/bootstrap/_variables.scss @@ -1,48 +1,8 @@ // Variables // -// Copy settings from this file into the provided `_custom.scss` to override -// the Bootstrap defaults without modifying key, versioned files. -// // Variables should follow the `$component-state-property-size` formula for // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. -// Table of Contents -// -// Color system -// Options -// Spacing -// Body -// Links -// Grid breakpoints -// Grid containers -// Grid columns -// Fonts -// Components -// Tables -// Buttons -// Forms -// Dropdowns -// Z-index master list -// Navs -// Navbar -// Pagination -// Jumbotron -// Form states and alerts -// Cards -// Tooltips -// Popovers -// Badges -// Modals -// Alerts -// Progress bars -// List group -// Image thumbnails -// Figures -// Breadcrumbs -// Carousel -// Close -// Code - // // Color system @@ -60,7 +20,8 @@ $gray-800: #343a40 !default; $gray-900: #212529 !default; $black: #000 !default; -$grays: ( +$grays: () !default; +$grays: map-merge(( 100: $gray-100, 200: $gray-200, 300: $gray-300, @@ -70,7 +31,7 @@ $grays: ( 700: $gray-700, 800: $gray-800, 900: $gray-900 -) !default; +), $grays); $blue: #007bff !default; $indigo: #6610f2 !default; @@ -83,7 +44,8 @@ $green: #28a745 !default; $teal: #20c997 !default; $cyan: #17a2b8 !default; -$colors: ( +$colors: () !default; +$colors: map-merge(( blue: $blue, indigo: $indigo, purple: $purple, @@ -97,9 +59,10 @@ $colors: ( white: $white, gray: $gray-600, gray-dark: $gray-800 -) !default; +), $colors); -$theme-colors: ( +$theme-colors: () !default; +$theme-colors: map-merge(( primary: $blue, secondary: $gray-600, success: $green, @@ -108,7 +71,7 @@ $theme-colors: ( danger: $red, light: $gray-100, dark: $gray-800 -) !default; +), $theme-colors); // Set a specific jump point for requesting color jumps $theme-color-interval: 8% !default; @@ -167,6 +130,12 @@ $link-decoration: none !default; $link-hover-color: darken($link-color, 15%) !default; $link-hover-decoration: underline !default; +// Paragraphs +// +// Style p element. + +$paragraph-margin-bottom: 1rem !default; + // Grid breakpoints // @@ -212,6 +181,7 @@ $line-height-lg: 1.5 !default; $line-height-sm: 1.5 !default; $border-width: 1px !default; +$border-color: $gray-200 !default; $border-radius: .25rem !default; $border-radius-lg: .3rem !default; @@ -231,14 +201,15 @@ $transition-collapse: height .35s ease !default; // // Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; -$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; +$font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; $font-size-base: 1rem !default; // Assumes the browser default, typically `16px` $font-size-lg: 1.25rem !default; $font-size-sm: .875rem !default; +$font-weight-light: 300 !default; $font-weight-normal: normal !default; $font-weight-bold: bold !default; @@ -312,11 +283,11 @@ $table-border-color: $gray-200 !default; $table-head-bg: $gray-200 !default; $table-head-color: $gray-700 !default; -$table-inverse-bg: $gray-900 !default; -$table-inverse-accent-bg: rgba($white, .05) !default; -$table-inverse-hover-bg: rgba($white, .075) !default; -$table-inverse-border-color: lighten($gray-900, 7.5%) !default; -$table-inverse-color: $body-bg !default; +$table-dark-bg: $gray-900 !default; +$table-dark-accent-bg: rgba($white, .05) !default; +$table-dark-hover-bg: rgba($white, .075) !default; +$table-dark-border-color: lighten($gray-900, 7.5%) !default; +$table-dark-color: $body-bg !default; // Buttons @@ -349,7 +320,7 @@ $btn-border-radius: $border-radius !default; $btn-border-radius-lg: $border-radius-lg !default; $btn-border-radius-sm: $border-radius-sm !default; -$btn-transition: all .15s ease-in-out !default; +$btn-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; // Forms @@ -381,7 +352,7 @@ $input-height: calc(#{$input-height-inner} + #{$input-height-bo $input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; $input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; -$input-height-inner-lg: ($font-size-sm * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; +$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; $input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default; @@ -397,8 +368,10 @@ $form-check-inline-margin-x: .75rem !default; $form-group-margin-bottom: 1rem !default; +$input-group-addon-color: $input-color !default; $input-group-addon-bg: $gray-200 !default; $input-group-addon-border-color: $input-border-color !default; +$input-group-btn-border-color: $input-border-color !default; $custom-control-gutter: 1.5rem !default; $custom-control-spacer-y: .25rem !default; @@ -455,21 +428,21 @@ $custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px r $custom-select-font-size-sm: 75% !default; $custom-select-height-sm: $input-height-sm !default; -$custom-file-height: 2.5rem !default; +$custom-file-height: $input-height !default; $custom-file-width: 14rem !default; $custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default; -$custom-file-padding-y: 1rem !default; -$custom-file-padding-x: .5rem !default; -$custom-file-line-height: 1.5 !default; -$custom-file-color: $gray-700 !default; -$custom-file-bg: $white !default; -$custom-file-border-width: $border-width !default; +$custom-file-padding-y: $input-btn-padding-y !default; +$custom-file-padding-x: $input-btn-padding-x !default; +$custom-file-line-height: $input-btn-line-height !default; +$custom-file-color: $input-color !default; +$custom-file-bg: $input-bg !default; +$custom-file-border-width: $input-btn-border-width !default; $custom-file-border-color: $input-border-color !default; -$custom-file-border-radius: $border-radius !default; -$custom-file-box-shadow: inset 0 .2rem .4rem rgba($black,.05) !default; +$custom-file-border-radius: $input-border-radius !default; +$custom-file-box-shadow: $input-box-shadow !default; $custom-file-button-color: $custom-file-color !default; -$custom-file-button-bg: $gray-200 !default; +$custom-file-button-bg: $input-group-addon-bg !default; $custom-file-text: ( placeholder: ( en: "Choose file..." @@ -612,7 +585,7 @@ $jumbotron-bg: $gray-200 !default; $card-spacer-y: .75rem !default; $card-spacer-x: 1.25rem !default; -$card-border-width: 1px !default; +$card-border-width: $border-width !default; $card-border-radius: $border-radius !default; $card-border-color: rgba($black,.125) !default; $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; @@ -621,7 +594,8 @@ $card-bg: $white !default; $card-img-overlay-padding: 1.25rem !default; -$card-deck-margin: ($grid-gutter-width / 2) !default; +$card-group-margin: ($grid-gutter-width / 2) !default; +$card-deck-margin: $card-group-margin !default; $card-columns-count: 3 !default; $card-columns-gap: 1.25rem !default; @@ -672,7 +646,6 @@ $popover-arrow-outer-color: fade-in($popover-border-color, .05) !defau // Badges -$badge-color: $white !default; $badge-font-size: 75% !default; $badge-font-weight: $font-weight-bold !default; $badge-padding-y: .25em !default; @@ -787,6 +760,8 @@ $breadcrumb-padding-y: .75rem !default; $breadcrumb-padding-x: 1rem !default; $breadcrumb-item-padding: .5rem !default; +$breadcrumb-margin-bottom: 1rem !default; + $breadcrumb-bg: $gray-200 !default; $breadcrumb-divider-color: $gray-600 !default; $breadcrumb-active-color: $gray-600 !default; diff --git a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss index 8d7378d..082c5f9 100644 --- a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +++ b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss @@ -98,8 +98,12 @@ @content; } } @else if $max == null { - @include media-breakpoint-up($name) + @include media-breakpoint-up($name) { + @content; + } } @else if $min == null { - @include media-breakpoint-down($name) + @include media-breakpoint-down($name) { + @content; + } } } diff --git a/assets/stylesheets/bootstrap/mixins/_buttons.scss b/assets/stylesheets/bootstrap/mixins/_buttons.scss index f7ec576..312a18f 100644 --- a/assets/stylesheets/bootstrap/mixins/_buttons.scss +++ b/assets/stylesheets/bootstrap/mixins/_buttons.scss @@ -9,7 +9,7 @@ border-color: $border; @include box-shadow($btn-box-shadow); - &:hover { + @include hover { @include color-yiq($background); background-color: $active-background; border-color: $active-border; diff --git a/assets/stylesheets/bootstrap/mixins/_forms.scss b/assets/stylesheets/bootstrap/mixins/_forms.scss index 4a1e0bc..67e198c 100644 --- a/assets/stylesheets/bootstrap/mixins/_forms.scss +++ b/assets/stylesheets/bootstrap/mixins/_forms.scss @@ -33,8 +33,8 @@ box-shadow: 0 0 0 .2rem rgba($color,.25); } - ~ .invalid-feedback, - ~ .invalid-tooltip { + ~ .#{$state}-feedback, + ~ .#{$state}-tooltip { display: block; } } diff --git a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss index d8195dd..a9e7c75 100644 --- a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +++ b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss @@ -51,6 +51,15 @@ order: $i; } } + + // `$columns - 1` because offsetting by the width of an entire row isn't possible + @for $i from 0 through ($columns - 1) { + @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 + .offset#{$infix}-#{$i} { + @include make-col-offset($i, $columns) + } + } + } } } } diff --git a/assets/stylesheets/bootstrap/mixins/_grid.scss b/assets/stylesheets/bootstrap/mixins/_grid.scss index 67dbcd3..584c78b 100644 --- a/assets/stylesheets/bootstrap/mixins/_grid.scss +++ b/assets/stylesheets/bootstrap/mixins/_grid.scss @@ -3,11 +3,11 @@ // Generate semantic grid columns with these mixins. @mixin make-container() { + width: 100%; margin-right: auto; margin-left: auto; padding-right: ($grid-gutter-width / 2); padding-left: ($grid-gutter-width / 2); - width: 100%; } @@ -45,3 +45,7 @@ // do not appear to require this. max-width: percentage($size / $columns); } + +@mixin make-col-offset($size, $columns: $grid-columns) { + margin-left: percentage($size / $columns); +} diff --git a/assets/stylesheets/bootstrap/utilities/_borders.scss b/assets/stylesheets/bootstrap/utilities/_borders.scss index 82e177c..b7e91c2 100644 --- a/assets/stylesheets/bootstrap/utilities/_borders.scss +++ b/assets/stylesheets/bootstrap/utilities/_borders.scss @@ -2,7 +2,7 @@ // Border // -.border { border: 1px solid $gray-200 !important; } +.border { border: $border-width solid $border-color !important; } .border-0 { border: 0 !important; } .border-top-0 { border-top: 0 !important; } .border-right-0 { border-right: 0 !important; } diff --git a/assets/stylesheets/bootstrap/utilities/_position.scss b/assets/stylesheets/bootstrap/utilities/_position.scss index 74b8d39..bddae21 100644 --- a/assets/stylesheets/bootstrap/utilities/_position.scss +++ b/assets/stylesheets/bootstrap/utilities/_position.scss @@ -1,4 +1,13 @@ -// Positioning +// Common values + +// Sass list not in variables since it's not intended for customization. +$positions: static, relative, absolute, fixed, sticky; + +@each $position in $positions { + .position-#{$position} { position: $position !important; } +} + +// Shorthand .fixed-top { position: fixed; diff --git a/assets/stylesheets/bootstrap/utilities/_spacing.scss b/assets/stylesheets/bootstrap/utilities/_spacing.scss index c89816b..150d316 100644 --- a/assets/stylesheets/bootstrap/utilities/_spacing.scss +++ b/assets/stylesheets/bootstrap/utilities/_spacing.scss @@ -7,35 +7,43 @@ @each $prop, $abbrev in (margin: m, padding: p) { @each $size, $length in $spacers { - .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; } - .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top: $length !important; } - .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right: $length !important; } - .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length !important; } - .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left: $length !important; } + .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}t#{$infix}-#{$size}, + .#{$abbrev}y#{$infix}-#{$size} { + #{$prop}-top: $length !important; + } + .#{$abbrev}r#{$infix}-#{$size}, .#{$abbrev}x#{$infix}-#{$size} { #{$prop}-right: $length !important; - #{$prop}-left: $length !important; } + .#{$abbrev}b#{$infix}-#{$size}, .#{$abbrev}y#{$infix}-#{$size} { - #{$prop}-top: $length !important; #{$prop}-bottom: $length !important; } + .#{$abbrev}l#{$infix}-#{$size}, + .#{$abbrev}x#{$infix}-#{$size} { + #{$prop}-left: $length !important; + } } } // Some special margin utils - .m#{$infix}-auto { margin: auto !important; } - .mt#{$infix}-auto { margin-top: auto !important; } - .mr#{$infix}-auto { margin-right: auto !important; } - .mb#{$infix}-auto { margin-bottom: auto !important; } - .ml#{$infix}-auto { margin-left: auto !important; } + .m#{$infix}-auto { margin: auto !important; } + .mt#{$infix}-auto, + .my#{$infix}-auto { + margin-top: auto !important; + } + .mr#{$infix}-auto, .mx#{$infix}-auto { margin-right: auto !important; - margin-left: auto !important; } + .mb#{$infix}-auto, .my#{$infix}-auto { - margin-top: auto !important; margin-bottom: auto !important; } + .ml#{$infix}-auto, + .mx#{$infix}-auto { + margin-left: auto !important; + } } } diff --git a/assets/stylesheets/bootstrap/utilities/_text.scss b/assets/stylesheets/bootstrap/utilities/_text.scss index d337e0d..7573f29 100644 --- a/assets/stylesheets/bootstrap/utilities/_text.scss +++ b/assets/stylesheets/bootstrap/utilities/_text.scss @@ -28,9 +28,10 @@ // 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-light { font-weight: $font-weight-light !important; } +.font-weight-normal { font-weight: $font-weight-normal !important; } +.font-weight-bold { font-weight: $font-weight-bold !important; } +.font-italic { font-style: italic !important; } // Contextual colors |