From 796dc1d7ec38b8a015a8ce9a3716f1dc24e7481b Mon Sep 17 00:00:00 2001 From: Joost De Cock Date: Sat, 25 May 2019 11:12:06 +0200 Subject: [PATCH] :construction: Work on CSS --- packages/css-theme/src/_components.scss | 1 + packages/css-theme/src/_mixins.scss | 3 ++ packages/css-theme/src/_utility.scss | 12 +++-- packages/css-theme/src/_variables.scss | 1 + packages/css-theme/src/components/_draft.scss | 10 +++-- .../css-theme/src/components/_example.scss | 44 +++++-------------- packages/css-theme/src/components/_fab.scss | 22 ++++++++++ .../css-theme/src/components/_navbar.scss | 34 +------------- 8 files changed, 54 insertions(+), 73 deletions(-) create mode 100644 packages/css-theme/src/components/_fab.scss diff --git a/packages/css-theme/src/_components.scss b/packages/css-theme/src/_components.scss index 731f544e923..9b781379697 100644 --- a/packages/css-theme/src/_components.scss +++ b/packages/css-theme/src/_components.scss @@ -6,3 +6,4 @@ @import "components/topicstoc"; @import "components/breadcrumbs"; @import "components/example"; +@import "components/fab"; diff --git a/packages/css-theme/src/_mixins.scss b/packages/css-theme/src/_mixins.scss index e54dfae88eb..503cdb134a1 100644 --- a/packages/css-theme/src/_mixins.scss +++ b/packages/css-theme/src/_mixins.scss @@ -4,6 +4,9 @@ @mixin sm-screen { @media (min-width: 600px) and (max-width: 959px) { @content; } } +@mixin lg-screen { + @media (min-width: 960px) { @content; } +} @mixin body-font { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } @mixin title-font { font-family: 'Roboto Condensed', sans-serif; } diff --git a/packages/css-theme/src/_utility.scss b/packages/css-theme/src/_utility.scss index f5e5f2aaa08..b99a977c113 100644 --- a/packages/css-theme/src/_utility.scss +++ b/packages/css-theme/src/_utility.scss @@ -1,7 +1,13 @@ @include xs-screen { - .only-xs { display: inherit!important; } .not-xs { display: none!important; } + .only-xs { display: inherit; } +} +@include sm-screen { + .not-xs { display: inherit; } + .only-xs { display: none!important; } +} +@include lg-screen { + .not-xs { display: inherit; } + .only-xs { display: none!important; } } -.only-xs { display: none; } -.not-xs { display: inherit; } diff --git a/packages/css-theme/src/_variables.scss b/packages/css-theme/src/_variables.scss index 0077aca5e5f..c2757dc33d6 100644 --- a/packages/css-theme/src/_variables.scss +++ b/packages/css-theme/src/_variables.scss @@ -1,3 +1,4 @@ +$fc-blue: "#74c0fc"; $fc-text-light: $oc-gray-9; $fc-text-dark: $oc-gray-0; $fc-bg-light: $oc-gray-0; diff --git a/packages/css-theme/src/components/_draft.scss b/packages/css-theme/src/components/_draft.scss index 71c1434f971..1d72f657732 100644 --- a/packages/css-theme/src/components/_draft.scss +++ b/packages/css-theme/src/components/_draft.scss @@ -129,12 +129,14 @@ svg.freesewing.draft text { /* SVG defs (snippets) are in the shadow DOM */ g.snippet.notch > circle, -g.snippet.bnotch > circle, -g.snippet.bnotch > path, -g.snippet.utton > circle, -g.snippet.uttonhole > path { +g.snippet.button > circle, +g.snippet.buttonhole > path { color: $fc-draft-mark-light; } +g.snippet.bnotch > circle, +g.snippet.bnotch > path { + color: $fc-draft-note-light; +} /* Same for paperless grid, also in shadow DOM */ rect.grid { stroke-width: 1; diff --git a/packages/css-theme/src/components/_example.scss b/packages/css-theme/src/components/_example.scss index 4201afc42c9..fdd30c703b6 100644 --- a/packages/css-theme/src/components/_example.scss +++ b/packages/css-theme/src/components/_example.scss @@ -1,46 +1,22 @@ figure.example { div.example { position: relative; - svg.freesewing.draft { - box-shadow: 0 0 3px #0006; - } div.actions { position: absolute; - right: 5px; - bottom: 14px; - button { - display: block; - background: $fc-text-light; - color: $fc-bg-light; - padding: 5px; - margin: 5px; - } - button:hover { - background: $oc-green-7; - } - button.active { - background: $oc-green-7; - } + right: 0; + top: 0; } } - > div.design { - border-top: 2px solid $oc-gray-4; - border-bottom: 2px solid $oc-gray-4; +} +figure.design.example { + border: 1px solid $oc-gray-4; + svg.freesewing.draft.design { + border-bottom: 1px solid $oc-gray-4; + } + figcaption { + display: none; } } .theme-wrapper.dark figure.example div.example { - svg.freesewing.draft { - box-shadow: none; - border: 1px solid $oc-gray-8; - } - div.actions { - button { - background: $fc-text-dark; - color: $fc-bg-light; - } - button.active { - background: $fc-text-dark; - } - } } diff --git a/packages/css-theme/src/components/_fab.scss b/packages/css-theme/src/components/_fab.scss new file mode 100644 index 00000000000..6c7dcaef88c --- /dev/null +++ b/packages/css-theme/src/components/_fab.scss @@ -0,0 +1,22 @@ +button.fab { + position: fixed; + bottom: 1rem; + width: 64px; + height: 64px!important; + background: $fc-text-light!important; + z-index: 20; + font-size: 2rem; +} +button.fab.primary { + right: 1rem; +} +button.fab.secondary { + right: calc(1rem + 69px); + background: $fc-link-light!important; +} +.theme-wrapper.dark button.fab { + background: $fc-text-dark!important; +} +.theme-wrapper.dark button.fab.secondary { + background: $fc-link-dark!important; +} diff --git a/packages/css-theme/src/components/_navbar.scss b/packages/css-theme/src/components/_navbar.scss index 333c207cb0e..9b016b2e87e 100644 --- a/packages/css-theme/src/components/_navbar.scss +++ b/packages/css-theme/src/components/_navbar.scss @@ -5,8 +5,7 @@ header.navbar { padding: 0 26px; background: $fc-bg-dark; z-index: 15; - div.only-xs, - div.not-xs { + div { align-items: center; } @@ -87,36 +86,7 @@ header.navbar > div { @include xs-screen { header.navbar { - position: fixed; - bottom: 0; - left: 0; - height: 42px; - width: calc(100% - 26px); - padding: 0 13px; - > div { - height: 42px; - } - div.spread { - justify-content: center; - } - div.logo, - div.emblem { - margin-right: 12px; - } - div.logo a { - height: 32px; - width: 32px; - } - div.emblem a { - font-size: 22px; - } - a.nav, - button { - border: 0; - padding: 0 6px; - height: 42px; - line-height: 42px; - } + display: none; } }