396 lines
6.4 KiB
CSS
396 lines
6.4 KiB
CSS
![]() |
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;
|
||
|
}
|
||
|
}
|