featture: css - new structure > hubl-framework > commons
This commit is contained in:
parent
582e1ae892
commit
7166ce1391
4
src/styles/hubl-framework/commons/_index.scss
Normal file
4
src/styles/hubl-framework/commons/_index.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import 'colors';
|
||||
@import 'texts';
|
||||
@import 'borders';
|
||||
@import 'shadows';
|
84
src/styles/hubl-framework/commons/borders.scss
Normal file
84
src/styles/hubl-framework/commons/borders.scss
Normal 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
120
src/styles/hubl-framework/commons/colors.scss
Normal 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
10
src/styles/hubl-framework/commons/shadows.scss
Normal 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
48
src/styles/hubl-framework/commons/texts.scss
Normal 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;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user