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

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

@ -2,141 +2,82 @@ 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; padding: 0;
padding: 0; flex-direction: row;
flex-direction: row; 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 {
} width: 33%;
div.layout-wrapper div.layout > aside { background: #f1f3f5;
width: 33%; border-right: 2px solid #dee2e6; }
background: #f1f3f5; div.layout-wrapper div.layout > section {
border-right: 2px solid #dee2e6; margin: 0;
} padding: 1rem; }
div.layout-wrapper div.layout > section { div.layout-wrapper div.layout > section > div.content {
margin: 0; max-width: 66ch;
padding: 1rem; min-width: 340px; }
} div.layout-wrapper div.layout > section > div.content.wide {
div.layout-wrapper div.layout > section > div.content { max-width: 100%;
max-width: 66ch; margin: auto; }
min-width: 340px;
}
div.layout-wrapper div.layout > section > div.content.wide {
max-width: 100%;
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 {
} background-color: #1a1d21;
.theme-wrapper.dark div.layout-wrapper div.layout > aside { border-right: 2px solid #343a40; }
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;
}
/* 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 {
} color: #d0bfff !important; }
footer a:hover { footer div.cols {
color: #d0bfff !important; display: flex;
} flex-direction: row;
footer div.cols { justify-content: space-between;
display: flex; max-width: 1600px;
flex-direction: row; margin: auto;
justify-content: space-between; padding: 0 1.5rem; }
max-width: 1600px; footer div.cols > div {
margin: auto; min-width: 150px;
padding: 0 1.5rem; max-width: calc(20% - 4rem);
} padding: 0 2rem 0 0;
footer div.cols > div { width: 100%; }
min-width: 150px; footer ul {
max-width: calc(20% - 4rem); text-align: left;
padding: 0 2rem 0 0; font-size: 1.1rem;
width: 100%; margin: 0;
} padding: 0;
footer ul { width: 100%; }
text-align: left; footer ul li:first-of-type {
font-size: 1.1rem; padding: 0.35rem 0.75rem; }
margin: 0; footer ul li {
padding: 0; display: block; }
width: 100%; footer ul li a:hover {
} text-decoration: none !important; }
footer ul li:first-of-type { footer ul li.heading {
padding: 0.35rem 0.75rem; font-weight: bold;
} border-bottom: 3px solid #adb5bd;
footer ul li { margin-bottom: 0.5rem; }
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 */ /* 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 {
} margin-top: 0; } }
footer div.cols > div:first-of-type {
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) {