pacem-less 0.50.0-jericho → 0.50.0-luxor

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.
Files changed (3) hide show
  1. package/pacem/ui/dark/tuner.less +61 -79
  2. package/pacem/ui/shared.less +12 -8
  3. package/package.json +1 -1
package/pacem/ui/dark/tuner.less CHANGED
@@ -6,29 +6,37 @@
6
6
  display: block;
7
7
  position: relative;
8
8
 
9
- &::part(@{PCSS}-tuner),
10
- canvas.@{PCSS}-tuner {
11
- width: 100%;
12
- height: 100%;
9
+ &::part(tuner) {
10
+ /*width: 100%;
11
+ height: 100%;*/
13
12
  position: absolute;
14
13
  display: block;
15
- // this maps to the background stroke of the ring
16
- border-color: fade(@color_default, 10);
17
- stroke: @color_default;
14
+ fill: none;
15
+ stroke-width: 10px;
16
+ overflow: visible;
17
+ }
18
18
 
19
- &.@{PCSS}-interactive {
20
- cursor: pointer;
21
- }
19
+ &.tuner-interactive::part(tuner) {
20
+ cursor: pointer;
21
+ }
22
+
23
+ &::part(rail) {
24
+ stroke: ~"var(--@{PCSS}-color-default)";
25
+ }
26
+
27
+ &::part(track) {
28
+ stroke: @color_border;
22
29
  }
23
30
 
24
- &::part(@{PCSS}-content),
25
- .@{PCSS}-content {
31
+ &.tuner-notrack::part(track) {
32
+ stroke: transparent;
33
+ }
34
+
35
+ &::part(content) {
26
36
  position: absolute;
27
37
  display: flex;
28
38
  align-items: center;
29
39
  justify-content: center;
30
- top: 0;
31
- left: 0;
32
40
  pointer-events: none;
33
41
  color: @color_default;
34
42
  //font-size: 2rem;
@@ -49,69 +57,34 @@
49
57
  &.tuner-large {
50
58
  .Tuner(2 * @grid_cell);
51
59
  }
52
- // coloring
53
- &.tuner-accent {
54
- &::part(@{PCSS}-tuner),
55
- canvas.@{PCSS}-tuner {
56
- stroke: @color_accent;
57
- }
58
- }
59
60
 
60
- &.tuner-warning {
61
- &::part(@{PCSS}-tuner),
62
- canvas.@{PCSS}-tuner {
63
- stroke: @color_warning;
64
- }
65
- }
66
-
67
- &.tuner-success {
68
- &::part(@{PCSS}-tuner),
69
- canvas.@{PCSS}-tuner {
70
- stroke: @color_success;
61
+ &.tuner-thin {
62
+ &::part(rail),
63
+ &::part(track) {
64
+ stroke-width: 3px;
71
65
  }
72
66
  }
67
+ // coloring
73
68
 
74
- &.tuner-danger {
75
- &::part(@{PCSS}-tuner),
76
- canvas.@{PCSS}-tuner {
77
- stroke: @color_danger;
78
- }
79
- }
80
69
 
81
- &.tuner-error {
82
- &::part(@{PCSS}-tuner),
83
- canvas.@{PCSS}-tuner {
84
- stroke: @color_error;
85
- }
86
- }
70
+ @colors: green, yellow, brown, red, pink, blue, orange, purple, teal, root, background, default, invert, primary, secondary, accent, info, success, warning, danger, error, disabled;
87
71
 
88
- &.tuner-primary {
89
- &::part(@{PCSS}-tuner),
90
- canvas.@{PCSS}-tuner {
91
- stroke: @color_primary;
72
+ // text
73
+ each(@colors, {
74
+ &.tuner-@{value}::part(rail){
75
+
76
+ stroke: ~"var(--@{PCSS}-color-@{value})";
92
77
  }
93
- }
94
-
95
- &.tuner-thin {
96
- &::part(@{PCSS}-tuner),
97
- canvas.@{PCSS}-tuner {
98
- stroke-width: 3px;
99
- }
100
- }
78
+ });
101
79
  }
102
80
 
103
81
  .TunerWrapper(@clr) {
104
82
  .GradientTuner(@clr);
105
- background-position: center center;
106
- background-repeat: no-repeat;
107
- background-size: 100%;
108
83
 
109
84
  @{P}-tuner {
110
85
 
111
- &::part(@{PCSS}-tuner),
112
- canvas.@{PCSS}-tuner {
113
- stroke-width: 3px !important;
114
- border-color: fade(@clr, 10);
86
+ &::part(track) {
87
+ stroke: rgba(@clr, 1);
115
88
  }
116
89
  }
117
90
  }
@@ -123,29 +96,38 @@
123
96
  transition: @easing_out_sine .25s;
124
97
  padding: @grid_spacing/3;
125
98
  display: flex;
126
- align-items:center;
99
+ align-items: center;
127
100
  justify-content: center;
128
- .TunerWrapper(@color_default);
101
+ .TunerWrapper(~"var(--@{PCSS}-color-default-rgb)");
129
102
 
130
- &.tuner-accent {
131
- .TunerWrapper(@color_accent);
132
- }
103
+ @{P}-tuner {
133
104
 
134
- &.tuner-warning {
135
- .TunerWrapper(@color_warning);
136
- }
105
+ &::part(tuner),
106
+ &::part(content) {
107
+ top: 1.5px;
108
+ left: $top;
109
+ width: ~"calc(100% - 3px)";
110
+ height: $width;
111
+ }
137
112
 
138
- &.tuner-success {
139
- .TunerWrapper(@color_success);
140
- }
113
+ &::part(rail),
114
+ &::part(track) {
115
+ stroke-width: 3px;
116
+ }
141
117
 
142
- &.tuner-danger {
143
- .TunerWrapper(@color_danger);
118
+ &::part(track) {
119
+ stroke-opacity: 0.1;
120
+ }
144
121
  }
145
122
 
146
- &.tuner-primary {
147
- .TunerWrapper(@color_primary);
148
- }
123
+ @colors: green, yellow, brown, red, pink, blue, orange, purple, teal, root, background, default, invert, primary, secondary, accent, info, success, warning, danger, error, disabled;
124
+
125
+ // text
126
+ each(@colors, {
127
+ &.tuner-@{value}{
128
+ .TunerWrapper(~"var(--@{PCSS}-color-@{value}-rgb)");
129
+ }
130
+ });
149
131
 
150
132
  &.tuner-disabled {
151
133
  background-size: 0%;
package/pacem/ui/shared.less CHANGED
@@ -89,7 +89,7 @@
89
89
  /* #region TUNER */
90
90
 
91
91
  .GradientTuner(@clr) {
92
- .GradientRadialContain(50%, 85%, 87%, 88%, 88%, 90%, 91%, 96%, 98%, 100%, fade(@clr, 0), fade(@clr, 20), fade(@clr, 50), fade(@clr, 0), fade(@clr, 0), fade(@clr, 10), fade(@clr, 10), fade(@clr, 0), fade(@clr, 25), fade(@clr, 0));
92
+ .GradientRadialContain(50%, 85%, 87%, 88%, 88%, 90%, 91%, 96%, 98%, 100%, rgba(@clr, 0), rgba(@clr, .20), rgba(@clr, .50), rgba(@clr, 0), rgba(@clr, 0), rgba(@clr, .10), rgba(@clr, .10), rgba(@clr, 0), rgba(@clr, .25), rgba(@clr, 0));
93
93
  }
94
94
 
95
95
  .Tuner(@size) {
@@ -97,17 +97,21 @@
97
97
  @_outer_radius: @size;
98
98
 
99
99
  width: @_outer_radius;
100
- height: @_outer_radius;
100
+ height: $width;
101
+
102
+ &::part(tuner),
103
+ &::part(content) {
104
+ top: @_thickness * .5;
105
+ left: $top;
106
+ width: @_outer_radius - @_thickness;
107
+ height: $width;
108
+ }
101
109
 
102
- &::part(@{PCSS}-tuner),
103
- canvas.@{PCSS}-tuner {
110
+ &::part(tuner) {
104
111
  stroke-width: @_thickness;
105
112
  }
106
113
 
107
- &::part(@{PCSS}-content),
108
- .@{PCSS}-content {
109
- width: @_outer_radius;
110
- height: @_outer_radius;
114
+ &::part(content) {
111
115
  font-size: round(@size/3.2);
112
116
  }
113
117
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.50.0-jericho",
2
+ "version": "0.50.0-luxor",
3
3
  "name": "pacem-less",
4
4
  "homepage": "https://js.pacem.it",
5
5
  "repository": {