eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Make current code library + add docs

Browse Source
This commit is contained in:
Jai A
2023-02-18 11:43:12 -07:00
parent 0faa24d5d3
commit 4434796aab
124 changed files with 1282 additions and 4984 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
lib/assets/styles/utility.scss Normal file
View File

@@ -0,0 +1,136 @@
$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;
}
}