+@mixin alert-variant($background, $border, $color) {

+ color: $color;

+ @include gradient-bg($background);

+ border-color: $border;

+

+ hr {

+ border-top-color: darken($border, 5%);

+ }

+

+ .alert-link {

+ color: darken($color, 10%);

+ }

+}

+// stylelint-disable declaration-no-important

+

+// Contextual backgrounds

+

+@mixin bg-variant($parent, $color) {

+ #{$parent} {

+ background-color: $color !important;

+ }

+ a#{$parent},

+ button#{$parent} {

+ @include hover-focus {

+ background-color: darken($color, 10%) !important;

+ }

+ }

+}

+

+@mixin bg-gradient-variant($parent, $color) {

+ #{$parent} {

+ background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;

+ }

+}

+@mixin badge-variant($bg) {

+ color: color-yiq($bg);

+ background-color: $bg;

+

+ &[href] {

+ @include hover-focus {

+ color: color-yiq($bg);

+ text-decoration: none;

+ background-color: darken($bg, 10%);

+ }

+ }

+}

+// Single side border-radius

+

+@mixin border-radius($radius: $border-radius) {

+ @if $enable-rounded {

+ border-radius: $radius;

+ }

+}

+

+@mixin border-top-radius($radius) {

+ @if $enable-rounded {

+ border-top-left-radius: $radius;

+ border-top-right-radius: $radius;

+ }

+}

+

+@mixin border-right-radius($radius) {

+ @if $enable-rounded {

+ border-top-right-radius: $radius;

+ border-bottom-right-radius: $radius;

+ }

+}

+

+@mixin border-bottom-radius($radius) {

+ @if $enable-rounded {

+ border-bottom-right-radius: $radius;

+ border-bottom-left-radius: $radius;

+ }

+}

+

+@mixin border-left-radius($radius) {

+ @if $enable-rounded {

+ border-top-left-radius: $radius;

+ border-bottom-left-radius: $radius;

+ }

+}

+@mixin box-shadow($shadow...) {

+ @if $enable-shadows {

+ box-shadow: $shadow;

+ }

+}

+// Breakpoint viewport sizes and media queries.

+//

+// Breakpoints are defined as a map of (name: minimum width), order from small to large:

+//

+// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)

+//

+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.

+

+// Name of the next breakpoint, or null for the last breakpoint.

+//

+// >> breakpoint-next(sm)

+// md

+// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))

+// md

+// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))

+// 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);

+}

+

+// Minimum breakpoint width. Null for the smallest (first) breakpoint.

+//

+// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))

+// 576px

+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {

+ $min: map-get($breakpoints, $name);

+ @return if($min != 0, $min, null);

+}

+

+// Maximum breakpoint width. Null for the largest (last) breakpoint.

+// The maximum value is calculated as the minimum of the next one less 0.02px

+// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.

+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max

+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.

+// See https://bugs.webkit.org/show_bug.cgi?id=178261

+//

+// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))

+// 767.98px

+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {

+ $next: breakpoint-next($name, $breakpoints);

+ @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);

+}

+

+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.

+// Useful for making responsive utilities.

+//

+// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))

+// "" (Returns a blank string)

+// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))

+// "-sm"

+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {

+ @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");

+}

+

+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.

+// Makes the @content apply to the given breakpoint and wider.

+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {

+ $min: breakpoint-min($name, $breakpoints);

+ @if $min {

+ @media (min-width: $min) {

+ @content;

+ }

+ } @else {

+ @content;

+ }

+}

+

+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.

+// Makes the @content apply to the given breakpoint and narrower.

+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {

+ $max: breakpoint-max($name, $breakpoints);

+ @if $max {

+ @media (max-width: $max) {

+ @content;

+ }

+ } @else {

+ @content;

+ }

+}

+

+// Media that spans multiple breakpoint widths.

+// Makes the @content apply between the min and max breakpoints

+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {

+ $min: breakpoint-min($lower, $breakpoints);

+ $max: breakpoint-max($upper, $breakpoints);

+

+ @if $min != null and $max != null {

+ @media (min-width: $min) and (max-width: $max) {

+ @content;

+ }

+ } @else if $max == null {

+ @include media-breakpoint-up($lower, $breakpoints) {

+ @content;

+ }

+ } @else if $min == null {

+ @include media-breakpoint-down($upper, $breakpoints) {

+ @content;

+ }

+ }

+}

