From 7e9433762f51be2c4938481c9c33589982118033 Mon Sep 17 00:00:00 2001 From: HampusM Date: Fri, 11 Jun 2021 13:31:07 +0200 Subject: Goodbye, Bootstrap & added a button component --- packages/client/src/scss/_bootstrap.scss | 75 -------------------------------- packages/client/src/scss/_fonts.scss | 4 +- packages/client/src/scss/_mixins.scss | 20 +++++++++ packages/client/src/scss/_variables.scss | 9 ++++ 4 files changed, 31 insertions(+), 77 deletions(-) delete mode 100644 packages/client/src/scss/_bootstrap.scss create mode 100644 packages/client/src/scss/_mixins.scss create mode 100644 packages/client/src/scss/_variables.scss (limited to 'packages/client/src/scss') diff --git a/packages/client/src/scss/_bootstrap.scss b/packages/client/src/scss/_bootstrap.scss deleted file mode 100644 index b7cc84f..0000000 --- a/packages/client/src/scss/_bootstrap.scss +++ /dev/null @@ -1,75 +0,0 @@ -@import "~bootstrap/scss/functions"; -@import "~bootstrap/scss/variables"; -@import "~bootstrap/scss/mixins"; - -$theme-colors: ( - "primary": colors.$primary, - "secondary": colors.$secondary, - "success": colors.$success, - "info": $info, - "warning": $warning, - "danger": colors.$danger, - "light": $light, - "dark": $dark -); - -$font-size-base: 0.75rem; - -$h1-font-size: $font-size-base * 2.5; -$h2-font-size: $font-size-base * 2; -$h3-font-size: $font-size-base * 1.75; -$h4-font-size: $font-size-base * 1.5; -$h5-font-size: $font-size-base * 1.125; -$h6-font-size: $font-size-base; - -$font-sizes: ( - 1: $h1-font-size, - 2: $h2-font-size, - 3: $h3-font-size, - 4: $h4-font-size, - 5: $h5-font-size, - 6: $h6-font-size -); - -$input-bg: lighten(#000000, 12%); -$input-disabled-bg: lighten(#000000, 12%); -$input-color: colors.$text; -$input-focus-color: colors.$text; -$input-focus-box-shadow: none; -$input-disabled-border-color: lighten(#000000, 50%); -$input-height-sm: auto; - -$btn-padding-y-sm: 0.15rem; -$btn-padding-x-sm: 0.4rem; - -$table-cell-padding-x: 1rem; -$table-cell-padding-y: 0.2rem; - -$table-variants: ( - "primary": shift-color($primary, $table-bg-scale), - "secondary": shift-color($secondary, $table-bg-scale), - "success": shift-color($success, $table-bg-scale), - "info": shift-color($info, $table-bg-scale), - "warning": shift-color($warning, $table-bg-scale), - "danger": shift-color($danger, $table-bg-scale), - "light": $light, - "dark": colors.$background, -); - -@media (max-width: 1200px) { - .fs-1 { - font-size: calc(1.375rem + 0.667vw) !important; - } - .fs-2 { - font-size: calc(1.325rem + 1.584vw) !important; - } - .fs-3 { - font-size: calc(1.3rem + 0.017vw) !important; - } - .fs-4 { - font-size: calc(0.82rem + 0.4vw) !important; - } - .fs-5 { - font-size: calc(0.65rem + 0.25vw) !important; - } -} \ No newline at end of file diff --git a/packages/client/src/scss/_fonts.scss b/packages/client/src/scss/_fonts.scss index cc5561a..6af5233 100644 --- a/packages/client/src/scss/_fonts.scss +++ b/packages/client/src/scss/_fonts.scss @@ -1,5 +1,5 @@ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300&display=swap'); -$font-title: 'Oxygen', sans-serif; -$font-primary: 'Open Sans', sans-serif; \ No newline at end of file +$title: 'Oxygen', sans-serif; +$primary: 'Open Sans', sans-serif; \ No newline at end of file diff --git a/packages/client/src/scss/_mixins.scss b/packages/client/src/scss/_mixins.scss new file mode 100644 index 0000000..a84de6a --- /dev/null +++ b/packages/client/src/scss/_mixins.scss @@ -0,0 +1,20 @@ +@use "colors"; + +@mixin header { + display: flex; + margin-top: 1rem; + margin-left: 1.5rem; + margin-bottom: 1rem; +} + +@mixin button { + color: colors.$text; + background-color: colors.$primary-light; + padding: 8px 12px 8px 12px; + border: 0; + border-radius: 5px; + transition: background-color 0.2s ease-in-out; + &:hover { + background-color: colors.$primary; + } +} \ No newline at end of file diff --git a/packages/client/src/scss/_variables.scss b/packages/client/src/scss/_variables.scss new file mode 100644 index 0000000..afd2347 --- /dev/null +++ b/packages/client/src/scss/_variables.scss @@ -0,0 +1,9 @@ + +$base: 0.75rem; + +$font-size-1: $base * 2.5; +$font-size-2: $base * 2; +$font-size-3: $base * 1.75; +$font-size-4: $base * 1.5; +$font-size-5: $base * 1.125; +$font-size-6: $base; \ No newline at end of file -- cgit v1.2.3-18-g5258