|
@@ -26,7 +26,7 @@ $font-icons: () !default;
|
|
|
$font-family-sans-serif: unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}") 'Inter Var', Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
|
|
|
$font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Monaco, Consolas, Liberation Mono, Courier New, monospace !default;
|
|
|
$font-family-serif: "Georgia", "Times New Roman", times, serif !default;
|
|
|
-$font-family-comic: "Comic Sans MS", "Comic Sans", 'Chalkboard SE', 'Comic Neue', sans-serif, cursive !default;
|
|
|
+$font-family-comic: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", sans-serif, cursive !default;
|
|
|
|
|
|
//Icons
|
|
|
$icon-stroke-width: 1.5 !default;
|
|
@@ -52,9 +52,9 @@ $line-height-700: 3rem !default;
|
|
|
|
|
|
$font-size-base: 0.875rem !default;
|
|
|
|
|
|
-$spacing-wide: .04em !default;
|
|
|
+$spacing-wide: 0.04em !default;
|
|
|
$spacing-normal: 0 !default;
|
|
|
-$spacing-tight: -.04em !default;
|
|
|
+$spacing-tight: -0.04em !default;
|
|
|
|
|
|
$body-letter-spacing: 0 !default;
|
|
|
|
|
@@ -68,12 +68,12 @@ $headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
|
|
|
$headings-margin-bottom: var(--#{$prefix}spacer) !default;
|
|
|
|
|
|
$font-weights: (
|
|
|
- 'light': $font-weight-light,
|
|
|
- 'normal': $font-weight-normal,
|
|
|
- 'medium': $font-weight-medium,
|
|
|
- 'bold': $font-weight-bold,
|
|
|
- 'black': $font-weight-black,
|
|
|
- 'headings': $headings-font-weight,
|
|
|
+ "light": $font-weight-light,
|
|
|
+ "normal": $font-weight-normal,
|
|
|
+ "medium": $font-weight-medium,
|
|
|
+ "bold": $font-weight-bold,
|
|
|
+ "black": $font-weight-black,
|
|
|
+ "headings": $headings-font-weight,
|
|
|
) !default;
|
|
|
|
|
|
$line-height-base: divide(1.25rem, $font-size-base) !default;
|
|
@@ -99,8 +99,8 @@ $h5-line-height: 1rem !default;
|
|
|
$h6-font-size: 0.625rem !default;
|
|
|
$h6-line-height: 1rem !default;
|
|
|
|
|
|
-$font-size-reative-xs: .71428571em !default;
|
|
|
-$font-size-reative-sm: .85714285em !default;
|
|
|
+$font-size-reative-xs: 0.71428571em !default;
|
|
|
+$font-size-reative-sm: 0.85714285em !default;
|
|
|
$font-size-reative-md: 1em !default;
|
|
|
|
|
|
$font-sizes: (
|
|
@@ -146,7 +146,7 @@ $border-light-opacity: 0.08 !default;
|
|
|
$border-dark-opacity: 0.24 !default;
|
|
|
$border-active-opacity: 0.58 !default;
|
|
|
|
|
|
-$gray-50: #f9fafb !default;
|
|
|
+$gray-50: #f9fafb !default;
|
|
|
$gray-100: #f3f4f6 !default;
|
|
|
$gray-200: #e5e7eb !default;
|
|
|
$gray-300: #d1d5db !default;
|
|
@@ -210,7 +210,7 @@ $active-border-color: var(--#{$prefix}primary) !default;
|
|
|
$hover-bg: rgba(var(--#{$prefix}secondary-rgb), 0.08) !default;
|
|
|
|
|
|
$disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
|
|
|
-$disabled-color: color-transparent(var(--#{$prefix}body-color), .4) !default;
|
|
|
+$disabled-color: color-transparent(var(--#{$prefix}body-color), 0.4) !default;
|
|
|
|
|
|
$primary: $blue !default;
|
|
|
$secondary: $text-secondary !default;
|
|
@@ -341,7 +341,7 @@ $kbd-border-radius: var(--#{$prefix}border-radius) !default;
|
|
|
|
|
|
// Avatars
|
|
|
$avatar-size: 2.5rem !default;
|
|
|
-$avatar-status-size: .75rem !default;
|
|
|
+$avatar-status-size: 0.75rem !default;
|
|
|
$avatar-font-size: 1rem !default;
|
|
|
$avatar-icon-size: 1.5rem !default;
|
|
|
$avatar-brand-size: 1.25rem !default;
|
|
@@ -349,52 +349,52 @@ $avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
|
|
|
$avatar-sizes: (
|
|
|
"xxs": (
|
|
|
size: 1rem,
|
|
|
- font-size: .5rem,
|
|
|
- icon-size: .5rem,
|
|
|
- status-size: .25rem,
|
|
|
- brand-size: .5rem
|
|
|
+ font-size: 0.5rem,
|
|
|
+ icon-size: 0.5rem,
|
|
|
+ status-size: 0.25rem,
|
|
|
+ brand-size: 0.5rem,
|
|
|
),
|
|
|
"xs": (
|
|
|
size: 1.25rem,
|
|
|
font-size: $h6-font-size,
|
|
|
- icon-size: .75rem,
|
|
|
- status-size: .375rem,
|
|
|
- brand-size: .75rem
|
|
|
+ icon-size: 0.75rem,
|
|
|
+ status-size: 0.375rem,
|
|
|
+ brand-size: 0.75rem,
|
|
|
),
|
|
|
"sm": (
|
|
|
size: 2rem,
|
|
|
font-size: $h5-font-size,
|
|
|
icon-size: 1.5rem,
|
|
|
- status-size: .5rem,
|
|
|
- brand-size: 1rem
|
|
|
+ status-size: 0.5rem,
|
|
|
+ brand-size: 1rem,
|
|
|
),
|
|
|
"md": (
|
|
|
size: 2.5rem,
|
|
|
font-size: $h4-font-size,
|
|
|
icon-size: 1.5rem,
|
|
|
- status-size: .75rem,
|
|
|
- brand-size: 1.25rem
|
|
|
+ status-size: 0.75rem,
|
|
|
+ brand-size: 1.25rem,
|
|
|
),
|
|
|
"lg": (
|
|
|
size: 3rem,
|
|
|
font-size: $h2-font-size,
|
|
|
icon-size: 2rem,
|
|
|
- status-size: .75rem,
|
|
|
- brand-size: 1.25rem
|
|
|
+ status-size: 0.75rem,
|
|
|
+ brand-size: 1.25rem,
|
|
|
),
|
|
|
"xl": (
|
|
|
size: 5rem,
|
|
|
font-size: 2rem,
|
|
|
icon-size: 3rem,
|
|
|
status-size: 1rem,
|
|
|
- brand-size: 1.25rem
|
|
|
+ brand-size: 1.25rem,
|
|
|
),
|
|
|
"2xl": (
|
|
|
size: 7rem,
|
|
|
font-size: 3rem,
|
|
|
icon-size: 5rem,
|
|
|
status-size: 1rem,
|
|
|
- brand-size: 2rem
|
|
|
+ brand-size: 2rem,
|
|
|
),
|
|
|
) !default;
|
|
|
$avatar-border-radius: var(--#{$prefix}border-radius) !default;
|
|
@@ -586,41 +586,71 @@ $badge-color: var(--#{$prefix}secondary) !default;
|
|
|
$badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
|
|
|
|
|
|
// Buttons
|
|
|
-$input-btn-line-height: $line-height-base !default;
|
|
|
-$input-btn-font-size: $font-size-base !default;
|
|
|
-$input-btn-font-family: var(--#{$prefix}body-font-face) !default;
|
|
|
-$input-btn-padding-y: 0.5rem - 0.0625rem !default;
|
|
|
-$input-btn-icon-size: $icon-size !default;
|
|
|
+$input-btn-border-width: var(--#{$prefix}border-width) !default;
|
|
|
+$input-btn-font-family: var(--#{$prefix}body-font-family) !default;
|
|
|
+$input-btn-focus-width: 0.25rem !default;
|
|
|
|
|
|
+$input-btn-padding-y-sm: 0.3125rem !default;
|
|
|
+$input-btn-padding-x-sm: 0.5rem !default;
|
|
|
$input-btn-font-size-sm: $h5-font-size !default;
|
|
|
-$input-btn-padding-x-sm: 0.25rem !default;
|
|
|
-$input-btn-padding-y-sm: 0.125rem - 0.0625rem !default;
|
|
|
$input-btn-line-height-sm: divide(1rem, $input-btn-font-size-sm) !default;
|
|
|
$input-btn-icon-size-sm: 1rem !default;
|
|
|
|
|
|
-$input-btn-font-size-lg: $h2-font-size !default;
|
|
|
+$input-btn-padding-y: 0.5625rem !default;
|
|
|
+$input-btn-padding-x: 1rem !default;
|
|
|
+$input-btn-line-height: 1.25rem !default;
|
|
|
+$input-btn-font-size: $font-size-base !default;
|
|
|
+$input-btn-icon-size: $icon-size !default;
|
|
|
+
|
|
|
+$input-btn-padding-y-lg: 0.6875rem !default;
|
|
|
$input-btn-padding-x-lg: 1.5rem !default;
|
|
|
-$input-btn-padding-y-lg: 0.75rem - 0.0625rem !default;
|
|
|
-$input-btn-line-height-lg: divide(2rem, $input-btn-font-size-lg) !default;
|
|
|
-$input-btn-icon-size-lg: 2rem !default;
|
|
|
+$input-btn-line-height-lg: 1.5rem !default;
|
|
|
+$input-btn-font-size-lg: $h3-font-size !default;
|
|
|
+$input-btn-icon-size-lg: 1.5rem !default;
|
|
|
+
|
|
|
+$input-btn-padding-y-xl: 0.6875rem !default;
|
|
|
+$input-btn-padding-x-xl: 2rem !default;
|
|
|
+$input-btn-font-size-xl: $h1-font-size !default;
|
|
|
+$input-btn-line-height-xl: divide(2rem, $input-btn-font-size-lg) !default;
|
|
|
+$input-btn-icon-size-xl: 2rem !default;
|
|
|
|
|
|
-$input-btn-focus-width: 0.25rem !default;
|
|
|
|
|
|
// Inputs
|
|
|
$input-height: null !default;
|
|
|
$input-height-sm: null !default;
|
|
|
$input-height-lg: null !default;
|
|
|
$input-border-radius: var(--#{$prefix}border-radius) !default;
|
|
|
+$input-padding-y: $input-btn-padding-y !default;
|
|
|
+$input-padding-x: $input-btn-padding-x !default;
|
|
|
$input-color: var(--#{$prefix}body-color) !default;
|
|
|
$input-focus-color: var(--#{$prefix}body-color) !default;
|
|
|
$input-box-shadow: var(--#{$prefix}shadow-input) !default;
|
|
|
|
|
|
+$input-border-width: $input-btn-border-width !default;
|
|
|
+$input-line-height: $input-btn-line-height !default;
|
|
|
+$input-height-border: calc(#{$input-border-width} * 2) !default;
|
|
|
+
|
|
|
+$input-padding-y-sm: $input-btn-padding-y-sm !default;
|
|
|
+$input-padding-x-sm: $input-btn-padding-x-sm !default;
|
|
|
+$input-font-size-sm: $input-btn-font-size-sm !default;
|
|
|
+
|
|
|
+$input-padding-y-lg: $input-btn-padding-y-lg !default;
|
|
|
+$input-padding-x-lg: $input-btn-padding-x-lg !default;
|
|
|
+$input-font-size-lg: $input-btn-font-size-lg !default;
|
|
|
+
|
|
|
+$input-height-inner: add($input-line-height, calc($input-padding-y * 2)) !default;
|
|
|
+$input-height-inner-half: add($input-line-height, $input-padding-y) !default;
|
|
|
+$input-height-inner-quarter: add($input-line-height, calc($input-padding-y * 0.5)) !default;
|
|
|
+
|
|
|
+$input-height: add($input-line-height, add(calc($input-padding-y * 2), $input-height-border, false)) !default;
|
|
|
+$input-height-sm: add($input-line-height, add(calc($input-padding-y-sm * 2), $input-height-border, false)) !default;
|
|
|
+$input-height-lg: add($input-line-height, add(calc($input-padding-y-lg * 2), $input-height-border, false)) !default;
|
|
|
+
|
|
|
// Buttons
|
|
|
$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
|
|
|
$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
|
|
|
|
|
|
-$btn-disabled-opacity: .4 !default;
|
|
|
-$btn-padding-x: 1rem !default;
|
|
|
+$btn-disabled-opacity: 0.4 !default;
|
|
|
$btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
|
|
|
$btn-border-color: var(--#{$prefix}border-color) !default;
|
|
|
$btn-border-radius: var(--#{$prefix}border-radius) !default;
|
|
@@ -811,7 +841,7 @@ $navbar-toggler-focus-width: 0 !default;
|
|
|
$navbar-overlap-height: 9rem !default;
|
|
|
|
|
|
$navbar-nav-link-padding-x: $nav-link-padding-x !default;
|
|
|
-$navbar-nav-link-hover-bg: rgba(0, 0, 0, .04) !default;
|
|
|
+$navbar-nav-link-hover-bg: rgba(0, 0, 0, 0.04) !default;
|
|
|
|
|
|
$navbar-active-border-color: var(--#{$prefix}primary) !default;
|
|
|
|
|
@@ -828,8 +858,8 @@ $popover-bg: var(--#{$prefix}bg-surface) !default;
|
|
|
$popover-header-bg: transparent !default;
|
|
|
$popover-border-color: var(--#{$prefix}border-color) !default;
|
|
|
$popover-body-color: inherit !default;
|
|
|
-$popover-body-padding-x: .5rem !default;
|
|
|
-$popover-body-padding-y: .5rem !default;
|
|
|
+$popover-body-padding-x: 0.5rem !default;
|
|
|
+$popover-body-padding-y: 0.5rem !default;
|
|
|
$popover-box-shadow: var(--#{$prefix}shadow-lg) !default;
|
|
|
|
|
|
// Footer
|
|
@@ -896,7 +926,7 @@ $table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org
|
|
|
// Toasts
|
|
|
$toast-border-color: var(--#{$prefix}border-color) !default;
|
|
|
$toast-header-color: var(--#{$prefix}gray-500) !default;
|
|
|
-$toast-background-color: var(--#{$prefix}bg-surface) !default;
|
|
|
+$toast-background-color: var(--#{$prefix}bg-surface) !default;
|
|
|
|
|
|
// Tracking
|
|
|
$tracking-height: 1.5rem !default;
|