+

+// Media between the breakpoint's minimum and maximum widths.

+// No minimum for the smallest breakpoint, and no maximum for the largest one.

+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.

+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {

+ $min: breakpoint-min($name, $breakpoints);

+ $max: breakpoint-max($name, $breakpoints);

+

+ @if $min != null and $max != null {

+ @media (min-width: $min) and (max-width: $max) {

+ @content;

+ }

+ } @else if $max == null {

+ @include media-breakpoint-up($name, $breakpoints) {

+ @content;

+ }

+ } @else if $min == null {

+ @include media-breakpoint-down($name, $breakpoints) {

+ @content;

+ }

+ }

+}

+// Button variants

+//

+// Easily pump out default styles, as well as :hover, :focus, :active,

+// and disabled options for all buttons

+

+@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {

+ color: color-yiq($background);

+ @include gradient-bg($background);

+ border-color: $border;

+ @include box-shadow($btn-box-shadow);

+

+ @include hover {

+ color: color-yiq($hover-background);

+ @include gradient-bg($hover-background);

+ border-color: $hover-border;

+ }

+

+ &:focus,

+ &.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);

+ } @else {

+ box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);

+ }

+ }

+

+ // Disabled comes first so active can properly restyle

+ &.disabled,

+ &:disabled {

+ color: color-yiq($background);

+ background-color: $background;

+ border-color: $border;

+ }

+

+ &:not(:disabled):not(.disabled):active,

+ &:not(:disabled):not(.disabled).active,

+ .show > &.dropdown-toggle {

+ color: color-yiq($active-background);

+ background-color: $active-background;

+ @if $enable-gradients {

+ background-image: none; // Remove the gradient for the pressed/active state

+ }

+ border-color: $active-border;

+

+ &: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);

+ } @else {

+ box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);

+ }

+ }

+ }

+}

+

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

+ color: $color-hover;

+ background-color: $active-background;

+ border-color: $active-border;

+ }

+

+ &:focus,

+ &.focus {

+ box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);

+ }

+

+ &.disabled,

+ &:disabled {

+ color: $color;

+ background-color: transparent;

+ }

+

+ &:not(:disabled):not(.disabled):active,

+ &:not(:disabled):not(.disabled).active,

+ .show > &.dropdown-toggle {

+ color: color-yiq($active-background);

+ background-color: $active-background;

+ border-color: $active-border;

+

+ &:focus {

+ // Avoid using mixin so we can pass custom focus shadow properly

+ @if $enable-shadows and $btn-active-box-shadow != none {

+ box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);

+ } @else {

+ box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);

+ }

+ }

+ }

+}

+

+// Button sizes

+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {

+ padding: $padding-y $padding-x;

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

+ }

+}

+@mixin caret-down {

+ border-top: $caret-width solid;

+ border-right: $caret-width solid transparent;

+ border-bottom: 0;

+ border-left: $caret-width solid transparent;

+}

+

+@mixin caret-up {

+ border-top: 0;

+ border-right: $caret-width solid transparent;

+ border-bottom: $caret-width solid;

+ border-left: $caret-width solid transparent;

+}

+

+@mixin caret-right {

+ border-top: $caret-width solid transparent;

+ border-bottom: $caret-width solid transparent;

+ border-left: $caret-width solid;

+}

+

+@mixin caret-left {

+ border-top: $caret-width solid transparent;

+ border-right: $caret-width solid;

+ border-bottom: $caret-width solid transparent;

+}

+

+@mixin caret($direction: down) {

+ @if $enable-caret {

+ &::after {

+ display: inline-block;

+ width: 0;

+ height: 0;

+ margin-left: $caret-width * .85;

+ vertical-align: $caret-width * .85;

+ content: "";

+ @if $direction == down {

+ @include caret-down;

+ } @else if $direction == up {

+ @include caret-up;

+ } @else if $direction == right {

+ @include caret-right;

+ }

+ }

+

+ @if $direction == left {

+ &::after {

+ display: none;

+ }

+

+ &::before {

+ display: inline-block;

+ width: 0;

+ height: 0;

+ margin-right: $caret-width * .85;

+ vertical-align: $caret-width * .85;

+ content: "";

+ @include caret-left;

+ }

+ }

+

+ &:empty::after {

+ margin-left: 0;

+ }

+ }

+}

