VSinerva/freesewing
1
0
Fork 0
Code Activity

chore(create-freesewing-pattern): Style tweaks

Browse source
This commit is contained in:
Joost De Cock 2021-05-23 11:44:30 +02:00
parent 3f5a723f34
commit 981c0367e0
2 changed files with 110 additions and 234 deletions
Download patch file Download diff file Expand all files Collapse all files

238
packages/create-freesewing-pattern/template/freesewing/example/src/layout.css
View file

@ -2,11 +2,9 @@ div.layout-wrapper {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: red;
background: #f8f9fa; background: #f8f9fa;
background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); }
} div.layout-wrapper div.layout {
div.layout-wrapper div.layout {
display: flex; display: flex;
max-width: 1600px; max-width: 1600px;
margin: auto; margin: auto;
@ -15,128 +13,71 @@ div.layout-wrapper div.layout {
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-between; justify-content: space-between;
background-color: #f8f9fa; background-color: #f8f9fa;
min-height: calc(100vh - 64px); min-height: calc(100vh - 64px); }
} div.layout-wrapper div.layout > aside {
div.layout-wrapper div.layout > aside {
width: 33%; width: 33%;
background: #f1f3f5; background: #f1f3f5;
border-right: 2px solid #dee2e6; border-right: 2px solid #dee2e6; }
} div.layout-wrapper div.layout > section {
div.layout-wrapper div.layout > section {
margin: 0; margin: 0;
padding: 1rem; padding: 1rem; }
} div.layout-wrapper div.layout > section > div.content {
div.layout-wrapper div.layout > section > div.content {
max-width: 66ch; max-width: 66ch;
min-width: 340px; min-width: 340px; }
} div.layout-wrapper div.layout > section > div.content.wide {
div.layout-wrapper div.layout > section > div.content.wide {
max-width: 100%; max-width: 100%;
margin: auto; margin: auto; }
}
.theme-wrapper.dark header { .theme-wrapper.dark header {
background-color: #1a1d21; background-color: #1a1d21; }
}
.theme-wrapper.dark div.layout-wrapper { .theme-wrapper.dark div.layout-wrapper {
background: #f8f9fa; background: #f8f9fa;
background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); }
} .theme-wrapper.dark div.layout-wrapper div.layout {
.theme-wrapper.dark div.layout-wrapper div.layout { background-color: #212529; }
background-color: #212529; .theme-wrapper.dark div.layout-wrapper div.layout > aside {
}
.theme-wrapper.dark div.layout-wrapper div.layout > aside {
background-color: #1a1d21; background-color: #1a1d21;
border-right: 2px solid #343a40; 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;
}
/* monitor */ /* monitor */
@media (min-width: 1200px) { @media (min-width: 1200px) {
div.layout > section { div.layout > section {
width: 63%; width: 63%; } }
}
}
/* slate */ /* slate */
@media (max-width: 1199px) and (min-width: 960px) { @media (max-width: 1199px) and (min-width: 960px) {
div.layout > aside { div.layout > aside {
width: 298px; width: 298px; }
}
div.layout > section { div.layout > section {
width: calc(100% - 300px - 4rem); width: calc(100% - 300px - 4rem);
max-width: none; max-width: none;
margin: 0 1rem 0 3rem; margin: 0 1rem 0 3rem; } }
}
}
/* tablet */ /* tablet */
@media (max-width: 959px) { @media (max-width: 959px) {
div.layout > aside { div.layout > aside {
width: 218px; width: 218px; }
}
div.layout > section { div.layout > section {
width: calc(100% - 220px - 4rem); width: calc(100% - 220px - 4rem);
max-width: none; max-width: none;
margin: 0; margin: 0;
padding: 0 2rem; padding: 0 2rem; }
}
div.layout > section div.content { div.layout > section div.content {
min-width: inherit; min-width: inherit; } }
}
}
/* mobile */ /* mobile */
@media (max-width: 599px) { @media (max-width: 599px) {
div.layout > aside { div.layout > aside {
display: none; display: none; }
}
div.layout > section { div.layout > section {
width: calc(100%); width: calc(100%);
margin: 0 auto; margin: 0 auto;
padding: 0 1.5rem; padding: 0 1.5rem;
max-width: none; max-width: none; } }
}
}
div.gatsby-highlight { div.gatsby-highlight {
margin-bottom: 1rem; margin-bottom: 1rem; }
}
@media (max-width: 599px) { @media (max-width: 599px) {
#mobile-menu { #mobile-menu {
@ -150,154 +91,117 @@ div.gatsby-highlight {
z-index: -10; z-index: -10;
transition: opacity 0.25s ease 0s; transition: opacity 0.25s ease 0s;
opacity: 0; opacity: 0;
overflow: scroll; overflow: scroll; }
}
#mobile-menu > ul, #mobile-menu > ul,
#mobile-menu > div { #mobile-menu > div {
transform: translate(0px, 10px); transform: translate(0px, 10px);
transition: transform 0.25s ease 0s; transition: transform 0.25s ease 0s; }
}
.theme-wrapper.show-menu #mobile-menu { .theme-wrapper.show-menu #mobile-menu {
opacity: 1; opacity: 1;
z-index: 10; z-index: 10; }
}
.theme-wrapper.show-menu #mobile-menu > div { .theme-wrapper.show-menu #mobile-menu > div {
transform: translate(0px, 0px); transform: translate(0px, 0px); } }
}
}
.theme-wrapper.light div.draft-ui-menu, .theme-wrapper.light div.draft-ui-menu,
.theme-wrapper.light div.menu { .theme-wrapper.light div.menu {
background: #f1f3f5; background: #f1f3f5; }
}
.theme-wrapper.dark div.draft-ui-menu, .theme-wrapper.dark div.draft-ui-menu,
.theme-wrapper.dark div.menu { .theme-wrapper.dark div.menu {
background: #343a40; background: #343a40; }
}
.theme-wrapper.show-menu div.menu { .theme-wrapper.show-menu div.menu {
opacity: 1; opacity: 1;
z-index: 10; z-index: 10; }
} .theme-wrapper.show-menu div.menu > div {
.theme-wrapper.show-menu div.menu > div { transform: translate(0px, 0px); }
transform: translate(0px, 0px);
}
div.spaced-buttons > button { div.spaced-buttons > button {
margin: 0 0.5rem 0.5rem 0; margin: 0 0.5rem 0.5rem 0; }
}
div.spaced > * { div.spaced > * {
margin: 0 0.5rem 0.5rem 0; margin: 0 0.5rem 0.5rem 0; }
}
ul#pre-main-menu { ul#pre-main-menu {
margin: 0; margin: 0;
padding: 0; padding: 0; }
}
.boldish { .boldish {
font-weight: 500; font-weight: 500; }
}
.freesewing.draft { .freesewing.draft {
padding: 1rem; padding: 1rem; }
}
li.action { li.action {
clear: both; clear: both; }
}
li.action span.MuiSwitch-root { li.action span.MuiSwitch-root {
float: right; float: right; }
}
.theme-wrapper.light ul#draft-config li.action.toggle.off, .theme-wrapper.light ul#draft-config li.action.toggle.off,
.theme-wrapper.dark ul#draft-config li.action.toggle.off { .theme-wrapper.dark ul#draft-config li.action.toggle.off {
color: #868e96; color: #868e96; }
} .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg,
.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg, .theme-wrapper.dark 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;
}
footer { footer {
background-color: #1a1d21; background-color: #1a1d21;
color: #adb5bd; color: #adb5bd;
padding: 3rem 0 6rem; padding: 3rem 0 6rem; }
} footer a {
footer a {
color: #dee2e6 !important; color: #dee2e6 !important;
font-weight: 400; font-weight: 400; }
} footer a:hover {
footer a:hover { color: #d0bfff !important; }
color: #d0bfff !important; footer div.cols {
}
footer div.cols {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
max-width: 1600px; max-width: 1600px;
margin: auto; margin: auto;
padding: 0 1.5rem; padding: 0 1.5rem; }
} footer div.cols > div {
footer div.cols > div {
min-width: 150px; min-width: 150px;
max-width: calc(20% - 4rem); max-width: calc(20% - 4rem);
padding: 0 2rem 0 0; padding: 0 2rem 0 0;
width: 100%; width: 100%; }
} footer ul {
footer ul {
text-align: left; text-align: left;
font-size: 1.1rem; font-size: 1.1rem;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%; }
} footer ul li:first-of-type {
footer ul li:first-of-type { padding: 0.35rem 0.75rem; }
padding: 0.35rem 0.75rem; footer ul li {
} display: block; }
footer ul li { footer ul li a:hover {
display: block; text-decoration: none !important; }
} footer ul li.heading {
footer ul li a:hover {
text-decoration: none !important;
}
footer ul li.heading {
font-weight: bold; font-weight: bold;
border-bottom: 3px solid #adb5bd; border-bottom: 3px solid #adb5bd;
margin-bottom: 0.5rem; margin-bottom: 0.5rem; }
}
/* XL screens */ /* XL screens */
@media (min-width: 1200px) { @media (min-width: 1200px) {
footer div.cols > div:last-of-type { footer div.cols > div:last-of-type {
min-width: 350px; min-width: 350px; } }
}
}
/* SM screens */ /* SM screens */
@media (min-width: 600px) and (max-width: 959px) { @media (min-width: 600px) and (max-width: 959px) {
footer div.cols { footer div.cols {
flex-wrap: wrap; flex-wrap: wrap; }
}
footer div.cols > div { footer div.cols > div {
width: calc(30% - 4rem); width: calc(30% - 4rem);
padding: 0 1rem; padding: 0 1rem; } }
}
}
/* XS screens */ /* XS screens */
@media (max-width: 599px) { @media (max-width: 599px) {
footer div.cols { footer div.cols {
display: block; display: block; }
}
footer div.cols > div { footer div.cols > div {
margin: 2rem auto 0; margin: 2rem auto 0;
max-width: calc(100% - 4rem); max-width: calc(100% - 4rem); }
}
footer div.cols > div:first-of-type { footer div.cols > div:first-of-type {
margin-top: 0; margin-top: 0; } }
}
}

28
packages/create-freesewing-pattern/template/freesewing/example/src/layout.scss
View file

@ -5,7 +5,6 @@ div.layout-wrapper {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: red;
background: $oc-gray-0; background: $oc-gray-0;
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
@ -65,33 +64,6 @@ div.layout-wrapper {
} }
} }
} }
header a svg {
color: $oc-gray-4;
}
header a:first-of-type svg {
color: $oc-gray-0;
}
header a:hover svg {
color: $oc-violet-3;
}
header a span,
header button span {
color: $oc-gray-4;
svg {
color: $oc-gray-3;
}
}
header a:hover span,
header button:hover span {
color: $oc-gray-0;
svg {
color: $oc-violet-3;
}
}
header a,
header button {
padding: 0 1vw !important;
}
/* monitor */ /* monitor */
@media (min-width: 1200px) { @media (min-width: 1200px) {