From 97a6e15ed8ef24a06ee07e91d84457fd38238bcd Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Wed, 9 Dec 2020 20:36:28 +0100
Subject: [PATCH] fix: extends for dart sass
---
internal/parcel.js | 2 +-
src/styles/base/buttons.scss | 284 ++++++++++++++++++++++++++++++++
src/styles/base/form.scss | 75 ++++-----
src/styles/base/main.scss | 306 ++---------------------------------
src/styles/base/table.scss | 15 +-
5 files changed, 341 insertions(+), 341 deletions(-)
create mode 100644 src/styles/base/buttons.scss
diff --git a/internal/parcel.js b/internal/parcel.js
index 77ef320a..80161f31 100644
--- a/internal/parcel.js
+++ b/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: '',
diff --git a/src/styles/base/buttons.scss b/src/styles/base/buttons.scss
new file mode 100644
index 00000000..e6a4f7d0
--- /dev/null
+++ b/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);
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss
index 923de75c..6e4509fd 100644
--- a/src/styles/base/form.scss
+++ b/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'] {
- @extend .button,
- .text-bold,
- .text-uppercase,
- .button-complementary,
- .bordered;
+ input[type=submit] {
+ @extend .button;
+ @extend .text-bold;
+ @extend .text-uppercase;
+ @extend .button-complementary;
+ @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,
- .text-bold,
- .text-uppercase,
- .button-primary,
- .bordered;
+ @extend .button;
+ @extend .text-bold;
+ @extend .text-uppercase;
+ @extend .button-primary;
+ @extend .bordered;
text-align: center;
width: 100%;
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index ea7b12d9..f4bec835 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -294,11 +294,11 @@ h5 {
}
input[type='submit'] {
- @extend .button,
- .text-bold,
- .text-uppercase,
- .button-primary,
- .bordered;
+ @extend .button;
+ @extend .text-bold;
+ @extend .text-uppercase;
+ @extend .button-primary;
+ @extend .bordered;
align-self: center;
}
}
@@ -340,11 +340,11 @@ h5 {
}
input {
- @extend .button,
- .text-bold,
- .text-uppercase,
- .button-primary,
- .bordered;
+ @extend .button;
+ @extend .text-bold;
+ @extend .text-uppercase;
+ @extend .button-primary;
+ @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);
- }
- }
- }
- }
- }
-}
diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss
index c6b7e376..9ed34f60 100644
--- a/src/styles/base/table.scss
+++ b/src/styles/base/table.scss
@@ -154,14 +154,13 @@
[name='button'] {
input[type='submit'] {
- @extend
- .button,
- .text-bold,
- .text-uppercase,
- .reversed,
- .button-secondary,
- .bordered,
- .desktop-btn-margin__left;
+ @extend .button;
+ @extend .text-bold;
+ @extend .text-uppercase;
+ @extend .reversed;
+ @extend .button-secondary;
+ @extend .bordered;
+ @extend .desktop-btn-margin__left;
}
}
--
GitLab