+@mixin clearfix() {

+ &::after {

+ display: block;

+ clear: both;

+ content: "";

+ }

+}

+// stylelint-disable declaration-no-important

+

+@mixin float-left {

+ float: left !important;

+}

+@mixin float-right {

+ float: right !important;

+}

+@mixin float-none {

+ float: none !important;

+}

+// Form control focus state

+//

+// Generate a customized focus state and for any input with the specified color,

+// which defaults to the `$input-focus-border-color` variable.

+//

+// We highly encourage you to not customize the default value, but instead use

+// this to tweak colors on an as-needed basis. This aesthetic change is based on

+// WebKit's default styles, but applicable to a wider range of browsers. Its

+// usability and accessibility should be taken into account with any change.

+//

+// Example usage: change the default blue border and shadow to white for better

+// contrast against a dark gray background.

+@mixin form-control-focus() {

+ &:focus {

+ color: $input-focus-color;

+ background-color: $input-focus-bg;

+ border-color: $input-focus-border-color;

+ outline: 0;

+ // Avoid using mixin so we can pass custom focus shadow properly

+ @if $enable-shadows {

+ box-shadow: $input-box-shadow, $input-focus-box-shadow;

+ } @else {

+ box-shadow: $input-focus-box-shadow;

+ }

+ }

+}

+

+

+@mixin form-validation-state($state, $color) {

+ .#{$state}-feedback {

+ display: none;

+ width: 100%;

+ margin-top: $form-feedback-margin-top;

+ font-size: $form-feedback-font-size;

+ color: $color;

+ }

+

+ .#{$state}-tooltip {

+ position: absolute;

+ top: 100%;

+ z-index: 5;

+ display: none;

+ max-width: 100%; // Contain to parent when possible

+ padding: .5rem;

+ margin-top: .1rem;

+ font-size: .875rem;

+ line-height: 1;

+ color: #fff;

+ background-color: rgba($color, .8);

+ border-radius: .2rem;

+ }

+

+ .form-control,

+ .custom-select {

+ .was-validated &:#{$state},

+ &.is-#{$state} {

+ border-color: $color;

+

+ &:focus {

+ border-color: $color;

+ box-shadow: 0 0 0 $input-focus-width rgba($color, .25);

+ }

+

+ ~ .#{$state}-feedback,

+ ~ .#{$state}-tooltip {

+ display: block;

+ }

+ }

+ }

+

+ .form-check-input {

+ .was-validated &:#{$state},

+ &.is-#{$state} {

+ ~ .form-check-label {

+ color: $color;

+ }

+

+ ~ .#{$state}-feedback,

+ ~ .#{$state}-tooltip {

+ display: block;

+ }

+ }

+ }

+

+ .custom-control-input {

+ .was-validated &:#{$state},

+ &.is-#{$state} {

+ ~ .custom-control-label {

+ color: $color;

+

+ &::before {

+ background-color: lighten($color, 25%);

+ }

+ }

+

+ ~ .#{$state}-feedback,

+ ~ .#{$state}-tooltip {

+ display: block;

+ }

+

+ &:checked {

+ ~ .custom-control-label::before {

+ @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);

+ }

+ }

+ }

+ }

+

+ // custom file

+ .custom-file-input {

+ .was-validated &:#{$state},

+ &.is-#{$state} {

+ ~ .custom-file-label {

+ border-color: $color;

+

+ &::before { border-color: inherit; }

+ }

+

+ ~ .#{$state}-feedback,

+ ~ .#{$state}-tooltip {

+ display: block;

+ }

+

+ &:focus {

+ ~ .custom-file-label {

+ box-shadow: 0 0 0 $input-focus-width rgba($color, .25);

+ }

+ }

+ }

+ }

+}

+// Gradients

+

+@mixin gradient-bg($color) {

+ @if $enable-gradients {

+ background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;

+ } @else {

+ background-color: $color;

+ }

+}

+

+// 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%) {

+ background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);

+ background-repeat: repeat-x;

+}

+

+// 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%) {

+ 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) {

+ 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) {

+ 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) {

+ 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) {

+ background-image: radial-gradient(circle, $inner-color, $outer-color);

+ background-repeat: no-repeat;

+}

+@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {

+ background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);

+}

+// Framework grid generation

+//

+// Used only by Bootstrap to generate the correct number of grid classes given

+// any value of `$grid-columns`.

+

