Mercurial > gemma

changeset 5627:7768f14f6535 729-node-js-newer-version

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>