VSinerva/freesewing
1
0
Fork 0
Code Activity

🚧 Work on CSS

Browse source
This commit is contained in:
Joost De Cock 2019-05-25 11:12:06 +02:00
parent b02c6d1b68
commit 796dc1d7ec
8 changed files with 54 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/css-theme/src/_components.scss
View file

@ -6,3 +6,4 @@
@import "components/topicstoc";
@import "components/breadcrumbs";
@import "components/example";
@import "components/fab";

3
packages/css-theme/src/_mixins.scss
View file

@ -4,6 +4,9 @@
@mixin sm-screen {
@media (min-width: 600px) and (max-width: 959px) { @content; }
}
@mixin lg-screen {
@media (min-width: 960px) { @content; }
}
@mixin body-font { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
@mixin title-font { font-family: 'Roboto Condensed', sans-serif; }

10
packages/css-theme/src/_utility.scss
View file

@ -1,7 +1,13 @@
@include xs-screen {
.only-xs { display: inherit!important; }
.not-xs { display: none!important; }
.only-xs { display: inherit; }
}
.only-xs { display: none; }
@include sm-screen {
.not-xs { display: inherit; }
.only-xs { display: none!important; }
}
@include lg-screen {
.not-xs { display: inherit; }
.only-xs { display: none!important; }
}

1
packages/css-theme/src/_variables.scss
View file

@ -1,3 +1,4 @@
$fc-blue: "#74c0fc";
$fc-text-light: $oc-gray-9;
$fc-text-dark: $oc-gray-0;
$fc-bg-light: $oc-gray-0;

10
packages/css-theme/src/components/_draft.scss
View file

@ -129,12 +129,14 @@ svg.freesewing.draft text {
/* SVG defs (snippets) are in the shadow DOM */
g.snippet.notch > circle,
g.snippet.bnotch > circle,
g.snippet.bnotch > path,
g.snippet.utton > circle,
g.snippet.uttonhole > path {
g.snippet.button > circle,
g.snippet.buttonhole > path {
color: $fc-draft-mark-light;
}
g.snippet.bnotch > circle,
g.snippet.bnotch > path {
color: $fc-draft-note-light;
}
/* Same for paperless grid, also in shadow DOM */
rect.grid {
stroke-width: 1;

42
packages/css-theme/src/components/_example.scss
View file

@ -1,46 +1,22 @@
figure.example {
div.example {
position: relative;
svg.freesewing.draft {
box-shadow: 0 0 3px #0006;
}
div.actions {
position: absolute;
right: 5px;
bottom: 14px;
button {
display: block;
background: $fc-text-light;
color: $fc-bg-light;
padding: 5px;
margin: 5px;
}
button:hover {
background: $oc-green-7;
}
button.active {
background: $oc-green-7;
right: 0;
top: 0;
}
}
}
> div.design {
border-top: 2px solid $oc-gray-4;
border-bottom: 2px solid $oc-gray-4;
figure.design.example {
border: 1px solid $oc-gray-4;
svg.freesewing.draft.design {
border-bottom: 1px solid $oc-gray-4;
}
figcaption {
display: none;
}
}
.theme-wrapper.dark figure.example div.example {
svg.freesewing.draft {
box-shadow: none;
border: 1px solid $oc-gray-8;
}
div.actions {
button {
background: $fc-text-dark;
color: $fc-bg-light;
}
button.active {
background: $fc-text-dark;
}
}
}

22
packages/css-theme/src/components/_fab.scss Normal file
View file

@ -0,0 +1,22 @@
button.fab {
position: fixed;
bottom: 1rem;
width: 64px;
height: 64px!important;
background: $fc-text-light!important;
z-index: 20;
font-size: 2rem;
}
button.fab.primary {
right: 1rem;
}
button.fab.secondary {
right: calc(1rem + 69px);
background: $fc-link-light!important;
}
.theme-wrapper.dark button.fab {
background: $fc-text-dark!important;
}
.theme-wrapper.dark button.fab.secondary {
background: $fc-link-dark!important;
}

34
packages/css-theme/src/components/_navbar.scss
View file

@ -5,8 +5,7 @@ header.navbar {
padding: 0 26px;
background: $fc-bg-dark;
z-index: 15;
div.only-xs,
div.not-xs {
div {
align-items: center;
}
@ -87,36 +86,7 @@ header.navbar > div {
@include xs-screen {
header.navbar {
position: fixed;
bottom: 0;
left: 0;
height: 42px;
width: calc(100% - 26px);
padding: 0 13px;
> div {
height: 42px;
}
div.spread {
justify-content: center;
}
div.logo,
div.emblem {
margin-right: 12px;
}
div.logo a {
height: 32px;
width: 32px;
}
div.emblem a {
font-size: 22px;
}
a.nav,
button {
border: 0;
padding: 0 6px;
height: 42px;
line-height: 42px;
}
display: none;
}
}