mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
91 lines
3.0 KiB
CSS
91 lines
3.0 KiB
CSS
/*!
|
|
Shoelace.css {{version}}
|
|
(c) A Beautiful Site, LLC
|
|
|
|
Released under the MIT license
|
|
Source: https://github.com/claviska/shoelace-css
|
|
*/
|
|
|
|
@import url('normalize.css');
|
|
@import url('content.css');
|
|
@import url('alerts.css');
|
|
@import url('badges.css');
|
|
@import url('buttons.css');
|
|
@import url('dropdowns.css');
|
|
@import url('forms.css');
|
|
@import url('grid.css');
|
|
@import url('loaders.css');
|
|
@import url('progress-bars.css');
|
|
@import url('switches.css');
|
|
@import url('tabs.css');
|
|
@import url('tables.css');
|
|
@import url('utilities.css');
|
|
|
|
/* Custom media queries */
|
|
@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);
|
|
|
|
/* Core variables */
|
|
:root {
|
|
/* 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-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);
|
|
}
|