VSinerva/freesewing
1
0
Fork 0
Code Activity

🚧 Progress on workbench

Browse source
This commit is contained in:
Joost De Cock 2019-05-05 17:06:22 +02:00
parent 1a8fe110f8
commit 158c19ae1d
101 changed files with 1222 additions and 200 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/css-theme/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@freesewing/css-theme",
"version": "2.0.0-alpha.18",
"version": "2.0.0-alpha.19",
"description": "A CSS theme for FreeSewing web UIs",
"author": "Joost De Cock <joost@decock.org> (https://github.com/joostdecock)",
"homepage": "https://freesewing.org/",

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

@ -1,3 +1,4 @@
@import "components/emblem";
@import "components/navbar";
@import "components/draft";
@import "components/draft-configurator";

2
packages/css-theme/src/_elements.scss Normal file
View file

@ -0,0 +1,2 @@
@import "elements/a";
@import "elements/footer";

6
packages/css-theme/src/_scroll.scss Normal file
View file

@ -0,0 +1,6 @@
// Smooth scrolling by default
html { scroll-behavior: smooth; }
// But let people override it
@media screen and (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}

9
packages/css-theme/src/_dark.scss → packages/css-theme/src/_theme-wrapper.scss
View file

@ -1,7 +1,10 @@
.theme-wrapper {
margin-top: 0;
padding-top: 64px;
min-height: calc(100vh - 64px);
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.theme-wrapper.light {

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

@ -8,6 +8,24 @@ $fc-hoverbg-light: $oc-gray-1;
$fc-hoverbg-dark: $oc-gray-8;
$fc-accentbg-light: $oc-teal-5;
$fc-accentbg-dark: $oc-teal-8;
$fc-link-light: $oc-teal-8;
$fc-link-light: $oc-blue-6;
$fc-link-dark: $oc-blue-3;
$fc-draft-lining-light: $oc-teal-6;
$fc-draft-fabric-light: $oc-gray-9;
$fc-draft-canvas-light: $oc-yellow-7;
$fc-draft-interfacing-light: $oc-gray-6;
$fc-draft-various-light: $oc-pink-5;
$fc-draft-mark-light: $oc-indigo-6;
$fc-draft-contrast-light: $oc-orange-7;
$fc-draft-note-light: $oc-blue-7;
$fc-draft-lining-dark: $oc-teal-6;
$fc-draft-fabric-dark: $oc-gray-9;
$fc-draft-canvas-dark: $oc-yellow-7;
$fc-draft-interfacing-dark: $oc-gray-6;
$fc-draft-various-dark: $oc-pink-5;
$fc-draft-mark-dark: $oc-indigo-6;
$fc-draft-contrast-dark: $oc-orange-7;
$fc-draft-note-dark: $oc-blue-7;

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

@ -0,0 +1,108 @@
svg.freesewing.draft {
max-width: 100%;
max-height: 90vh;
/* Reset */
path,circle,rect{fill:none;stroke:none}
/* Defaults */
path,circle{
stroke-opacity:1;
stroke-width:.7;
stroke-linecap:round;
stroke-linejoin:round;
}
/* Stroke classes */
.note{ stroke-width:.8; }
.mark{ stroke-width:.8; }
.contrast{ stroke-width:1.2; }
.stroke-xs{ stroke-width:.5; }
.stroke-sm{ stroke-width:.5; }
.stroke-xl{ stroke-width:1.4; }
.stroke-xxl{ stroke-width:2.4; }
.sa { stroke-dasharray:1,3; }
.help {
stroke-width:.6;
stroke-dasharray:15,5,2,5;
}
.dotted { stroke-dasharray:2,3; }
.dashed { stroke-dasharray:2,5; }
.lashed { stroke-dasharray:8,8; }
.hidden {
stroke:none;
fill:none;
}
/* Sampling */
path.sample-focus {stroke-width: 1.5; fill: rgba(0,0,0,0.1)}
/* Text */
text{
font-size:6px;
@include title-font;
text-anchor:start;
font-weight:200;
dominant-baseline:ideographic;
}
.text-xs { font-size:4px; }
.text-sm { font-size:5px; }
.text-lg { font-size:8px; }
.text-xl { font-size:10px; }
.text-xxl{ font-size:13px; }
.center{ text-anchor:middle; }
.right{ text-anchor:end; }
/* Plugins */
text.title-nr {
font-size: 32px;
@include title-font;
font-weight: bold;
stroke: none;
}
}
.theme-wrapper.light svg.freesewing.draft {
/* Stroke classes */
path,circle{ stroke: $fc-draft-fabric-light; }
.fabric{ stroke: $fc-draft-fabric-light; }
.lining{ stroke: $fc-draft-lining-light; }
.interfacing{ stroke: $fc-draft-interfacing-light; }
.canvas{ stroke: $fc-draft-canvas-light; }
.various{ stroke: $fc-draft-various-light; }
.mark{ stroke: $fc-draft-mark-light; }
.contrast{ stroke: $fc-draft-contrast-light; }
.note{ stroke: $fc-draft-note-light; }
/* Fill classes */
.fill-fabric{ fill: $fc-draft-fabric-light; }
.fill-lining{ fill: $fc-draft-lining-light; }
.fill-interfacing{ fill: $fc-draft-interfacing-light; }
.fill-canvas{ fill: $fc-draft-canvas-light; }
.fill-various{ fill: $fc-draft-various-light; }
.fill-mark{ fill: $fc-draft-mark-light; }
.fill-contrast{ fill: $fc-draft-contrast-light; }
.fill-note{ fill: $fc-draft-note-light; }
}
.theme-wrapper.dark svg.freesewing.draft {
/* Stroke classes */
path,circle{ stroke: $fc-draft-fabric-dark; }
.fabric{ stroke: $fc-draft-fabric-dark; }
.lining{ stroke: $fc-draft-lining-dark; }
.interfacing{ stroke: $fc-draft-interfacing-dark; }
.canvas{ stroke: $fc-draft-canvas-dark; }
.various{ stroke: $fc-draft-various-dark; }
.mark{ stroke: $fc-draft-mark-dark; }
.contrast{ stroke: $fc-draft-contrast-dark; }
.note{ stroke: $fc-draft-note-dark; }
/* Fill classes */
.fill-fabric{ fill: $fc-draft-fabric-dark; }
.fill-lining{ fill: $fc-draft-lining-dark; }
.fill-interfacing{ fill: $fc-draft-interfacing-dark; }
.fill-canvas{ fill: $fc-draft-canvas-dark; }
.fill-various{ fill: $fc-draft-various-dark; }
.fill-mark{ fill: $fc-draft-mark-dark; }
.fill-contrast{ fill: $fc-draft-contrast-dark; }
.fill-note{ fill: $fc-draft-note-dark; }
}

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

@ -1,7 +1,4 @@
header.navbar {
position: fixed;
top: 0;
left: 0;
height: 64px;
width: calc(100% - 52px);
margin: 0;
@ -17,9 +14,11 @@ header.navbar {
display: flex;
align-items: center;
color: $oc-gray-2;
a { text-decoration: none; }
}
div.emblem {
margin-right: 26px;
a { text-decoration: none; }
}
div.spread { flex-grow: 1}
a.nav,
@ -44,10 +43,12 @@ header.navbar {
button:hover,
a.nav:hover {
cursor: pointer;
color: $fc-link-dark;
border-color: $fc-link-dark;
}
button:hover,
a.nav:hover,
button.active,
a.nav.active {
color: $fc-link-dark;
border-color: $fc-link-dark;
}
svg.nav-icon {

12
packages/css-theme/src/elements/_a.scss Normal file
View file

@ -0,0 +1,12 @@
.theme-wrapper a {
text-decoration: none;
}
.theme-wrapper a:hover {
text-decoration: underline;
}
.theme-wrapper.light a {
color: $fc-link-light;
}
.theme-wrapper.dark a {
color: $fc-link-dark;
}

19
packages/css-theme/src/elements/_footer.scss Normal file
View file

@ -0,0 +1,19 @@
footer {
background: $fc-bg-dark;
color: $fc-text-dark;
margin: 0;
padding: 4rem 1rem;
text-align: center;
a { color: $fc-text-dark!important; }
a:hover { color: $fc-link-dark!important; }
a.gitter:hover { color: #ed1965!important; }
a.twitter:hover { color: #1da1f2!important; }
a.github:hover { color: #6cc644!important; }
a.instagram:hover { color: #e1306c!important; }
a.facebook:hover { color: #3b5998!important; }
ul {
margin: 0;
padding: 0;
}
li { list-style-type: none; }
}

6
packages/css-theme/src/layout/_section-aside.scss
View file

@ -10,14 +10,14 @@ div.fs-sa {
max-width: 400px;
min-width: 200px;
width: 30%;
height: 100%;
min-height: calc(120vh - 64px);
background: $oc-gray-1;
border-left: 1px solid $oc-gray-3;
}
aside div.sticky {
position: sticky;
top: calc(64px + 1rem);
top: 1rem;
height: 100vh;
overflow-y: scroll;
}
}

4
packages/css-theme/src/theme.scss
View file

@ -2,6 +2,8 @@
@import '../../../node_modules/open-color/open-color.scss';
@import "variables";
@import "mixins";
@import "dark";
@import "theme-wrapper";
@import "layout";
@import "scroll";
@import "components";
@import "elements";