kopia lustrzana https://github.com/shoelace-style/shoelace
175 wiersze
7.4 KiB
CSS
175 wiersze
7.4 KiB
CSS
/*! Shoelace utilties */
|
|
|
|
/***************************************************************************************************
|
|
* 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: 10% !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: 10% !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; }
|
|
|
|
/***************************************************************************************************
|
|
* Spacing utilities
|
|
***************************************************************************************************/
|
|
|
|
.m-none { margin: 0 !important; }
|
|
.m-x-none { margin-left: 0 !important; margin-right: 0 !important; }
|
|
.m-y-none { margin-top: 0 !important; margin-bottom: 0 !important; }
|
|
.m-t-none { margin-top: 0 !important; }
|
|
.m-r-none { margin-right: 0 !important; }
|
|
.m-b-none { margin-bottom: 0 !important; }
|
|
.m-l-none { margin-left: 0 !important; }
|
|
|
|
.m-small { margin: var(--spacing-small) !important; }
|
|
.m-x-small { margin-left: var(--spacing-small) !important; margin-right: var(--spacing-small) !important; }
|
|
.m-y-small { margin-top: var(--spacing-small) !important; margin-bottom: var(--spacing-small) !important; }
|
|
.m-t-small { margin-top: var(--spacing-small) !important; }
|
|
.m-r-small { margin-right: var(--spacing-small) !important; }
|
|
.m-b-small { margin-bottom: var(--spacing-small) !important; }
|
|
.m-l-small { margin-left: var(--spacing-small) !important; }
|
|
|
|
.m-medium { margin: var(--spacing-medium) !important; }
|
|
.m-x-medium { margin-left: var(--spacing-medium) !important; margin-right: var(--spacing-medium) !important; }
|
|
.m-y-medium { margin-top: var(--spacing-medium) !important; margin-bottom: var(--spacing-medium) !important; }
|
|
.m-t-medium { margin-top: var(--spacing-medium) !important; }
|
|
.m-r-medium { margin-right: var(--spacing-medium) !important; }
|
|
.m-b-medium { margin-bottom: var(--spacing-medium) !important; }
|
|
.m-l-medium { margin-left: var(--spacing-medium) !important; }
|
|
|
|
.m-big { margin: var(--spacing-big) !important; }
|
|
.m-x-big { margin-left: var(--spacing-big) !important; margin-right: var(--spacing-big) !important; }
|
|
.m-y-big { margin-top: var(--spacing-big) !important; margin-bottom: var(--spacing-big) !important; }
|
|
.m-t-big { margin-top: var(--spacing-big) !important; }
|
|
.m-r-big { margin-right: var(--spacing-big) !important; }
|
|
.m-b-big { margin-bottom: var(--spacing-big) !important; }
|
|
.m-l-big { margin-left: var(--spacing-big) !important; }
|
|
|
|
.p-none { padding: 0 !important; }
|
|
.p-x-none { padding-left: 0 !important; padding-right: 0 !important; }
|
|
.p-y-none { padding-top: 0 !important; padding-bottom: 0 !important; }
|
|
.p-t-none { padding-top: 0 !important; }
|
|
.p-r-none { padding-right: 0 !important; }
|
|
.p-b-none { padding-bottom: 0 !important; }
|
|
.p-l-none { padding-left: 0 !important; }
|
|
|
|
.p-small { padding: var(--spacing-small) !important; }
|
|
.p-x-small { padding-left: var(--spacing-small) !important; padding-right: var(--spacing-small) !important; }
|
|
.p-y-small { padding-top: var(--spacing-small) !important; padding-bottom: var(--spacing-small) !important; }
|
|
.p-t-small { padding-top: var(--spacing-small) !important; }
|
|
.p-r-small { padding-right: var(--spacing-small) !important; }
|
|
.p-b-small { padding-bottom: var(--spacing-small) !important; }
|
|
.p-l-small { padding-left: var(--spacing-small) !important; }
|
|
|
|
.p-medium { padding: var(--spacing-medium) !important; }
|
|
.p-x-medium { padding-left: var(--spacing-medium) !important; padding-right: var(--spacing-medium) !important; }
|
|
.p-y-medium { padding-top: var(--spacing-medium) !important; padding-bottom: var(--spacing-medium) !important; }
|
|
.p-t-medium { padding-top: var(--spacing-medium) !important; }
|
|
.p-r-medium { padding-right: var(--spacing-medium) !important; }
|
|
.p-b-medium { padding-bottom: var(--spacing-medium) !important; }
|
|
.p-l-medium { padding-left: var(--spacing-medium) !important; }
|
|
|
|
.p-big { padding: var(--spacing-big) !important; }
|
|
.p-x-big { padding-left: var(--spacing-big) !important; padding-right: var(--spacing-big) !important; }
|
|
.p-y-big { padding-top: var(--spacing-big) !important; padding-bottom: var(--spacing-big) !important; }
|
|
.p-t-big { padding-top: var(--spacing-big) !important; }
|
|
.p-r-big { padding-right: var(--spacing-big) !important; }
|
|
.p-b-big { padding-bottom: var(--spacing-big) !important; }
|
|
.p-l-big { padding-left: var(--spacing-big) !important; }
|
|
|
|
.m-x-auto { margin-left: auto !important; margin-right: auto !important; }
|
|
|
|
/***************************************************************************************************
|
|
* Text utilities
|
|
***************************************************************************************************/
|
|
|
|
/* Text color */
|
|
.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-muted { color: var(--text-muted) !important; }
|
|
|
|
/* Text size */
|
|
.text-small { font-size: var(--font-size-small) !important; }
|
|
.text-big { font-size: var(--font-size-big) !important; }
|
|
|
|
/* Text style */
|
|
.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; }
|