+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {

+ // Common properties for all breakpoints

+ %grid-column {

+ position: relative;

+ width: 100%;

+ min-height: 1px; // Prevent columns from collapsing when empty

+ padding-right: ($gutter / 2);

+ padding-left: ($gutter / 2);

+ }

+

+ @each $breakpoint in map-keys($breakpoints) {

+ $infix: breakpoint-infix($breakpoint, $breakpoints);

+

+ // Allow columns to stretch full width below their breakpoints

+ @for $i from 1 through $columns {

+ .col#{$infix}-#{$i} {

+ @extend %grid-column;

+ }

+ }

+ .col#{$infix},

+ .col#{$infix}-auto {

+ @extend %grid-column;

+ }

+

+ @include media-breakpoint-up($breakpoint, $breakpoints) {

+ // Provide basic `.col-{bp}` classes for equal-width flexbox columns

+ .col#{$infix} {

+ flex-basis: 0;

+ flex-grow: 1;

+ max-width: 100%;

+ }

+ .col#{$infix}-auto {

+ flex: 0 0 auto;

+ width: auto;

+ max-width: none; // Reset earlier grid tiers

+ }

+

+ @for $i from 1 through $columns {

+ .col#{$infix}-#{$i} {

+ @include make-col($i, $columns);

+ }

+ }

+

+ .order#{$infix}-first { order: -1; }

+

+ .order#{$infix}-last { order: $columns + 1; }

+

+ @for $i from 0 through $columns {

+ .order#{$infix}-#{$i} { order: $i; }

+ }

+

+ // `$columns - 1` because offsetting by the width of an entire row isn't possible

+ @for $i from 0 through ($columns - 1) {

+ @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0

+ .offset#{$infix}-#{$i} {

+ @include make-col-offset($i, $columns);

+ }

+ }

+ }

+ }

+ }

+}

+/// Grid system

+//

+// Generate semantic grid columns with these mixins.

+

+@mixin make-container() {

+ width: 100%;

+ padding-right: ($grid-gutter-width / 2);

+ padding-left: ($grid-gutter-width / 2);

+ margin-right: auto;

+ margin-left: auto;

+}

+

+

+// For each breakpoint, define the maximum width of the container in a media query

+@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {

+ @each $breakpoint, $container-max-width in $max-widths {

+ @include media-breakpoint-up($breakpoint, $breakpoints) {

+ max-width: $container-max-width;

+ }

+ }

+}

+

+@mixin make-row() {

+ display: flex;

+ flex-wrap: wrap;

+ margin-right: ($grid-gutter-width / -2);

+ margin-left: ($grid-gutter-width / -2);

+}

+

+@mixin make-col-ready() {

+ 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);

+}

+

+@mixin make-col($size, $columns: $grid-columns) {

+ flex: 0 0 percentage($size / $columns);

+ // Add a `max-width` to ensure content within each column does not blow out

+ // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari

+ // do not appear to require this.

+ max-width: percentage($size / $columns);

+}

+

+@mixin make-col-offset($size, $columns: $grid-columns) {

+ $num: $size / $columns;

+ margin-left: if($num == 0, 0, percentage($num));

+}

+// 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

+// 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.

+//

+// Issue: https://github.com/twbs/bootstrap/issues/25195

+

+@mixin hover {

+ &:hover { @content; }

+}

+

+@mixin hover-focus {

+ &:hover,

+ &:focus {

+ @content;

+ }

+}

+

+@mixin plain-hover-focus {

+ &,

+ &:hover,

+ &:focus {

+ @content;

+ }

+}

+

+@mixin hover-focus-active {

+ &:hover,

+ &:focus,

+ &:active {

+ @content;

+ }

+}

+// Image Mixins

+// - Responsive image

+// - Retina image

+

+

+// Responsive image

+//

+// Keep images from scaling beyond the width of their parents.

+

+@mixin img-fluid {

+ // Part 1: Set a maximum relative to the parent

+ max-width: 100%;

+ // Part 2: Override the height to auto, otherwise images will be stretched

+ // when setting a width and height attribute on the img element.

+ height: auto;

+}

+

+

+// Retina image

+//

+// 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);

+

+ // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,

+ // but doesn't convert dppx=>dpi.

+ // 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

+ background-image: url($file-2x);

+ background-size: $width-1x $height-1x;

+ }

+}

+// List Groups

+

