@less/test-data 4.3.0 → 4.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/_main/colors.css +36 -0
- package/css/_main/layer.css +71 -0
- package/less/_main/colors.less +48 -0
- package/less/_main/import/layer-import-2.css +5 -0
- package/less/_main/import/layer-import-3.css +0 -0
- package/less/_main/import/layer-import-4.css +5 -0
- package/less/_main/import/layer-import-5.css +5 -0
- package/less/_main/import/layer-import.less +5 -0
- package/less/_main/layer.less +87 -0
- package/package.json +1 -1
package/css/_main/colors.css
CHANGED
|
@@ -102,3 +102,39 @@
|
|
|
102
102
|
--semi-transparent-dark-background: #001e00ee;
|
|
103
103
|
--semi-transparent-dark-background-2: #001e00;
|
|
104
104
|
}
|
|
105
|
+
.color-oklch-sub {
|
|
106
|
+
background: oklch(from #0000FF calc(l - 0.1) c h);
|
|
107
|
+
}
|
|
108
|
+
.color-oklch-add {
|
|
109
|
+
background: oklch(from #0000FF calc(l + 0.1) c h);
|
|
110
|
+
}
|
|
111
|
+
.color-oklch-mult {
|
|
112
|
+
background: oklch(from #0000FF calc(l * 0.1) c h);
|
|
113
|
+
}
|
|
114
|
+
.color-oklch-div {
|
|
115
|
+
background: oklch(from #0000FF calc(l / 2) c h);
|
|
116
|
+
}
|
|
117
|
+
.color-hsl-sub {
|
|
118
|
+
background: hsl(from #0000FF calc(h - 1) s l);
|
|
119
|
+
}
|
|
120
|
+
.color-hsl-add {
|
|
121
|
+
background: hsl(from #0000FF calc(h + 1) s l);
|
|
122
|
+
}
|
|
123
|
+
.color-hsl-mult {
|
|
124
|
+
background: hsl(from #0000FF calc(h * 1) s l);
|
|
125
|
+
}
|
|
126
|
+
.color-hsl-div {
|
|
127
|
+
background: hsl(from #0000FF calc(h / 2) s l);
|
|
128
|
+
}
|
|
129
|
+
.color-rgb-sub {
|
|
130
|
+
background: rgb(from #0000FF calc(r - 1) g b);
|
|
131
|
+
}
|
|
132
|
+
.color-rgb-add {
|
|
133
|
+
background: rgb(from #0000FF calc(r + 1) g b);
|
|
134
|
+
}
|
|
135
|
+
.color-rgb-mult {
|
|
136
|
+
background: rgb(from #0000FF calc(r * 1) g b);
|
|
137
|
+
}
|
|
138
|
+
.color-rgb-div {
|
|
139
|
+
background: rgb(from #0000FF calc(r / 2) g b);
|
|
140
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
@import url("/import/layer-import-2.css") layer(foo);
|
|
2
|
+
@import url("/import/layer-import-3.css") layer(responsive) supports(display: flex) screen and (max-width: 768px);
|
|
3
|
+
@import url("/import/layer-import-4.css") layer(print) print;
|
|
4
|
+
@import url("/import/layer-import-4.css") layer(print) print, (max-width: 600px);
|
|
5
|
+
@import url("/import/layer-import-5.css") layer(features) supports(display: grid);
|
|
6
|
+
@layer {
|
|
7
|
+
.main::before {
|
|
8
|
+
color: #f00;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
@layer legacy {
|
|
12
|
+
.sub-rule ul {
|
|
13
|
+
color: white;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
@layer primevue {
|
|
17
|
+
.test {
|
|
18
|
+
foo: bar;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
@layer reset, base, components, utilities;
|
|
22
|
+
@layer reset {
|
|
23
|
+
*,
|
|
24
|
+
*::before,
|
|
25
|
+
*::after {
|
|
26
|
+
box-sizing: border-box;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
@layer base {
|
|
30
|
+
body {
|
|
31
|
+
margin: 0;
|
|
32
|
+
font-family: system-ui, sans-serif;
|
|
33
|
+
}
|
|
34
|
+
body header {
|
|
35
|
+
background-color: #f0f0f0;
|
|
36
|
+
padding: 1rem;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
@layer components {
|
|
40
|
+
.button {
|
|
41
|
+
display: inline-block;
|
|
42
|
+
padding: 0.5rem 1rem;
|
|
43
|
+
background-color: blue;
|
|
44
|
+
color: white;
|
|
45
|
+
}
|
|
46
|
+
.button:hover {
|
|
47
|
+
background-color: darkblue;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
@layer utilities {
|
|
51
|
+
.text-center {
|
|
52
|
+
text-align: center;
|
|
53
|
+
}
|
|
54
|
+
.responsive {
|
|
55
|
+
width: 100%;
|
|
56
|
+
}
|
|
57
|
+
@media (min-width: 768px) {
|
|
58
|
+
.responsive {
|
|
59
|
+
width: 50%;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
.parent {
|
|
64
|
+
color: black;
|
|
65
|
+
}
|
|
66
|
+
.parent .child {
|
|
67
|
+
color: red;
|
|
68
|
+
}
|
|
69
|
+
.parent:hover {
|
|
70
|
+
background: lightgray;
|
|
71
|
+
}
|
package/less/_main/colors.less
CHANGED
|
@@ -114,3 +114,51 @@
|
|
|
114
114
|
--semi-transparent-dark-background: #001e00ee;
|
|
115
115
|
--semi-transparent-dark-background-2: rgba(0, 30, 0, 238); // invalid opacity will be capped
|
|
116
116
|
}
|
|
117
|
+
|
|
118
|
+
.color-oklch-sub {
|
|
119
|
+
background: oklch(from #0000FF calc(l - 0.1) c h);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.color-oklch-add {
|
|
123
|
+
background: oklch(from #0000FF calc(l + 0.1) c h);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.color-oklch-mult {
|
|
127
|
+
background: oklch(from #0000FF calc(l * 0.1) c h);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.color-oklch-div {
|
|
131
|
+
background: oklch(from #0000FF calc(l / 2) c h);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.color-hsl-sub {
|
|
135
|
+
background: hsl(from #0000FF calc(h - 1) s l);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.color-hsl-add {
|
|
139
|
+
background: hsl(from #0000FF calc(h + 1) s l);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.color-hsl-mult {
|
|
143
|
+
background: hsl(from #0000FF calc(h * 1) s l);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.color-hsl-div {
|
|
147
|
+
background: hsl(from #0000FF calc(h / 2) s l);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.color-rgb-sub {
|
|
151
|
+
background: rgb(from #0000FF calc(r - 1) g b);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.color-rgb-add {
|
|
155
|
+
background: rgb(from #0000FF calc(r + 1) g b);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.color-rgb-mult {
|
|
159
|
+
background: rgb(from #0000FF calc(r * 1) g b);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.color-rgb-div {
|
|
163
|
+
background: rgb(from #0000FF calc(r / 2) g b);
|
|
164
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
.main {
|
|
2
|
+
@layer {
|
|
3
|
+
&::before {
|
|
4
|
+
color: #f00;
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@layer legacy {
|
|
10
|
+
@import "./import/layer-import.less";
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@import url("/import/layer-import-2.css") layer(foo);
|
|
14
|
+
@import url("/import/layer-import-3.css") layer(responsive) supports(display: flex) screen and (max-width: 768px);
|
|
15
|
+
@import url("/import/layer-import-4.css") layer(print) print;
|
|
16
|
+
@import url("/import/layer-import-4.css") layer(print) print, (max-width: 600px);
|
|
17
|
+
@import url("/import/layer-import-5.css") layer(features) supports(display: grid);
|
|
18
|
+
|
|
19
|
+
@layer-name: primevue;
|
|
20
|
+
|
|
21
|
+
@layer @layer-name {
|
|
22
|
+
.test {
|
|
23
|
+
foo: bar;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@layer reset, base, components, utilities;
|
|
28
|
+
|
|
29
|
+
@layer reset {
|
|
30
|
+
|
|
31
|
+
*,
|
|
32
|
+
*::before,
|
|
33
|
+
*::after {
|
|
34
|
+
box-sizing: border-box;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@layer base {
|
|
39
|
+
body {
|
|
40
|
+
margin: 0;
|
|
41
|
+
font-family: system-ui, sans-serif;
|
|
42
|
+
|
|
43
|
+
header {
|
|
44
|
+
background-color: #f0f0f0;
|
|
45
|
+
padding: 1rem;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@layer components {
|
|
51
|
+
.button {
|
|
52
|
+
display: inline-block;
|
|
53
|
+
padding: 0.5rem 1rem;
|
|
54
|
+
background-color: blue;
|
|
55
|
+
color: white;
|
|
56
|
+
|
|
57
|
+
&:hover {
|
|
58
|
+
background-color: darkblue;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@layer utilities {
|
|
64
|
+
.text-center {
|
|
65
|
+
text-align: center;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.responsive {
|
|
69
|
+
width: 100%;
|
|
70
|
+
|
|
71
|
+
@media (min-width: 768px) {
|
|
72
|
+
width: 50%;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.parent {
|
|
78
|
+
color: black;
|
|
79
|
+
|
|
80
|
+
.child {
|
|
81
|
+
color: red;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&:hover {
|
|
85
|
+
background: lightgray;
|
|
86
|
+
}
|
|
87
|
+
}
|