feature/BIM-47125 replace px with rem

bimeister · Apr 26, 2024 · 5fa60fb · 5fa60fb
1 parent 2139ee5
commit 5fa60fb
Show file tree

Hide file tree

Showing 128 changed files with 262 additions and 260 deletions.
diff --git a/projects/common/src/assets/configs/adaptive-config.json b/projects/common/src/assets/configs/adaptive-config.json
@@ -18,22 +18,22 @@
     "xxl": 16
   },
   "gutters": {
-    "xs": 8,
-    "sm": 16,
-    "md": 16,
-    "lg": 16,
-    "xlg": 16,
-    "xl": 16,
-    "xxl": 16
+    "xs": 2,
+    "sm": 4,
+    "md": 4,
+    "lg": 4,
+    "xlg": 4,
+    "xl": 4,
+    "xxl": 4
   },
   "offsets": {
-    "xs": 12,
-    "sm": 16,
-    "md": 16,
-    "lg": 24,
-    "xlg": 24,
-    "xl": 24,
-    "xxl": 24
+    "xs": 3,
+    "sm": 4,
+    "md": 4,
+    "lg": 6,
+    "xlg": 6,
+    "xl": 6,
+    "xxl": 6
   },
   "queries": {
     "xs": "(max-width: 767px)",

diff --git a/projects/common/src/declarations/constants/scrollbar-width-px.const.ts b/projects/common/src/declarations/constants/scrollbar-width-px.const.ts
diff --git a/projects/common/src/declarations/types/size-rem.type.ts b/projects/common/src/declarations/types/size-rem.type.ts
@@ -0,0 +1 @@
+export type SizeRem = `${number}rem`;
diff --git a/projects/common/src/styles/functions/adaptive/grid-column-offset.function.scss b/projects/common/src/styles/functions/adaptive/grid-column-offset.function.scss
@@ -1,5 +1,5 @@
 @function grid-column-offset($columnCount, $gutter, $breakpointWidth) {
-  $gutter: $gutter * 1px;
+  $gutter: $gutter * 1rem;
   $gutters: ($columnCount - 1) * $gutter;
   $guttersOffset: ($breakpointWidth) * $gutter;
 

diff --git a/projects/common/src/styles/functions/adaptive/grid-column.function.scss b/projects/common/src/styles/functions/adaptive/grid-column.function.scss
@@ -1,5 +1,5 @@
 @function grid-column($columnsCount, $gutter, $size) {
-  $gutter: $gutter * 1px;
+  $gutter: $gutter * 1rem;
   $gutters: ($columnsCount - 1) * $gutter;
 
   @return calc((((100% - #{$gutters}) / #{$columnsCount}) * #{$size}) + #{max(($size - 1) * $gutter, 0)});

diff --git a/projects/common/src/styles/maps/variables.map.scss b/projects/common/src/styles/maps/variables.map.scss
@@ -1,6 +1,6 @@
 $variablesMap: (
   'box-shadow_hover': 0 2rem 4rem 0 rgba(0, 0, 0, 0.2),
-  'box-shadow_dropdown': 0 14px 6rem rgba(0, 23, 32, 0.08),
+  'box-shadow_dropdown': 0 3.5rem 6rem rgba(0, 23, 32, 0.08),
   'transition-duration_common': 0.3s,
   'transition-duration_shortest': 150ms,
   'transition-duration_shorter': 200ms,

diff --git a/projects/common/src/styles/mixins/adaptive/grid-container-offset.mixin.scss b/projects/common/src/styles/mixins/adaptive/grid-container-offset.mixin.scss
@@ -12,24 +12,24 @@
 
 @mixin grid-container-offset($property: 'padding-left') {
   @include xs() {
-    #{$property}: $xsOffset * 1px;
+    #{$property}: $xsOffset * 1rem;
   }
   @include sm() {
-    #{$property}: $smOffset * 1px;
+    #{$property}: $smOffset * 1rem;
   }
   @include md() {
-    #{$property}: $mdOffset * 1px;
+    #{$property}: $mdOffset * 1rem;
   }
   @include lg() {
-    #{$property}: $lgOffset * 1px;
+    #{$property}: $lgOffset * 1rem;
   }
   @include xlg() {
-    #{$property}: $xlgOffset * 1px;
+    #{$property}: $xlgOffset * 1rem;
   }
   @include xl() {
-    #{$property}: $xlOffset * 1px;
+    #{$property}: $xlOffset * 1rem;
   }
   @include xxl() {
-    #{$property}: $xxlOffset * 1px;
+    #{$property}: $xxlOffset * 1rem;
   }
 }
diff --git a/...s/demo/src/app/common/components/navbar/components/menu-toggle/menu-toggle.component.scss b/...s/demo/src/app/common/components/navbar/components/menu-toggle/menu-toggle.component.scss
@@ -51,11 +51,11 @@ $strip-height: 2px;
     display: block;
     position: absolute;
     top: $top;
-    left: 0px;
-    right: 0px;
+    left: 0;
+    right: 0;
     height: $strip-height;
 
-    border-radius: 1px;
+    border-radius: 0.25rem;
 
     @include apply-background();
 
@@ -68,7 +68,7 @@ $strip-height: 2px;
       height: $strip-height;
       content: '';
 
-      border-radius: 1px;
+      border-radius: 0.25rem;
 
       @include apply-background();
     }

diff --git a/projects/demo/src/app/common/components/navbar/components/navbar/navbar.component.scss b/projects/demo/src/app/common/components/navbar/components/navbar/navbar.component.scss
@@ -64,8 +64,8 @@ $end-item-margin: 4rem;
   }
 
   &__logo-image {
-    height: 24px;
-    width: 164px;
+    height: 6rem;
+    width: 41rem;
     margin-left: 2rem;
 
     @include xs() {
@@ -74,8 +74,8 @@ $end-item-margin: 4rem;
   }
 
   &__logo-icon {
-    height: 32px;
-    width: 32px;
+    height: 8rem;
+    width: 8rem;
   }
 
   &__status {
@@ -99,10 +99,10 @@ $end-item-margin: 4rem;
 
   &__santa-hat-icon {
     position: absolute;
-    top: -13px;
-    left: -13px;
-    height: 32px;
-    width: 32px;
+    top: -3.25rem;
+    left: -3.25rem;
+    height: 8rem;
+    width: 8rem;
   }
 
   &__spacer {

diff --git a/projects/demo/src/app/layouts/kit-layout/kit-layout.component.scss b/projects/demo/src/app/layouts/kit-layout/kit-layout.component.scss
@@ -46,7 +46,7 @@
 
 .content {
   box-sizing: border-box;
-  padding: 100px 0 64px 0;
+  padding: 25rem 0 16rem 0;
   margin-left: 80rem;
   min-height: calc(#{vh(100)});
 

diff --git a/projects/demo/src/app/pages/accordion-demo/examples/example-5/example-5.component.html b/projects/demo/src/app/pages/accordion-demo/examples/example-5/example-5.component.html
@@ -18,7 +18,7 @@
     </pupa-accordion>
     <pupa-accordion [kind]="'border-bottom'">
       <span class="example-container__title">Spinner</span>
-      <pupa-loader *pupaAccordionActionTemplate size="16px"></pupa-loader>
+      <pupa-loader *pupaAccordionActionTemplate size="4rem"></pupa-loader>
       <pupa-accordion-body>Accordion Body</pupa-accordion-body>
     </pupa-accordion>
   </pupa-accordion-group>

diff --git a/projects/demo/src/app/pages/actions-demo/actions-demo.component.scss b/projects/demo/src/app/pages/actions-demo/actions-demo.component.scss
@@ -9,7 +9,7 @@
 .action {
   display: block;
   text-align: center;
-  width: 96px;
+  width: 24rem;
   background: color(danger-150);
   padding: 1rem 0;
   height: 10rem;

diff --git a/projects/demo/src/app/pages/actions-demo/examples/example-1/example-1.component.scss b/projects/demo/src/app/pages/actions-demo/examples/example-1/example-1.component.scss
@@ -4,7 +4,7 @@
 @mixin action {
   display: block;
   text-align: center;
-  width: 96px;
+  width: 24rem;
   background: color(danger-150);
   padding: 1rem 0;
   height: 10rem;

diff --git a/projects/demo/src/app/pages/actions-demo/examples/example-6/example-6.component.scss b/projects/demo/src/app/pages/actions-demo/examples/example-6/example-6.component.scss
@@ -1,7 +1,7 @@
 @use 'functions' as *;
 
 .action-container {
-  box-shadow: 0px -1px 0px #ebedee;
+  box-shadow: 0px -0.25rem 0px #ebedee;
   padding: 2rem 8rem;
 }
 

diff --git a/projects/demo/src/app/pages/adaptive-demo/examples/example-1/example-1.component.scss b/projects/demo/src/app/pages/adaptive-demo/examples/example-1/example-1.component.scss
@@ -2,8 +2,8 @@
 @use 'functions' as *;
 
 .block {
-  width: 100px;
-  height: 100px;
+  width: 25rem;
+  height: 25rem;
   background-color: color(primary-500);
 
   @include width-between($min-width: 1500, $max-width: 1600) {

diff --git a/projects/demo/src/app/pages/adaptive-demo/examples/example-2/example-2.component.scss b/projects/demo/src/app/pages/adaptive-demo/examples/example-2/example-2.component.scss
@@ -3,17 +3,17 @@
 
 .block {
   display: block;
-  width: 100px;
-  height: 100px;
+  width: 25rem;
+  height: 25rem;
   background-color: color(primary-500);
 
   @include width-less-than($width: 900) {
     border-radius: 50%;
   }
 
   @include width-more-than($width: 1500) {
-    width: 200px;
-    height: 200px;
+    width: 50rem;
+    height: 50rem;
   }
 
   @include height-less-than($height: 900) {

diff --git a/projects/demo/src/app/pages/adaptive-demo/examples/example-3/example-3.component.scss b/projects/demo/src/app/pages/adaptive-demo/examples/example-3/example-3.component.scss
@@ -3,8 +3,8 @@
 
 .block {
   display: block;
-  width: 100px;
-  height: 100px;
+  width: 25rem;
+  height: 25rem;
 
   @include landscape() {
     border-radius: unset;

diff --git a/projects/demo/src/app/pages/adaptive-demo/examples/example-4/example-4.component.scss b/projects/demo/src/app/pages/adaptive-demo/examples/example-4/example-4.component.scss
@@ -3,8 +3,8 @@
 
 .block {
   display: block;
-  width: 100px;
-  height: 100px;
+  width: 25rem;
+  height: 25rem;
   border: 2px solid transparent;
   background-color: transparent;
 

diff --git a/projects/demo/src/app/pages/adaptive-demo/examples/example-5/example-5.component.scss b/projects/demo/src/app/pages/adaptive-demo/examples/example-5/example-5.component.scss
@@ -3,8 +3,8 @@
 
 .block {
   display: block;
-  width: 100px;
-  height: 100px;
+  width: 25rem;
+  height: 25rem;
   background-color: color(primary-500);
 
   @include lt-xlg() {

diff --git a/projects/demo/src/app/pages/adaptive-demo/examples/example-6/example-6.component.scss b/projects/demo/src/app/pages/adaptive-demo/examples/example-6/example-6.component.scss
@@ -3,8 +3,8 @@
 
 .block {
   display: block;
-  width: 100px;
-  height: 100px;
+  width: 25rem;
+  height: 25rem;
   background-color: color(primary-500);
 
   @include gt-lg() {

diff --git a/projects/demo/src/app/pages/adaptive-demo/examples/example-9/example-9.component.scss b/projects/demo/src/app/pages/adaptive-demo/examples/example-9/example-9.component.scss
@@ -4,8 +4,8 @@
 .block1,
 .block2 {
   display: block;
-  width: 100px;
-  height: 100px;
+  width: 25rem;
+  height: 25rem;
   background-color: color(primary-500);
   margin-bottom: 2rem;
 }

diff --git a/projects/demo/src/app/pages/breadcrumbs-demo/breadcrumbs-demo.component.scss b/projects/demo/src/app/pages/breadcrumbs-demo/breadcrumbs-demo.component.scss
@@ -1,5 +1,5 @@
 :host {
   display: flex;
   flex-direction: column;
-  margin-bottom: 100px;
+  margin-bottom: 25rem;
 }
diff --git a/projects/demo/src/app/pages/breadcrumbs-demo/examples/example-2/example-2.component.html b/projects/demo/src/app/pages/breadcrumbs-demo/examples/example-2/example-2.component.html
@@ -1,7 +1,7 @@
 <div class="container">
   <pupa-breadcrumbs [breadcrumbs]="breadcrumbs">
     <div class="breadcrumb" *pupaBreadcrumbTemplate="let breadcrumb">
-      <pupa-loader class="breadcrumb__loader" [size]="'16px'"></pupa-loader>
+      <pupa-loader class="breadcrumb__loader" size="4rem"></pupa-loader>
       <span class="breadcrumb__name">{{ breadcrumb.name }}</span>
     </div>
   </pupa-breadcrumbs>

diff --git a/projects/demo/src/app/pages/button-group-demo/examples/example-1/example-1.component.scss b/projects/demo/src/app/pages/button-group-demo/examples/example-1/example-1.component.scss
@@ -6,6 +6,6 @@
 
 .pupa-button-group-item {
   &:last-of-type {
-    width: 100px;
+    width: 25rem;
   }
 }
diff --git a/projects/demo/src/app/pages/code-demo/examples/example-1/example-1.component.scss b/projects/demo/src/app/pages/code-demo/examples/example-1/example-1.component.scss
@@ -2,8 +2,8 @@
 
 .circle {
   display: block;
-  width: 200px;
-  height: 200px;
+  width: 50rem;
+  height: 50rem;
   background-color: color(primary-500);
   border-radius: 50%;
 }
diff --git a/projects/demo/src/app/pages/colors-demo/examples/example-1/example-1.component.scss b/projects/demo/src/app/pages/colors-demo/examples/example-1/example-1.component.scss
@@ -10,12 +10,12 @@ $colorsToOverride: (
 @include override-colors($colorsToOverride, ':host');
 
 .usage-example {
-  margin-top: 16px;
+  margin-top: 4rem;
   color: color(neutral-6);
 }
 
 .square {
-  width: 40px;
-  height: 40px;
+  width: 10rem;
+  height: 10rem;
   background-color: color(primary-600, alpha-60);
 }
diff --git a/projects/demo/src/app/pages/colors-demo/examples/example-2/example-2.component.css b/projects/demo/src/app/pages/colors-demo/examples/example-2/example-2.component.css
@@ -5,7 +5,7 @@
 }
 
 .usage-example {
-  margin-top: 16px;
+  margin-top: 4rem;
   color: rgb(var(--color_neutral-6));
 }
 

diff --git a/projects/demo/src/app/pages/drawer-demo/components/test-drawer/test-drawer.component.scss b/projects/demo/src/app/pages/drawer-demo/components/test-drawer/test-drawer.component.scss
@@ -1,12 +1,12 @@
 :host {
   display: block;
-  width: 512px;
+  width: 128rem;
   height: 100%;
 }
 
 .drawer {
   &__title-container {
     display: flex;
-    gap: 8px;
+    gap: 4rem;
   }
 }
diff --git a/...er-demo/examples/example-1/drawer-layout-example-1/drawer-layout-example-1.component.scss b/...er-demo/examples/example-1/drawer-layout-example-1/drawer-layout-example-1.component.scss
@@ -2,7 +2,7 @@
 
 :host {
   display: block;
-  width: 512px;
+  width: 128rem;
   height: 100%;
 }
 

diff --git a/projects/demo/src/app/pages/highlight-demo/examples/example-1/example-1.component.scss b/projects/demo/src/app/pages/highlight-demo/examples/example-1/example-1.component.scss
@@ -1,5 +1,5 @@
 .table {
   display: block;
-  height: 400px;
+  height: 100rem;
   margin-top: 2rem;
 }
diff --git a/projects/demo/src/app/pages/loader-demo/examples/demo-loader/demo-loader.component.html b/projects/demo/src/app/pages/loader-demo/examples/demo-loader/demo-loader.component.html
@@ -1,5 +1,5 @@
 <div class="loader-container">
-  <pupa-loader size="50px"></pupa-loader>
-  <pupa-loader size="50px" type="determinate" [progress]="50"></pupa-loader>
-  <pupa-loader size="50px" type="determinate" [isError]="true" errorText="Loader error text"></pupa-loader>
+  <pupa-loader size="12.5rem"></pupa-loader>
+  <pupa-loader size="12.5rem" type="determinate" [progress]="50"></pupa-loader>
+  <pupa-loader size="12.5rem" type="determinate" [isError]="true" errorText="Loader error text"></pupa-loader>
 </div>