From 133897cf26b3e5d514679de61020d7dabaa60fef Mon Sep 17 00:00:00 2001 From: axolotle Date: Thu, 10 Jun 2021 13:58:51 +0200 Subject: [PATCH] update scss root & add new node-view variables --- src/assets/scss/abstracts/_mixins.scss | 11 +++++++ src/assets/scss/abstracts/_variables.scss | 27 +++++++++++++++-- src/assets/scss/app.scss | 1 + src/assets/scss/base/_root.scss | 35 ----------------------- src/assets/scss/classes/_misc.scss | 13 +++++++++ src/assets/scss/classes/_nav-list.scss | 8 +----- 6 files changed, 50 insertions(+), 45 deletions(-) create mode 100644 src/assets/scss/classes/_misc.scss diff --git a/src/assets/scss/abstracts/_mixins.scss b/src/assets/scss/abstracts/_mixins.scss index 1e5bfb3..fb13ead 100644 --- a/src/assets/scss/abstracts/_mixins.scss +++ b/src/assets/scss/abstracts/_mixins.scss @@ -99,3 +99,14 @@ } } } + + +@mixin line-clamp($lines, $line-height) { + display: block; + display: -webkit-box; + -webkit-line-clamp: $lines; + -webkit-box-orient: vertical; + max-height: $lines * $line-height; + text-overflow: ellipsis; + overflow: hidden; +} diff --git a/src/assets/scss/abstracts/_variables.scss b/src/assets/scss/abstracts/_variables.scss index 93b994f..84075b3 100644 --- a/src/assets/scss/abstracts/_variables.scss +++ b/src/assets/scss/abstracts/_variables.scss @@ -49,6 +49,16 @@ $theme-colors: ( $yiq-contrasted-threshold: 120; +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 1024px, + // lg: 992px, + // xl: 1200px +); + +$layout-bp: md; + // Body $body-color: $black; @@ -73,7 +83,7 @@ $font-family-text: 'Redaction'; // custom $font-size-base: 1rem; $font-size-sm: $font-size-base * .78125; -$line-height-base: 1.55; +$line-height-base: 1.5; $line-height-lg: $line-height-base; $line-height-sm: $line-height-base; @@ -106,13 +116,24 @@ $card-border-width: 0; // $card-border-color: $black; +// SPINNER +$spinner-width: 50px; + // CUSTOM -$btn-size: 25px; +$btn-size: 26px; $text-card-header-height: 4rem; +$node-view-spacer-sm-x: 18px; +$node-view-spacer-sm-y: 18px; +$node-view-spacer-x: 30px; +$node-view-spacer-y: 25px; +$node-card-spacer-sm-x: 8px; +$node-card-spacer-sm-y: 8px; +$node-card-spacer-x: 15px; +$node-card-spacer-y: 10px; - +$line: $border-width solid $black; @import '~bootstrap/scss/variables'; @import '~bootstrap-vue/src/variables'; diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss index 924dd7e..e78ad24 100644 --- a/src/assets/scss/app.scss +++ b/src/assets/scss/app.scss @@ -4,6 +4,7 @@ @import 'base/root'; +@import 'classes/misc'; @import 'classes/nav-list'; @import 'fonts/noto-sans'; diff --git a/src/assets/scss/base/_root.scss b/src/assets/scss/base/_root.scss index 18fdf95..b753836 100644 --- a/src/assets/scss/base/_root.scss +++ b/src/assets/scss/base/_root.scss @@ -14,38 +14,3 @@ main { flex: 1; overflow-y: auto; } - -// Layouts - -.view { - display: flex; - flex-direction: column; - height: 100%; -} - -.container-fill { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; -} - - -// TEMP -.text-edition { - font: { - size: .57em; - weight: normal; - } -} - -.clickable { - cursor: pointer; -} - - -.tags { - > :not(:last-of-type) { - margin-right: .5rem; - } -} diff --git a/src/assets/scss/classes/_misc.scss b/src/assets/scss/classes/_misc.scss new file mode 100644 index 0000000..1bdf5a7 --- /dev/null +++ b/src/assets/scss/classes/_misc.scss @@ -0,0 +1,13 @@ +.wh-100 { + width: 100%; + height: 100%; +} + + +.no-events-container { + pointer-events: none !important; + + > * { + pointer-events: auto; + } +} diff --git a/src/assets/scss/classes/_nav-list.scss b/src/assets/scss/classes/_nav-list.scss index a7c9709..6296307 100644 --- a/src/assets/scss/classes/_nav-list.scss +++ b/src/assets/scss/classes/_nav-list.scss @@ -5,7 +5,7 @@ display: flex; align-items: center; justify-content: center; - height: 45px; + height: 26px; padding: 0; margin: 0; } @@ -18,10 +18,4 @@ margin-right: 20px; } } - - &.dot-btns { - li:not(:last-child) { - margin-right: 20px; - } - } }