Skip to content

Commit ead4bee

Browse files
dli7319dli7319
committed
Use lit-css-loader
1 parent 3cd496e commit ead4bee

18 files changed

+1250
-245
lines changed

‎package-lock.json

Lines changed: 1041 additions & 26 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"clamp": "^1.0.1",
3030
"color-convert": "^2.0.1",
3131
"lit": "^3.2.1",
32+
"lit-css-loader": "^3.0.1",
3233
"ts-loader": "^9.5.2",
3334
"ts-node": "^10.9.2",
3435
"typescript": "^4.9.5",

‎src/ColorConverter.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators.js";
44
import { bootstrap } from "./styles/Bootstrap";
55
import { Color } from "./Color";
66
import { Coordinates } from "./Coordinates";
7-
import { styles } from "./styles/ColorConverter";
7+
import { styles } from "./styles/ColorConverter.css";
88
import { ColorPickerSetColorEvent } from "./ColorPickerSetColorEvent";
99
import {
1010
ColorConverterInput,

‎src/ColorInterpolation.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { customElement, property } from "lit/decorators.js";
33

44
import { Color, ColorLerpMode } from "./Color";
55
import { ColorGradient } from "./ColorGradient";
6-
import { styles } from "./styles/ColorInterpolation";
6+
import { styles } from "./styles/ColorInterpolation.css";
77
import { bootstrap } from "./styles/Bootstrap";
88
import { ColorPickerSetColorEvent } from "./ColorPickerSetColorEvent";
99
import { ColorPickerSetInterpolationActiveEvent } from "./ColorPickerSetInterpolationActiveEvent";

‎src/ColorPicker.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { customElement, state } from "lit/decorators.js";
44
import { Color, ColorInputType } from "./Color";
55
import { Coordinates } from "./Coordinates";
66
import { ActiveColorSide, ColorInterpolation } from "./ColorInterpolation";
7-
import { styles } from "./styles/ColorPicker";
7+
import { styles } from "./styles/ColorPicker.css";
88
import { bootstrap } from "./styles/Bootstrap";
99
import { ColorPickerSetColorEvent } from "./ColorPickerSetColorEvent";
1010
import { ColorPickerSetCoordinatesEvent } from "./ColorPickerSetCoordinatesEvent";

‎src/ColorSelection.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { customElement, property } from "lit/decorators.js";
33
import clamp from "clamp";
44

55
import { Color, ColorInputType } from "./Color";
6-
import { styles } from "./styles/ColorSelection";
6+
import { styles } from "./styles/ColorSelection.css";
77
import { bootstrap } from "./styles/Bootstrap";
88
import { ColorPickerSetColorEvent } from "./ColorPickerSetColorEvent";
99

‎src/ImageSampling.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { html, LitElement } from "lit";
22
import { customElement, property, state } from "lit/decorators.js";
33
import { createRef, ref, Ref } from "lit/directives/ref.js";
44

5-
import { styles } from "./styles/ImageSampling";
5+
import { styles } from "./styles/ImageSampling.css";
66
import { bootstrap } from "./styles/Bootstrap";
77
import { Color, ColorInputType } from "./Color";
88
import { Coordinates } from "./Coordinates";

‎src/styles/ColorConverter.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.inputs-container {
2+
gap: 0.25rem;
3+
}
4+
5+
table > * {
6+
--bs-table-bg: transparent;
7+
}

‎src/styles/ColorConverter.ts

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/styles/ColorInterpolation.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.color-selection {
2+
width: 2rem;
3+
height: 2rem;
4+
background-color: red;
5+
border-radius: 10%;
6+
margin: 0 auto;
7+
}
8+
9+
.color-selection.rightColor {
10+
background-color: white;
11+
}
12+
13+
.color-selection.active {
14+
border: black dashed 0.2rem;
15+
}
16+
17+
.gradient {
18+
width: 100%;
19+
height: 2rem;
20+
background-image: linear-gradient(to right, red, white);
21+
}
22+
23+
.table th {
24+
width: 1rem;
25+
}
26+
27+
table > * {
28+
--bs-table-bg: transparent;
29+
}

‎src/styles/ColorInterpolation.ts

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎src/styles/ColorPicker.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
:host {
2+
display: block;
3+
width: 100%;
4+
height: 100%;
5+
}
6+
7+
.main-container {
8+
--gap: 1rem;
9+
gap: var(--gap);
10+
padding: var(--gap);
11+
}
12+
13+
::slotted(*) {
14+
border-radius: 1rem;
15+
background: #eee;
16+
padding: 1rem;
17+
text-align: center;
18+
flex: 1 1 30%;
19+
display: flex;
20+
flex-direction: column;
21+
}

‎src/styles/ColorPicker.ts

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎src/styles/ColorSelection.css

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
.color-grad-container {
2+
width: 100%;
3+
position: relative;
4+
min-height: 10rem;
5+
min-width: 10rem;
6+
flex-grow: 1;
7+
}
8+
9+
.color-grad {
10+
position: absolute;
11+
width: 100%;
12+
height: 100%;
13+
margin-left: auto;
14+
margin-right: auto;
15+
left: 0;
16+
right: 0;
17+
}
18+
19+
.color-grad-1 {
20+
z-index: 0;
21+
background: linear-gradient(to right, #ffffff 0%, #f00 100%);
22+
}
23+
24+
.color-grad-2 {
25+
z-index: 1;
26+
background: linear-gradient(to bottom, #ffffff00 0%, #000 100%);
27+
}
28+
29+
.color-grad-circle {
30+
z-index: 2;
31+
position: absolute;
32+
width: 1rem;
33+
height: 1rem;
34+
border-radius: 99rem;
35+
border-style: solid;
36+
border-color: black;
37+
border-width: 0.1rem;
38+
pointer-events: none;
39+
}
40+
41+
.color-bar {
42+
width: 100%;
43+
height: 1.5rem;
44+
margin-top: 0.5rem;
45+
border-radius: 0.25rem;
46+
background: linear-gradient(
47+
to right,
48+
#f00 0%,
49+
#ff0 17%,
50+
#0f0 33%,
51+
#0ff 50%,
52+
#00f 66%,
53+
#f0f 83%,
54+
#f00 100%
55+
);
56+
}
57+
58+
.color-bar-pointer {
59+
height: 0;
60+
width: 0;
61+
border-left: 0.4em solid transparent;
62+
border-right: 0.4em solid transparent;
63+
border-bottom: 0.5em solid black;
64+
position: relative;
65+
transform: translateX(-50%);
66+
top: 60%;
67+
}
68+
69+
.color-bar-pointer-2 {
70+
height: 0;
71+
width: 0;
72+
border-left: 0.4em solid black;
73+
border-right: 0.4em solid black;
74+
border-bottom: 0.4em solid black;
75+
position: absolute;
76+
transform: translateX(-50%);
77+
top: 0.5em;
78+
}
79+
80+
.color-bar-pointer-3 {
81+
height: 0;
82+
width: 0;
83+
border-left: 0.3em solid transparent;
84+
border-right: 0.3em solid transparent;
85+
border-bottom: 0.375em solid;
86+
border-bottom-color: white;
87+
position: absolute;
88+
transform: translateX(-50%);
89+
top: 0.125em;
90+
}
91+
92+
.color-bar-pointer-4 {
93+
height: 0;
94+
width: 0;
95+
border-left: 0.3em solid white;
96+
border-right: 0.3em solid white;
97+
border-bottom: 0.3em solid white;
98+
position: absolute;
99+
transform: translateX(-50%);
100+
top: 0.5em;
101+
}

‎src/styles/ColorSelection.ts

Lines changed: 0 additions & 104 deletions
This file was deleted.

0 commit comments

Comments
 (0)