diff --git a/internal/parcel.js b/internal/parcel.js index 77ef320..80161f3 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 0000000..e6a4f7d --- /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 923de75..6e4509f 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 ea7b12d..f4bec83 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 c6b7e37..9ed34f6 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; } }