From 0969f892f82cef7430794ba3b9caa566619a2e99 Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Sat, 7 Aug 2021 10:39:32 +0200 Subject: [PATCH] Split all scss in separated files. --- cerberus/src/components-styles/button.scss | 50 ++++++ cerberus/src/components-styles/card.scss | 7 + .../components-styles/components-styles.scss | 4 + .../components-styles/form/form-control.scss | 19 +++ cerberus/src/components-styles/form/form.scss | 4 + .../src/components-styles/form/input.scss | 29 ++++ .../src/components-styles/form/label.scss | 4 + .../src/components-styles/form/select.scss | 30 ++++ cerberus/src/components-styles/icon.scss | 8 + cerberus/src/styles.scss | 154 +----------------- 10 files changed, 162 insertions(+), 147 deletions(-) create mode 100644 cerberus/src/components-styles/button.scss create mode 100644 cerberus/src/components-styles/card.scss create mode 100644 cerberus/src/components-styles/components-styles.scss create mode 100644 cerberus/src/components-styles/form/form-control.scss create mode 100644 cerberus/src/components-styles/form/form.scss create mode 100644 cerberus/src/components-styles/form/input.scss create mode 100644 cerberus/src/components-styles/form/label.scss create mode 100644 cerberus/src/components-styles/form/select.scss create mode 100644 cerberus/src/components-styles/icon.scss diff --git a/cerberus/src/components-styles/button.scss b/cerberus/src/components-styles/button.scss new file mode 100644 index 0000000..ff8e761 --- /dev/null +++ b/cerberus/src/components-styles/button.scss @@ -0,0 +1,50 @@ +@import '../colors.scss'; + +button { + // background-color: $blue; + background-image: linear-gradient($btn-primary-background-top, $btn-primary-background-bottom); + color: white; + border: solid 1px $btn-primary-background-bottom; + display: flex; + justify-content: center; + align-items: center; + min-width: 5rem; + border-radius: .3rem; + padding: .15rem 1rem; + font-weight: 600; + margin: .2rem .5rem; + + &:active { + border-color: $btn-primary-active-border; + background-image: linear-gradient($btn-primary-active-background-top, $btn-primary-active-background-bottom); + } + + &.secondary { + background-image: none; + background-color: $btn-secondary-background; + border-color: $btn-secondary-border; + color: #222; + font-weight: 500; + + &:active { + background-color: $btn-secondary-active-background; + border-color: $btn-secondary-active-border; + } + } + + &.help { + border-radius: 10em; + padding: 0; + background-image: none; + background-color: #eeeeee; + color: #333; + border-color: #bbb; + min-width: min-content; + width: 1.5rem; + height: 1.5rem; + + &:hover { + background-color: #dddddd; + } + } + } \ No newline at end of file diff --git a/cerberus/src/components-styles/card.scss b/cerberus/src/components-styles/card.scss new file mode 100644 index 0000000..8711fe2 --- /dev/null +++ b/cerberus/src/components-styles/card.scss @@ -0,0 +1,7 @@ +.card { + width: max-content; + padding: .5rem 1rem; + box-shadow: 0px 13px 28px 4px rgba(0,0,0,0.2); + border-radius: .4rem; + margin: 2rem; + } \ No newline at end of file diff --git a/cerberus/src/components-styles/components-styles.scss b/cerberus/src/components-styles/components-styles.scss new file mode 100644 index 0000000..94c0ff9 --- /dev/null +++ b/cerberus/src/components-styles/components-styles.scss @@ -0,0 +1,4 @@ +@import './button.scss'; +@import './card.scss'; +@import './form/form.scss'; +@import './icon.scss'; \ No newline at end of file diff --git a/cerberus/src/components-styles/form/form-control.scss b/cerberus/src/components-styles/form/form-control.scss new file mode 100644 index 0000000..b95b546 --- /dev/null +++ b/cerberus/src/components-styles/form/form-control.scss @@ -0,0 +1,19 @@ +.form-control { + display: flex; + flex-direction: column; + margin: 1rem 0; + + & > * { + display: flex; + flex: 1 0; + } + + & > input, select { + margin-left: 0; + margin-right: 0; + } + + app-select { + width: 100%; + } + } \ No newline at end of file diff --git a/cerberus/src/components-styles/form/form.scss b/cerberus/src/components-styles/form/form.scss new file mode 100644 index 0000000..6656760 --- /dev/null +++ b/cerberus/src/components-styles/form/form.scss @@ -0,0 +1,4 @@ +@import './form-control.scss'; +@import './label.scss'; +@import './input.scss'; +@import './select.scss'; \ No newline at end of file diff --git a/cerberus/src/components-styles/form/input.scss b/cerberus/src/components-styles/form/input.scss new file mode 100644 index 0000000..2700296 --- /dev/null +++ b/cerberus/src/components-styles/form/input.scss @@ -0,0 +1,29 @@ +@import '../../colors.scss'; + +input { + margin: 0 .5rem; + border: none; + box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1); + padding: .2rem .5rem; + border-radius: .2rem; + + &:focus { + outline: 2px solid $blue; + } +} + +.iconed-input { + display: flex; + position: relative; + align-items: center; + + input { + padding-left: 2rem; + } + + mat-icon { + color: $gray-icon-secondary; + position: absolute; + left: 1rem; + } +} \ No newline at end of file diff --git a/cerberus/src/components-styles/form/label.scss b/cerberus/src/components-styles/form/label.scss new file mode 100644 index 0000000..9dbdff8 --- /dev/null +++ b/cerberus/src/components-styles/form/label.scss @@ -0,0 +1,4 @@ +label { + margin-bottom: .2rem; + font-weight: 500; +} \ No newline at end of file diff --git a/cerberus/src/components-styles/form/select.scss b/cerberus/src/components-styles/form/select.scss new file mode 100644 index 0000000..6675087 --- /dev/null +++ b/cerberus/src/components-styles/form/select.scss @@ -0,0 +1,30 @@ +$font-size: 14px; + +select { + // A reset of styles, including removing the default dropdown arrow + appearance: none; + // Additional resets for further consistency + border: none; + box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1); + color: #333; + border-radius: .3rem; + padding: .15rem .5rem; + font-weight: 600; + margin: .2rem .5rem; + font-size: $font-size; + + &::-ms-expand { + display: none; + } + + &:focus { + outline: 2px solid $blue; + } +} + +.select { + display: grid; + grid-template-areas: "select"; + align-items: center; +} + \ No newline at end of file diff --git a/cerberus/src/components-styles/icon.scss b/cerberus/src/components-styles/icon.scss new file mode 100644 index 0000000..eebf02e --- /dev/null +++ b/cerberus/src/components-styles/icon.scss @@ -0,0 +1,8 @@ + +mat-icon.mat-icon { + display: flex; + align-items: center; + width: 18px; + height: 18px; + font-size: 18px; +} diff --git a/cerberus/src/styles.scss b/cerberus/src/styles.scss index f9bd9b7..87cf9af 100644 --- a/cerberus/src/styles.scss +++ b/cerberus/src/styles.scss @@ -1,14 +1,20 @@ @import './colors.scss'; +@import './components-styles/components-styles.scss'; /* You can add global styles to this file, and also import other style files */ @font-face { font-family: helvetica; - src: url(assets/fonts/Helvetica.ttf); + src: url(/assets/fonts/Helvetica.ttf); } $font-size: 14px; +html, body { + height: 100%; +} body { + margin: 0; + font-family: Roboto, "Helvetica Neue", sans-serif; font-size: $font-size; font-family: helvetica; @@ -22,120 +28,6 @@ body { } } -button { - // background-color: $blue; - background-image: linear-gradient($btn-primary-background-top, $btn-primary-background-bottom); - color: white; - border: solid 1px $btn-primary-background-bottom; - display: flex; - justify-content: center; - align-items: center; - min-width: 5rem; - border-radius: .3rem; - padding: .15rem 1rem; - font-weight: 600; - margin: .2rem .5rem; - - &:active { - border-color: $btn-primary-active-border; - background-image: linear-gradient($btn-primary-active-background-top, $btn-primary-active-background-bottom); - } - - &.secondary { - background-image: none; - background-color: $btn-secondary-background; - border-color: $btn-secondary-border; - color: #222; - font-weight: 500; - - &:active { - background-color: $btn-secondary-active-background; - border-color: $btn-secondary-active-border; - } - } - - &.help { - border-radius: 10em; - padding: 0; - background-image: none; - background-color: #eeeeee; - color: #333; - border-color: #bbb; - min-width: min-content; - width: 1.5rem; - height: 1.5rem; - - &:hover { - background-color: #dddddd; - } - } -} - -div.card { - width: max-content; - padding: .5rem 1rem; - box-shadow: 0px 13px 28px 4px rgba(0,0,0,0.2); - border-radius: .4rem; - margin: 2rem; -} - -.form-control { - display: flex; - flex-direction: column; - margin: 1rem 0; - - & > * { - display: flex; - flex: 1 0; - } - - & > input, select { - margin-left: 0; - margin-right: 0; - } -} - -label { - margin-bottom: .2rem; - font-weight: 500; -} - -input { - margin: 0 .5rem; - border: none; - box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1); - padding: .2rem .5rem; - border-radius: .2rem; - - &:focus { - outline: 2px solid $blue; - } -} - -select { - // A reset of styles, including removing the default dropdown arrow - appearance: none; - // Additional resets for further consistency - border: none; - box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1); - color: #333; - border-radius: .3rem; - padding: .15rem .5rem; - font-weight: 600; - margin: .2rem .5rem; - font-size: $font-size; - - &::-ms-expand { - display: none; - } -} - -.select { - display: grid; - grid-template-areas: "select"; - align-items: center; -} - // Utilitary classes .max-width { @@ -159,35 +51,3 @@ div.row { flex: 1 0; } } - -html, body { height: 100%; } -body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } - - -mat-icon.mat-icon { - display: flex; - align-items: center; - width: 18px; - height: 18px; -} - - -.iconed-input { - display: flex; - position: relative; - align-items: center; - - input { - padding-left: 2rem; - } - - mat-icon { - color: $gray-icon-secondary; - position: absolute; - left: 1rem; - } -} - -mat-icon.mat-icon { - font-size: 18px; -} \ No newline at end of file