`s.
-@if $enable-nav {
+@if settings-options.$enable-nav {
.nav {
display: flex;
flex-wrap: wrap;
@@ -12,72 +19,72 @@
.nav-link {
display: block;
- padding: $nav-link-padding-y $nav-link-padding-x;
- @include font-size($nav-link-font-size);
- font-weight: $nav-link-font-weight;
- color: $nav-link-color;
- text-decoration: $nav-link-decoration;
+ padding: settings.$nav-link-padding-y settings.$nav-link-padding-x;
+ @include font-size.font-size(settings.$nav-link-font-size);
+ font-weight: settings.$nav-link-font-weight;
+ color: settings.$nav-link-color;
+ text-decoration: settings.$nav-link-decoration;
background: none;
border: 0;
- @include transition($nav-link-transition);
+ @include transition.transition(settings.$nav-link-transition);
- @include hover-focus() {
- color: $nav-link-hover-color;
- text-decoration: $nav-link-hover-decoration;
+ @include hover.hover-focus() {
+ color: settings.$nav-link-hover-color;
+ text-decoration: settings.$nav-link-hover-decoration;
}
// Disabled state lightens text and removes hover/focus effects
// By default it also influences `.nav-tab` and `.nav-pills`
&.disabled,
&:disabled {
- color: $nav-link-disabled-color;
+ color: settings.$nav-link-disabled-color;
text-decoration: none;
pointer-events: none;
cursor: default;
- opacity: $nav-link-disabled-opacity;
+ opacity: settings.$nav-link-disabled-opacity;
}
}
// Tabs
- @if $enable-nav-tabs {
+ @if settings-options.$enable-nav-tabs {
.nav-tabs {
flex-flow: row wrap;
- border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
+ border-bottom: settings.$nav-tabs-border-width solid settings.$nav-tabs-border-color;
.nav-link {
// Make the list-items overlay the bottom border
- margin-bottom: -$nav-tabs-border-width;
- border: $nav-tabs-border-width solid transparent;
- @include border-radius($border-radius $border-radius 0 0);
-
- @include hover-focus() {
- color: $nav-tabs-hover-color;
- background-color: $nav-tabs-hover-bg;
- border-color: $nav-tabs-hover-border-color $nav-tabs-hover-border-color $nav-tabs-border-color;
+ margin-bottom: -(settings.$nav-tabs-border-width);
+ border: settings.$nav-tabs-border-width solid transparent;
+ @include border.border-radius(settings.$border-radius settings.$border-radius 0 0);
+
+ @include hover.hover-focus() {
+ color: settings.$nav-tabs-hover-color;
+ background-color: settings.$nav-tabs-hover-bg;
+ border-color: settings.$nav-tabs-hover-border-color settings.$nav-tabs-hover-border-color settings.$nav-tabs-border-color;
}
&.disabled,
&:disabled {
- color: $nav-link-disabled-color;
+ color: settings.$nav-link-disabled-color;
background-color: transparent;
border-color: transparent;
}
&.active,
&.open {
- color: $nav-tabs-active-color;
- background-color: $nav-tabs-active-bg;
- border-color: $nav-tabs-active-border-color $nav-tabs-active-border-color $nav-tabs-active-bg;
+ color: settings.$nav-tabs-active-color;
+ background-color: settings.$nav-tabs-active-bg;
+ border-color: settings.$nav-tabs-active-border-color settings.$nav-tabs-active-border-color settings.$nav-tabs-active-bg;
}
}
- @if $enable-dropdown {
+ @if settings-options.$enable-dropdown {
.dropdown-menu {
// Make dropdown border overlap tab border
- margin-top: -$nav-tabs-border-width;
+ margin-top: -(settings.$nav-tabs-border-width);
// Remove the top rounded corners here since there is a hard edge above the menu
- @include border-top-radius(0);
+ @include border.border-top-radius(0);
}
}
}
@@ -85,29 +92,29 @@
// Pills
- @if $enable-nav-pills {
+ @if settings-options.$enable-nav-pills {
.nav-pills {
flex-flow: row wrap;
.nav-link {
- @include border-radius($nav-pills-border-radius);
+ @include border.border-radius(settings.$nav-pills-border-radius);
- @include hover-focus() {
- color: $nav-pills-hover-color;
- background-color: $nav-pills-hover-bg;
+ @include hover.hover-focus() {
+ color: settings.$nav-pills-hover-color;
+ background-color: settings.$nav-pills-hover-bg;
}
&.disabled,
&:disabled {
- color: $nav-link-disabled-color;
+ color: settings.$nav-link-disabled-color;
background-color: transparent;
border-color: transparent;
}
&.active,
&.open {
- color: $nav-pills-active-color;
- background-color: $nav-pills-active-bg;
+ color: settings.$nav-pills-active-color;
+ background-color: settings.$nav-pills-active-bg;
}
}
}
@@ -115,14 +122,14 @@
// Vertical navigation
- @if $enable-nav-vertical {
+ @if settings-options.$enable-nav-vertical {
.nav-vertical {
flex-direction: column;
}
}
// Justified variants
- @if $enable-nav-fill {
+ @if settings-options.$enable-nav-fill {
.nav-fill {
> .nav-link,
.nav-item {
@@ -132,7 +139,7 @@
}
}
- @if $enable-nav-justify {
+ @if settings-options.$enable-nav-justify {
.nav-justify {
> .nav-link,
.nav-item {
@@ -149,13 +156,13 @@
width: 100%;
}
}
- @if $enable-nav-fill {
+ @if settings-options.$enable-nav-fill {
.nav-fill {
@extend %nav-fill-justify-link-grow;
}
}
- @if $enable-nav-justify {
+ @if settings-options.$enable-nav-justify {
.nav-justify {
@extend %nav-fill-justify-link-grow;
@@ -165,7 +172,7 @@
// Tab content panes
// Hide tabbable panes to start, show them when `.active`
-@if $enable-tab-content {
+@if settings-options.$enable-tab-content {
.tab-content {
> .tab-pane {
display: none;
diff --git a/scss/component/_navbar.scss b/scss/component/_navbar.scss
index 81d04221d..321b137bb 100644
--- a/scss/component/_navbar.scss
+++ b/scss/component/_navbar.scss
@@ -1,17 +1,26 @@
+@use "../mixins/border";
+@use "../mixins/box-shadow";
+@use "../mixins/breakpoints";
+@use "../mixins/font-size";
+@use "../mixins/hover";
+@use "../mixins/transition";
+@use "../settings";
+@use "../settings-options";
+
// Navbar
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
-@if $enable-navbar {
+@if settings-options.$enable-navbar {
.navbar {
position: relative;
display: flex;
flex-wrap: wrap; // allow us to do the line break for collapsing content
align-items: center;
- padding: $navbar-padding-y $navbar-padding-x;
+ padding: settings.$navbar-padding-y settings.$navbar-padding-x;
// Because flex properties aren't inherited, we need to redeclare these first
// few properities so that content nested within behave properly.
- @if $enable-grid-classes {
+ @if settings-options.$enable-grid-classes {
> .container,
> .container-fluid {
display: flex;
@@ -20,7 +29,7 @@
}
}
- @if $enable-navbar-nav and $enable-dropdown {
+ @if settings-options.$enable-navbar-nav and settings-options.$enable-dropdown {
&:not([class*="navbar-expand"]) {
.navbar-nav {
.dropdown-menu {
@@ -34,19 +43,19 @@
// Navbar Brand
// Used for brand, project, or site name.
- @if $enable-navbar-brand {
+ @if settings-options.$enable-navbar-brand {
.navbar-brand {
display: inline-block;
- padding-top: $navbar-brand-padding-y;
- padding-bottom: $navbar-brand-padding-y;
- margin-right: $navbar-brand-margin-x;
- @include font-size($navbar-brand-font-size);
- font-weight: $navbar-brand-font-weight;
- text-decoration: if($link-decoration == none, null, none);
+ padding-top: settings.$navbar-brand-padding-y;
+ padding-bottom: settings.$navbar-brand-padding-y;
+ margin-right: settings.$navbar-brand-margin-x;
+ @include font-size.font-size(settings.$navbar-brand-font-size);
+ font-weight: settings.$navbar-brand-font-weight;
+ text-decoration: if(settings.$link-decoration == none, null, none);
white-space: nowrap;
- @include hover-focus() {
- text-decoration: if($link-hover-decoration == underline, none, null);
+ @include hover.hover-focus() {
+ text-decoration: if(settings.$link-hover-decoration == underline, none, null);
}
> img {
@@ -57,7 +66,7 @@
// Navbar Nav
// Navbar navigation based the base `.nav` styles.
- @if $enable-navbar-nav {
+ @if settings-options.$enable-navbar-nav {
.navbar-nav {
display: flex;
flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
@@ -68,30 +77,30 @@
.nav-link {
padding-right: 0;
padding-left: 0;
- text-decoration: if($link-decoration == none, null, none);
+ text-decoration: if(settings.$link-decoration == none, null, none);
- @include hover-focus() {
- text-decoration: if($link-hover-decoration == underline, none, null);
+ @include hover.hover-focus() {
+ text-decoration: if(settings.$link-hover-decoration == underline, none, null);
}
}
}
}
//Navbar Text
- @if $enable-navbar-text {
+ @if settings-options.$enable-navbar-text {
.navbar-text {
- padding-top: $navbar-item-padding-y;
- padding-bottom: $navbar-item-padding-y;
+ padding-top: settings.$navbar-item-padding-y;
+ padding-bottom: settings.$navbar-item-padding-y;
}
}
// Navbar Divider
- @if $enable-navbar-divider {
+ @if settings-options.$enable-navbar-divider {
.navbar-divider {
align-self: stretch;
- margin: $navbar-divider-margin-x $navbar-divider-margin-y;
+ margin: settings.$navbar-divider-margin-x settings.$navbar-divider-margin-y;
overflow: hidden;
- border-left: $navbar-divider-width solid $navbar-divider-color;
+ border-left: settings.$navbar-divider-width solid settings.$navbar-divider-color;
}
}
@@ -103,7 +112,7 @@
// When collapsed, prevent the toggleable navbar contents from appearing in
// the default flexbox row orienation. Requires the use of `flex-wrap: wrap`
// on the `.navbar` parent.
- @if $enable-navbar-collapse {
+ @if settings-options.$enable-navbar-collapse {
.navbar-collapse {
flex: 1 0 100%;
// Align content vertically in all instances. Use flexbox utils to override.
@@ -113,25 +122,25 @@
// Navbar Toggle
// Custom button for toggling the `.navbar-collapse`, powered by the collapse plugin.
- @if $enable-navbar-toggle {
+ @if settings-options.$enable-navbar-toggle {
.navbar-toggle {
- padding: $navbar-toggle-padding-y $navbar-toggle-padding-x;
- @include font-size($navbar-toggle-font-size);
+ padding: settings.$navbar-toggle-padding-y settings.$navbar-toggle-padding-x;
+ @include font-size.font-size(settings.$navbar-toggle-font-size);
line-height: 1;
- text-decoration: if($link-decoration == none, null, none);
+ text-decoration: if(settings.$link-decoration == none, null, none);
background-color: transparent; // Remove default button style
- border: $border-width solid transparent; // Remove default button style
- @include border-radius($navbar-toggle-border-radius);
- @include transition($navbar-toggle-transition);
+ border: settings.$border-width solid transparent; // Remove default button style
+ @include border.border-radius(settings.$navbar-toggle-border-radius);
+ @include transition.transition(settings.$navbar-toggle-transition);
&:hover {
- text-decoration: if($link-hover-decoration == underline, none, null);
+ text-decoration: if(settings.$link-hover-decoration == underline, none, null);
}
&:focus {
- text-decoration: if($link-hover-decoration == underline, none, null);
+ text-decoration: if(settings.$link-hover-decoration == underline, none, null);
outline: 0;
- box-shadow: $navbar-toggle-focus-box-shadow;
+ box-shadow: settings.$navbar-toggle-focus-box-shadow;
}
}
}
@@ -139,15 +148,15 @@
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
- @each $bp in $navbar-expand-breakpoints {
- $bprule: breakpoint-designator($bp);
- $prev: breakpoint-prev($bp, $grid-breakpoints);
+ @each $bp in settings.$navbar-expand-breakpoints {
+ $bprule: breakpoints.breakpoint-designator($bp);
+ $prev: breakpoints.breakpoint-prev($bp, settings.$grid-breakpoints);
&#{$bprule} {
// Skip smallest breakpoint
- @if breakpoint-min($bp, $grid-breakpoints) != null {
- @include media-breakpoint-down($prev) {
- @if $enable-navbar-nav and $enable-dropdown {
+ @if breakpoints.breakpoint-min($bp, settings.$grid-breakpoints) != null {
+ @include breakpoints.media-breakpoint-down($prev) {
+ @if settings-options.$enable-navbar-nav and settings-options.$enable-dropdown {
.navbar-nav {
.dropdown-menu {
position: static;
@@ -156,52 +165,52 @@
}
}
- @if $enable-navbar-divider {
+ @if settings-options.$enable-navbar-divider {
.navbar-divider {
- margin: $navbar-divider-margin-x 0;
- border-top: $navbar-divider-width solid $navbar-divider-color;
+ margin: settings.$navbar-divider-margin-x 0;
+ border-top: settings.$navbar-divider-width solid settings.$navbar-divider-color;
border-left: 0;
}
}
}
}
- @include media-breakpoint-up($bp) {
+ @include breakpoints.media-breakpoint-up($bp) {
flex-wrap: nowrap;
justify-content: flex-start;
- @if $enable-navbar-nav {
+ @if settings-options.$enable-navbar-nav {
.navbar-nav {
flex-direction: row;
align-items: center;
- @if $enable-dropdown {
+ @if settings-options.$enable-dropdown {
.dropdown-menu {
position: absolute;
}
}
.nav-link {
- padding-right: $navbar-item-padding-x;
- padding-left: $navbar-item-padding-x;
+ padding-right: settings.$navbar-item-padding-x;
+ padding-left: settings.$navbar-item-padding-x;
}
}
}
- @if $enable-navbar-collapse {
+ @if settings-options.$enable-navbar-collapse {
.navbar-collapse {
display: flex !important; // stylelint-disable-line declaration-no-important
flex-basis: auto;
}
}
- @if $enable-navbar-toggle {
+ @if settings-options.$enable-navbar-toggle {
.navbar-toggle {
display: none;
}
}
- @if $enable-navbar-offcanvas and $enable-offcanvas {
+ @if settings-options.$enable-navbar-offcanvas and settings-options.$enable-offcanvas {
.offcanvas {
// stylelint-disable declaration-no-important
position: static;
@@ -213,18 +222,18 @@
background-color: transparent !important;
border: 0 !important;
transform: none !important;
- @include box-shadow(none);
- @include transition(none);
+ @include box-shadow.box-shadow(none);
+ @include transition.transition(none);
// stylelint-enable declaration-no-important
}
- @if $enable-offcanvas-header {
+ @if settings-options.$enable-offcanvas-header {
.offcanvas-header {
display: none;
}
}
- @if $enable-offcanvas-body {
+ @if settings-options.$enable-offcanvas-body {
.offcanvas-body {
display: flex;
flex-grow: 0;
@@ -240,134 +249,134 @@
// Navbar Themes
// Dark links against a light background
- @if $enable-navbar-light {
+ @if settings-options.$enable-navbar-light {
.navbar-light {
.navbar-brand {
- color: $navbar-light-brand-color;
+ color: settings.$navbar-light-brand-color;
- @include hover-focus() {
- color: $navbar-light-brand-hover-color;
+ @include hover.hover-focus() {
+ color: settings.$navbar-light-brand-hover-color;
}
}
- @if $enable-navbar-nav {
+ @if settings-options.$enable-navbar-nav {
.navbar-nav {
.nav-link {
- color: $navbar-light-color;
+ color: settings.$navbar-light-color;
- @include hover-focus() {
- color: $navbar-light-hover-color;
+ @include hover.hover-focus() {
+ color: settings.$navbar-light-hover-color;
}
&.disabled {
- color: $navbar-light-disabled-color;
+ color: settings.$navbar-light-disabled-color;
background-color: transparent;
border-color: transparent;
}
&.open,
&.active {
- color: $navbar-light-active-color;
+ color: settings.$navbar-light-active-color;
}
}
}
}
- @if $enable-navbar-toggle {
+ @if settings-options.$enable-navbar-toggle {
.navbar-toggle {
- color: $navbar-light-color;
- border-color: $navbar-light-toggle-border;
+ color: settings.$navbar-light-color;
+ border-color: settings.$navbar-light-toggle-border;
- @include hover-focus() {
- color: $navbar-light-active-color;
+ @include hover.hover-focus() {
+ color: settings.$navbar-light-active-color;
}
}
}
- @if $enable-navbar-text {
+ @if settings-options.$enable-navbar-text {
.navbar-text {
- color: $navbar-light-color;
+ color: settings.$navbar-light-color;
a {
- color: $navbar-light-hover-color;
+ color: settings.$navbar-light-hover-color;
- @include hover-focus() {
- color: $navbar-light-active-color;
+ @include hover.hover-focus() {
+ color: settings.$navbar-light-active-color;
}
}
}
}
- @if $enable-navbar-divider {
+ @if settings-options.$enable-navbar-divider {
.navbar-divider {
- border-color: $navbar-light-divider-color;
+ border-color: settings.$navbar-light-divider-color;
}
}
}
}
// White links against a dark background
- @if $enable-navbar-dark {
+ @if settings-options.$enable-navbar-dark {
.navbar-dark {
.navbar-brand {
- color: $navbar-dark-brand-color;
+ color: settings.$navbar-dark-brand-color;
- @include hover-focus() {
- color: $navbar-dark-brand-hover-color;
+ @include hover.hover-focus() {
+ color: settings.$navbar-dark-brand-hover-color;
}
}
- @if $enable-navbar-nav {
+ @if settings-options.$enable-navbar-nav {
.navbar-nav {
.nav-link {
- color: $navbar-dark-color;
+ color: settings.$navbar-dark-color;
- @include hover-focus() {
- color: $navbar-dark-hover-color;
+ @include hover.hover-focus() {
+ color: settings.$navbar-dark-hover-color;
}
&.disabled {
- color: $navbar-dark-disabled-color;
+ color: settings.$navbar-dark-disabled-color;
background-color: transparent;
border-color: transparent;
}
&.open,
&.active {
- color: $navbar-dark-active-color;
+ color: settings.$navbar-dark-active-color;
}
}
}
}
- @if $enable-navbar-toggle {
+ @if settings-options.$enable-navbar-toggle {
.navbar-toggle {
- color: $navbar-dark-color;
- border-color: $navbar-dark-toggle-border;
+ color: settings.$navbar-dark-color;
+ border-color: settings.$navbar-dark-toggle-border;
- @include hover-focus() {
- color: $navbar-dark-active-color;
+ @include hover.hover-focus() {
+ color: settings.$navbar-dark-active-color;
}
}
}
- @if $enable-navbar-text {
+ @if settings-options.$enable-navbar-text {
.navbar-text {
- color: $navbar-dark-color;
+ color: settings.$navbar-dark-color;
a {
- color: $navbar-dark-hover-color;
+ color: settings.$navbar-dark-hover-color;
- @include hover-focus() {
- color: $navbar-dark-active-color;
+ @include hover.hover-focus() {
+ color: settings.$navbar-dark-active-color;
}
}
}
}
- @if $enable-navbar-divider {
+ @if settings-options.$enable-navbar-divider {
.navbar-divider {
- border-color: $navbar-dark-divider-color;
+ border-color: settings.$navbar-dark-divider-color;
}
}
}
diff --git a/scss/component/_offcanvas.scss b/scss/component/_offcanvas.scss
index b9f6efae3..250353737 100644
--- a/scss/component/_offcanvas.scss
+++ b/scss/component/_offcanvas.scss
@@ -1,63 +1,70 @@
-@if $enable-offcanvas {
+@use "../mixins/backdrop";
+@use "../mixins/box-shadow";
+@use "../mixins/breakpoints";
+@use "../mixins/transition";
+@use "../settings";
+@use "../settings-options";
- @each $bp in $offcanvas-breakpoints {
- $next: breakpoint-next($bp, $grid-breakpoints);
- $bprule: breakpoint-designator($next);
+@if settings-options.$enable-offcanvas {
- @include media-breakpoint-down($bp) {
+ @each $bp in settings.$offcanvas-breakpoints {
+ $next: breakpoints.breakpoint-next($bp, settings.$grid-breakpoints);
+ $bprule: breakpoints.breakpoint-designator($next);
+
+ @include breakpoints.media-breakpoint-down($bp) {
%offcanvas#{$bp} {
position: fixed;
bottom: 0;
- z-index: $zindex-offcanvas;
+ z-index: settings.$zindex-offcanvas;
display: flex;
flex-direction: column;
max-width: 100%;
- color: $offcanvas-color;
+ color: settings.$offcanvas-color;
visibility: hidden;
- background-color: $offcanvas-bg;
+ background-color: settings.$offcanvas-bg;
background-clip: padding-box;
outline: 0;
- @include box-shadow($offcanvas-box-shadow);
+ @include box-shadow.box-shadow(settings.$offcanvas-box-shadow);
- @if $enable-offcanvas-side-start {
+ @if settings-options.$enable-offcanvas-side-start {
&.offcanvas-start {
top: 0;
left: 0;
- width: $offcanvas-horizontal-width;
- border-right: $offcanvas-border-width solid $offcanvas-border-color;
+ width: settings.$offcanvas-horizontal-width;
+ border-right: settings.$offcanvas-border-width solid settings.$offcanvas-border-color;
transform: translateX(-100%);
}
}
- @if $enable-offcanvas-side-end {
+ @if settings-options.$enable-offcanvas-side-end {
&.offcanvas-end {
top: 0;
right: 0;
- width: $offcanvas-horizontal-width;
- border-left: $offcanvas-border-width solid $offcanvas-border-color;
+ width: settings.$offcanvas-horizontal-width;
+ border-left: settings.$offcanvas-border-width solid settings.$offcanvas-border-color;
transform: translateX(100%);
}
}
- @if $enable-offcanvas-side-top {
+ @if settings-options.$enable-offcanvas-side-top {
&.offcanvas-top {
top: 0;
right: 0;
left: 0;
- height: $offcanvas-vertical-height;
+ height: settings.$offcanvas-vertical-height;
max-height: 100%;
- border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
+ border-bottom: settings.$offcanvas-border-width solid settings.$offcanvas-border-color;
transform: translateY(-100%);
}
}
- @if $enable-offcanvas-side-bottom {
+ @if settings-options.$enable-offcanvas-side-bottom {
&.offcanvas-bottom {
right: 0;
left: 0;
- height: $offcanvas-vertical-height;
+ height: settings.$offcanvas-vertical-height;
max-height: 100%;
- border-top: $offcanvas-border-width solid $offcanvas-border-color;
+ border-top: settings.$offcanvas-border-width solid settings.$offcanvas-border-color;
transform: translateY(100%);
}
}
@@ -70,7 +77,7 @@
&.showing,
&.in.hiding {
- @include transition($offcanvas-transition);
+ @include transition.transition(settings.$offcanvas-transition);
}
&.showing,
@@ -86,8 +93,8 @@
}
// Skip largest breakpoint
- @if breakpoint-max($bp, $grid-breakpoints) != null {
- @if $enable-offcanvas-responsive {
+ @if breakpoints.breakpoint-max($bp, settings.$grid-breakpoints) != null {
+ @if settings-options.$enable-offcanvas-responsive {
.offcanvas#{$bprule} {
@extend %offcanvas#{$bp};
}
@@ -100,8 +107,8 @@
}
@if not ($next == null) {
- @if $enable-offcanvas-responsive {
- @include media-breakpoint-up($next) {
+ @if settings-options.$enable-offcanvas-responsive {
+ @include breakpoints.media-breakpoint-up($next) {
.offcanvas#{$bprule} {
height: auto;
background-color: transparent !important; // stylelint-disable-line declaration-no-important
@@ -126,7 +133,7 @@
}
.offcanvas-backdrop {
- @include backdrop-overlay($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+ @include backdrop.backdrop-overlay(settings.$zindex-offcanvas-backdrop, settings.$offcanvas-backdrop-bg, settings.$offcanvas-backdrop-opacity);
// Offcanvas rootElement specified
.offcanvas-open:not(body) & {
@@ -137,51 +144,51 @@
}
- @if $enable-offcanvas-header {
+ @if settings-options.$enable-offcanvas-header {
.offcanvas-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
- padding: $offcanvas-header-padding-y $offcanvas-header-padding-x;
- color: $offcanvas-header-color;
- background-color: $offcanvas-header-bg;
- border-bottom: $offcanvas-header-border-width solid $offcanvas-header-border-color;
+ padding: settings.$offcanvas-header-padding-y settings.$offcanvas-header-padding-x;
+ color: settings.$offcanvas-header-color;
+ background-color: settings.$offcanvas-header-bg;
+ border-bottom: settings.$offcanvas-header-border-width solid settings.$offcanvas-header-border-color;
// Close icon
.close {
// Make sure close appears 'after' the title
order: 1;
- padding: $offcanvas-close-padding-y $offcanvas-close-padding-x;
+ padding: settings.$offcanvas-close-padding-y settings.$offcanvas-close-padding-x;
// Left auto margin keeps close pushed to the right side even when no title
- margin: (-$offcanvas-header-padding-y) (-$offcanvas-header-padding-x) (-$offcanvas-header-padding-y) auto;
+ margin: (-(settings.$offcanvas-header-padding-y)) (-(settings.$offcanvas-header-padding-x)) (-(settings.$offcanvas-header-padding-y)) auto;
}
}
}
- @if $enable-offcanvas-title {
+ @if settings-options.$enable-offcanvas-title {
.offcanvas-title {
margin: 0;
- line-height: $offcanvas-title-line-height;
+ line-height: settings.$offcanvas-title-line-height;
}
}
- @if $enable-offcanvas-body {
+ @if settings-options.$enable-offcanvas-body {
.offcanvas-body {
flex-grow: 1;
- padding: $offcanvas-body-padding-y $offcanvas-body-padding-x;
+ padding: settings.$offcanvas-body-padding-y settings.$offcanvas-body-padding-x;
overflow-y: auto;
}
}
- @if $enable-offcanvas-footer {
+ @if settings-options.$enable-offcanvas-footer {
.offcanvas-footer {
display: flex;
align-items: center;
justify-content: flex-end; // right align buttons
- padding: $offcanvas-footer-padding-y $offcanvas-footer-padding-x;
- color: $offcanvas-footer-color;
- background-color: $offcanvas-footer-bg;
- border-top: $offcanvas-footer-border-width solid $offcanvas-footer-border-color;
+ padding: settings.$offcanvas-footer-padding-y settings.$offcanvas-footer-padding-x;
+ color: settings.$offcanvas-footer-color;
+ background-color: settings.$offcanvas-footer-bg;
+ border-top: settings.$offcanvas-footer-border-width solid settings.$offcanvas-footer-border-color;
// Simulate spaces between footer elements with margins
> :not(:first-child) { margin-left: .25rem; }
@@ -191,7 +198,7 @@
// Close is blocked animation
.offcanvas.offcanvas-blocked.in {
- @include transition($offcanvas-blocked-transition);
- transform: $offcanvas-blocked-transform;
+ @include transition.transition(settings.$offcanvas-blocked-transition);
+ transform: settings.$offcanvas-blocked-transform;
}
}
diff --git a/scss/component/_pagination.scss b/scss/component/_pagination.scss
index 29b464502..2f09eed83 100644
--- a/scss/component/_pagination.scss
+++ b/scss/component/_pagination.scss
@@ -1,8 +1,15 @@
-@if $enable-pagination {
+@use "sass:map";
+@use "../mixins/border";
+@use "../mixins/font-size";
+@use "../mixins/pagination";
+@use "../settings";
+@use "../settings-options";
+
+@if settings-options.$enable-pagination {
.pagination {
display: flex;
padding-left: 0;
- margin-bottom: $pagination-margin-bottom;
+ margin-bottom: settings.$pagination-margin-bottom;
list-style: none;
}
@@ -16,80 +23,80 @@
align-items: center;
justify-content: center;
min-width: 2.25em;
- padding: $pagination-padding-y $pagination-padding-x;
- @include font-size($pagination-font-size);
- font-weight: $pagination-font-weight;
- line-height: $pagination-line-height;
- border: 0 solid $pagination-border-color;
- @include border-radius($pagination-border-radius);
+ padding: settings.$pagination-padding-y settings.$pagination-padding-x;
+ @include font-size.font-size(settings.$pagination-font-size);
+ font-weight: settings.$pagination-font-weight;
+ line-height: settings.$pagination-line-height;
+ border: 0 solid settings.$pagination-border-color;
+ @include border.border-radius(settings.$pagination-border-radius);
}
.page-link {
position: relative;
- color: $pagination-color;
- text-decoration: if($link-decoration == none, null, none);
- background-color: $pagination-bg;
+ color: settings.$pagination-color;
+ text-decoration: if(settings.$link-decoration == none, null, none);
+ background-color: settings.$pagination-bg;
&:hover,
&:focus {
z-index: 2;
- color: $pagination-hover-color;
- text-decoration: if($link-hover-decoration == underline, none, null);
- background-color: $pagination-hover-bg;
- border-color: $pagination-hover-border-color;
+ color: settings.$pagination-hover-color;
+ text-decoration: if(settings.$link-hover-decoration == underline, none, null);
+ background-color: settings.$pagination-hover-bg;
+ border-color: settings.$pagination-hover-border-color;
}
&.active,
.active > & {
z-index: 1;
- color: $pagination-active-color;
- background-color: $pagination-active-bg;
- border-color: $pagination-active-border-color;
+ color: settings.$pagination-active-color;
+ background-color: settings.$pagination-active-bg;
+ border-color: settings.$pagination-active-border-color;
}
&.disabled,
.disabled > & {
- color: $pagination-disabled-color;
+ color: settings.$pagination-disabled-color;
pointer-events: none;
- background-color: $pagination-disabled-bg;
+ background-color: settings.$pagination-disabled-bg;
}
}
// Sizing
- @if $enable-sizing and $enable-pagination-sizing {
- @each $size, $dims in $pagination-sizes {
- $sz-font-size: map-get($dims, "font-size");
- $sz-line-height: map-get($dims, "line-height");
- $sz-padding-y: map-get($dims, "padding-y");
+ @if settings-options.$enable-sizing and settings-options.$enable-pagination-sizing {
+ @each $size, $dims in settings.$pagination-sizes {
+ $sz-font-size: map.get($dims, "font-size");
+ $sz-line-height: map.get($dims, "line-height");
+ $sz-padding-y: map.get($dims, "padding-y");
//$sz-padding-x: map-get($dims, "padding-x");
- $sz-padding-x: $pagination-padding-x;
- $sz-border-radius: map-get($dims, "border-radius");
+ $sz-padding-x: settings.$pagination-padding-x;
+ $sz-border-radius: map.get($dims, "border-radius");
.pagination-#{$size} {
- @include pagination-size($sz-padding-y, $sz-padding-x, $sz-font-size, $sz-line-height, $sz-border-radius);
+ @include pagination.pagination-size($sz-padding-y, $sz-padding-x, $sz-font-size, $sz-line-height, $sz-border-radius);
}
}
}
- @if $enable-pagination-spaced {
+ @if settings-options.$enable-pagination-spaced {
.pagination-spaced {
.page-link {
- border-width: $pagination-border-width;
+ border-width: settings.$pagination-border-width;
}
.page-item {
&:not(:last-child) {
- margin-right: $pagination-spaced-margin-end;
+ margin-right: settings.$pagination-spaced-margin-end;
}
}
}
}
- @if $enable-pagination-group {
+ @if settings-options.$enable-pagination-group {
.pagination-group {
.page-text,
.page-link {
- border-width: $pagination-border-width;
+ border-width: settings.$pagination-border-width;
}
.page-item {
@@ -98,14 +105,14 @@
&:not(:first-child) {
.page-text,
.page-link {
- margin-left: -$pagination-border-width;
- @include border-start-radius(0);
+ margin-left: -(settings.$pagination-border-width);
+ @include border.border-start-radius(0);
}
}
&:not(:last-child) {
.page-text,
.page-link {
- @include border-end-radius(0);
+ @include border.border-end-radius(0);
}
}
}
diff --git a/scss/component/_placeholder.scss b/scss/component/_placeholder.scss
index 8639797df..fda75d1b8 100644
--- a/scss/component/_placeholder.scss
+++ b/scss/component/_placeholder.scss
@@ -1,11 +1,14 @@
-@if $enable-placeholder {
+@use "../settings";
+@use "../settings-options";
+
+@if settings-options.$enable-placeholder {
.placeholder {
display: inline-block;
min-height: 1em;
vertical-align: middle;
cursor: wait;
background-color: currentcolor;
- opacity: $placeholder-opacity-max;
+ opacity: settings.$placeholder-opacity-max;
&.btn::before {
display: inline-block;
@@ -14,8 +17,8 @@
}
// Sizes
- @if $enable-placeholder-sizes {
- @each $name, $value in $placeholder-sizes {
+ @if settings-options.$enable-placeholder-sizes {
+ @each $name, $value in settings.$placeholder-sizes {
.placeholder-#{$name} {
min-height: $value;
}
@@ -23,7 +26,7 @@
}
// Animations
- @if $enable-placeholder-glow {
+ @if settings-options.$enable-placeholder-glow {
.placeholder-glow {
.placeholder {
animation: placeholder-glow 2s ease-in-out infinite;
@@ -31,14 +34,14 @@
}
@keyframes placeholder-glow {
50% {
- opacity: $placeholder-opacity-min;
+ opacity: settings.$placeholder-opacity-min;
}
}
}
- @if $enable-placeholder-wave {
+ @if settings-options.$enable-placeholder-wave {
.placeholder-wave {
- mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
+ mask-image: linear-gradient(130deg, settings.$black 55%, rgba(0, 0, 0, (1 - settings.$placeholder-opacity-min)) 75%, settings.$black 95%);
mask-size: 200% 100%;
animation: placeholder-wave 2s linear infinite;
}
diff --git a/scss/component/_popover.scss b/scss/component/_popover.scss
index 5a4999a25..76bc258c2 100644
--- a/scss/component/_popover.scss
+++ b/scss/component/_popover.scss
@@ -1,21 +1,29 @@
-@if $enable-popover {
+@use "../functions/math";
+@use "../mixins/border";
+@use "../mixins/box-shadow";
+@use "../mixins/font-size";
+@use "../mixins/reset-text";
+@use "../settings";
+@use "../settings-options";
+
+@if settings-options.$enable-popover {
.popover {
position: absolute;
- z-index: $zindex-popover;
+ z-index: settings.$zindex-popover;
display: none;
- max-width: $popover-max-width;
- margin: $popover-margin;
+ max-width: settings.$popover-max-width;
+ margin: settings.$popover-margin;
// Our parent element can be arbitrary since popovers 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();
- @include font-size($popover-font-size);
+ @include reset-text.reset-text();
+ @include font-size.font-size(settings.$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;
+ background-color: settings.$popover-bg;
background-clip: padding-box;
- border: $popover-border-width solid $popover-border-color;
- @include border-radius($popover-border-radius);
- @include box-shadow($popover-box-shadow);
+ border: settings.$popover-border-width solid settings.$popover-border-color;
+ @include border.border-radius(settings.$popover-border-radius);
+ @include box-shadow.box-shadow(settings.$popover-box-shadow);
outline: 0;
// Showing
@@ -26,13 +34,13 @@
// Arrows
// .popover-arrow is outer, .popover-arrow::after is inner
- @if $enable-popover-arrow {
+ @if settings-options.$enable-popover-arrow {
.popover-arrow {
position: absolute;
display: block;
- width: $popover-arrow-width;
- height: $popover-arrow-height;
- margin: 0 $popover-border-radius;
+ width: settings.$popover-arrow-width;
+ height: settings.$popover-arrow-height;
+ margin: 0 settings.$popover-border-radius;
&::before,
&::after {
@@ -48,87 +56,87 @@
/* rtl:begin:ignore */
.cfw-popover-top {
- margin-bottom: add($popover-arrow-height, $popover-margin);
+ margin-bottom: math.add(settings.$popover-arrow-height, settings.$popover-margin);
> .popover-arrow {
- bottom: subtract(-$popover-arrow-height, $popover-border-width);
+ bottom: math.subtract(-(settings.$popover-arrow-height), settings.$popover-border-width);
&::before {
bottom: 0;
- border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
- border-top-color: $popover-arrow-outer-color;
+ border-width: settings.$popover-arrow-height (settings.$popover-arrow-width * .5) 0;
+ border-top-color: settings.$popover-arrow-outer-color;
}
&::after {
- bottom: $popover-border-width;
- border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
- border-top-color: $popover-arrow-color;
+ bottom: settings.$popover-border-width;
+ border-width: settings.$popover-arrow-height (settings.$popover-arrow-width * .5) 0;
+ border-top-color: settings.$popover-arrow-color;
}
}
}
.cfw-popover-right {
- margin-left: add($popover-arrow-height, $popover-margin);
+ margin-left: math.add(settings.$popover-arrow-height, settings.$popover-margin);
> .popover-arrow {
- left: subtract(-$popover-arrow-height, $popover-border-width);
- width: $popover-arrow-height;
- height: $popover-arrow-width;
- margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
+ left: math.subtract(-(settings.$popover-arrow-height), settings.$popover-border-width);
+ width: settings.$popover-arrow-height;
+ height: settings.$popover-arrow-width;
+ margin: settings.$popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
&::before {
left: 0;
- border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
- border-right-color: $popover-arrow-outer-color;
+ border-width: (settings.$popover-arrow-width * .5) settings.$popover-arrow-height (settings.$popover-arrow-width * .5) 0;
+ border-right-color: settings.$popover-arrow-outer-color;
}
&::after {
- left: $popover-border-width;
- border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
- border-right-color: $popover-arrow-color;
+ left: settings.$popover-border-width;
+ border-width: (settings.$popover-arrow-width * .5) settings.$popover-arrow-height (settings.$popover-arrow-width * .5) 0;
+ border-right-color: settings.$popover-arrow-color;
}
}
}
.cfw-popover-bottom {
- margin-top: add($popover-arrow-height, $popover-margin);
+ margin-top: math.add(settings.$popover-arrow-height, settings.$popover-margin);
> .popover-arrow {
- top: subtract(-$popover-arrow-height, $popover-border-width);
+ top: math.subtract(-(settings.$popover-arrow-height), settings.$popover-border-width);
&::before {
top: 0;
- border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
- border-bottom-color: $popover-arrow-outer-color;
+ border-width: 0 (settings.$popover-arrow-width * .5) settings.$popover-arrow-height (settings.$popover-arrow-width * .5);
+ border-bottom-color: settings.$popover-arrow-outer-color;
}
&::after {
- top: $popover-border-width;
- border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
- border-bottom-color: $popover-arrow-color;
+ top: settings.$popover-border-width;
+ border-width: 0 (settings.$popover-arrow-width * .5) settings.$popover-arrow-height (settings.$popover-arrow-width * .5);
+ border-bottom-color: settings.$popover-arrow-color;
}
}
}
.cfw-popover-left {
- margin-right: add($popover-arrow-height, $popover-margin);
+ margin-right: math.add(settings.$popover-arrow-height, settings.$popover-margin);
> .popover-arrow {
- right: subtract(-$popover-arrow-height, $popover-border-width);
- width: $popover-arrow-height;
- height: $popover-arrow-width;
- margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
+ right: math.subtract(-(settings.$popover-arrow-height), settings.$popover-border-width);
+ width: settings.$popover-arrow-height;
+ height: settings.$popover-arrow-width;
+ margin: settings.$popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
&::before {
right: 0;
- border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
- border-left-color: $popover-arrow-outer-color;
+ border-width: (settings.$popover-arrow-width * .5) 0 (settings.$popover-arrow-width * .5) settings.$popover-arrow-height;
+ border-left-color: settings.$popover-arrow-outer-color;
}
&::after {
- right: $popover-border-width;
- border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
- border-left-color: $popover-arrow-color;
+ right: settings.$popover-border-width;
+ border-width: (settings.$popover-arrow-width * .5) 0 (settings.$popover-arrow-width * .5) settings.$popover-arrow-height;
+ border-left-color: settings.$popover-arrow-color;
}
}
}
@@ -151,17 +159,17 @@
/* rtl:end:ignore */
}
- @if $enable-popover-header {
+ @if settings-options.$enable-popover-header {
.popover-header {
- padding: $popover-header-padding-y $popover-header-padding-x;
- padding-right: ($popover-header-padding-x * 2);
+ padding: settings.$popover-header-padding-y settings.$popover-header-padding-x;
+ padding-right: (settings.$popover-header-padding-x * 2);
margin: 0; // reset heading margin
- @include font-size($popover-header-font-size);
- font-weight: $popover-header-font-weight;
- color: $popover-header-color;
- background-color: $popover-header-bg;
- border-bottom: $popover-header-border-width solid $popover-header-border-color;
- @include border-radius($popover-inner-border-radius $popover-inner-border-radius 0 0);
+ @include font-size.font-size(settings.$popover-header-font-size);
+ font-weight: settings.$popover-header-font-weight;
+ color: settings.$popover-header-color;
+ background-color: settings.$popover-header-bg;
+ border-bottom: settings.$popover-header-border-width solid settings.$popover-header-border-color;
+ @include border.border-radius(settings.$popover-inner-border-radius settings.$popover-inner-border-radius 0 0);
&:empty {
display: none;
@@ -169,29 +177,29 @@
}
}
- @if $enable-popover-body {
+ @if settings-options.$enable-popover-body {
.popover-body {
- padding: $popover-body-padding-y $popover-body-padding-x;
- color: $popover-body-color;
+ padding: settings.$popover-body-padding-y settings.$popover-body-padding-x;
+ color: settings.$popover-body-color;
&:empty {
display: none;
}
}
- @if $enable-popover-close {
+ @if settings-options.$enable-popover-close {
.close ~ .popover-header:empty ~ .popover-body {
- padding-right: add($close-font-size, $popover-control-padding-x);
+ padding-right: math.add(settings.$close-font-size, settings.$popover-control-padding-x);
}
}
- @if $enable-popover-drag {
+ @if settings-options.$enable-popover-drag {
.drag ~ .popover-header:empty ~ .popover-body {
- padding-right: add($close-font-size, $popover-control-padding-x);
+ padding-right: math.add(settings.$close-font-size, settings.$popover-control-padding-x);
}
}
- @if $enable-popover-close and $enable-popover-drag {
+ @if settings-options.$enable-popover-close and settings-options.$enable-popover-drag {
.close ~ .drag ~ .popover-header:empty ~ .popover-body {
- padding-right: add($close-font-size * 2, $popover-control-padding-x * 2);
+ padding-right: math.add(settings.$close-font-size * 2, settings.$popover-control-padding-x * 2);
}
}
@@ -200,23 +208,23 @@
// Control buttons
%popover-control {
float: right;
- padding: $popover-control-padding-y $popover-control-padding-x;
+ padding: settings.$popover-control-padding-y settings.$popover-control-padding-x;
}
- @if $enable-popover-close {
+ @if settings-options.$enable-popover-close {
.popover .close {
@extend %popover-control;
}
}
- @if $enable-popover-drag {
+ @if settings-options.$enable-popover-drag {
.popover .drag {
@extend %popover-control;
}
}
// Draggable variant
- @if $enable-popover-draggable {
+ @if settings-options.$enable-popover-draggable {
.popover.draggable {
- z-index: $zindex-popover-draggable;
+ z-index: settings.$zindex-popover-draggable;
margin: 0;
.popover-arrow {
diff --git a/scss/component/_progress.scss b/scss/component/_progress.scss
index 0e2edd669..bd9d6f409 100644
--- a/scss/component/_progress.scss
+++ b/scss/component/_progress.scss
@@ -1,19 +1,27 @@
-@if $enable-progress {
+@use "../mixins/border";
+@use "../mixins/box-shadow";
+@use "../mixins/font-size";
+@use "../mixins/gradients";
+@use "../mixins/transition";
+@use "../settings";
+@use "../settings-options";
- @if $enable-transitions and $enable-progress-animated {
+@if settings-options.$enable-progress {
+
+ @if settings-options.$enable-transitions and settings-options.$enable-progress-animated {
@keyframes progress-bar-stripes {
- 0% { background-position-x: $progress-height; }
+ 0% { background-position-x: settings.$progress-height; }
}
}
.progress {
display: flex;
- height: $progress-height;
+ height: settings.$progress-height;
overflow: hidden; // Force rounded corners by cropping
- @include font-size($progress-font-size);
- background-color: $progress-bg;
- @include border-radius($progress-border-radius);
- @include box-shadow($progress-box-shadow);
+ @include font-size.font-size(settings.$progress-font-size);
+ background-color: settings.$progress-bg;
+ @include border.border-radius(settings.$progress-border-radius);
+ @include box-shadow.box-shadow(settings.$progress-box-shadow);
}
.progress-bar {
@@ -21,26 +29,26 @@
flex-direction: column;
justify-content: center;
overflow: hidden;
- color: $progress-bar-color;
+ color: settings.$progress-bar-color;
text-align: center;
white-space: nowrap;
- background-color: $progress-bar-bg;
- @include box-shadow($progress-bar-box-shadow);
- @include transition($progress-bar-transition);
+ background-color: settings.$progress-bar-bg;
+ @include box-shadow.box-shadow(settings.$progress-bar-box-shadow);
+ @include transition.transition(settings.$progress-bar-transition);
}
- @if $enable-progress-striped {
+ @if settings-options.$enable-progress-striped {
.progress-bar-striped {
- @include gradient-striped();
- background-size: $progress-height $progress-height;
+ @include gradients.gradient-striped();
+ background-size: settings.$progress-height settings.$progress-height;
}
}
- @if $enable-transitions and $enable-progress-animated {
+ @if settings-options.$enable-transitions and settings-options.$enable-progress-animated {
.progress-bar-animated {
- animation: progress-bar-stripes $progress-bar-animation-timing;
+ animation: progress-bar-stripes settings.$progress-bar-animation-timing;
- @if $enable-transitions-reduced {
+ @if settings-options.$enable-transitions-reduced {
@media (prefers-reduced-motion: reduce) {
animation: none;
}
diff --git a/scss/component/_tooltip.scss b/scss/component/_tooltip.scss
index 1a286cb31..2e0466ab5 100644
--- a/scss/component/_tooltip.scss
+++ b/scss/component/_tooltip.scss
@@ -1,13 +1,21 @@
-@if $enable-tooltip {
+@use "../functions/math";
+@use "../mixins/border";
+@use "../mixins/font-size";
+@use "../mixins/hover";
+@use "../mixins/reset-text";
+@use "../settings";
+@use "../settings-options";
+
+@if settings-options.$enable-tooltip {
.tooltip {
position: absolute;
- z-index: $zindex-tooltip;
+ z-index: settings.$zindex-tooltip;
display: none;
- margin: $tooltip-margin;
+ margin: settings.$tooltip-margin;
// 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();
- @include font-size($tooltip-font-size);
+ @include reset-text.reset-text();
+ @include font-size.font-size(settings.$tooltip-font-size);
// Allow breaking very long words so they don't overflow the tooltip's bounds
word-wrap: break-word;
outline: 0;
@@ -15,24 +23,24 @@
// Showing
&.in {
- opacity: $tooltip-opacity;
+ opacity: settings.$tooltip-opacity;
}
// Close
- @if $enable-tooltip-close {
+ @if settings-options.$enable-tooltip-close {
.close {
position: static;
float: right;
- padding: $tooltip-close-padding-y $tooltip-close-padding-x;
- color: $tooltip-close-color;
- @include font-size(1.25rem);
+ padding: settings.$tooltip-close-padding-y settings.$tooltip-close-padding-x;
+ color: settings.$tooltip-close-color;
+ @include font-size.font-size(1.25rem);
text-shadow: none;
- opacity: $tooltip-close-opacity;
+ opacity: settings.$tooltip-close-opacity;
&:not(:disabled):not(.disabled) {
- @include hover-focus() {
- color: $tooltip-close-hover-color;
- opacity: $tooltip-close-hover-opacity;
+ @include hover.hover-focus() {
+ color: settings.$tooltip-close-hover-color;
+ opacity: settings.$tooltip-close-hover-opacity;
}
}
}
@@ -40,12 +48,12 @@
}
// Arrow base
- @if $enable-tooltip-arrow {
+ @if settings-options.$enable-tooltip-arrow {
.tooltip-arrow {
position: absolute;
display: block;
- width: $tooltip-arrow-width;
- height: $tooltip-arrow-height;
+ width: settings.$tooltip-arrow-width;
+ height: settings.$tooltip-arrow-height;
&::before {
position: absolute;
@@ -59,58 +67,58 @@
// Directions
.cfw-tooltip-top {
- padding-bottom: $tooltip-arrow-height;
+ padding-bottom: settings.$tooltip-arrow-height;
.tooltip-arrow {
bottom: 0;
&::before {
top: 0;
- border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
- border-top-color: $tooltip-arrow-color;
+ border-width: settings.$tooltip-arrow-height (settings.$tooltip-arrow-width * .5) 0;
+ border-top-color: settings.$tooltip-arrow-color;
}
}
}
.cfw-tooltip-right {
- padding-left: $tooltip-arrow-height;
+ padding-left: settings.$tooltip-arrow-height;
.tooltip-arrow {
left: 0;
- width: $tooltip-arrow-height;
- height: $tooltip-arrow-width;
+ width: settings.$tooltip-arrow-height;
+ height: settings.$tooltip-arrow-width;
&::before {
right: 0;
- border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
- border-right-color: $tooltip-arrow-color;
+ border-width: (settings.$tooltip-arrow-width * .5) settings.$tooltip-arrow-height (settings.$tooltip-arrow-width * .5) 0;
+ border-right-color: settings.$tooltip-arrow-color;
}
}
}
.cfw-tooltip-bottom {
- padding-top: $tooltip-arrow-height;
+ padding-top: settings.$tooltip-arrow-height;
.tooltip-arrow {
top: 0;
&::before {
bottom: 0;
- border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
- border-bottom-color: $tooltip-arrow-color;
+ border-width: 0 (settings.$tooltip-arrow-width * .5) settings.$tooltip-arrow-height;
+ border-bottom-color: settings.$tooltip-arrow-color;
}
}
}
.cfw-tooltip-left {
- padding-right: $tooltip-arrow-height;
+ padding-right: settings.$tooltip-arrow-height;
.tooltip-arrow {
right: 0;
- width: $tooltip-arrow-height;
- height: $tooltip-arrow-width;
+ width: settings.$tooltip-arrow-height;
+ height: settings.$tooltip-arrow-width;
&::before {
left: 0;
- border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
- border-left-color: $tooltip-arrow-color;
+ border-width: (settings.$tooltip-arrow-width * .5) 0 (settings.$tooltip-arrow-width * .5) settings.$tooltip-arrow-height;
+ border-left-color: settings.$tooltip-arrow-color;
}
}
}
@@ -135,16 +143,16 @@
// Wrapper for the tooltip content
.tooltip-body {
- max-width: $tooltip-max-width;
- padding: $tooltip-padding-y $tooltip-padding-x;
- color: $tooltip-color;
+ max-width: settings.$tooltip-max-width;
+ padding: settings.$tooltip-padding-y settings.$tooltip-padding-x;
+ color: settings.$tooltip-color;
text-align: center;
- background-color: $tooltip-bg;
- @include border-radius($tooltip-border-radius);
+ background-color: settings.$tooltip-bg;
+ @include border.border-radius(settings.$tooltip-border-radius);
- @if $enable-tooltip-close {
+ @if settings-options.$enable-tooltip-close {
.close + & {
- padding-right: add(1.25rem, $tooltip-close-padding-x);
+ padding-right: math.add(1.25rem, settings.$tooltip-close-padding-x);
}
}
}
diff --git a/scss/core/_buttons.scss b/scss/core/_buttons.scss
index 8f0c71c26..e82c59ff1 100644
--- a/scss/core/_buttons.scss
+++ b/scss/core/_buttons.scss
@@ -1,24 +1,35 @@
-@if $enable-btn {
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "../functions/color-util";
+@use "../mixins/box-shadow";
+@use "../mixins/buttons";
+@use "../mixins/hover";
+@use "../mixins/transition";
+@use "../settings";
+@use "../settings-options";
+
+@if settings-options.$enable-btn {
// Base button
.btn {
display: inline-block;
- font-family: $btn-font-family;
- font-weight: $btn-font-weight;
+ font-family: settings.$btn-font-family;
+ font-weight: settings.$btn-font-weight;
text-align: center;
- text-decoration: if($link-decoration == none, null, none);
- white-space: $btn-white-space;
+ text-decoration: if(settings.$link-decoration == none, null, none);
+ white-space: settings.$btn-white-space;
vertical-align: middle;
cursor: pointer;
user-select: none;
background-color: transparent;
- border: $btn-border-width solid transparent;
- @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
- @include box-shadow($btn-box-shadow);
- @include transition($btn-transition);
+ border: settings.$btn-border-width solid transparent;
+ @include buttons.button-size(settings.$btn-padding-y, settings.$btn-padding-x, settings.$btn-font-size, settings.$btn-line-height, settings.$btn-border-radius);
+ @include box-shadow.box-shadow(settings.$btn-box-shadow);
+ @include transition.transition(settings.$btn-transition);
}
.btn:hover {
- text-decoration: if($link-hover-decoration == underline, none, null);
+ text-decoration: if(settings.$link-hover-decoration == underline, none, null);
}
%btn-common-focus {
@@ -28,7 +39,7 @@
.btn:focus {
@extend %btn-common-focus;
}
- @if $enable-btn-check {
+ @if settings-options.$enable-btn-check {
.btn-check-input:focus ~ .btn {
@extend %btn-common-focus;
}
@@ -37,14 +48,14 @@
// Disabled comes first so active can restyle
%btn-common-disabled {
pointer-events: none;
- opacity: $btn-disabled-opacity;
- @include box-shadow(none);
+ opacity: settings.$btn-disabled-opacity;
+ @include box-shadow.box-shadow(none);
}
.btn.disabled,
.btn:disabled {
@extend %btn-common-disabled;
}
- @if $enable-btn-check {
+ @if settings-options.$enable-btn-check {
.btn-check-input {
&[disabled],
&:disabled {
@@ -56,28 +67,28 @@
}
%btn-common-active {
- @include box-shadow($btn-active-box-shadow);
+ @include box-shadow.box-shadow(settings.$btn-active-box-shadow);
}
.btn:active,
.btn.active,
.btn.open[data-cfw="dropdown"] {
@extend %btn-common-active !optional;
}
- @if $enable-btn-check {
+ @if settings-options.$enable-btn-check {
.btn-check-input:not([disabled]):not(:disabled):checked ~ .btn {
@extend %btn-common-active !optional;
}
}
%btn-common-active-focus {
- @include box-shadow($btn-active-box-shadow, $btn-focus-box-shadow);
+ @include box-shadow.box-shadow(settings.$btn-active-box-shadow, settings.$btn-focus-box-shadow);
}
.btn:active:focus,
.btn.active:focus,
.btn.open[data-cfw="dropdown"]:focus {
@extend %btn-common-active-focus !optional;
}
- @if $enable-btn-check {
+ @if settings-options.$enable-btn-check {
.btn-check-input:not([disabled]):not(:disabled):checked:focus ~ .btn {
@extend %btn-common-active-focus !optional;
}
@@ -91,7 +102,7 @@
fieldset:disabled a.btn {
@extend %btn-common-disabled-pointer;
}
- @if $enable-btn-check {
+ @if settings-options.$enable-btn-check {
.btn-check-input {
&[disabled],
&:disabled {
@@ -103,68 +114,68 @@
}
// Default color
- @if $enable-btn-default {
- @include button-variant(".btn", $btn-default-color, $btn-default-bg, $btn-default-border-color, $btn-default-focus-box-shadow-color, $btn-default-hover-color, $btn-default-hover-bg, $btn-default-hover-border-color, $btn-default-active-color, $btn-default-active-bg, $btn-default-active-border-color, $btn-default-disabled-color, $btn-default-disabled-bg, $btn-default-disabled-border-color);
+ @if settings-options.$enable-btn-default {
+ @include buttons.button-variant(".btn", settings.$btn-default-color, settings.$btn-default-bg, settings.$btn-default-border-color, settings.$btn-default-focus-box-shadow-color, settings.$btn-default-hover-color, settings.$btn-default-hover-bg, settings.$btn-default-hover-border-color, settings.$btn-default-active-color, settings.$btn-default-active-bg, settings.$btn-default-active-border-color, settings.$btn-default-disabled-color, settings.$btn-default-disabled-bg, settings.$btn-default-disabled-border-color);
}
// Theme generation
- @if $enable-btn-colors {
- @if (type-of($btn-colors) == "map" and length($btn-colors) != 0) {
- $mixed-btn-themes: _mix-context-colors($btn-colors, $btn-levels);
- $btn-themes: map-merge($mixed-btn-themes, $btn-themes);
+ @if settings-options.$enable-btn-colors {
+ @if (meta.type-of(settings.$btn-colors) == "map" and list.length(settings.$btn-colors) != 0) {
+ $mixed-btn-themes: color-util.mix-context-colors(settings.$btn-colors, settings.$btn-levels);
+ settings.$btn-themes: map.merge($mixed-btn-themes, settings.$btn-themes);
}
// Contextual color variants
- @if (type-of($btn-themes) == "map" and length($btn-themes) != 0) {
- @each $theme, $colors in $btn-themes {
- @include button-variant-control(".btn-#{$theme}", $colors);
+ @if (meta.type-of(settings.$btn-themes) == "map" and list.length(settings.$btn-themes) != 0) {
+ @each $theme, $colors in settings.$btn-themes {
+ @include buttons.button-variant-control(".btn-#{$theme}", $colors);
}
}
}
// Outline variant - remove all backgrounds
- @if $enable-btn-outline {
- @include button-variant(".btn-outline", $btn-default-color, $btn-outline-bg, $btn-default-border-color, $btn-default-focus-box-shadow-color, $btn-default-hover-color, $btn-default-hover-bg, $btn-default-hover-border-color, $btn-default-active-color, $btn-default-active-bg, $btn-default-active-border-color, $btn-default-disabled-color, $btn-outline-bg, $btn-default-disabled-border-color);
+ @if settings-options.$enable-btn-outline {
+ @include buttons.button-variant(".btn-outline", settings.$btn-default-color, settings.$btn-outline-bg, settings.$btn-default-border-color, settings.$btn-default-focus-box-shadow-color, settings.$btn-default-hover-color, settings.$btn-default-hover-bg, settings.$btn-default-hover-border-color, settings.$btn-default-active-color, settings.$btn-default-active-bg, settings.$btn-default-active-border-color, settings.$btn-default-disabled-color, settings.$btn-outline-bg, settings.$btn-default-disabled-border-color);
}
// Outline theme generation
- @if $enable-btn-outline-colors {
- @if (type-of($btn-outline-colors) == "map" and length($btn-outline-colors) != 0) {
- $mixed-btn-outline-themes: _mix-context-colors($btn-outline-colors, $btn-outline-levels);
- $btn-outline-themes: map-merge($mixed-btn-outline-themes, $btn-outline-themes);
+ @if settings-options.$enable-btn-outline-colors {
+ @if (meta.type-of(settings.$btn-outline-colors) == "map" and list.length(settings.$btn-outline-colors) != 0) {
+ $mixed-btn-outline-themes: color-util.mix-context-colors(settings.$btn-outline-colors, settings.$btn-outline-levels);
+ settings.$btn-outline-themes: map.merge($mixed-btn-outline-themes, settings.$btn-outline-themes);
}
// Outline contextual color variants
- @if (type-of($btn-outline-themes) == "map" and length($btn-outline-themes) != 0) {
- @each $theme, $colors in $btn-outline-themes {
- @include button-variant-control-outline(".btn-outline-#{$theme}", $colors, $btn-outline-bg);
+ @if (meta.type-of(settings.$btn-outline-themes) == "map" and list.length(settings.$btn-outline-themes) != 0) {
+ @each $theme, $colors in settings.$btn-outline-themes {
+ @include buttons.button-variant-control-outline(".btn-outline-#{$theme}", $colors, settings.$btn-outline-bg);
}
}
}
// Link buttons
// Make a button look and behave like a link
- @if $enable-btn-link {
+ @if settings-options.$enable-btn-link {
.btn-link {
- color: $btn-link-color;
- text-decoration: $link-decoration;
+ color: settings.$btn-link-color;
+ text-decoration: settings.$link-decoration;
background-color: transparent;
border-color: transparent;
box-shadow: none;
- @include hover-focus() {
- text-decoration: $link-hover-decoration;
+ @include hover.hover-focus() {
+ text-decoration: settings.$link-hover-decoration;
background-color: transparent;
border-color: transparent;
}
&:hover {
- color: $btn-link-hover-color;
+ color: settings.$btn-link-hover-color;
}
&.disabled,
&:disabled {
- color: $btn-link-disabled-color;
+ color: settings.$btn-link-disabled-color;
text-decoration: none;
background-color: transparent;
border-color: transparent;
@@ -173,7 +184,7 @@
&:active,
&.active,
&.open[data-cfw="dropdown"] {
- color: $btn-link-hover-color;
+ color: settings.$btn-link-hover-color;
background-color: transparent;
border-color: transparent;
box-shadow: none;
@@ -182,40 +193,40 @@
}
// Icon button uses smaller horizontal padding
- @if $enable-btn-icon {
+ @if settings-options.$enable-btn-icon {
.btn-icon {
- padding-right: $btn-padding-x * $btn-icon-multiplier;
- padding-left: $btn-padding-x * $btn-icon-multiplier;
+ padding-right: settings.$btn-padding-x * settings.$btn-icon-multiplier;
+ padding-left: settings.$btn-padding-x * settings.$btn-icon-multiplier;
}
}
// Button sizes
- @if $enable-sizing {
- @each $size, $dims in $btn-sizes {
- $sz-font-size: map-get($dims, "font-size");
- $sz-line-height: map-get($dims, "line-height");
- $sz-padding-y: map-get($dims, "padding-y");
- $sz-padding-x: map-get($dims, "padding-x");
- $sz-border-radius: map-get($dims, "border-radius");
+ @if settings-options.$enable-sizing {
+ @each $size, $dims in settings.$btn-sizes {
+ $sz-font-size: map.get($dims, "font-size");
+ $sz-line-height: map.get($dims, "line-height");
+ $sz-padding-y: map.get($dims, "padding-y");
+ $sz-padding-x: map.get($dims, "padding-x");
+ $sz-border-radius: map.get($dims, "border-radius");
%btn-#{$size} {
- @include button-size($sz-padding-y, $sz-padding-x, $sz-font-size, $sz-line-height, $sz-border-radius);
+ @include buttons.button-size($sz-padding-y, $sz-padding-x, $sz-font-size, $sz-line-height, $sz-border-radius);
}
%btn-icon-#{$size} {
@if $sz-padding-x != null {
- padding-right: $sz-padding-x * $btn-icon-multiplier;
- padding-left: $sz-padding-x * $btn-icon-multiplier;
+ padding-right: $sz-padding-x * settings.$btn-icon-multiplier;
+ padding-left: $sz-padding-x * settings.$btn-icon-multiplier;
}
}
.btn-#{$size} {
- @if $enable-btn-sizing {
+ @if settings-options.$enable-btn-sizing {
@extend %btn-#{$size};
}
&.btn-icon {
- @if $enable-btn-icon and $enable-btn-icon-sizing {
+ @if settings-options.$enable-btn-icon and settings-options.$enable-btn-icon-sizing {
@extend %btn-icon-#{$size} !optional;
}
}
@@ -224,20 +235,20 @@
}
// Block button
- @if $enable-btn-block {
+ @if settings-options.$enable-btn-block {
.btn-block {
display: block;
width: 100%;
// Vertically space out multiple block buttons
+ .btn-block {
- margin-top: $btn-block-spacing-y;
+ margin-top: settings.$btn-block-spacing-y;
}
}
}
// Checkbox and radio button
- @if $enable-btn-check {
+ @if settings-options.$enable-btn-check {
.btn-check {
position: relative;
display: inline-flex;
diff --git a/scss/core/_code.scss b/scss/core/_code.scss
index 12271c432..06abde709 100644
--- a/scss/core/_code.scss
+++ b/scss/core/_code.scss
@@ -1,13 +1,19 @@
-@if $enable-code {
+@use "../mixins/border";
+@use "../mixins/box-shadow";
+@use "../mixins/font-size";
+@use "../settings";
+@use "../settings-options";
+
+@if settings-options.$enable-code {
// Inline code
- @if $enable-code-code {
+ @if settings-options.$enable-code-code {
code {
- padding: $code-padding-y $code-padding-x;
- @include font-size($code-font-size);
- color: $code-color;
+ padding: settings.$code-padding-y settings.$code-padding-x;
+ @include font-size.font-size(settings.$code-font-size);
+ color: settings.$code-color;
word-wrap: break-word;
- background-color: $code-bg;
- @include border-radius($code-border-radius);
+ background-color: settings.$code-bg;
+ @include border.border-radius(settings.$code-border-radius);
// Inherit link color when inside anchors to avoid mis-matched underline
a > & {
@@ -17,39 +23,39 @@
}
// User input typically entered via keyboard
- @if $enable-code-kbd {
+ @if settings-options.$enable-code-kbd {
kbd {
- padding: $kbd-padding-y $kbd-padding-x;
- @include font-size($kbd-font-size);
- color: $kbd-color;
- background-color: $kbd-bg;
- @include border-radius($kbd-border-radius);
- @include box-shadow($kbd-box-shadow);
+ padding: settings.$kbd-padding-y settings.$kbd-padding-x;
+ @include font-size.font-size(settings.$kbd-font-size);
+ color: settings.$kbd-color;
+ background-color: settings.$kbd-bg;
+ @include border.border-radius(settings.$kbd-border-radius);
+ @include box-shadow.box-shadow(settings.$kbd-box-shadow);
kbd {
padding: 0;
- @include font-size(1em);
- font-weight: $kbd-nested-font-weight;
- background-color: $kbd-nested-bg;
- @include box-shadow(none);
+ @include font-size.font-size(1em);
+ font-weight: settings.$kbd-nested-font-weight;
+ background-color: settings.$kbd-nested-bg;
+ @include box-shadow.box-shadow(none);
}
}
}
// Blocks of code
- @if $enable-code-pre {
+ @if settings-options.$enable-code-pre {
pre {
display: block;
- @include font-size($code-font-size);
- color: $pre-color;
+ @include font-size.font-size(settings.$code-font-size);
+ color: settings.$pre-color;
// Account for some code outputs that place code tags in pre tags
code {
padding: 0;
- @include font-size(inherit);
+ @include font-size.font-size(inherit);
color: inherit;
background-color: transparent;
- @include border-radius(0);
+ @include border.border-radius(0);
}
}
}
diff --git a/scss/core/_images.scss b/scss/core/_images.scss
index cf8c77dd6..0cea1b957 100644
--- a/scss/core/_images.scss
+++ b/scss/core/_images.scss
@@ -1,39 +1,46 @@
-@if $enable-img {
+@use "../mixins/border";
+@use "../mixins/box-shadow";
+@use "../mixins/font-size";
+@use "../mixins/images";
+@use "../settings";
+@use "../settings-options";
+
+@if settings-options.$enable-img {
// Fluid images
// Keep images from scaling beyond the width of their parents.
- @if $enable-img-fluid {
+ @if settings-options.$enable-img-fluid {
.img-fluid {
- @include img-fluid();
+ @include images.img-fluid();
}
}
// Image thumbnails
- @if $enable-img-thumbnail {
+ @if settings-options.$enable-img-thumbnail {
.img-thumbnail {
- padding: $thumbnail-padding;
- background-color: $thumbnail-bg;
- border: $thumbnail-border-width solid $thumbnail-border-color;
- @include border-radius($thumbnail-border-radius);
- @include box-shadow($thumbnail-box-shadow);
+ padding: settings.$thumbnail-padding;
+ background-color: settings.$thumbnail-bg;
+ border: settings.$thumbnail-border-width solid settings.$thumbnail-border-color;
+ @include border.border-radius(settings.$thumbnail-border-radius);
+ @include box-shadow.box-shadow(settings.$thumbnail-box-shadow);
// Keep them at most 100% wide
- @include img-fluid();
+ @include images.img-fluid();
}
}
}
// Figures
-@if $enable-figure {
+@if settings-options.$enable-figure {
.figure {
// Ensures the caption's text aligns with the image.
display: inline-block;
}
.figure-img {
- margin-bottom: $figure-spacer-y;
+ margin-bottom: settings.$figure-spacer-y;
line-height: 1;
}
.figure-caption {
- @include font-size($figure-caption-font-size);
- color: $figure-caption-color;
+ @include font-size.font-size(settings.$figure-caption-font-size);
+ color: settings.$figure-caption-color;
}
}
diff --git a/scss/core/_print.scss b/scss/core/_print.scss
index b11926856..b558c4b4c 100644
--- a/scss/core/_print.scss
+++ b/scss/core/_print.scss
@@ -1,3 +1,6 @@
+@use "../settings";
+@use "../settings-options";
+
// stylelint-disable declaration-no-important, selector-no-qualifying-type
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
@@ -8,7 +11,7 @@
// http://www.phpied.com/delay-loading-your-print-css/
// ==========================================================================
-@if $enable-print-styles {
+@if settings-options.$enable-print-styles {
@media print {
*,
*::before,
@@ -42,7 +45,7 @@
}
pre,
blockquote {
- border: $border-width solid #999; // Figuration change - use `$border-width` setting instead of 1px default
+ border: settings.$border-width solid #999; // Figuration change - use `$border-width` setting instead of 1px default
page-break-inside: avoid;
}
@@ -72,14 +75,14 @@
// Figuration components start
.badge {
- border: $border-width solid #000;
+ border: settings.$border-width solid #000;
}
- @if $enable-table {
+ @if settings-options.$enable-table {
.table {
color: inherit !important;
border-collapse: collapse !important;
- border-color: $table-border-color !important;
+ border-color: settings.$table-border-color !important;
thead,
tbody,
diff --git a/scss/core/_reboot.scss b/scss/core/_reboot.scss
index 90b0462c7..d196cea59 100644
--- a/scss/core/_reboot.scss
+++ b/scss/core/_reboot.scss
@@ -1,3 +1,8 @@
+@use "../mixins/font-size";
+@use "../mixins/hover";
+@use "../settings";
+@use "../settings-options";
+
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
// Reboot
@@ -39,9 +44,9 @@ section {
// null by default, thus nothing is generated.
:root {
// stylelint-disable-next-line property-disallowed-list
- font-size: $font-size-root; // 1
+ font-size: settings.$font-size-root; // 1
- @if $enable-smooth-scroll {
+ @if settings-options.$enable-smooth-scroll {
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
@@ -56,15 +61,15 @@ section {
// 4. Change the default tap highlight to be completely transparent in iOS.
body {
margin: 0; // 1
- font-family: $font-family-base;
- @include font-size($font-size-base);
- font-weight: $font-weight-base;
- line-height: $line-height-base;
- color: $body-color;
- text-align: $body-text-align;
- background-color: $body-bg; // 2
+ font-family: settings.$font-family-base;
+ @include font-size.font-size(settings.$font-size-base);
+ font-weight: settings.$font-weight-base;
+ line-height: settings.$line-height-base;
+ color: settings.$body-color;
+ text-align: settings.$body-text-align;
+ background-color: settings.$body-bg; // 2
-webkit-text-size-adjust: 100%; // 3
- -webkit-tap-highlight-color: rgba($black, 0); // 4
+ -webkit-tap-highlight-color: rgba(settings.$black, 0); // 4
}
// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
@@ -85,11 +90,11 @@ body {
//
// 1. Reset Firefox's gray color
hr {
- margin: $hr-margin-y 0;
- color: $hr-color; // 1
+ margin: settings.$hr-margin-y 0;
+ color: settings.$hr-color; // 1
border: 0;
- border-top: $hr-border-width solid $hr-border-color;
- opacity: $hr-opacity;
+ border-top: settings.$hr-border-width solid settings.$hr-border-color;
+ opacity: settings.$hr-opacity;
}
// Typography
@@ -100,52 +105,51 @@ hr {
// margin for easier control within type scales as it avoids margin collapsing.
%heading {
margin-top: 0;
- margin-bottom: $headings-margin-bottom;
- font-family: $headings-font-family;
- font-style: $headings-font-style;
- font-weight: $headings-font-weight;
- line-height: $headings-line-height;
- color: $headings-color;
+ margin-bottom: settings.$headings-margin-bottom;
+ font-family: settings.$headings-font-family;
+ font-style: settings.$headings-font-style;
+ font-weight: settings.$headings-font-weight;
+ line-height: settings.$headings-line-height;
+ color: settings.$headings-color;
}
h1 {
@extend %heading;
- @include font-size($h1-font-size);
+ @include font-size.font-size(settings.$h1-font-size);
}
h2 {
@extend %heading;
- @include font-size($h2-font-size);
+ @include font-size.font-size(settings.$h2-font-size);
}
h3 {
@extend %heading;
- @include font-size($h3-font-size);
+ @include font-size.font-size(settings.$h3-font-size);
}
h4 {
@extend %heading;
- @include font-size($h4-font-size);
+ @include font-size.font-size(settings.$h4-font-size);
}
h5 {
@extend %heading;
- @include font-size($h5-font-size);
+ @include font-size.font-size(settings.$h5-font-size);
}
h6 {
@extend %heading;
- @include font-size($h6-font-size);
+ @include font-size.font-size(settings.$h6-font-size);
}
-
// Reset margins on paragraphs
//
// Similarly, the top margin on ``s get reset. However, we also reset the
// bottom margin to use `rem` units instead of `em`.
p {
margin-top: 0;
- margin-bottom: $paragraph-spacer-y;
+ margin-bottom: settings.$paragraph-spacer-y;
}
@@ -187,7 +191,7 @@ ul ol {
}
dt {
- font-weight: $dt-font-weight;
+ font-weight: settings.$dt-font-weight;
}
dd {
@@ -205,12 +209,12 @@ strong {
}
small {
- @include font-size($small-font-size); // Add the correct font size in all browsers
+ @include font-size.font-size(settings.$small-font-size); // Add the correct font size in all browsers
}
mark {
- padding: $mark-padding;
- background-color: $mark-bg;
+ padding: settings.$mark-padding;
+ background-color: settings.$mark-bg;
}
// Prevent `sub` and `sup` elements from affecting the line height in
@@ -218,7 +222,7 @@ mark {
sub,
sup {
position: relative;
- @include font-size($sub-sup-font-size);
+ @include font-size.font-size(settings.$sub-sup-font-size);
line-height: 0;
vertical-align: baseline;
}
@@ -232,12 +236,12 @@ sup {
// Links
a {
- color: $link-color;
- text-decoration: $link-decoration;
+ color: settings.$link-color;
+ text-decoration: settings.$link-decoration;
- @include hover() {
- color: $link-hover-color;
- text-decoration: $link-hover-decoration;
+ @include hover.hover() {
+ color: settings.$link-hover-color;
+ text-decoration: settings.$link-hover-decoration;
}
}
@@ -261,8 +265,8 @@ pre,
code,
kbd,
samp {
- font-family: $font-family-monospace;
- @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
+ font-family: settings.$font-family-monospace;
+ @include font-size.font-size(1em); // Correct the odd `em` font sizing in all browsers.
}
pre {
@@ -298,9 +302,9 @@ table {
}
caption {
- padding-top: $table-cell-padding;
- padding-bottom: $table-cell-padding;
- color: $table-caption-color;
+ padding-top: settings.$table-cell-padding;
+ padding-bottom: settings.$table-cell-padding;
+ color: settings.$table-caption-color;
text-align: left;
}
@@ -309,7 +313,7 @@ caption {
// 2. Matches default `
` alignment by inheriting `text-align`.
// 3. Fix alignment for Safari
th {
- font-weight: $table-th-font-weight; // 1
+ font-weight: settings.$table-th-font-weight; // 1
text-align: inherit; // 2
// stylelint-disable-next-line declaration-block-no-duplicate-properties
text-align: -webkit-match-parent; // 3
@@ -330,7 +334,7 @@ td {
// Forms
label {
display: inline-block;
- margin-bottom: $label-margin-bottom; // Allow labels to use `margin` for spacing.
+ margin-bottom: settings.$label-margin-bottom; // Allow labels to use `margin` for spacing.
}
// Remove the default `border-radius` that macOS Chrome adds.
@@ -355,7 +359,7 @@ optgroup,
textarea {
margin: 0; // Remove the margin in Firefox and Safari
font-family: inherit;
- @include font-size(inherit);
+ @include font-size.font-size(inherit);
line-height: inherit;
}
@@ -421,8 +425,8 @@ button,
input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box; // 1
- width: $input-checkradio-size; // 2
- height: $input-checkradio-size; // 2
+ width: settings.$input-checkradio-size; // 2
+ height: settings.$input-checkradio-size; // 2
padding: 0; // 3
}
@@ -452,9 +456,9 @@ legend {
float: left; // 1
width: 100%;
padding: 0;
- margin-bottom: $legend-margin-bottom;
- @include font-size($legend-font-size);
- font-weight: $legend-font-weight;
+ margin-bottom: settings.$legend-margin-bottom;
+ @include font-size.font-size(settings.$legend-font-size);
+ font-weight: settings.$legend-font-weight;
line-height: inherit;
white-space: normal; // 2
diff --git a/scss/core/_root.scss b/scss/core/_root.scss
index 7e9bf1522..9135200ed 100644
--- a/scss/core/_root.scss
+++ b/scss/core/_root.scss
@@ -1,24 +1,28 @@
+@use "sass:meta";
+@use "../settings";
+@use "../settings-options";
+
// Custom variable values only support SassScript inside `#{}`.
-@if $enable-root {
+@if settings-options.$enable-root {
:root {
- @if $enable-root-colors {
- @each $color, $value in $root-colors {
+ @if settings-options.$enable-root-colors {
+ @each $color, $value in settings.$root-colors {
--color-#{$color}: #{$value};
}
}
- @if $enable-root-breakpoints {
- @each $bp, $value in $grid-breakpoints {
+ @if settings-options.$enable-root-breakpoints {
+ @each $bp, $value in settings.$grid-breakpoints {
--breakpoint-#{$bp}: #{$value};
}
}
- @if $enable-root-fonts {
+ @if settings-options.$enable-root-fonts {
// Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
- --font-family-sans-serif: #{inspect($font-family-sans-serif)};
- --font-family-serif: #{inspect($font-family-serif)};
- --font-family-monospace: #{inspect($font-family-monospace)};
+ --font-family-sans-serif: #{meta.inspect(settings.$font-family-sans-serif)};
+ --font-family-serif: #{meta.inspect(settings.$font-family-serif)};
+ --font-family-monospace: #{meta.inspect(settings.$font-family-monospace)};
}
}
}
diff --git a/scss/core/_tables.scss b/scss/core/_tables.scss
index 6b5726ce6..787d6b882 100644
--- a/scss/core/_tables.scss
+++ b/scss/core/_tables.scss
@@ -1,3 +1,12 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "../functions/color-util";
+@use "../mixins/breakpoints";
+@use "../mixins/tables";
+@use "../settings";
+@use "../settings-options";
+
// Targeting th & td with universal selectors
// Using: `> :not(caption) > * > *`
//
@@ -10,26 +19,26 @@
// - Confusing syntax.
-@if $enable-table {
+@if settings-options.$enable-table {
// Basic table
.table {
width: 100%;
- margin-bottom: $table-margin-bottom;
- vertical-align: $table-cell-vertical-align;
- background-color: $table-bg;
+ margin-bottom: settings.$table-margin-bottom;
+ vertical-align: settings.$table-cell-vertical-align;
+ background-color: settings.$table-bg;
border: 0 solid;
- border-color: $table-border-color;
+ border-color: settings.$table-border-color;
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
- padding: $table-cell-padding;
+ padding: settings.$table-cell-padding;
box-shadow: none;
}
thead {
th {
- text-align: $table-head-horizontal-align;
- vertical-align: $table-head-vertical-align;
+ text-align: settings.$table-head-horizontal-align;
+ vertical-align: settings.$table-head-vertical-align;
}
}
@@ -39,30 +48,30 @@
}
// Horizontal borders
- @if $enable-table-borders {
+ @if settings-options.$enable-table-borders {
.table-bordered,
.table-celled,
.table-divided,
.table-ruled {
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
- border-top-width: $table-border-width;
+ border-top-width: settings.$table-border-width;
}
// stylelint-disable-next-line selector-max-universal
> thead > * > * {
- border-bottom-color: $table-head-border-color;
- border-bottom-width: $table-head-border-width;
+ border-bottom-color: settings.$table-head-border-color;
+ border-bottom-width: settings.$table-head-border-width;
}
> tbody + tbody > :first-child {
- border-top-color: $table-body-border-color;
- border-top-width: $table-body-border-width;
+ border-top-color: settings.$table-body-border-color;
+ border-top-width: settings.$table-body-border-width;
}
> tfoot > :first-child > * {
- border-top-color: $table-foot-border-color;
- border-top-width: $table-foot-border-width;
+ border-top-color: settings.$table-foot-border-color;
+ border-top-width: settings.$table-foot-border-width;
border-bottom-width: 0;
}
}
@@ -78,15 +87,15 @@
.table-ruled {
// stylelint-disable-next-line selector-max-universal
> tfoot > * > * {
- border-bottom-width: $table-border-width;
+ border-bottom-width: settings.$table-border-width;
}
}
.table-bordered,
.table-wrapped,
.table-ruled {
- border-top-width: $table-border-width;
- border-bottom-width: $table-border-width;
+ border-top-width: settings.$table-border-width;
+ border-bottom-width: settings.$table-border-width;
}
// Vertical borders
@@ -96,10 +105,10 @@
.table-walled {
// stylelint-disable selector-max-universal
> :not(caption) > * > * {
- border-left-width: $table-border-width;
+ border-left-width: settings.$table-border-width;
&:last-child {
- border-right-width: $table-border-width;
+ border-right-width: settings.$table-border-width;
}
}
// stylelint-enable selector-max-universal
@@ -122,84 +131,84 @@
.table-bordered,
.table-wrapped,
.table-walled {
- border-right-width: $table-border-width;
- border-left-width: $table-border-width;
+ border-right-width: settings.$table-border-width;
+ border-left-width: settings.$table-border-width;
}
}
// Striped rows
- @if $enable-table-striped {
+ @if settings-options.$enable-table-striped {
.table-striped {
- > tbody > tr:nth-of-type(#{$table-striped-selector}) > * {
- box-shadow: $table-striped-box-shadow;
+ > tbody > tr:nth-of-type(#{settings.$table-striped-selector}) > * {
+ box-shadow: settings.$table-striped-box-shadow;
}
}
.table-striped-alt {
- > tbody > tr:nth-of-type(#{$table-striped-selector}) > * {
- box-shadow: $table-striped-alt-box-shadow;
+ > tbody > tr:nth-of-type(#{settings.$table-striped-selector}) > * {
+ box-shadow: settings.$table-striped-alt-box-shadow;
}
}
}
// Striped cols
- @if $enable-table-striped-cols {
+ @if settings-options.$enable-table-striped-cols {
.table-striped-cols {
- > :not(caption) > tr > :nth-child(#{$table-striped-cols-selector}) {
- box-shadow: $table-striped-box-shadow;
+ > :not(caption) > tr > :nth-child(#{settings.$table-striped-cols-selector}) {
+ box-shadow: settings.$table-striped-box-shadow;
}
}
.table-striped-cols-alt {
- > :not(caption) > tr > :nth-child(#{$table-striped-cols-selector}) {
- box-shadow: $table-striped-alt-box-shadow;
+ > :not(caption) > tr > :nth-child(#{settings.$table-striped-cols-selector}) {
+ box-shadow: settings.$table-striped-alt-box-shadow;
}
}
}
// Hover effect
// Needs to be after striped table in order to overrule background.
- @if $enable-table-hover {
+ @if settings-options.$enable-table-hover {
.table-hover {
> tbody > tr:hover > * {
- box-shadow: $table-hover-box-shadow;
+ box-shadow: settings.$table-hover-box-shadow;
}
}
.table-hover-alt {
> tbody > tr:hover > * {
- box-shadow: $table-hover-alt-box-shadow;
+ box-shadow: settings.$table-hover-alt-box-shadow;
}
}
}
// Condensed table
- @if $enable-table-condensed {
+ @if settings-options.$enable-table-condensed {
.table-condensed {
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
- padding: $table-condensed-cell-padding;
+ padding: settings.$table-condensed-cell-padding;
}
}
}
// Table backgrounds
// Active variant
- @if $enable-table-active {
- @include table-row-variant(active, $table-bg-active, $table-bg-active-hover);
+ @if settings-options.$enable-table-active {
+ @include tables.table-row-variant(active, settings.$table-bg-active, settings.$table-bg-active-hover);
}
// Theme generation
- @if $enable-table-colors {
- @if (type-of($table-colors) == "map" and length($table-colors) != 0) {
- $mixed-table-themes: _mix-context-colors($table-colors, $table-levels);
- $table-themes: map-merge($mixed-table-themes, $table-themes);
+ @if settings-options.$enable-table-colors {
+ @if (meta.type-of(settings.$table-colors) == "map" and list.length(settings.$table-colors) != 0) {
+ $mixed-table-themes: color-util.mix-context-colors(settings.$table-colors, settings.$table-levels);
+ settings.$table-themes: map.merge($mixed-table-themes, settings.$table-themes);
}
// Contextual variants
- @if (type-of($table-themes) == "map" and length($table-themes) != 0) {
- @each $theme, $colors in $table-themes {
- $bg: map-get($colors, "bg");
- $hover-bg: map-get($colors, "hover-bg");
+ @if (meta.type-of(settings.$table-themes) == "map" and list.length(settings.$table-themes) != 0) {
+ @each $theme, $colors in settings.$table-themes {
+ $bg: map.get($colors, "bg");
+ $hover-bg: map.get($colors, "hover-bg");
- @include table-row-variant("#{$theme}", $bg, $hover-bg);
+ @include tables.table-row-variant("#{$theme}", $bg, $hover-bg);
}
}
}
@@ -207,21 +216,21 @@
// Scrolling table
// Add `.table-scroll` wrapper to a table to enable horizontal scrolling.
// Tables will scroll when they will no longer fit width-wise in their container.
- @if $enable-table-scroll {
+ @if settings-options.$enable-table-scroll {
.table-scroll {
- @include table-scroll();
+ @include tables.table-scroll();
}
// Responsive scrolling table
// Tables will no longer scroll when breakpoint is larger than the one designated.
- @if $enable-table-scroll-responsive {
- @each $bp in $table-scroll-breakpoints {
+ @if settings-options.$enable-table-scroll-responsive {
+ @each $bp in settings.$table-scroll-breakpoints {
// Skip largest breakpoint for down (equivalent to `.table-scroll`)
- @if breakpoint-max($bp, $grid-breakpoints) != null {
+ @if breakpoints.breakpoint-max($bp, settings.$grid-breakpoints) != null {
.table-scroll-#{$bp} {
- @include media-breakpoint-down($bp) {
- @include table-scroll();
+ @include breakpoints.media-breakpoint-down($bp) {
+ @include tables.table-scroll();
}
}
}
diff --git a/scss/core/_typography.scss b/scss/core/_typography.scss
index d6e06c264..95a361de6 100644
--- a/scss/core/_typography.scss
+++ b/scss/core/_typography.scss
@@ -1,6 +1,12 @@
-@if $enable-typography {
+@forward "reboot";
+@use "../mixins/font-size";
+@use "../mixins/lists";
+@use "../settings";
+@use "../settings-options";
+
+@if settings-options.$enable-typography {
// Headings
- @if $enable-typography-headings {
+ @if settings-options.$enable-typography-headings {
.h1 {
@extend h1;
}
@@ -27,60 +33,60 @@
}
// Lead in
- @if $enable-typography-lead {
+ @if settings-options.$enable-typography-lead {
.lead {
- @include font-size($lead-font-size);
- font-weight: $lead-font-weight;
- line-height: $lead-line-height;
+ @include font-size.font-size(settings.$lead-font-size);
+ font-weight: settings.$lead-font-weight;
+ line-height: settings.$lead-line-height;
}
}
// Emphasis
- @if $enable-typography-small {
+ @if settings-options.$enable-typography-small {
.small {
@extend small;
}
}
- @if $enable-typography-mark {
+ @if settings-options.$enable-typography-mark {
.mark {
@extend mark;
}
}
// Lists
- @if $enable-typography-list-unstyled {
+ @if settings-options.$enable-typography-list-unstyled {
.list-unstyled {
- @include list-unstyled();
+ @include lists.list-unstyled();
}
}
// Abbr extension
- @if $enable-typography-initialism {
+ @if settings-options.$enable-typography-initialism {
.initialism {
- @include font-size($initialism-font-size);
+ @include font-size.font-size(settings.$initialism-font-size);
text-transform: uppercase;
}
}
// Blockquotes
- @if $enable-typography-blockquote {
+ @if settings-options.$enable-typography-blockquote {
.blockquote {
- margin: $blockquote-margin;
- @include font-size($blockquote-font-size);
- color: $blockquote-color;
+ margin: settings.$blockquote-margin;
+ @include font-size.font-size(settings.$blockquote-font-size);
+ color: settings.$blockquote-color;
> :last-child {
margin-bottom: 0;
}
}
.blockquote-footer {
- margin: $blockquote-footer-margin;
- @include font-size($blockquote-footer-font-size);
- color: $blockquote-footer-color;
+ margin: settings.$blockquote-footer-margin;
+ @include font-size.font-size(settings.$blockquote-footer-font-size);
+ color: settings.$blockquote-footer-color;
&::before {
- content: $blockquote-footer-content;
+ content: settings.$blockquote-footer-content;
}
}
}
diff --git a/scss/figuration.scss b/scss/figuration.scss
index 6d0a196b2..0a520cd0a 100644
--- a/scss/figuration.scss
+++ b/scss/figuration.scss
@@ -6,60 +6,62 @@
*/
// Functions
-@import "functions";
+@forward "functions";
// Settings variables
-@import "settings";
+@forward "settings";
+@forward "settings-colors";
+@forward "settings-encode";
// Enable/disable granular options
-@import "settings-options";
+@forward "settings-options";
// Mixins
-@import "mixins";
+@forward "mixins";
// Core CSS items - extend on the base HTML
-@import "core/root";
-@import "core/reboot";
-@import "core/typography";
-@import "core/code";
-@import "core/images";
-@import "core/tables";
-@import "forms";
-@import "core/buttons";
+@use "core/root";
+@use "core/reboot";
+@use "core/typography";
+@use "core/code";
+@use "core/images";
+@use "core/tables";
+@use "forms";
+@use "core/buttons";
// Components - additional functionality and layout
-@import "component/container";
-@import "component/grid";
-@import "component/animation";
-@import "component/caret";
-@import "component/close";
-@import "component/drag";
-@import "component/progress";
-@import "component/list";
-@import "component/button-group";
-@import "component/input-group";
-@import "component/breadcrumb";
-@import "component/pagination";
-@import "component/dropdown";
-@import "component/nav";
-@import "component/navbar";
-@import "component/jumbotron";
-@import "component/badge";
-@import "component/media";
-@import "component/card";
-@import "component/alert";
-@import "component/loader";
-@import "component/placeholder";
+@use "component/container";
+@use "component/grid";
+@use "component/animation";
+@use "component/caret";
+@use "component/close";
+@use "component/drag";
+@use "component/progress";
+@use "component/list";
+@use "component/button-group";
+@use "component/input-group";
+@use "component/breadcrumb";
+@use "component/pagination";
+@use "component/dropdown";
+@use "component/nav";
+@use "component/navbar";
+@use "component/jumbotron";
+@use "component/badge";
+@use "component/media";
+@use "component/card";
+@use "component/alert";
+@use "component/loader";
+@use "component/placeholder";
// Components w/ JavaScript
-@import "component/offcanvas";
-@import "component/modal";
-@import "component/tooltip";
-@import "component/popover";
+@use "component/offcanvas";
+@use "component/modal";
+@use "component/tooltip";
+@use "component/popover";
//@import "component/player"; -- Create base CSS ?
// Utility classes
-@import "utilities";
+@use "utilities";
// Print overrides
-@import "core/print";
+@use "core/print";
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index f1f2fc73d..40bc2a67f 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -1,23 +1,30 @@
-@if $enable-form {
+@use "../functions/math";
+@use "../mixins/border";
+@use "../mixins/box-shadow";
+@use "../mixins/transition";
+@use "../settings";
+@use "../settings-options";
+
+@if settings-options.$enable-form {
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
- @if $enable-form-check {
+ @if settings-options.$enable-form-check {
.form-check {
display: block;
- min-height: calc(#{$line-height-base} * 1em); // stylelint-disable-line function-disallowed-list
- padding-left: $form-check-gutter;
- margin-bottom: $form-check-margin-bottom;
+ min-height: calc(#{settings.$line-height-base} * 1em); // stylelint-disable-line function-disallowed-list
+ padding-left: settings.$form-check-gutter;
+ margin-bottom: settings.$form-check-margin-bottom;
> input {
- margin-left: -$form-check-gutter;
+ margin-left: -(settings.$form-check-gutter);
// stylelint-disable selector-no-qualifying-type
&[disabled],
&:disabled {
~ .form-check-label {
- opacity: $form-check-label-disabled-opacity;
+ opacity: settings.$form-check-label-disabled-opacity;
}
// Get custom input to roughly match the parent label's opacity
// Fixes issue with not going semi-transparent in disabled fieldsets
@@ -30,17 +37,17 @@
}
}
- @if $enable-form-check-reverse {
+ @if settings-options.$enable-form-check-reverse {
.form-check-reverse {
&.form-check {
- padding-right: $form-check-gutter;
+ padding-right: settings.$form-check-gutter;
padding-left: 0;
text-align: right;
> input {
float: right;
- margin-top: calc((1em * #{$line-height-base} - #{$input-checkradio-size}) * .5); // stylelint-disable-line function-disallowed-list
- margin-right: -$form-check-gutter;
+ margin-top: calc((1em * #{settings.$line-height-base} - #{settings.$input-checkradio-size}) * .5); // stylelint-disable-line function-disallowed-list
+ margin-right: -(settings.$form-check-gutter);
margin-left: 0;
}
}
@@ -50,9 +57,9 @@
.form-check-label {
display: inline;
margin-bottom: 0; // Override default ` |