fix: extends for dart sass

internal/parcel.js

@@ -17,7 +17,7 @@ const options = {
   bundleNodeModules: false,
   https: true,
   logLevel: 3,
-  hmr: process.env.NODE_ENV !== 'production',
+  hmr: false,
   hmrPort: 1235,
   sourceMaps: true,
   hmrHostname: '',

src/styles/base/buttons.scss

@@ -0,0 +1,284 @@
+// Button global CSS
+solid-delete,
+solid-route,
+solid-link,
+button,
+input[type='submit'],
+a,
+.button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  padding: 0;
+
+  &.button {
+    padding: 0.55rem 2.5rem;
+    border-radius: 100em;
+
+    *,
+    & {
+      font-size: 1.4rem;
+    }
+
+    &.mobile-full-width {
+      margin-bottom: 1rem;
+      padding-left: 5rem;
+      width: -webkit-fill-available;
+      width: -moz-available;
+
+      @include breakpoint(lg) {
+        margin-bottom: 0;
+        padding-left: 2.5rem;
+        width: auto;
+      }
+
+      &::before {
+        margin-left: -2.6rem;
+
+        @include breakpoint(lg) {
+          margin-left: 0;
+        }
+      }
+    }
+
+    &.desktop-btn-margin__left {
+      margin: 0;
+
+      @include breakpoint(lg) {
+        margin-left: 2.2rem;
+      }
+    }
+
+    &.small {
+
+      *,
+      & {
+        font-size: 1rem;
+      }
+    }
+
+    &.text-bold {
+
+      *,
+      & {
+        font-weight: bold;
+      }
+    }
+
+    &.text-uppercase {
+
+      *,
+      & {
+        text-transform: uppercase;
+      }
+    }
+
+    &.rounded {
+      border-radius: 50%;
+      font-size: 1.8rem;
+      padding: 1rem;
+      height: 42px;
+      width: 42px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto;
+    }
+
+    &.button-link {
+      border-radius: 100em;
+
+      *,
+      & {
+        text-decoration: underline;
+      }
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    &.with-icon::before {
+      font-size: 1.6rem;
+      margin-right: 1rem;
+    }
+
+    &.button-primary{
+      background-color: var(--color-white);
+
+      *,
+      & {
+        color: var(--color-primary);
+      }
+
+      &.bordered, &.button-bordered {
+        border: 1px solid var(--color-primary);
+      }
+
+      &:hover {
+        background-color: var(--color-primary);
+
+        *,
+        & {
+          color: var(--color-white);
+        }
+      }
+    }
+
+    &.button-disabled{
+      cursor: not-allowed;
+      background-color: var(--color-white);
+
+      *,
+      & {
+        color: var(--color-grey-3);
+      }
+
+      &.bordered, &.button-bordered {
+        border: 1px solid var(--color-grey-3);
+      }
+
+      &:hover {
+        background-color: var(--color-white);
+
+        *,
+        & {
+          color: var(--color-grey-3);
+        }
+      }
+    }
+
+    &.button-secondary {
+      background-color: var(--color-white);
+
+      *,
+      & {
+        color: var(--color-secondary);
+      }
+
+      &.bordered, &.button-bordered {
+        border: 1px solid var(--color-secondary);
+      }
+
+      &:hover {
+        background-color: var(--color-secondary);
+
+        *,
+        & {
+          color: var(--color-white);
+        }
+      }
+    }
+
+    &.button-complementary {
+      color: var(--color-complementary);
+      background-color: var(--color-white);
+
+      &.bordered, &.button-bordered {
+        border: 1px solid var(--color-complementary);
+      }
+
+      &:hover {
+        background-color: var(--color-complementary);
+        color: var(--color-white);
+      }
+    }
+
+    &.flex {
+      display: flex;
+    }
+
+    &.reversed {
+      &.button-primary {
+        background-color: var(--color-primary);
+
+        *,
+        & {
+          color: var(--color-white);
+        }
+
+        &:hover {
+          background-color: var(--color-white);
+          color: var(--color-primary);
+
+          *,
+          & {
+            color: var(--color-primary);
+          }
+
+          &.bordered, &.button-bordered {
+            border: 1px solid var(--color-primary);
+          }
+        }
+      }
+
+      &.button-disabled{
+        cursor: not-allowed;
+        background-color: var(--color-grey-3);
+  
+        *,
+        & {
+          color: var(--color-white);
+        }
+  
+        &.bordered, &.button-bordered {
+          border: 1px solid var(--color-white);
+        }
+  
+        &:hover {
+          background-color: var(--color-grey-3);
+  
+          *,
+          & {
+            color: var(--color-white);
+          }
+        }
+      }
+
+      &.button-secondary {
+        background-color: var(--color-secondary);
+
+        *,
+        & {
+          color: var(--color-white);
+        }
+
+        &:hover {
+          background-color: var(--color-white);
+
+          *,
+          & {
+            color: var(--color-secondary);
+          }
+
+          &.bordered, &.button-bordered {
+            border: 1px solid var(--color-secondary);
+          }
+        }
+      }
+
+      &.button-complementary {
+        background-color: var(--color-complementary);
+
+        *,
+        & {
+          color: var(--color-white);
+        }
+
+        &:hover {
+          background-color: var(--color-white);
+
+          *,
+          & {
+            color: var(--color-complementary);
+          }
+
+          &.bordered, &.button-bordered {
+            border: 1px solid var(--color-complementary);
+          }
+        }
+      }
+    }
+  }
+}

src/styles/base/form.scss

@@ -18,6 +18,33 @@ solid-form {
   }
 }
 
