refactor(Style): add SASS to reduce style repetition

- Use list, maps and loops to reduce code duplication with small variations - Use SASS functions for some extreme cases - Keep native CSS variables to allow overriding/reference in other styles refactor(Style): change css theme variables to SASS add sass files from catppuccin to the project instead of importing it from NPM refactor(Style): use SASS functions to reduce code boilerplate
2024-03-13 11:45:24 -03:00 · 2024-03-13 11:45:24 -03:00 · daa5eb27b6
commit daa5eb27b6
parent d52de9bc59
14 changed files with 579 additions and 694 deletions
--- a/src/assets/style/_utils.scss
+++ b/src/assets/style/_utils.scss
@ -0,0 +1,256 @@
+@use './variables' as *;
+
+.d-none {
+  display: none;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.flex-eq > * {
+  flex: 100%;
+}
+
+.hstack {
+  --prj-gap: var(--prj-spacing-3);
+  display: flex;
+  gap: var(--prj-gap);
+  align-items: center;
+}
+
+.hstack-reverse {
+  --prj-gap: var(--prj-spacing-3);
+  display: flex;
+  gap: var(--prj-gap);
+  align-items: center;
+  flex-direction: row-reverse;
+}
+
+.vstack {
+  --prj-gap: var(--prj-spacing-3);
+  display: flex;
+  flex-direction: column;
+}
+
+.vstack-reverse {
+  --prj-gap: var(--prj-spacing-3);
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+@each $name, $size in $screen-sizes {
+  @media screen and (min-width: $size) {
+    .flex-#{$name}-wrap {
+      flex-wrap: wrap;
+    }
+
+    .flex-#{$name}-nowrap {
+      flex-wrap: nowrap;
+    }
+  }
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.justify-content-center {
+  justify-content: center !important;
+}
+
+.grid {
+  --prj-gap: var(--prj-spacing-3);
+  --prj-columns: repeat(3, 1fr);
+  --prj-min-col-width: 150px;
+  display: grid;
+  grid-template-columns: var(--prj-columns);
+  gap: var(--prj-gap);
+}
+
+@for $i from 1 through 12 {
+  .grid-cols-#{$i} {
+    --prj-columns: repeat(#{$i}, minmax(var(--prj-min-col-width), 1fr));
+  }
+}
+
+@each $index, $variable, $value in $spacings {
+  .gap-#{$index} {
+    --prj-gap: var(#{$variable});
+  }
+}
+
+.list-unstyle {
+  list-style: none;
+}
+
+.text-justify {
+  text-align: justify;
+  text-justify: inter-word;
+}
+
+.text-start {
+  text-align: start;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-end {
+  text-align: end;
+}
+
+.align-start {
+  vertical-align: start;
+}
+
+.align-center {
+  vertical-align: middle;
+}
+
+.align-end {
+  vertical-align: end;
+}
+
+.overflow-scroll {
+  overflow: scroll;
+}
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+.w-auto {
+  width: auto;
+}
+.h-auto {
+  height: auto;
+}
+@for $i from 0 through 100 {
+  .w-#{$i} {
+    width: percentage($i / 100);
+  }
+  .h-#{$i} {
+    height: percentage($i / 100);
+  }
+}
+
+.m-auto {
+  margin: auto !important;
+}
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+.my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+.mt-auto {
+  margin-top: auto !important;
+}
+.mb-auto {
+  margin-bottom: auto !important;
+}
+.ml-auto {
+  margin-left: auto !important;
+}
+.mr-auto {
+  margin-right: auto !important;
+}
+.p-auto {
+  padding: auto !important;
+}
+.px-auto {
+  padding-left: auto !important;
+  padding-right: auto !important;
+}
+.py-auto {
+  padding-top: auto !important;
+  padding-bottom: auto !important;
+}
+.pt-auto {
+  padding-top: auto !important;
+}
+.pb-auto {
+  padding-bottom: auto !important;
+}
+.pl-auto {
+  padding-left: auto !important;
+}
+.pr-auto {
+  padding-right: var(--prj-spacing-5) !important;
+}
+
+@each $index, $variable, $value in $spacings {
+  .m-#{$index} {
+    margin: var(#{$variable}) !important;
+  }
+  .mx-#{$index} {
+    margin-left: var(#{$variable}) !important;
+    margin-right: var(#{$variable}) !important;
+  }
+  .my-#{$index} {
+    margin-top: var(#{$variable}) !important;
+    margin-bottom: var(#{$variable}) !important;
+  }
+  .mt-#{$index} {
+    margin-top: var(#{$variable}) !important;
+  }
+  .mb-#{$index} {
+    margin-bottom: var(#{$variable}) !important;
+  }
+  .ml-#{$index} {
+    margin-left: var(#{$variable}) !important;
+  }
+  .mr-#{$index} {
+    margin-right: var(#{$variable}) !important;
+  }
+  .p-#{$index} {
+    padding: var(#{$variable}) !important;
+  }
+  .px-#{$index} {
+    padding-left: var(#{$variable}) !important;
+    padding-right: var(#{$variable}) !important;
+  }
+  .py-#{$index} {
+    padding-top: var(#{$variable}) !important;
+    padding-bottom: var(#{$variable}) !important;
+  }
+  .pt-#{$index} {
+    padding-top: var(#{$variable}) !important;
+  }
+  .pb-#{$index} {
+    padding-bottom: var(#{$variable}) !important;
+  }
+  .pl-#{$index} {
+    padding-left: var(#{$variable}) !important;
+  }
+  .pr-#{$index} {
+    padding-right: var(#{$variable}) !important;
+  }
+}
+
+.shadow-0 {
+  box-shadow: none;
+}
+
+.border-radius {
+  border-radius: var(--prj-border-radius);
+}