From 9de113f12cbf7d0777875c5215d224d252df1d75 Mon Sep 17 00:00:00 2001 From: Fabian Date: Fri, 5 Jul 2019 12:12:26 +0200 Subject: [PATCH] Exporting base styles --- src/_colors.scss | 0 src/_maketheme.scss | 51 +++++-------------------------------- src/base.scss | 22 +++++++++++++++- src/{ => base}/_btn.scss | 13 +--------- src/base/_card.scss | 3 +++ src/base/_global.scss | 25 ++++++++++++++++++ src/{ => base}/_header.scss | 5 ++-- src/{ => base}/_input.scss | 6 ----- src/{ => base}/_list.scss | 14 ++++------ src/{ => base}/_modal.scss | 3 --- src/dark.scss | 2 +- src/light.scss | 2 +- src/theme/_btn.scss | 17 +++++++++++++ src/{ => theme}/_card.scss | 1 - src/theme/_global.scss | 5 ++++ src/theme/_header.scss | 3 +++ src/theme/_input.scss | 8 ++++++ src/theme/_list.scss | 5 ++++ src/theme/_modal.scss | 10 ++++++++ 19 files changed, 114 insertions(+), 81 deletions(-) delete mode 100644 src/_colors.scss rename src/{ => base}/_btn.scss (77%) create mode 100644 src/base/_card.scss create mode 100644 src/base/_global.scss rename src/{ => base}/_header.scss (89%) rename src/{ => base}/_input.scss (77%) rename src/{ => base}/_list.scss (54%) rename src/{ => base}/_modal.scss (90%) create mode 100644 src/theme/_btn.scss rename src/{ => theme}/_card.scss (81%) create mode 100644 src/theme/_global.scss create mode 100644 src/theme/_header.scss create mode 100644 src/theme/_input.scss create mode 100644 src/theme/_list.scss create mode 100644 src/theme/_modal.scss diff --git a/src/_colors.scss b/src/_colors.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/_maketheme.scss b/src/_maketheme.scss index dc241d5..fef1588 100644 --- a/src/_maketheme.scss +++ b/src/_maketheme.scss @@ -1,18 +1,7 @@ @import "./_vals.scss"; -@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); - $background:false !default; $on-background:false !default; -$primary: var(--primary) !default; -$on-primary: var(--on-primary) !default; - -$secondary: var(--secondary) !default; -$on-secondary: var(--on-secondary) !default; - -$error: var(--error) !default; -$on-error: var(--on-error) !default; - $button-color: #CCCCCC !default; @if $background==false or $on-background==false { @@ -24,26 +13,10 @@ $button-color: #CCCCCC !default; --on-background: #{$on-background}; } -$default-font-size: 1rem; - .background-default { background: $background; } -* { - box-sizing: border-box; - font-family: 'Roboto', sans-serif; - font-size: $default-font-size; -} - -html, -body { - background: $background; - color: $on-background; - margin: 0; - min-height: 100vh; - min-width: 100vw; -} @each $dp in $elevations { .elv-#{$dp} { @@ -51,17 +24,6 @@ body { } } -.margin { - margin-bottom: 1.5rem; -} - -.container { - box-sizing: content-box; - padding-left: 1rem; - padding-right: 1rem; - margin: 0 auto; - max-width: 50rem; -} @function darken-brighten-color($color, $val) { @if (lightness($color) > 50) { @@ -73,9 +35,10 @@ body { } } -@import "./_btn.scss"; -@import "./_modal.scss"; -@import "./_input.scss"; -@import "./_list.scss"; -@import "./_header.scss"; -@import "./_card.scss"; \ No newline at end of file +@import "./theme/_global.scss"; +@import "./theme/_btn.scss"; +@import "./theme/_modal.scss"; +@import "./theme/_input.scss"; +@import "./theme/_list.scss"; +@import "./theme/_header.scss"; +@import "./theme/_card.scss"; \ No newline at end of file diff --git a/src/base.scss b/src/base.scss index dfd8de0..79f19e7 100644 --- a/src/base.scss +++ b/src/base.scss @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); + :root { // --primary: #1e88e5; --primary: #196eb9; @@ -6,4 +8,22 @@ --secondary: #d8701b; --on-secondary: black; --error: rgb(255, 0, 0); -} \ No newline at end of file +} + +$default-font-size: 1rem; +$primary: var(--primary) !default; +$on-primary: var(--on-primary) !default; + +$secondary: var(--secondary) !default; +$on-secondary: var(--on-secondary) !default; + +$error: var(--error) !default; +$on-error: var(--on-error) !default; + +@import "./base/_global.scss"; +@import "./base/_btn.scss"; +@import "./base/_modal.scss"; +@import "./base/_input.scss"; +@import "./base/_list.scss"; +@import "./base/_header.scss"; +@import "./base/_card.scss"; \ No newline at end of file diff --git a/src/_btn.scss b/src/base/_btn.scss similarity index 77% rename from src/_btn.scss rename to src/base/_btn.scss index 7fb6693..193560c 100644 --- a/src/_btn.scss +++ b/src/base/_btn.scss @@ -1,7 +1,5 @@ .btn { position: relative; - @include Elevation(1); - background: $button-color; color: black; border: 0; margin: .3rem; @@ -9,14 +7,6 @@ font-weight: 500; text-transform: uppercase; transition: .05s background-color linear; - - &:hover { - background: darken($button-color, 5%); - } - - &:active { - background: lighten($button-color, 5%); - } } .btn-primary { @@ -33,6 +23,7 @@ } .btn-secondary { + background: $secondary !important; color: $on-primary !important; @@ -47,8 +38,6 @@ } .fab { - @include Elevation(6); - background: $button-color; border-radius: 50%; width: 2.5rem; height: 2.5rem; diff --git a/src/base/_card.scss b/src/base/_card.scss new file mode 100644 index 0000000..d18a542 --- /dev/null +++ b/src/base/_card.scss @@ -0,0 +1,3 @@ +.card { + padding: 1rem; +} \ No newline at end of file diff --git a/src/base/_global.scss b/src/base/_global.scss new file mode 100644 index 0000000..ecceb1b --- /dev/null +++ b/src/base/_global.scss @@ -0,0 +1,25 @@ +* { + box-sizing: border-box; + font-family: 'Roboto', sans-serif; + font-size: $default-font-size; +} + + +html, +body { + margin: 0; + min-height: 100vh; + min-width: 100vw; +} + +.margin { + margin-bottom: 1.5rem; +} + +.container { + box-sizing: content-box; + padding-left: 1rem; + padding-right: 1rem; + margin: 0 auto; + max-width: 50rem; +} \ No newline at end of file diff --git a/src/_header.scss b/src/base/_header.scss similarity index 89% rename from src/_header.scss rename to src/base/_header.scss index 8eaaf55..6e107e4 100644 --- a/src/_header.scss +++ b/src/base/_header.scss @@ -1,7 +1,6 @@ .header { - @include Elevation(3); - background: $primary; - color: $on-primary; + background: $primary !important; + color: $on-primary !important; display: flex; justify-content: space-between; diff --git a/src/_input.scss b/src/base/_input.scss similarity index 77% rename from src/_input.scss rename to src/base/_input.scss index cdb2b48..fd7d285 100644 --- a/src/_input.scss +++ b/src/base/_input.scss @@ -1,7 +1,5 @@ .inp { - // background: $background; background: unset; - color: $on-background; border: 1px grey solid; padding: 0 .5rem; height: 2rem; @@ -11,10 +9,6 @@ &:focus { border-color: $primary; } - - // &disabled { - // background: darken-brighten-color($background, 10%) - // } } textarea.inp { diff --git a/src/_list.scss b/src/base/_list.scss similarity index 54% rename from src/_list.scss rename to src/base/_list.scss index 47e99b8..c82b8a0 100644 --- a/src/_list.scss +++ b/src/base/_list.scss @@ -9,17 +9,13 @@ .list-divider { li:nth-child(n+2) { - // margin-top: 10px; - // padding-top: 10px; border-top: 1px solid rgb(128, 128, 128); } } - - -.list-clickable { - li:hover { - background: darken-brighten-color($background, 5%); - } -} \ No newline at end of file +// .list-clickable { +// // li:hover { +// // background: darken-brighten-color($background, 5%); +// // } +// } \ No newline at end of file diff --git a/src/_modal.scss b/src/base/_modal.scss similarity index 90% rename from src/_modal.scss rename to src/base/_modal.scss index 3ad0884..733961d 100644 --- a/src/_modal.scss +++ b/src/base/_modal.scss @@ -1,7 +1,4 @@ .modal { - background: $background; - // background: rgba(0, 0, 0, 0.04); - @include Elevation(24); padding: 1rem; margin: auto; diff --git a/src/dark.scss b/src/dark.scss index f7a4ffa..2b2fc6e 100644 --- a/src/dark.scss +++ b/src/dark.scss @@ -9,4 +9,4 @@ $disabled-brightness: 1.1; z-index: $dp; } -@import "./maketheme.scss"; \ No newline at end of file +@import "./_maketheme.scss"; \ No newline at end of file diff --git a/src/light.scss b/src/light.scss index ddbeee4..7a12541 100644 --- a/src/light.scss +++ b/src/light.scss @@ -54,4 +54,4 @@ $disabled-brightness: .9; z-index: $dp; } -@import "./maketheme.scss"; \ No newline at end of file +@import "./_maketheme.scss"; \ No newline at end of file diff --git a/src/theme/_btn.scss b/src/theme/_btn.scss new file mode 100644 index 0000000..c97013f --- /dev/null +++ b/src/theme/_btn.scss @@ -0,0 +1,17 @@ +.btn { + @include Elevation(1); + background: $button-color; + + &:hover { + background: darken($button-color, 5%); + } + + &:active { + background: lighten($button-color, 5%); + } +} + +.fab { + @include Elevation(8); + background: $button-color; +} \ No newline at end of file diff --git a/src/_card.scss b/src/theme/_card.scss similarity index 81% rename from src/_card.scss rename to src/theme/_card.scss index f098f66..321c892 100644 --- a/src/_card.scss +++ b/src/theme/_card.scss @@ -1,6 +1,5 @@ .card { @include Elevation(3); - padding: 1rem; } .card-elevated { diff --git a/src/theme/_global.scss b/src/theme/_global.scss new file mode 100644 index 0000000..c797bf3 --- /dev/null +++ b/src/theme/_global.scss @@ -0,0 +1,5 @@ +html, +body { + background: $background; + color: $on-background; +} \ No newline at end of file diff --git a/src/theme/_header.scss b/src/theme/_header.scss new file mode 100644 index 0000000..50797ce --- /dev/null +++ b/src/theme/_header.scss @@ -0,0 +1,3 @@ +.header { + @include Elevation(3); +} \ No newline at end of file diff --git a/src/theme/_input.scss b/src/theme/_input.scss new file mode 100644 index 0000000..4fa913d --- /dev/null +++ b/src/theme/_input.scss @@ -0,0 +1,8 @@ +.inp { + color: $on-background; + + option { + background: $background; + color: $on-background; + } +} \ No newline at end of file diff --git a/src/theme/_list.scss b/src/theme/_list.scss new file mode 100644 index 0000000..7106202 --- /dev/null +++ b/src/theme/_list.scss @@ -0,0 +1,5 @@ +.list-clickable { + li:hover { + background: darken-brighten-color($background, 5%); + } +} \ No newline at end of file diff --git a/src/theme/_modal.scss b/src/theme/_modal.scss new file mode 100644 index 0000000..cf39d61 --- /dev/null +++ b/src/theme/_modal.scss @@ -0,0 +1,10 @@ +.modal { + background: $background; + @include Elevation(24); + + .modal-action { + button { + @extend .btn; + } + } +} \ No newline at end of file