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

Merge branch 'master' into dpo/switch-to-skypack

Browse Source
This commit is contained in:
Benoit Alessandroni
2020-12-14 20:07:43 +01:00
parent 32f9cf217d deb3b25520
commit 732de91b8f
82 changed files with 11837 additions and 9968 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

@ -18,13 +18,14 @@ solid-form {
}
}
.button-register>form>input[type=submit] {
@extend .button,
.text-bold,
.text-uppercase,
.reversed,
.button-secondary,
.bordered;
.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;
@ -100,37 +101,6 @@ textarea {
height: 100px;
resize: vertical;
}
.content-box {
&.with-form {
/*solid-set-default:not([name='user-thumb']) {
clear: both;
display: flex!important;
flex-wrap: wrap;
max-width: 100%;
solid-form-label-text {
float: left;
width: 50%;
}
}*/
}
}
/*solid-form[set-user-id-select] {
input[type="submit"] {
margin-left: 0;
margin-top: 0;
}
select {
display: none;
}
}*/
/* WIDGETS SIB (let in .content-box to override default styles) */
@ -196,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%;
@ -280,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);
}
}
}
}
}
}

43
src/styles/base/menu-left.scss
View File

@ -164,7 +164,7 @@
}
}
solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input {
solid-display>solid-form[fields="contact.name"]>hubl-search-users>input {
margin-left: 30px;
margin-bottom: 10px;
width: calc(80vw - 71px);
@ -182,28 +182,9 @@
}
}
solid-display.nosub>nav {
text-align: center;
overflow: hidden;
display: grid;
grid-template-columns: auto 50% auto;
grid-template-areas: "left middle right";
>* {
color: var(--color-white);
}
>[data-id="prev"] {
grid-area: left;
}
>[data-id="next"] {
grid-area: right;
}
>span {
grid-area: middle;
}
hubl-create solid-link,
hubl-create-contact solid-link {
display: inline;
}
hubl-menu-publicprivate {
@ -218,10 +199,6 @@
}
}
>solid-display.nosub>div>solid-display>div {
padding: 1rem 1rem 1rem 3rem;
}
solid-display>div {
.create {
@ -239,7 +216,8 @@
cursor: pointer;
>hubl-menu-fix-url-circle>solid-link>solid-display>div,
>hubl-menu-fix-url-project>solid-link>solid-display>div {
>hubl-menu-fix-url-project>solid-link>solid-display>div,
>hubl-menu-fix-url-contact>solid-link>solid-display>div {
padding: 1rem 1rem 1rem 3rem;
}
}
@ -251,7 +229,8 @@
&>solid-display[active]>div,
&>solid-display>div>hubl-menu-fix-url-circle>solid-link>solid-display[active]>div,
&>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display[active]>div {
&>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display[active]>div,
&>solid-display>div>hubl-menu-fix-url-contact>solid-link>solid-display[active]>div {
background-color: var(--color-menu-highlight-primary);
color: var(--color-menu-text-active);
font-weight: bold;
@ -261,13 +240,15 @@
&.menu-notification {
>solid-display>div>solid-display>div>hubl-menu-fix-url-circle,
>solid-display>div>solid-display>div>hubl-menu-fix-url-project {
>solid-display>div>solid-display>div>hubl-menu-fix-url-project,
>solid-display>div>solid-display>div>hubl-menu-fix-url-contact {
flex: 1;
}
>solid-display>div>solid-display>div,
>solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-link>solid-display>div,
>solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display>div {
>solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display>div,
>solid-display>div>solid-display>div>hubl-menu-fix-url-contact>solid-link>solid-display>div {
display: flex;
justify-content: space-between;
}

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

23
src/styles/index.scss
View File

@ -1,28 +1,25 @@
@charset "UTF-8";
@import '../../node_modules/include-media/dist/include-media';
@import '../../node_modules/normalize.css/normalize';
@import 'normalize.css';
@import 'abstracts/fonts';
@import 'abstracts/variables';
@import 'abstracts/mixins';
@import 'components/loader';
@import 'components/icons/index';
@import 'components/icons';
@import 'base/main';
@import 'base/about';
#viewport {
display: flex;
flex: 1;
/*height: auto;
min-height: 100vh;*/
overflow-y: auto;
@import 'components/index';
@import 'layout/members/index';
@import 'layout/job-offers/index';
@import 'layout/user/index';
@import 'layout/events/index';
@import 'layout/resources/index';
@import 'layout/dashboard/index';
@import 'layout/polls/index';
@import 'components';
@import 'layout/members';
@import 'layout/job-offers';
@import 'layout/user';
@import 'layout/events';
@import 'layout/resources';
@import 'layout/dashboard';
@import 'layout/polls';
}