[angular-ngrx-scss]: add rem function and some default padding values (…

…#1960) * refactor: add rem function and some default padding values * fix: add style preprocessor options for tests
thisdot · Aug 29, 2023 · eec3622 · eec3622
1 parent 6e3ae70
commit eec3622
Show file tree

Hide file tree

Showing 36 changed files with 266 additions and 212 deletions.
diff --git a/angular-ngrx-scss/angular.json b/angular-ngrx-scss/angular.json
@@ -32,7 +32,10 @@
             "assets": ["src/favicon.ico", "src/assets", "src/_redirects"],
             "styles": ["src/styles.scss"],
             "scripts": [],
-            "allowedCommonJsDependencies": ["@primer/octicons", "prismjs"]
+            "allowedCommonJsDependencies": ["@primer/octicons", "prismjs"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/app/shared/styles"]
+            }
           },
           "configurations": {
             "production": {
@@ -95,7 +98,10 @@
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.scss"],
-            "scripts": []
+            "scripts": [],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/app/shared/styles"]
+            }
           }
         },
         "lint": {

diff --git a/angular-ngrx-scss/src/app/auth/auth.component.scss b/angular-ngrx-scss/src/app/auth/auth.component.scss
@@ -1,4 +1,5 @@
-@use '../shared/styles/variables';
+@use 'variables';
+@use 'functions';
 
 .page {
   position: absolute;
@@ -18,9 +19,9 @@
 
 .button {
   width: 34%;
-  padding: 1rem;
+  padding: variables.$padding--l;
   border: 1px solid variables.$gray500;
-  border-radius: 0.375rem;
+  border-radius: functions.rem(5);
   font-weight: 500;
   font-size: 100%;
   background: variables.$black;
@@ -35,7 +36,7 @@
 
 .netlify-badge-container {
   position: fixed;
-  bottom: 1rem;
+  bottom: variables.$padding--l;
   left: 0;
   right: 0;
   display: flex;

diff --git a/angular-ngrx-scss/src/app/file-viewer/components/file-code/file-code.component.scss b/angular-ngrx-scss/src/app/file-viewer/components/file-code/file-code.component.scss
@@ -1,4 +1,4 @@
-@use '../../../shared/styles/variables';
+@use 'variables';
 
 :host {
   border: 1px solid variables.$gray100;

diff --git a/...css/src/app/file-viewer/components/file-explorer-about/file-explorer-about.component.scss b/...css/src/app/file-viewer/components/file-explorer-about/file-explorer-about.component.scss
@@ -1,28 +1,29 @@
-@use '../../../shared/styles/variables';
+@use 'variables';
+@use 'functions';
 
 a {
   color: variables.$gray500;
 }
 
 a > span,
 .link {
-  margin-right: 0.5rem;
+  margin-right: variables.$padding;
 }
 
 .mt-1 {
-  margin-top: 1rem;
+  margin-top: variables.$padding--l;
 }
 
 .topic {
-  padding: 0.25rem 0.5rem;
-  margin-right: 0.375rem;
+  padding: variables.$padding--s variables.$padding;
+  margin-right: functions.rem(5);
   background-color: variables.$blue100;
   transition-property: background-color, border-color, color, fill, stroke;
   color: variables.$blue600;
-  font-size: 0.75rem;
-  line-height: 1rem;
+  font-size: functions.rem(11);
+  line-height: variables.$padding--l;
   font-weight: 500;
-  border-radius: 0.75rem;
+  border-radius: functions.rem(11);
   cursor: pointer;
 
   &:hover {

diff --git a/angular-ngrx-scss/src/app/file-viewer/components/file-text/file-text.component.scss b/angular-ngrx-scss/src/app/file-viewer/components/file-text/file-text.component.scss
@@ -1,4 +1,5 @@
-@use '../../../shared/styles/variables';
+@use 'variables';
+@use 'functions';
 
 :host {
   border: 1px solid variables.$gray100;
@@ -13,15 +14,15 @@
   border-spacing: 5px;
   background-color: variables.$white;
   overflow: auto;
-  padding: 0.25rem 2rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
+  padding: variables.$padding--s functions.rem(28);
+  font-size: functions.rem(11);
+  line-height: variables.$padding--l;
   text-align: left;
 }
 
 .lineNumber {
   display: table-cell;
-  padding-right: 1rem;
+  padding-right: variables.$padding--l;
   color: variables.$gray500;
   text-align: right;
   user-select: none;

diff --git a/...x-scss/src/app/file-viewer/file-explorer-container/file-explorer-container.component.scss b/...x-scss/src/app/file-viewer/file-explorer-container/file-explorer-container.component.scss
@@ -1,8 +1,8 @@
-@use '../../shared/styles/variables';
+@use 'variables';
 
 .file-list {
   border: 1px solid variables.$gray300;
-  border-radius: 0.25rem;
+  border-radius: variables.$padding--s;
   display: flex;
   flex-direction: column;
 }

diff --git a/angular-ngrx-scss/src/app/file-viewer/file-explorer-nav/file-explorer-nav.component.scss b/angular-ngrx-scss/src/app/file-viewer/file-explorer-nav/file-explorer-nav.component.scss
@@ -1,21 +1,22 @@
-@use '../../shared/styles/variables';
+@use 'variables';
+@use 'functions';
 
 .file-explorer-container {
   display: flex;
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
+  margin-top: functions.rem(21);
+  margin-bottom: functions.rem(21);
   align-items: center;
 }
 
 .btn {
   display: inline-flex;
   position: relative;
-  padding: 0.25rem 1rem;
+  padding: variables.$padding--s variables.$padding--l;
   background-color: variables.$gray50;
   color: variables.$gray700;
   font-weight: 500;
   align-items: center;
-  border-radius: 0.375rem;
+  border-radius: functions.rem(5);
   border-width: 1px;
   border-color: variables.$gray300;
 
@@ -26,24 +27,24 @@
 }
 
 .btnIcon {
-  margin-right: 0.25rem;
+  margin-right: variables.$padding--s;
   color: variables.$gray600;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: functions.rem(18);
+  height: functions.rem(18);
 }
 
 .btnCaret {
   font-size: 10px;
-  margin-top: 0.125rem;
-  margin-left: 0.375rem;
+  margin-top: functions.rem(2);
+  margin-left: functions.rem(5);
   color: variables.$gray600;
 }
 
 .separator {
-  margin-left: 0.375rem;
-  margin-right: 0.375rem;
+  margin-left: functions.rem(5);
+  margin-right: functions.rem(5);
   color: variables.$gray800;
-  font-size: 1.125rem;
+  font-size: functions.rem(16);
   line-height: 1.375;
 }
 
@@ -58,8 +59,8 @@
 
 .crumbs {
   display: flex;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+  padding-left: functions.rem(11);
+  padding-right: functions.rem(11);
 }
 
 .crumbLink {

diff --git a/angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.scss b/angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.scss
@@ -1,3 +1,5 @@
+@use 'functions';
+
 .container.subpage {
-  gap: 2rem;
+  gap: functions.rem(28);
 }
diff --git a/angular-ngrx-scss/src/app/file-viewer/file-viewer/file-viewer.component.scss b/angular-ngrx-scss/src/app/file-viewer/file-viewer/file-viewer.component.scss
@@ -1,47 +1,48 @@
-@use '../../shared/styles/variables';
+@use 'variables';
+@use 'functions';
 
 .file-viewer-container {
   overflow: hidden;
-  border-radius: 0.5rem;
+  border-radius: variables.$padding;
   border-width: 1px;
   border-color: variables.$gray300;
 }
 
 .fileHeader {
-  padding: 0.75rem 1rem;
+  padding: functions.rem(11) variables.$padding--l;
   background-color: variables.$gray100;
   color: variables.$gray800;
   font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
     monospace;
-  font-size: 0.75rem;
-  line-height: 1rem;
+  font-size: functions.rem(11);
+  line-height: variables.$padding--l;
   border-bottom-width: 1px;
   border-color: variables.$gray300;
 }
 
 .fileHeaderLines {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-left: variables.$padding;
+  padding-right: variables.$padding;
 }
 
 .fileHeaderBytes {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-left: variables.$padding;
+  padding-right: variables.$padding;
   border-left: 1px solid variables.$gray300;
 }
 
 .codeBlock {
   border-spacing: 5px;
   overflow: auto;
-  padding: 0.25rem 2rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
+  padding: variables.$padding--s functions.rem(28);
+  font-size: functions.rem(11);
+  line-height: variables.$padding--l;
   text-align: left;
 }
 
 .lineNumber {
   display: table-cell;
-  padding-right: 1rem;
+  padding-right: variables.$padding--l;
   color: variables.$gray500 !important;
   text-align: right;
   user-select: none;

diff --git a/angular-ngrx-scss/src/app/file-viewer/read-me/read-me.component.scss b/angular-ngrx-scss/src/app/file-viewer/read-me/read-me.component.scss
@@ -1,23 +1,24 @@
-@use '../../shared/styles/variables.scss';
+@use 'variables';
+@use 'functions';
 
 .header {
   position: sticky;
   z-index: 3;
   top: 0;
   background-color: variables.$white;
   font-weight: 600;
-  padding: 0.625rem;
+  padding: functions.rem(9);
   border: 1px solid variables.$gray300;
-  border-radius: 0.25rem;
+  border-radius: variables.$padding--s;
 
   .icon {
-    margin-right: 0.5rem;
+    margin-right: variables.$padding;
   }
 }
 
 .content {
-  padding: 0.625rem;
+  padding: functions.rem(9);
   border: 1px solid variables.$gray300;
-  border-radius: 0.25rem;
+  border-radius: variables.$padding--s;
   border-top: none;
 }
diff --git a/angular-ngrx-scss/src/app/home/home.component.scss b/angular-ngrx-scss/src/app/home/home.component.scss
@@ -1,4 +1,5 @@
-@use '../shared/styles/variables';
+@use 'variables';
+@use 'functions';
 
 .page {
   display: grid;
@@ -22,6 +23,6 @@
   grid-column: 1 / 3;
   display: flex;
   justify-content: center;
-  margin-top: 2rem;
-  padding-bottom: 1rem;
+  margin-top: functions.rem(28);
+  padding-bottom: variables.$padding--l;
 }
diff --git a/angular-ngrx-scss/src/app/home/nav-bar/nav-bar.component.scss b/angular-ngrx-scss/src/app/home/nav-bar/nav-bar.component.scss
@@ -1,4 +1,5 @@
-@use '../../shared/styles/variables';
+@use 'variables';
+@use 'functions';
 
 nav {
   height: 100%;
@@ -9,7 +10,7 @@ nav {
 ul {
   list-style: none;
   margin: 0;
-  padding: 1rem 2rem;
+  padding: variables.$padding--l functions.rem(28);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -19,7 +20,7 @@ img {
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  margin-right: 1rem;
+  margin-right: variables.$padding--l;
 }
 
 .dropdown {
@@ -39,20 +40,20 @@ img {
     align-items: flex-start;
     position: absolute;
     right: 0;
-    width: 14rem;
+    width: functions.rem(196);
     background-color: variables.$white;
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
       0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    border-radius: 0.375rem;
-    margin-top: 0.5rem;
-    padding: 0.25rem 0;
+    border-radius: functions.rem(5);
+    margin-top: variables.$padding;
+    padding: variables.$padding--s 0;
     transform-origin: top right;
     z-index: 10;
 
     a {
       color: variables.$gray900;
       font-weight: 500;
-      padding: 0.5rem 1rem;
+      padding: variables.$padding variables.$padding--l;
       display: block;
       text-decoration: none;