mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Move variables back to variables.css
This commit is contained in:
Cory LaViska
@@ -1,50 +1,4 @@
|
||||
/*! Alerts */
|
||||
:root {
|
||||
--alert-border-radius: var(--component-border-radius);
|
||||
--alert-border-width: 1px;
|
||||
--alert-padding-x: var(--component-padding-x);
|
||||
--alert-padding-y: var(--component-padding-y);
|
||||
|
||||
/* Default */
|
||||
--alert-bg-color: color(var(--state-primary) tint(75%));
|
||||
--alert-color: color(var(--state-primary) lightness(25%));
|
||||
--alert-border-color: color(var(--alert-bg-color) shade(5%));
|
||||
|
||||
/* Secondary */
|
||||
--alert-bg-color-secondary: color(var(--state-secondary) tint(75%));
|
||||
--alert-color-secondary: color(var(--state-secondary) lightness(25%));
|
||||
--alert-border-color-secondary: color(var(--alert-bg-color-secondary) shade(5%));
|
||||
|
||||
/* Success */
|
||||
--alert-bg-color-success: color(var(--state-success) tint(75%));
|
||||
--alert-color-success: color(var(--state-success) lightness(25%));
|
||||
--alert-border-color-success: color(var(--alert-bg-color-success) shade(5%));
|
||||
|
||||
/* Info */
|
||||
--alert-bg-color-info: color(var(--state-info) tint(75%));
|
||||
--alert-color-info: color(var(--state-info) lightness(25%));
|
||||
--alert-border-color-info: color(var(--alert-bg-color-info) shade(5%));
|
||||
|
||||
/* Warning */
|
||||
--alert-bg-color-warning: color(var(--state-warning) tint(75%));
|
||||
--alert-color-warning: color(var(--state-warning) lightness(25%));
|
||||
--alert-border-color-warning: color(var(--alert-bg-color-warning) shade(5%));
|
||||
|
||||
/* Danger */
|
||||
--alert-bg-color-danger: color(var(--state-danger) tint(75%));
|
||||
--alert-color-danger: color(var(--state-danger) lightness(25%));
|
||||
--alert-border-color-danger: color(var(--alert-bg-color-danger) shade(5%));
|
||||
|
||||
/* Light */
|
||||
--alert-bg-color-light: color(var(--state-light) tint(75%));
|
||||
--alert-color-light: color(var(--state-dark) lightness(50%));
|
||||
--alert-border-color-light: color(var(--alert-bg-color-light) shade(5%));
|
||||
|
||||
/* Dark */
|
||||
--alert-bg-color-dark: color(var(--state-dark) tint(75%));
|
||||
--alert-color-dark: color(var(--state-light) lightness(25%));
|
||||
--alert-border-color-dark: color(var(--alert-bg-color-dark) shade(5%));
|
||||
}
|
||||
|
||||
.alert {
|
||||
color: var(--alert-color);
|
||||
|
||||
@@ -1,42 +1,4 @@
|
||||
/*! Badges */
|
||||
:root {
|
||||
--badge-font-size: .8em; /* ems for relative sizing */
|
||||
--badge-border-radius: 1em; /* ems for relative sizing */
|
||||
--badge-focus-width: var(--input-focus-width);
|
||||
--badge-speed: var(--component-speed);
|
||||
|
||||
/* Default */
|
||||
--badge-color: var(--color-white);
|
||||
--badge-bg-color: var(--state-primary);
|
||||
|
||||
/* Secondary */
|
||||
--badge-color-secondary: var(--color-white);
|
||||
--badge-bg-color-secondary: var(--state-secondary);
|
||||
|
||||
/* Success */
|
||||
--badge-color-success: var(--color-white);
|
||||
--badge-bg-color-success: var(--state-success);
|
||||
|
||||
/* Info */
|
||||
--badge-color-info: var(--color-white);
|
||||
--badge-bg-color-info: var(--state-info);
|
||||
|
||||
/* Warning */
|
||||
--badge-color-warning: var(--color-white);
|
||||
--badge-bg-color-warning: var(--state-warning);
|
||||
|
||||
/* Danger */
|
||||
--badge-color-danger: var(--color-white);
|
||||
--badge-bg-color-danger: var(--state-danger);
|
||||
|
||||
/* Light */
|
||||
--badge-color-light: var(--state-dark);
|
||||
--badge-bg-color-light: var(--state-light);
|
||||
|
||||
/* Dark */
|
||||
--badge-color-dark: var(--state-light);
|
||||
--badge-bg-color-dark: var(--state-dark);
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: var(--badge-font-size);
|
||||
|
||||
@@ -1,56 +1,4 @@
|
||||
/*! Buttons */
|
||||
:root {
|
||||
--button-height-xs: var(--input-height-xs);
|
||||
--button-height-sm: var(--input-height-sm);
|
||||
--button-height: var(--input-height);
|
||||
--button-height-lg: var(--input-height-lg);
|
||||
--button-height-xl: var(--input-height-xl);
|
||||
--button-font-size-xs: var(--input-font-size-xs);
|
||||
--button-font-size-sm: var(--input-font-size-sm);
|
||||
--button-font-size: var(--input-font-size);
|
||||
--button-font-size-lg: var(--input-font-size-lg);
|
||||
--button-font-size-xl: var(--input-font-size-xl);
|
||||
--button-font-family: var(--input-font-family);
|
||||
--button-font-weight: var(--input-font-weight);
|
||||
--button-border-radius: var(--component-border-radius);
|
||||
--button-border-width: var(--component-border-width);
|
||||
--button-focus-width: var(--input-focus-width);
|
||||
--button-speed: var(--component-speed);
|
||||
--button-loader-size: 1em;
|
||||
--button-loader-border-width: .15em;
|
||||
|
||||
/* Default */
|
||||
--button-color: var(--color-white);
|
||||
--button-bg-color: var(--state-primary);
|
||||
|
||||
/* Secondary */
|
||||
--button-color-secondary: var(--color-white);
|
||||
--button-bg-color-secondary: var(--state-secondary);
|
||||
|
||||
/* Success */
|
||||
--button-color-success: var(--color-white);
|
||||
--button-bg-color-success: var(--state-success);
|
||||
|
||||
/* Info */
|
||||
--button-color-info: var(--color-white);
|
||||
--button-bg-color-info: var(--state-info);
|
||||
|
||||
/* Warning */
|
||||
--button-color-warning: var(--color-white);
|
||||
--button-bg-color-warning: var(--state-warning);
|
||||
|
||||
/* Danger */
|
||||
--button-color-danger: var(--color-white);
|
||||
--button-bg-color-danger: var(--state-danger);
|
||||
|
||||
/* Light */
|
||||
--button-color-light: var(--state-dark);
|
||||
--button-bg-color-light: color(var(--state-light) shade(10%));
|
||||
|
||||
/* Dark */
|
||||
--button-color-dark: var(--state-light);
|
||||
--button-bg-color-dark: color(var(--state-dark) tint(10%));
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
|
||||
@@ -1,67 +1,8 @@
|
||||
/*! Content */
|
||||
:root {
|
||||
--body-bg-color: var(--color-white);
|
||||
--body-color: var(--color-black);
|
||||
--font-family: var(--font-system);
|
||||
--font-size: 1rem; /* Most browsers use a default font size of 16px */
|
||||
--font-size-big: 1.25rem;
|
||||
--font-size-small: .875rem;
|
||||
--font-weight-light: 300;
|
||||
--font-weight: 400;
|
||||
--font-weight-bold: 700;
|
||||
--line-height: 1.5;
|
||||
|
||||
--code-font-size: 90%;
|
||||
--code-color: var(--color-black);
|
||||
--code-border-radius: var(--component-border-radius);
|
||||
--code-bg-color: var(--component-bg-color);
|
||||
--code-padding-x: calc(var(--font-size) * .4);
|
||||
--code-padding-y: calc(var(--font-size) * .2);
|
||||
|
||||
--headings-font-family: var(--font-system);
|
||||
--headings-font-weight: var(--font-weight-light);
|
||||
--headings-line-height: 1.1;
|
||||
--headings-margin-bottom: .5rem;
|
||||
--headings-color: inherit;
|
||||
--headings-font-size-h1: 2.5rem;
|
||||
--headings-font-size-h2: 2rem;
|
||||
--headings-font-size-h3: 1.75rem;
|
||||
--headings-font-size-h4: 1.5rem;
|
||||
--headings-font-size-h5: 1.25rem;
|
||||
--headings-font-size-h6: 1rem;
|
||||
|
||||
--hr-border-width: 1px;
|
||||
--hr-border-color: var(--component-border-color);
|
||||
--hr-margin-x: 0;
|
||||
--hr-margin-y: 2rem;
|
||||
|
||||
--kbd-font-size: 90%;
|
||||
--kbd-color: var(--color-white);
|
||||
--kbd-border-radius: var(--component-border-radius);
|
||||
--kbd-bg-color: var(--color-black);
|
||||
--kbd-padding-x: calc(var(--font-size) * .4);
|
||||
--kbd-padding-y: calc(var(--font-size) * .2);
|
||||
|
||||
--link-color: var(--state-primary);
|
||||
--link-text-decoration: none;
|
||||
--link-color-hover: var(--link-color);
|
||||
--link-text-decoration-hover: underline;
|
||||
|
||||
--mark-color: inherit;
|
||||
--mark-bg-color: var(--color-yellow);
|
||||
--mark-padding-x: calc(var(--font-size) * .4);
|
||||
--mark-padding-y: calc(var(--font-size) * .2);
|
||||
|
||||
--placeholder-color: var(--state-secondary);
|
||||
|
||||
--pre-color: var(--code-color);
|
||||
--pre-border-radius: var(--component-border-radius);
|
||||
--pre-bg-color: var(--code-bg-color);
|
||||
--pre-max-height: none;
|
||||
|
||||
--selection-color: var(--color-white);
|
||||
--selection-bg-color: var(--state-primary);
|
||||
}
|
||||
/***************************************************************************************************
|
||||
* Resets
|
||||
***************************************************************************************************/
|
||||
|
||||
/* Box sizing reset */
|
||||
html {
|
||||
@@ -74,7 +15,7 @@ html {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
/* Hidden property polyfill */
|
||||
/* Hidden property reset */
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -1,24 +1,4 @@
|
||||
/*! Dropdowns */
|
||||
:root {
|
||||
--dropdown-min-width: 10rem;
|
||||
--dropdown-max-width: 25rem;
|
||||
--dropdown-max-height: none;
|
||||
--dropdown-border-color: var(--component-border-color);
|
||||
--dropdown-border-radius: var(--component-border-radius);
|
||||
--dropdown-border-width: var(--component-border-width);
|
||||
--dropdown-color: var(--body-color);
|
||||
--dropdown-color-hover: var(--color-white);
|
||||
--dropdown-bg-color: var(--color-white);
|
||||
--dropdown-bg-color-hover: var(--state-primary);
|
||||
--dropdown-box-shadow: var(--component-box-shadow-outer);
|
||||
--dropdown-divider-color: var(--component-border-color);
|
||||
--dropdown-divider-width: var(--component-border-width);
|
||||
--dropdown-padding-x: 1rem;
|
||||
--dropdown-padding-y: .25rem;
|
||||
--dropdown-offset-x: 0;
|
||||
--dropdown-offset-y: 1px;
|
||||
--dropdown-z-index: 100;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
|
||||
@@ -1,50 +1,4 @@
|
||||
/*! Forms */
|
||||
:root {
|
||||
--input-height-xs: 1.25rem;
|
||||
--input-height-sm: 1.75rem;
|
||||
--input-height: 2.25rem;
|
||||
--input-height-lg: 2.75rem;
|
||||
--input-height-xl: 3.25rem;
|
||||
--input-font-size-xs: .7rem;
|
||||
--input-font-size-sm: .8rem;
|
||||
--input-font-size: 1rem;
|
||||
--input-font-size-lg: 1.25rem;
|
||||
--input-font-size-xl: 1.5rem;
|
||||
--input-font-family: inherit;
|
||||
--input-font-weight: inherit;
|
||||
--input-color: var(--body-color);
|
||||
--input-border-color: var(--component-border-color);
|
||||
--input-border-color-focus: var(--state-primary);
|
||||
--input-border-width: 1px;
|
||||
--input-border-radius: var(--component-border-radius);
|
||||
--input-bg-color: var(--color-white);
|
||||
--input-box-shadow: var(--component-box-shadow-inner);
|
||||
--input-readonly-bg-color: var(--component-bg-color);
|
||||
--input-focus-width: 2px;
|
||||
--input-speed: var(--component-speed);
|
||||
|
||||
--input-addon-bg-color: var(--component-bg-color);
|
||||
--input-addon-color: var(--state-secondary);
|
||||
|
||||
--input-range-track-height: .5rem;
|
||||
--input-range-track-color: var(--component-bg-color);
|
||||
--input-range-track-box-shadow: var(--component-box-shadow-inner);
|
||||
--input-range-thumb-height: 1.25rem;
|
||||
--input-range-thumb-color: var(--state-primary);
|
||||
|
||||
--input-invalid-color: var(--state-danger);
|
||||
--input-invalid-border-color: var(--state-danger);
|
||||
--input-valid-color: var(--state-success);
|
||||
--input-valid-border-color: var(--state-success);
|
||||
|
||||
--fieldset-border-color: var(--component-border-color);
|
||||
--fieldset-border-width: var(--component-border-width);
|
||||
--fieldset-border-radius: var(--component-border-radius);
|
||||
--fieldset-padding-x: 2rem;
|
||||
--fieldset-padding-y: 1.5rem;
|
||||
|
||||
--label-color: inherit;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: solid var(--fieldset-border-width) var(--fieldset-border-color);
|
||||
|
||||
@@ -7,14 +7,6 @@
|
||||
|
||||
Licensed under the MIT license.
|
||||
*/
|
||||
:root {
|
||||
--container-max-width-sm: 540px;
|
||||
--container-max-width-md: 720px;
|
||||
--container-max-width-lg: 960px;
|
||||
--container-max-width-xl: 1140px;
|
||||
|
||||
--grid-gutter-width: 2rem;
|
||||
}
|
||||
|
||||
/* Containers */
|
||||
.container,
|
||||
|
||||
@@ -1,51 +1,4 @@
|
||||
/*! Loaders */
|
||||
:root {
|
||||
--loader-thickness: .2rem;
|
||||
--loader-thickness-xs: calc(var(--loader-thickness) / 2);
|
||||
--loader-thickness-sm: calc(var(--loader-thickness) / 1.5);
|
||||
--loader-thickness-lg: calc(var(--loader-thickness) * 1.5);
|
||||
--loader-thickness-xl: calc(var(--loader-thickness) * 2);
|
||||
--loader-size-xs: var(--input-height-xs);
|
||||
--loader-size-sm: var(--input-height-sm);
|
||||
--loader-size: var(--input-height);
|
||||
--loader-size-lg: var(--input-height-lg);
|
||||
--loader-size-xl: var(--input-height-xl);
|
||||
--loader-speed: 750ms;
|
||||
--loader-margin-x: .5em;
|
||||
--loader-margin-y: 0;
|
||||
|
||||
/* Default */
|
||||
--loader-color: var(--state-primary);
|
||||
--loader-bg-color: color(var(--state-primary) lightness(90%));
|
||||
|
||||
/* Secondary */
|
||||
--loader-color-secondary: var(--state-secondary);
|
||||
--loader-bg-color-secondary: color(var(--state-secondary) lightness(90%));
|
||||
|
||||
/* Success */
|
||||
--loader-color-success: var(--state-success);
|
||||
--loader-bg-color-success: color(var(--state-success) lightness(90%));
|
||||
|
||||
/* Info */
|
||||
--loader-color-info: var(--state-info);
|
||||
--loader-bg-color-info: color(var(--state-info) lightness(90%));
|
||||
|
||||
/* Warning */
|
||||
--loader-color-warning: var(--state-warning);
|
||||
--loader-bg-color-warning: color(var(--state-warning) lightness(90%));
|
||||
|
||||
/* Danger */
|
||||
--loader-color-danger: var(--state-danger);
|
||||
--loader-bg-color-danger: color(var(--state-danger) lightness(90%));
|
||||
|
||||
/* Light */
|
||||
--loader-color-light: var(--state-light);
|
||||
--loader-bg-color-light: color(var(--state-light) lightness(90%));
|
||||
|
||||
/* Dark */
|
||||
--loader-color-dark: var(--state-dark);
|
||||
--loader-bg-color-dark: color(var(--state-dark) lightness(90%));
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: var(--loader-size);
|
||||
|
||||
@@ -1,23 +1,4 @@
|
||||
/*! Progress Bars */
|
||||
:root {
|
||||
--progress-height: var(--input-height);
|
||||
--progress-height-xs: var(--input-height-xs);
|
||||
--progress-height-sm: var(--input-height-sm);
|
||||
--progress-height-lg: var(--input-height-lg);
|
||||
--progress-height-xl: var(--input-height-xl);
|
||||
--progress-font-size: var(--input-font-size);
|
||||
--progress-font-size-xs: var(--input-font-size-xs);
|
||||
--progress-font-size-sm: var(--input-font-size-sm);
|
||||
--progress-font-size-lg: var(--input-font-size-lg);
|
||||
--progress-font-size-xl: var(--input-font-size-xl);
|
||||
--progress-color: var(--color-white);
|
||||
--progress-bg-color: var(--component-bg-color);
|
||||
--progress-bar-color: var(--state-primary);
|
||||
--progress-border-radius: var(--component-border-radius);
|
||||
--progress-box-shadow: var(--component-box-shadow-inner);
|
||||
--progress-speed: var(--component-speed);
|
||||
--progress-speed-indeterminate: 3s;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
|
||||
@@ -1,61 +1,4 @@
|
||||
/*! Switches */
|
||||
:root {
|
||||
--switch-height: calc(var(--input-height) * .75);
|
||||
--switch-height-xs: calc(var(--input-height-xs) * .75);
|
||||
--switch-height-sm: calc(var(--input-height-sm) * .75);
|
||||
--switch-height-lg: calc(var(--input-height-lg) * .75);
|
||||
--switch-height-xl: calc(var(--input-height-xl) * .75);
|
||||
--switch-font-size: var(--input-font-size);
|
||||
--switch-font-size-xs: var(--input-font-size-xs);
|
||||
--switch-font-size-sm: var(--input-font-size-sm);
|
||||
--switch-font-size-lg: var(--input-font-size-lg);
|
||||
--switch-font-size-xl: var(--input-font-size-xl);
|
||||
--switch-border-radius: var(--switch-height);
|
||||
--switch-thumb-border-radius: 50%;
|
||||
--switch-thumb-spacing: 2px;
|
||||
--switch-focus-width: var(--input-focus-width);
|
||||
--switch-speed: var(--component-speed);
|
||||
|
||||
/* Default */
|
||||
--switch-color: var(--state-primary);
|
||||
--switch-bg-color: var(--component-border-color);
|
||||
--switch-thumb-color: var(--color-white);
|
||||
|
||||
/* Secondary */
|
||||
--switch-color-secondary: var(--state-secondary);
|
||||
--switch-bg-color-secondary: var(--component-border-color);
|
||||
--switch-thumb-color-secondary: var(--color-white);
|
||||
|
||||
/* Success */
|
||||
--switch-color-success: var(--state-success);
|
||||
--switch-bg-color-success: var(--component-border-color);
|
||||
--switch-thumb-color-success: var(--color-white);
|
||||
|
||||
/* Info */
|
||||
--switch-color-info: var(--state-info);
|
||||
--switch-bg-color-info: var(--component-border-color);
|
||||
--switch-thumb-color-info: var(--color-white);
|
||||
|
||||
/* Warning */
|
||||
--switch-color-warning: var(--state-warning);
|
||||
--switch-bg-color-warning: var(--component-border-color);
|
||||
--switch-thumb-color-warning: var(--color-white);
|
||||
|
||||
/* Danger */
|
||||
--switch-color-danger: var(--state-danger);
|
||||
--switch-bg-color-danger: var(--component-border-color);
|
||||
--switch-thumb-color-danger: var(--color-white);
|
||||
|
||||
/* Light */
|
||||
--switch-color-light: color(var(--state-light) shade(25%));
|
||||
--switch-bg-color-light: color(var(--state-light) shade(10%));
|
||||
--switch-thumb-color-light: var(--color-white);
|
||||
|
||||
/* Dark */
|
||||
--switch-color-dark: color(var(--state-dark) tint(10%));
|
||||
--switch-bg-color-dark: color(var(--state-dark) tint(25%));
|
||||
--switch-thumb-color-dark: var(--color-white);
|
||||
}
|
||||
|
||||
.switch {
|
||||
font-size: var(--switch-font-size);
|
||||
|
||||
@@ -1,15 +1,4 @@
|
||||
/*! Tables */
|
||||
:root {
|
||||
--table-bg-color: var(--color-white);
|
||||
--table-border-color: var(--component-border-color);
|
||||
--table-border-width: var(--component-border-width);
|
||||
--table-header-bg-color: transparent;
|
||||
--table-spacing-x: .75rem;
|
||||
--table-spacing-y: .5rem;
|
||||
--table-hover-color: var(--color-white);
|
||||
--table-hover-bg-color: var(--state-primary);
|
||||
--table-stripe-bg-color: var(--component-bg-color);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,25 +1,4 @@
|
||||
/*! Tabs */
|
||||
:root {
|
||||
--tab-bg-color: var(--body-bg-color);
|
||||
--tab-bg-color-hover: var(--body-bg-color);
|
||||
--tab-bg-color-active: var(--link-color);
|
||||
--tab-bg-color-disabled: var(--body-bg-color);
|
||||
--tab-border-radius: var(--component-border-radius);
|
||||
--tab-color: var(--link-color);
|
||||
--tab-color-hover: var(--link-color-hover);
|
||||
--tab-color-active: var(--color-white);
|
||||
--tab-color-disabled: var(--state-secondary);
|
||||
--tab-padding-x: var(--component-padding-x);
|
||||
--tab-padding-y: calc(var(--component-padding-y) / 2);
|
||||
--tab-focus-width: var(--input-focus-width);
|
||||
--tab-speed: var(--component-speed);
|
||||
|
||||
--tab-pane-border-color: var(--component-border-color);
|
||||
--tab-pane-border-radius: var(--component-border-radius);
|
||||
--tab-pane-border-width: var(--component-border-width);
|
||||
--tab-pane-padding-x: var(--component-padding-x);
|
||||
--tab-pane-padding-y: var(--component-padding-y);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,11 +1,4 @@
|
||||
/*! Utilties */
|
||||
:root {
|
||||
--spacing-xs: .5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 2.5rem;
|
||||
}
|
||||
|
||||
/***************************************************************************************************
|
||||
* Text utilities
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
/* Core variables */
|
||||
:root {
|
||||
/*************************************************************************************************
|
||||
* Core variables
|
||||
*************************************************************************************************/
|
||||
|
||||
/* Fonts */
|
||||
--font-sans-serif: sans-serif;
|
||||
--font-serif: serif;
|
||||
@@ -45,6 +48,480 @@
|
||||
--component-speed: .1s;
|
||||
--component-box-shadow-inner: inset 0 1px 1px rgba(0, 0, 0, .05);
|
||||
--component-box-shadow-outer: 0 1px 0 rgba(0, 0, 0, .05);
|
||||
|
||||
/*************************************************************************************************
|
||||
* Alerts
|
||||
*************************************************************************************************/
|
||||
|
||||
--alert-border-radius: var(--component-border-radius);
|
||||
--alert-border-width: 1px;
|
||||
--alert-padding-x: var(--component-padding-x);
|
||||
--alert-padding-y: var(--component-padding-y);
|
||||
|
||||
/* Default */
|
||||
--alert-bg-color: color(var(--state-primary) tint(75%));
|
||||
--alert-color: color(var(--state-primary) lightness(25%));
|
||||
--alert-border-color: color(var(--alert-bg-color) shade(5%));
|
||||
|
||||
/* Secondary */
|
||||
--alert-bg-color-secondary: color(var(--state-secondary) tint(75%));
|
||||
--alert-color-secondary: color(var(--state-secondary) lightness(25%));
|
||||
--alert-border-color-secondary: color(var(--alert-bg-color-secondary) shade(5%));
|
||||
|
||||
/* Success */
|
||||
--alert-bg-color-success: color(var(--state-success) tint(75%));
|
||||
--alert-color-success: color(var(--state-success) lightness(25%));
|
||||
--alert-border-color-success: color(var(--alert-bg-color-success) shade(5%));
|
||||
|
||||
/* Info */
|
||||
--alert-bg-color-info: color(var(--state-info) tint(75%));
|
||||
--alert-color-info: color(var(--state-info) lightness(25%));
|
||||
--alert-border-color-info: color(var(--alert-bg-color-info) shade(5%));
|
||||
|
||||
/* Warning */
|
||||
--alert-bg-color-warning: color(var(--state-warning) tint(75%));
|
||||
--alert-color-warning: color(var(--state-warning) lightness(25%));
|
||||
--alert-border-color-warning: color(var(--alert-bg-color-warning) shade(5%));
|
||||
|
||||
/* Danger */
|
||||
--alert-bg-color-danger: color(var(--state-danger) tint(75%));
|
||||
--alert-color-danger: color(var(--state-danger) lightness(25%));
|
||||
--alert-border-color-danger: color(var(--alert-bg-color-danger) shade(5%));
|
||||
|
||||
/* Light */
|
||||
--alert-bg-color-light: color(var(--state-light) tint(75%));
|
||||
--alert-color-light: color(var(--state-dark) lightness(50%));
|
||||
--alert-border-color-light: color(var(--alert-bg-color-light) shade(5%));
|
||||
|
||||
/* Dark */
|
||||
--alert-bg-color-dark: color(var(--state-dark) tint(75%));
|
||||
--alert-color-dark: color(var(--state-light) lightness(25%));
|
||||
--alert-border-color-dark: color(var(--alert-bg-color-dark) shade(5%));
|
||||
|
||||
/*************************************************************************************************
|
||||
* Badges
|
||||
*************************************************************************************************/
|
||||
|
||||
--badge-font-size: .8em; /* ems for relative sizing */
|
||||
--badge-border-radius: 1em; /* ems for relative sizing */
|
||||
--badge-focus-width: var(--input-focus-width);
|
||||
--badge-speed: var(--component-speed);
|
||||
|
||||
/* Default */
|
||||
--badge-color: var(--color-white);
|
||||
--badge-bg-color: var(--state-primary);
|
||||
|
||||
/* Secondary */
|
||||
--badge-color-secondary: var(--color-white);
|
||||
--badge-bg-color-secondary: var(--state-secondary);
|
||||
|
||||
/* Success */
|
||||
--badge-color-success: var(--color-white);
|
||||
--badge-bg-color-success: var(--state-success);
|
||||
|
||||
/* Info */
|
||||
--badge-color-info: var(--color-white);
|
||||
--badge-bg-color-info: var(--state-info);
|
||||
|
||||
/* Warning */
|
||||
--badge-color-warning: var(--color-white);
|
||||
--badge-bg-color-warning: var(--state-warning);
|
||||
|
||||
/* Danger */
|
||||
--badge-color-danger: var(--color-white);
|
||||
--badge-bg-color-danger: var(--state-danger);
|
||||
|
||||
/* Light */
|
||||
--badge-color-light: var(--state-dark);
|
||||
--badge-bg-color-light: var(--state-light);
|
||||
|
||||
/* Dark */
|
||||
--badge-color-dark: var(--state-light);
|
||||
--badge-bg-color-dark: var(--state-dark);
|
||||
|
||||
/*************************************************************************************************
|
||||
* Buttons
|
||||
*************************************************************************************************/
|
||||
|
||||
--button-height-xs: var(--input-height-xs);
|
||||
--button-height-sm: var(--input-height-sm);
|
||||
--button-height: var(--input-height);
|
||||
--button-height-lg: var(--input-height-lg);
|
||||
--button-height-xl: var(--input-height-xl);
|
||||
--button-font-size-xs: var(--input-font-size-xs);
|
||||
--button-font-size-sm: var(--input-font-size-sm);
|
||||
--button-font-size: var(--input-font-size);
|
||||
--button-font-size-lg: var(--input-font-size-lg);
|
||||
--button-font-size-xl: var(--input-font-size-xl);
|
||||
--button-font-family: var(--input-font-family);
|
||||
--button-font-weight: var(--input-font-weight);
|
||||
--button-border-radius: var(--component-border-radius);
|
||||
--button-border-width: var(--component-border-width);
|
||||
--button-focus-width: var(--input-focus-width);
|
||||
--button-speed: var(--component-speed);
|
||||
--button-loader-size: 1em;
|
||||
--button-loader-border-width: .15em;
|
||||
|
||||
/* Default */
|
||||
--button-color: var(--color-white);
|
||||
--button-bg-color: var(--state-primary);
|
||||
|
||||
/* Secondary */
|
||||
--button-color-secondary: var(--color-white);
|
||||
--button-bg-color-secondary: var(--state-secondary);
|
||||
|
||||
/* Success */
|
||||
--button-color-success: var(--color-white);
|
||||
--button-bg-color-success: var(--state-success);
|
||||
|
||||
/* Info */
|
||||
--button-color-info: var(--color-white);
|
||||
--button-bg-color-info: var(--state-info);
|
||||
|
||||
/* Warning */
|
||||
--button-color-warning: var(--color-white);
|
||||
--button-bg-color-warning: var(--state-warning);
|
||||
|
||||
/* Danger */
|
||||
--button-color-danger: var(--color-white);
|
||||
--button-bg-color-danger: var(--state-danger);
|
||||
|
||||
/* Light */
|
||||
--button-color-light: var(--state-dark);
|
||||
--button-bg-color-light: color(var(--state-light) shade(10%));
|
||||
|
||||
/* Dark */
|
||||
--button-color-dark: var(--state-light);
|
||||
--button-bg-color-dark: color(var(--state-dark) tint(10%));
|
||||
|
||||
/*************************************************************************************************
|
||||
* Content
|
||||
*************************************************************************************************/
|
||||
|
||||
--body-bg-color: var(--color-white);
|
||||
--body-color: var(--color-black);
|
||||
--font-family: var(--font-system);
|
||||
--font-size: 1rem; /* Most browsers use a default font size of 16px */
|
||||
--font-size-big: 1.25rem;
|
||||
--font-size-small: .875rem;
|
||||
--font-weight-light: 300;
|
||||
--font-weight: 400;
|
||||
--font-weight-bold: 700;
|
||||
--line-height: 1.5;
|
||||
|
||||
--code-font-size: 90%;
|
||||
--code-color: var(--color-black);
|
||||
--code-border-radius: var(--component-border-radius);
|
||||
--code-bg-color: var(--component-bg-color);
|
||||
--code-padding-x: calc(var(--font-size) * .4);
|
||||
--code-padding-y: calc(var(--font-size) * .2);
|
||||
|
||||
--headings-font-family: var(--font-system);
|
||||
--headings-font-weight: var(--font-weight-light);
|
||||
--headings-line-height: 1.1;
|
||||
--headings-margin-bottom: .5rem;
|
||||
--headings-color: inherit;
|
||||
--headings-font-size-h1: 2.5rem;
|
||||
--headings-font-size-h2: 2rem;
|
||||
--headings-font-size-h3: 1.75rem;
|
||||
--headings-font-size-h4: 1.5rem;
|
||||
--headings-font-size-h5: 1.25rem;
|
||||
--headings-font-size-h6: 1rem;
|
||||
|
||||
--hr-border-width: 1px;
|
||||
--hr-border-color: var(--component-border-color);
|
||||
--hr-margin-x: 0;
|
||||
--hr-margin-y: 2rem;
|
||||
|
||||
--kbd-font-size: 90%;
|
||||
--kbd-color: var(--color-white);
|
||||
--kbd-border-radius: var(--component-border-radius);
|
||||
--kbd-bg-color: var(--color-black);
|
||||
--kbd-padding-x: calc(var(--font-size) * .4);
|
||||
--kbd-padding-y: calc(var(--font-size) * .2);
|
||||
|
||||
--link-color: var(--state-primary);
|
||||
--link-text-decoration: none;
|
||||
--link-color-hover: var(--link-color);
|
||||
--link-text-decoration-hover: underline;
|
||||
|
||||
--mark-color: inherit;
|
||||
--mark-bg-color: var(--color-yellow);
|
||||
--mark-padding-x: calc(var(--font-size) * .4);
|
||||
--mark-padding-y: calc(var(--font-size) * .2);
|
||||
|
||||
--placeholder-color: var(--state-secondary);
|
||||
|
||||
--pre-color: var(--code-color);
|
||||
--pre-border-radius: var(--component-border-radius);
|
||||
--pre-bg-color: var(--code-bg-color);
|
||||
--pre-max-height: none;
|
||||
|
||||
--selection-color: var(--color-white);
|
||||
--selection-bg-color: var(--state-primary);
|
||||
|
||||
/*************************************************************************************************
|
||||
* Dropdowns
|
||||
*************************************************************************************************/
|
||||
|
||||
--dropdown-min-width: 10rem;
|
||||
--dropdown-max-width: 25rem;
|
||||
--dropdown-max-height: none;
|
||||
--dropdown-border-color: var(--component-border-color);
|
||||
--dropdown-border-radius: var(--component-border-radius);
|
||||
--dropdown-border-width: var(--component-border-width);
|
||||
--dropdown-color: var(--body-color);
|
||||
--dropdown-color-hover: var(--color-white);
|
||||
--dropdown-bg-color: var(--color-white);
|
||||
--dropdown-bg-color-hover: var(--state-primary);
|
||||
--dropdown-box-shadow: var(--component-box-shadow-outer);
|
||||
--dropdown-divider-color: var(--component-border-color);
|
||||
--dropdown-divider-width: var(--component-border-width);
|
||||
--dropdown-padding-x: 1rem;
|
||||
--dropdown-padding-y: .25rem;
|
||||
--dropdown-offset-x: 0;
|
||||
--dropdown-offset-y: 1px;
|
||||
--dropdown-z-index: 100;
|
||||
|
||||
/*************************************************************************************************
|
||||
* Forms
|
||||
*************************************************************************************************/
|
||||
|
||||
--input-height-xs: 1.25rem;
|
||||
--input-height-sm: 1.75rem;
|
||||
--input-height: 2.25rem;
|
||||
--input-height-lg: 2.75rem;
|
||||
--input-height-xl: 3.25rem;
|
||||
--input-font-size-xs: .7rem;
|
||||
--input-font-size-sm: .8rem;
|
||||
--input-font-size: 1rem;
|
||||
--input-font-size-lg: 1.25rem;
|
||||
--input-font-size-xl: 1.5rem;
|
||||
--input-font-family: inherit;
|
||||
--input-font-weight: inherit;
|
||||
--input-color: var(--body-color);
|
||||
--input-border-color: var(--component-border-color);
|
||||
--input-border-color-focus: var(--state-primary);
|
||||
--input-border-width: 1px;
|
||||
--input-border-radius: var(--component-border-radius);
|
||||
--input-bg-color: var(--color-white);
|
||||
--input-box-shadow: var(--component-box-shadow-inner);
|
||||
--input-readonly-bg-color: var(--component-bg-color);
|
||||
--input-focus-width: 2px;
|
||||
--input-speed: var(--component-speed);
|
||||
|
||||
--input-addon-bg-color: var(--component-bg-color);
|
||||
--input-addon-color: var(--state-secondary);
|
||||
|
||||
--input-range-track-height: .5rem;
|
||||
--input-range-track-color: var(--component-bg-color);
|
||||
--input-range-track-box-shadow: var(--component-box-shadow-inner);
|
||||
--input-range-thumb-height: 1.25rem;
|
||||
--input-range-thumb-color: var(--state-primary);
|
||||
|
||||
--input-invalid-color: var(--state-danger);
|
||||
--input-invalid-border-color: var(--state-danger);
|
||||
--input-valid-color: var(--state-success);
|
||||
--input-valid-border-color: var(--state-success);
|
||||
|
||||
--fieldset-border-color: var(--component-border-color);
|
||||
--fieldset-border-width: var(--component-border-width);
|
||||
--fieldset-border-radius: var(--component-border-radius);
|
||||
--fieldset-padding-x: 2rem;
|
||||
--fieldset-padding-y: 1.5rem;
|
||||
|
||||
--label-color: inherit;
|
||||
|
||||
/*************************************************************************************************
|
||||
* Grid
|
||||
*************************************************************************************************/
|
||||
|
||||
--container-max-width-sm: 540px;
|
||||
--container-max-width-md: 720px;
|
||||
--container-max-width-lg: 960px;
|
||||
--container-max-width-xl: 1140px;
|
||||
|
||||
--grid-gutter-width: 2rem;
|
||||
|
||||
/*************************************************************************************************
|
||||
* Loaders
|
||||
*************************************************************************************************/
|
||||
|
||||
--loader-thickness: .2rem;
|
||||
--loader-thickness-xs: calc(var(--loader-thickness) / 2);
|
||||
--loader-thickness-sm: calc(var(--loader-thickness) / 1.5);
|
||||
--loader-thickness-lg: calc(var(--loader-thickness) * 1.5);
|
||||
--loader-thickness-xl: calc(var(--loader-thickness) * 2);
|
||||
--loader-size-xs: var(--input-height-xs);
|
||||
--loader-size-sm: var(--input-height-sm);
|
||||
--loader-size: var(--input-height);
|
||||
--loader-size-lg: var(--input-height-lg);
|
||||
--loader-size-xl: var(--input-height-xl);
|
||||
--loader-speed: 750ms;
|
||||
--loader-margin-x: .5em;
|
||||
--loader-margin-y: 0;
|
||||
|
||||
/* Default */
|
||||
--loader-color: var(--state-primary);
|
||||
--loader-bg-color: color(var(--state-primary) lightness(90%));
|
||||
|
||||
/* Secondary */
|
||||
--loader-color-secondary: var(--state-secondary);
|
||||
--loader-bg-color-secondary: color(var(--state-secondary) lightness(90%));
|
||||
|
||||
/* Success */
|
||||
--loader-color-success: var(--state-success);
|
||||
--loader-bg-color-success: color(var(--state-success) lightness(90%));
|
||||
|
||||
/* Info */
|
||||
--loader-color-info: var(--state-info);
|
||||
--loader-bg-color-info: color(var(--state-info) lightness(90%));
|
||||
|
||||
/* Warning */
|
||||
--loader-color-warning: var(--state-warning);
|
||||
--loader-bg-color-warning: color(var(--state-warning) lightness(90%));
|
||||
|
||||
/* Danger */
|
||||
--loader-color-danger: var(--state-danger);
|
||||
--loader-bg-color-danger: color(var(--state-danger) lightness(90%));
|
||||
|
||||
/* Light */
|
||||
--loader-color-light: var(--state-light);
|
||||
--loader-bg-color-light: color(var(--state-light) lightness(90%));
|
||||
|
||||
/* Dark */
|
||||
--loader-color-dark: var(--state-dark);
|
||||
--loader-bg-color-dark: color(var(--state-dark) lightness(90%));
|
||||
|
||||
/*************************************************************************************************
|
||||
* Progress Bars
|
||||
*************************************************************************************************/
|
||||
|
||||
--progress-height: var(--input-height);
|
||||
--progress-height-xs: var(--input-height-xs);
|
||||
--progress-height-sm: var(--input-height-sm);
|
||||
--progress-height-lg: var(--input-height-lg);
|
||||
--progress-height-xl: var(--input-height-xl);
|
||||
--progress-font-size: var(--input-font-size);
|
||||
--progress-font-size-xs: var(--input-font-size-xs);
|
||||
--progress-font-size-sm: var(--input-font-size-sm);
|
||||
--progress-font-size-lg: var(--input-font-size-lg);
|
||||
--progress-font-size-xl: var(--input-font-size-xl);
|
||||
--progress-color: var(--color-white);
|
||||
--progress-bg-color: var(--component-bg-color);
|
||||
--progress-bar-color: var(--state-primary);
|
||||
--progress-border-radius: var(--component-border-radius);
|
||||
--progress-box-shadow: var(--component-box-shadow-inner);
|
||||
--progress-speed: var(--component-speed);
|
||||
--progress-speed-indeterminate: 3s;
|
||||
|
||||
/*************************************************************************************************
|
||||
* Switches
|
||||
*************************************************************************************************/
|
||||
|
||||
--switch-height: calc(var(--input-height) * .75);
|
||||
--switch-height-xs: calc(var(--input-height-xs) * .75);
|
||||
--switch-height-sm: calc(var(--input-height-sm) * .75);
|
||||
--switch-height-lg: calc(var(--input-height-lg) * .75);
|
||||
--switch-height-xl: calc(var(--input-height-xl) * .75);
|
||||
--switch-font-size: var(--input-font-size);
|
||||
--switch-font-size-xs: var(--input-font-size-xs);
|
||||
--switch-font-size-sm: var(--input-font-size-sm);
|
||||
--switch-font-size-lg: var(--input-font-size-lg);
|
||||
--switch-font-size-xl: var(--input-font-size-xl);
|
||||
--switch-border-radius: var(--switch-height);
|
||||
--switch-thumb-border-radius: 50%;
|
||||
--switch-thumb-spacing: 2px;
|
||||
--switch-focus-width: var(--input-focus-width);
|
||||
--switch-speed: var(--component-speed);
|
||||
|
||||
/* Default */
|
||||
--switch-color: var(--state-primary);
|
||||
--switch-bg-color: var(--component-border-color);
|
||||
--switch-thumb-color: var(--color-white);
|
||||
|
||||
/* Secondary */
|
||||
--switch-color-secondary: var(--state-secondary);
|
||||
--switch-bg-color-secondary: var(--component-border-color);
|
||||
--switch-thumb-color-secondary: var(--color-white);
|
||||
|
||||
/* Success */
|
||||
--switch-color-success: var(--state-success);
|
||||
--switch-bg-color-success: var(--component-border-color);
|
||||
--switch-thumb-color-success: var(--color-white);
|
||||
|
||||
/* Info */
|
||||
--switch-color-info: var(--state-info);
|
||||
--switch-bg-color-info: var(--component-border-color);
|
||||
--switch-thumb-color-info: var(--color-white);
|
||||
|
||||
/* Warning */
|
||||
--switch-color-warning: var(--state-warning);
|
||||
--switch-bg-color-warning: var(--component-border-color);
|
||||
--switch-thumb-color-warning: var(--color-white);
|
||||
|
||||
/* Danger */
|
||||
--switch-color-danger: var(--state-danger);
|
||||
--switch-bg-color-danger: var(--component-border-color);
|
||||
--switch-thumb-color-danger: var(--color-white);
|
||||
|
||||
/* Light */
|
||||
--switch-color-light: color(var(--state-light) shade(25%));
|
||||
--switch-bg-color-light: color(var(--state-light) shade(10%));
|
||||
--switch-thumb-color-light: var(--color-white);
|
||||
|
||||
/* Dark */
|
||||
--switch-color-dark: color(var(--state-dark) tint(10%));
|
||||
--switch-bg-color-dark: color(var(--state-dark) tint(25%));
|
||||
--switch-thumb-color-dark: var(--color-white);
|
||||
|
||||
/*************************************************************************************************
|
||||
* Tables
|
||||
*************************************************************************************************/
|
||||
|
||||
--table-bg-color: var(--color-white);
|
||||
--table-border-color: var(--component-border-color);
|
||||
--table-border-width: var(--component-border-width);
|
||||
--table-header-bg-color: transparent;
|
||||
--table-spacing-x: .75rem;
|
||||
--table-spacing-y: .5rem;
|
||||
--table-hover-color: var(--color-white);
|
||||
--table-hover-bg-color: var(--state-primary);
|
||||
--table-stripe-bg-color: var(--component-bg-color);
|
||||
|
||||
/*************************************************************************************************
|
||||
* Tabs
|
||||
*************************************************************************************************/
|
||||
|
||||
--tab-bg-color: var(--body-bg-color);
|
||||
--tab-bg-color-hover: var(--body-bg-color);
|
||||
--tab-bg-color-active: var(--link-color);
|
||||
--tab-bg-color-disabled: var(--body-bg-color);
|
||||
--tab-border-radius: var(--component-border-radius);
|
||||
--tab-color: var(--link-color);
|
||||
--tab-color-hover: var(--link-color-hover);
|
||||
--tab-color-active: var(--color-white);
|
||||
--tab-color-disabled: var(--state-secondary);
|
||||
--tab-padding-x: var(--component-padding-x);
|
||||
--tab-padding-y: calc(var(--component-padding-y) / 2);
|
||||
--tab-focus-width: var(--input-focus-width);
|
||||
--tab-speed: var(--component-speed);
|
||||
|
||||
--tab-pane-border-color: var(--component-border-color);
|
||||
--tab-pane-border-radius: var(--component-border-radius);
|
||||
--tab-pane-border-width: var(--component-border-width);
|
||||
--tab-pane-padding-x: var(--component-padding-x);
|
||||
--tab-pane-padding-y: var(--component-padding-y);
|
||||
|
||||
/*************************************************************************************************
|
||||
* Utilities
|
||||
*************************************************************************************************/
|
||||
|
||||
--spacing-xs: .5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 2.5rem;
|
||||
}
|
||||
|
||||
/* Core breakpoints */
|
||||
|
||||
Reference in New Issue
Block a user