Merge pull request #140 from PermanentOrg/sass-migration

Fix Sass deprecation warnings
PermanentOrg · Aug 1, 2022 · 8f3402b · 8f3402b
2 parents 77ad41a + 5c320a2
commit 8f3402b
Show file tree

Hide file tree

Showing 52 changed files with 214 additions and 194 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
     "ngx-route-history": "0.0.4",
     "progressbar.js": "1.0.1",
     "rxjs": "6.6.3",
+    "sass": "^1.54.0",
     "shallow-render": "12.0.1",
     "time-ago-pipe": "^1.3.2",
     "ts-key-enum": "^2.0.2",

diff --git a/src/app/apps/components/connector/connector.component.scss b/src/app/apps/components/connector/connector.component.scss
@@ -69,11 +69,11 @@ $info-height: $file-list-row-height;
 }
 
 .connector-actions {
-  padding-top: $grid-unit / 2;
+  padding-top: $grid-unit * 0.5;
 
   .btn {
     margin: 0 auto;
-    margin-bottom: $grid-unit / 2;
+    margin-bottom: $grid-unit * 0.5;
   }
 }
 
@@ -86,9 +86,9 @@ $info-height: $file-list-row-height;
 }
 
 [prBgImage] {
-  height: $info-height - ($grid-unit / 2);
-  width: $info-height - ($grid-unit / 2);
-  flex: 0 0 $info-height - ($grid-unit / 2);
+  height: $info-height - ($grid-unit * 0.5);
+  width: $info-height - ($grid-unit * 0.5);
+  flex: 0 0 $info-height - ($grid-unit * 0.5);
   margin: 5px 0px;
   margin-right: 5px;
 }

diff --git a/src/app/core/components/account-settings/account-settings.component.scss b/src/app/core/components/account-settings/account-settings.component.scss
@@ -15,7 +15,7 @@ p {
 
   .settings-group-title {
     font-weight: $font-weight-bold;
-    padding: $grid-unit / 2 0;
+    padding: $grid-unit * 0.5 0;
   }
 }
 
@@ -31,15 +31,15 @@ p {
 
   & > label {
     font-weight: $font-weight-bold;
-    padding: $grid-unit / 2 0;
+    padding: $grid-unit * 0.5 0;
     margin-bottom: 0px;
     flex: 0 0 12rem;
     display: flex;
     align-items: center;
 
     i {
       font-size: $mat-icon-sm;
-      margin-left: $grid-unit / 2;
+      margin-left: $grid-unit * 0.5;
       cursor: pointer;
     }
   }

diff --git a/src/app/core/components/all-archives/all-archives.component.scss b/src/app/core/components/all-archives/all-archives.component.scss
@@ -6,7 +6,7 @@
   @include hasFloatSidebar;
 
   @include beforeDesktop {
-    padding: 0 $grid-unit / 2;
+    padding: 0 $grid-unit * 0.5;
   } 
 }
 .sidebar {

diff --git a/src/app/core/components/billing-settings/billing-settings.component.scss b/src/app/core/components/billing-settings/billing-settings.component.scss
@@ -15,7 +15,7 @@ p {
 
   .settings-group-title {
     font-weight: $font-weight-bold;
-    padding: $grid-unit / 2 0;
+    padding: $grid-unit * 0.5 0;
   }
 }
 
@@ -31,7 +31,7 @@ p {
 
   & > label {
     font-weight: $font-weight-bold;
-    padding: $grid-unit / 2 0;
+    padding: $grid-unit * 0.5 0;
     margin-bottom: 0px;
     flex: 0 0 12rem;
   }

diff --git a/src/app/core/components/left-menu/left-menu.component.scss b/src/app/core/components/left-menu/left-menu.component.scss
@@ -9,7 +9,7 @@ $active-color: $PR-orange;
 $active-indicator-color: lighten($active-color, 7%);
 
 $archive-options-shadow-color: rgba($black, .1);
-$archive-options-shadow-spread: $grid-unit / 4;
+$archive-options-shadow-spread: $grid-unit * 0.25;
 $archive-options-shadow-offset: 0.5rem;
 
 :host {
@@ -100,7 +100,7 @@ $archive-options-shadow-offset: 0.5rem;
     font-weight: 700;
     text-decoration: none;
 
-    transition: background-color $transition-length / 4 ease-in;
+    transition: background-color $transition-length * 0.25 ease-in;
 
     a {
       color: white;
@@ -242,7 +242,7 @@ $archive-options-shadow-offset: 0.5rem;
       .archive-name {
         padding: 0 !important;
         font-weight: bold;
-        padding: $grid-unit / 2;
+        padding: $grid-unit * 0.5;
       }
 
       .archive-access {
@@ -280,7 +280,7 @@ $archive-options-shadow-offset: 0.5rem;
         justify-content: center;
         cursor: pointer;
         background-color: $PR-blue;
-        transition: background-color $transition-length / 4 ease-in;
+        transition: background-color $transition-length * 0.25 ease-in;
 
         &:hover {
           background-color: $hover-color;
@@ -294,15 +294,15 @@ $archive-options-shadow-offset: 0.5rem;
       flex: 0 0 auto;
       background-color: $PR-blue;
       hr {
-        margin: $grid-unit / 2;
+        margin: $grid-unit * 0.5;
         border-color: white;
       }
       overflow-y: hidden;
     }
 
     .archive-options-option {
       height: 2 * $grid-unit;
-      padding: 0 $grid-unit / 2;
+      padding: 0 $grid-unit * 0.5;
       padding-left: $grid-unit * 1.5;
       display: flex;
       align-items: center;

diff --git a/src/app/core/components/members-dialog/members-dialog.component.scss b/src/app/core/components/members-dialog/members-dialog.component.scss
@@ -58,6 +58,6 @@
   align-items: center;
   button {
     @include gridHeightButtonSmall;
-    margin-left: $grid-unit / 2;
+    margin-left: $grid-unit * 0.5;
   }
 }
diff --git a/src/app/core/components/nav/nav.component.scss b/src/app/core/components/nav/nav.component.scss
@@ -140,11 +140,11 @@ nav.nav-desktop {
       &:after {
         position: absolute;
         top: 0;
-        right: -$grid-unit / 4;
+        right: -$grid-unit * 0.25;
         display: block;
         content: '';
-        height: $grid-unit / 2;
-        width: $grid-unit / 2;
+        height: $grid-unit * 0.5;
+        width: $grid-unit * 0.5;
         background: $red;
         border-radius: 50%;
 

diff --git a/src/app/core/components/notification-preferences/notification-preferences.component.scss b/src/app/core/components/notification-preferences/notification-preferences.component.scss
@@ -21,11 +21,11 @@
 
 .preference-group-title {
   font-weight: $font-weight-bold;
-  padding: $grid-unit / 2 0;
+  padding: $grid-unit * 0.5 0;
 }
 
 .form-check {
-  margin-bottom: $grid-unit / 2;
+  margin-bottom: $grid-unit * 0.5;
 
   input {
     cursor: pointer;