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

featture: css - new structure > hubl-framework > commons

Browse Source
This commit is contained in:
gaelle morin 2020-11-26 19:17:12 +01:00
parent 582e1ae892
commit 7166ce1391
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
5 changed files with 266 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/styles/hubl-framework/commons/_index.scss Normal file
View File

@ -0,0 +1,4 @@
@import 'colors';
@import 'texts';
@import 'borders';
@import 'shadows';

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

@ -0,0 +1,84 @@
.border {
&-thick {
border-width: thick;
}
&-color {
&-primary {
border-color: var(--color-primary);
}
&-secondary {
border-color: var(--color-secondary);
}
&-third {
border-color: var(--color-third);
}
&-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);
}
}
}

120
src/styles/hubl-framework/commons/colors.scss Normal file
View File

@ -0,0 +1,120 @@
:root {
--color-primary: #FF0055;
--color-secondary: #0068FF;
--color-third: #00E3B4;
--color-heading: #2E3F58;
}
.bg-color-primary {
background-color: var(--color-primary);
&.active[active] {
background-color: var(--color-secondary);
}
&.hover:hover {
opacity: 0.3;
}
&.reverse {
background-color: var(--color-secondary);
}
}
.bg-color-secondary {
background-color: var(--color-secondary);
&.active[active] {
background-color: var(--color-primary);
}
&.hover:hover {
opacity: 0.3;
}
&.reverse {
background-color: var(--color-primary);
}
}
.bg-color-third {
background-color: var(--color-third);
&.active[active] {
background-color: var(--color-heading);
}
&.hover:hover {
opacity: 0.3;
}
&.reverse {
background-color: var(--color-heading);
}
}
.bg-color-heading {
background-color: var(--color-heading);
&.active[active] {
background-color: var(--color-third);
}
&.hover:hover {
opacity: 0.3;
}
&.reverse {
background-color: var(--color-third);
}
}
.text-color-primary {
color: var(--color-primary);
&.active[active] {
color: var(--color-secondary);
}
&.hover:hover {
opacity: 0.3;
}
&.reverse {
color: var(--color-secondary);
}
}
.text-color-secondary {
color: var(--color-secondary);
&.active[active] {
color: var(--color-primary);
}
&.hover:hover {
opacity: 0.3;
}
&.reverse {
color: var(--color-primary);
}
}
.text-color-third {
color: var(--color-third);
&.active[active] {
color: var(--color-heading);
}
&.hover:hover {
opacity: 0.3;
}
&.reverse {
color: var(--color-heading);
}
}
.text-color-heading {
color: var(--color-heading);
&.active[active] {
color: var(--color-third);
}
&.hover:hover {
opacity: 0.3;
}
&.reverse {
color: var(--color-third);
}
}

10
src/styles/hubl-framework/commons/shadows.scss Normal file
View File

@ -0,0 +1,10 @@
.shadow {
box-shadow: 0 0 6px 0 rgba(46, 63, 88, 0.14);
&-small {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.09);
}
&-large {
box-shadow: 0 7px 8px 0 rgba(46, 63, 88, 0.16);
}
}

48
src/styles/hubl-framework/commons/texts.scss Normal file
View File

@ -0,0 +1,48 @@
.text {
&-xsmall {
font-size: 12px;
}
&-small {
font-size: 13px;
}
&-normal {
font-size: 14px;
}
&-large {
font-size: 15px;
}
&-xlarge {
font-size: 16px;
}
&-xxlarge {
font-size: 18px;
}
&-normal {
font-weight: 400;
}
&-semibold {
font-weight: 600;
}
&-bold {
font-weight: 700;
}
&-uppercase {
text-transform: uppercase;
}
&-underline {
text-decoration: underline;
}
&-letter-spacing-large {
letter-spacing: 0.2px;
}
&-letter-spacing-larger {
letter-spacing: 0.38px;
}
&-center {
text-align: center;
}
&-right {
text-align: right;
}
}