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

feature: css - common styles + test

Browse Source
This commit is contained in:
gaelle morin
2020-12-04 15:44:45 +01:00
parent 7166ce1391
commit 961a8b6cb8
76 changed files with 1340 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/styles/hubl-framework/commons/borders.scss
View File

@ -1,9 +1,24 @@
.border {
&.all-sides {
border: 1px solid;
}
&.top {
border-top: 1px solid;
}
&.right {
border-right: 1px solid;
}
&.bottom {
border-bottom: 1px solid;
}
&.left {
border-left: 1px solid;
}
&-thick {
border-width: thick;
}
&-color {
&.color {
&-primary {
border-color: var(--color-primary);
}
@ -16,69 +31,8 @@
&-heading {
border-color: var(--color-heading);
}
}
&-top {
border-top: 1px solid;
&-color-primary {
border-color: var(--color-primary);
}
&-color-secondary {
border-color: var(--color-secondary);
}
&-color-third {
border-color: var(--color-third);
}
&-color-heading {
border-color: var(--color-heading);
}
}
&-right {
border-right: 1px solid;
&-color-primary {
border-color: var(--color-primary);
}
&-color-secondary {
border-color: var(--color-secondary);
}
&-color-third {
border-color: var(--color-third);
}
&-color-heading {
border-color: var(--color-heading);
}
}
&-bottom {
border-bottom: 1px solid;
&-color-primary {
border-color: var(--color-primary);
}
&-color-secondary {
border-color: var(--color-secondary);
}
&-color-third {
border-color: var(--color-third);
}
&-color-heading {
border-color: var(--color-heading);
}
}
&-left {
border-left: 1px solid;
&-color-primary {
border-color: var(--color-primary);
}
&-color-secondary {
border-color: var(--color-secondary);
}
&-color-third {
border-color: var(--color-third);
}
&-color-heading {
border-color: var(--color-heading);
&-grey {
border-color: #D6CECE;
}
}
}

75
src/styles/hubl-framework/commons/colors.scss
View File

@ -5,14 +5,18 @@
--color-heading: #2E3F58;
}
.highlight::selection {
background-color: var(--color-third);
}
.bg-color-primary {
background-color: var(--color-primary);
&.active[active] {
&.active:active {
background-color: var(--color-secondary);
}
&.hover:hover {
opacity: 0.3;
&.hover:hover:not(:active) {
background-color: #202B3C;
}
&.reverse {
background-color: var(--color-secondary);
@ -22,11 +26,11 @@
.bg-color-secondary {
background-color: var(--color-secondary);
&.active[active] {
&.active:active {
background-color: var(--color-primary);
}
&.hover:hover {
opacity: 0.3;
&.hover:hover:not(:active) {
background-color: #202B3C;
}
&.reverse {
background-color: var(--color-primary);
@ -36,11 +40,11 @@
.bg-color-third {
background-color: var(--color-third);
&.active[active] {
&.active:active {
background-color: var(--color-heading);
}
&.hover:hover {
opacity: 0.3;
&.hover:hover:not(:active) {
background-color: #202B3C;
}
&.reverse {
background-color: var(--color-heading);
@ -50,26 +54,38 @@
.bg-color-heading {
background-color: var(--color-heading);
&.active[active] {
&.active:active {
background-color: var(--color-third);
}
&.hover:hover {
opacity: 0.3;
&.hover:hover:not(:active) {
background-color: #202B3C;
}
&.reverse {
background-color: var(--color-third);
}
}
.bg-color-grey {
background-color: #F1F1F1;
&.active:active {
background-color: var(--color-heading);
}
&.hover:hover:not(:active) {
background-color: #E4E4E4;
}
}
.bg-color-white {
background: white;
}
.text-color-primary {
color: var(--color-primary);
&.active[active] {
&.active:active {
color: var(--color-secondary);
}
&.hover:hover {
opacity: 0.3;
}
&.reverse {
color: var(--color-secondary);
}
@ -78,14 +94,9 @@
.text-color-secondary {
color: var(--color-secondary);
&.active[active] {
&.active:active {
color: var(--color-primary);
}
&.hover:hover {
opacity: 0.3;
}
&.reverse {
color: var(--color-primary);
}
@ -94,12 +105,9 @@
.text-color-third {
color: var(--color-third);
&.active[active] {
&.active:active {
color: var(--color-heading);
}
&.hover:hover {
opacity: 0.3;
}
&.reverse {
color: var(--color-heading);
}
@ -108,13 +116,18 @@
.text-color-heading {
color: var(--color-heading);
&.active[active] {
color: var(--color-third);
}
&.hover:hover {
opacity: 0.3;
&.active:active {
color: white;
}
&.reverse {
color: var(--color-third);
}
}
.text-color-white {
color: white;
}
.text-hover:hover {
color: var(--color-secondary);
}

2
src/styles/hubl-framework/commons/texts.scss
View File

@ -6,7 +6,7 @@
&-small {
font-size: 13px;
}
&-normal {
&-medium {
font-size: 14px;
}
&-large {