wip(fs.dev): Theme changes and breadcrumbs fix
This commit is contained in:
Joost De Cock
parent
b731cabf28
commit
f59d4ed9fd
11 changed files with 542 additions and 37 deletions
|
|
@ -3,6 +3,7 @@
|
|||
@tailwind utilities;
|
||||
|
||||
@import './code.css';
|
||||
@import './svg-freesewing-draft.css';
|
||||
|
||||
/* Applied styles for common HTML tags */
|
||||
@layer components {
|
||||
|
|
|
|||
395
packages/freesewing.shared/styles/svg-freesewing-draft.css
Normal file
395
packages/freesewing.shared/styles/svg-freesewing-draft.css
Normal file
|
|
@ -0,0 +1,395 @@
|
|||
svg.freesewing.draft {
|
||||
max-width: 100%;
|
||||
/* Reset */
|
||||
path,
|
||||
circle {
|
||||
fill: none;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
/* Defaults */
|
||||
path,
|
||||
circle {
|
||||
stroke-opacity: 1;
|
||||
stroke-width: 0.7;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
/* Stroke classes */
|
||||
.stroke-xs {
|
||||
stroke-width: 0.1;
|
||||
}
|
||||
.stroke-sm {
|
||||
stroke-width: 0.4;
|
||||
}
|
||||
.stroke-lg {
|
||||
stroke-width: 1.3;
|
||||
}
|
||||
.stroke-xl {
|
||||
stroke-width: 2;
|
||||
}
|
||||
.stroke-xxl {
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
.sa {
|
||||
stroke-dasharray: 1, 3;
|
||||
}
|
||||
.help {
|
||||
stroke-width: 0.6;
|
||||
stroke-dasharray: 15, 5, 2, 5;
|
||||
}
|
||||
.dotted {
|
||||
stroke-dasharray: 0.5, 1;
|
||||
}
|
||||
.dashed {
|
||||
stroke-dasharray: 2, 2;
|
||||
}
|
||||
.lashed {
|
||||
stroke-dasharray: 8, 3;
|
||||
}
|
||||
.hidden {
|
||||
stroke: none !important;
|
||||
fill: none !important;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
text {
|
||||
font-size: 6px;
|
||||
@include title-font;
|
||||
text-anchor: start;
|
||||
font-weight: 400;
|
||||
dominant-baseline: ideographic;
|
||||
}
|
||||
.text-xs {
|
||||
font-size: 4px;
|
||||
}
|
||||
.text-sm {
|
||||
font-size: 5px;
|
||||
}
|
||||
.text-l {
|
||||
font-size: 8px;
|
||||
}
|
||||
.text-xl {
|
||||
font-size: 10px;
|
||||
}
|
||||
.text-xxl {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-anchor: middle;
|
||||
}
|
||||
.right {
|
||||
text-anchor: end;
|
||||
}
|
||||
|
||||
.scribble {
|
||||
@include scribble-font;
|
||||
}
|
||||
|
||||
/* Plugins */
|
||||
text.title-nr {
|
||||
font-size: 32px;
|
||||
@include title-font;
|
||||
font-weight: 700;
|
||||
stroke: none;
|
||||
}
|
||||
/* New style for sampled sizes */
|
||||
path.size-3XS,
|
||||
path.size-2XS,
|
||||
path.size-XS,
|
||||
path.size-S,
|
||||
path.size-M {
|
||||
stroke-width: 0.5;
|
||||
stroke-dasharray: 0.25 0.75;
|
||||
}
|
||||
path.made-to-measure,
|
||||
path.size-L,
|
||||
path.size-XL,
|
||||
path.size-2XL,
|
||||
path.size-3XL,
|
||||
path.size-4XL {
|
||||
stroke-width: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
svg.freesewing.draft text {
|
||||
fill: currentColor;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.fill-bg {
|
||||
fill: $fc-bg-light;
|
||||
}
|
||||
path.sample-focus {
|
||||
fill: #000;
|
||||
}
|
||||
/* scalebox plugin */
|
||||
path.scalebox.metric {
|
||||
stroke: none;
|
||||
fill: $fc-bg-light;
|
||||
}
|
||||
path.scalebox.imperial {
|
||||
stroke: none;
|
||||
fill: $fc-bg-dark;
|
||||
}
|
||||
path.bartack {
|
||||
stroke: $fc-draft-mark-light;
|
||||
}
|
||||
path.logo {
|
||||
fill: currentColor;
|
||||
stroke: none;
|
||||
}
|
||||
/* New style for sampled sizes */
|
||||
path.made-to-measure {
|
||||
stroke: #212529;
|
||||
}
|
||||
path.size-3XS {
|
||||
stroke: $oc-lime-6;
|
||||
}
|
||||
path.size-2XS {
|
||||
stroke: $oc-orange-6;
|
||||
}
|
||||
path.size-XS {
|
||||
stroke: $oc-grape-6;
|
||||
}
|
||||
path.size-S {
|
||||
stroke: $oc-indigo-6;
|
||||
}
|
||||
path.size-M {
|
||||
stroke: $oc-cyan-6;
|
||||
}
|
||||
path.size-L {
|
||||
stroke: $oc-indigo-6;
|
||||
}
|
||||
path.size-XL {
|
||||
stroke: $oc-grape-6;
|
||||
}
|
||||
path.size-2XL {
|
||||
stroke: $oc-orange-6;
|
||||
}
|
||||
path.size-3XL {
|
||||
stroke: $oc-lime-6;
|
||||
}
|
||||
path.size-4XL {
|
||||
stroke: $oc-teal-6;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.fill-bg {
|
||||
fill: $fc-bg-dark;
|
||||
}
|
||||
path.sample-focus {
|
||||
fill: #fff;
|
||||
}
|
||||
/* scalebox plugin */
|
||||
path.scalebox.metric {
|
||||
stroke: none;
|
||||
fill: $fc-bg-dark;
|
||||
}
|
||||
path.scalebox.imperial {
|
||||
stroke: none;
|
||||
fill: $fc-bg-light;
|
||||
}
|
||||
path.bartack {
|
||||
stroke: $fc-draft-mark-dark;
|
||||
}
|
||||
path.logo {
|
||||
fill: currentColor;
|
||||
stroke: none;
|
||||
}
|
||||
/* New style for sampled sizes */
|
||||
path.made-to-measure {
|
||||
stroke: #f8f9fa;
|
||||
}
|
||||
path.size-3XS {
|
||||
stroke: $oc-lime-3;
|
||||
}
|
||||
path.size-2XS {
|
||||
stroke: $oc-orange-3;
|
||||
}
|
||||
path.size-XS {
|
||||
stroke: $oc-grape-3;
|
||||
}
|
||||
path.size-S {
|
||||
stroke: $oc-indigo-3;
|
||||
}
|
||||
path.size-M {
|
||||
stroke: $oc-cyan-3;
|
||||
}
|
||||
path.size-L {
|
||||
stroke: $oc-indigo-3;
|
||||
}
|
||||
path.size-XL {
|
||||
stroke: $oc-grape-3;
|
||||
}
|
||||
path.size-2XL {
|
||||
stroke: $oc-orange-3;
|
||||
}
|
||||
path.size-3XL {
|
||||
stroke: $oc-lime-3;
|
||||
}
|
||||
path.size-4XL {
|
||||
stroke: $oc-teal-3;
|
||||
}
|
||||
}
|
||||
|
||||
/* SVG defs (snippets) are in the shadow DOM */
|
||||
g.snippet.notch > circle,
|
||||
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;
|
||||
stroke: currentColor;
|
||||
}
|
||||
path.gridline {
|
||||
stroke-linecap: butt;
|
||||
stroke-width: 0.3 !important;
|
||||
stroke-dasharray: none;
|
||||
}
|
||||
path.gridline.sm {
|
||||
stroke-width: 0.15 !important;
|
||||
}
|
||||
path.gridline.xs {
|
||||
stroke-width: 0.1 !important;
|
||||
}
|
||||
path.gridline.metric.sm {
|
||||
stroke-dasharray: 3 1;
|
||||
}
|
||||
path.gridline.metric.xs {
|
||||
stroke-dasharray: 1 1;
|
||||
}
|
||||
path.gridline.imperial {
|
||||
stroke-dasharray: 5 5;
|
||||
}
|
||||
path.gridline.imperial.sm {
|
||||
stroke-dasharray: 2 2;
|
||||
}
|
||||
.light {
|
||||
rect.grid,
|
||||
path.gridline {
|
||||
color: $oc-gray-5 !important;
|
||||
}
|
||||
}
|
||||
.dark {
|
||||
rect.grid,
|
||||
path.gridline {
|
||||
color: $oc-gray-6 !important;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue