From 7166ce13914a1c836d9a3ed0ed877ca85911170c Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Thu, 26 Nov 2020 19:17:12 +0100
Subject: [PATCH] featture: css - new structure > hubl-framework > commons
---
src/styles/hubl-framework/commons/_index.scss | 4 +
.../hubl-framework/commons/borders.scss | 84 ++++++++++++
src/styles/hubl-framework/commons/colors.scss | 120 ++++++++++++++++++
.../hubl-framework/commons/shadows.scss | 10 ++
src/styles/hubl-framework/commons/texts.scss | 48 +++++++
5 files changed, 266 insertions(+)
create mode 100644 src/styles/hubl-framework/commons/_index.scss
create mode 100644 src/styles/hubl-framework/commons/borders.scss
create mode 100644 src/styles/hubl-framework/commons/colors.scss
create mode 100644 src/styles/hubl-framework/commons/shadows.scss
create mode 100644 src/styles/hubl-framework/commons/texts.scss
diff --git a/src/styles/hubl-framework/commons/_index.scss b/src/styles/hubl-framework/commons/_index.scss
new file mode 100644
index 00000000..4151b5c4
--- /dev/null
+++ b/src/styles/hubl-framework/commons/_index.scss
@@ -0,0 +1,4 @@
+@import 'colors';
+@import 'texts';
+@import 'borders';
+@import 'shadows';
diff --git a/src/styles/hubl-framework/commons/borders.scss b/src/styles/hubl-framework/commons/borders.scss
new file mode 100644
index 00000000..9e7f346f
--- /dev/null
+++ b/src/styles/hubl-framework/commons/borders.scss
@@ -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);
+ }
+ }
+}
diff --git a/src/styles/hubl-framework/commons/colors.scss b/src/styles/hubl-framework/commons/colors.scss
new file mode 100644
index 00000000..459a3d62
--- /dev/null
+++ b/src/styles/hubl-framework/commons/colors.scss
@@ -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);
+ }
+}
diff --git a/src/styles/hubl-framework/commons/shadows.scss b/src/styles/hubl-framework/commons/shadows.scss
new file mode 100644
index 00000000..5a93c0d6
--- /dev/null
+++ b/src/styles/hubl-framework/commons/shadows.scss
@@ -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);
+ }
+}
\ No newline at end of file
diff --git a/src/styles/hubl-framework/commons/texts.scss b/src/styles/hubl-framework/commons/texts.scss
new file mode 100644
index 00000000..cf0636aa
--- /dev/null
+++ b/src/styles/hubl-framework/commons/texts.scss
@@ -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;
+ }
+}
--
GitLab