From 804239509be3664d1fa4de13ab01511aa0d46f5d Mon Sep 17 00:00:00 2001 From: Joost De Cock Date: Sun, 23 May 2021 11:45:01 +0200 Subject: [PATCH] chore: Style tweaks in CFP --- packages/aaron/example/src/layout.css | 316 +++++++-------------- packages/albert/example/src/layout.css | 316 +++++++-------------- packages/bella/example/src/layout.css | 316 +++++++-------------- packages/benjamin/example/src/layout.css | 316 +++++++-------------- packages/bent/example/src/layout.css | 316 +++++++-------------- packages/breanna/example/src/layout.css | 316 +++++++-------------- packages/brian/example/src/layout.css | 316 +++++++-------------- packages/bruce/example/src/layout.css | 316 +++++++-------------- packages/carlita/example/src/layout.css | 316 +++++++-------------- packages/carlton/example/src/layout.css | 316 +++++++-------------- packages/cathrin/example/src/layout.css | 316 +++++++-------------- packages/charlie/example/src/layout.css | 316 +++++++-------------- packages/cornelius/example/src/layout.css | 316 +++++++-------------- packages/diana/example/src/layout.css | 316 +++++++-------------- packages/examples/example/src/layout.css | 316 +++++++-------------- packages/florence/example/src/layout.css | 316 +++++++-------------- packages/florent/example/src/layout.css | 316 +++++++-------------- packages/holmes/example/src/layout.css | 316 +++++++-------------- packages/hortensia/example/src/layout.css | 316 +++++++-------------- packages/huey/example/src/layout.css | 316 +++++++-------------- packages/hugo/example/src/layout.css | 316 +++++++-------------- packages/jaeger/example/src/layout.css | 316 +++++++-------------- packages/legend/example/src/layout.css | 316 +++++++-------------- packages/paco/example/src/layout.css | 316 +++++++-------------- packages/penelope/example/src/layout.css | 316 +++++++-------------- packages/rendertest/example/src/layout.css | 316 +++++++-------------- packages/sandy/example/src/layout.css | 316 +++++++-------------- packages/shin/example/src/layout.css | 316 +++++++-------------- packages/simon/example/src/layout.css | 316 +++++++-------------- packages/simone/example/src/layout.css | 316 +++++++-------------- packages/sven/example/src/layout.css | 316 +++++++-------------- packages/tamiko/example/src/layout.css | 316 +++++++-------------- packages/teagan/example/src/layout.css | 316 +++++++-------------- packages/theo/example/src/layout.css | 316 +++++++-------------- packages/titan/example/src/layout.css | 316 +++++++-------------- packages/trayvon/example/src/layout.css | 316 +++++++-------------- packages/tutorial/example/src/layout.css | 316 +++++++-------------- packages/wahid/example/src/layout.css | 316 +++++++-------------- packages/waralee/example/src/layout.css | 316 +++++++-------------- 39 files changed, 4290 insertions(+), 8034 deletions(-) diff --git a/packages/aaron/example/src/layout.css b/packages/aaron/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/aaron/example/src/layout.css +++ b/packages/aaron/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/albert/example/src/layout.css b/packages/albert/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/albert/example/src/layout.css +++ b/packages/albert/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/bella/example/src/layout.css b/packages/bella/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/bella/example/src/layout.css +++ b/packages/bella/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/benjamin/example/src/layout.css b/packages/benjamin/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/benjamin/example/src/layout.css +++ b/packages/benjamin/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/bent/example/src/layout.css b/packages/bent/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/bent/example/src/layout.css +++ b/packages/bent/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/breanna/example/src/layout.css b/packages/breanna/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/breanna/example/src/layout.css +++ b/packages/breanna/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/brian/example/src/layout.css b/packages/brian/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/brian/example/src/layout.css +++ b/packages/brian/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/bruce/example/src/layout.css b/packages/bruce/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/bruce/example/src/layout.css +++ b/packages/bruce/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/carlita/example/src/layout.css b/packages/carlita/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/carlita/example/src/layout.css +++ b/packages/carlita/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/carlton/example/src/layout.css b/packages/carlton/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/carlton/example/src/layout.css +++ b/packages/carlton/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/cathrin/example/src/layout.css b/packages/cathrin/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/cathrin/example/src/layout.css +++ b/packages/cathrin/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/charlie/example/src/layout.css b/packages/charlie/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/charlie/example/src/layout.css +++ b/packages/charlie/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/cornelius/example/src/layout.css b/packages/cornelius/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/cornelius/example/src/layout.css +++ b/packages/cornelius/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/diana/example/src/layout.css b/packages/diana/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/diana/example/src/layout.css +++ b/packages/diana/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/examples/example/src/layout.css b/packages/examples/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/examples/example/src/layout.css +++ b/packages/examples/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/florence/example/src/layout.css b/packages/florence/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/florence/example/src/layout.css +++ b/packages/florence/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/florent/example/src/layout.css b/packages/florent/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/florent/example/src/layout.css +++ b/packages/florent/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/holmes/example/src/layout.css b/packages/holmes/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/holmes/example/src/layout.css +++ b/packages/holmes/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/hortensia/example/src/layout.css b/packages/hortensia/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/hortensia/example/src/layout.css +++ b/packages/hortensia/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/huey/example/src/layout.css b/packages/huey/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/huey/example/src/layout.css +++ b/packages/huey/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/hugo/example/src/layout.css b/packages/hugo/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/hugo/example/src/layout.css +++ b/packages/hugo/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/jaeger/example/src/layout.css b/packages/jaeger/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/jaeger/example/src/layout.css +++ b/packages/jaeger/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/legend/example/src/layout.css b/packages/legend/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/legend/example/src/layout.css +++ b/packages/legend/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/paco/example/src/layout.css b/packages/paco/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/paco/example/src/layout.css +++ b/packages/paco/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/penelope/example/src/layout.css b/packages/penelope/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/penelope/example/src/layout.css +++ b/packages/penelope/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/rendertest/example/src/layout.css b/packages/rendertest/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/rendertest/example/src/layout.css +++ b/packages/rendertest/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/sandy/example/src/layout.css b/packages/sandy/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/sandy/example/src/layout.css +++ b/packages/sandy/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/shin/example/src/layout.css b/packages/shin/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/shin/example/src/layout.css +++ b/packages/shin/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/simon/example/src/layout.css b/packages/simon/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/simon/example/src/layout.css +++ b/packages/simon/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/simone/example/src/layout.css b/packages/simone/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/simone/example/src/layout.css +++ b/packages/simone/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/sven/example/src/layout.css b/packages/sven/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/sven/example/src/layout.css +++ b/packages/sven/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/tamiko/example/src/layout.css b/packages/tamiko/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/tamiko/example/src/layout.css +++ b/packages/tamiko/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/teagan/example/src/layout.css b/packages/teagan/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/teagan/example/src/layout.css +++ b/packages/teagan/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/theo/example/src/layout.css b/packages/theo/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/theo/example/src/layout.css +++ b/packages/theo/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/titan/example/src/layout.css b/packages/titan/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/titan/example/src/layout.css +++ b/packages/titan/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/trayvon/example/src/layout.css b/packages/trayvon/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/trayvon/example/src/layout.css +++ b/packages/trayvon/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/tutorial/example/src/layout.css b/packages/tutorial/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/tutorial/example/src/layout.css +++ b/packages/tutorial/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/wahid/example/src/layout.css b/packages/wahid/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/wahid/example/src/layout.css +++ b/packages/wahid/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } } diff --git a/packages/waralee/example/src/layout.css b/packages/waralee/example/src/layout.css index 94c9ddf0649..f600593f6ed 100644 --- a/packages/waralee/example/src/layout.css +++ b/packages/waralee/example/src/layout.css @@ -2,141 +2,82 @@ div.layout-wrapper { width: 100%; margin: 0; padding: 0; - background-color: red; background: #f8f9fa; - background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); -} -div.layout-wrapper div.layout { - display: flex; - max-width: 1600px; - margin: auto; - padding: 0; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - background-color: #f8f9fa; - min-height: calc(100vh - 64px); -} -div.layout-wrapper div.layout > aside { - width: 33%; - background: #f1f3f5; - border-right: 2px solid #dee2e6; -} -div.layout-wrapper div.layout > section { - margin: 0; - padding: 1rem; -} -div.layout-wrapper div.layout > section > div.content { - max-width: 66ch; - min-width: 340px; -} -div.layout-wrapper div.layout > section > div.content.wide { - max-width: 100%; - margin: auto; -} + background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); } + div.layout-wrapper div.layout { + display: flex; + max-width: 1600px; + margin: auto; + padding: 0; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + background-color: #f8f9fa; + min-height: calc(100vh - 64px); } + div.layout-wrapper div.layout > aside { + width: 33%; + background: #f1f3f5; + border-right: 2px solid #dee2e6; } + div.layout-wrapper div.layout > section { + margin: 0; + padding: 1rem; } + div.layout-wrapper div.layout > section > div.content { + max-width: 66ch; + min-width: 340px; } + div.layout-wrapper div.layout > section > div.content.wide { + max-width: 100%; + margin: auto; } .theme-wrapper.dark header { - background-color: #1a1d21; -} + background-color: #1a1d21; } .theme-wrapper.dark div.layout-wrapper { background: #f8f9fa; - background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); -} -.theme-wrapper.dark div.layout-wrapper div.layout { - background-color: #212529; -} -.theme-wrapper.dark div.layout-wrapper div.layout > aside { - background-color: #1a1d21; - border-right: 2px solid #343a40; -} - -header a svg { - color: #ced4da; -} - -header a:first-of-type svg { - color: #f8f9fa; -} - -header a:hover svg { - color: #b197fc; -} - -header a span, -header button span { - color: #ced4da; -} -header a span svg, -header button span svg { - color: #dee2e6; -} - -header a:hover span, -header button:hover span { - color: #f8f9fa; -} -header a:hover span svg, -header button:hover span svg { - color: #b197fc; -} - -header a, -header button { - padding: 0 1vw !important; -} + background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); } + .theme-wrapper.dark div.layout-wrapper div.layout { + background-color: #212529; } + .theme-wrapper.dark div.layout-wrapper div.layout > aside { + background-color: #1a1d21; + border-right: 2px solid #343a40; } /* monitor */ @media (min-width: 1200px) { div.layout > section { - width: 63%; - } -} + width: 63%; } } /* slate */ @media (max-width: 1199px) and (min-width: 960px) { div.layout > aside { - width: 298px; - } + width: 298px; } div.layout > section { width: calc(100% - 300px - 4rem); max-width: none; - margin: 0 1rem 0 3rem; - } -} + margin: 0 1rem 0 3rem; } } /* tablet */ @media (max-width: 959px) { div.layout > aside { - width: 218px; - } + width: 218px; } div.layout > section { width: calc(100% - 220px - 4rem); max-width: none; margin: 0; - padding: 0 2rem; - } - div.layout > section div.content { - min-width: inherit; - } -} + padding: 0 2rem; } + div.layout > section div.content { + min-width: inherit; } } /* mobile */ @media (max-width: 599px) { div.layout > aside { - display: none; - } + display: none; } div.layout > section { width: calc(100%); margin: 0 auto; padding: 0 1.5rem; - max-width: none; - } -} + max-width: none; } } div.gatsby-highlight { - margin-bottom: 1rem; -} + margin-bottom: 1rem; } @media (max-width: 599px) { #mobile-menu { @@ -150,154 +91,117 @@ div.gatsby-highlight { z-index: -10; transition: opacity 0.25s ease 0s; opacity: 0; - overflow: scroll; - } - #mobile-menu > ul, - #mobile-menu > div { - transform: translate(0px, 10px); - transition: transform 0.25s ease 0s; - } + overflow: scroll; } + #mobile-menu > ul, + #mobile-menu > div { + transform: translate(0px, 10px); + transition: transform 0.25s ease 0s; } .theme-wrapper.show-menu #mobile-menu { opacity: 1; - z-index: 10; - } - .theme-wrapper.show-menu #mobile-menu > div { - transform: translate(0px, 0px); - } -} + z-index: 10; } + .theme-wrapper.show-menu #mobile-menu > div { + transform: translate(0px, 0px); } } .theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.menu { - background: #f1f3f5; -} + background: #f1f3f5; } .theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.menu { - background: #343a40; -} + background: #343a40; } .theme-wrapper.show-menu div.menu { opacity: 1; - z-index: 10; -} -.theme-wrapper.show-menu div.menu > div { - transform: translate(0px, 0px); -} + z-index: 10; } + .theme-wrapper.show-menu div.menu > div { + transform: translate(0px, 0px); } div.spaced-buttons > button { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } div.spaced > * { - margin: 0 0.5rem 0.5rem 0; -} + margin: 0 0.5rem 0.5rem 0; } ul#pre-main-menu { margin: 0; - padding: 0; -} + padding: 0; } .boldish { - font-weight: 500; -} + font-weight: 500; } .freesewing.draft { - padding: 1rem; -} + padding: 1rem; } li.action { - clear: both; -} + clear: both; } li.action span.MuiSwitch-root { - float: right; -} + float: right; } .theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.dark ul#draft-config li.action.toggle.off { - color: #868e96; -} -.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, -.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { - color: #868e96; -} + color: #868e96; } + .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, + .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg { + color: #868e96; } footer { background-color: #1a1d21; color: #adb5bd; - padding: 3rem 0 6rem; -} -footer a { - color: #dee2e6 !important; - font-weight: 400; -} -footer a:hover { - color: #d0bfff !important; -} -footer div.cols { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1600px; - margin: auto; - padding: 0 1.5rem; -} -footer div.cols > div { - min-width: 150px; - max-width: calc(20% - 4rem); - padding: 0 2rem 0 0; - width: 100%; -} -footer ul { - text-align: left; - font-size: 1.1rem; - margin: 0; - padding: 0; - width: 100%; -} -footer ul li:first-of-type { - padding: 0.35rem 0.75rem; -} -footer ul li { - display: block; -} -footer ul li a:hover { - text-decoration: none !important; -} -footer ul li.heading { - font-weight: bold; - border-bottom: 3px solid #adb5bd; - margin-bottom: 0.5rem; -} + padding: 3rem 0 6rem; } + footer a { + color: #dee2e6 !important; + font-weight: 400; } + footer a:hover { + color: #d0bfff !important; } + footer div.cols { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 1600px; + margin: auto; + padding: 0 1.5rem; } + footer div.cols > div { + min-width: 150px; + max-width: calc(20% - 4rem); + padding: 0 2rem 0 0; + width: 100%; } + footer ul { + text-align: left; + font-size: 1.1rem; + margin: 0; + padding: 0; + width: 100%; } + footer ul li:first-of-type { + padding: 0.35rem 0.75rem; } + footer ul li { + display: block; } + footer ul li a:hover { + text-decoration: none !important; } + footer ul li.heading { + font-weight: bold; + border-bottom: 3px solid #adb5bd; + margin-bottom: 0.5rem; } /* XL screens */ @media (min-width: 1200px) { footer div.cols > div:last-of-type { - min-width: 350px; - } -} + min-width: 350px; } } /* SM screens */ @media (min-width: 600px) and (max-width: 959px) { footer div.cols { - flex-wrap: wrap; - } - footer div.cols > div { - width: calc(30% - 4rem); - padding: 0 1rem; - } -} + flex-wrap: wrap; } + footer div.cols > div { + width: calc(30% - 4rem); + padding: 0 1rem; } } /* XS screens */ @media (max-width: 599px) { footer div.cols { - display: block; - } - footer div.cols > div { - margin: 2rem auto 0; - max-width: calc(100% - 4rem); - } - footer div.cols > div:first-of-type { - margin-top: 0; - } -} + display: block; } + footer div.cols > div { + margin: 2rem auto 0; + max-width: calc(100% - 4rem); } + footer div.cols > div:first-of-type { + margin-top: 0; } }