$prefix: fuck;
@for $i from 12 through 64 {
.#{$prefix}-fs-#{$i} {
font-size: #{$i}px;
}
}
@for $i from 4 through 64 {
.#{$prefix}-pt-#{$i} {
padding-top: #{$i}px;
}
.#{$prefix}-pl-#{$i} {
padding-left: #{$i}px;
}
.#{$prefix}-pr-#{$i} {
padding-right: #{$i}px;
}
.#{$prefix}-pb-#{$i} {
padding-bottom: #{$i}px;
}
.#{$prefix}-p-vertical-#{$i} {
padding-top: #{$i}px;
padding-bottom: #{$i}px;
}
.#{$prefix}-p-horizontal-#{$i} {
padding-left: #{$i}px;
padding-right: #{$i}px;
}
.#{$prefix}-p-all-#{$i} {
padding: #{$i}px;
}
}
@for $i from 4 through 64 {
.#{$prefix}-mt-#{$i} {
margin-top: #{$i}px;
}
.#{$prefix}-ml-#{$i} {
margin-left: #{$i}px;
}
.#{$prefix}-mr-#{$i} {
margin-right: #{$i}px;
}
.#{$prefix}-mb-#{$i} {
margin-bottom: #{$i}px;
}
.#{$prefix}-m-vertical-#{$i} {
margin-top: #{$i}px;
margin-bottom: #{$i}px;
}
.#{$prefix}-m-horizontal-#{$i} {
margin-left: #{$i}px;
margin-right: #{$i}px;
}
.#{$prefix}-m-all-#{$i} {
margin: #{$i}px;
}
}
@for $i from 4 through 64 {
.#{$prefix}-radius-lt-#{$i} {
border-radius: #{$i}px 0 0 0;
}
.#{$prefix}-radius-rt-#{$i} {
border-radius: 0 #{$i}px 0 0;
}
.#{$prefix}-radius-lb-#{$i} {
border-radius: 0 0 0 #{$i}px;
}
.#{$prefix}-radius-rb-#{$i} {
border-radius: 0 0 #{$i}px 0;
}
.#{$prefix}-radius-ltb-#{$i} {
border-radius: #{$i}px 0 0 #{$i}px;
}
.#{$prefix}-radius-rtb-#{$i} {
border-radius: 0 #{$i}px #{$i}px 0;
}
.#{$prefix}-radius-lrt-#{$i} {
border-radius: #{$i}px #{$i}px 0 0;
}
.#{$prefix}-radius-lrb-#{$i} {
border-radius: 0 0 #{$i}px #{$i}px;
}
.#{$prefix}-radius-ltrb-#{$i} {
border-radius: #{$i}px 0 #{$i}px 0;
}
.#{$prefix}-radius-rtlb-#{$i} {
border-radius: 0 #{$i}px 0 #{$i}px;
}
.#{$prefix}-radius-#{$i} {
border-radius: #{$i}px;
}
}
@each $key, $color in (primary, #009745), (warn, #ffb200), (default, #6d6d6d) {
.#{$key}-color {
color: #{$color};
}
}
@each $key, $color in (primary, #009745), (warn, #ffb200), (default, #6d6d6d) {
.#{$key}-background-color {
background-color: #{$color};
}
}
@each $key, $color in (primary, #009745), (warn, #ffb200), (default, #6d6d6d) {
.#{$key}-background-alpha {
background-color: rgba($color, 0.16);
}
}
@each $key, $color in (primary, #009745), (warn, #ffb200), (default, #6d6d6d) {
.#{$key}-background-alpha-color {
color: #{$color};
background-color: rgba($color, 0.16);
}
}
@each $key, $color in (primary, #009745), (warn, #ffb200), (default, #6d6d6d) {
.#{$key}-background-alpha-border-color {
color: #{$color};
background-color: rgba($color, 0.16);
border: 1px solid #{$color};
}
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.grid-4 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px;
}
.grid-5 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 10px;
}
.grid-10 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 10px;
}
.text-align {
text-align: center;
}
.flex-center-start {
display: flex;
justify-content: center;
align-items: start;
}
.flex-start-center {
display: flex;
justify-content: flex-start;
align-items: center;
}
.flex-start-start {
display: flex;
justify-content: flex-start;
align-items: start;
}
.flex-end-center {
display: flex;
justify-content: flex-end;
align-items: center;
}
.flex-space-between-center {
display: flex;
justify-content: space-between;
align-items: center;
}
.wrap {
flex-wrap: wrap;
}
.overflow {
overflow: hidden;
}