diff options
author | Robert Austin <rob@jugglerdigital.com> | 2019-07-08 07:12:16 +0300 |
---|---|---|
committer | Robert Austin <rob@jugglerdigital.com> | 2019-07-08 07:12:16 +0300 |
commit | 53db56d1192a923c13ddb6c742e8acad12826abd (patch) | |
tree | ceaf9f3736f59dcc084309add87e7ef9f87ce450 /assets | |
parent | 98ea4efddeeb0a308fbcab03e3162be1a6c3757c (diff) |
new look theme
Diffstat (limited to 'assets')
106 files changed, 2270 insertions, 1412 deletions
diff --git a/assets/js/libs/library.js b/assets/js/libs/library.js index 3e79cea..d151309 100644 --- a/assets/js/libs/library.js +++ b/assets/js/libs/library.js @@ -1 +1 @@ -console.log('Library') +console.log('Library'); diff --git a/assets/scss/_bootstrap-variables.scss b/assets/scss/_bootstrap-variables.scss index 8282159..ea15bb9 100755 --- a/assets/scss/_bootstrap-variables.scss +++ b/assets/scss/_bootstrap-variables.scss @@ -7,36 +7,14 @@ $grid-breakpoints: ( ); $container-max-widths: ( - sm: 540px, - md: 720px, + sm: 566px, + md: 740px, lg: 960px, xl: 1140px, ); $grid-gutter-width: 20px; -$white: #ffffff; -$black: #000000; -$primary: #1c3ed3; -$secondary: #414156; - -// Links -$link-color: $primary; -$link-decoration: none; -$link-hover-color: lighten($primary, 20%); -$link-hover-decoration: underline; - -// Fonts -$font-family-base: 'Open Sans', Arial, sans-serif, -apple-system; -$font-family-heading: 'Lora', Arial, sans-serif, -apple-system; -$font-weight-thin: 200; -$font-weight-light: 300; -$font-weight-normal: 400; -$font-weight-bold: 700; -$font-weight-base: $font-weight-normal; -$line-height-base: 1.6; -$headings-font-weight: 400; - $spacer: 1rem; $spacers: (); $spacers: map-merge( diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss new file mode 100644 index 0000000..61aecd1 --- /dev/null +++ b/assets/scss/_variables.scss @@ -0,0 +1,23 @@ +$primary: #f88379; +$secondary: #575766; +$white: #ffffff; +$black: #141414; +$steel: rgb(92, 90, 90); +$ghost: #f4f5fb; + +// Links +$link-color: $primary; +$link-decoration: none; +$link-hover-color: lighten($primary, 20%); +$link-hover-decoration: underline; + +// Fonts +$font-family-base: 'DM Sans', Arial, sans-serif, -apple-system; +$font-family-heading: 'DM Serif Display', serif, -apple-system; +$font-weight-thin: 200; +$font-weight-light: 300; +$font-weight-normal: 400; +$font-weight-bold: 700; +$font-weight-base: $font-weight-normal; +$line-height-base: 1.6; +$headings-font-weight: 400; diff --git a/assets/scss/bootstrap/_alert.scss b/assets/scss/bootstrap/_alert.scss index dd43e23..da2a98a 100755 --- a/assets/scss/bootstrap/_alert.scss +++ b/assets/scss/bootstrap/_alert.scss @@ -27,7 +27,7 @@ // Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: ($close-font-size + $alert-padding-x * 2); + padding-right: $close-font-size + $alert-padding-x * 2; // Adjust close link position .close { diff --git a/assets/scss/bootstrap/_badge.scss b/assets/scss/bootstrap/_badge.scss index b87a1b0..2082f05 100755 --- a/assets/scss/bootstrap/_badge.scss +++ b/assets/scss/bootstrap/_badge.scss @@ -6,13 +6,20 @@ .badge { display: inline-block; padding: $badge-padding-y $badge-padding-x; - font-size: $badge-font-size; + @include font-size($badge-font-size); font-weight: $badge-font-weight; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; @include border-radius($badge-border-radius); + @include transition($badge-transition); + + @at-root a#{&} { + @include hover-focus { + text-decoration: none; + } + } // Empty badges collapse automatically &:empty { diff --git a/assets/scss/bootstrap/_breadcrumb.scss b/assets/scss/bootstrap/_breadcrumb.scss index 25b9d85..be30950 100755 --- a/assets/scss/bootstrap/_breadcrumb.scss +++ b/assets/scss/bootstrap/_breadcrumb.scss @@ -5,17 +5,20 @@ margin-bottom: $breadcrumb-margin-bottom; list-style: none; background-color: $breadcrumb-bg; - @include border-radius($border-radius); + @include border-radius($breadcrumb-border-radius); } .breadcrumb-item { // The separator between breadcrumbs (by default, a forward-slash: "/") - + .breadcrumb-item::before { - display: inline-block; // Suppress underlining of the separator in modern browsers - padding-right: $breadcrumb-item-padding; + + .breadcrumb-item { padding-left: $breadcrumb-item-padding; - color: $breadcrumb-divider-color; - content: "#{$breadcrumb-divider}"; + + &::before { + display: inline-block; // Suppress underlining of the separator in modern browsers + padding-right: $breadcrumb-item-padding; + color: $breadcrumb-divider-color; + content: $breadcrumb-divider; + } } // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built diff --git a/assets/scss/bootstrap/_button-group.scss b/assets/scss/bootstrap/_button-group.scss index c1b8265..d722002 100755 --- a/assets/scss/bootstrap/_button-group.scss +++ b/assets/scss/bootstrap/_button-group.scss @@ -9,7 +9,7 @@ > .btn { position: relative; - flex: 0 1 auto; + flex: 1 1 auto; // Bring the hover, focused, and "active" buttons to the front to overlay // the borders properly @@ -22,14 +22,6 @@ z-index: 1; } } - - // Prevent double borders when buttons are next to each other - .btn + .btn, - .btn + .btn-group, - .btn-group + .btn, - .btn-group + .btn-group { - margin-left: -$btn-border-width; - } } // Optional: Group multiple button groups together for a toolbar @@ -44,8 +36,10 @@ } .btn-group { - > .btn:first-child { - margin-left: 0; + // Prevent double borders when buttons are next to each other + > .btn:not(:first-child), + > .btn-group:not(:first-child) { + margin-left: -$btn-border-width; } // Reset rounded corners @@ -76,9 +70,15 @@ padding-right: $btn-padding-x * .75; padding-left: $btn-padding-x * .75; - &::after { + &::after, + .dropup &::after, + .dropright &::after { margin-left: 0; } + + .dropleft &::before { + margin-right: 0; + } } .btn-sm + .dropdown-toggle-split { @@ -113,17 +113,14 @@ align-items: flex-start; justify-content: center; - .btn, - .btn-group { + > .btn, + > .btn-group { width: 100%; } - > .btn + .btn, - > .btn + .btn-group, - > .btn-group + .btn, - > .btn-group + .btn-group { + > .btn:not(:first-child), + > .btn-group:not(:first-child) { margin-top: -$btn-border-width; - margin-left: 0; } // Reset rounded corners diff --git a/assets/scss/bootstrap/_buttons.scss b/assets/scss/bootstrap/_buttons.scss index da6d879..2a7d94a 100755 --- a/assets/scss/bootstrap/_buttons.scss +++ b/assets/scss/bootstrap/_buttons.scss @@ -6,17 +6,19 @@ .btn { display: inline-block; + font-family: $btn-font-family; font-weight: $btn-font-weight; + color: $body-color; text-align: center; - white-space: nowrap; vertical-align: middle; user-select: none; + background-color: transparent; border: $btn-border-width solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius); + @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); @include transition($btn-transition); - // Share hover and focus styles - @include hover-focus { + @include hover { + color: $body-color; text-decoration: none; } @@ -33,14 +35,8 @@ @include box-shadow(none); } - // Opinionated: add "hand" cursor to non-disabled .btn elements - &:not(:disabled):not(.disabled) { - cursor: pointer; - } - &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active { - background-image: none; @include box-shadow($btn-active-box-shadow); &:focus { @@ -81,25 +77,23 @@ fieldset:disabled a.btn { .btn-link { font-weight: $font-weight-normal; color: $link-color; - background-color: transparent; + text-decoration: $link-decoration; @include hover { color: $link-hover-color; text-decoration: $link-hover-decoration; - background-color: transparent; - border-color: transparent; } &:focus, &.focus { text-decoration: $link-hover-decoration; - border-color: transparent; box-shadow: none; } &:disabled, &.disabled { color: $btn-link-disabled-color; + pointer-events: none; } // No need for an active state here @@ -111,11 +105,11 @@ fieldset:disabled a.btn { // .btn-lg { - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); + @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); } .btn-sm { - @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); + @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); } diff --git a/assets/scss/bootstrap/_card.scss b/assets/scss/bootstrap/_card.scss index 4c4845c..c6b67ce 100755 --- a/assets/scss/bootstrap/_card.scss +++ b/assets/scss/bootstrap/_card.scss @@ -6,7 +6,7 @@ position: relative; display: flex; flex-direction: column; - min-width: 0; + min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 word-wrap: break-word; background-color: $card-bg; background-clip: border-box; @@ -36,6 +36,7 @@ // as much space as possible, ensuring footers are aligned to the bottom. flex: 1 1 auto; padding: $card-spacer-x; + color: $card-color; } .card-title { @@ -43,7 +44,7 @@ } .card-subtitle { - margin-top: -($card-spacer-y / 2); + margin-top: -$card-spacer-y / 2; margin-bottom: 0; } @@ -68,6 +69,7 @@ .card-header { padding: $card-spacer-y $card-spacer-x; margin-bottom: 0; // Removes the default margin-bottom of <hN> + color: $card-cap-color; background-color: $card-cap-bg; border-bottom: $card-border-width solid $card-border-color; @@ -98,15 +100,15 @@ // .card-header-tabs { - margin-right: -($card-spacer-x / 2); + margin-right: -$card-spacer-x / 2; margin-bottom: -$card-spacer-y; - margin-left: -($card-spacer-x / 2); + margin-left: -$card-spacer-x / 2; border-bottom: 0; } .card-header-pills { - margin-right: -($card-spacer-x / 2); - margin-left: -($card-spacer-x / 2); + margin-right: -$card-spacer-x / 2; + margin-left: -$card-spacer-x / 2; } // Card image @@ -153,7 +155,7 @@ .card { display: flex; - // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored + // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 flex: 1 0 0%; flex-direction: column; margin-right: $card-deck-margin; @@ -183,7 +185,7 @@ // The child selector allows nested `.card` within `.card-group` // to display properly. > .card { - // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored + // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 flex: 1 0 0%; margin-bottom: 0; @@ -194,55 +196,35 @@ // Handle rounded corners @if $enable-rounded { - &:first-child { + &:not(:last-child) { @include border-right-radius(0); .card-img-top, .card-header { + // stylelint-disable-next-line property-blacklist border-top-right-radius: 0; } .card-img-bottom, .card-footer { + // stylelint-disable-next-line property-blacklist border-bottom-right-radius: 0; } } - &:last-child { + &:not(:first-child) { @include border-left-radius(0); .card-img-top, .card-header { + // stylelint-disable-next-line property-blacklist border-top-left-radius: 0; } .card-img-bottom, .card-footer { + // stylelint-disable-next-line property-blacklist border-bottom-left-radius: 0; } } - - &:only-child { - @include border-radius($card-border-radius); - - .card-img-top, - .card-header { - @include border-top-radius($card-border-radius); - } - .card-img-bottom, - .card-footer { - @include border-bottom-radius($card-border-radius); - } - } - - &:not(:first-child):not(:last-child):not(:only-child) { - @include border-radius(0); - - .card-img-top, - .card-img-bottom, - .card-header, - .card-footer { - @include border-radius(0); - } - } } } } @@ -261,6 +243,8 @@ @include media-breakpoint-up(sm) { column-count: $card-columns-count; column-gap: $card-columns-gap; + orphans: 1; + widows: 1; .card { display: inline-block; // Don't let them vertically span multiple columns @@ -268,3 +252,38 @@ } } } + + +// +// Accordion +// + +.accordion { + > .card { + overflow: hidden; + + &:not(:first-of-type) { + .card-header:first-child { + @include border-radius(0); + } + + &:not(:last-of-type) { + border-bottom: 0; + @include border-radius(0); + } + } + + &:first-of-type { + border-bottom: 0; + @include border-bottom-radius(0); + } + + &:last-of-type { + @include border-top-radius(0); + } + + .card-header { + margin-bottom: -$card-border-width; + } + } +} diff --git a/assets/scss/bootstrap/_carousel.scss b/assets/scss/bootstrap/_carousel.scss index 72a5034..20ea04b 100755 --- a/assets/scss/bootstrap/_carousel.scss +++ b/assets/scss/bootstrap/_carousel.scss @@ -1,22 +1,39 @@ -// Wrapper for the slide container and indicators +// Notes on the classes: +// +// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically) +// even when their scroll action started on a carousel, but for compatibility (with Firefox) +// we're preventing all actions instead +// 2. The .carousel-item-left and .carousel-item-right is used to indicate where +// the active slide is heading. +// 3. .active.carousel-item is the current slide. +// 4. .active.carousel-item-left and .active.carousel-item-right is the current +// slide in its in-transition state. Only one of these occurs at a time. +// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right +// is the upcoming slide in transition. + .carousel { position: relative; } +.carousel.pointer-event { + touch-action: pan-y; +} + .carousel-inner { position: relative; width: 100%; overflow: hidden; + @include clearfix(); } .carousel-item { position: relative; display: none; - align-items: center; + float: left; width: 100%; - @include transition($carousel-transition); + margin-right: -100%; backface-visibility: hidden; - perspective: 1000px; + @include transition($carousel-transition); } .carousel-item.active, @@ -25,37 +42,40 @@ display: block; } -.carousel-item-next, -.carousel-item-prev { - position: absolute; - top: 0; +.carousel-item-next:not(.carousel-item-left), +.active.carousel-item-right { + transform: translateX(100%); } -// CSS3 transforms when supported by the browser -.carousel-item-next.carousel-item-left, -.carousel-item-prev.carousel-item-right { - transform: translateX(0); - - @supports (transform-style: preserve-3d) { - transform: translate3d(0, 0, 0); - } +.carousel-item-prev:not(.carousel-item-right), +.active.carousel-item-left { + transform: translateX(-100%); } -.carousel-item-next, -.active.carousel-item-right { - transform: translateX(100%); - @supports (transform-style: preserve-3d) { - transform: translate3d(100%, 0, 0); +// +// Alternate transitions +// + +.carousel-fade { + .carousel-item { + opacity: 0; + transition-property: opacity; + transform: none; } -} -.carousel-item-prev, -.active.carousel-item-left { - transform: translateX(-100%); + .carousel-item.active, + .carousel-item-next.carousel-item-left, + .carousel-item-prev.carousel-item-right { + z-index: 1; + opacity: 1; + } - @supports (transform-style: preserve-3d) { - transform: translate3d(-100%, 0, 0); + .active.carousel-item-left, + .active.carousel-item-right { + z-index: 0; + opacity: 0; + @include transition(0s $carousel-transition-duration opacity); } } @@ -69,6 +89,7 @@ position: absolute; top: 0; bottom: 0; + z-index: 1; // Use flex for alignment (1-3) display: flex; // 1. allow flex styles align-items: center; // 2. vertically center contents @@ -77,27 +98,26 @@ color: $carousel-control-color; text-align: center; opacity: $carousel-control-opacity; - // We can't have a transition here because WebKit cancels the carousel - // animation if you trip this while in the middle of another animation. + @include transition($carousel-control-transition); // Hover/focus state @include hover-focus { color: $carousel-control-color; text-decoration: none; outline: 0; - opacity: .9; + opacity: $carousel-control-hover-opacity; } } .carousel-control-prev { left: 0; @if $enable-gradients { - background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001)); + background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); } } .carousel-control-next { right: 0; @if $enable-gradients { - background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001)); + background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); } } @@ -107,8 +127,7 @@ display: inline-block; width: $carousel-control-icon-width; height: $carousel-control-icon-width; - background: transparent no-repeat center center; - background-size: 100% 100%; + background: no-repeat 50% / 100% 100%; } .carousel-control-prev-icon { background-image: $carousel-control-prev-icon-bg; @@ -126,7 +145,7 @@ .carousel-indicators { position: absolute; right: 0; - bottom: 10px; + bottom: 0; left: 0; z-index: 15; display: flex; @@ -138,38 +157,25 @@ list-style: none; li { - position: relative; + box-sizing: content-box; flex: 0 1 auto; width: $carousel-indicator-width; height: $carousel-indicator-height; margin-right: $carousel-indicator-spacer; margin-left: $carousel-indicator-spacer; text-indent: -999px; - background-color: rgba($carousel-indicator-active-bg, .5); - - // Use pseudo classes to increase the hit area by 10px on top and bottom. - &::before { - position: absolute; - top: -10px; - left: 0; - display: inline-block; - width: 100%; - height: 10px; - content: ""; - } - &::after { - position: absolute; - bottom: -10px; - left: 0; - display: inline-block; - width: 100%; - height: 10px; - content: ""; - } + cursor: pointer; + background-color: $carousel-indicator-active-bg; + background-clip: padding-box; + // Use transparent borders to increase the hit area by 10px on top and bottom. + border-top: $carousel-indicator-hit-area-height solid transparent; + border-bottom: $carousel-indicator-hit-area-height solid transparent; + opacity: .5; + @include transition($carousel-indicator-transition); } .active { - background-color: $carousel-indicator-active-bg; + opacity: 1; } } @@ -180,9 +186,9 @@ .carousel-caption { position: absolute; - right: ((100% - $carousel-caption-width) / 2); + right: (100% - $carousel-caption-width) / 2; bottom: 20px; - left: ((100% - $carousel-caption-width) / 2); + left: (100% - $carousel-caption-width) / 2; z-index: 10; padding-top: 20px; padding-bottom: 20px; diff --git a/assets/scss/bootstrap/_close.scss b/assets/scss/bootstrap/_close.scss index 871cb08..5cc96f5 100755 --- a/assets/scss/bootstrap/_close.scss +++ b/assets/scss/bootstrap/_close.scss @@ -1,21 +1,22 @@ .close { float: right; - font-size: $close-font-size; + @include font-size($close-font-size); font-weight: $close-font-weight; line-height: 1; color: $close-color; text-shadow: $close-text-shadow; opacity: .5; - @include hover-focus { + // Override <a>'s hover style + @include hover { color: $close-color; text-decoration: none; - opacity: .75; } - // Opinionated: add "hand" cursor to non-disabled .close elements &:not(:disabled):not(.disabled) { - cursor: pointer; + @include hover-focus { + opacity: .75; + } } } @@ -24,11 +25,17 @@ // If you want the anchor version, it requires `href="#"`. // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile -// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type +// stylelint-disable-next-line selector-no-qualifying-type button.close { padding: 0; background-color: transparent; border: 0; - -webkit-appearance: none; + appearance: none; +} + +// Future-proof disabling of clicks on `<a>` elements + +// stylelint-disable-next-line selector-no-qualifying-type +a.close.disabled { + pointer-events: none; } -// stylelint-enable diff --git a/assets/scss/bootstrap/_code.scss b/assets/scss/bootstrap/_code.scss index 9de20fa..74b6e1c 100755 --- a/assets/scss/bootstrap/_code.scss +++ b/assets/scss/bootstrap/_code.scss @@ -1,14 +1,6 @@ -// Inline and block code styles -code, -kbd, -pre, -samp { - font-family: $font-family-monospace; -} - // Inline code code { - font-size: $code-font-size; + @include font-size($code-font-size); color: $code-color; word-break: break-word; @@ -21,7 +13,7 @@ code { // User input typically entered via keyboard kbd { padding: $kbd-padding-y $kbd-padding-x; - font-size: $kbd-font-size; + @include font-size($kbd-font-size); color: $kbd-color; background-color: $kbd-bg; @include border-radius($border-radius-sm); @@ -29,7 +21,7 @@ kbd { kbd { padding: 0; - font-size: 100%; + @include font-size(100%); font-weight: $nested-kbd-font-weight; @include box-shadow(none); } @@ -38,12 +30,12 @@ kbd { // Blocks of code pre { display: block; - font-size: $code-font-size; + @include font-size($code-font-size); color: $pre-color; // Account for some code outputs that place code tags in pre tags code { - font-size: inherit; + @include font-size(inherit); color: inherit; word-break: normal; } diff --git a/assets/scss/bootstrap/_custom-forms.scss b/assets/scss/bootstrap/_custom-forms.scss index 2d83f7e..03f3fc5 100755 --- a/assets/scss/bootstrap/_custom-forms.scss +++ b/assets/scss/bootstrap/_custom-forms.scss @@ -10,8 +10,8 @@ .custom-control { position: relative; display: block; - min-height: (1rem * $line-height-base); - padding-left: $custom-control-gutter; + min-height: $font-size-base * $line-height-base; + padding-left: $custom-control-gutter + $custom-control-indicator-size; } .custom-control-inline { @@ -26,18 +26,28 @@ &:checked ~ .custom-control-label::before { color: $custom-control-indicator-checked-color; + border-color: $custom-control-indicator-checked-border-color; @include gradient-bg($custom-control-indicator-checked-bg); @include box-shadow($custom-control-indicator-checked-box-shadow); } &:focus ~ .custom-control-label::before { // the mixin is not used here to make sure there is feedback - box-shadow: $custom-control-indicator-focus-box-shadow; + @if $enable-shadows { + box-shadow: $input-box-shadow, $input-focus-box-shadow; + } @else { + box-shadow: $custom-control-indicator-focus-box-shadow; + } + } + + &:focus:not(:checked) ~ .custom-control-label::before { + border-color: $custom-control-indicator-focus-border-color; } - &:active ~ .custom-control-label::before { + &:not(:disabled):active ~ .custom-control-label::before { color: $custom-control-indicator-active-color; background-color: $custom-control-indicator-active-bg; + border-color: $custom-control-indicator-active-border-color; @include box-shadow($custom-control-indicator-active-box-shadow); } @@ -54,38 +64,38 @@ // Custom control indicators // -// Build the custom controls out of psuedo-elements. +// Build the custom controls out of pseudo-elements. .custom-control-label { + position: relative; margin-bottom: 0; + vertical-align: top; // Background-color and (when enabled) gradient &::before { position: absolute; - top: (($line-height-base - $custom-control-indicator-size) / 2); - left: 0; + top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2; + left: -($custom-control-gutter + $custom-control-indicator-size); display: block; width: $custom-control-indicator-size; height: $custom-control-indicator-size; pointer-events: none; content: ""; - user-select: none; background-color: $custom-control-indicator-bg; + border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width; @include box-shadow($custom-control-indicator-box-shadow); } // Foreground (icon) &::after { position: absolute; - top: (($line-height-base - $custom-control-indicator-size) / 2); - left: 0; + top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2; + left: -($custom-control-gutter + $custom-control-indicator-size); display: block; width: $custom-control-indicator-size; height: $custom-control-indicator-size; content: ""; - background-repeat: no-repeat; - background-position: center center; - background-size: $custom-control-indicator-bg-size; + background: no-repeat 50% / #{$custom-control-indicator-bg-size}; } } @@ -100,9 +110,6 @@ } .custom-control-input:checked ~ .custom-control-label { - &::before { - @include gradient-bg($custom-control-indicator-checked-bg); - } &::after { background-image: $custom-checkbox-indicator-icon-checked; } @@ -110,6 +117,7 @@ .custom-control-input:indeterminate ~ .custom-control-label { &::before { + border-color: $custom-checkbox-indicator-indeterminate-border-color; @include gradient-bg($custom-checkbox-indicator-indeterminate-bg); @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow); } @@ -134,15 +142,56 @@ .custom-radio { .custom-control-label::before { + // stylelint-disable-next-line property-blacklist border-radius: $custom-radio-indicator-border-radius; } .custom-control-input:checked ~ .custom-control-label { + &::after { + background-image: $custom-radio-indicator-icon-checked; + } + } + + .custom-control-input:disabled { + &:checked ~ .custom-control-label::before { + background-color: $custom-control-indicator-checked-disabled-bg; + } + } +} + + +// switches +// +// Tweak a few things for switches + +.custom-switch { + padding-left: $custom-switch-width + $custom-control-gutter; + + .custom-control-label { &::before { - @include gradient-bg($custom-control-indicator-checked-bg); + left: -($custom-switch-width + $custom-control-gutter); + width: $custom-switch-width; + pointer-events: all; + // stylelint-disable-next-line property-blacklist + border-radius: $custom-switch-indicator-border-radius; } + &::after { - background-image: $custom-radio-indicator-icon-checked; + top: calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2}); + left: calc(#{-($custom-switch-width + $custom-control-gutter)} + #{$custom-control-indicator-border-width * 2}); + width: $custom-switch-indicator-size; + height: $custom-switch-indicator-size; + background-color: $custom-control-indicator-border-color; + // stylelint-disable-next-line property-blacklist + border-radius: $custom-switch-indicator-border-radius; + @include transition(transform .15s ease-in-out, $custom-forms-transition); + } + } + + .custom-control-input:checked ~ .custom-control-label { + &::after { + background-color: $custom-control-indicator-bg; + transform: translateX($custom-switch-width - $custom-control-indicator-size); } } @@ -157,7 +206,7 @@ // Select // // Replaces the browser default select with a custom one, mostly pulled from -// http://primercss.io. +// https://primer.github.io/. // .custom-select { @@ -165,23 +214,27 @@ width: 100%; height: $custom-select-height; padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; + font-family: $custom-select-font-family; + @include font-size($custom-select-font-size); + font-weight: $custom-select-font-weight; line-height: $custom-select-line-height; color: $custom-select-color; vertical-align: middle; - background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; - background-size: $custom-select-bg-size; + background: $custom-select-background; + background-color: $custom-select-bg; border: $custom-select-border-width solid $custom-select-border-color; - @if $enable-rounded { - border-radius: $custom-select-border-radius; - } @else { - border-radius: 0; - } + @include border-radius($custom-select-border-radius, 0); + @include box-shadow($custom-select-box-shadow); appearance: none; &:focus { border-color: $custom-select-focus-border-color; outline: 0; - box-shadow: $custom-select-focus-box-shadow; + @if $enable-shadows { + box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow; + } @else { + box-shadow: $custom-select-focus-box-shadow; + } &::-ms-value { // For visual consistency with other platforms/browsers, @@ -208,22 +261,24 @@ // Hides the default caret in IE11 &::-ms-expand { - opacity: 0; + display: none; } } .custom-select-sm { height: $custom-select-height-sm; - padding-top: $custom-select-padding-y; - padding-bottom: $custom-select-padding-y; - font-size: $custom-select-font-size-sm; + padding-top: $custom-select-padding-y-sm; + padding-bottom: $custom-select-padding-y-sm; + padding-left: $custom-select-padding-x-sm; + @include font-size($custom-select-font-size-sm); } .custom-select-lg { height: $custom-select-height-lg; - padding-top: $custom-select-padding-y; - padding-bottom: $custom-select-padding-y; - font-size: $custom-select-font-size-lg; + padding-top: $custom-select-padding-y-lg; + padding-bottom: $custom-select-padding-y-lg; + padding-left: $custom-select-padding-x-lg; + @include font-size($custom-select-font-size-lg); } @@ -247,13 +302,13 @@ margin: 0; opacity: 0; - &:focus ~ .custom-file-control { + &:focus ~ .custom-file-label { border-color: $custom-file-focus-border-color; box-shadow: $custom-file-focus-box-shadow; + } - &::before { - border-color: $custom-file-focus-border-color; - } + &:disabled ~ .custom-file-label { + background-color: $custom-file-disabled-bg; } @each $lang, $value in $custom-file-text { @@ -261,6 +316,10 @@ content: $value; } } + + ~ .custom-file-label[data-browse]::after { + content: attr(data-browse); + } } .custom-file-label { @@ -271,6 +330,8 @@ z-index: 1; height: $custom-file-height; padding: $custom-file-padding-y $custom-file-padding-x; + font-family: $custom-file-font-family; + font-weight: $custom-file-font-weight; line-height: $custom-file-line-height; color: $custom-file-color; background-color: $custom-file-bg; @@ -285,13 +346,162 @@ bottom: 0; z-index: 3; display: block; - height: calc(#{$custom-file-height} - #{$custom-file-border-width} * 2); + height: $custom-file-height-inner; padding: $custom-file-padding-y $custom-file-padding-x; line-height: $custom-file-line-height; color: $custom-file-button-color; content: "Browse"; @include gradient-bg($custom-file-button-bg); - border-left: $custom-file-border-width solid $custom-file-border-color; + border-left: inherit; @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); } } + +// Range +// +// Style range inputs the same across browsers. Vendor-specific rules for pseudo +// elements cannot be mixed. As such, there are no shared styles for focus or +// active states on prefixed selectors. + +.custom-range { + width: 100%; + height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2}); + padding: 0; // Need to reset padding + background-color: transparent; + appearance: none; + + &:focus { + outline: none; + + // Pseudo-elements must be split across multiple rulesets to have an effect. + // No box-shadow() mixin for focus accessibility. + &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } + &::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } + &::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } + } + + &::-moz-focus-outer { + border: 0; + } + + &::-webkit-slider-thumb { + width: $custom-range-thumb-width; + height: $custom-range-thumb-height; + margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific + @include gradient-bg($custom-range-thumb-bg); + border: $custom-range-thumb-border; + @include border-radius($custom-range-thumb-border-radius); + @include box-shadow($custom-range-thumb-box-shadow); + @include transition($custom-forms-transition); + appearance: none; + + &:active { + @include gradient-bg($custom-range-thumb-active-bg); + } + } + + &::-webkit-slider-runnable-track { + width: $custom-range-track-width; + height: $custom-range-track-height; + color: transparent; // Why? + cursor: $custom-range-track-cursor; + background-color: $custom-range-track-bg; + border-color: transparent; + @include border-radius($custom-range-track-border-radius); + @include box-shadow($custom-range-track-box-shadow); + } + + &::-moz-range-thumb { + width: $custom-range-thumb-width; + height: $custom-range-thumb-height; + @include gradient-bg($custom-range-thumb-bg); + border: $custom-range-thumb-border; + @include border-radius($custom-range-thumb-border-radius); + @include box-shadow($custom-range-thumb-box-shadow); + @include transition($custom-forms-transition); + appearance: none; + + &:active { + @include gradient-bg($custom-range-thumb-active-bg); + } + } + + &::-moz-range-track { + width: $custom-range-track-width; + height: $custom-range-track-height; + color: transparent; + cursor: $custom-range-track-cursor; + background-color: $custom-range-track-bg; + border-color: transparent; // Firefox specific? + @include border-radius($custom-range-track-border-radius); + @include box-shadow($custom-range-track-box-shadow); + } + + &::-ms-thumb { + width: $custom-range-thumb-width; + height: $custom-range-thumb-height; + margin-top: 0; // Edge specific + margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. + margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. + @include gradient-bg($custom-range-thumb-bg); + border: $custom-range-thumb-border; + @include border-radius($custom-range-thumb-border-radius); + @include box-shadow($custom-range-thumb-box-shadow); + @include transition($custom-forms-transition); + appearance: none; + + &:active { + @include gradient-bg($custom-range-thumb-active-bg); + } + } + + &::-ms-track { + width: $custom-range-track-width; + height: $custom-range-track-height; + color: transparent; + cursor: $custom-range-track-cursor; + background-color: transparent; + border-color: transparent; + border-width: $custom-range-thumb-height / 2; + @include box-shadow($custom-range-track-box-shadow); + } + + &::-ms-fill-lower { + background-color: $custom-range-track-bg; + @include border-radius($custom-range-track-border-radius); + } + + &::-ms-fill-upper { + margin-right: 15px; // arbitrary? + background-color: $custom-range-track-bg; + @include border-radius($custom-range-track-border-radius); + } + + &:disabled { + &::-webkit-slider-thumb { + background-color: $custom-range-thumb-disabled-bg; + } + + &::-webkit-slider-runnable-track { + cursor: default; + } + + &::-moz-range-thumb { + background-color: $custom-range-thumb-disabled-bg; + } + + &::-moz-range-track { + cursor: default; + } + + &::-ms-thumb { + background-color: $custom-range-thumb-disabled-bg; + } + } +} + +.custom-control-label::before, +.custom-file-label, +.custom-select { + @include transition($custom-forms-transition); +} diff --git a/assets/scss/bootstrap/_dropdown.scss b/assets/scss/bootstrap/_dropdown.scss index a9d4cfe..ac3c8c8 100755 --- a/assets/scss/bootstrap/_dropdown.scss +++ b/assets/scss/bootstrap/_dropdown.scss @@ -1,10 +1,14 @@ // The dropdown wrapper (`<div>`) .dropup, -.dropdown { +.dropright, +.dropdown, +.dropleft { position: relative; } .dropdown-toggle { + white-space: nowrap; + // Generate the caret automatically @include caret; } @@ -20,8 +24,8 @@ min-width: $dropdown-min-width; padding: $dropdown-padding-y 0; margin: $dropdown-spacer 0 0; // override default ul - font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues - color: $body-color; + @include font-size($dropdown-font-size); + color: $dropdown-color; text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) list-style: none; background-color: $dropdown-bg; @@ -31,10 +35,28 @@ @include box-shadow($dropdown-box-shadow); } +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .dropdown-menu#{$infix}-left { + right: auto; + left: 0; + } + + .dropdown-menu#{$infix}-right { + right: 0; + left: auto; + } + } +} + // Allow for dropdowns to go bottom up (aka, dropup-menu) // Just add .dropup after the standard .dropdown class and you're set. .dropup { .dropdown-menu { + top: auto; + bottom: 100%; margin-top: 0; margin-bottom: $dropdown-spacer; } @@ -46,6 +68,9 @@ .dropright { .dropdown-menu { + top: 0; + right: auto; + left: 100%; margin-top: 0; margin-left: $dropdown-spacer; } @@ -60,6 +85,9 @@ .dropleft { .dropdown-menu { + top: 0; + right: 100%; + left: auto; margin-top: 0; margin-right: $dropdown-spacer; } @@ -72,9 +100,21 @@ } } +// When enabled Popper.js, reset basic dropdown position +// stylelint-disable-next-line no-duplicate-selectors +.dropdown-menu { + &[x-placement^="top"], + &[x-placement^="right"], + &[x-placement^="bottom"], + &[x-placement^="left"] { + right: auto; + bottom: auto; + } +} + // Dividers (basically an `<hr>`) within the dropdown .dropdown-divider { - @include nav-divider($dropdown-divider-bg); + @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y); } // Links, buttons, and more within the dropdown menu @@ -92,6 +132,18 @@ background-color: transparent; // For `<button>`s border: 0; // For `<button>`s + // Prevent dropdown overflow if there's no padding + // See https://github.com/twbs/bootstrap/pull/27703 + @if $dropdown-padding-y == 0 { + &:first-child { + @include border-top-radius($dropdown-inner-border-radius); + } + + &:last-child { + @include border-bottom-radius($dropdown-inner-border-radius); + } + } + @include hover-focus { color: $dropdown-link-hover-color; text-decoration: none; @@ -108,6 +160,7 @@ &.disabled, &:disabled { color: $dropdown-link-disabled-color; + pointer-events: none; background-color: transparent; // Remove CSS gradients if they're enabled @if $enable-gradients { @@ -125,7 +178,14 @@ display: block; padding: $dropdown-padding-y $dropdown-item-padding-x; margin-bottom: 0; // for use with heading elements - font-size: $font-size-sm; + @include font-size($font-size-sm); color: $dropdown-header-color; white-space: nowrap; // as with > li > a } + +// Dropdown text +.dropdown-item-text { + display: block; + padding: $dropdown-item-padding-y $dropdown-item-padding-x; + color: $dropdown-link-color; +} diff --git a/assets/scss/bootstrap/_forms.scss b/assets/scss/bootstrap/_forms.scss index b0954f8..ec9c335 100755 --- a/assets/scss/bootstrap/_forms.scss +++ b/assets/scss/bootstrap/_forms.scss @@ -7,8 +7,11 @@ .form-control { display: block; width: 100%; + height: $input-height; padding: $input-padding-y $input-padding-x; - font-size: $font-size-base; + font-family: $input-font-family; + @include font-size($input-font-size); + font-weight: $input-font-weight; line-height: $input-line-height; color: $input-color; background-color: $input-bg; @@ -16,13 +19,7 @@ border: $input-border-width solid $input-border-color; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS. - @if $enable-rounded { - // Manually use the if/else instead of the mixin to account for iOS override - border-radius: $input-border-radius; - } @else { - // Otherwise undo the iOS default - border-radius: 0; - } + @include border-radius($input-border-radius, 0); @include box-shadow($input-box-shadow); @include transition($input-transition); @@ -57,10 +54,6 @@ } select.form-control { - &:not([size]):not([multiple]) { - height: $input-height; - } - &:focus::-ms-value { // Suppress the nested default white text on blue background highlight given to // the selected option text when the (still closed) <select> receives focus @@ -90,21 +83,21 @@ select.form-control { padding-top: calc(#{$input-padding-y} + #{$input-border-width}); padding-bottom: calc(#{$input-padding-y} + #{$input-border-width}); margin-bottom: 0; // Override the `<label>/<legend>` default - font-size: inherit; // Override the `<legend>` default + @include font-size(inherit); // Override the `<legend>` default line-height: $input-line-height; } .col-form-label-lg { padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width}); padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width}); - font-size: $font-size-lg; + @include font-size($input-font-size-lg); line-height: $input-line-height-lg; } .col-form-label-sm { padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width}); padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width}); - font-size: $font-size-sm; + @include font-size($input-font-size-sm); line-height: $input-line-height-sm; } @@ -121,6 +114,7 @@ select.form-control { padding-bottom: $input-padding-y; margin-bottom: 0; // match inputs if this class comes on inputs with default margins line-height: $input-line-height; + color: $input-plaintext-color; background-color: transparent; border: solid transparent; border-width: $input-border-width 0; @@ -138,35 +132,35 @@ select.form-control { // Build on `.form-control` with modifier classes to decrease or increase the // height and font-size of form controls. // -// The `.form-group-* form-control` variations are sadly duplicated to avoid the -// issue documented in https://github.com/twbs/bootstrap/issues/15074. +// Repeated in `_input_group.scss` to avoid Sass extend issues. .form-control-sm { + height: $input-height-sm; padding: $input-padding-y-sm $input-padding-x-sm; - font-size: $font-size-sm; + @include font-size($input-font-size-sm); line-height: $input-line-height-sm; @include border-radius($input-border-radius-sm); } -select.form-control-sm { - &:not([size]):not([multiple]) { - height: $input-height-sm; - } -} - .form-control-lg { + height: $input-height-lg; padding: $input-padding-y-lg $input-padding-x-lg; - font-size: $font-size-lg; + @include font-size($input-font-size-lg); line-height: $input-line-height-lg; @include border-radius($input-border-radius-lg); } -select.form-control-lg { - &:not([size]):not([multiple]) { - height: $input-height-lg; +// stylelint-disable-next-line no-duplicate-selectors +select.form-control { + &[size], + &[multiple] { + height: auto; } } +textarea.form-control { + height: auto; +} // Form groups // @@ -190,13 +184,13 @@ select.form-control-lg { .form-row { display: flex; flex-wrap: wrap; - margin-right: -5px; - margin-left: -5px; + margin-right: -$form-grid-gutter-width / 2; + margin-left: -$form-grid-gutter-width / 2; > .col, > [class*="col-"] { - padding-right: 5px; - padding-left: 5px; + padding-right: $form-grid-gutter-width / 2; + padding-left: $form-grid-gutter-width / 2; } } @@ -248,8 +242,9 @@ select.form-control-lg { // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for // server side validation. -@include form-validation-state("valid", $form-feedback-valid-color); -@include form-validation-state("invalid", $form-feedback-invalid-color); +@each $state, $data in $form-validation-states { + @include form-validation-state($state, map-get($data, color), map-get($data, icon)); +} // Inline forms // @@ -302,7 +297,8 @@ select.form-control-lg { display: inline-block; } - .input-group { + .input-group, + .custom-select { width: auto; } @@ -317,6 +313,7 @@ select.form-control-lg { } .form-check-input { position: relative; + flex-shrink: 0; margin-top: 0; margin-right: $form-check-input-margin-x; margin-left: 0; diff --git a/assets/scss/bootstrap/_functions.scss b/assets/scss/bootstrap/_functions.scss index 1266d34..d2cc91d 100755 --- a/assets/scss/bootstrap/_functions.scss +++ b/assets/scss/bootstrap/_functions.scss @@ -1,6 +1,6 @@ // Bootstrap functions // -// Utility mixins and functions for evalutating source code across our variables, maps, and mixins. +// Utility mixins and functions for evaluating source code across our variables, maps, and mixins. // Ascending // Used to evaluate Sass maps like our grid breakpoints. @@ -8,7 +8,7 @@ $prev-key: null; $prev-num: null; @each $key, $num in $map { - @if $prev-num == null { + @if $prev-num == null or unit($num) == "%" { // Do nothing } @else if not comparable($prev-num, $num) { @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; @@ -21,12 +21,12 @@ } // Starts at zero -// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0. -@mixin _assert-starts-at-zero($map) { +// Used to ensure the min-width of the lowest breakpoint starts at 0. +@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") { $values: map-values($map); $first-value: nth($values, 1); @if $first-value != 0 { - @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}."; + @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}."; } } @@ -49,7 +49,7 @@ } // Color contrast -@function color-yiq($color) { +@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) { $r: red($color); $g: green($color); $b: blue($color); @@ -57,9 +57,9 @@ $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; @if ($yiq >= $yiq-contrasted-threshold) { - @return $yiq-text-dark; + @return $dark; } @else { - @return $yiq-text-light; + @return $light; } } @@ -79,7 +79,7 @@ // Request a theme color level @function theme-color-level($color-name: "primary", $level: 0) { $color: theme-color($color-name); - $color-base: if($level > 0, #000, #fff); + $color-base: if($level > 0, $black, $white); $level: abs($level); @return mix($color-base, $color, $level * $theme-color-interval); diff --git a/assets/scss/bootstrap/_images.scss b/assets/scss/bootstrap/_images.scss index 2bce02f..cb9795e 100755 --- a/assets/scss/bootstrap/_images.scss +++ b/assets/scss/bootstrap/_images.scss @@ -32,11 +32,11 @@ } .figure-img { - margin-bottom: ($spacer / 2); + margin-bottom: $spacer / 2; line-height: 1; } .figure-caption { - font-size: $figure-caption-font-size; + @include font-size($figure-caption-font-size); color: $figure-caption-color; } diff --git a/assets/scss/bootstrap/_input-group.scss b/assets/scss/bootstrap/_input-group.scss index 2f7b05d..ac49f69 100755 --- a/assets/scss/bootstrap/_input-group.scss +++ b/assets/scss/bootstrap/_input-group.scss @@ -12,6 +12,7 @@ width: 100%; > .form-control, + > .form-control-plaintext, > .custom-select, > .custom-file { position: relative; // For focus state's z-index @@ -21,11 +22,6 @@ width: 1%; margin-bottom: 0; - // Bring the "active" form control to the top of surrounding elements - &:focus { - z-index: 3; - } - + .form-control, + .custom-select, + .custom-file { @@ -33,6 +29,18 @@ } } + // Bring the "active" form control to the top of surrounding elements + > .form-control:focus, + > .custom-select:focus, + > .custom-file .custom-file-input:focus ~ .custom-file-label { + z-index: 3; + } + + // Bring the custom file input above the label + > .custom-file .custom-file-input:focus { + z-index: 4; + } + > .form-control, > .custom-select { &:not(:last-child) { @include border-right-radius(0); } @@ -46,9 +54,8 @@ align-items: center; &:not(:last-child) .custom-file-label, - &:not(:last-child) .custom-file-label::before { @include border-right-radius(0); } - &:not(:first-child) .custom-file-label, - &:not(:first-child) .custom-file-label::before { @include border-left-radius(0); } + &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); } + &:not(:first-child) .custom-file-label { @include border-left-radius(0); } } } @@ -69,6 +76,10 @@ .btn { position: relative; z-index: 2; + + &:focus { + z-index: 3; + } } .btn + .btn, @@ -93,7 +104,7 @@ align-items: center; padding: $input-padding-y $input-padding-x; margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom - font-size: $font-size-base; // Match inputs + @include font-size($input-font-size); // Match inputs font-weight: $font-weight-normal; line-height: $input-line-height; color: $input-group-addon-color; @@ -116,20 +127,43 @@ // Remix the default form control sizing classes into new ones for easier // manipulation. +.input-group-lg > .form-control:not(textarea), +.input-group-lg > .custom-select { + height: $input-height-lg; +} + .input-group-lg > .form-control, +.input-group-lg > .custom-select, .input-group-lg > .input-group-prepend > .input-group-text, .input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-prepend > .btn, .input-group-lg > .input-group-append > .btn { - @extend .form-control-lg; + padding: $input-padding-y-lg $input-padding-x-lg; + @include font-size($input-font-size-lg); + line-height: $input-line-height-lg; + @include border-radius($input-border-radius-lg); +} + +.input-group-sm > .form-control:not(textarea), +.input-group-sm > .custom-select { + height: $input-height-sm; } .input-group-sm > .form-control, +.input-group-sm > .custom-select, .input-group-sm > .input-group-prepend > .input-group-text, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-append > .btn { - @extend .form-control-sm; + padding: $input-padding-y-sm $input-padding-x-sm; + @include font-size($input-font-size-sm); + line-height: $input-line-height-sm; + @include border-radius($input-border-radius-sm); +} + +.input-group-lg > .custom-select, +.input-group-sm > .custom-select { + padding-right: $custom-select-padding-x + $custom-select-indicator-padding; } diff --git a/assets/scss/bootstrap/_jumbotron.scss b/assets/scss/bootstrap/_jumbotron.scss index 7966bba..bcd7dca 100755 --- a/assets/scss/bootstrap/_jumbotron.scss +++ b/assets/scss/bootstrap/_jumbotron.scss @@ -1,6 +1,7 @@ .jumbotron { padding: $jumbotron-padding ($jumbotron-padding / 2); margin-bottom: $jumbotron-padding; + color: $jumbotron-color; background-color: $jumbotron-bg; @include border-radius($border-radius-lg); diff --git a/assets/scss/bootstrap/_list-group.scss b/assets/scss/bootstrap/_list-group.scss index 9f145c1..3f80687 100755 --- a/assets/scss/bootstrap/_list-group.scss +++ b/assets/scss/bootstrap/_list-group.scss @@ -24,6 +24,7 @@ // Hover state @include hover-focus { + z-index: 1; // Place hover/focus items above their siblings for proper border styling color: $list-group-action-hover-color; text-decoration: none; background-color: $list-group-hover-bg; @@ -46,6 +47,7 @@ padding: $list-group-item-padding-y $list-group-item-padding-x; // Place the border on the list items and negative margin up for better styling margin-bottom: -$list-group-border-width; + color: $list-group-color; background-color: $list-group-bg; border: $list-group-border-width solid $list-group-border-color; @@ -58,14 +60,10 @@ @include border-bottom-radius($list-group-border-radius); } - @include hover-focus { - z-index: 1; // Place hover/active items above their siblings for proper border styling - text-decoration: none; - } - &.disabled, &:disabled { color: $list-group-disabled-color; + pointer-events: none; background-color: $list-group-disabled-bg; } @@ -79,6 +77,37 @@ } +// Horizontal +// +// Change the layout of list group items from vertical (default) to horizontal. + +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .list-group-horizontal#{$infix} { + flex-direction: row; + + .list-group-item { + margin-right: -$list-group-border-width; + margin-bottom: 0; + + &:first-child { + @include border-left-radius($list-group-border-radius); + @include border-top-right-radius(0); + } + + &:last-child { + margin-right: 0; + @include border-right-radius($list-group-border-radius); + @include border-bottom-left-radius(0); + } + } + } + } +} + + // Flush list items // // Remove borders and border-radius to keep list group items edge-to-edge. Most @@ -89,6 +118,10 @@ border-right: 0; border-left: 0; @include border-radius(0); + + &:last-child { + margin-bottom: -$list-group-border-width; + } } &:first-child { @@ -99,6 +132,7 @@ &:last-child { .list-group-item:last-child { + margin-bottom: 0; border-bottom: 0; } } diff --git a/assets/scss/bootstrap/_mixins.scss b/assets/scss/bootstrap/_mixins.scss index d9a1774..cc95784 100755 --- a/assets/scss/bootstrap/_mixins.scss +++ b/assets/scss/bootstrap/_mixins.scss @@ -2,6 +2,12 @@ // // Used in conjunction with global variables to enable certain theme features. +// Vendor +@import "vendor/rfs"; + +// Deprecate +@import "mixins/deprecate"; + // Utilities @import "mixins/breakpoints"; @import "mixins/hover"; @@ -36,7 +42,6 @@ // // Layout @import "mixins/clearfix"; -// @import "mixins/navbar-align"; @import "mixins/grid-framework"; @import "mixins/grid"; @import "mixins/float"; diff --git a/assets/scss/bootstrap/_modal.scss b/assets/scss/bootstrap/_modal.scss index edda836..6b6770b 100755 --- a/assets/scss/bootstrap/_modal.scss +++ b/assets/scss/bootstrap/_modal.scss @@ -4,20 +4,25 @@ // .modal-content - actual modal w/ bg and corners and stuff -// Kill the scroll on the body .modal-open { + // Kill the scroll on the body overflow: hidden; + + .modal { + overflow-x: hidden; + overflow-y: auto; + } } // Container that the modal scrolls within .modal { position: fixed; top: 0; - right: 0; - bottom: 0; left: 0; z-index: $zindex-modal; display: none; + width: 100%; + height: 100%; overflow: hidden; // Prevent Chrome on Windows from adding a focus outline. For details, see // https://github.com/twbs/bootstrap/pull/10951. @@ -25,11 +30,6 @@ // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342 // See also https://github.com/twbs/bootstrap/issues/17695 - - .modal-open & { - overflow-x: hidden; - overflow-y: auto; - } } // Shell div to position the modal with bottom padding @@ -43,17 +43,58 @@ // When fading in the modal, animate it to slide down .modal.fade & { @include transition($modal-transition); - transform: translate(0, -25%); + transform: $modal-fade-transform; } .modal.show & { - transform: translate(0, 0); + transform: $modal-show-transform; + } +} + +.modal-dialog-scrollable { + display: flex; // IE10/11 + max-height: calc(100% - #{$modal-dialog-margin * 2}); + + .modal-content { + max-height: calc(100vh - #{$modal-dialog-margin * 2}); // IE10/11 + overflow: hidden; + } + + .modal-header, + .modal-footer { + flex-shrink: 0; + } + + .modal-body { + overflow-y: auto; } } .modal-dialog-centered { display: flex; align-items: center; - min-height: calc(100% - (#{$modal-dialog-margin} * 2)); + min-height: calc(100% - #{$modal-dialog-margin * 2}); + + // Ensure `modal-dialog-centered` extends the full height of the view (IE10/11) + &::before { + display: block; // IE10 + height: calc(100vh - #{$modal-dialog-margin * 2}); + content: ""; + } + + // Ensure `.modal-body` shows scrollbar (IE10/11) + &.modal-dialog-scrollable { + flex-direction: column; + justify-content: center; + height: 100%; + + .modal-content { + max-height: none; + } + + &::before { + content: none; + } + } } // Actual modal @@ -63,11 +104,12 @@ flex-direction: column; width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` // counteract the pointer-events: none; in the .modal-dialog + color: $modal-content-color; pointer-events: auto; background-color: $modal-content-bg; background-clip: padding-box; border: $modal-content-border-width solid $modal-content-border-color; - @include border-radius($border-radius-lg); + @include border-radius($modal-content-border-radius); @include box-shadow($modal-content-box-shadow-xs); // Remove focus outline from opened modal outline: 0; @@ -77,10 +119,10 @@ .modal-backdrop { position: fixed; top: 0; - right: 0; - bottom: 0; left: 0; z-index: $zindex-modal-backdrop; + width: 100vw; + height: 100vh; background-color: $modal-backdrop-bg; // Fade for backdrop @@ -96,12 +138,12 @@ 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; - @include border-top-radius($border-radius-lg); + @include border-top-radius($modal-content-border-radius); .close { padding: $modal-header-padding; // auto on the left force icon to the right even when there is no .modal-title - margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto; + margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto; } } @@ -128,6 +170,7 @@ justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items padding: $modal-inner-padding; border-top: $modal-footer-border-width solid $modal-footer-border-color; + @include border-bottom-radius($modal-content-border-radius); // Easily place margin between footer elements > :not(:first-child) { margin-left: .25rem; } @@ -151,8 +194,20 @@ margin: $modal-dialog-margin-y-sm-up auto; } + .modal-dialog-scrollable { + max-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2}); + + .modal-content { + max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2}); + } + } + .modal-dialog-centered { - min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2)); + min-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2}); + + &::before { + height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2}); + } } .modal-content { @@ -160,9 +215,15 @@ } .modal-sm { max-width: $modal-sm; } - } @include media-breakpoint-up(lg) { - .modal-lg { max-width: $modal-lg; } + .modal-lg, + .modal-xl { + max-width: $modal-lg; + } +} + +@include media-breakpoint-up(xl) { + .modal-xl { max-width: $modal-xl; } } diff --git a/assets/scss/bootstrap/_nav.scss b/assets/scss/bootstrap/_nav.scss index fc82161..e5519b3 100755 --- a/assets/scss/bootstrap/_nav.scss +++ b/assets/scss/bootstrap/_nav.scss @@ -22,6 +22,8 @@ // Disabled state lightens text &.disabled { color: $nav-link-disabled-color; + pointer-events: none; + cursor: default; } } diff --git a/assets/scss/bootstrap/_navbar.scss b/assets/scss/bootstrap/_navbar.scss index 8d68c6c..5c6e963 100755 --- a/assets/scss/bootstrap/_navbar.scss +++ b/assets/scss/bootstrap/_navbar.scss @@ -24,7 +24,7 @@ padding: $navbar-padding-y $navbar-padding-x; // Because flex properties aren't inherited, we need to redeclare these first - // few properities so that content nested within behave properly. + // few properties so that content nested within behave properly. > .container, > .container-fluid { display: flex; @@ -44,7 +44,7 @@ padding-top: $navbar-brand-padding-y; padding-bottom: $navbar-brand-padding-y; margin-right: $navbar-padding-x; - font-size: $navbar-brand-font-size; + @include font-size($navbar-brand-font-size); line-height: inherit; white-space: nowrap; @@ -94,7 +94,7 @@ // Powered by the collapse Bootstrap JavaScript plugin. // When collapsed, prevent the toggleable navbar contents from appearing in -// the default flexbox row orienation. Requires the use of `flex-wrap: wrap` +// the default flexbox row orientation. Requires the use of `flex-wrap: wrap` // on the `.navbar` parent. .navbar-collapse { flex-basis: 100%; @@ -107,7 +107,7 @@ // Button for toggling the navbar when in its collapsed state .navbar-toggler { padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; - font-size: $navbar-toggler-font-size; + @include font-size($navbar-toggler-font-size); line-height: 1; background-color: transparent; // remove default button style border: $border-width solid transparent; // remove default button style @@ -116,11 +116,6 @@ @include hover-focus { text-decoration: none; } - - // Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements - &:not(:disabled):not(.disabled) { - cursor: pointer; - } } // Keep as a separate element so folks can easily override it with another icon @@ -162,11 +157,6 @@ position: absolute; } - .dropdown-menu-right { - right: 0; - left: auto; // Reset the default from `.dropdown-menu` - } - .nav-link { padding-right: $navbar-nav-link-padding-x; padding-left: $navbar-nav-link-padding-x; @@ -180,7 +170,7 @@ } .navbar-collapse { - display: flex !important; // stylelint-disable-line declaration-no-important + display: flex !important; // stylelint-disable-line declaration-no-important // Changes flex-bases to auto because of an IE10 bug flex-basis: auto; @@ -189,13 +179,6 @@ .navbar-toggler { display: none; } - - .dropup { - .dropdown-menu { - top: auto; - bottom: 100%; - } - } } } } @@ -209,10 +192,10 @@ // Dark links against a light background .navbar-light { .navbar-brand { - color: $navbar-light-active-color; + color: $navbar-light-brand-color; @include hover-focus { - color: $navbar-light-active-color; + color: $navbar-light-brand-hover-color; } } @@ -261,10 +244,10 @@ // White links against a dark background .navbar-dark { .navbar-brand { - color: $navbar-dark-active-color; + color: $navbar-dark-brand-color; @include hover-focus { - color: $navbar-dark-active-color; + color: $navbar-dark-brand-hover-color; } } diff --git a/assets/scss/bootstrap/_pagination.scss b/assets/scss/bootstrap/_pagination.scss index 959b2eb..b434531 100755 --- a/assets/scss/bootstrap/_pagination.scss +++ b/assets/scss/bootstrap/_pagination.scss @@ -15,6 +15,7 @@ border: $pagination-border-width solid $pagination-border-color; &:hover { + z-index: 2; color: $pagination-hover-color; text-decoration: none; background-color: $pagination-hover-bg; @@ -23,14 +24,9 @@ &:focus { z-index: 2; - outline: 0; + outline: $pagination-focus-outline; box-shadow: $pagination-focus-box-shadow; } - - // Opinionated: add "hand" cursor to non-disabled .page-link elements - &:not(:disabled):not(.disabled) { - cursor: pointer; - } } .page-item { diff --git a/assets/scss/bootstrap/_popover.scss b/assets/scss/bootstrap/_popover.scss index 3ef5f62..f205e66 100755 --- a/assets/scss/bootstrap/_popover.scss +++ b/assets/scss/bootstrap/_popover.scss @@ -8,7 +8,7 @@ // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // So reset our font and text properties to avoid inheriting weird values. @include reset-text(); - font-size: $popover-font-size; + @include font-size($popover-font-size); // Allow breaking very long words so they don't overflow the popover's bounds word-wrap: break-word; background-color: $popover-bg; @@ -38,72 +38,63 @@ .bs-popover-top { margin-bottom: $popover-arrow-height; - .arrow { + > .arrow { bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); - } - .arrow::before, - .arrow::after { - border-width: $popover-arrow-height ($popover-arrow-width / 2) 0; - } - - .arrow::before { - bottom: 0; - border-top-color: $popover-arrow-outer-color; - } + &::before { + bottom: 0; + border-width: $popover-arrow-height ($popover-arrow-width / 2) 0; + border-top-color: $popover-arrow-outer-color; + } - .arrow::after { - bottom: $popover-border-width; - border-top-color: $popover-arrow-color; + &::after { + bottom: $popover-border-width; + border-width: $popover-arrow-height ($popover-arrow-width / 2) 0; + border-top-color: $popover-arrow-color; + } } } .bs-popover-right { margin-left: $popover-arrow-height; - .arrow { + > .arrow { left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); width: $popover-arrow-height; height: $popover-arrow-width; margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners - } - - .arrow::before, - .arrow::after { - border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0; - } - .arrow::before { - left: 0; - border-right-color: $popover-arrow-outer-color; - } + &::before { + left: 0; + border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0; + border-right-color: $popover-arrow-outer-color; + } - .arrow::after { - left: $popover-border-width; - border-right-color: $popover-arrow-color; + &::after { + left: $popover-border-width; + border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0; + border-right-color: $popover-arrow-color; + } } } .bs-popover-bottom { margin-top: $popover-arrow-height; - .arrow { + > .arrow { top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); - } - - .arrow::before, - .arrow::after { - border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2); - } - .arrow::before { - top: 0; - border-bottom-color: $popover-arrow-outer-color; - } + &::before { + top: 0; + border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2); + border-bottom-color: $popover-arrow-outer-color; + } - .arrow::after { - top: $popover-border-width; - border-bottom-color: $popover-arrow-color; + &::after { + top: $popover-border-width; + border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2); + border-bottom-color: $popover-arrow-color; + } } // This will remove the popover-header's border just below the arrow @@ -113,7 +104,7 @@ left: 50%; display: block; width: $popover-arrow-width; - margin-left: ($popover-arrow-width / -2); + margin-left: -$popover-arrow-width / 2; content: ""; border-bottom: $popover-border-width solid $popover-header-bg; } @@ -122,26 +113,23 @@ .bs-popover-left { margin-right: $popover-arrow-height; - .arrow { + > .arrow { right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); width: $popover-arrow-height; height: $popover-arrow-width; margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners - } - - .arrow::before, - .arrow::after { - border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height; - } - .arrow::before { - right: 0; - border-left-color: $popover-arrow-outer-color; - } + &::before { + right: 0; + border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height; + border-left-color: $popover-arrow-outer-color; + } - .arrow::after { - right: $popover-border-width; - border-left-color: $popover-arrow-color; + &::after { + right: $popover-border-width; + border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height; + border-left-color: $popover-arrow-color; + } } } @@ -165,7 +153,7 @@ .popover-header { padding: $popover-header-padding-y $popover-header-padding-x; margin-bottom: 0; // Reset the default from Reboot - font-size: $font-size-base; + @include font-size($font-size-base); color: $popover-header-color; background-color: $popover-header-bg; border-bottom: $popover-border-width solid darken($popover-header-bg, 5%); diff --git a/assets/scss/bootstrap/_print.scss b/assets/scss/bootstrap/_print.scss index 5e2ce3a..61b60b9 100755 --- a/assets/scss/bootstrap/_print.scss +++ b/assets/scss/bootstrap/_print.scss @@ -5,7 +5,7 @@ // ========================================================================== // Print styles. // Inlined to avoid the additional HTTP request: -// http://www.phpied.com/delay-loading-your-print-css/ +// https://www.phpied.com/delay-loading-your-print-css/ // ========================================================================== @if $enable-print-styles { @@ -14,7 +14,7 @@ *::before, *::after { // Bootstrap specific; comment out `color` and `background` - //color: #000 !important; // Black prints faster: http://www.sanbeiji.com/archives/953 + //color: $black !important; // Black prints faster text-shadow: none !important; //background: transparent !important; box-shadow: none !important; @@ -51,7 +51,7 @@ } pre, blockquote { - border: $border-width solid #999; // Bootstrap custom code; using `$border-width` instead of 1px + border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px page-break-inside: avoid; } @@ -101,7 +101,7 @@ display: none; } .badge { - border: $border-width solid #000; + border: $border-width solid $black; } .table { @@ -109,16 +109,33 @@ td, th { - background-color: #fff !important; + background-color: $white !important; } } + .table-bordered { th, td { - border: 1px solid #ddd !important; + border: 1px solid $gray-300 !important; } } + .table-dark { + color: inherit; + + th, + td, + thead th, + tbody + tbody { + border-color: $table-border-color; + } + } + + .table .thead-dark th { + color: inherit; + border-color: $table-border-color; + } + // Bootstrap specific changes end } } diff --git a/assets/scss/bootstrap/_progress.scss b/assets/scss/bootstrap/_progress.scss index a581116..ab9ea0f 100755 --- a/assets/scss/bootstrap/_progress.scss +++ b/assets/scss/bootstrap/_progress.scss @@ -1,13 +1,16 @@ -@keyframes progress-bar-stripes { - from { background-position: $progress-height 0; } - to { background-position: 0 0; } +// Disable animation if transitions are disabled +@if $enable-transitions { + @keyframes progress-bar-stripes { + from { background-position: $progress-height 0; } + to { background-position: 0 0; } + } } .progress { display: flex; height: $progress-height; overflow: hidden; // force rounded corners by cropping it - font-size: $progress-font-size; + @include font-size($progress-font-size); background-color: $progress-bg; @include border-radius($progress-border-radius); @include box-shadow($progress-box-shadow); @@ -19,6 +22,7 @@ justify-content: center; color: $progress-bar-color; text-align: center; + white-space: nowrap; background-color: $progress-bar-bg; @include transition($progress-bar-transition); } @@ -28,6 +32,12 @@ background-size: $progress-height $progress-height; } -.progress-bar-animated { - animation: progress-bar-stripes $progress-bar-animation-timing; +@if $enable-transitions { + .progress-bar-animated { + animation: progress-bar-stripes $progress-bar-animation-timing; + + @media (prefers-reduced-motion: reduce) { + animation: none; + } + } } diff --git a/assets/scss/bootstrap/_reboot.scss b/assets/scss/bootstrap/_reboot.scss index c79fa47..c55d42e 100755 --- a/assets/scss/bootstrap/_reboot.scss +++ b/assets/scss/bootstrap/_reboot.scss @@ -14,9 +14,7 @@ // 2. Change the default font family in all browsers. // 3. Correct the line height in all browsers. // 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. -// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so -// we force a non-overlapping, non-auto-hiding scrollbar to counteract. -// 6. Change the default tap highlight to be completely transparent in iOS. +// 5. Change the default tap highlight to be completely transparent in iOS. *, *::before, @@ -28,36 +26,27 @@ html { font-family: sans-serif; // 2 line-height: 1.15; // 3 -webkit-text-size-adjust: 100%; // 4 - -ms-text-size-adjust: 100%; // 4 - -ms-overflow-style: scrollbar; // 5 - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6 + -webkit-tap-highlight-color: rgba($black, 0); // 5 } -// IE10+ doesn't honor `<meta name="viewport">` in some cases. -@at-root { - @-ms-viewport { - width: device-width; - } -} - -// stylelint-disable selector-list-comma-newline-after // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) -article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { +// TODO: remove in v5 +// stylelint-disable-next-line selector-list-comma-newline-after +article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } -// stylelint-enable selector-list-comma-newline-after // Body // // 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 +// 3. Set an explicit initial text-align value so that we can later use // the `inherit` value on things like `<th>` elements. body { margin: 0; // 1 font-family: $font-family-base; - font-size: $font-size-base; + @include font-size($font-size-base); font-weight: $font-weight-base; line-height: $line-height-base; color: $body-color; @@ -95,12 +84,11 @@ hr { // // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top // margin for easier control within type scales as it avoids margin collapsing. -// stylelint-disable selector-list-comma-newline-after +// stylelint-disable-next-line selector-list-comma-newline-after h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: $headings-margin-bottom; } -// stylelint-enable selector-list-comma-newline-after // Reset margins on paragraphs // @@ -113,17 +101,19 @@ p { // Abbreviations // -// 1. Remove the bottom border in Firefox 39-. +// 1. Duplicate behavior to the data-* attribute for our tooltip plugin // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. // 3. Add explicit cursor to indicate changed behavior. -// 4. Duplicate behavior to the data-* attribute for our tooltip plugin +// 4. Remove the bottom border in Firefox 39-. +// 5. Prevent the text-decoration to be skipped. abbr[title], -abbr[data-original-title] { // 4 +abbr[data-original-title] { // 1 text-decoration: underline; // 2 text-decoration: underline dotted; // 2 cursor: help; // 3 - border-bottom: 0; // 1 + border-bottom: 0; // 4 + text-decoration-skip-ink: none; // 5 } address { @@ -159,19 +149,13 @@ blockquote { margin: 0 0 1rem; } -dfn { - font-style: italic; // Add the correct font style in Android 4.3- -} - -// stylelint-disable font-weight-notation b, strong { - font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari + font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari } -// stylelint-enable font-weight-notation small { - font-size: 80%; // Add the correct font size in all browsers + @include font-size(80%); // Add the correct font size in all browsers } // @@ -182,7 +166,7 @@ small { sub, sup { position: relative; - font-size: 75%; + @include font-size(75%); line-height: 0; vertical-align: baseline; } @@ -199,7 +183,6 @@ a { color: $link-color; text-decoration: $link-decoration; background-color: transparent; // Remove the gray background on active links in IE 10. - -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+. @include hover { color: $link-hover-color; @@ -232,15 +215,13 @@ a:not([href]):not([tabindex]) { // Code // -// stylelint-disable font-family-no-duplicate-names pre, code, kbd, samp { - font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers. - font-size: 1em; // Correct the odd `em` font sizing in all browsers. + font-family: $font-family-monospace; + @include font-size(1em); // Correct the odd `em` font sizing in all browsers. } -// stylelint-enable font-family-no-duplicate-names pre { // Remove browser default top margin @@ -249,9 +230,6 @@ pre { margin-bottom: 1rem; // Don't allow content to break outside overflow: auto; - // We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so - // we force a non-overlapping, non-auto-hiding scrollbar to counteract. - -ms-overflow-style: scrollbar; } @@ -274,8 +252,11 @@ img { border-style: none; // Remove the border on images inside links in IE 10-. } -svg:not(:root) { - overflow: hidden; // Hide the overflow in IE +svg { + // Workaround for the SVG overflow bug in IE10/11 is still required. + // See https://github.com/twbs/bootstrap/issues/26878 + overflow: hidden; + vertical-align: middle; } @@ -290,7 +271,7 @@ table { caption { padding-top: $table-cell-padding; padding-bottom: $table-cell-padding; - color: $text-muted; + color: $table-caption-color; text-align: left; caption-side: bottom; } @@ -309,13 +290,14 @@ th { label { // Allow labels to use `margin` for spacing. display: inline-block; - margin-bottom: .5rem; + margin-bottom: $label-margin-bottom; } // Remove the default `border-radius` that macOS Chrome adds. // // Details at https://github.com/twbs/bootstrap/issues/24093 button { + // stylelint-disable-next-line property-blacklist border-radius: 0; } @@ -335,7 +317,7 @@ optgroup, textarea { margin: 0; // Remove the margin in Firefox and Safari font-family: inherit; - font-size: inherit; + @include font-size(inherit); line-height: inherit; } @@ -349,16 +331,36 @@ select { text-transform: none; // Remove the inheritance of text transform in Firefox } +// Remove the inheritance of word-wrap in Safari. +// +// Details at https://github.com/twbs/bootstrap/issues/24990 +select { + word-wrap: normal; +} + + // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` // controls in Android 4. // 2. Correct the inability to style clickable types in iOS and Safari. button, -html [type="button"], // 1 +[type="button"], // 1 [type="reset"], [type="submit"] { -webkit-appearance: button; // 2 } +// Opinionated: add "hand" cursor to non-disabled button elements. +@if $enable-pointer-cursor-for-buttons { + button, + [type="button"], + [type="reset"], + [type="submit"] { + &:not(:disabled) { + cursor: pointer; + } + } +} + // Remove inner border and padding from Firefox, but don't restore the outline like Normalize. button::-moz-focus-inner, [type="button"]::-moz-focus-inner, @@ -414,7 +416,7 @@ legend { max-width: 100%; // 1 padding: 0; margin-bottom: .5rem; - font-size: 1.5rem; + @include font-size(1.5rem); line-height: inherit; color: inherit; // 2 white-space: normal; // 1 @@ -440,10 +442,9 @@ progress { } // -// Remove the inner padding and cancel buttons in Chrome and Safari on macOS. +// Remove the inner padding in Chrome and Safari on macOS. // -[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } diff --git a/assets/scss/bootstrap/_spinners.scss b/assets/scss/bootstrap/_spinners.scss new file mode 100755 index 0000000..364a5c1 --- /dev/null +++ b/assets/scss/bootstrap/_spinners.scss @@ -0,0 +1,55 @@ +// +// Rotating border +// + +@keyframes spinner-border { + to { transform: rotate(360deg); } +} + +.spinner-border { + display: inline-block; + width: $spinner-width; + height: $spinner-height; + vertical-align: text-bottom; + border: $spinner-border-width solid currentColor; + border-right-color: transparent; + // stylelint-disable-next-line property-blacklist + border-radius: 50%; + animation: spinner-border .75s linear infinite; +} + +.spinner-border-sm { + width: $spinner-width-sm; + height: $spinner-height-sm; + border-width: $spinner-border-width-sm; +} + +// +// Growing circle +// + +@keyframes spinner-grow { + 0% { + transform: scale(0); + } + 50% { + opacity: 1; + } +} + +.spinner-grow { + display: inline-block; + width: $spinner-width; + height: $spinner-height; + vertical-align: text-bottom; + background-color: currentColor; + // stylelint-disable-next-line property-blacklist + border-radius: 50%; + opacity: 0; + animation: spinner-grow .75s linear infinite; +} + +.spinner-grow-sm { + width: $spinner-width-sm; + height: $spinner-height-sm; +} diff --git a/assets/scss/bootstrap/_tables.scss b/assets/scss/bootstrap/_tables.scss index 0e3b119..b7ab3d5 100755 --- a/assets/scss/bootstrap/_tables.scss +++ b/assets/scss/bootstrap/_tables.scss @@ -4,8 +4,8 @@ .table { width: 100%; - max-width: 100%; margin-bottom: $spacer; + color: $table-color; background-color: $table-bg; // Reset for nesting within parents with `background-color`. th, @@ -23,10 +23,6 @@ tbody + tbody { border-top: (2 * $table-border-width) solid $table-border-color; } - - .table { - background-color: $body-bg; - } } @@ -42,9 +38,9 @@ } -// Bordered version +// Border versions // -// Add borders all around the table and between all the columns. +// Add or remove borders all around the table and between all the columns. .table-bordered { border: $table-border-width solid $table-border-color; @@ -57,18 +53,26 @@ thead { th, td { - border-bottom-width: (2 * $table-border-width); + border-bottom-width: 2 * $table-border-width; } } } +.table-borderless { + th, + td, + thead th, + tbody + tbody { + border: 0; + } +} // Zebra-striping // // Default zebra-stripe styles (alternating gray and transparent backgrounds) .table-striped { - tbody tr:nth-of-type(odd) { + tbody tr:nth-of-type(#{$table-striped-order}) { background-color: $table-accent-bg; } } @@ -81,6 +85,7 @@ .table-hover { tbody tr { @include hover { + color: $table-hover-color; background-color: $table-hover-bg; } } @@ -93,7 +98,7 @@ // inheritance to nested tables. @each $color, $value in $theme-colors { - @include table-row-variant($color, theme-color-level($color, -9)); + @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level)); } @include table-row-variant(active, $table-active-bg); @@ -145,6 +150,7 @@ &.table-hover { tbody tr { @include hover { + color: $table-dark-hover-color; background-color: $table-dark-hover-bg; } } @@ -168,7 +174,6 @@ 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 { diff --git a/assets/scss/bootstrap/_toasts.scss b/assets/scss/bootstrap/_toasts.scss new file mode 100755 index 0000000..6aa5352 --- /dev/null +++ b/assets/scss/bootstrap/_toasts.scss @@ -0,0 +1,44 @@ +.toast { + max-width: $toast-max-width; + overflow: hidden; // cheap rounded corners on nested items + @include font-size($toast-font-size); + color: $toast-color; + background-color: $toast-background-color; + background-clip: padding-box; + border: $toast-border-width solid $toast-border-color; + box-shadow: $toast-box-shadow; + backdrop-filter: blur(10px); + opacity: 0; + @include border-radius($toast-border-radius); + + &:not(:last-child) { + margin-bottom: $toast-padding-x; + } + + &.showing { + opacity: 1; + } + + &.show { + display: block; + opacity: 1; + } + + &.hide { + display: none; + } +} + +.toast-header { + display: flex; + align-items: center; + padding: $toast-padding-y $toast-padding-x; + color: $toast-header-color; + background-color: $toast-header-background-color; + background-clip: padding-box; + border-bottom: $toast-border-width solid $toast-header-border-color; +} + +.toast-body { + padding: $toast-padding-x; // apply to both vertical and horizontal +} diff --git a/assets/scss/bootstrap/_tooltip.scss b/assets/scss/bootstrap/_tooltip.scss index 1286ebf..6b3aa62 100755 --- a/assets/scss/bootstrap/_tooltip.scss +++ b/assets/scss/bootstrap/_tooltip.scss @@ -7,7 +7,7 @@ // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // So reset our font and text properties to avoid inheriting weird values. @include reset-text(); - font-size: $tooltip-font-size; + @include font-size($tooltip-font-size); // Allow breaking very long words so they don't overflow the tooltip's bounds word-wrap: break-word; opacity: 0; diff --git a/assets/scss/bootstrap/_transitions.scss b/assets/scss/bootstrap/_transitions.scss index df5744b..40be4d9 100755 --- a/assets/scss/bootstrap/_transitions.scss +++ b/assets/scss/bootstrap/_transitions.scss @@ -1,30 +1,14 @@ -// stylelint-disable selector-no-qualifying-type - .fade { - opacity: 0; @include transition($transition-fade); - &.show { - opacity: 1; + &:not(.show) { + opacity: 0; } } .collapse { - display: none; - &.show { - display: block; - } -} - -tr { - &.collapse.show { - display: table-row; - } -} - -tbody { - &.collapse.show { - display: table-row-group; + &:not(.show) { + display: none; } } diff --git a/assets/scss/bootstrap/_type.scss b/assets/scss/bootstrap/_type.scss index 57d610f..f8ed090 100755 --- a/assets/scss/bootstrap/_type.scss +++ b/assets/scss/bootstrap/_type.scss @@ -13,36 +13,36 @@ h1, h2, h3, h4, h5, h6, color: $headings-color; } -h1, .h1 { font-size: $h1-font-size; } -h2, .h2 { font-size: $h2-font-size; } -h3, .h3 { font-size: $h3-font-size; } -h4, .h4 { font-size: $h4-font-size; } -h5, .h5 { font-size: $h5-font-size; } -h6, .h6 { font-size: $h6-font-size; } +h1, .h1 { @include font-size($h1-font-size); } +h2, .h2 { @include font-size($h2-font-size); } +h3, .h3 { @include font-size($h3-font-size); } +h4, .h4 { @include font-size($h4-font-size); } +h5, .h5 { @include font-size($h5-font-size); } +h6, .h6 { @include font-size($h6-font-size); } .lead { - font-size: $lead-font-size; + @include font-size($lead-font-size); font-weight: $lead-font-weight; } // Type display classes .display-1 { - font-size: $display1-size; + @include font-size($display1-size); font-weight: $display1-weight; line-height: $display-line-height; } .display-2 { - font-size: $display2-size; + @include font-size($display2-size); font-weight: $display2-weight; line-height: $display-line-height; } .display-3 { - font-size: $display3-size; + @include font-size($display3-size); font-weight: $display3-weight; line-height: $display-line-height; } .display-4 { - font-size: $display4-size; + @include font-size($display4-size); font-weight: $display4-weight; line-height: $display-line-height; } @@ -66,7 +66,7 @@ hr { small, .small { - font-size: $small-font-size; + @include font-size($small-font-size); font-weight: $font-weight-normal; } @@ -104,22 +104,22 @@ mark, // Builds on `abbr` .initialism { - font-size: 90%; + @include font-size(90%); text-transform: uppercase; } // Blockquotes .blockquote { margin-bottom: $spacer; - font-size: $blockquote-font-size; + @include font-size($blockquote-font-size); } .blockquote-footer { display: block; - font-size: 80%; // back to default font-size + @include font-size($blockquote-small-font-size); color: $blockquote-small-color; &::before { - content: "\2014 \00A0"; // em dash, nbsp + content: "\2014\00A0"; // em dash, nbsp } } diff --git a/assets/scss/bootstrap/_utilities.scss b/assets/scss/bootstrap/_utilities.scss index 7b2a1eb..a5de31b 100755 --- a/assets/scss/bootstrap/_utilities.scss +++ b/assets/scss/bootstrap/_utilities.scss @@ -6,9 +6,12 @@ @import "utilities/embed"; @import "utilities/flex"; @import "utilities/float"; +@import "utilities/overflow"; @import "utilities/position"; @import "utilities/screenreaders"; +@import "utilities/shadows"; @import "utilities/sizing"; +@import "utilities/stretched-link"; @import "utilities/spacing"; @import "utilities/text"; @import "utilities/visibility"; diff --git a/assets/scss/bootstrap/_variables.scss b/assets/scss/bootstrap/_variables.scss index be580de..d9e88df 100755 --- a/assets/scss/bootstrap/_variables.scss +++ b/assets/scss/bootstrap/_variables.scss @@ -3,12 +3,8 @@ // Variables should follow the `$component-state-property-size` formula for // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. - -// // Color system -// -// stylelint-disable $white: #fff !default; $gray-100: #f8f9fa !default; $gray-200: #e9ecef !default; @@ -22,17 +18,21 @@ $gray-900: #212529 !default; $black: #000 !default; $grays: () !default; -$grays: map-merge(( - "100": $gray-100, - "200": $gray-200, - "300": $gray-300, - "400": $gray-400, - "500": $gray-500, - "600": $gray-600, - "700": $gray-700, - "800": $gray-800, - "900": $gray-900 -), $grays); +// stylelint-disable-next-line scss/dollar-variable-default +$grays: map-merge( + ( + "100": $gray-100, + "200": $gray-200, + "300": $gray-300, + "400": $gray-400, + "500": $gray-500, + "600": $gray-600, + "700": $gray-700, + "800": $gray-800, + "900": $gray-900 + ), + $grays +); $blue: #007bff !default; $indigo: #6610f2 !default; @@ -46,21 +46,25 @@ $teal: #20c997 !default; $cyan: #17a2b8 !default; $colors: () !default; -$colors: map-merge(( - "blue": $blue, - "indigo": $indigo, - "purple": $purple, - "pink": $pink, - "red": $red, - "orange": $orange, - "yellow": $yellow, - "green": $green, - "teal": $teal, - "cyan": $cyan, - "white": $white, - "gray": $gray-600, - "gray-dark": $gray-800 -), $colors); +// stylelint-disable-next-line scss/dollar-variable-default +$colors: map-merge( + ( + "blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan, + "white": $white, + "gray": $gray-600, + "gray-dark": $gray-800 + ), + $colors +); $primary: $blue !default; $secondary: $gray-600 !default; @@ -72,40 +76,49 @@ $light: $gray-100 !default; $dark: $gray-800 !default; $theme-colors: () !default; -$theme-colors: map-merge(( - "primary": $primary, - "secondary": $secondary, - "success": $success, - "info": $info, - "warning": $warning, - "danger": $danger, - "light": $light, - "dark": $dark -), $theme-colors); -// stylelint-enable +// stylelint-disable-next-line scss/dollar-variable-default +$theme-colors: map-merge( + ( + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark + ), + $theme-colors +); // Set a specific jump point for requesting color jumps $theme-color-interval: 8% !default; // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. -$yiq-contrasted-threshold: 150 !default; +$yiq-contrasted-threshold: 150 !default; // Customize the light and dark text colors for use in our YIQ color contrast function. -$yiq-text-dark: $gray-900 !default; -$yiq-text-light: $white !default; +$yiq-text-dark: $gray-900 !default; +$yiq-text-light: $white !default; + // Options // // Quickly modify global styling by enabling or disabling optional features. -$enable-caret: true !default; -$enable-rounded: true !default; -$enable-shadows: false !default; -$enable-gradients: false !default; -$enable-transitions: true !default; -$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS -$enable-grid-classes: true !default; -$enable-print-styles: true !default; +$enable-caret: true !default; +$enable-rounded: true !default; +$enable-shadows: false !default; +$enable-gradients: false !default; +$enable-transitions: true !default; +$enable-prefers-reduced-motion-media-query: true !default; +$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS +$enable-grid-classes: true !default; +$enable-pointer-cursor-for-buttons: true !default; +$enable-print-styles: true !default; +$enable-responsive-font-sizes: false !default; +$enable-validation-icons: true !default; +$enable-deprecation-messages: true !default; // Spacing @@ -114,27 +127,35 @@ $enable-print-styles: true !default; // variables. Mostly focused on spacing. // You can add more entries to the $spacers map, should you need more variation. -// stylelint-disable $spacer: 1rem !default; $spacers: () !default; -$spacers: map-merge(( - 0: 0, - 1: ($spacer * .25), - 2: ($spacer * .5), - 3: $spacer, - 4: ($spacer * 1.5), - 5: ($spacer * 3) -), $spacers); +// stylelint-disable-next-line scss/dollar-variable-default +$spacers: map-merge( + ( + 0: 0, + 1: ($spacer * .25), + 2: ($spacer * .5), + 3: $spacer, + 4: ($spacer * 1.5), + 5: ($spacer * 3) + ), + $spacers +); // This variable affects the `.h-*` and `.w-*` classes. $sizes: () !default; -$sizes: map-merge(( - 25: 25%, - 50: 50%, - 75: 75%, - 100: 100% -), $sizes); -// stylelint-enable +// stylelint-disable-next-line scss/dollar-variable-default +$sizes: map-merge( + ( + 25: 25%, + 50: 50%, + 75: 75%, + 100: 100%, + auto: auto + ), + $sizes +); + // Body // @@ -143,14 +164,17 @@ $sizes: map-merge(( $body-bg: $white !default; $body-color: $gray-900 !default; + // Links // // Style anchor elements. -$link-color: theme-color("primary") !default; -$link-decoration: none !default; -$link-hover-color: darken($link-color, 15%) !default; -$link-hover-decoration: underline !default; +$link-color: theme-color("primary") !default; +$link-decoration: none !default; +$link-hover-color: darken($link-color, 15%) !default; +$link-hover-decoration: underline !default; +// Darken percentage for links with `.text-*` class (e.g. `.text-success`) +$emphasized-link-hover-darken-percentage: 15% !default; // Paragraphs // @@ -173,7 +197,7 @@ $grid-breakpoints: ( ) !default; @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); -@include _assert-starts-at-zero($grid-breakpoints); +@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints"); // Grid containers @@ -197,6 +221,7 @@ $container-max-widths: ( $grid-columns: 12 !default; $grid-gutter-width: 30px !default; + // Components // // Define common padding and border radius sizes and more. @@ -211,33 +236,54 @@ $border-radius: .25rem !default; $border-radius-lg: .3rem !default; $border-radius-sm: .2rem !default; +$rounded-pill: 50rem !default; + +$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default; +$box-shadow: 0 .5rem 1rem rgba($black, .15) !default; +$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; + $component-active-color: $white !default; $component-active-bg: theme-color("primary") !default; $caret-width: .3em !default; +$caret-vertical-align: $caret-width * .85 !default; +$caret-spacing: $caret-width * .85 !default; $transition-base: all .2s ease-in-out !default; $transition-fade: opacity .15s linear !default; $transition-collapse: height .35s ease !default; - -// Fonts +$embed-responsive-aspect-ratios: () !default; +// stylelint-disable-next-line scss/dollar-variable-default +$embed-responsive-aspect-ratios: join( + ( + (21 9), + (16 9), + (4 3), + (1 1), + ), + $embed-responsive-aspect-ratios +); + +// Typography // // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case -$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-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; // stylelint-enable value-keyword-case $font-size-base: 1rem !default; // Assumes the browser default, typically `16px` -$font-size-lg: ($font-size-base * 1.25) !default; -$font-size-sm: ($font-size-base * .875) !default; +$font-size-lg: $font-size-base * 1.25 !default; +$font-size-sm: $font-size-base * .875 !default; +$font-weight-lighter: lighter !default; $font-weight-light: 300 !default; $font-weight-normal: 400 !default; $font-weight-bold: 700 !default; +$font-weight-bolder: bolder !default; $font-weight-base: $font-weight-normal !default; $line-height-base: 1.5 !default; @@ -249,11 +295,11 @@ $h4-font-size: $font-size-base * 1.5 !default; $h5-font-size: $font-size-base * 1.25 !default; $h6-font-size: $font-size-base !default; -$headings-margin-bottom: ($spacer / 2) !default; -$headings-font-family: inherit !default; +$headings-margin-bottom: $spacer / 2 !default; +$headings-font-family: null !default; $headings-font-weight: 500 !default; $headings-line-height: 1.2 !default; -$headings-color: inherit !default; +$headings-color: null !default; $display1-size: 6rem !default; $display2-size: 5.5rem !default; @@ -266,7 +312,7 @@ $display3-weight: 300 !default; $display4-weight: 300 !default; $display-line-height: $headings-line-height !default; -$lead-font-size: ($font-size-base * 1.25) !default; +$lead-font-size: $font-size-base * 1.25 !default; $lead-font-weight: 300 !default; $small-font-size: 80% !default; @@ -274,7 +320,8 @@ $small-font-size: 80% !default; $text-muted: $gray-600 !default; $blockquote-small-color: $gray-600 !default; -$blockquote-font-size: ($font-size-base * 1.25) !default; +$blockquote-small-font-size: $small-font-size !default; +$blockquote-font-size: $font-size-base * 1.25 !default; $hr-border-color: rgba($black, .1) !default; $hr-border-width: $border-width !default; @@ -300,22 +347,33 @@ $hr-margin-y: $spacer !default; $table-cell-padding: .75rem !default; $table-cell-padding-sm: .3rem !default; -$table-bg: transparent !default; +$table-color: $body-color !default; +$table-bg: null !default; $table-accent-bg: rgba($black, .05) !default; +$table-hover-color: $table-color !default; $table-hover-bg: rgba($black, .075) !default; $table-active-bg: $table-hover-bg !default; $table-border-width: $border-width !default; -$table-border-color: $gray-300 !default; +$table-border-color: $border-color !default; $table-head-bg: $gray-200 !default; $table-head-color: $gray-700 !default; -$table-dark-bg: $gray-900 !default; +$table-dark-color: $white !default; +$table-dark-bg: $gray-800 !default; $table-dark-accent-bg: rgba($white, .05) !default; +$table-dark-hover-color: $table-dark-color !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; +$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default; +$table-dark-color: $white !default; + +$table-striped-order: odd !default; + +$table-caption-color: $text-muted !default; + +$table-bg-level: -9 !default; +$table-border-level: -6 !default; // Buttons + Forms @@ -324,6 +382,8 @@ $table-dark-color: $body-bg !default; $input-btn-padding-y: .375rem !default; $input-btn-padding-x: .75rem !default; +$input-btn-font-family: null !default; +$input-btn-font-size: $font-size-base !default; $input-btn-line-height: $line-height-base !default; $input-btn-focus-width: .2rem !default; @@ -332,10 +392,12 @@ $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-colo $input-btn-padding-y-sm: .25rem !default; $input-btn-padding-x-sm: .5rem !default; +$input-btn-font-size-sm: $font-size-sm !default; $input-btn-line-height-sm: $line-height-sm !default; $input-btn-padding-y-lg: .5rem !default; $input-btn-padding-x-lg: 1rem !default; +$input-btn-font-size-lg: $font-size-lg !default; $input-btn-line-height-lg: $line-height-lg !default; $input-btn-border-width: $border-width !default; @@ -347,14 +409,18 @@ $input-btn-border-width: $border-width !default; $btn-padding-y: $input-btn-padding-y !default; $btn-padding-x: $input-btn-padding-x !default; +$btn-font-family: $input-btn-font-family !default; +$btn-font-size: $input-btn-font-size !default; $btn-line-height: $input-btn-line-height !default; $btn-padding-y-sm: $input-btn-padding-y-sm !default; $btn-padding-x-sm: $input-btn-padding-x-sm !default; +$btn-font-size-sm: $input-btn-font-size-sm !default; $btn-line-height-sm: $input-btn-line-height-sm !default; $btn-padding-y-lg: $input-btn-padding-y-lg !default; $btn-padding-x-lg: $input-btn-padding-x-lg !default; +$btn-font-size-lg: $input-btn-font-size-lg !default; $btn-line-height-lg: $input-btn-line-height-lg !default; $btn-border-width: $input-btn-border-width !default; @@ -380,16 +446,23 @@ $btn-transition: color .15s ease-in-out, background-color .15s ease // Forms +$label-margin-bottom: .5rem !default; + $input-padding-y: $input-btn-padding-y !default; $input-padding-x: $input-btn-padding-x !default; +$input-font-family: $input-btn-font-family !default; +$input-font-size: $input-btn-font-size !default; +$input-font-weight: $font-weight-base !default; $input-line-height: $input-btn-line-height !default; $input-padding-y-sm: $input-btn-padding-y-sm !default; $input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-font-size-sm: $input-btn-font-size-sm !default; $input-line-height-sm: $input-btn-line-height-sm !default; $input-padding-y-lg: $input-btn-padding-y-lg !default; $input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-font-size-lg: $input-btn-font-size-lg !default; $input-line-height-lg: $input-btn-line-height-lg !default; $input-bg: $white !default; @@ -411,17 +484,17 @@ $input-focus-width: $input-btn-focus-width !default; $input-focus-box-shadow: $input-btn-focus-box-shadow !default; $input-placeholder-color: $gray-600 !default; +$input-plaintext-color: $body-color !default; $input-height-border: $input-border-width * 2 !default; -$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; -$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; +$input-height-inner: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default; +$input-height-inner-half: calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default; +$input-height-inner-quarter: calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default; -$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-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-height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}) !default; +$input-height-sm: calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default; +$input-height-lg: calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default; $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; @@ -434,80 +507,131 @@ $form-check-input-margin-x: .25rem !default; $form-check-inline-margin-x: .75rem !default; $form-check-inline-input-margin-x: .3125rem !default; +$form-grid-gutter-width: 10px !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; -$custom-control-gutter: 1.5rem !default; +$custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; + +$custom-control-gutter: .5rem !default; $custom-control-spacer-x: 1rem !default; $custom-control-indicator-size: 1rem !default; -$custom-control-indicator-bg: $gray-300 !default; +$custom-control-indicator-bg: $input-bg !default; + $custom-control-indicator-bg-size: 50% 50% !default; -$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; +$custom-control-indicator-box-shadow: $input-box-shadow !default; +$custom-control-indicator-border-color: $gray-500 !default; +$custom-control-indicator-border-width: $input-border-width !default; -$custom-control-indicator-disabled-bg: $gray-200 !default; -$custom-control-label-disabled-color: $gray-600 !default; +$custom-control-indicator-disabled-bg: $input-disabled-bg !default; +$custom-control-label-disabled-color: $gray-600 !default; $custom-control-indicator-checked-color: $component-active-color !default; $custom-control-indicator-checked-bg: $component-active-bg !default; $custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default; $custom-control-indicator-checked-box-shadow: none !default; +$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default; -$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; +$custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default; +$custom-control-indicator-focus-border-color: $input-focus-border-color !default; $custom-control-indicator-active-color: $component-active-color !default; $custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default; $custom-control-indicator-active-box-shadow: none !default; +$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default; $custom-checkbox-indicator-border-radius: $border-radius !default; -$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; +$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; -$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; -$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-box-shadow: none !default; +$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; +$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; +$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3e%3c/svg%3e"), "#", "%23") !default; +$custom-checkbox-indicator-indeterminate-box-shadow: none !default; +$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default; $custom-radio-indicator-border-radius: 50% !default; -$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default; +$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"), "#", "%23") !default; + +$custom-switch-width: $custom-control-indicator-size * 1.75 !default; +$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default; +$custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default; -$custom-select-padding-y: .375rem !default; -$custom-select-padding-x: .75rem !default; +$custom-select-padding-y: $input-padding-y !default; +$custom-select-padding-x: $input-padding-x !default; +$custom-select-font-family: $input-font-family !default; +$custom-select-font-size: $input-font-size !default; $custom-select-height: $input-height !default; $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator -$custom-select-line-height: $input-btn-line-height !default; +$custom-select-font-weight: $input-font-weight !default; +$custom-select-line-height: $input-line-height !default; $custom-select-color: $input-color !default; $custom-select-disabled-color: $gray-600 !default; -$custom-select-bg: $white !default; +$custom-select-bg: $input-bg !default; $custom-select-disabled-bg: $gray-200 !default; $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions $custom-select-indicator-color: $gray-800 !default; -$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-select-border-width: $input-btn-border-width !default; +$custom-select-indicator: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23") !default; +$custom-select-background: $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon) + +$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default; +$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default; +$custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default; + +$custom-select-border-width: $input-border-width !default; $custom-select-border-color: $input-border-color !default; $custom-select-border-radius: $border-radius !default; +$custom-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default; $custom-select-focus-border-color: $input-focus-border-color !default; -$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; +$custom-select-focus-width: $input-focus-width !default; +$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width $input-btn-focus-color !default; -$custom-select-font-size-sm: 75% !default; +$custom-select-padding-y-sm: $input-padding-y-sm !default; +$custom-select-padding-x-sm: $input-padding-x-sm !default; +$custom-select-font-size-sm: $input-font-size-sm !default; $custom-select-height-sm: $input-height-sm !default; -$custom-select-font-size-lg: 125% !default; +$custom-select-padding-y-lg: $input-padding-y-lg !default; +$custom-select-padding-x-lg: $input-padding-x-lg !default; +$custom-select-font-size-lg: $input-font-size-lg !default; $custom-select-height-lg: $input-height-lg !default; +$custom-range-track-width: 100% !default; +$custom-range-track-height: .5rem !default; +$custom-range-track-cursor: pointer !default; +$custom-range-track-bg: $gray-300 !default; +$custom-range-track-border-radius: 1rem !default; +$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; + +$custom-range-thumb-width: 1rem !default; +$custom-range-thumb-height: $custom-range-thumb-width !default; +$custom-range-thumb-bg: $component-active-bg !default; +$custom-range-thumb-border: 0 !default; +$custom-range-thumb-border-radius: 1rem !default; +$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; +$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default; +$custom-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in IE/Edge +$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; +$custom-range-thumb-disabled-bg: $gray-500 !default; + $custom-file-height: $input-height !default; +$custom-file-height-inner: $input-height-inner !default; $custom-file-focus-border-color: $input-focus-border-color !default; -$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !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-focus-box-shadow: $input-focus-box-shadow !default; +$custom-file-disabled-bg: $input-disabled-bg !default; + +$custom-file-padding-y: $input-padding-y !default; +$custom-file-padding-x: $input-padding-x !default; +$custom-file-line-height: $input-line-height !default; +$custom-file-font-family: $input-font-family !default; +$custom-file-font-weight: $input-font-weight !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-width: $input-border-width !default; $custom-file-border-color: $input-border-color !default; $custom-file-border-radius: $input-border-radius !default; $custom-file-box-shadow: $input-box-shadow !default; @@ -519,40 +643,32 @@ $custom-file-text: ( // Form validation + $form-feedback-margin-top: $form-text-margin-top !default; $form-feedback-font-size: $small-font-size !default; $form-feedback-valid-color: theme-color("success") !default; $form-feedback-invalid-color: theme-color("danger") !default; - -// Dropdowns -// -// Dropdown menu container and contents. - -$dropdown-min-width: 10rem !default; -$dropdown-padding-y: .5rem !default; -$dropdown-spacer: .125rem !default; -$dropdown-bg: $white !default; -$dropdown-border-color: rgba($black, .15) !default; -$dropdown-border-radius: $border-radius !default; -$dropdown-border-width: $border-width !default; -$dropdown-divider-bg: $gray-200 !default; -$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; - -$dropdown-link-color: $gray-900 !default; -$dropdown-link-hover-color: darken($gray-900, 5%) !default; -$dropdown-link-hover-bg: $gray-100 !default; - -$dropdown-link-active-color: $component-active-color !default; -$dropdown-link-active-bg: $component-active-bg !default; - -$dropdown-link-disabled-color: $gray-600 !default; - -$dropdown-item-padding-y: .25rem !default; -$dropdown-item-padding-x: 1.5rem !default; - -$dropdown-header-color: $gray-600 !default; - +$form-feedback-icon-valid-color: $form-feedback-valid-color !default; +$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default; +$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; +$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default; + +$form-validation-states: () !default; +// stylelint-disable-next-line scss/dollar-variable-default +$form-validation-states: map-merge( + ( + "valid": ( + "color": $form-feedback-valid-color, + "icon": $form-feedback-icon-valid + ), + "invalid": ( + "color": $form-feedback-invalid-color, + "icon": $form-feedback-icon-invalid + ), + ), + $form-validation-states +); // Z-index master list // @@ -567,6 +683,7 @@ $zindex-modal: 1050 !default; $zindex-popover: 1060 !default; $zindex-tooltip: 1070 !default; + // Navs $nav-link-padding-y: .5rem !default; @@ -585,16 +702,20 @@ $nav-pills-border-radius: $border-radius !default; $nav-pills-link-active-color: $component-active-color !default; $nav-pills-link-active-bg: $component-active-bg !default; +$nav-divider-color: $gray-200 !default; +$nav-divider-margin-y: $spacer / 2 !default; + + // Navbar -$navbar-padding-y: ($spacer / 2) !default; +$navbar-padding-y: $spacer / 2 !default; $navbar-padding-x: $spacer !default; $navbar-nav-link-padding-x: .5rem !default; $navbar-brand-font-size: $font-size-lg !default; // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link -$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default; +$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default; $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; @@ -607,16 +728,55 @@ $navbar-dark-color: rgba($white, .5) !default; $navbar-dark-hover-color: rgba($white, .75) !default; $navbar-dark-active-color: $white !default; $navbar-dark-disabled-color: rgba($white, .25) !default; -$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default; $navbar-dark-toggler-border-color: rgba($white, .1) !default; $navbar-light-color: rgba($black, .5) !default; $navbar-light-hover-color: rgba($black, .7) !default; $navbar-light-active-color: rgba($black, .9) !default; $navbar-light-disabled-color: rgba($black, .3) !default; -$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default; $navbar-light-toggler-border-color: rgba($black, .1) !default; +$navbar-light-brand-color: $navbar-light-active-color !default; +$navbar-light-brand-hover-color: $navbar-light-active-color !default; +$navbar-dark-brand-color: $navbar-dark-active-color !default; +$navbar-dark-brand-hover-color: $navbar-dark-active-color !default; + + +// Dropdowns +// +// Dropdown menu container and contents. + +$dropdown-min-width: 10rem !default; +$dropdown-padding-y: .5rem !default; +$dropdown-spacer: .125rem !default; +$dropdown-font-size: $font-size-base !default; +$dropdown-color: $body-color !default; +$dropdown-bg: $white !default; +$dropdown-border-color: rgba($black, .15) !default; +$dropdown-border-radius: $border-radius !default; +$dropdown-border-width: $border-width !default; +$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; +$dropdown-divider-bg: $gray-200 !default; +$dropdown-divider-margin-y: $nav-divider-margin-y !default; +$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; + +$dropdown-link-color: $gray-900 !default; +$dropdown-link-hover-color: darken($gray-900, 5%) !default; +$dropdown-link-hover-bg: $gray-100 !default; + +$dropdown-link-active-color: $component-active-color !default; +$dropdown-link-active-bg: $component-active-bg !default; + +$dropdown-link-disabled-color: $gray-600 !default; + +$dropdown-item-padding-y: .25rem !default; +$dropdown-item-padding-x: 1.5rem !default; + +$dropdown-header-color: $gray-600 !default; + + // Pagination $pagination-padding-y: .5rem !default; @@ -633,6 +793,7 @@ $pagination-border-width: $border-width !default; $pagination-border-color: $gray-300 !default; $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; +$pagination-focus-outline: 0 !default; $pagination-hover-color: $link-hover-color !default; $pagination-hover-bg: $gray-200 !default; @@ -650,6 +811,7 @@ $pagination-disabled-border-color: $gray-300 !default; // Jumbotron $jumbotron-padding: 2rem !default; +$jumbotron-color: null !default; $jumbotron-bg: $gray-200 !default; @@ -662,11 +824,13 @@ $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; $card-cap-bg: rgba($black, .03) !default; +$card-cap-color: null !default; +$card-color: null !default; $card-bg: $white !default; $card-img-overlay-padding: 1.25rem !default; -$card-group-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; @@ -676,19 +840,27 @@ $card-columns-margin: $card-spacer-y !default; // Tooltips -$tooltip-font-size: $font-size-sm !default; -$tooltip-max-width: 200px !default; -$tooltip-color: $white !default; -$tooltip-bg: $black !default; -$tooltip-border-radius: $border-radius !default; -$tooltip-opacity: .9 !default; -$tooltip-padding-y: .25rem !default; -$tooltip-padding-x: .5rem !default; -$tooltip-margin: 0 !default; - -$tooltip-arrow-width: .8rem !default; -$tooltip-arrow-height: .4rem !default; -$tooltip-arrow-color: $tooltip-bg !default; +$tooltip-font-size: $font-size-sm !default; +$tooltip-max-width: 200px !default; +$tooltip-color: $white !default; +$tooltip-bg: $black !default; +$tooltip-border-radius: $border-radius !default; +$tooltip-opacity: .9 !default; +$tooltip-padding-y: .25rem !default; +$tooltip-padding-x: .5rem !default; +$tooltip-margin: 0 !default; + +$tooltip-arrow-width: .8rem !default; +$tooltip-arrow-height: .4rem !default; +$tooltip-arrow-color: $tooltip-bg !default; + +// Form tooltips must come after regular tooltips +$form-feedback-tooltip-padding-y: $tooltip-padding-y !default; +$form-feedback-tooltip-padding-x: $tooltip-padding-x !default; +$form-feedback-tooltip-font-size: $tooltip-font-size !default; +$form-feedback-tooltip-line-height: $line-height-base !default; +$form-feedback-tooltip-opacity: $tooltip-opacity !default; +$form-feedback-tooltip-border-radius: $tooltip-border-radius !default; // Popovers @@ -717,6 +889,24 @@ $popover-arrow-color: $popover-bg !default; $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; +// Toasts + +$toast-max-width: 350px !default; +$toast-padding-x: .75rem !default; +$toast-padding-y: .25rem !default; +$toast-font-size: .875rem !default; +$toast-color: null !default; +$toast-background-color: rgba($white, .85) !default; +$toast-border-width: 1px !default; +$toast-border-color: rgba(0, 0, 0, .1) !default; +$toast-border-radius: .25rem !default; +$toast-box-shadow: 0 .25rem .75rem rgba($black, .1) !default; + +$toast-header-color: $gray-600 !default; +$toast-header-background-color: rgba($white, .85) !default; +$toast-header-border-color: rgba(0, 0, 0, .05) !default; + + // Badges $badge-font-size: 75% !default; @@ -725,6 +915,9 @@ $badge-padding-y: .25em !default; $badge-padding-x: .4em !default; $badge-border-radius: $border-radius !default; +$badge-transition: $btn-transition !default; +$badge-focus-width: $input-btn-focus-width !default; + $badge-pill-padding-x: .6em !default; // Use a higher than normal value to ensure completely rounded edges when // customizing padding or font-size on labels. @@ -734,31 +927,38 @@ $badge-pill-border-radius: 10rem !default; // Modals // Padding applied to the modal body -$modal-inner-padding: 1rem !default; +$modal-inner-padding: 1rem !default; -$modal-dialog-margin: .5rem !default; -$modal-dialog-margin-y-sm-up: 1.75rem !default; +$modal-dialog-margin: .5rem !default; +$modal-dialog-margin-y-sm-up: 1.75rem !default; $modal-title-line-height: $line-height-base !default; -$modal-content-bg: $white !default; -$modal-content-border-color: rgba($black, .2) !default; -$modal-content-border-width: $border-width !default; -$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; -$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; - -$modal-backdrop-bg: $black !default; -$modal-backdrop-opacity: .5 !default; -$modal-header-border-color: $gray-200 !default; -$modal-footer-border-color: $modal-header-border-color !default; -$modal-header-border-width: $modal-content-border-width !default; -$modal-footer-border-width: $modal-header-border-width !default; -$modal-header-padding: 1rem !default; - +$modal-content-color: null !default; +$modal-content-bg: $white !default; +$modal-content-border-color: rgba($black, .2) !default; +$modal-content-border-width: $border-width !default; +$modal-content-border-radius: $border-radius-lg !default; +$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; +$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; + +$modal-backdrop-bg: $black !default; +$modal-backdrop-opacity: .5 !default; +$modal-header-border-color: $border-color !default; +$modal-footer-border-color: $modal-header-border-color !default; +$modal-header-border-width: $modal-content-border-width !default; +$modal-footer-border-width: $modal-header-border-width !default; +$modal-header-padding-y: 1rem !default; +$modal-header-padding-x: 1rem !default; +$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility + +$modal-xl: 1140px !default; $modal-lg: 800px !default; $modal-md: 500px !default; $modal-sm: 300px !default; +$modal-fade-transform: translate(0, -50px) !default; +$modal-show-transform: none !default; $modal-transition: transform .3s ease-out !default; @@ -781,7 +981,7 @@ $alert-color-level: 6 !default; // Progress bars $progress-height: 1rem !default; -$progress-font-size: ($font-size-base * .75) !default; +$progress-font-size: $font-size-base * .75 !default; $progress-bg: $gray-200 !default; $progress-border-radius: $border-radius !default; $progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default; @@ -790,8 +990,10 @@ $progress-bar-bg: theme-color("primary") !default; $progress-bar-animation-timing: 1s linear infinite !default; $progress-bar-transition: width .6s ease !default; + // List group +$list-group-color: null !default; $list-group-bg: $white !default; $list-group-border-color: rgba($black, .125) !default; $list-group-border-width: $border-width !default; @@ -842,29 +1044,47 @@ $breadcrumb-margin-bottom: 1rem !default; $breadcrumb-bg: $gray-200 !default; $breadcrumb-divider-color: $gray-600 !default; $breadcrumb-active-color: $gray-600 !default; -$breadcrumb-divider: "/" !default; +$breadcrumb-divider: quote("/") !default; + +$breadcrumb-border-radius: $border-radius !default; // Carousel -$carousel-control-color: $white !default; -$carousel-control-width: 15% !default; -$carousel-control-opacity: .5 !default; +$carousel-control-color: $white !default; +$carousel-control-width: 15% !default; +$carousel-control-opacity: .5 !default; +$carousel-control-hover-opacity: .9 !default; +$carousel-control-transition: opacity .15s ease !default; + +$carousel-indicator-width: 30px !default; +$carousel-indicator-height: 3px !default; +$carousel-indicator-hit-area-height: 10px !default; +$carousel-indicator-spacer: 3px !default; +$carousel-indicator-active-bg: $white !default; +$carousel-indicator-transition: opacity .6s ease !default; + +$carousel-caption-width: 70% !default; +$carousel-caption-color: $white !default; + +$carousel-control-icon-width: 20px !default; -$carousel-indicator-width: 30px !default; -$carousel-indicator-height: 3px !default; -$carousel-indicator-spacer: 3px !default; -$carousel-indicator-active-bg: $white !default; +$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default; +$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default; -$carousel-caption-width: 70% !default; -$carousel-caption-color: $white !default; +$carousel-transition-duration: .6s !default; +$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) -$carousel-control-icon-width: 20px !default; -$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default; -$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default; +// Spinners -$carousel-transition: transform .6s ease !default; +$spinner-width: 2rem !default; +$spinner-height: $spinner-width !default; +$spinner-border-width: .25em !default; + +$spinner-width-sm: 1rem !default; +$spinner-height-sm: $spinner-width-sm !default; +$spinner-border-width-sm: .2em !default; // Close @@ -874,6 +1094,7 @@ $close-font-weight: $font-weight-bold !default; $close-color: $black !default; $close-text-shadow: 0 1px 0 $white !default; + // Code $code-font-size: 87.5% !default; @@ -889,6 +1110,14 @@ $pre-color: $gray-900 !default; $pre-scrollable-max-height: 340px !default; +// Utilities + +$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default; +$overflows: auto, hidden !default; +$positions: static, relative, absolute, fixed, sticky !default; + + // Printing + $print-page-size: a3 !default; $print-body-min-width: map-get($grid-breakpoints, "lg") !default; diff --git a/assets/scss/bootstrap/bootstrap-grid.scss b/assets/scss/bootstrap/bootstrap-grid.scss index 26c0dc8..d5f92a1 100755 --- a/assets/scss/bootstrap/bootstrap-grid.scss +++ b/assets/scss/bootstrap/bootstrap-grid.scss @@ -1,14 +1,10 @@ /*! - * Bootstrap Grid v4.0.0 (https://getbootstrap.com) - * Copyright 2011-2018 The Bootstrap Authors - * Copyright 2011-2018 Twitter, Inc. + * Bootstrap Grid v4.3.1 (https://getbootstrap.com/) + * Copyright 2011-2019 The Bootstrap Authors + * Copyright 2011-2019 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -@at-root { - @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix -} - html { box-sizing: border-box; -ms-overflow-style: scrollbar; @@ -30,3 +26,4 @@ html { @import "grid"; @import "utilities/display"; @import "utilities/flex"; +@import "utilities/spacing"; diff --git a/assets/scss/bootstrap/bootstrap-reboot.scss b/assets/scss/bootstrap/bootstrap-reboot.scss index 46c4610..2983f3f 100755 --- a/assets/scss/bootstrap/bootstrap-reboot.scss +++ b/assets/scss/bootstrap/bootstrap-reboot.scss @@ -1,7 +1,7 @@ /*! - * Bootstrap Reboot v4.0.0 (https://getbootstrap.com) - * Copyright 2011-2018 The Bootstrap Authors - * Copyright 2011-2018 Twitter, Inc. + * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/) + * Copyright 2011-2019 The Bootstrap Authors + * Copyright 2011-2019 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) */ diff --git a/assets/scss/bootstrap/bootstrap.scss b/assets/scss/bootstrap/bootstrap.scss index bb5fac8..9f15c2a 100755 --- a/assets/scss/bootstrap/bootstrap.scss +++ b/assets/scss/bootstrap/bootstrap.scss @@ -1,7 +1,7 @@ /*! - * Bootstrap v4.0.0 (https://getbootstrap.com) - * Copyright 2011-2018 The Bootstrap Authors - * Copyright 2011-2018 Twitter, Inc. + * Bootstrap v4.3.1 (https://getbootstrap.com/) + * Copyright 2011-2019 The Bootstrap Authors + * Copyright 2011-2019 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ @@ -34,9 +34,11 @@ @import "media"; @import "list-group"; @import "close"; +@import "toasts"; @import "modal"; @import "tooltip"; @import "popover"; @import "carousel"; +@import "spinners"; @import "utilities"; @import "print"; diff --git a/assets/scss/bootstrap/mixins/_badge.scss b/assets/scss/bootstrap/mixins/_badge.scss index eeca0b4..64b29cb 100755 --- a/assets/scss/bootstrap/mixins/_badge.scss +++ b/assets/scss/bootstrap/mixins/_badge.scss @@ -2,11 +2,16 @@ color: color-yiq($bg); background-color: $bg; - &[href] { + @at-root a#{&} { @include hover-focus { color: color-yiq($bg); - text-decoration: none; background-color: darken($bg, 10%); } + + &:focus, + &.focus { + outline: 0; + box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5); + } } } diff --git a/assets/scss/bootstrap/mixins/_border-radius.scss b/assets/scss/bootstrap/mixins/_border-radius.scss index 2024feb..88aeb37 100755 --- a/assets/scss/bootstrap/mixins/_border-radius.scss +++ b/assets/scss/bootstrap/mixins/_border-radius.scss @@ -1,9 +1,13 @@ +// stylelint-disable property-blacklist // Single side border-radius -@mixin border-radius($radius: $border-radius) { +@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { @if $enable-rounded { border-radius: $radius; } + @else if $fallback-border-radius != false { + border-radius: $fallback-border-radius; + } } @mixin border-top-radius($radius) { @@ -33,3 +37,27 @@ border-bottom-left-radius: $radius; } } + +@mixin border-top-left-radius($radius) { + @if $enable-rounded { + border-top-left-radius: $radius; + } +} + +@mixin border-top-right-radius($radius) { + @if $enable-rounded { + border-top-right-radius: $radius; + } +} + +@mixin border-bottom-right-radius($radius) { + @if $enable-rounded { + border-bottom-right-radius: $radius; + } +} + +@mixin border-bottom-left-radius($radius) { + @if $enable-rounded { + border-bottom-left-radius: $radius; + } +} diff --git a/assets/scss/bootstrap/mixins/_box-shadow.scss b/assets/scss/bootstrap/mixins/_box-shadow.scss index b2410e5..0726d43 100755 --- a/assets/scss/bootstrap/mixins/_box-shadow.scss +++ b/assets/scss/bootstrap/mixins/_box-shadow.scss @@ -1,5 +1,20 @@ @mixin box-shadow($shadow...) { @if $enable-shadows { - box-shadow: $shadow; + $result: (); + + @if (length($shadow) == 1) { + // We can pass `@include box-shadow(none);` + $result: $shadow; + } @else { + // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;` + @for $i from 1 through length($shadow) { + @if nth($shadow, $i) != "none" { + $result: append($result, nth($shadow, $i), "comma"); + } + } + } + @if (length($result) > 0) { + box-shadow: $result; + } } } diff --git a/assets/scss/bootstrap/mixins/_breakpoints.scss b/assets/scss/bootstrap/mixins/_breakpoints.scss index d1ad684..23a5de9 100755 --- a/assets/scss/bootstrap/mixins/_breakpoints.scss +++ b/assets/scss/bootstrap/mixins/_breakpoints.scss @@ -16,7 +16,7 @@ // md @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { $n: index($breakpoint-names, $name); - @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); + @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); } // Minimum breakpoint width. Null for the smallest (first) breakpoint. @@ -39,10 +39,10 @@ // 767.98px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $next: breakpoint-next($name, $breakpoints); - @return if($next, breakpoint-min($next, $breakpoints) - .02px, null); + @return if($next, breakpoint-min($next, $breakpoints) - .02, null); } -// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront. +// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. // Useful for making responsive utilities. // // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) diff --git a/assets/scss/bootstrap/mixins/_buttons.scss b/assets/scss/bootstrap/mixins/_buttons.scss index 06ad677..eee903f 100755 --- a/assets/scss/bootstrap/mixins/_buttons.scss +++ b/assets/scss/bootstrap/mixins/_buttons.scss @@ -19,9 +19,9 @@ &.focus { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { - box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); + box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); } @else { - box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); + box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); } } @@ -31,6 +31,10 @@ color: color-yiq($background); background-color: $background; border-color: $border; + // Remove CSS gradients if they're enabled + @if $enable-gradients { + background-image: none; + } } &:not(:disabled):not(.disabled):active, @@ -45,10 +49,10 @@ &:focus { // Avoid using mixin so we can pass custom focus shadow properly - @if $enable-shadows { - box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); + @if $enable-shadows and $btn-active-box-shadow != none { + box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); } @else { - box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); + box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); } } } @@ -56,11 +60,9 @@ @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { color: $color; - background-color: transparent; - background-image: none; border-color: $color; - &:hover { + @include hover { color: $color-hover; background-color: $active-background; border-color: $active-border; @@ -98,12 +100,8 @@ // Button sizes @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { padding: $padding-y $padding-x; - font-size: $font-size; + @include font-size($font-size); line-height: $line-height; // Manually declare to provide an override to the browser default - @if $enable-rounded { - border-radius: $border-radius; - } @else { - border-radius: 0; - } + @include border-radius($border-radius, 0); } diff --git a/assets/scss/bootstrap/mixins/_caret.scss b/assets/scss/bootstrap/mixins/_caret.scss index 40478e4..8ecef65 100755 --- a/assets/scss/bootstrap/mixins/_caret.scss +++ b/assets/scss/bootstrap/mixins/_caret.scss @@ -14,6 +14,7 @@ @mixin caret-right { border-top: $caret-width solid transparent; + border-right: 0; border-bottom: $caret-width solid transparent; border-left: $caret-width solid; } @@ -28,10 +29,8 @@ @if $enable-caret { &::after { display: inline-block; - width: 0; - height: 0; - margin-left: $caret-width * .85; - vertical-align: $caret-width * .85; + margin-left: $caret-spacing; + vertical-align: $caret-vertical-align; content: ""; @if $direction == down { @include caret-down; @@ -49,10 +48,8 @@ &::before { display: inline-block; - width: 0; - height: 0; - margin-right: $caret-width * .85; - vertical-align: $caret-width * .85; + margin-right: $caret-spacing; + vertical-align: $caret-vertical-align; content: ""; @include caret-left; } diff --git a/assets/scss/bootstrap/mixins/_deprecate.scss b/assets/scss/bootstrap/mixins/_deprecate.scss new file mode 100755 index 0000000..df070bc --- /dev/null +++ b/assets/scss/bootstrap/mixins/_deprecate.scss @@ -0,0 +1,10 @@ +// Deprecate mixin +// +// This mixin can be used to deprecate mixins or functions. +// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to +// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap) +@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) { + @if ($enable-deprecation-messages != false and $ignore-warning != true) { + @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}."; + } +} diff --git a/assets/scss/bootstrap/mixins/_float.scss b/assets/scss/bootstrap/mixins/_float.scss index 48fa8b6..adff88e 100755 --- a/assets/scss/bootstrap/mixins/_float.scss +++ b/assets/scss/bootstrap/mixins/_float.scss @@ -2,10 +2,13 @@ @mixin float-left { float: left !important; + @include deprecate("The `float-left` mixin", "v4.3.0", "v5"); } @mixin float-right { float: right !important; + @include deprecate("The `float-right` mixin", "v4.3.0", "v5"); } @mixin float-none { float: none !important; + @include deprecate("The `float-none` mixin", "v4.3.0", "v5"); } diff --git a/assets/scss/bootstrap/mixins/_forms.scss b/assets/scss/bootstrap/mixins/_forms.scss index 2290682..ea8a91a 100755 --- a/assets/scss/bootstrap/mixins/_forms.scss +++ b/assets/scss/bootstrap/mixins/_forms.scss @@ -26,12 +26,12 @@ } -@mixin form-validation-state($state, $color) { +@mixin form-validation-state($state, $color, $icon) { .#{$state}-feedback { display: none; width: 100%; margin-top: $form-feedback-margin-top; - font-size: $form-feedback-font-size; + @include font-size($form-feedback-font-size); color: $color; } @@ -41,21 +41,61 @@ z-index: 5; display: none; max-width: 100%; // Contain to parent when possible - padding: .5rem; + padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x; margin-top: .1rem; - font-size: .875rem; - line-height: 1; - color: #fff; - background-color: rgba($color, .8); - border-radius: .2rem; + @include font-size($form-feedback-tooltip-font-size); + line-height: $form-feedback-tooltip-line-height; + color: color-yiq($color); + background-color: rgba($color, $form-feedback-tooltip-opacity); + @include border-radius($form-feedback-tooltip-border-radius); + } + + .form-control { + .was-validated &:#{$state}, + &.is-#{$state} { + border-color: $color; + + @if $enable-validation-icons { + padding-right: $input-height-inner; + background-image: $icon; + background-repeat: no-repeat; + background-position: center right $input-height-inner-quarter; + background-size: $input-height-inner-half $input-height-inner-half; + } + + &:focus { + border-color: $color; + box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + } + + ~ .#{$state}-feedback, + ~ .#{$state}-tooltip { + display: block; + } + } + } + + // stylelint-disable-next-line selector-no-qualifying-type + textarea.form-control { + .was-validated &:#{$state}, + &.is-#{$state} { + @if $enable-validation-icons { + padding-right: $input-height-inner; + background-position: top $input-height-inner-quarter right $input-height-inner-quarter; + } + } } - .form-control, .custom-select { .was-validated &:#{$state}, &.is-#{$state} { border-color: $color; + @if $enable-validation-icons { + padding-right: $custom-select-feedback-icon-padding-right; + background: $custom-select-background, $icon $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size; + } + &:focus { border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); @@ -68,6 +108,17 @@ } } + + .form-control-file { + .was-validated &:#{$state}, + &.is-#{$state} { + ~ .#{$state}-feedback, + ~ .#{$state}-tooltip { + display: block; + } + } + } + .form-check-input { .was-validated &:#{$state}, &.is-#{$state} { @@ -89,7 +140,7 @@ color: $color; &::before { - background-color: lighten($color, 25%); + border-color: $color; } } @@ -100,13 +151,18 @@ &:checked { ~ .custom-control-label::before { + border-color: lighten($color, 10%); @include gradient-bg(lighten($color, 10%)); } } &:focus { ~ .custom-control-label::before { - box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + } + + &:not(:checked) ~ .custom-control-label::before { + border-color: $color; } } } @@ -118,8 +174,6 @@ &.is-#{$state} { ~ .custom-file-label { border-color: $color; - - &::before { border-color: inherit; } } ~ .#{$state}-feedback, @@ -129,6 +183,7 @@ &:focus { ~ .custom-file-label { + border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } } diff --git a/assets/scss/bootstrap/mixins/_gradients.scss b/assets/scss/bootstrap/mixins/_gradients.scss index ecd01f7..88c4d64 100755 --- a/assets/scss/bootstrap/mixins/_gradients.scss +++ b/assets/scss/bootstrap/mixins/_gradients.scss @@ -11,7 +11,7 @@ // Horizontal gradient, from left to right // // Creates two color stops, start and end, by specifying a color and position for each color stop. -@mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { +@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); background-repeat: repeat-x; } @@ -19,27 +19,27 @@ // Vertical gradient, from top to bottom // // Creates two color stops, start and end, by specifying a color and position for each color stop. -@mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { +@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); background-repeat: repeat-x; } -@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) { +@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { background-image: linear-gradient($deg, $start-color, $end-color); background-repeat: repeat-x; } -@mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { +@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); background-repeat: no-repeat; } -@mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { +@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); background-repeat: no-repeat; } -@mixin gradient-radial($inner-color: #555, $outer-color: #333) { +@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { background-image: radial-gradient(circle, $inner-color, $outer-color); background-repeat: no-repeat; } -@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) { +@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) { background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); } diff --git a/assets/scss/bootstrap/mixins/_grid-framework.scss b/assets/scss/bootstrap/mixins/_grid-framework.scss index 7b37f86..649c28b 100755 --- a/assets/scss/bootstrap/mixins/_grid-framework.scss +++ b/assets/scss/bootstrap/mixins/_grid-framework.scss @@ -8,9 +8,8 @@ %grid-column { position: relative; width: 100%; - min-height: 1px; // Prevent columns from collapsing when empty - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); + padding-right: $gutter / 2; + padding-left: $gutter / 2; } @each $breakpoint in map-keys($breakpoints) { @@ -37,7 +36,7 @@ .col#{$infix}-auto { flex: 0 0 auto; width: auto; - max-width: none; // Reset earlier grid tiers + max-width: 100%; // Reset earlier grid tiers } @for $i from 1 through $columns { diff --git a/assets/scss/bootstrap/mixins/_grid.scss b/assets/scss/bootstrap/mixins/_grid.scss index b75ebcb..924eb0c 100755 --- a/assets/scss/bootstrap/mixins/_grid.scss +++ b/assets/scss/bootstrap/mixins/_grid.scss @@ -2,10 +2,10 @@ // // Generate semantic grid columns with these mixins. -@mixin make-container() { +@mixin make-container($gutter: $grid-gutter-width) { width: 100%; - padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); + padding-right: $gutter / 2; + padding-left: $gutter / 2; margin-right: auto; margin-left: auto; } @@ -20,22 +20,21 @@ } } -@mixin make-row() { +@mixin make-row($gutter: $grid-gutter-width) { display: flex; flex-wrap: wrap; - margin-right: ($grid-gutter-width / -2); - margin-left: ($grid-gutter-width / -2); + margin-right: -$gutter / 2; + margin-left: -$gutter / 2; } -@mixin make-col-ready() { +@mixin make-col-ready($gutter: $grid-gutter-width) { position: relative; // Prevent columns from becoming too narrow when at smaller grid tiers by // always setting `width: 100%;`. This works because we use `flex` values // later on to override this initial width. width: 100%; - min-height: 1px; // Prevent collapsing - padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); + padding-right: $gutter / 2; + padding-left: $gutter / 2; } @mixin make-col($size, $columns: $grid-columns) { diff --git a/assets/scss/bootstrap/mixins/_hover.scss b/assets/scss/bootstrap/mixins/_hover.scss index ec2e328..192f847 100755 --- a/assets/scss/bootstrap/mixins/_hover.scss +++ b/assets/scss/bootstrap/mixins/_hover.scss @@ -1,13 +1,11 @@ -// stylelint-disable indentation - // Hover mixin and `$enable-hover-media-query` are deprecated. // -// Origally added during our alphas and maintained during betas, this mixin was -// designed to prevent `:hover` stickiness on iOS—an issue where hover styles +// Originally added during our alphas and maintained during betas, this mixin was +// designed to prevent `:hover` stickiness on iOS-an issue where hover styles // would persist after initial touch. // // For backward compatibility, we've kept these mixins and updated them to -// always return their regular psuedo-classes instead of a shimmed media query. +// always return their regular pseudo-classes instead of a shimmed media query. // // Issue: https://github.com/twbs/bootstrap/issues/25195 diff --git a/assets/scss/bootstrap/mixins/_image.scss b/assets/scss/bootstrap/mixins/_image.scss index 0544f0d..a76a608 100755 --- a/assets/scss/bootstrap/mixins/_image.scss +++ b/assets/scss/bootstrap/mixins/_image.scss @@ -20,7 +20,6 @@ // // Short retina mixin for setting background-image and -size. -// stylelint-disable indentation, media-query-list-comma-newline-after @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { background-image: url($file-1x); @@ -29,8 +28,9 @@ // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard. // Compatibility info: https://caniuse.com/#feat=css-media-resolution @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx - only screen and (min-resolution: 2dppx) { // Standardized + only screen and (min-resolution: 2dppx) { // Standardized background-image: url($file-2x); background-size: $width-1x $height-1x; } + @include deprecate("`img-retina()`", "v4.3.0", "v5"); } diff --git a/assets/scss/bootstrap/mixins/_list-group.scss b/assets/scss/bootstrap/mixins/_list-group.scss index 607ffcb..cd47a4e 100755 --- a/assets/scss/bootstrap/mixins/_list-group.scss +++ b/assets/scss/bootstrap/mixins/_list-group.scss @@ -12,7 +12,7 @@ } &.active { - color: #fff; + color: $white; background-color: $color; border-color: $color; } diff --git a/assets/scss/bootstrap/mixins/_nav-divider.scss b/assets/scss/bootstrap/mixins/_nav-divider.scss index 493de03..4fb37b6 100755 --- a/assets/scss/bootstrap/mixins/_nav-divider.scss +++ b/assets/scss/bootstrap/mixins/_nav-divider.scss @@ -2,9 +2,9 @@ // // Dividers (basically an hr) within dropdowns and nav lists -@mixin nav-divider($color: #e5e5e5) { +@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) { height: 0; - margin: ($spacer / 2) 0; + margin: $margin-y 0; overflow: hidden; border-top: 1px solid $color; } diff --git a/assets/scss/bootstrap/mixins/_navbar-align.scss b/assets/scss/bootstrap/mixins/_navbar-align.scss deleted file mode 100755 index b351660..0000000 --- a/assets/scss/bootstrap/mixins/_navbar-align.scss +++ /dev/null @@ -1,10 +0,0 @@ -// Navbar vertical align -// -// Vertically center elements in the navbar. -// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` -// to calculate the appropriate top margin. - -// @mixin navbar-vertical-align($element-height) { -// margin-top: (($navbar-height - $element-height) / 2); -// margin-bottom: (($navbar-height - $element-height) / 2); -// } diff --git a/assets/scss/bootstrap/mixins/_pagination.scss b/assets/scss/bootstrap/mixins/_pagination.scss index ff36eb6..af8e16d 100755 --- a/assets/scss/bootstrap/mixins/_pagination.scss +++ b/assets/scss/bootstrap/mixins/_pagination.scss @@ -3,7 +3,7 @@ @mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { .page-link { padding: $padding-y $padding-x; - font-size: $font-size; + @include font-size($font-size); line-height: $line-height; } diff --git a/assets/scss/bootstrap/mixins/_reset-text.scss b/assets/scss/bootstrap/mixins/_reset-text.scss index 71edb00..bfa9f6e 100755 --- a/assets/scss/bootstrap/mixins/_reset-text.scss +++ b/assets/scss/bootstrap/mixins/_reset-text.scss @@ -5,7 +5,7 @@ font-weight: $font-weight-normal; line-height: $line-height-base; text-align: left; // Fallback for where `start` is not supported - text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties + text-align: start; text-decoration: none; text-shadow: none; text-transform: none; diff --git a/assets/scss/bootstrap/mixins/_screen-reader.scss b/assets/scss/bootstrap/mixins/_screen-reader.scss index 8f3eb1b..812591b 100755 --- a/assets/scss/bootstrap/mixins/_screen-reader.scss +++ b/assets/scss/bootstrap/mixins/_screen-reader.scss @@ -1,6 +1,6 @@ // Only display content to screen readers // -// See: http://a11yproject.com/posts/how-to-hide-content/ +// See: https://a11yproject.com/posts/how-to-hide-content/ // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ @mixin sr-only { @@ -11,7 +11,6 @@ overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; - clip-path: inset(50%); border: 0; } @@ -30,6 +29,5 @@ overflow: visible; clip: auto; white-space: normal; - clip-path: none; } } diff --git a/assets/scss/bootstrap/mixins/_size.scss b/assets/scss/bootstrap/mixins/_size.scss index b9dd48e..69e056d 100755 --- a/assets/scss/bootstrap/mixins/_size.scss +++ b/assets/scss/bootstrap/mixins/_size.scss @@ -3,4 +3,5 @@ @mixin size($width, $height: $width) { width: $width; height: $height; + @include deprecate("`size()`", "v4.3.0", "v5"); } diff --git a/assets/scss/bootstrap/mixins/_table-row.scss b/assets/scss/bootstrap/mixins/_table-row.scss index 84f1d30..f8d6186 100755 --- a/assets/scss/bootstrap/mixins/_table-row.scss +++ b/assets/scss/bootstrap/mixins/_table-row.scss @@ -1,6 +1,6 @@ // Tables -@mixin table-row-variant($state, $background) { +@mixin table-row-variant($state, $background, $border: null) { // Exact selectors below required to override `.table-striped` and prevent // inheritance to nested tables. .table-#{$state} { @@ -9,6 +9,15 @@ > td { background-color: $background; } + + @if $border != null { + th, + td, + thead th, + tbody + tbody { + border-color: $border; + } + } } // Hover states for `.table-hover` diff --git a/assets/scss/bootstrap/mixins/_text-emphasis.scss b/assets/scss/bootstrap/mixins/_text-emphasis.scss index 58db3e0..155d6ca 100755 --- a/assets/scss/bootstrap/mixins/_text-emphasis.scss +++ b/assets/scss/bootstrap/mixins/_text-emphasis.scss @@ -6,9 +6,11 @@ #{$parent} { color: $color !important; } - a#{$parent} { - @include hover-focus { - color: darken($color, 10%) !important; + @if $emphasized-link-hover-darken-percentage != 0 { + a#{$parent} { + @include hover-focus { + color: darken($color, $emphasized-link-hover-darken-percentage) !important; + } } } } diff --git a/assets/scss/bootstrap/mixins/_text-hide.scss b/assets/scss/bootstrap/mixins/_text-hide.scss index aa551fd..3a92301 100755 --- a/assets/scss/bootstrap/mixins/_text-hide.scss +++ b/assets/scss/bootstrap/mixins/_text-hide.scss @@ -1,9 +1,11 @@ // CSS image replacement -@mixin text-hide() { +@mixin text-hide($ignore-warning: false) { // stylelint-disable-next-line font-family-no-missing-generic-family-keyword font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; + + @include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning); } diff --git a/assets/scss/bootstrap/mixins/_transition.scss b/assets/scss/bootstrap/mixins/_transition.scss index 7e33dee..8ce35a6 100755 --- a/assets/scss/bootstrap/mixins/_transition.scss +++ b/assets/scss/bootstrap/mixins/_transition.scss @@ -1,3 +1,4 @@ +// stylelint-disable property-blacklist @mixin transition($transition...) { @if $enable-transitions { @if length($transition) == 0 { @@ -6,4 +7,10 @@ transition: $transition; } } + + @if $enable-prefers-reduced-motion-media-query { + @media (prefers-reduced-motion: reduce) { + transition: none; + } + } } diff --git a/assets/scss/bootstrap/mixins/_visibility.scss b/assets/scss/bootstrap/mixins/_visibility.scss index fe523d0..f174673 100755 --- a/assets/scss/bootstrap/mixins/_visibility.scss +++ b/assets/scss/bootstrap/mixins/_visibility.scss @@ -4,4 +4,5 @@ @mixin invisible($visibility) { visibility: $visibility !important; + @include deprecate("`invisible()`", "v4.3.0", "v5"); } diff --git a/assets/scss/bootstrap/utilities/_borders.scss b/assets/scss/bootstrap/utilities/_borders.scss index b8832ef..302f6bf 100755 --- a/assets/scss/bootstrap/utilities/_borders.scss +++ b/assets/scss/bootstrap/utilities/_borders.scss @@ -1,4 +1,4 @@ -// stylelint-disable declaration-no-important +// stylelint-disable property-blacklist, declaration-no-important // // Border @@ -30,30 +30,46 @@ // Border-radius // +.rounded-sm { + border-radius: $border-radius-sm !important; +} + .rounded { border-radius: $border-radius !important; } + .rounded-top { border-top-left-radius: $border-radius !important; border-top-right-radius: $border-radius !important; } + .rounded-right { border-top-right-radius: $border-radius !important; border-bottom-right-radius: $border-radius !important; } + .rounded-bottom { border-bottom-right-radius: $border-radius !important; border-bottom-left-radius: $border-radius !important; } + .rounded-left { border-top-left-radius: $border-radius !important; border-bottom-left-radius: $border-radius !important; } +.rounded-lg { + border-radius: $border-radius-lg !important; +} + .rounded-circle { border-radius: 50% !important; } +.rounded-pill { + border-radius: $rounded-pill !important; +} + .rounded-0 { border-radius: 0 !important; } diff --git a/assets/scss/bootstrap/utilities/_display.scss b/assets/scss/bootstrap/utilities/_display.scss index 20aeeb5..1303679 100755 --- a/assets/scss/bootstrap/utilities/_display.scss +++ b/assets/scss/bootstrap/utilities/_display.scss @@ -8,15 +8,9 @@ @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - .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-row { display: table-row !important; } - .d#{$infix}-table-cell { display: table-cell !important; } - .d#{$infix}-flex { display: flex !important; } - .d#{$infix}-inline-flex { display: inline-flex !important; } + @each $value in $displays { + .d#{$infix}-#{$value} { display: $value !important; } + } } } @@ -26,13 +20,7 @@ // @media print { - .d-print-none { display: none !important; } - .d-print-inline { display: inline !important; } - .d-print-inline-block { display: inline-block !important; } - .d-print-block { display: block !important; } - .d-print-table { display: table !important; } - .d-print-table-row { display: table-row !important; } - .d-print-table-cell { display: table-cell !important; } - .d-print-flex { display: flex !important; } - .d-print-inline-flex { display: inline-flex !important; } + @each $value in $displays { + .d-print-#{$value} { display: $value !important; } + } } diff --git a/assets/scss/bootstrap/utilities/_embed.scss b/assets/scss/bootstrap/utilities/_embed.scss index d3362b6..4497ac0 100755 --- a/assets/scss/bootstrap/utilities/_embed.scss +++ b/assets/scss/bootstrap/utilities/_embed.scss @@ -27,26 +27,13 @@ } } -.embed-responsive-21by9 { - &::before { - padding-top: percentage(9 / 21); - } -} - -.embed-responsive-16by9 { - &::before { - padding-top: percentage(9 / 16); - } -} - -.embed-responsive-4by3 { - &::before { - padding-top: percentage(3 / 4); - } -} +@each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios { + $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1); + $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2); -.embed-responsive-1by1 { - &::before { - padding-top: percentage(1 / 1); + .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} { + &::before { + padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x); + } } } diff --git a/assets/scss/bootstrap/utilities/_flex.scss b/assets/scss/bootstrap/utilities/_flex.scss index 8e47038..3d4266e 100755 --- a/assets/scss/bootstrap/utilities/_flex.scss +++ b/assets/scss/bootstrap/utilities/_flex.scss @@ -16,6 +16,11 @@ .flex#{$infix}-wrap { flex-wrap: wrap !important; } .flex#{$infix}-nowrap { flex-wrap: nowrap !important; } .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; } + .flex#{$infix}-fill { flex: 1 1 auto !important; } + .flex#{$infix}-grow-0 { flex-grow: 0 !important; } + .flex#{$infix}-grow-1 { flex-grow: 1 !important; } + .flex#{$infix}-shrink-0 { flex-shrink: 0 !important; } + .flex#{$infix}-shrink-1 { flex-shrink: 1 !important; } .justify-content#{$infix}-start { justify-content: flex-start !important; } .justify-content#{$infix}-end { justify-content: flex-end !important; } diff --git a/assets/scss/bootstrap/utilities/_float.scss b/assets/scss/bootstrap/utilities/_float.scss index 01655e9..5425084 100755 --- a/assets/scss/bootstrap/utilities/_float.scss +++ b/assets/scss/bootstrap/utilities/_float.scss @@ -1,9 +1,11 @@ +// stylelint-disable declaration-no-important + @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - .float#{$infix}-left { @include float-left; } - .float#{$infix}-right { @include float-right; } - .float#{$infix}-none { @include float-none; } + .float#{$infix}-left { float: left !important; } + .float#{$infix}-right { float: right !important; } + .float#{$infix}-none { float: none !important; } } } diff --git a/assets/scss/bootstrap/utilities/_overflow.scss b/assets/scss/bootstrap/utilities/_overflow.scss new file mode 100755 index 0000000..8326c30 --- /dev/null +++ b/assets/scss/bootstrap/utilities/_overflow.scss @@ -0,0 +1,5 @@ +// stylelint-disable declaration-no-important + +@each $value in $overflows { + .overflow-#{$value} { overflow: $value !important; } +} diff --git a/assets/scss/bootstrap/utilities/_position.scss b/assets/scss/bootstrap/utilities/_position.scss index ef962ed..cdf6c11 100755 --- a/assets/scss/bootstrap/utilities/_position.scss +++ b/assets/scss/bootstrap/utilities/_position.scss @@ -1,10 +1,6 @@ // stylelint-disable declaration-no-important // 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; } } diff --git a/assets/scss/bootstrap/utilities/_shadows.scss b/assets/scss/bootstrap/utilities/_shadows.scss new file mode 100755 index 0000000..f5d03fc --- /dev/null +++ b/assets/scss/bootstrap/utilities/_shadows.scss @@ -0,0 +1,6 @@ +// stylelint-disable declaration-no-important + +.shadow-sm { box-shadow: $box-shadow-sm !important; } +.shadow { box-shadow: $box-shadow !important; } +.shadow-lg { box-shadow: $box-shadow-lg !important; } +.shadow-none { box-shadow: none !important; } diff --git a/assets/scss/bootstrap/utilities/_sizing.scss b/assets/scss/bootstrap/utilities/_sizing.scss index e95a4db..f376488 100755 --- a/assets/scss/bootstrap/utilities/_sizing.scss +++ b/assets/scss/bootstrap/utilities/_sizing.scss @@ -10,3 +10,11 @@ .mw-100 { max-width: 100% !important; } .mh-100 { max-height: 100% !important; } + +// Viewport additional helpers + +.min-vw-100 { min-width: 100vw !important; } +.min-vh-100 { min-height: 100vh !important; } + +.vw-100 { width: 100vw !important; } +.vh-100 { height: 100vh !important; } diff --git a/assets/scss/bootstrap/utilities/_spacing.scss b/assets/scss/bootstrap/utilities/_spacing.scss index b2e2354..3511367 100755 --- a/assets/scss/bootstrap/utilities/_spacing.scss +++ b/assets/scss/bootstrap/utilities/_spacing.scss @@ -8,7 +8,6 @@ @each $prop, $abbrev in (margin: m, padding: p) { @each $size, $length in $spacers { - .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; } .#{$abbrev}t#{$infix}-#{$size}, .#{$abbrev}y#{$infix}-#{$size} { @@ -29,6 +28,29 @@ } } + // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`) + @each $size, $length in $spacers { + @if $size != 0 { + .m#{$infix}-n#{$size} { margin: -$length !important; } + .mt#{$infix}-n#{$size}, + .my#{$infix}-n#{$size} { + margin-top: -$length !important; + } + .mr#{$infix}-n#{$size}, + .mx#{$infix}-n#{$size} { + margin-right: -$length !important; + } + .mb#{$infix}-n#{$size}, + .my#{$infix}-n#{$size} { + margin-bottom: -$length !important; + } + .ml#{$infix}-n#{$size}, + .mx#{$infix}-n#{$size} { + margin-left: -$length !important; + } + } + } + // Some special margin utils .m#{$infix}-auto { margin: auto !important; } .mt#{$infix}-auto, diff --git a/assets/scss/bootstrap/utilities/_stretched-link.scss b/assets/scss/bootstrap/utilities/_stretched-link.scss new file mode 100755 index 0000000..fb5066b --- /dev/null +++ b/assets/scss/bootstrap/utilities/_stretched-link.scss @@ -0,0 +1,19 @@ +// +// Stretched link +// + +.stretched-link { + &::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + // Just in case `pointer-events: none` is set on a parent + pointer-events: auto; + content: ""; + // IE10 bugfix, see https://stackoverflow.com/questions/16947967/ie10-hover-pseudo-class-doesnt-work-without-background-color + background-color: rgba(0, 0, 0, 0); + } +} diff --git a/assets/scss/bootstrap/utilities/_text.scss b/assets/scss/bootstrap/utilities/_text.scss index f4b6e65..589e568 100755 --- a/assets/scss/bootstrap/utilities/_text.scss +++ b/assets/scss/bootstrap/utilities/_text.scss @@ -4,9 +4,12 @@ // Text // +.text-monospace { font-family: $font-family-monospace !important; } + // Alignment .text-justify { text-align: justify !important; } +.text-wrap { white-space: normal !important; } .text-nowrap { white-space: nowrap !important; } .text-truncate { @include text-truncate; } @@ -30,23 +33,40 @@ // Weight and italics -.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; } +.font-weight-light { font-weight: $font-weight-light !important; } +.font-weight-lighter { font-weight: $font-weight-lighter !important; } +.font-weight-normal { font-weight: $font-weight-normal !important; } +.font-weight-bold { font-weight: $font-weight-bold !important; } +.font-weight-bolder { font-weight: $font-weight-bolder !important; } +.font-italic { font-style: italic !important; } // Contextual colors -.text-white { color: #fff !important; } +.text-white { color: $white !important; } @each $color, $value in $theme-colors { @include text-emphasis-variant(".text-#{$color}", $value); } +.text-body { color: $body-color !important; } .text-muted { color: $text-muted !important; } +.text-black-50 { color: rgba($black, .5) !important; } +.text-white-50 { color: rgba($white, .5) !important; } + // Misc .text-hide { - @include text-hide(); + @include text-hide($ignore-warning: true); } + +.text-decoration-none { text-decoration: none !important; } + +.text-break { + word-break: break-word !important; // IE & < Edge 18 + overflow-wrap: break-word !important; +} + +// Reset + +.text-reset { color: inherit !important; } diff --git a/assets/scss/bootstrap/utilities/_visibility.scss b/assets/scss/bootstrap/utilities/_visibility.scss index 823406d..7756c3b 100755 --- a/assets/scss/bootstrap/utilities/_visibility.scss +++ b/assets/scss/bootstrap/utilities/_visibility.scss @@ -1,11 +1,13 @@ +// stylelint-disable declaration-no-important + // // Visibility utilities // .visible { - @include invisible(visible); + visibility: visible !important; } .invisible { - @include invisible(hidden); + visibility: hidden !important; } diff --git a/assets/scss/bootstrap/vendor/_rfs.scss b/assets/scss/bootstrap/vendor/_rfs.scss new file mode 100755 index 0000000..497e07e --- /dev/null +++ b/assets/scss/bootstrap/vendor/_rfs.scss @@ -0,0 +1,204 @@ +// stylelint-disable property-blacklist, scss/dollar-variable-default + +// SCSS RFS mixin +// +// Automated font-resizing +// +// See https://github.com/twbs/rfs + +// Configuration + +// Base font size +$rfs-base-font-size: 1.25rem !default; +$rfs-font-size-unit: rem !default; + +// Breakpoint at where font-size starts decreasing if screen width is smaller +$rfs-breakpoint: 1200px !default; +$rfs-breakpoint-unit: px !default; + +// Resize font-size based on screen height and width +$rfs-two-dimensional: false !default; + +// Factor of decrease +$rfs-factor: 10 !default; + +@if type-of($rfs-factor) != "number" or $rfs-factor <= 1 { + @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1."; +} + +// Generate enable or disable classes. Possibilities: false, "enable" or "disable" +$rfs-class: false !default; + +// 1 rem = $rfs-rem-value px +$rfs-rem-value: 16 !default; + +// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14 +$rfs-safari-iframe-resize-bug-fix: false !default; + +// Disable RFS by setting $enable-responsive-font-sizes to false +$enable-responsive-font-sizes: true !default; + +// Cache $rfs-base-font-size unit +$rfs-base-font-size-unit: unit($rfs-base-font-size); + +// Remove px-unit from $rfs-base-font-size for calculations +@if $rfs-base-font-size-unit == "px" { + $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1); +} +@else if $rfs-base-font-size-unit == "rem" { + $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value); +} + +// Cache $rfs-breakpoint unit to prevent multiple calls +$rfs-breakpoint-unit-cache: unit($rfs-breakpoint); + +// Remove unit from $rfs-breakpoint for calculations +@if $rfs-breakpoint-unit-cache == "px" { + $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1); +} +@else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" { + $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value); +} + +// Responsive font-size mixin +@mixin rfs($fs, $important: false) { + // Cache $fs unit + $fs-unit: if(type-of($fs) == "number", unit($fs), false); + + // Add !important suffix if needed + $rfs-suffix: if($important, " !important", ""); + + // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value + @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 { + font-size: #{$fs}#{$rfs-suffix}; + } + @else { + // Variables for storing static and fluid rescaling + $rfs-static: null; + $rfs-fluid: null; + + // Remove px-unit from $fs for calculations + @if $fs-unit == "px" { + $fs: $fs / ($fs * 0 + 1); + } + @else if $fs-unit == "rem" { + $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value); + } + + // Set default font-size + @if $rfs-font-size-unit == rem { + $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix}; + } + @else if $rfs-font-size-unit == px { + $rfs-static: #{$fs}px#{$rfs-suffix}; + } + @else { + @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`."; + } + + // Only add media query if font-size is bigger as the minimum font-size + // If $rfs-factor == 1, no rescaling will take place + @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes { + $min-width: null; + $variable-unit: null; + + // Calculate minimum font-size for given font-size + $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor; + + // Calculate difference between given font-size and minimum font-size for given font-size + $fs-diff: $fs - $fs-min; + + // Base font-size formatting + // No need to check if the unit is valid, because we did that before + $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px); + + // If two-dimensional, use smallest of screen width and height + $variable-unit: if($rfs-two-dimensional, vmin, vw); + + // Calculate the variable width between 0 and $rfs-breakpoint + $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit}; + + // Set the calculated font-size. + $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix}; + } + + // Rendering + @if $rfs-fluid == null { + // Only render static font-size if no fluid font-size is available + font-size: $rfs-static; + } + @else { + $mq-value: null; + + // RFS breakpoint formatting + @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem { + $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit}; + } + @else if $rfs-breakpoint-unit == px { + $mq-value: #{$rfs-breakpoint}px; + } + @else { + @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`."; + } + + @if $rfs-class == "disable" { + // Adding an extra class increases specificity, + // which prevents the media query to override the font size + &, + .disable-responsive-font-size &, + &.disable-responsive-font-size { + font-size: $rfs-static; + } + } + @else { + font-size: $rfs-static; + } + + @if $rfs-two-dimensional { + @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) { + @if $rfs-class == "enable" { + .enable-responsive-font-size &, + &.enable-responsive-font-size { + font-size: $rfs-fluid; + } + } + @else { + font-size: $rfs-fluid; + } + + @if $rfs-safari-iframe-resize-bug-fix { + // stylelint-disable-next-line length-zero-no-unit + min-width: 0vw; + } + } + } + @else { + @media (max-width: #{$mq-value}) { + @if $rfs-class == "enable" { + .enable-responsive-font-size &, + &.enable-responsive-font-size { + font-size: $rfs-fluid; + } + } + @else { + font-size: $rfs-fluid; + } + + @if $rfs-safari-iframe-resize-bug-fix { + // stylelint-disable-next-line length-zero-no-unit + min-width: 0vw; + } + } + } + } + } +} + +// The font-size & responsive-font-size mixin uses RFS to rescale font sizes +@mixin font-size($fs, $important: false) { + @include rfs($fs, $important); +} + +@mixin responsive-font-size($fs, $important: false) { + @include rfs($fs, $important); +} diff --git a/assets/scss/components/_call.scss b/assets/scss/components/_call.scss index b74fc37..bb347d5 100644 --- a/assets/scss/components/_call.scss +++ b/assets/scss/components/_call.scss @@ -1,43 +1,40 @@ .call { position: relative; overflow: hidden; - background-color: #ffffff; + background-color: $ghost; border-radius: 4px; - box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); + // box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); width: 100%; color: $secondary; display: flex; - align-items: flex-start; - flex-direction: column; + align-items: center; + flex-direction: row; + flex-wrap: wrap; + z-index: 2; @include media-breakpoint-up(sm) { align-items: center; flex-direction: row; - width: 90%; - } - @include media-breakpoint-up(md) { - width: 70%; - } - @include media-breakpoint-up(lg) { - width: 50%; + flex-wrap: wrap; } .call-box-top { flex: 1 0 auto; padding: 20px; @include media-breakpoint-up(md) { - padding: 20px; } } .call-box-bottom { flex: 0 0 auto; - padding: 0 20px 20px 20px; + padding: 20px; @include media-breakpoint-up(sm) { - padding: 20px; } } .call-name { font-size: 1.1rem; font-weight: bold; } + strong { + font-weight: bold; + } svg { fill: lighten($secondary, 40%); position: absolute; diff --git a/assets/scss/components/_content.scss b/assets/scss/components/_content.scss index f5207b1..c7f1b93 100644 --- a/assets/scss/components/_content.scss +++ b/assets/scss/components/_content.scss @@ -3,23 +3,24 @@ ol { margin-top: 10px; margin-bottom: 20px; + list-style: disc; li { margin-bottom: 5px; margin-left: 20px; + color: $steel; } } a { text-decoration: underline; } p { - color: rgb(78, 78, 78); font-family: $font-family-base; + color: $steel; } h1 { font-family: $font-family-heading; line-height: 1.2; font-weight: $font-weight-light; - color: #333333; @include media-breakpoint-up(md) { line-height: 1.2; font-weight: $font-weight-light; @@ -27,14 +28,12 @@ } h2 { font-family: $font-family-heading; + font-size: 24px; line-height: 1.4; - font-weight: 400; - color: #333333; @include media-breakpoint-up(md) { line-height: 1.4; } } - // Subheading h3 { color: $primary; line-height: 1.4; @@ -46,4 +45,22 @@ font-weight: $font-weight-thin; } } + table { + width: 100%; + th, + td { + padding: 5px; + vertical-align: top; + border-top: 1px solid $ghost; + } + thead th { + vertical-align: bottom; + border-bottom: 1px solid $ghost; + text-align: left; + font-weight: bold; + } + tbody + tbody { + border-top: 1px solid $ghost; + } + } } diff --git a/assets/scss/components/_feature.scss b/assets/scss/components/_feature.scss index 3a1a6a6..d4a489a 100644 --- a/assets/scss/components/_feature.scss +++ b/assets/scss/components/_feature.scss @@ -1,6 +1,7 @@ .feature { height: 100%; - border: 2px solid #eaeaea; + border: 1px solid $ghost; + border-radius: 3px; padding: 20px; background-color: #ffffff; display: flex; @@ -20,24 +21,9 @@ height: auto; } .feature-title { - font-size: 1.5rem; - line-height: 1.2; } .feature-content { margin-bottom: 0; margin-top: auto; - p { - margin: 0; - strong { - color: $secondary; - text-transform: uppercase; - font-size: 0.8rem; - font-weight: 700; - } - em { - color: $primary; - font-style: normal; - } - } } } diff --git a/assets/scss/components/_footer.scss b/assets/scss/components/_footer.scss index 0f7c041..7ea17b2 100644 --- a/assets/scss/components/_footer.scss +++ b/assets/scss/components/_footer.scss @@ -17,18 +17,16 @@ color: #ffffff; font-size: 1.3rem; font-family: $font-family-heading; + font-weight: normal; margin-bottom: 10px; - flex: 0; @include media-breakpoint-up(sm) { margin: 0; - flex: 0 0 120px; } } ul { list-style: none; margin: 0; padding: 0; - flex: 1; li { display: block; margin-right: 10px; diff --git a/assets/scss/components/_header-fixed.scss b/assets/scss/components/_header-fixed.scss deleted file mode 100644 index bb381d2..0000000 --- a/assets/scss/components/_header-fixed.scss +++ /dev/null @@ -1,19 +0,0 @@ -.header-fixed { - position: fixed; - width: 100%; - top: 0; - z-index: 1000; - transition: padding 225ms, box-shadow 225ms, background-color 0.3s; - .main-menu { - > ul { - > li { - > a { - &:hover { - background: $primary; - color: #ffffff; - } - } - } - } - } -} diff --git a/assets/scss/components/_header-sticky.scss b/assets/scss/components/_header-sticky.scss deleted file mode 100644 index 3ea8210..0000000 --- a/assets/scss/components/_header-sticky.scss +++ /dev/null @@ -1,49 +0,0 @@ -.sticky { - position: fixed; - width: 100%; - top: 0; - z-index: 1000; - background-color: #ffffff; - color: $primary; - box-shadow: 0 1px 2px 0 rgba(36, 50, 66, 0.15); - transition: padding 225ms, box-shadow 225ms, background-color 0.3s; - .logo { - @include media-breakpoint-up(lg) { - opacity: 1; - transition: opacity 225ms; - } - } - .main-menu { - > ul { - > li { - > a { - &:hover { - background: $primary; - color: #fff; - } - } - } - } - } - .hamburger { - .hamburger-inner, - .hamburger-inner::before, - .hamburger-inner::after { - background: $primary; - } - } - .social { - .social-instagram { - background-image: url('/images/social/logo-instagram-blue.svg'); - } - .social-linkedin { - background-image: url('/images/social/logo-linkedin-blue.svg'); - } - .social-twitter { - background-image: url('/images/social/logo-twitter-blue.svg'); - } - .social-vimeo { - background-image: url('/images/social/logo-vimeo-blue.svg'); - } - } -} diff --git a/assets/scss/components/_header-transparent.scss b/assets/scss/components/_header-transparent.scss deleted file mode 100644 index 3d8d9f9..0000000 --- a/assets/scss/components/_header-transparent.scss +++ /dev/null @@ -1,50 +0,0 @@ -.header-transparent { - @include media-breakpoint-up(md) { - background-color: transparent; - color: #ffffff; - } - .logo { - @include media-breakpoint-up(lg) { - opacity: 0; - } - } - .main-menu { - ul { - li { - a { - &:hover { - background: transparent; - color: #ffffff; - } - } - } - } - } - .hamburger { - .hamburger-inner, - .hamburger-inner::before, - .hamburger-inner::after { - @include media-breakpoint-up(md) { - background: #ffffff; - } - } - } - .social { - .social-instagram { - background-image: url('/images/social/logo-instagram-white.svg'); - background-size: 16px 16px; - } - .social-linkedin { - background-image: url('/images/social/logo-linkedin-white.svg'); - background-size: 16px 16px; - } - .social-twitter { - background-image: url('/images/social/logo-twitter-white.svg'); - background-size: 16px 16px; - } - .social-vimeo { - background-image: url('/images/social/logo-vimeo-white.svg'); - background-size: 16px 16px; - } - } -} diff --git a/assets/scss/components/_header.scss b/assets/scss/components/_header.scss index c504215..92610f2 100644 --- a/assets/scss/components/_header.scss +++ b/assets/scss/components/_header.scss @@ -4,7 +4,11 @@ display: flex; justify-content: space-between; align-items: center; - box-shadow: 0 1px 15px rgba(50, 50, 93, 0.2); + // box-shadow: 0 1px 15px rgba(128, 128, 129, 0.2); + z-index: 10; + position: relative; + height: 60px; + border-bottom: 1px solid $ghost; .container { display: flex; justify-content: space-between; diff --git a/assets/scss/components/_intro.scss b/assets/scss/components/_intro.scss index 845b19e..0b6a690 100644 --- a/assets/scss/components/_intro.scss +++ b/assets/scss/components/_intro.scss @@ -2,56 +2,64 @@ display: flex; justify-content: flex-start; align-items: center; - padding-top: 200px; - padding-bottom: 100px; - @include media-breakpoint-up(sm) { - padding-top: 160px; - padding-bottom: 80px; - } + padding-top: 60px; + padding-bottom: 60px; + overflow: hidden; @include media-breakpoint-up(md) { padding-top: 160px; - padding-bottom: 80px; + padding-bottom: 100px; } @include media-breakpoint-up(lg) { - padding-top: 200px; - padding-bottom: 100px; + padding-top: 160px; + padding-bottom: 160px; } h1 { color: $primary; - font-size: 2.4rem; + font-size: 48px; line-height: 1.2; - font-family: $font-family-heading; - width: 70%; - @include media-breakpoint-up(sm) { - width: 70%; - } - @include media-breakpoint-up(md) { - font-size: 3rem; - width: 70%; - } @include media-breakpoint-up(lg) { - font-size: 3rem; - width: 50%; + font-size: 50px; } } + h2 { + width: 80%; + font-size: 1.2rem; + line-height: 1.4; + margin-bottom: 30px; + color: $black; + font-family: $font-family-base; + } p { width: 80%; font-size: 1.2rem; font-weight: light; line-height: 1.5; color: $secondary; - @include media-breakpoint-up(sm) { - width: 70%; - } - @include media-breakpoint-up(md) { - width: 60%; - } - @include media-breakpoint-up(lg) { - width: 55%; - } - @include media-breakpoint-up(xl) { - width: 45%; - } + } +} +.intro-image-flying { + max-width: none; + width: 40%; + margin-bottom: 20px; + // @include media-breakpoint-up(sm) { + // width: 60%; + // } + @include media-breakpoint-up(md) { + margin-bottom: 0; + position: absolute; + bottom: 40px; + right: -140px; + width: 160%; + } + @include media-breakpoint-up(lg) { + bottom: -80px; + right: -120px; + width: 130%; + } + @include media-breakpoint-up(xl) { + bottom: -160px; + right: -100px; + width: 120%; } } .intro-small { diff --git a/assets/scss/components/_main-menu.scss b/assets/scss/components/_main-menu.scss index 85fd626..ef2900f 100644 --- a/assets/scss/components/_main-menu.scss +++ b/assets/scss/components/_main-menu.scss @@ -14,18 +14,16 @@ padding: 10px 14px 10px 14px; display: inline-block; font-weight: regular; - text-transform: uppercase; text-decoration: none; color: $primary; &:hover { - background: $primary; - color: #ffffff; - text-decoration: none; + text-decoration: underline; } } &.active { > a { background: $primary; + border-radius: 3px; text-decoration: none; color: #ffffff; &:hover { diff --git a/assets/scss/components/_page.scss b/assets/scss/components/_page.scss index 5d2d134..3633fbb 100644 --- a/assets/scss/components/_page.scss +++ b/assets/scss/components/_page.scss @@ -2,8 +2,7 @@ display: flex; min-height: 100vh; flex-direction: column; - .wrapper { flex: 1 0 0; } -}
\ No newline at end of file +} diff --git a/assets/scss/components/_reset.scss b/assets/scss/components/_reset.scss index e0e95b4..a3f7681 100644 --- a/assets/scss/components/_reset.scss +++ b/assets/scss/components/_reset.scss @@ -1,5 +1,129 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, ul, -ol { +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { margin: 0; padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; } diff --git a/assets/scss/components/_social.scss b/assets/scss/components/_social.scss deleted file mode 100755 index 9818ab4..0000000 --- a/assets/scss/components/_social.scss +++ /dev/null @@ -1,65 +0,0 @@ -ul.social { - height: inherit; - display: flex; - list-style: none; - margin: 0; - padding: 0; - align-items: center; - justify-content: flex-start; - svg { - fill: currentColor; - height: 16px; - width: 16px; - } - li { - margin: 0; - padding: 0; - list-style: none; - margin-right: 30px; - &:last-of-type { - margin: 0; - } - a { - background-repeat: no-repeat; - background-position: center center; - background-size: auto; - padding: 8px; - display: block; - span { - font-size: 24px; - } - } - } -} - -// ul.social { -// .social-instagram { -// background-image: url('/images/social/logo-instagram-blue.svg'); -// } -// .social-linkedin { -// background-image: url('/images/social/logo-linkedin-blue.svg') -// } -// .social-twitter { -// background-image: url('/images/social/logo-twitter-blue.svg'); -// background-size: 16px 16px; -// } -// .social-vimeo { -// background-image: url('/images/social/logo-vimeo-blue.svg'); -// } -// } - -// ul.social.social-invert { -// .social-instagram { -// background-image: url('/images/social/logo-instagram-white.svg'); -// } -// .social-linkedin { -// background-image: url('/images/social/logo-linkedin-white.svg') -// } -// .social-twitter { -// background-image: url('/images/social/logo-twitter-white.svg'); -// background-size: 16px 16px; -// } -// .social-vimeo { -// background-image: url('/images/social/logo-vimeo-white.svg'); -// } -// } diff --git a/assets/scss/components/_title.scss b/assets/scss/components/_title.scss index b6452a7..e5e8193 100644 --- a/assets/scss/components/_title.scss +++ b/assets/scss/components/_title.scss @@ -1,40 +1,8 @@ -.title-1 { +.title { color: $primary; - font-size: 2.4rem; + font-size: 48px; line-height: 1.2; - font-family: $font-family-heading; - @include media-breakpoint-up(md) { - font-size: 3rem; - } - &.black { - color: #222222; - } -} -.title-2 { - font-family: $font-family-base; - font-weight: light; - color: #333333; - font-size: 2.4rem; - @include media-breakpoint-up(md) { - font-size: 4rem; - } - a { - display: block; - } -} -.title-3 { - font-family: $font-family-base; - font-weight: 600; - color: #2b2b39; - font-size: 1.9rem; - letter-spacing: -1px; - @include media-breakpoint-up(sm) { - font-size: 2.1rem; - } - @include media-breakpoint-up(md) { - font-size: 2.2rem; - } - a { - display: block; + @include media-breakpoint-up(lg) { + font-size: 50px; } } diff --git a/assets/scss/components/_type.scss b/assets/scss/components/_type.scss index 4b07509..5caeae9 100644 --- a/assets/scss/components/_type.scss +++ b/assets/scss/components/_type.scss @@ -1,3 +1,10 @@ +a { + color: $primary; +} +img { + max-width: 100%; + height: auto; +} ul, ol { margin: 0; @@ -8,19 +15,22 @@ ol { } } p { - color: rgb(78, 78, 78); + line-height: 26px; + color: $steel; font-family: $font-family-base; + margin-bottom: 20px; } h1 { font-size: 20px; font-family: $font-family-heading; line-height: 1.2; - font-weight: $font-weight-light; - color: #333333; + font-weight: 400; + color: $black; + margin-bottom: 20px; @include media-breakpoint-up(md) { font-size: 30px; line-height: 1.2; - font-weight: $font-weight-light; + font-weight: 400; } } h2 { @@ -28,7 +38,8 @@ h2 { font-family: $font-family-heading; line-height: 1.4; font-weight: 400; - color: #333333; + color: $black; + margin-bottom: 10px; @include media-breakpoint-up(md) { font-size: 24px; line-height: 1.4; @@ -38,13 +49,9 @@ h3 { color: $primary; font-size: 16px; line-height: 1.4; - font-weight: $font-weight-thin; - letter-spacing: 1px; @include media-breakpoint-up(md) { font-size: 20px; line-height: 1.4; - letter-spacing: 1.8px; - font-weight: $font-weight-thin; } } .display-1 { diff --git a/assets/scss/pages/_home.scss b/assets/scss/pages/_home.scss index 2f8e3d0..1be946e 100644 --- a/assets/scss/pages/_home.scss +++ b/assets/scss/pages/_home.scss @@ -1,22 +1,2 @@ .page-home { - background-image: url('../images/undraw_taking_notes_tjaf.svg'); - background-repeat: no-repeat; - background-size: 115%; - background-position: 49px -40px; - @include media-breakpoint-up(sm) { - background-size: 90%; - background-position: 159px -40px; - } - @include media-breakpoint-up(md) { - background-size: 70%; - background-position: 100% -50px; - } - @include media-breakpoint-up(lg) { - background-size: 67%; - background-position: 100% -50px; - } - @include media-breakpoint-up(xl) { - background-size: 58%; - background-position: 100% -90px; - } } diff --git a/assets/scss/pages/services/_page-services-list.scss b/assets/scss/pages/services/_page-services-list.scss index a4bba4a..e69de29 100644 --- a/assets/scss/pages/services/_page-services-list.scss +++ b/assets/scss/pages/services/_page-services-list.scss @@ -1,22 +0,0 @@ -.page-services-list { - background-image: url('../images/undraw_businesswoman_pc12.svg'); - background-repeat: no-repeat; - background-size: 115%; - background-position: 49px -40px; - @include media-breakpoint-up(sm) { - background-size: 90%; - background-position: 159px -40px; - } - @include media-breakpoint-up(md) { - background-size: 85%; - background-position: 199px -80px; - } - @include media-breakpoint-up(lg) { - background-size: 57%; - background-position: 90% -110px; - } - @include media-breakpoint-up(xl) { - background-size: 54%; - background-position: 80% -120px; - } -} diff --git a/assets/scss/pages/services/_service-single.scss b/assets/scss/pages/services/_service-single.scss deleted file mode 100644 index f3121ac..0000000 --- a/assets/scss/pages/services/_service-single.scss +++ /dev/null @@ -1,17 +0,0 @@ -.service-single { - h1.title { - font-size: 3rem; - font-family: $font-family-heading; - color: $primary; - } - .content { - > p { - &:first-of-type { - font-size: 24px; - line-height: 32px; - margin-bottom: 40px; - font-weight: 300; - } - } - } -} diff --git a/assets/scss/pages/services/_service-summary.scss b/assets/scss/pages/services/_service-summary.scss index 3f7f161..a04c16d 100644 --- a/assets/scss/pages/services/_service-summary.scss +++ b/assets/scss/pages/services/_service-summary.scss @@ -12,11 +12,7 @@ .service-content { flex: 1; .service-title { - font-family: $font-family-heading; - font-size: 1.6rem; - } - p { - color: $secondary; + font-size: 26px; } } } diff --git a/assets/scss/pages/team/_page-team-list.scss b/assets/scss/pages/team/_page-team-list.scss index d988bb7..e69de29 100644 --- a/assets/scss/pages/team/_page-team-list.scss +++ b/assets/scss/pages/team/_page-team-list.scss @@ -1,22 +0,0 @@ -.page-team-list { - background-image: url('../images/undraw_hang_out_h9ud.svg'); - background-repeat: no-repeat; - background-size: 115%; - background-position: 49px -40px; - @include media-breakpoint-up(sm) { - background-size: 90%; - background-position: 159px -40px; - } - @include media-breakpoint-up(md) { - background-size: 85%; - background-position: 199px -80px; - } - @include media-breakpoint-up(lg) { - background-size: 70%; - background-position: 100% -110px; - } - @include media-breakpoint-up(xl) { - background-size: 55%; - background-position: 90% -120px; - } -} diff --git a/assets/scss/pages/team/_team-list.scss b/assets/scss/pages/team/_team-list.scss deleted file mode 100644 index 6f90bc9..0000000 --- a/assets/scss/pages/team/_team-list.scss +++ /dev/null @@ -1,9 +0,0 @@ -// .page-team-list { -// .team-name { -// @include media-breakpoint-up(md) { -// font-size: 18px; -// font-weight: $font-weight-light; -// letter-spacing: 1px; -// } -// } -// }
\ No newline at end of file diff --git a/assets/scss/pages/team/_team-summary.scss b/assets/scss/pages/team/_team-summary.scss index 2ce3495..55975e2 100644 --- a/assets/scss/pages/team/_team-summary.scss +++ b/assets/scss/pages/team/_team-summary.scss @@ -3,7 +3,6 @@ flex-wrap: wrap; flex-direction: row; .team-image { - flex: 0; margin-right: 10px; img { border-radius: 50%; @@ -19,8 +18,6 @@ p { margin: 0; } - a { - } } .team-content { flex: 1 0 100%; diff --git a/assets/scss/pages/testimonials/_page-testimonials-list.scss b/assets/scss/pages/testimonials/_page-testimonials-list.scss deleted file mode 100644 index f5ad387..0000000 --- a/assets/scss/pages/testimonials/_page-testimonials-list.scss +++ /dev/null @@ -1,18 +0,0 @@ -.page-testimonials-list { - // background-image: url("../images/undraw_hang_out_h9ud.svg"); - background-repeat: no-repeat; - background-size: 115%; - background-position: 49px -40px; - @include media-breakpoint-up(sm) { - background-size: 90%; - background-position: 159px -40px; - } - @include media-breakpoint-up(md) { - background-size: 85%; - background-position: 199px -80px; - } - @include media-breakpoint-up(lg) { - background-size: 60%; - background-position: 100% -110px; - } -} diff --git a/assets/scss/pages/testimonials/_testimonials-list.scss b/assets/scss/pages/testimonials/_testimonials-list.scss deleted file mode 100644 index e69de29..0000000 --- a/assets/scss/pages/testimonials/_testimonials-list.scss +++ /dev/null diff --git a/assets/scss/pages/testimonials/_testimonials-summary.scss b/assets/scss/pages/testimonials/_testimonials-summary.scss deleted file mode 100644 index 25f7b8a..0000000 --- a/assets/scss/pages/testimonials/_testimonials-summary.scss +++ /dev/null @@ -1,56 +0,0 @@ -.testimonials-summary { - display: flex; - flex-wrap: wrap; - flex-direction: row; - align-items: center; - .testimonials-image { - flex: 0; - margin-right: 10px; - img { - width: 160px; - } - } - .testimonials-meta { - flex: 1; - margin-bottom: 10px; - p { - margin: 0; - } - } - .testimonials-title { - margin-bottom: 5px; - } - .testimonials-name { - font-weight: bold; - display: inline-block; - } - .testimonials-jobtitle { - display: inline-block; - color: $secondary; - } - .testimonials-content { - flex: 1 0 100%; - blockquote { - display: block; - border-width: 2px 0 0 0; - border-style: solid; - border-color: #eeeeee; - padding: 1.5em 0 0.5em; - margin: 1.5em 0; - position: relative; - } - blockquote::before { - content: '\201C'; - position: absolute; - top: 0; - left: 50%; - transform: translate(-50%, -50%); - background: #ffffff; - width: 3rem; - height: 2rem; - font: 6em/1.08em 'PT Sans', sans-serif; - color: $primary; - text-align: center; - } - } -} diff --git a/assets/scss/style.scss b/assets/scss/style.scss index f2e326c..6ff2c80 100755 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -1,42 +1,11 @@ // Font -@import url('https://fonts.googleapis.com/css?family=Lora:400,700|Open+Sans:300,400,700'); +@import url('https://fonts.googleapis.com/css?family=DM+Sans:400,700|DM+Serif+Display'); // Bootstrap -@import 'bootstrap/functions'; @import 'bootstrap-variables'; -@import 'bootstrap/variables'; +@import 'bootstrap/bootstrap-grid'; +@import 'variables'; @import 'bootstrap/mixins'; -@import 'bootstrap/root'; -@import 'bootstrap/reboot'; -@import 'bootstrap/grid'; -@import 'bootstrap/type'; -@import 'bootstrap/tables'; -// @import "bootstrap/images"; -// @import "bootstrap/code"; -// @import "bootstrap/forms"; -// @import "bootstrap/buttons"; -// @import "bootstrap/transitions"; -// @import "bootstrap/dropdown"; -// @import "bootstrap/button-group"; -// @import "bootstrap/input-group"; -// @import "bootstrap/custom-forms"; -// @import "bootstrap/nav"; -// @import "bootstrap/navbar"; -// @import "bootstrap/card"; -// @import "bootstrap/breadcrumb"; -// @import "bootstrap/pagination"; -// @import "bootstrap/badge"; -// @import "bootstrap/jumbotron"; -// @import "bootstrap/alert"; -// @import "bootstrap/progress"; -// @import "bootstrap/media"; -// @import "bootstrap/list-group"; -// @import "bootstrap/close"; -// @import "bootstrap/modal"; -// @import "bootstrap/tooltip"; -// @import "bootstrap/popover"; -// @import "bootstrap/carousel"; -// @import "bootstrap/print"; @import 'bootstrap/utilities'; // Libraries @@ -44,6 +13,7 @@ // Components @import 'components/reset'; +@import 'components/type'; @import 'components/page'; @import 'components/header'; @import 'components/footer'; @@ -65,38 +35,33 @@ @import 'pages/home'; @import 'pages/team/page-team-list'; @import 'pages/team/team-summary'; -@import 'pages/testimonials/page-testimonials-list'; -@import 'pages/testimonials/testimonials-summary'; @import 'pages/services/page-services-list'; @import 'pages/services/page-services-single'; @import 'pages/services/service-summary'; body { - font-size: 1rem; + font-size: 17px; + line-height: 1.2; font-family: $font-family-base; - // -webkit-font-smoothing: antialiased; - // -moz-osx-font-smoothing: grayscale; - // -webkit-text-size-adjust: 100%; - // -ms-text-size-adjust: 100%; } // Display breakpoints for DEV -// body:after { -// color: #000000; -// font-size: 12px; -// padding: 5px; -// font-weight: bold; -// right: 10px; -// position: fixed; -// text-align: center; -// text-transform: uppercase; -// bottom: 10px; -// width: 200px; -// z-index: 9999; -// border: solid 1px #000000; -// @each $name, $value in $grid-breakpoints { -// @include media-breakpoint-up($name) { -// content: '#{$name} - min-width: #{$value}'; -// } -// } -// } +body:after { + color: #000000; + font-size: 12px; + padding: 5px; + font-weight: bold; + right: 10px; + position: fixed; + text-align: center; + text-transform: uppercase; + bottom: 10px; + width: 200px; + z-index: 9999; + border: solid 1px #000000; + @each $name, $value in $grid-breakpoints { + @include media-breakpoint-up($name) { + content: '#{$name} - min-width: #{$value}'; + } + } +} |