Mercurial > gemma
changeset 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 | 39c1698fb0ff |
children | a985f8c46cf3 |
files | client/src/assets/application.scss client/src/components/Contextbox.vue client/src/components/Logs.vue client/src/components/Popup.vue client/src/components/Sidebar.vue client/src/components/Spacer.vue client/src/components/fairway/BottleneckDialogue.vue client/src/components/importconfiguration/ScheduledImports.vue client/src/components/map/Zoom.vue client/src/components/systemconfiguration/PDFTemplates.vue client/src/components/systemconfiguration/Systemconfiguration.vue client/src/components/ui/UIBoxHeader.vue client/src/components/ui/UITableBody.vue client/src/components/usermanagement/Userdetail.vue |
diffstat | 14 files changed, 75 insertions(+), 68 deletions(-) [+] |
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); }
--- a/client/src/components/Contextbox.vue Thu Dec 22 18:43:46 2022 +0100 +++ b/client/src/components/Contextbox.vue Tue May 09 13:17:58 2023 +0200 @@ -95,7 +95,7 @@ .contextbox { position: relative; background-color: #ffffff; - opacity: $slight-transparent; + opacity: var(--slight-transparent); transition: max-width 0.3s, max-height 0.3s; overflow: hidden; background: #fff; @@ -123,7 +123,7 @@ z-index: 2; right: 0; top: 7px; - height: $icon-width; - width: $icon-height; + height: var(--icon-width); + width: var(--icon-height); } </style>
--- a/client/src/components/Logs.vue Thu Dec 22 18:43:46 2022 +0100 +++ b/client/src/components/Logs.vue Tue May 09 13:17:58 2023 +0200 @@ -65,8 +65,8 @@ .logmenu { position: relative; - margin-left: $offset; - margin-top: $offset; + margin-left: var(--offset); + margin-top: var(--offset); } .logs { @@ -80,17 +80,17 @@ .refresh { position: absolute; - right: $offset; + right: var(--offset); bottom: 0; } .logoutput { - margin-left: $offset; - margin-right: $offset; - margin-top: $offset; + margin-left: var(--offset); + margin-right: var(--offset); + margin-top: var(--offset); height: 90%; overflow: auto; - transition: $transition-fast; + transition: var(--transition-fast); } .statusline {
--- a/client/src/components/Popup.vue Thu Dec 22 18:43:46 2022 +0100 +++ b/client/src/components/Popup.vue Tue May 09 13:17:58 2023 +0200 @@ -89,7 +89,7 @@ align-items: center padding-left: .5rem border-bottom: 1px solid #dee2e6 - color: $color-info + color: var(--color-info) margin-bottom: 0 padding: 0.25rem font-weight: bold
--- a/client/src/components/Sidebar.vue Thu Dec 22 18:43:46 2022 +0100 +++ b/client/src/components/Sidebar.vue Tue May 09 13:17:58 2023 +0200 @@ -259,19 +259,19 @@ .sidebar { background-color: #ffffff; - padding-top: $large-offset; - opacity: $slight-transparent; - transition: $transition-fast; + padding-top: var(--large-offset); + opacity: var(--slight-transparent); + transition: var(--transition-fast); overflow: hidden; } .sidebarcollapsed { - max-height: $icon-height; - max-width: $icon-width; + max-height: var(--icon-height); + max-width: var(--icon-width); } .sidebarextended { - max-width: $sidebar-width; - min-width: $sidebar-width; + max-width: var(--sidebar-width); + min-width: var(--sidebar-width); } </style>
--- a/client/src/components/Spacer.vue Thu Dec 22 18:43:46 2022 +0100 +++ b/client/src/components/Spacer.vue Tue May 09 13:17:58 2023 +0200 @@ -40,11 +40,11 @@ } .spacer-collapsed { - min-width: $icon-width + $small-offset; - transition: $transition-fast; + min-width: var(--icon-width) + var(--small-offset); + transition: var(--transition-fast); } .spacer-expanded { - min-width: $sidebar-width + $small-offset; + min-width: var(--sidebar-width) + var(--small-offset); } </style>
--- a/client/src/components/fairway/BottleneckDialogue.vue Thu Dec 22 18:43:46 2022 +0100 +++ b/client/src/components/fairway/BottleneckDialogue.vue Tue May 09 13:17:58 2023 +0200 @@ -298,10 +298,10 @@ </div> </template> -<style lang="scss" scoped> +<style lang="css" scoped> .input-button-right { - border-top-right-radius: $border-radius; - border-bottom-right-radius: $border-radius; + border-top-right-radius: var(border-radius); + border-bottom-right-radius: var(border-radius); border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } @@ -309,8 +309,8 @@ .rounded-left-only { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; - border-top-left-radius: $border-radius; - border-bottom-left-radius: $border-radius; + border-top-left-radius: var(border-radius); + border-bottom-left-radius: var(border-radius); } input,
--- a/client/src/components/importconfiguration/ScheduledImports.vue Thu Dec 22 18:43:46 2022 +0100 +++ b/client/src/components/importconfiguration/ScheduledImports.vue Tue May 09 13:17:58 2023 +0200 @@ -1183,7 +1183,7 @@ .importscheduledetails { width: 100%; - margin-top: $offset; - margin-right: $offset; + margin-top: var(--offset); + margin-right: var(--offset); } </style>
--- a/client/src/components/map/Zoom.vue Thu Dec 22 18:43:46 2022 +0100 +++ b/client/src/components/map/Zoom.vue Tue May 09 13:17:58 2023 +0200 @@ -19,16 +19,16 @@ .zoom-buttons position: absolute z-index: 1 - bottom: $small-offset + bottom: var(--small-offset) left: 50% - margin-left: -$icon-width + margin-left: -var(--icon-width) margin-bottom: 0 transition: margin-bottom 0.3s &.move - bottom: $large-offset * 1.5 + bottom: calc(var(--large-offset) * 1.5) .zoom-button - min-height: $icon-width - min-width: $icon-width + min-height: var(--icon-width) + min-width: var(--icon-width) z-index: 1 outline: none color: #666
--- a/client/src/components/systemconfiguration/PDFTemplates.vue Thu Dec 22 18:43:46 2022 +0100 +++ b/client/src/components/systemconfiguration/PDFTemplates.vue Tue May 09 13:17:58 2023 +0200 @@ -76,10 +76,10 @@ <style lang="scss" scoped> .table th, td { - font-size: $smaller; + font-size: var(--smaller); border-top: 0px !important; text-align: left; - padding: $small-offset !important; + padding: var(--small-offset) !important; } </style>
--- a/client/src/components/systemconfiguration/Systemconfiguration.vue Thu Dec 22 18:43:46 2022 +0100 +++ b/client/src/components/systemconfiguration/Systemconfiguration.vue Tue May 09 13:17:58 2023 +0200 @@ -74,7 +74,7 @@ .nav-link border-radius: 0 &.active - background: $color-info + background: var(--color-info) </style> <script>
--- a/client/src/components/ui/UIBoxHeader.vue Thu Dec 22 18:43:46 2022 +0100 +++ b/client/src/components/ui/UIBoxHeader.vue Tue May 09 13:17:58 2023 +0200 @@ -48,7 +48,7 @@ min-height: 34px padding-left: .5rem border-bottom: 1px solid #dee2e6 - color: $color-info + color: var(--color-info) margin-bottom: 0 padding: 0.25rem font-weight: bold
--- a/client/src/components/ui/UITableBody.vue Thu Dec 22 18:43:46 2022 +0100 +++ b/client/src/components/ui/UITableBody.vue Tue May 09 13:17:58 2023 +0200 @@ -38,14 +38,14 @@ &.center justify-content: center .expand - border-bottom: solid 2px $color-info + border-bottom: solid 2px var(--color-info) &.active > .row color: #fff .table-cell border-right-color: rgba(255, 255, 255, 0.3) - background-color: $color-info + background-color: var(--color-info) color: #fff a color: #fff !important
--- a/client/src/components/usermanagement/Userdetail.vue Thu Dec 22 18:43:46 2022 +0100 +++ b/client/src/components/usermanagement/Userdetail.vue Tue May 09 13:17:58 2023 +0200 @@ -144,13 +144,13 @@ <style lang="scss" scoped> .submit-button { position: absolute; - right: $offset; - bottom: $offset; + right: var(--offset); + bottom: var(--offset); } .mailbutton { width: 12vw; position: absolute; - left: $large-offset; + left: var(--large-offset); bottom: 0; } @@ -161,12 +161,12 @@ .userdetails { min-width: 400px; max-height: 693px; - margin-right: $offset; + margin-right: var(--offset); overflow-y: auto; } form { - font-size: $smaller; + font-size: var(--smaller); } </style>