Skip to content
Snippets Groups Projects
Verified Commit 838ba11e authored by Lars Thoms's avatar Lars Thoms
Browse files

:recycle: move alert colors to config.sass

parent 8c6aae1d
Branches
Tags
No related merge requests found
......@@ -56,18 +56,19 @@ watch(
grid-template-columns: 1fr min-content
gap: 1rem
padding: 1rem
color: var(--alert-text-color)
&.danger div
background-color: #f44336
background-color: var(--danger-color)
&.warning div
background-color: #ff9800
background-color: var(--warning-color)
&.success div
background-color: #155724
background-color: var(--success-color)
&.info div
background-color: #2196F3
background-color: var(--info-color)
p
margin: 0
......
......@@ -9,8 +9,12 @@ $light-theme: (
text-color: #4e4e4e,
background-color: #fff,
border-color: #bbb,
error-color: #f00,
section-background-color: #f3f3f3,
alert-text-color: #fff,
danger-color: #f44336,
warning-color: #ff9800,
success-color: #155724,
info-color: #2196F3,
);
// Dark theme
......@@ -22,8 +26,12 @@ $dark-theme: (
text-color: #fff,
background-color: #222,
border-color: #666,
error-color: #f00,
section-background-color: #2c2c2c,
alert-text-color: map.get($light-theme, alert-text-color),
danger-color: map.get($light-theme, danger-color),
warning-color: map.get($light-theme, warning-color),
success-color: map.get($light-theme, success-color),
info-color: map.get($light-theme, info-color),
);
// Font sizes
......
......@@ -26,7 +26,7 @@ input
transition: box-shadow 150ms ease-in-out
&:user-invalid
box-shadow: 0 0 0 1px var(--error-color), 0 0 5px 1px var(--error-color)
box-shadow: 0 0 0 1px var(--danger-color), 0 0 5px 1px var(--danger-color)
&:focus
outline: none
......
......@@ -30,7 +30,7 @@
--font-family: "TheSans UHH", system-ui, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
--font-family-caps: "TheSans UHH Caps", system-ui, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
@include color-vars('primary-color', 'secondary-color', 'tertiary-color', 'accent-color', 'text-color', 'background-color', 'border-color', 'error-color', 'section-background-color')
@include color-vars('primary-color', 'secondary-color', 'tertiary-color', 'accent-color', 'text-color', 'background-color', 'border-color', 'section-background-color', 'alert-text-color', 'danger-color', 'warning-color', 'success-color', 'info-color')
@include color-var-alias('form-border-color', 'primary-color')
@include color-var-alias('button-background-color', 'section-background-color')
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment