mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
85 lines
2.0 KiB
SCSS
85 lines
2.0 KiB
SCSS
@use '../config' as *;
|
|
|
|
// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
|
|
|
|
// scss-docs-start empty-css-vars
|
|
$empty-tokens: () !default;
|
|
$empty-tokens: defaults(
|
|
(
|
|
--empty-padding: $empty-padding,
|
|
--empty-padding-md: $empty-padding-md,
|
|
--empty-icon-size: $empty-icon-size,
|
|
--empty-icon-margin-bottom: $empty-icon-margin-bottom,
|
|
--empty-img-margin-bottom: $empty-img-margin-bottom,
|
|
--empty-header-margin-bottom: $empty-header-margin-bottom,
|
|
--empty-header-font-size: $empty-header-font-size,
|
|
--empty-title-margin-bottom: $empty-title-margin-bottom,
|
|
--empty-action-margin-top: $empty-action-margin-top,
|
|
),
|
|
$empty-tokens
|
|
);
|
|
// scss-docs-end empty-css-vars
|
|
|
|
// stylelint-enable custom-property-no-missing-var-function
|
|
|
|
.empty {
|
|
@include tokens($empty-tokens);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
padding: var(--empty-padding);
|
|
text-align: center;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
padding: var(--empty-padding-md);
|
|
}
|
|
}
|
|
|
|
.empty-icon {
|
|
width: var(--empty-icon-size);
|
|
height: var(--empty-icon-size);
|
|
margin: 0 0 var(--empty-icon-margin-bottom);
|
|
line-height: 1;
|
|
color: var(--secondary);
|
|
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.empty-img {
|
|
margin: 0 0 var(--empty-img-margin-bottom);
|
|
line-height: 1;
|
|
}
|
|
|
|
.empty-header {
|
|
margin: 0 0 var(--empty-header-margin-bottom);
|
|
font-size: var(--empty-header-font-size);
|
|
font-weight: var(--font-weight-light);
|
|
line-height: 1;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.empty-title {
|
|
font-size: $h2-font-size;
|
|
font-weight: $headings-font-weight;
|
|
line-height: $h2-line-height;
|
|
}
|
|
|
|
.empty-title,
|
|
.empty-subtitle {
|
|
margin: 0 0 var(--empty-title-margin-bottom);
|
|
}
|
|
|
|
.empty-action {
|
|
margin-top: var(--empty-action-margin-top);
|
|
}
|
|
|
|
.empty-bordered {
|
|
border: var(--border-width) var(--border-style) var(--border-color);
|
|
@include border-radius(var(--border-radius));
|
|
}
|