autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: extends for dart sass

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier 2020-12-09 20:36:28 +01:00
parent e3427b63e2
commit 97a6e15ed8
No known key found for this signature in database
GPG Key ID: CC04B91B949C163A
5 changed files with 341 additions and 341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
internal/parcel.js
View File

@ -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: '',

284
src/styles/base/buttons.scss Normal file
View File

@ -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);
}
}
}
}
}
}

75
src/styles/base/form.scss
View File

@ -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%;

306
src/styles/base/main.scss
View File

@ -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);
}
}
}
}
}
}

15
src/styles/base/table.scss
View File

@ -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;
}
}