+
+.button-register input[type=submit] {
+  @extend .button;
+  @extend .text-bold;
+  @extend .text-uppercase;
+  @extend .reversed;
+  @extend .button-secondary;
+  @extend .bordered;
+  height: auto;
+  position: fixed;
+  bottom: 1em;
+  left: 10%;
+  white-space: normal;
+  width: 80%;
+  z-index: 1;
+  
+  @include breakpoint(lg) {
+    height: 3rem;
+    left: 0;
+    margin: 0;
+    margin-left: auto;
+    margin-top: 32px;
+    position: relative;
+    width: auto;
+  }
+}
+
 .form-label {
   /*flex: 1 1 auto;*/
   
@@ -139,12 +166,12 @@ hubl-status {
     min-width: 35vw;
   }
 
-  input[type='submit'] {
+  input[type=submit] {
-    @extend .button,
+    @extend .button;
-    .text-bold,
+    @extend .text-bold;
-    .text-uppercase,
+    @extend .text-uppercase;
-    .button-complementary,
+    @extend .button-complementary;
-    .bordered;
+    @extend .bordered;
     margin: 10px 0;
     width: 100%;
 
@@ -155,32 +182,6 @@ hubl-status {
     }
   }
 }
-
-.button-register input[type=submit] {
-  @extend .button,
-  .text-bold,
-  .text-uppercase,
-  .reversed,
-  .button-secondary,
-  .bordered;
-  height: auto;
-  position: fixed;
-  bottom: 1em;
-  left: 10%;
-  white-space: normal;
-  width: 80%;
-  z-index: 1;
-  
-  @include breakpoint(lg) {
-    height: 3rem;
-    left: 0;
-    margin: 0;
-    margin-left: auto;
-    margin-top: 32px;
-    position: relative;
-    width: auto;
-  }
-}
 /* End */
 
 solid-form-date {
@@ -249,11 +250,11 @@ solid-form-file {
     }
 
     label {
-      @extend .button,
+      @extend .button;
-      .text-bold,
+      @extend .text-bold;
-      .text-uppercase,
+      @extend .text-uppercase;
-      .button-primary,
+      @extend .button-primary;
-      .bordered;
+      @extend .bordered;
       text-align: center;
       width: 100%;
       

src/styles/base/main.scss

@@ -294,11 +294,11 @@ h5 {
   }
 
   input[type='submit'] {
-    @extend .button,
+    @extend .button;
-    .text-bold,
+    @extend .text-bold;
-    .text-uppercase,
+    @extend .text-uppercase;
-    .button-primary,
+    @extend .button-primary;
-    .bordered;
+    @extend .bordered;
     align-self: center;
   }
 }
@@ -340,11 +340,11 @@ h5 {
     }
 
     input {
-      @extend .button,
+      @extend .button;
-      .text-bold,
+      @extend .text-bold;
-      .text-uppercase,
+      @extend .text-uppercase;
-      .button-primary,
+      @extend .button-primary;
-      .bordered;
+      @extend .bordered;
       margin: 10px 0;
       width: 100%;
 
@@ -618,293 +618,9 @@ h5 {
 }
 
 // Other base components
+@import 'buttons';
 @import 'form';
 @import 'table';
 @import 'header';
 @import 'menu-left';
 @import 'user-thumb';
-
-// Button global CSS
-solid-delete,
-solid-route,
-solid-link,
-button,
-input[type='submit'],
-a,
-.button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: inline-block;
-  padding: 0;
-
-  &.button {
-    padding: 0.55rem 2.5rem;
-    border-radius: 100em;
-
-    *,
-    & {
-      font-size: 1.4rem;
-    }
-
-    &.mobile-full-width {
-      margin-bottom: 1rem;
-      padding-left: 5rem;
-      width: -webkit-fill-available;
-      width: -moz-available;
-
-      @include breakpoint(lg) {
-        margin-bottom: 0;
-        padding-left: 2.5rem;
-        width: auto;
-      }
-
-      &::before {
-        margin-left: -2.6rem;
-
-        @include breakpoint(lg) {
-          margin-left: 0;
-        }
-      }
-    }
-
-    &.desktop-btn-margin__left {
-      margin: 0;
-
-      @include breakpoint(lg) {
-        margin-left: 2.2rem;
-      }
-    }
-
-    &.small {
-
-      *,
-      & {
-        font-size: 1rem;
-      }
-    }
-
-    &.text-bold {
-
-      *,
-      & {
-        font-weight: bold;
-      }
-    }
-
-    &.text-uppercase {
-
-      *,
-      & {
-        text-transform: uppercase;
-      }
-    }
-
-    &.rounded {
-      border-radius: 50%;
-      font-size: 1.8rem;
-      padding: 1rem;
-      height: 42px;
-      width: 42px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 0 auto;
-    }
-
-    &.button-link {
-      border-radius: 100em;
-
-      *,
-      & {
-        text-decoration: underline;
-      }
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-
-    &.with-icon::before {
-      font-size: 1.6rem;
-      margin-right: 1rem;
-    }
-
-    &.button-primary{
-      background-color: var(--color-white);
-
-      *,
-      & {
-        color: var(--color-primary);
-      }
-
-      &.bordered {
-        border: 1px solid var(--color-primary);
-      }
-
-      &:hover {
-        background-color: var(--color-primary);
-
-        *,
-        & {
-          color: var(--color-white);
-        }
-      }
-    }
-
-    &.button-disabled{
-      cursor: not-allowed;
-      background-color: var(--color-white);
-
-      *,
-      & {
-        color: var(--color-grey-3);
-      }
-
-      &.bordered {
-        border: 1px solid var(--color-grey-3);
-      }
-
-      &:hover {
-        background-color: var(--color-white);
-
-        *,
-        & {
-          color: var(--color-grey-3);
-        }
-      }
-    }
-
-    &.button-secondary {
-      background-color: var(--color-white);
-
-      *,
-      & {
-        color: var(--color-secondary);
-      }
-
-      &.bordered {
-        border: 1px solid var(--color-secondary);
-      }
-
-      &:hover {
-        background-color: var(--color-secondary);
-
-        *,
-        & {
-          color: var(--color-white);
-        }
-      }
-    }
-
-    &.button-complementary {
-      color: var(--color-complementary);
-      background-color: var(--color-white);
-
-      &.bordered {
-        border: 1px solid var(--color-complementary);
-      }
-
-      &:hover {
-        background-color: var(--color-complementary);
-        color: var(--color-white);
-      }
-    }
-
-    &.flex {
-      display: flex;
-    }
-
-    &.reversed {
-      &.button-primary {
-        background-color: var(--color-primary);
-
-        *,
-        & {
-          color: var(--color-white);
-        }
-
-        &:hover {
-          background-color: var(--color-white);
-          color: var(--color-primary);
-
-          *,
-          & {
-            color: var(--color-primary);
-          }
-
-          &.bordered {
-            border: 1px solid var(--color-primary);
-          }
-        }
-      }
-
-      &.button-disabled{
-        cursor: not-allowed;
-        background-color: var(--color-grey-3);
-  
-        *,
-        & {
-          color: var(--color-white);
-        }
-  
-        &.bordered {
-          border: 1px solid var(--color-white);
-        }
-  
-        &:hover {
-          background-color: var(--color-grey-3);
-  
-          *,
-          & {
-            color: var(--color-white);
-          }
-        }
-      }
-
-      &.button-secondary {
-        background-color: var(--color-secondary);
-
-        *,
-        & {
-          color: var(--color-white);
-        }
-
-        &:hover {
-          background-color: var(--color-white);
-
-          *,
-          & {
-            color: var(--color-secondary);
-          }
-
-          &.bordered {
-            border: 1px solid var(--color-secondary);
-          }
-        }
-      }
-
-      &.button-complementary {
-        background-color: var(--color-complementary);
-
-        *,
-        & {
-          color: var(--color-white);
-        }
-
-        &:hover {
-          background-color: var(--color-white);
-
-          *,
-          & {
-            color: var(--color-complementary);
-          }
-
-          &.bordered {
-            border: 1px solid var(--color-complementary);
-          }
-        }
-      }
-    }
-  }
-}

src/styles/base/table.scss

@@ -154,14 +154,13 @@
   [name='button'] {
 
     input[type='submit'] {
-      @extend
+      @extend .button;
-      .button,
+      @extend .text-bold;
-      .text-bold,
+      @extend .text-uppercase;
-      .text-uppercase,
+      @extend .reversed;
-      .reversed,
+      @extend .button-secondary;
-      .button-secondary,
+      @extend .bordered;
-      .bordered,
+      @extend .desktop-btn-margin__left;
-      .desktop-btn-margin__left;
     }
   }