mirror of
https://github.com/modrinth/code.git
synced 2026-08-26 09:34:50 +00:00
137 lines
2.9 KiB
SCSS
137 lines
2.9 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),
|
|
'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;
|
|
}
|
|
}
|