@clayui/css 3.159.0 → 3.161.0

package/src/scss/cadmin/variables/_globals-z-index.scss

@@ -1,29 +1,52 @@
 $cadmin-zindex-dropdown: 1000 !default;
+
 $cadmin-zindex-sticky: 989 !default;
+
 $cadmin-zindex-fixed: 1030 !default;
+
 $cadmin-zindex-modal-backdrop: 1040 !default;
 $cadmin-zindex-modal: 1050 !default;
+
 $cadmin-zindex-popover: 1060 !default;
+
 $cadmin-zindex-tooltip: 1070 !default;
 
 $cadmin-zindex-alert-notifications: 5000 !default;
+
 $cadmin-zindex-clay-range-input-form-control: 1 !default;
+
 $cadmin-zindex-input-group-hover: 3 !default;
-$cadmin-zindex-input-group-focus: $cadmin-zindex-input-group-hover + 1 !default; // 4
+
+$cadmin-zindex-input-group-focus: calc(
+	#{$cadmin-zindex-input-group-hover} + 1
+) !default; // 4
+
 $cadmin-zindex-navbar-collapse-absolute: 500 !default;
+
 $cadmin-zindex-navbar-overlay: 450 !default;
+
 $cadmin-zindex-navbar-toggler-focus: 525 !default;
-$cadmin-zindex-menubar-vertical-expand-md-collapse-mobile: $cadmin-zindex-navbar-collapse-absolute -
-	1 !default; // 499
-$cadmin-zindex-menubar-vertical-expand-lg-collapse-mobile: $cadmin-zindex-navbar-collapse-absolute -
-	1 !default; // 499
+
+$cadmin-zindex-menubar-vertical-expand-md-collapse-mobile: calc(
+	#{$cadmin-zindex-navbar-collapse-absolute} - 1
+) !default; // 499
+
+$cadmin-zindex-menubar-vertical-expand-lg-collapse-mobile: calc(
+	#{$cadmin-zindex-navbar-collapse-absolute} - 1
+) !default; // 499
+
 $cadmin-zindex-pagination-link-focus: 4 !default;
+
 $cadmin-zindex-pagination-link-active: 3 !default;
+
 $cadmin-zindex-pagination-link-disabled: 0 !default;
+
 $cadmin-zindex-panel-header-link-focus: 1 !default;
