Просмотр исходного кода

update scss for "Breaking Change: Slash as Division"
https://sass-lang.com/documentation/breaking-changes/slash-div/

Yuki Takei 1 год назад
Родитель
Сommit
28a89d25e9

+ 1 - 1
apps/app/src/client/components/Sidebar/AppTitle/AppTitle.module.scss

@@ -17,7 +17,7 @@
     svg {
     svg {
       width: $width;
       width: $width;
       height: $height;
       height: $height;
-      padding: (($height - $logomark-height) / 2) (($width - $logomark-width) / 2);
+      padding: (($height - $logomark-height) * 0.5) (($width - $logomark-width) * 0.5);
     }
     }
   }
   }
 
 

+ 1 - 1
apps/app/src/client/components/Sidebar/SidebarNav/PrimaryItems.module.scss

@@ -36,7 +36,7 @@
         height: $btn-active-indicator-height;
         height: $btn-active-indicator-height;
         content: '';
         content: '';
         background-color: var(--bs-primary);
         background-color: var(--bs-primary);
-        transform: translateY(#{($btn-height - $btn-active-indicator-height) / 2});
+        transform: translateY(#{($btn-height - $btn-active-indicator-height) * 0.5});
       }
       }
     }
     }
   }
   }

+ 1 - 1
apps/app/src/styles/_mixins.scss

@@ -9,7 +9,7 @@
 
 
 @mixin grw-skeleton-text($font-size, $line-height) {
 @mixin grw-skeleton-text($font-size, $line-height) {
   height: $line-height;
   height: $line-height;
-  padding: (($line-height - $font-size) / 2) 0;
+  padding: (($line-height - $font-size) * 0.5) 0;
 }
 }
 
 
 @mixin grw-skeleton-h3 {
 @mixin grw-skeleton-h3 {

+ 5 - 5
apps/app/src/styles/atoms/_custom_control.scss

@@ -30,7 +30,7 @@ label.form-check-label {
     }
     }
 
 
     &::after {
     &::after {
-      top: add(($font-size-base * $line-height-base - $form-check-indicator-size) / 2, $form-check-indicator-border-width * 2);
+      top: add(($font-size-base * $line-height-base - $form-check-indicator-size) * 0.5, $form-check-indicator-border-width * 2);
       left: add(-($form-switch-width-sm + $form-check-gutter-sm), $form-check-indicator-border-width * 2);
       left: add(-($form-switch-width-sm + $form-check-gutter-sm), $form-check-indicator-border-width * 2);
       width: $form-switch-indicator-size-sm;
       width: $form-switch-indicator-size-sm;
       height: $form-switch-indicator-size-sm;
       height: $form-switch-indicator-size-sm;
@@ -56,19 +56,19 @@ label.form-check-label {
   line-height: $form-check-indicator-size-lg;
   line-height: $form-check-indicator-size-lg;
   .form-check-label {
   .form-check-label {
     &::before {
     &::before {
-      top: ($font-size-base * $line-height-base - $form-check-indicator-size-lg) / 2;
+      top: ($font-size-base * $line-height-base - $form-check-indicator-size-lg) * 0.5;
       left: -($form-switch-width-lg + $form-check-gutter-lg);
       left: -($form-switch-width-lg + $form-check-gutter-lg);
       width: $form-switch-width-lg;
       width: $form-switch-width-lg;
       height: $form-check-indicator-size-lg;
       height: $form-check-indicator-size-lg;
-      border-radius: $form-check-indicator-size-lg / 2;
+      border-radius: $form-check-indicator-size-lg * 0.5;
     }
     }
 
 
     &::after {
     &::after {
-      top: add(($font-size-base * $line-height-base - $form-check-indicator-size-lg) / 2, $form-check-indicator-border-width * 2);
+      top: add(($font-size-base * $line-height-base - $form-check-indicator-size-lg) * 0.5, $form-check-indicator-border-width * 2);
       left: add(-($form-switch-width-lg + $form-check-gutter-lg), $form-check-indicator-border-width * 2);
       left: add(-($form-switch-width-lg + $form-check-gutter-lg), $form-check-indicator-border-width * 2);
       width: $form-switch-indicator-size-lg;
       width: $form-switch-indicator-size-lg;
       height: $form-switch-indicator-size-lg;
       height: $form-switch-indicator-size-lg;
-      border-radius: $form-check-indicator-size-lg / 2;
+      border-radius: $form-check-indicator-size-lg * 0.5;
     }
     }
   }
   }