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

Avatar, Badge, Checkbox, Chips, Pagination components (#10)

Browse Source
This commit is contained in:
Geometrically
2023-03-01 17:31:48 -07:00
committed by GitHub
parent 76c0432f96
commit d5785e87e8
32 changed files with 1112 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
lib/assets/styles/classes.scss
View File

@@ -43,7 +43,7 @@ a,
color: var(--color-contrast);
background-color: var(--color-button-bg);
box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
border-radius: var(--radius-sm);
border-radius: var(--radius-md);
}
.standard-body {
@@ -51,3 +51,35 @@ a,
margin-bottom: 0;
}
}
.button-within {
transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
outline 0.2s ease-in-out;
&:focus-visible:not(&.disabled),
&:hover:not(&.disabled) {
filter: brightness(0.85);
}
&:active:not(&.disabled) {
filter: brightness(0.8);
}
// For some reason this within the above block makes it universal and not only applied to children. SCSS bug maybe?
&:active:not(&.disabled) button:not(&:disabled) {
transform: scale(0.95);
}
&.disabled {
cursor: not-allowed;
filter: grayscale(50%);
opacity: 0.5;
box-shadow: none;
&disabled,
&[disabled] {
cursor: not-allowed;
box-shadow: none;
}
}
}

5
lib/assets/styles/defaults.scss
View File

@@ -29,3 +29,8 @@ a {
a.uncolored {
color: inherit;
}
svg {
height: 1em;
width: 1em;
}

1
lib/assets/styles/utility.scss
View File

@@ -77,6 +77,7 @@ $colors: (
'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),

32
lib/assets/styles/variables.scss
View File

@@ -17,7 +17,8 @@ html {
--radius-max: 999999999px;
}
.light-mode, .light {
.light-mode,
.light {
--color-bg: #e5e7eb;
--color-raised-bg: #ffffff;
--color-button-bg: hsl(220, 13%, 91%);
@@ -34,9 +35,24 @@ html {
--color-gray: #595b61;
--color-brand: var(--color-green);
--color-brand-highlight: rgba(0, 175, 92, 0.25);
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
--shadow-inset-sm: inset 0px -1px 2px hsla(221, 39%, 11%, 0.15);
--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
--shadow-raised: 0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15),
1px 2px 2.2px -1.7px hsl(var(--shadow-color) / 0.12),
4.4px 8.8px 9.7px -3.4px hsl(var(--shadow-color) / 0.09);
--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
--shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;
}
.dark-mode, .dark {
.dark-mode,
.dark {
--color-bg: #16181c;
--color-raised-bg: #26292f;
--color-button-bg: hsl(222, 13%, 30%);
@@ -53,6 +69,18 @@ html {
--color-gray: #9fa4b3;
--color-brand: var(--color-green);
--color-brand-highlight: rgba(27, 217, 106, 0.25);
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
--shadow-inset-sm: inset 0px -1px 1px hsla(221, 39%, 11%, 0.25);
--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
--shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
--shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
}
.oled-mode {