mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
199 lines
9.1 KiB
CSS
199 lines
9.1 KiB
CSS
/*! Utilties */
|
|
:root {
|
|
--spacing-small: var(--component-spacing);
|
|
--spacing-medium: calc(var(--component-spacing) * 2);
|
|
--spacing-big: calc(var(--component-spacing) * 4);
|
|
}
|
|
|
|
/***************************************************************************************************
|
|
* Text utilities
|
|
***************************************************************************************************/
|
|
|
|
/* Text color */
|
|
.text-primary { color: var(--state-primary) !important; }
|
|
.text-secondary { color: var(--state-secondary) !important; }
|
|
.text-success { color: var(--state-success) !important; }
|
|
.text-success { color: var(--state-success) !important; }
|
|
.text-info { color: var(--state-info) !important; }
|
|
.text-warning { color: var(--state-warning) !important; }
|
|
.text-danger { color: var(--state-danger) !important; }
|
|
.text-light { color: var(--state-light) !important; }
|
|
.text-dark { color: var(--state-dark) !important; }
|
|
|
|
/* Text style */
|
|
.text-small { font-size: var(--font-size-small) !important; }
|
|
.text-bold { font-weight: var(--font-weight-bold) !important; }
|
|
.text-italic { font-style: italic !important; }
|
|
|
|
/* Text alignment */
|
|
.text-left { text-align: left !important; }
|
|
.text-right { text-align: right !important; }
|
|
.text-center { text-align: center !important; }
|
|
.text-justify { text-align: justify !important; }
|
|
|
|
/* Text case */
|
|
.text-lowercase { text-transform: lowercase !important; }
|
|
.text-uppercase { text-transform: uppercase !important; }
|
|
.text-capitalize { text-transform: capitalize !important; }
|
|
|
|
/* Text wrapping */
|
|
.text-nowrap { white-space: nowrap !important; }
|
|
|
|
/***************************************************************************************************
|
|
* Background utilities
|
|
***************************************************************************************************/
|
|
|
|
.bg-primary { background-color: var(--state-primary) !important; }
|
|
.bg-secondary { background-color: var(--state-secondary) !important; }
|
|
.bg-success { background-color: var(--state-success) !important; }
|
|
.bg-info { background-color: var(--state-info) !important; }
|
|
.bg-warning { background-color: var(--state-warning) !important; }
|
|
.bg-danger { background-color: var(--state-danger) !important; }
|
|
.bg-light { background-color: var(--state-light) !important; }
|
|
.bg-dark { background-color: var(--state-dark) !important; }
|
|
|
|
/***************************************************************************************************
|
|
* Float utilities
|
|
***************************************************************************************************/
|
|
|
|
.clearfix::before,
|
|
.clearfix::after {
|
|
content: '';
|
|
display: table;
|
|
}
|
|
|
|
.clearfix::after {
|
|
clear: both;
|
|
}
|
|
|
|
.float-left {
|
|
float: left !important;
|
|
}
|
|
|
|
.float-right {
|
|
float: right !important;
|
|
}
|
|
|
|
/***************************************************************************************************
|
|
* Sizing utilities
|
|
***************************************************************************************************/
|
|
|
|
.width-0 { width: 0% !important; }
|
|
.width-5 { width: 5% !important; }
|
|
.width-10 { width: 10% !important; }
|
|
.width-15 { width: 15% !important; }
|
|
.width-20 { width: 20% !important; }
|
|
.width-25 { width: 25% !important; }
|
|
.width-30 { width: 30% !important; }
|
|
.width-35 { width: 35% !important; }
|
|
.width-40 { width: 40% !important; }
|
|
.width-45 { width: 45% !important; }
|
|
.width-50 { width: 50% !important; }
|
|
.width-55 { width: 55% !important; }
|
|
.width-60 { width: 60% !important; }
|
|
.width-65 { width: 65% !important; }
|
|
.width-70 { width: 70% !important; }
|
|
.width-75 { width: 75% !important; }
|
|
.width-80 { width: 80% !important; }
|
|
.width-85 { width: 85% !important; }
|
|
.width-90 { width: 90% !important; }
|
|
.width-95 { width: 95% !important; }
|
|
.width-100 { width: 100% !important; }
|
|
|
|
.height-0 { height: 0% !important; }
|
|
.height-5 { height: 5% !important; }
|
|
.height-10 { height: 10% !important; }
|
|
.height-15 { height: 15% !important; }
|
|
.height-20 { height: 20% !important; }
|
|
.height-25 { height: 25% !important; }
|
|
.height-30 { height: 30% !important; }
|
|
.height-35 { height: 35% !important; }
|
|
.height-40 { height: 40% !important; }
|
|
.height-45 { height: 45% !important; }
|
|
.height-50 { height: 50% !important; }
|
|
.height-55 { height: 55% !important; }
|
|
.height-60 { height: 60% !important; }
|
|
.height-65 { height: 65% !important; }
|
|
.height-70 { height: 70% !important; }
|
|
.height-75 { height: 75% !important; }
|
|
.height-80 { height: 80% !important; }
|
|
.height-85 { height: 85% !important; }
|
|
.height-90 { height: 90% !important; }
|
|
.height-95 { height: 95% !important; }
|
|
.height-100 { height: 100% !important; }
|
|
|
|
.max-width-100 { max-width: 100% !important; }
|
|
.max-height-100 { max-width: 100% !important; }
|
|
|
|
/***************************************************************************************************
|
|
* Spacing utilities
|
|
***************************************************************************************************/
|
|
|
|
.padding-none { padding: 0 !important; }
|
|
.padding-x-none { padding-left: 0 !important; padding-right: 0 !important; }
|
|
.padding-y-none { padding-top: 0 !important; padding-bottom: 0 !important; }
|
|
.padding-top-none { padding-top: 0 !important; }
|
|
.padding-right-none { padding-right: 0 !important; }
|
|
.padding-bottom-none { padding-bottom: 0 !important; }
|
|
.padding-left-none { padding-left: 0 !important; }
|
|
|
|
.padding-small { padding: var(--spacing-small) !important; }
|
|
.padding-x-small { padding-left: var(--spacing-small) !important; padding-right: var(--spacing-small) !important; }
|
|
.padding-y-small { padding-top: var(--spacing-small) !important; padding-bottom: var(--spacing-small) !important; }
|
|
.padding-top-small { padding-top: var(--spacing-small) !important; }
|
|
.padding-right-small { padding-right: var(--spacing-small) !important; }
|
|
.padding-bottom-small { padding-bottom: var(--spacing-small) !important; }
|
|
.padding-left-small { padding-left: var(--spacing-small) !important; }
|
|
|
|
.padding-medium { padding: var(--spacing-medium) !important; }
|
|
.padding-x-medium { padding-left: var(--spacing-medium) !important; padding-right: var(--spacing-medium) !important; }
|
|
.padding-y-medium { padding-top: var(--spacing-medium) !important; padding-bottom: var(--spacing-medium) !important; }
|
|
.padding-top-medium { padding-top: var(--spacing-medium) !important; }
|
|
.padding-right-medium { padding-right: var(--spacing-medium) !important; }
|
|
.padding-bottom-medium { padding-bottom: var(--spacing-medium) !important; }
|
|
.padding-left-medium { padding-left: var(--spacing-medium) !important; }
|
|
|
|
.padding-big { padding: var(--spacing-big) !important; }
|
|
.padding-x-big { padding-left: var(--spacing-big) !important; padding-right: var(--spacing-big) !important; }
|
|
.padding-y-big { padding-top: var(--spacing-big) !important; padding-bottom: var(--spacing-big) !important; }
|
|
.padding-top-big { padding-top: var(--spacing-big) !important; }
|
|
.padding-right-big { padding-right: var(--spacing-big) !important; }
|
|
.padding-bottom-big { padding-bottom: var(--spacing-big) !important; }
|
|
.padding-left-big { padding-left: var(--spacing-big) !important; }
|
|
|
|
.margin-none { margin: 0 !important; }
|
|
.margin-x-none { margin-left: 0 !important; margin-right: 0 !important; }
|
|
.margin-y-none { margin-top: 0 !important; margin-bottom: 0 !important; }
|
|
.margin-top-none { margin-top: 0 !important; }
|
|
.margin-right-none { margin-right: 0 !important; }
|
|
.margin-bottom-none { margin-bottom: 0 !important; }
|
|
.margin-left-none { margin-left: 0 !important; }
|
|
|
|
.margin-small { margin: var(--spacing-small) !important; }
|
|
.margin-x-small { margin-left: var(--spacing-small) !important; margin-right: var(--spacing-small) !important; }
|
|
.margin-y-small { margin-top: var(--spacing-small) !important; margin-bottom: var(--spacing-small) !important; }
|
|
.margin-top-small { margin-top: var(--spacing-small) !important; }
|
|
.margin-right-small { margin-right: var(--spacing-small) !important; }
|
|
.margin-bottom-small { margin-bottom: var(--spacing-small) !important; }
|
|
.margin-left-small { margin-left: var(--spacing-small) !important; }
|
|
|
|
.margin-medium { margin: var(--spacing-medium) !important; }
|
|
.margin-x-medium { margin-left: var(--spacing-medium) !important; margin-right: var(--spacing-medium) !important; }
|
|
.margin-y-medium { margin-top: var(--spacing-medium) !important; margin-bottom: var(--spacing-medium) !important; }
|
|
.margin-top-medium { margin-top: var(--spacing-medium) !important; }
|
|
.margin-right-medium { margin-right: var(--spacing-medium) !important; }
|
|
.margin-bottom-medium { margin-bottom: var(--spacing-medium) !important; }
|
|
.margin-left-medium { margin-left: var(--spacing-medium) !important; }
|
|
|
|
.margin-big { margin: var(--spacing-big) !important; }
|
|
.margin-x-big { margin-left: var(--spacing-big) !important; margin-right: var(--spacing-big) !important; }
|
|
.margin-y-big { margin-top: var(--spacing-big) !important; margin-bottom: var(--spacing-big) !important; }
|
|
.margin-top-big { margin-top: var(--spacing-big) !important; }
|
|
.margin-right-big { margin-right: var(--spacing-big) !important; }
|
|
.margin-bottom-big { margin-bottom: var(--spacing-big) !important; }
|
|
.margin-left-big { margin-left: var(--spacing-big) !important; }
|
|
|
|
.margin-x-auto { margin-left: auto !important; margin-right: auto !important; }
|
|
.margin-y-auto { margin-top: auto !important; margin-bottom: auto !important; }
|
|
.margin-xy-auto { margin: auto !important; }
|