forked from didirus/AstralRinth
138 lines
3.0 KiB
SCSS
138 lines
3.0 KiB
SCSS
$gaps: (
|
|
'0': 0,
|
|
'auto': auto,
|
|
'xs': var(--gap-xs),
|
|
'sm': var(--gap-sm),
|
|
'md': var(--gap-md),
|
|
'lg': var(--gap-lg),
|
|
'xl': var(--gap-xl),
|
|
);
|
|
|
|
@each $name, $value in $gaps {
|
|
[class*='padding-#{$name}'] {
|
|
padding: $value;
|
|
}
|
|
[class*='padding-inline-#{$name}'] {
|
|
padding-inline: $value;
|
|
}
|
|
[class*='padding-block-#{$name}'] {
|
|
padding-block: $value;
|
|
}
|
|
[class*='padding-top-#{$name}'] {
|
|
padding-top: $value;
|
|
}
|
|
[class*='padding-bottom-#{$name}'] {
|
|
padding-bottom: $value;
|
|
}
|
|
[class*='padding-left-#{$name}'] {
|
|
padding-left: $value;
|
|
}
|
|
[class*='padding-right-#{$name}'] {
|
|
padding-right: $value;
|
|
}
|
|
[class*='margin-#{$name}'] {
|
|
margin: $value;
|
|
}
|
|
[class*='margin-inline-#{$name}'] {
|
|
margin-inline: $value;
|
|
}
|
|
[class*='margin-block-#{$name}'] {
|
|
margin-block: $value;
|
|
}
|
|
[class*='margin-top-#{$name}'] {
|
|
margin-top: $value;
|
|
}
|
|
[class*='margin-bottom-#{$name}'] {
|
|
margin-bottom: $value;
|
|
}
|
|
[class*='margin-left-#{$name}'] {
|
|
margin-left: $value;
|
|
}
|
|
[class*='margin-right-#{$name}'] {
|
|
margin-right: $value;
|
|
}
|
|
}
|
|
|
|
$bg-colors: (
|
|
'base': var(--color-bg),
|
|
'raised': var(--color-raised-bg),
|
|
'clickable': var(--color-button-bg),
|
|
'brand': var(--color-brand),
|
|
'red': var(--color-red),
|
|
'orange': var(--color-orange),
|
|
'green': var(--color-green),
|
|
'blue': var(--color-blue),
|
|
'purple': var(--color-purple),
|
|
'gray': var(--color-gray),
|
|
);
|
|
|
|
@each $name, $value in $bg-colors {
|
|
[class*='bg-#{$name}'] {
|
|
background-color: $value;
|
|
}
|
|
}
|
|
|
|
$colors: (
|
|
'base': var(--color-base),
|
|
'contrast': var(--color-contrast),
|
|
'accent-contrast': var(--color-accent-contrast),
|
|
'brand': var(--color-brand),
|
|
'brand-highlight': var(--color-brand-highlight),
|
|
'red': var(--color-red),
|
|
'orange': var(--color-orange),
|
|
'green': var(--color-green),
|
|
'blue': var(--color-blue),
|
|
'purple': var(--color-purple),
|
|
'gray': var(--color-gray),
|
|
);
|
|
|
|
@each $name, $value in $colors {
|
|
[class*='color-#{$name}'] {
|
|
color: $value;
|
|
}
|
|
}
|
|
|
|
$radii: (
|
|
'0': 0,
|
|
'xs': var(--radius-xs),
|
|
'sm': var(--radius-sm),
|
|
'md': var(--radius-md),
|
|
'lg': var(--radius-lg),
|
|
'xl': var(--radius-xl),
|
|
'max': var(--radius-max),
|
|
);
|
|
|
|
@each $name, $value in $gaps {
|
|
[class*='radius-#{$name}'] {
|
|
border-radius: $value;
|
|
}
|
|
[class*='radius-top-left-#{$name}'] {
|
|
border-top-left-radius: $value;
|
|
}
|
|
[class*='radius-bottom-left-#{$name}'] {
|
|
border-bottom-left-radius: $value;
|
|
}
|
|
[class*='radius-top-right-#{$name}'] {
|
|
border-top-right-radius: $value;
|
|
}
|
|
[class*='radius-bottom-right-#{$name}'] {
|
|
border-bottom-right-radius: $value;
|
|
}
|
|
[class*='radius-top-#{$name}'] {
|
|
border-top-right-radius: $value;
|
|
border-top-left-radius: $value;
|
|
}
|
|
[class*='radius-bottom-#{$name}'] {
|
|
border-bottom-right-radius: $value;
|
|
border-bottom-left-radius: $value;
|
|
}
|
|
[class*='radius-left-#{$name}'] {
|
|
border-top-left-radius: $value;
|
|
border-bottom-left-radius: $value;
|
|
}
|
|
[class*='radius-right-#{$name}'] {
|
|
border-top-right-radius: $value;
|
|
border-bottom-right-radius: $value;
|
|
}
|
|
}
|