chore: CSS changes
This commit is contained in:
Joost De Cock
parent
254fcc10ef
commit
7adb006e36
8 changed files with 184 additions and 91 deletions
|
|
@ -1,24 +1,46 @@
|
|||
@include xs-screen {
|
||||
.not-xs { display: none!important; }
|
||||
.only-xs { display: inherit; }
|
||||
.not-xs {
|
||||
display: none !important;
|
||||
}
|
||||
.only-xs {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
@include sm-screen {
|
||||
.not-xs { display: inherit; }
|
||||
.only-xs { display: none!important; }
|
||||
.not-xs {
|
||||
display: inherit;
|
||||
}
|
||||
.only-xs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@include lg-screen {
|
||||
.not-xs { display: inherit; }
|
||||
.only-xs { display: none!important; }
|
||||
.not-xs {
|
||||
display: inherit;
|
||||
}
|
||||
.only-xs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
|
||||
0 2px 1px -1px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.theme-wrapper.dark .shadow {
|
||||
border: 1px solid #fff3;
|
||||
}
|
||||
|
||||
.font-text { @include body-font; }
|
||||
.font-title { @include title-font; }
|
||||
.poh:hover {cursor: pointer;}
|
||||
.font-text {
|
||||
@include body-font;
|
||||
}
|
||||
.font-title {
|
||||
@include title-font;
|
||||
}
|
||||
.font-button {
|
||||
@include button-font;
|
||||
}
|
||||
.poh:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
nav.breadcrumbs {
|
||||
ul {
|
||||
@include title-font;
|
||||
@include button-font;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
font-size: 95%;
|
||||
|
|
@ -9,11 +9,11 @@ nav.breadcrumbs {
|
|||
display: inline-block;
|
||||
}
|
||||
li:first-child:before {
|
||||
content: "";
|
||||
content: '';
|
||||
padding: 0;
|
||||
}
|
||||
li:before {
|
||||
content: "»";
|
||||
content: '»';
|
||||
padding: 0 0.25rem;
|
||||
font-size: 125%;
|
||||
}
|
||||
|
|
@ -28,4 +28,3 @@ nav.breadcrumbs {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -55,19 +55,19 @@ svg.freesewing.draft {
|
|||
path.focus.point.c1,
|
||||
circle.focus.point.c1,
|
||||
path.focus.coords.c1,
|
||||
circle.focus.coords.c01{
|
||||
circle.focus.coords.c01 {
|
||||
stroke: $oc-green-6;
|
||||
}
|
||||
path.focus.point.c2,
|
||||
circle.focus.point.c2,
|
||||
path.focus.coords.c2,
|
||||
circle.focus.coords.c02{
|
||||
circle.focus.coords.c02 {
|
||||
stroke: $oc-blue-6;
|
||||
}
|
||||
path.focus.point.c3,
|
||||
circle.focus.point.c3,
|
||||
path.focus.coords.c3,
|
||||
circle.focus.coords.c03{
|
||||
circle.focus.coords.c03 {
|
||||
stroke: $oc-grape-6;
|
||||
}
|
||||
path.focus.coords,
|
||||
|
|
@ -82,52 +82,102 @@ svg.freesewing.draft {
|
|||
stroke: $oc-orange-5;
|
||||
stroke-width: 1;
|
||||
}
|
||||
path.focus.path.c0 { stroke: $oc-red-6 }
|
||||
path.focus.path.c1 { stroke: $oc-green-6 }
|
||||
path.focus.path.c2 { stroke: $oc-blue-6 }
|
||||
path.focus.path.c3 { stroke: $oc-grape-6 }
|
||||
path.focus.path.c0 {
|
||||
stroke: $oc-red-6;
|
||||
}
|
||||
path.focus.path.c1 {
|
||||
stroke: $oc-green-6;
|
||||
}
|
||||
path.focus.path.c2 {
|
||||
stroke: $oc-blue-6;
|
||||
}
|
||||
path.focus.path.c3 {
|
||||
stroke: $oc-grape-6;
|
||||
}
|
||||
}
|
||||
|
||||
div.design {
|
||||
@include title-font;
|
||||
@include button-font;
|
||||
font-size: 115%;
|
||||
margin: 1rem 0;
|
||||
text-align: left;
|
||||
h6.point.c0 { border-bottom: 1px solid $oc-red-6; }
|
||||
h6.point.c1 { border-bottom: 1px solid $oc-green-6; }
|
||||
h6.point.c2 { border-bottom: 1px solid $oc-blue-6; }
|
||||
h6.point.c3 { border-bottom: 1px solid $oc-grape-6; }
|
||||
h6.point.c0 {
|
||||
border-bottom: 1px solid $oc-red-6;
|
||||
}
|
||||
h6.point.c1 {
|
||||
border-bottom: 1px solid $oc-green-6;
|
||||
}
|
||||
h6.point.c2 {
|
||||
border-bottom: 1px solid $oc-blue-6;
|
||||
}
|
||||
h6.point.c3 {
|
||||
border-bottom: 1px solid $oc-grape-6;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-wrapper.light svg.freesewing.draft {
|
||||
g.design.point {
|
||||
circle { fill: $fc-link-light; }
|
||||
circle.hovertrap { stroke: $fc-link-light; }
|
||||
circle {
|
||||
fill: $fc-link-light;
|
||||
}
|
||||
circle.hovertrap {
|
||||
stroke: $fc-link-light;
|
||||
}
|
||||
}
|
||||
path.design.hovertrap {
|
||||
stroke: $fc-link-light;
|
||||
}
|
||||
circle.design.path.cp {
|
||||
fill: $fc-bg-light;
|
||||
}
|
||||
path.design.hovertrap { stroke: $fc-link-light; }
|
||||
circle.design.path.cp { fill: $fc-bg-light; }
|
||||
}
|
||||
|
||||
.theme-wrapper.light div.design {
|
||||
h6.path.c0 { background-color: rgba($oc-red-6, 0.3) }
|
||||
h6.path.c1 { background-color: rgba($oc-green-6, 0.3) }
|
||||
h6.path.c2 { background-color: rgba($oc-blue-6, 0.3) }
|
||||
h6.path.c3 { background-color: rgba($oc-grape-6, 0.3) }
|
||||
h6.path.c0 {
|
||||
background-color: rgba($oc-red-6, 0.3);
|
||||
}
|
||||
h6.path.c1 {
|
||||
background-color: rgba($oc-green-6, 0.3);
|
||||
}
|
||||
h6.path.c2 {
|
||||
background-color: rgba($oc-blue-6, 0.3);
|
||||
}
|
||||
h6.path.c3 {
|
||||
background-color: rgba($oc-grape-6, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.theme-wrapper.dark svg.freesewing.draft {
|
||||
g.design.point {
|
||||
circle { fill: $fc-link-dark; }
|
||||
circle.hovertrap { stroke: $fc-link-dark; }
|
||||
circle {
|
||||
fill: $fc-link-dark;
|
||||
}
|
||||
circle.hovertrap {
|
||||
stroke: $fc-link-dark;
|
||||
}
|
||||
}
|
||||
path.design.hovertrap {
|
||||
stroke: $fc-link-dark;
|
||||
}
|
||||
circle.design.path.cp {
|
||||
fill: $fc-bg-dark;
|
||||
}
|
||||
path.focus.path {
|
||||
stroke-opacity: 0.5;
|
||||
}
|
||||
path.design.hovertrap { stroke: $fc-link-dark; }
|
||||
circle.design.path.cp { fill: $fc-bg-dark; }
|
||||
path.focus.path { stroke-opacity: 0.5; }
|
||||
}
|
||||
|
||||
.theme-wrapper.dark div.design {
|
||||
h6.path.c0 { background-color: rgba($oc-red-6, 0.5) }
|
||||
h6.path.c1 { background-color: rgba($oc-green-6, 0.5) }
|
||||
h6.path.c2 { background-color: rgba($oc-blue-6, 0.5) }
|
||||
h6.path.c3 { background-color: rgba($oc-grape-6, 0.5) }
|
||||
h6.path.c0 {
|
||||
background-color: rgba($oc-red-6, 0.5);
|
||||
}
|
||||
h6.path.c1 {
|
||||
background-color: rgba($oc-green-6, 0.5);
|
||||
}
|
||||
h6.path.c2 {
|
||||
background-color: rgba($oc-blue-6, 0.5);
|
||||
}
|
||||
h6.path.c3 {
|
||||
background-color: rgba($oc-grape-6, 0.5);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,11 +26,15 @@ header.navbar {
|
|||
div.emblem {
|
||||
margin-right: 26px;
|
||||
a {
|
||||
text-decoration: none!important;
|
||||
@include title-font;
|
||||
text-decoration: none !important;
|
||||
@include button-font;
|
||||
font-size: 26px;
|
||||
span.lem { color: $oc-gray-2; }
|
||||
span.emb { color: $fc-link-dark; }
|
||||
span.lem {
|
||||
color: $oc-gray-2;
|
||||
}
|
||||
span.emb {
|
||||
color: $fc-link-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.spread {
|
||||
|
|
@ -41,18 +45,18 @@ header.navbar {
|
|||
a.nav,
|
||||
button {
|
||||
@include title-font;
|
||||
text-decoration: none!important;
|
||||
text-decoration: none !important;
|
||||
margin: 0;
|
||||
padding: 0 13px;
|
||||
height: 60px;
|
||||
color: $fc-text-dark!important;
|
||||
color: $fc-text-dark !important;
|
||||
border: 0;
|
||||
line-height: 64px;
|
||||
border-bottom: 4px solid $fc-bg-dark;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease, border-color 0.2s ease-in-out;
|
||||
background:none;
|
||||
background: none;
|
||||
}
|
||||
button {
|
||||
/* For buttons, border does not count for height */
|
||||
|
|
@ -83,7 +87,6 @@ header.navbar > div {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
@include xs-screen {
|
||||
header.navbar {
|
||||
display: none;
|
||||
|
|
@ -95,29 +98,29 @@ header.navbar > div {
|
|||
height: 54px;
|
||||
width: calc(100% - 36px);
|
||||
padding: 0 18px;
|
||||
> div {
|
||||
height: 54px;
|
||||
}
|
||||
div.logo,
|
||||
div.emblem {
|
||||
margin-right: 12px;
|
||||
}
|
||||
div.logo a {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
div.emblem a {
|
||||
> div {
|
||||
height: 54px;
|
||||
}
|
||||
div.logo,
|
||||
div.emblem {
|
||||
margin-right: 12px;
|
||||
}
|
||||
div.logo a {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
div.emblem a {
|
||||
font-size: 22px;
|
||||
}
|
||||
a.nav {
|
||||
padding: 0 6px;
|
||||
line-height: 54px;
|
||||
height: 50px;
|
||||
}
|
||||
button {
|
||||
padding: 0 6px;
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
}
|
||||
}
|
||||
a.nav {
|
||||
padding: 0 6px;
|
||||
line-height: 54px;
|
||||
height: 50px;
|
||||
}
|
||||
button {
|
||||
padding: 0 6px;
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
ul.ais-Hits-list {
|
||||
padding-left: 0;
|
||||
li { list-style-type: none; }
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
div.path a {
|
||||
@include title-font;
|
||||
@include button-font;
|
||||
font-size: 95%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
footer {
|
||||
@include title-font;
|
||||
@include button-font;
|
||||
font-size: 90%;
|
||||
background: $fc-bg-dark;
|
||||
color: $fc-text-dark;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
// Data tables
|
||||
table.data {
|
||||
@include title-font;
|
||||
@include button-font;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.data tr {
|
||||
|
|
@ -31,4 +31,3 @@ table.data tbody tr.neckcircumference td {
|
|||
.theme-wrapper.dark table.data tr:nth-child(even) {
|
||||
background-color: $oc-gray-8;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ div.fs-sa {
|
|||
margin-left: -1rem;
|
||||
margin-right: 0;
|
||||
padding: 0.25rem 0 0 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
h5,
|
||||
|
|
@ -54,7 +55,13 @@ div.fs-sa {
|
|||
list-style-type: none;
|
||||
}
|
||||
li > a {
|
||||
padding: 0.25rem 1rem 0.25rem 1rem;
|
||||
padding: 0.25rem 1rem 0.25rem 1.5rem;
|
||||
}
|
||||
li > a.level-2 {
|
||||
padding: 0.125rem 0.25rem 0.125rem 2.25rem;
|
||||
}
|
||||
li > a.level-3 {
|
||||
padding: 0 0.25rem 0 3.75rem;
|
||||
}
|
||||
}
|
||||
aside ul.aside-main-menu {
|
||||
|
|
@ -86,7 +93,7 @@ div.fs-sa {
|
|||
}
|
||||
|
||||
.theme-wrapper.light > div.fs-sa > aside > div.sticky {
|
||||
ul.aside-main-menu li {
|
||||
ul li {
|
||||
a {
|
||||
color: $oc-gray-7;
|
||||
svg {
|
||||
|
|
@ -118,7 +125,7 @@ div.fs-sa {
|
|||
}
|
||||
|
||||
.theme-wrapper.dark > div.fs-sa > aside > div.sticky {
|
||||
ul.aside-main-menu li {
|
||||
ul li {
|
||||
a {
|
||||
color: $oc-gray-4;
|
||||
svg {
|
||||
|
|
@ -207,26 +214,37 @@ div.fs-sa {
|
|||
|
||||
@include xs-screen {
|
||||
ul.aside-main-menu {
|
||||
margin: 0 0 1rem;
|
||||
list-style-type: none;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
li a span.text {
|
||||
display: none;
|
||||
}
|
||||
li {
|
||||
display: inline;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Roboto condensed';
|
||||
line-height: 2;
|
||||
font-size: 1rem;
|
||||
font-size: 1.25rem;
|
||||
a {
|
||||
padding: 0.15rem 0;
|
||||
color: inherit;
|
||||
font-weight: 900;
|
||||
padding: 0.25rem 0;
|
||||
display: block;
|
||||
svg {
|
||||
margin: 5px 0.5rem -5px;
|
||||
margin: 5px 1rem -5px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-wrapper.light ul.aside-main-menu {
|
||||
li a {
|
||||
color: $oc-gray-9 !important;
|
||||
}
|
||||
}
|
||||
.theme-wrapper.dark ul.aside-main-menu {
|
||||
li a {
|
||||
color: $oc-gray-0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
div.fs-sa {
|
||||
> section {
|
||||
width: calc(100% - 2rem);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue