mirror of
https://github.com/tabler/tabler.git
synced 2026-08-13 14:52:22 +04:00
codecalm
60 lines
1.0 KiB
SCSS
60 lines
1.0 KiB
SCSS
@mixin shape-color($color: $color-muted) {
|
|
background: rgba($color, .1);
|
|
color: $color;
|
|
}
|
|
|
|
.shape {
|
|
--shape-size: 2.5rem;
|
|
--shape-icon-size: 1.5rem;
|
|
--shape-icon-stroke: 1.5;
|
|
width: var(--shape-size);
|
|
height: var(--shape-size);
|
|
font-size: var(--shape-icon-size);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: $font-weight-medium;
|
|
color: $color-muted;
|
|
background: $color-gray;
|
|
border-radius: 35%;
|
|
vertical-align: bottom;
|
|
|
|
.icon {
|
|
stroke-width: var(--shape-icon-stroke);
|
|
width: var(--shape-icon-size);
|
|
height: var(--shape-icon-size);
|
|
}
|
|
}
|
|
|
|
/*! purgecss start ignore */
|
|
@each $name, $color in $colors {
|
|
.shape-#{$name} {
|
|
@include shape-color($color);
|
|
}
|
|
}
|
|
|
|
.shape-square {
|
|
border-radius: $border-radius-lg;
|
|
}
|
|
|
|
.shape-rounded {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.shape-sm {
|
|
--shape-size: 1.5rem;
|
|
--shape-icon-size: 1rem;
|
|
}
|
|
|
|
.shape-md {
|
|
--shape-size: 3rem;
|
|
--shape-icon-size: 1.75rem;
|
|
}
|
|
|
|
.shape-lg {
|
|
--shape-size: 4rem;
|
|
--shape-icon-size: 2.25rem;
|
|
}
|
|
|
|
/*! purgecss end ignore */
|