mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
564 lines
21 KiB
CSS
564 lines
21 KiB
CSS
:root {
|
|
/*************************************************************************************************
|
|
* Core variables
|
|
*************************************************************************************************/
|
|
|
|
/* Fonts */
|
|
--font-sans-serif: sans-serif;
|
|
--font-serif: serif;
|
|
--font-system: system-ui;
|
|
--font-monospace: Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
|
|
|
/* Colors (most courtesy of http://clrs.cc/) */
|
|
--color-white: white;
|
|
--color-navy: #001f3f;
|
|
--color-blue: #0074d9;
|
|
--color-aqua: #7fdbff;
|
|
--color-teal: #39cccc;
|
|
--color-olive: #3d9970;
|
|
--color-green: #2ecc40;
|
|
--color-lime: #01ff70;
|
|
--color-yellow: #ffdc00;
|
|
--color-orange: #ff851b;
|
|
--color-red: #ff4136;
|
|
--color-maroon: #85144b;
|
|
--color-fuchsia: #f012be;
|
|
--color-purple: #b10dc9;
|
|
--color-black: #111;
|
|
--color-gray: #aaa;
|
|
--color-silver: #ddd;
|
|
|
|
/* States */
|
|
--state-primary: var(--color-blue);
|
|
--state-secondary: var(--color-gray);
|
|
--state-success: var(--color-green);
|
|
--state-info: var(--color-teal);
|
|
--state-warning: var(--color-orange);
|
|
--state-danger: var(--color-red);
|
|
--state-light: var(--color-white);
|
|
--state-dark: var(--color-black);
|
|
|
|
/* Components */
|
|
--component-bg-color: #f2f2f2;
|
|
--component-border-color: #ddd;
|
|
--component-border-radius: .25rem;
|
|
--component-border-width: 1px;
|
|
--component-focus-width: 2px;
|
|
--component-padding-x: 1rem;
|
|
--component-padding-y: 1rem;
|
|
--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(--component-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(--component-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);
|
|
--body-color-muted: var(--color-gray);
|
|
|
|
--font-family: var(--font-system);
|
|
--font-size: 1rem; /* Most browsers use a default font size of 16px */
|
|
--font-size-small: 80%;
|
|
--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(--body-color-muted);
|
|
|
|
--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-font-size: inherit;
|
|
--dropdown-font-weight: inherit;
|
|
--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-line-height: var(--line-height);
|
|
--dropdown-padding-x: 1rem;
|
|
--dropdown-padding-y: .25rem;
|
|
--dropdown-offset-x: 0;
|
|
--dropdown-offset-y: 1px;
|
|
--dropdown-z-index: 100;
|
|
|
|
--dropdown-caret-color: currentcolor;
|
|
--dropdown-caret-size: .5em;
|
|
--dropdown-caret-width: 2px;
|
|
|
|
--dropdown-divider-color: var(--component-border-color);
|
|
--dropdown-divider-width: var(--component-border-width);
|
|
|
|
--dropdown-heading-font-size: var(--font-size-small);
|
|
--dropdown-heading-font-weight: inherit;
|
|
--dropdown-heading-color: var(--body-color-muted);
|
|
|
|
/*************************************************************************************************
|
|
* 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: .625rem;
|
|
--input-font-size-sm: .875rem;
|
|
--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-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-color: var(--state-primary);
|
|
--input-speed: var(--component-speed);
|
|
|
|
--input-addon-bg-color: var(--component-bg-color);
|
|
--input-addon-color: var(--body-color-muted);
|
|
|
|
--input-hint-color: var(--body-color-muted);
|
|
--input-hint-font-size: var(--font-size-small);
|
|
|
|
--input-icon-width: 2em;
|
|
--input-icon-offset: .5em;
|
|
--input-icon-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(--component-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(--body-color-muted);
|
|
--tab-padding-x: var(--component-padding-x);
|
|
--tab-padding-y: calc(var(--component-padding-y) / 2);
|
|
--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 */
|
|
@custom-media --breakpoint-xs-up only screen and (min-width: 0);
|
|
@custom-media --breakpoint-sm-up only screen and (min-width: 576px);
|
|
@custom-media --breakpoint-md-up only screen and (min-width: 768px);
|
|
@custom-media --breakpoint-lg-up only screen and (min-width: 992px);
|
|
@custom-media --breakpoint-xl-up only screen and (min-width: 1200px);
|
|
|
|
@custom-media --breakpoint-xs-down only screen and (max-width: 575px);
|
|
@custom-media --breakpoint-sm-down only screen and (max-width: 767px);
|
|
@custom-media --breakpoint-md-down only screen and (max-width: 991px);
|
|
@custom-media --breakpoint-lg-down only screen and (max-width: 1199px);
|
|
@custom-media --breakpoint-xl-down only screen and (min-width: 0);
|
|
|
|
@custom-media --breakpoint-xs-only only screen and (min-width: 0) and (max-width: 575px);
|
|
@custom-media --breakpoint-sm-only only screen and (min-width: 576px) and (max-width: 767px);
|
|
@custom-media --breakpoint-md-only only screen and (min-width: 768px) and (max-width: 991px);
|
|
@custom-media --breakpoint-lg-only only screen and (min-width: 992px) and (max-width: 1199px);
|
|
@custom-media --breakpoint-xl-only only screen and (min-width: 1200px);
|