Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Build our own SCSS so we have control over styling
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,173 @@ | ||
| // | ||
| // Base styles | ||
| // | ||
|
|
||
| .accordion { | ||
| // scss-docs-start accordion-css-vars | ||
| --#{$prefix}accordion-color: #{$accordion-color}; | ||
| --#{$prefix}accordion-bg: #{$accordion-bg}; | ||
| --#{$prefix}accordion-transition: #{$accordion-transition}; | ||
| --#{$prefix}accordion-border-color: #{$accordion-border-color}; | ||
| --#{$prefix}accordion-border-width: #{$accordion-border-width}; | ||
| --#{$prefix}accordion-border-radius: #{$accordion-border-radius}; | ||
| --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius}; | ||
| --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x}; | ||
| --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y}; | ||
| --#{$prefix}accordion-btn-color: #{$accordion-button-color}; | ||
| --#{$prefix}accordion-btn-bg: #{$accordion-button-bg}; | ||
| --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)}; | ||
| --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width}; | ||
| --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform}; | ||
| --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition}; | ||
| --#{$prefix}accordion-btn-active-icon: #{escape-svg( | ||
| $accordion-button-active-icon | ||
| )}; | ||
| --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow}; | ||
| --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x}; | ||
| --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y}; | ||
| --#{$prefix}accordion-active-color: #{$accordion-button-active-color}; | ||
| --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg}; | ||
| // scss-docs-end accordion-css-vars | ||
| } | ||
|
|
||
| .accordion-button { | ||
| position: relative; | ||
| display: flex; | ||
| align-items: center; | ||
| width: 100%; | ||
| padding: var(--#{$prefix}accordion-btn-padding-y) | ||
| var(--#{$prefix}accordion-btn-padding-x); | ||
| @include font-size($font-size-base); | ||
| color: var(--#{$prefix}accordion-btn-color); | ||
| text-align: left; // Reset button style | ||
| background-color: var(--#{$prefix}accordion-btn-bg); | ||
| border: 0; | ||
| @include border-radius(0); | ||
| overflow-anchor: none; | ||
| @include transition(var(--#{$prefix}accordion-transition)); | ||
|
|
||
| &:not(.collapsed) { | ||
| color: var(--#{$prefix}accordion-active-color); | ||
| background-color: var(--#{$prefix}accordion-active-bg); | ||
| box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 | ||
| var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list | ||
|
|
||
| &::after { | ||
| background-image: var(--#{$prefix}accordion-btn-active-icon); | ||
| transform: var(--#{$prefix}accordion-btn-icon-transform); | ||
| } | ||
| } | ||
|
|
||
| // Accordion icon | ||
| &::after { | ||
| flex-shrink: 0; | ||
| width: var(--#{$prefix}accordion-btn-icon-width); | ||
| height: var(--#{$prefix}accordion-btn-icon-width); | ||
| margin-left: auto; | ||
| content: ""; | ||
| background-image: var(--#{$prefix}accordion-btn-icon); | ||
| background-repeat: no-repeat; | ||
| background-size: var(--#{$prefix}accordion-btn-icon-width); | ||
| @include transition(var(--#{$prefix}accordion-btn-icon-transition)); | ||
| } | ||
|
|
||
| &:hover { | ||
| z-index: 2; | ||
| } | ||
|
|
||
| &:focus { | ||
| z-index: 3; | ||
| outline: 0; | ||
| box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow); | ||
| } | ||
| } | ||
|
|
||
| .accordion-header { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .accordion-item { | ||
| color: var(--#{$prefix}accordion-color); | ||
| background-color: var(--#{$prefix}accordion-bg); | ||
| border: var(--#{$prefix}accordion-border-width) solid | ||
| var(--#{$prefix}accordion-border-color); | ||
|
|
||
| &:first-of-type { | ||
| @include border-top-radius(var(--#{$prefix}accordion-border-radius)); | ||
|
|
||
| > .accordion-header .accordion-button { | ||
| @include border-top-radius( | ||
| var(--#{$prefix}accordion-inner-border-radius) | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| &:not(:first-of-type) { | ||
| border-top: 0; | ||
| } | ||
|
|
||
| // Only set a border-radius on the last item if the accordion is collapsed | ||
| &:last-of-type { | ||
| @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); | ||
|
|
||
| > .accordion-header .accordion-button { | ||
| &.collapsed { | ||
| @include border-bottom-radius( | ||
| var(--#{$prefix}accordion-inner-border-radius) | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| > .accordion-collapse { | ||
| @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .accordion-body { | ||
| padding: var(--#{$prefix}accordion-body-padding-y) | ||
| var(--#{$prefix}accordion-body-padding-x); | ||
| } | ||
|
|
||
| // Flush accordion items | ||
| // | ||
| // Remove borders and border-radius to keep accordion items edge-to-edge. | ||
|
|
||
| .accordion-flush { | ||
| > .accordion-item { | ||
| border-right: 0; | ||
| border-left: 0; | ||
| @include border-radius(0); | ||
|
|
||
| &:first-child { | ||
| border-top: 0; | ||
| } | ||
| &:last-child { | ||
| border-bottom: 0; | ||
| } | ||
|
|
||
| // stylelint-disable selector-max-class | ||
| > .accordion-header .accordion-button { | ||
| &, | ||
| &.collapsed { | ||
| @include border-radius(0); | ||
| } | ||
| } | ||
| // stylelint-enable selector-max-class | ||
|
|
||
| > .accordion-collapse { | ||
| @include border-radius(0); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @if $enable-dark-mode { | ||
| @include color-mode(dark) { | ||
| .accordion-button::after { | ||
| --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)}; | ||
| --#{$prefix}accordion-btn-active-icon: #{escape-svg( | ||
| $accordion-button-active-icon-dark | ||
| )}; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| // | ||
| // Base styles | ||
| // | ||
|
|
||
| .alert { | ||
| // scss-docs-start alert-css-vars | ||
| --#{$prefix}alert-bg: transparent; | ||
| --#{$prefix}alert-padding-x: #{$alert-padding-x}; | ||
| --#{$prefix}alert-padding-y: #{$alert-padding-y}; | ||
| --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom}; | ||
| --#{$prefix}alert-color: inherit; | ||
| --#{$prefix}alert-border-color: transparent; | ||
| --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); | ||
| --#{$prefix}alert-border-radius: #{$alert-border-radius}; | ||
| --#{$prefix}alert-link-color: inherit; | ||
| // scss-docs-end alert-css-vars | ||
|
|
||
| position: relative; | ||
| padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x); | ||
| margin-bottom: var(--#{$prefix}alert-margin-bottom); | ||
| color: var(--#{$prefix}alert-color); | ||
| background-color: var(--#{$prefix}alert-bg); | ||
| border: var(--#{$prefix}alert-border); | ||
| @include border-radius(var(--#{$prefix}alert-border-radius)); | ||
| } | ||
|
|
||
| // Headings for larger alerts | ||
| .alert-heading { | ||
| // Specified to prevent conflicts of changing $headings-color | ||
| color: inherit; | ||
| } | ||
|
|
||
| // Provide class for links that match alerts | ||
| .alert-link { | ||
| font-weight: $alert-link-font-weight; | ||
| color: var(--#{$prefix}alert-link-color); | ||
| } | ||
|
|
||
| // Dismissible alerts | ||
| // | ||
| // Expand the right padding and account for the close button's positioning. | ||
|
|
||
| .alert-dismissible { | ||
| padding-right: $alert-dismissible-padding-r; | ||
|
|
||
| // Adjust close link position | ||
| .btn-close { | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| z-index: $stretched-link-z-index + 1; | ||
| padding: $alert-padding-y * 1.25 $alert-padding-x; | ||
| } | ||
| } | ||
|
|
||
| // scss-docs-start alert-modifiers | ||
| // Generate contextual modifier classes for colorizing the alert | ||
| @each $state in map-keys($theme-colors) { | ||
| .alert-#{$state} { | ||
| --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis); | ||
| --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); | ||
| --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle); | ||
| --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis); | ||
| } | ||
| } | ||
| // scss-docs-end alert-modifiers |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| // Base class | ||
| // | ||
| // Requires one of the contextual, color modifier classes for `color` and | ||
| // `background-color`. | ||
|
|
||
| .badge { | ||
| // scss-docs-start badge-css-vars | ||
| --#{$prefix}badge-padding-x: #{$badge-padding-x}; | ||
| --#{$prefix}badge-padding-y: #{$badge-padding-y}; | ||
| @include rfs($badge-font-size, --#{$prefix}badge-font-size); | ||
| --#{$prefix}badge-font-weight: #{$badge-font-weight}; | ||
| --#{$prefix}badge-color: #{$badge-color}; | ||
| --#{$prefix}badge-border-radius: #{$badge-border-radius}; | ||
| // scss-docs-end badge-css-vars | ||
|
|
||
| display: inline-block; | ||
| padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x); | ||
| @include font-size(var(--#{$prefix}badge-font-size)); | ||
| font-weight: var(--#{$prefix}badge-font-weight); | ||
| line-height: 1; | ||
| color: var(--#{$prefix}badge-color); | ||
| text-align: center; | ||
| white-space: nowrap; | ||
| vertical-align: baseline; | ||
| @include border-radius(var(--#{$prefix}badge-border-radius)); | ||
| @include gradient-bg(); | ||
|
|
||
| // Empty badges collapse automatically | ||
| &:empty { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| // Quick fix for badges in buttons | ||
| .btn .badge { | ||
| position: relative; | ||
| top: -1px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| .breadcrumb { | ||
| // scss-docs-start breadcrumb-css-vars | ||
| --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; | ||
| --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y}; | ||
| --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; | ||
| @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size); | ||
| --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg}; | ||
| --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius}; | ||
| --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; | ||
| --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x}; | ||
| --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color}; | ||
| // scss-docs-end breadcrumb-css-vars | ||
|
|
||
| display: flex; | ||
| flex-wrap: wrap; | ||
| padding: var(--#{$prefix}breadcrumb-padding-y) | ||
| var(--#{$prefix}breadcrumb-padding-x); | ||
| margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom); | ||
| @include font-size(var(--#{$prefix}breadcrumb-font-size)); | ||
| list-style: none; | ||
| background-color: var(--#{$prefix}breadcrumb-bg); | ||
| @include border-radius(var(--#{$prefix}breadcrumb-border-radius)); | ||
| } | ||
|
|
||
| .breadcrumb-item { | ||
| // The separator between breadcrumbs (by default, a forward-slash: "/") | ||
| + .breadcrumb-item { | ||
| padding-left: var(--#{$prefix}breadcrumb-item-padding-x); | ||
|
|
||
| &::before { | ||
| float: left; // Suppress inline spacings and underlining of the separator | ||
| padding-right: var(--#{$prefix}breadcrumb-item-padding-x); | ||
| color: var(--#{$prefix}breadcrumb-divider-color); | ||
| content: var( | ||
| --#{$prefix}breadcrumb-divider, | ||
| escape-svg($breadcrumb-divider) | ||
| ) | ||
| #{"/* rtl:"} var( | ||
| --#{$prefix}breadcrumb-divider, | ||
| escape-svg($breadcrumb-divider-flipped) | ||
| ) #{"*/"}; | ||
| } | ||
| } | ||
|
|
||
| &.active { | ||
| color: var(--#{$prefix}breadcrumb-item-active-color); | ||
| } | ||
| } |
Oops, something went wrong.