chore(ui): remove deprecated sass division

kestra-io · Feb 6, 2022 · 8b01587 · 8b01587
1 parent e525e14
commit 8b01587
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 19 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -32,7 +32,7 @@ jobs:
         with:
           python-version: '3.x'
           architecture: 'x64'
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
           node-version: '12'
           check-latest: true
@@ -53,15 +53,15 @@ jobs:
             ${{ runner.os }}-gradle-
 
       - name: Npm cache
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: ~/.npm
           key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-npm-
 
       - name: Node cache
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: node
           key: ${{ runner.os }}-node-${{ hashFiles('ui/*.gradle') }}

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/src/components/flows/TriggerAvatar.vue b/ui/src/components/flows/TriggerAvatar.vue
@@ -64,10 +64,11 @@
 </script>
 
 <style lang="scss" scoped>
+@use "sass:math";
 @import "../../styles/_variable.scss";
 
 .b-avatar {
-    margin-right: $badge-pill-padding-x / 2;
+    margin-right: math.div($badge-pill-padding-x, 2);
 }
 
 </style>
diff --git a/ui/src/components/inputs/Editor.vue b/ui/src/components/inputs/Editor.vue
@@ -269,6 +269,7 @@
     };
 </script>
 <style scoped lang="scss">
+@use "sass:math";
 @import "../../styles/variable";
 
 ::v-deep .editor-container {
@@ -313,7 +314,7 @@
         }
 
         p {
-            margin-bottom: $spacer/2;
+            margin-bottom: math.div($spacer, 2);
             &:last-child {
                 display: none;
             }

diff --git a/ui/src/components/layout/BottomLine.vue b/ui/src/components/layout/BottomLine.vue
@@ -7,6 +7,7 @@
     export default {}
 </script>
 <style lang="scss" >
+    @use "sass:math";
     @import "../../styles/variable";
 
     .bottom-line {
@@ -24,7 +25,7 @@
             margin-left: $spacer;
 
             span:first-child {
-                margin-right: $spacer / 3;
+                margin-right: math.div($spacer, 3);
             }
         }
     }

diff --git a/ui/src/components/layout/DataTable.vue b/ui/src/components/layout/DataTable.vue
@@ -50,9 +50,9 @@
 </script>
 
 <style scoped lang="scss">
+@use "sass:math";
 @import "../../styles/variable";
 
-
 small {
     padding: $pagination-padding-y-sm $pagination-padding-x-sm;
     white-space: nowrap;
@@ -65,8 +65,8 @@ small {
 
 ::v-deep .badge {
     font-size: 100%;
-    margin-right: $spacer/4;
-    margin-bottom: $spacer/4;
+    margin-right: math.div($spacer, 4);
+    margin-bottom: math.div($spacer, 4);
     padding: $badge-padding-y $badge-padding-y;
 
     .badge {

diff --git a/ui/src/components/layout/TopNavBar.vue b/ui/src/components/layout/TopNavBar.vue
@@ -46,6 +46,7 @@
     };
 </script>
 <style lang="scss" scoped>
+@use "sass:math";
 @import "../../styles/variable";
 
 .menu-collapsed {
@@ -80,7 +81,7 @@
     .navbar-text {
         h1 {
             color: var(--primary);
-            margin-bottom: $headings-margin-bottom / 2;
+            margin-bottom: math.div($headings-margin-bottom, 2);
             font-weight: bold;
 
             .theme-dark & {

diff --git a/ui/src/components/logs/LogLine.vue b/ui/src/components/logs/LogLine.vue
@@ -70,12 +70,13 @@
     };
 </script>
 <style scoped lang="scss">
+@use "sass:math";
 @import "../../styles/_variable.scss";
 
 div.line {
     white-space: pre-wrap;
     word-break: break-all;
-    padding: 0 $spacer/2;
+    padding: 0 math.div($spacer, 2);
 
     .theme-dark & {
         color: var(--body-color)
@@ -84,7 +85,7 @@ div.line {
     .header-badge {
         display: inline-block;
         font-size: 95%;
-        margin-left: -$spacer/2;
+        margin-left: math.div(-$spacer, 2);
         padding: $badge-padding-y $badge-padding-x;
         font-weight: $font-weight-base;
         line-height: 1;
@@ -98,7 +99,7 @@ div.line {
         }
 
         &.property {
-            padding: $badge-padding-y $badge-padding-x/2;
+            padding: $badge-padding-y math.div($badge-padding-x, 2);
 
             > span {
                 font-family: $font-family-sans-serif;

diff --git a/ui/src/components/plugins/TaskIcon.vue b/ui/src/components/plugins/TaskIcon.vue
@@ -78,14 +78,15 @@
 </script>
 
 <style lang="scss" scoped>
+    @use "sass:math";
     @import "../../styles/_variable.scss";
     div.wrapper {
         height: 100%;
         width: 100%;
         font-size: $font-size-xs;
 
         > .icon {
-            margin: $btn-padding-x-sm / 2 ;
+            margin: math.div($btn-padding-x-sm, 2);
             height: calc(100% - 25px);
             display: block;
             background-size: contain;
@@ -106,7 +107,7 @@
             width: 100%;
             bottom: 0;
             text-align: center;
-            padding: $btn-padding-y-sm / 2 1px ;
+            padding: math.div($btn-padding-y-sm, 2) 1px ;
         }
 
         &.flowable {

diff --git a/ui/src/components/plugins/Toc.vue b/ui/src/components/plugins/Toc.vue
@@ -82,6 +82,7 @@
 </script>
 
 <style lang="scss">
+    @use "sass:math";
     @import "../../styles/_variable.scss";
 
     .plugins-list {
@@ -99,7 +100,7 @@
                 margin-left: $spacer;
                 h6 {
                     font-size: $h6-font-size * 0.8;
-                    margin-bottom: $spacer / 3;
+                    margin-bottom: math.div($spacer, 3);
                 }
             }
         }