+
 $cadmin-zindex-sidenav: calc(#{$cadmin-zindex-dropdown} - 25) !default; // 975
 
 $cadmin-zindex-c-slideout: $cadmin-zindex-sidenav !default; // 975
+
 $cadmin-zindex-c-slideout-height-full: calc(
 	#{$cadmin-zindex-fixed} + 5
 ) !default; // 1035

package/src/scss/cadmin/variables/_globals.scss

@@ -10,9 +10,9 @@ $cadmin-clay-unset-placeholder: clay-unset-placeholder !default;
 
 // Settings
 
+$cadmin-enable-c-inner: true !default;
 $cadmin-enable-lexicon-flat-colors: true !default;
 $cadmin-enable-scaling-components: true !default;
-$cadmin-enable-c-inner: true !default;
 
 $cadmin-enable-focus-visible: true !default;
 
@@ -51,6 +51,7 @@ $cadmin-enable-hover-media-query: false !default;
 $cadmin-selector: ':not(#__):not(#___)' !default;
 
 $cadmin-white: #fff !default;
+
 $cadmin-gray-100: #f7f8f9 !default;
 $cadmin-gray-200: #f1f2f5 !default;
 $cadmin-gray-300: #e7e7ed !default;
@@ -60,6 +61,7 @@ $cadmin-gray-600: #6b6c7e !default;
 $cadmin-gray-700: #495057 !default;
 $cadmin-gray-800: #393a4a !default;
 $cadmin-gray-900: #272833 !default;
+
 $cadmin-black: #000 !default;
 
 $cadmin-grays: () !default;
@@ -78,130 +80,140 @@ $cadmin-grays: map-merge(
 	$cadmin-grays
 );
 
-$cadmin-blue-d4: #004799 !default;
-$cadmin-blue-d3: #0053b3 !default;
-$cadmin-blue-d2: #005fcc !default;
-$cadmin-blue-d1: #006be6 !default;
 $cadmin-blue: if($cadmin-enable-lexicon-flat-colors, #006eff, #0b5fff) !default;
+
+$cadmin-blue-d1: #006be6 !default;
+$cadmin-blue-d2: #005fcc !default;
+$cadmin-blue-d3: #0053b3 !default;
+$cadmin-blue-d4: #004799 !default;
 $cadmin-blue-l1: #338fff !default;
 $cadmin-blue-l2: #66abff !default;
 $cadmin-blue-l3: #97c5ff !default;
 $cadmin-blue-l4: #cce3ff !default;
 $cadmin-blue-l5: #e5f1ff !default;
 
-$cadmin-indigo-d4: #0017e5 !default;
-$cadmin-indigo-d3: #001aff !default;
-$cadmin-indigo-d2: #1a30ff !default;
-$cadmin-indigo-d1: #3347ff !default;
 $cadmin-indigo: if(
 	$cadmin-enable-lexicon-flat-colors,
 	#4d5fff,
 	#6610f2
 ) !default;
+
+$cadmin-indigo-d1: #3347ff !default;
+$cadmin-indigo-d2: #1a30ff !default;
+$cadmin-indigo-d3: #001aff !default;
+$cadmin-indigo-d4: #0017e5 !default;
 $cadmin-indigo-l1: #808cff !default;
 $cadmin-indigo-l2: #99a3ff !default;
 $cadmin-indigo-l3: #b2baff !default;
 $cadmin-indigo-l4: #ccd1ff !default;
 $cadmin-indigo-l5: #e5e8ff !default;
 
-$cadmin-purple-d4: #7700cc !default;
-$cadmin-purple-d3: #8600e6 !default;
-$cadmin-purple-d2: #9500ff !default;
-$cadmin-purple-d1: #9f1aff !default;
 $cadmin-purple: if(
 	$cadmin-enable-lexicon-flat-colors,
 	#aa33ff,
 	#6f42c1
 ) !default;
+
+$cadmin-purple-d1: #9f1aff !default;
+$cadmin-purple-d2: #9500ff !default;
+$cadmin-purple-d3: #8600e6 !default;
+$cadmin-purple-d4: #7700cc !default;
 $cadmin-purple-l1: #bf66ff !default;
 $cadmin-purple-l2: #ca80ff !default;
 $cadmin-purple-l3: #d499ff !default;
 $cadmin-purple-l4: #dfb3ff !default;
 $cadmin-purple-l5: #f2e5ff !default;
 
-$cadmin-pink-d4: #800048 !default;
-$cadmin-pink-d3: #990057 !default;
-$cadmin-pink-d2: #b30065 !default;
-$cadmin-pink-d1: #cc0074 !default;
 $cadmin-pink: if($cadmin-enable-lexicon-flat-colors, #e50082, #e83e8c) !default;
+
+$cadmin-pink-d1: #cc0074 !default;
+$cadmin-pink-d2: #b30065 !default;
+$cadmin-pink-d3: #990057 !default;
+$cadmin-pink-d4: #800048 !default;
 $cadmin-pink-l1: #ff4db2 !default;
 $cadmin-pink-l2: #ff80c8 !default;
 $cadmin-pink-l3: #ff99d3 !default;
 $cadmin-pink-l4: #ffb3de !default;
 $cadmin-pink-l5: #ffe5f4 !default;
 
-$cadmin-red-d4: #800000 !default;
-$cadmin-red-d3: #990000 !default;
-$cadmin-red-d2: #b30000 !default;
-$cadmin-red-d1: #cc0000 !default;
 $cadmin-red: if($cadmin-enable-lexicon-flat-colors, #e60000, #da1414) !default;
+
+$cadmin-red-d1: #cc0000 !default;
+$cadmin-red-d2: #b30000 !default;
+$cadmin-red-d3: #990000 !default;
+$cadmin-red-d4: #800000 !default;
 $cadmin-red-l1: #ff4d4d !default;
 $cadmin-red-l2: #ff6666 !default;
 $cadmin-red-l3: #ff8080 !default;
 $cadmin-red-l4: #ff9999 !default;
 $cadmin-red-l5: #ffe5e5 !default;
 
-$cadmin-orange-d4: #662700 !default;
-$cadmin-orange-d3: #803100 !default;
-$cadmin-orange-d2: #993b00 !default;
-$cadmin-orange-d1: #b34400 !default;
 $cadmin-orange: if(
 	$cadmin-enable-lexicon-flat-colors,
 	#cc4e00,
 	#b95000
 ) !default;
+
+$cadmin-orange-d1: #b34400 !default;
+$cadmin-orange-d2: #993b00 !default;
+$cadmin-orange-d3: #803100 !default;
+$cadmin-orange-d4: #662700 !default;
 $cadmin-orange-l1: #ff6200 !default;
 $cadmin-orange-l2: #ff8133 !default;
 $cadmin-orange-l3: #ffa166 !default;
 $cadmin-orange-l4: #ffc099 !default;
 $cadmin-orange-l5: #fff0e5 !default;
 
-$cadmin-yellow-d4: #997000 !default;
-$cadmin-yellow-d3: #b38900 !default;
-$cadmin-yellow-d2: #cc9600 !default;
-$cadmin-yellow-d1: #e6a800 !default;
 $cadmin-yellow: if(
 	$cadmin-enable-lexicon-flat-colors,
 	#ffbb00,
 	#ffc107
 ) !default;
+
+$cadmin-yellow-d1: #e6a800 !default;
+$cadmin-yellow-d2: #cc9600 !default;
+$cadmin-yellow-d3: #b38900 !default;
+$cadmin-yellow-d4: #997000 !default;
 $cadmin-yellow-l1: #ffc933 !default;
 $cadmin-yellow-l2: #ffd666 !default;
 $cadmin-yellow-l3: #ffe499 !default;
 $cadmin-yellow-l4: #fff1cc !default;
 $cadmin-yellow-l5: #fff8e5 !default;
 
-$cadmin-green-d4: #162d06 !default;
-$cadmin-green-d3: #22430a !default;
-$cadmin-green-d2: #2e590d !default;
-$cadmin-green-d1: #397010 !default;
 $cadmin-green: if(
 	$cadmin-enable-lexicon-flat-colors,
 	#458613,
 	#287d3d
 ) !default;
+
+$cadmin-green-d1: #397010 !default;
+$cadmin-green-d2: #2e590d !default;
+$cadmin-green-d3: #22430a !default;
+$cadmin-green-d4: #162d06 !default;
 $cadmin-green-l1: #53a117 !default;
 $cadmin-green-l2: #67c91d !default;
 $cadmin-green-l3: #81e236 !default;
 $cadmin-green-l4: #9de963 !default;
 $cadmin-green-l5: #f1fce9 !default;
 
-$cadmin-teal-d4: #092a25 !default;
-$cadmin-teal-d3: #0d3f37 !default;
-$cadmin-teal-d2: #125449 !default;
-$cadmin-teal-d1: #16695b !default;
 $cadmin-teal: if($cadmin-enable-lexicon-flat-colors, #1b7e6e, #20c997) !default;
+
+$cadmin-teal-d1: #16695b !default;
+$cadmin-teal-d2: #125449 !default;
+$cadmin-teal-d3: #0d3f37 !default;
+$cadmin-teal-d4: #092a25 !default;
 $cadmin-teal-l1: #24a892 !default;
 $cadmin-teal-l2: #42d7be !default;
 $cadmin-teal-l3: #6ce0cc !default;
 $cadmin-teal-l4: #96e9db !default;
 $cadmin-teal-l5: #eafbf8 !default;
 
-$cadmin-cyan-d4: #00334d !default;
-$cadmin-cyan-d3: #004466 !default;
-$cadmin-cyan-d2: #005580 !default;
-$cadmin-cyan-d1: #006699 !default;
 $cadmin-cyan: if($cadmin-enable-lexicon-flat-colors, #0077b3, #17a2b8) !default;
+
+$cadmin-cyan-d1: #006699 !default;
+$cadmin-cyan-d2: #005580 !default;
+$cadmin-cyan-d3: #004466 !default;
+$cadmin-cyan-d4: #00334d !default;
 $cadmin-cyan-l1: #0099e6 !default;
 $cadmin-cyan-l2: #33bbff !default;
 $cadmin-cyan-l3: #66ccff !default;
@@ -212,23 +224,36 @@ $cadmin-colors: () !default;
 $cadmin-colors: map-merge(
 	(
 		'blue': $cadmin-blue,
+
 		'indigo': $cadmin-indigo,
+
 		'purple': $cadmin-purple,
+
 		'pink': $cadmin-pink,
+
 		'red': $cadmin-red,
+
 		'orange': $cadmin-orange,
+
 		'yellow': $cadmin-yellow,
+
 		'green': $cadmin-green,
+
 		'teal': $cadmin-teal,
+
 		'cyan': $cadmin-cyan,
+
 		'white': $cadmin-white,
+
 		'gray': $cadmin-gray-600,
+
 		'gray-dark': $cadmin-gray-800,
 	),
 	$cadmin-colors
 );
 
 $cadmin-primary: #0b5fff !default;
+
 $cadmin-primary-d1: clay-darken($cadmin-primary, 5.1) !default;
 $cadmin-primary-d2: clay-darken($cadmin-primary, 10) !default;
 $cadmin-primary-l0: clay-lighten($cadmin-primary, 14.9) !default;
@@ -237,6 +262,7 @@ $cadmin-primary-l2: clay-lighten($cadmin-primary, 32.94) !default;
 $cadmin-primary-l3: clay-lighten($cadmin-primary, 44.9) !default;
 
 $cadmin-secondary: #6b6c7e !default;
+
 $cadmin-secondary-d1: clay-darken(
 	clay-saturate($cadmin-secondary, 4.82),
 	20
@@ -263,6 +289,7 @@ $cadmin-secondary-l3: clay-lighten(
 ) !default;
 
 $cadmin-info: #2e5aac !default;
+
 $cadmin-info-d1: clay-darken($cadmin-info, 5) !default;
 $cadmin-info-d2: clay-darken($cadmin-info, 10) !default;
 $cadmin-info-l1: clay-lighten(
@@ -275,6 +302,7 @@ $cadmin-info-l2: clay-lighten(
 ) !default;
 
 $cadmin-success: #287d3c !default;
+
 $cadmin-success-d1: clay-darken($cadmin-success, 5) !default;
 $cadmin-success-d2: clay-darken($cadmin-success, 10) !default;
 $cadmin-success-l1: clay-lighten(
@@ -287,12 +315,14 @@ $cadmin-success-l2: clay-lighten(
 ) !default;
 
 $cadmin-warning: #b95000 !default;
+
 $cadmin-warning-d1: clay-darken($cadmin-warning, 5.1) !default;
 $cadmin-warning-d2: clay-darken($cadmin-warning, 10) !default;
 $cadmin-warning-l1: clay-lighten($cadmin-warning, 24.9) !default;
 $cadmin-warning-l2: clay-lighten($cadmin-warning, 60) !default;
 
 $cadmin-danger: #da1414 !default;
+
 $cadmin-danger-d1: clay-darken($cadmin-danger, 5) !default;
 $cadmin-danger-d2: clay-darken($cadmin-danger, 10) !default;
 $cadmin-danger-l1: clay-lighten(
@@ -305,6 +335,7 @@ $cadmin-danger-l2: clay-lighten(
 ) !default;
 
 $cadmin-light: #f1f2f5 !default;
+
 $cadmin-light-d1: clay-darken($cadmin-light, 5.1) !default;
 $cadmin-light-d2: clay-darken($cadmin-light, 10) !default;
 $cadmin-light-l1: clay-lighten(
@@ -317,6 +348,7 @@ $cadmin-light-l2: clay-lighten(
 ) !default;
 
 $cadmin-dark: #272833 !default;
+
 $cadmin-dark-d1: clay-darken($cadmin-dark, 5.1) !default;
 $cadmin-dark-d2: clay-darken($cadmin-dark, 10) !default;
 $cadmin-dark-l1: clay-lighten(clay-saturate($cadmin-dark, 0.18), 4.12) !default;
@@ -329,12 +361,19 @@ $cadmin-theme-colors: () !default;
 $cadmin-theme-colors: map-merge(
 	(
 		'primary': $cadmin-primary,
+
 		'secondary': $cadmin-secondary,
+
 		'success': $cadmin-success,
+
 		'info': $cadmin-info,
+
 		'warning': $cadmin-warning,
+
 		'danger': $cadmin-danger,
+
 		'light': $cadmin-light,
+
 		'dark': $cadmin-dark,
 	),
 	$cadmin-theme-colors
@@ -402,22 +441,23 @@ $cadmin-border-radius: 4px !default; // 4px
 $cadmin-border-radius-lg: 6px !default; // 6px
 $cadmin-border-radius-sm: 3px !default; // 3px
 
+$cadmin-rounded-0-border-radius: 0px !default;
 $cadmin-rounded-border-radius: $cadmin-border-radius !default;
 $cadmin-rounded-circle-border-radius: 5000px !default;
-$cadmin-rounded-0-border-radius: 0 !default;
 $cadmin-rounded-pill: 800px !default;
 
-$cadmin-box-shadow-sm: 0 2px 4px rgba($cadmin-black, 0.075) !default;
 $cadmin-box-shadow: 0 8px 16px rgba($cadmin-black, 0.15) !default;
+$cadmin-box-shadow-sm: 0 2px 4px rgba($cadmin-black, 0.075) !default;
 $cadmin-box-shadow-lg: 0 16px 48px rgba($cadmin-black, 0.175) !default;
 
 $cadmin-caret-width: 0.3em !default;
-$cadmin-caret-vertical-align: $cadmin-caret-width * 0.85 !default;
-$cadmin-caret-spacing: $cadmin-caret-width * 0.85 !default;
+
+$cadmin-caret-spacing: calc(#{$cadmin-caret-width} * 0.85) !default;
+$cadmin-caret-vertical-align: calc(#{$cadmin-caret-width} * 0.85) !default;
 
 $cadmin-transition-base: all 0.2s ease-in-out !default;
-$cadmin-transition-fade: opacity 0.15s linear !default;
 $cadmin-transition-collapse: height 0.35s ease !default;
+$cadmin-transition-fade: opacity 0.15s linear !default;
 
 $cadmin-embed-responsive-aspect-ratios: () !default;
 $cadmin-embed-responsive-aspect-ratios: join(
@@ -446,15 +486,20 @@ $cadmin-component-disabled-opacity: 0.4 !default;
 // Cursors
 
 $cadmin-link-cursor: pointer !default;
+
 $cadmin-disabled-cursor: not-allowed !default;
 
 // Grid
 
 $cadmin-grid-breakpoints: (
 	xs: 0,
+
 	sm: 576px,
+
 	md: 768px,
+
 	lg: 992px,
+
 	xl: 1280px,
 ) !default;
 
@@ -480,8 +525,8 @@ $cadmin-clay-container: map-merge(
 	(
 		margin-left: auto,
 		margin-right: auto,
-		padding-left: $cadmin-grid-gutter-width * 0.5,
-		padding-right: $cadmin-grid-gutter-width * 0.5,
+		padding-left: calc(#{$cadmin-grid-gutter-width} * 0.5),
+		padding-right: calc(#{$cadmin-grid-gutter-width} * 0.5),
 		width: 100%,
 	),
 	$cadmin-clay-container
@@ -492,8 +537,8 @@ $cadmin-clay-container-fluid: map-merge(
 	(
 		margin-left: auto,
 		margin-right: auto,
-		padding-left: $cadmin-grid-gutter-width * 0.5,
-		padding-right: $cadmin-grid-gutter-width * 0.5,
+		padding-left: calc(#{$cadmin-grid-gutter-width} * 0.5),
+		padding-right: calc(#{$cadmin-grid-gutter-width} * 0.5),
 		width: 100%,
 	),
 	$cadmin-clay-container-fluid
@@ -501,10 +546,15 @@ $cadmin-clay-container-fluid: map-merge(
 
 $cadmin-container-max-widths: (
 	sm: 540px,
+
 	md: 720px,
+
 	lg: 960px,
+
 	xl: 1248px,
+
 	xxl: 1392px,
+
 	xxxl: 1872px,
 ) !default;
 
@@ -556,7 +606,9 @@ $cadmin-font-family-sans-serif:
 	'Apple Color Emoji',
 	'Segoe UI Emoji',
 	'Segoe UI Symbol' !default;
+
 $cadmin-font-family-serif: Georgia, 'Times New Roman', Times, serif !default;
+
 $cadmin-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
 	'Liberation Mono', 'Courier New', monospace !default;
 
@@ -570,10 +622,15 @@ $cadmin-font-size-base-mobile: $cadmin-font-size-base !default;
 $cadmin-font-size-lg-mobile: $cadmin-font-size-lg !default;
 
 $cadmin-font-weight-lighter: lighter !default;
+
 $cadmin-font-weight-light: 300 !default;
+
 $cadmin-font-weight-normal: 400 !default;
+
 $cadmin-font-weight-semi-bold: 600 !default;
+
 $cadmin-font-weight-bold: 700 !default;
+
 $cadmin-font-weight-bolder: 900 !default;
 
 $cadmin-font-weight-base: $cadmin-font-weight-normal !default;
@@ -582,12 +639,14 @@ $cadmin-line-height-base: 1.5 !default;
 // h1, .h1
 
 $cadmin-h1-font-size: 26px !default; // 26px
+
 $cadmin-h1-font-size-mobile: null !default;
 
 $cadmin-h1: () !default;
 $cadmin-h1: map-deep-merge(
 	(
 		font-size: $cadmin-h1-font-size,
+
 		media-breakpoint-down: (
 			sm: (
 				font-size: $cadmin-h1-font-size-mobile,
@@ -600,12 +659,14 @@ $cadmin-h1: map-deep-merge(
 // h2, .h2
 
 $cadmin-h2-font-size: 22px !default; // 22px
+
 $cadmin-h2-font-size-mobile: null !default;
 
 $cadmin-h2: () !default;
 $cadmin-h2: map-deep-merge(
 	(
 		font-size: $cadmin-h2-font-size,
+
 		media-breakpoint-down: (
 			sm: (
 				font-size: $cadmin-h2-font-size-mobile,
@@ -618,12 +679,14 @@ $cadmin-h2: map-deep-merge(
 // h3, .h3
 
 $cadmin-h3-font-size: 19px !default; // 19px
+
 $cadmin-h3-font-size-mobile: null !default;
 
 $cadmin-h3: () !default;
 $cadmin-h3: map-deep-merge(
 	(
 		font-size: $cadmin-h3-font-size,
+
 		media-breakpoint-down: (
 			sm: (
 				font-size: $cadmin-h3-font-size-mobile,
@@ -636,12 +699,14 @@ $cadmin-h3: map-deep-merge(
 // h4, .h4
 
 $cadmin-h4-font-size: 16px !default; // 16px
+
 $cadmin-h4-font-size-mobile: null !default;
 
 $cadmin-h4: () !default;
 $cadmin-h4: map-deep-merge(
 	(
 		font-size: $cadmin-h4-font-size,
+
 		media-breakpoint-down: (
 			sm: (
 				font-size: $cadmin-h4-font-size-mobile,
@@ -654,12 +719,14 @@ $cadmin-h4: map-deep-merge(
 // h5, .h5
 
 $cadmin-h5-font-size: 14px !default; // 14px
+
 $cadmin-h5-font-size-mobile: null !default;
 
 $cadmin-h5: () !default;
 $cadmin-h5: map-deep-merge(
 	(
 		font-size: $cadmin-h5-font-size,
+
 		media-breakpoint-down: (
 			sm: (
 				font-size: $cadmin-h5-font-size-mobile,
@@ -672,12 +739,14 @@ $cadmin-h5: map-deep-merge(
 // h6, .h6
 
 $cadmin-h6-font-size: 13px !default; // 13px
+
 $cadmin-h6-font-size-mobile: null !default;
 
 $cadmin-h6: () !default;
 $cadmin-h6: map-deep-merge(
 	(
 		font-size: $cadmin-h6-font-size,
+
 		media-breakpoint-down: (
 			sm: (
 				font-size: $cadmin-h6-font-size-mobile,
@@ -689,11 +758,11 @@ $cadmin-h6: map-deep-merge(
 
 // Headings h1-h6
 
-$cadmin-headings-margin-bottom: $cadmin-spacer * 0.5 !default;
+$cadmin-headings-color: null !default;
 $cadmin-headings-font-family: null !default;
 $cadmin-headings-font-weight: $cadmin-font-weight-bold !default;
 $cadmin-headings-line-height: 1.2 !default;
-$cadmin-headings-color: null !default;
+$cadmin-headings-margin-bottom: calc(#{$cadmin-spacer} * 0.5) !default;
 
 $cadmin-headings: () !default;
 $cadmin-headings: map-deep-merge(
@@ -703,7 +772,7 @@ $cadmin-headings: map-deep-merge(
 		font-weight: $cadmin-headings-font-weight,
 		line-height: $cadmin-headings-line-height,
 		margin-bottom: $cadmin-headings-margin-bottom,
-		margin-top: 0,
+		margin-top: 0px,
 	),
 	$cadmin-headings
 );
@@ -718,7 +787,7 @@ $cadmin: map-merge(
 		animation: none,
 		background-color: transparent,
 		background-image: none,
-		border-width: 0,
+		border-width: 0px,
 		box-shadow: none,
 		box-sizing: border-box,
 		color: $cadmin-gray-900,
@@ -730,16 +799,16 @@ $cadmin: map-merge(
 		height: auto,
 		letter-spacing: normal,
 		line-height: $cadmin-line-height-base,
-		margin: 0,
+		margin: 0px,
 		max-height: none,
 		max-width: none,
-		min-height: 0,
-		min-width: 0,
-		padding: 0,
+		min-height: 0px,
+		min-width: 0px,
+		padding: 0px,
 		text-align: left,
 		text-decoration: none,
 		text-decoration-color: currentcolor,
-		text-indent: 0,
+		text-indent: 0px,
 		text-shadow: none,
 		text-transform: none,
 		transform: none,
@@ -762,7 +831,7 @@ $cadmin-reset: map-merge(
 		animation: none,
 		background-color: transparent,
 		background-image: none,
-		border-width: 0,
+		border-width: 0px,
 		box-shadow: none,
 		box-sizing: border-box,
 		color: inherit,
@@ -774,13 +843,13 @@ $cadmin-reset: map-merge(
 		height: auto,
 		letter-spacing: inherit,
 		line-height: inherit,
-		margin: 0,
+		margin: 0px,
 		max-height: none,
 		max-width: none,
-		min-height: 0,
-		min-width: 0,
+		min-height: 0px,
+		min-width: 0px,
 		overflow-wrap: inherit,
-		padding: 0,
+		padding: 0px,
 		text-align: inherit,
 		text-decoration: inherit,
 		text-decoration-color: inherit,
@@ -807,10 +876,7 @@ $cadmin-body-color: $cadmin-dark-d1 !default;
 
 $cadmin-c-button-base: () !default;
 $cadmin-c-button-base: map-merge(
-	(
-		cursor: $cadmin-link-cursor,
-		-webkit-appearance: button,
-	),
+	(-webkit-appearance: button, cursor: $cadmin-link-cursor),
 	$cadmin-c-button-base
 );
 
@@ -818,6 +884,7 @@ $cadmin-c-button-base: map-merge(
 
 $cadmin-link-color: $cadmin-primary !default;
 $cadmin-link-decoration: none !default;
+
 $cadmin-link-hover-color: $cadmin-primary-d2 !default;
 $cadmin-link-hover-decoration: underline !default;
 
@@ -834,6 +901,7 @@ $cadmin-link: map-deep-merge(
 			color: $cadmin-link-hover-color,
 			text-decoration: $cadmin-link-hover-decoration,
 		),
+
 		focus: (
 			box-shadow: $cadmin-component-focus-box-shadow,
 			outline: 0,
@@ -914,7 +982,7 @@ $cadmin-display-4: map-deep-merge(
 	$cadmin-display-4
 );
 
-$cadmin-lead-font-size: $cadmin-font-size-base * 1.25 !default;
+$cadmin-lead-font-size: calc(#{$cadmin-font-size-base} * 1.25) !default;
 $cadmin-lead-font-weight: 300 !default;
 
 $cadmin-small-font-size: 80% !default;
@@ -923,7 +991,8 @@ $cadmin-text-muted: $cadmin-gray-500 !default;
 
 $cadmin-blockquote-small-color: $cadmin-gray-600 !default;
 $cadmin-blockquote-small-font-size: $cadmin-small-font-size !default;
-$cadmin-blockquote-font-size: $cadmin-font-size-base * 1.25 !default;
+
+$cadmin-blockquote-font-size: calc(#{$cadmin-font-size-base} * 1.25) !default;
 
 $cadmin-hr-border-color: rgba($cadmin-black, 0.1) !default;
 $cadmin-hr-border-width: $cadmin-border-width !default;
@@ -962,11 +1031,11 @@ $cadmin-code-color: $cadmin-red !default;
 $cadmin-code-font-size: 87.5% !default;
 
 $cadmin-kbd-bg: $cadmin-gray-900 !default;
+$cadmin-kbd-box-shadow: inset 0 -1.6px 0 rgba($cadmin-black, 0.25) !default;
 $cadmin-kbd-color: $cadmin-white !default;
 $cadmin-kbd-font-size: $cadmin-code-font-size !default;
 $cadmin-kbd-padding-x: 6.4px !default;
 $cadmin-kbd-padding-y: 3.2px !default;
-$cadmin-kbd-box-shadow: inset 0 -1.6px 0 rgba($cadmin-black, 0.25) !default;
 
 $cadmin-nested-kbd-font-weight: $cadmin-font-weight-bold !default;
 
@@ -988,6 +1057,7 @@ $cadmin-input-btn-padding-y: 6px !default;
 $cadmin-input-btn-focus-width: 3.2px !default;
 
 $cadmin-input-btn-focus-color: rgba($cadmin-component-active-bg, 0.25) !default;
+
 $cadmin-input-btn-focus-box-shadow: 0 0 0 $cadmin-input-btn-focus-width
 	$cadmin-input-btn-focus-color !default;