+@mixin list-group-item-variant($state, $background, $color) {

+ .list-group-item-#{$state} {

+ color: $color;

+ background-color: $background;

+

+ &.list-group-item-action {

+ @include hover-focus {

+ color: $color;

+ background-color: darken($background, 5%);

+ }

+

+ &.active {

+ color: #fff;

+ background-color: $color;

+ border-color: $color;

+ }

+ }

+ }

+}

+// Lists

+

+// Unstyled keeps list items block level, just removes default browser padding and list-style

+@mixin list-unstyled {

+ padding-left: 0;

+ list-style: none;

+}

+// Horizontal dividers

+//

+// Dividers (basically an hr) within dropdowns and nav lists

+

+@mixin nav-divider($color: #e5e5e5) {

+ height: 0;

+ margin: ($spacer / 2) 0;

+ overflow: hidden;

+ border-top: 1px solid $color;

+}

+// 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);

+// }

+// Pagination

+

+@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {

+ .page-link {

+ padding: $padding-y $padding-x;

+ font-size: $font-size;

+ line-height: $line-height;

+ }

+

+ .page-item {

+ &:first-child {

+ .page-link {

+ @include border-left-radius($border-radius);

+ }

+ }

+ &:last-child {

+ .page-link {

+ @include border-right-radius($border-radius);

+ }

+ }

+ }

+}

+@mixin reset-text {

+ font-family: $font-family-base;

+ // We deliberately do NOT reset font-size or word-wrap.

+ font-style: normal;

+ 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-decoration: none;

+ text-shadow: none;

+ text-transform: none;

+ letter-spacing: normal;

+ word-break: normal;

+ word-spacing: normal;

+ white-space: normal;

+ line-break: auto;

+}

+// Resize anything

+

+@mixin resizable($direction) {

+ overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`

+ resize: $direction; // Options: horizontal, vertical, both

+}

+// Only display content to screen readers

+//

+// See: http://a11yproject.com/posts/how-to-hide-content/

+// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/

+

+@mixin sr-only {

+ position: absolute;

+ width: 1px;

+ height: 1px;

+ padding: 0;

+ overflow: hidden;

+ clip: rect(0, 0, 0, 0);

+ white-space: nowrap;

+ clip-path: inset(50%);

+ border: 0;

+}

+

+// Use in conjunction with .sr-only to only display content when it's focused.

+//

+// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1

+//

+// Credit: HTML5 Boilerplate

+

+@mixin sr-only-focusable {

+ &:active,

+ &:focus {

+ position: static;

+ width: auto;

+ height: auto;

+ overflow: visible;

+ clip: auto;

+ white-space: normal;

+ clip-path: none;

+ }

+}

+// Sizing shortcuts

+

+@mixin size($width, $height: $width) {

+ width: $width;

+ height: $height;

+}

+// Tables

+

+@mixin table-row-variant($state, $background) {

+ // Exact selectors below required to override `.table-striped` and prevent

+ // inheritance to nested tables.

+ .table-#{$state} {

+ &,

+ > th,

+ > td {

+ background-color: $background;

+ }

+ }

+

+ // Hover states for `.table-hover`

+ // Note: this is not available for cells or rows within `thead` or `tfoot`.

+ .table-hover {

+ $hover-background: darken($background, 5%);

+

+ .table-#{$state} {

+ @include hover {

+ background-color: $hover-background;

+

+ > td,

+ > th {

+ background-color: $hover-background;

+ }

+ }

+ }

+ }

+}

+// stylelint-disable declaration-no-important

+

+// Typography

+

+@mixin text-emphasis-variant($parent, $color) {

+ #{$parent} {

+ color: $color !important;

+ }

+ a#{$parent} {

+ @include hover-focus {

+ color: darken($color, 10%) !important;

+ }

+ }

+}

+// CSS image replacement

+@mixin text-hide() {

+ // 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;

+}

+// Text truncate

+// Requires inline-block or block for proper styling

+

+@mixin text-truncate() {

+ overflow: hidden;

+ text-overflow: ellipsis;

+ white-space: nowrap;

+}

+@mixin transition($transition...) {

+ @if $enable-transitions {

+ @if length($transition) == 0 {

+ transition: $transition-base;

+ } @else {

+ transition: $transition;

+ }

+ }

+}

+// stylelint-disable declaration-no-important

+

+// Visibility

+

+@mixin invisible($visibility) {

+ visibility: $visibility !important;

+}