Mercurial > gemma
diff client/src/assets/application.scss @ 5627:7768f14f6535 729-node-js-newer-version
Transformed scss variables into css custom properties
author | Luisa Beerboom <lbeerboom@intevation.de> |
---|---|
date | Tue, 09 May 2023 13:17:58 +0200 |
parents | 0897859b2f4a |
children |
line wrap: on
line diff
--- a/client/src/assets/application.scss Thu Dec 22 18:43:46 2022 +0100 +++ b/client/src/assets/application.scss Tue May 09 13:17:58 2023 +0200 @@ -14,20 +14,27 @@ */ @import "@/assets/tooltip.scss"; -$shadow-xs: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); -$border-radius: 0.25rem; -$icon-height: 2rem; -$icon-width: 2rem; -$large-offset: 2rem; -$offset: 1rem; -$sidebar-width: 13rem; -$slight-transparent: 0.96; -$small-offset: 0.5rem; -$smaller: 0.9rem; -$transition-fast: 0.3s; -$x-large-offset: 3rem; -$xx-large-offset: 5rem; -$color-info: #17a2b8; +:root { + --shadow-xs: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); + --border-radius: 0.25rem; + --icon-height: 2rem; + --icon-width: 2rem; + --large-offset: 2rem; + --offset: 1rem; + --sidebar-width: 13rem; + --slight-transparent: 0.96; + --small-offset: 0.5rem; + --smaller: 0.9rem; + --transition-fast: 0.3s; + --x-large-offset: 3rem; + --xx-large-offset: 5rem; + + --color-info: #17a2b8; + --color-info-h: 188; + --color-info-s: 78%; + --color-info-l: 41%; +} + ::placeholder { color: #ccc !important; @@ -40,13 +47,13 @@ } a { - color: $color-info; + color: var(--color-info); } a:hover, a:active, a:focus { - color: darken($color-info, 13); + color: hsl(var(--color-info-h), var(--color-info-s), calc(#{var(--color-info-l)} - 13%)); } .w-90 { @@ -86,22 +93,22 @@ } .shadow-xs { - box-shadow: $shadow-xs; + box-shadow: var(--shadow-xs); } .box { - opacity: $slight-transparent; + opacity: var(--slight-transparent); max-height: 0; max-width: 0; overflow: hidden; margin: 0; - box-shadow: $shadow-xs; + box-shadow: var(--shadow-xs); transition: max-width 0.4s, max-height 0.4s, margin 0.4s; } .box h6, .contextbox h6 { - color: $color-info; + color: var(--color-info); font-weight: bold; } @@ -147,7 +154,7 @@ .closebutton { position: absolute; - right: $offset; + right: var(--offset); } .headline { @@ -184,7 +191,7 @@ box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); border-left: 0 !important; &.snotify-info { - border-top: 4px solid $color-info; + border-top: 4px solid var(--color-info); .snotify-icon--info { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20version=%221.1%22%20x=%220px%22%20y=%220px%22%20viewBox=%220%200%20512%20512%22%20fill=%22%2317a2b8%22%3E%3Cg%3E%3Cpath%20d=%22M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,478.43C133.35,478.43,33.57,378.64,33.57,256S133.35,33.58,256,33.58,478.42,133.36,478.42,256,378.64,478.43,256,478.43Z%22/%3E%3Cpath%20d=%22M251.26,161.24a22.39,22.39,0,1,0-22.38-22.39A22.39,22.39,0,0,0,251.26,161.24Z%22/%3E%3Cpath%20d=%22M286.84,357.87h-14v-160A16.79,16.79,0,0,0,256,181.05H225.17a16.79,16.79,0,0,0,0,33.58h14.05V357.87H225.17a16.79,16.79,0,0,0,0,33.57h61.67a16.79,16.79,0,1,0,0-33.57Z%22/%3E%3C/g%3E%3C/svg%3E"); } @@ -227,6 +234,6 @@ } .custom-control-input:checked ~ .custom-control-label::before { - border-color: $color-info; - background-color: $color-info; + border-color: var(--color-info); + background-color: var(--color-info); }