pacem-less 0.51.9 → 0.51.10-abel

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 (2) hide show
  1. package/pacem/ui/dark/tabs.less +159 -132
  2. package/package.json +1 -1
package/pacem/ui/dark/tabs.less CHANGED
@@ -142,6 +142,10 @@
142
142
  &.tabs-flat {
143
143
  .@{PCSS}-tabs-content {
144
144
  box-shadow: none;
145
+ background: none;
146
+ border: none;
147
+ padding-left: ~"var(--@{PCSS}-size-1)";
148
+ padding-right: $padding-left;
145
149
  }
146
150
 
147
151
  .@{PCSS}-tabs.tabs-vertical {
@@ -156,174 +160,197 @@
156
160
  @_s_btn: @grid_spacing;
157
161
 
158
162
  // tabs (header)
159
- @{P}-adapter.@{PCSS}-tabs-adapter {
163
+ @{P}-tabs {
160
164
 
161
- .@{PCSS}-adapter-dashboard {
162
- list-style-type: none;
163
- display: flex;
164
- flex-direction: row;
165
- align-items: flex-start;
166
- margin: 0 0 0 round(2 * @_h_tab);
167
- padding: 0;
168
- clear: right;
165
+ .@{PCSS}-tabs {
169
166
 
170
- > li {
167
+ @{P}-adapter.@{PCSS}-tabs-adapter {
171
168
 
172
- > @{P}-button.@{PCSS}-adapter-page {
173
- padding: @grid_spacing/6 @grid_spacing/2 0 @grid_spacing/2;
174
- margin: 0;
175
- background-color: transparent;
176
- height: @_h_tab;
177
- box-sizing: border-box;
178
- border-top-left-radius: @border_radius;
179
- border-top-right-radius: @border_radius;
169
+ .@{PCSS}-adapter-dashboard {
170
+ list-style-type: none;
171
+ display: flex;
172
+ flex-direction: row;
173
+ align-items: flex-start;
174
+ margin: 0 0 0 round(2 * @_h_tab);
175
+ padding: 0;
176
+ clear: right;
180
177
 
181
- &.@{PCSS}-disabled {
182
- box-shadow: none;
183
- }
178
+ > li {
184
179
 
185
- > @{P}-span {
186
- display: block;
187
- box-sizing: border-box;
188
- height: @_h_tab - @grid_spacing/6;
189
- line-height: @_h_tab - @grid_spacing/6;
190
- margin: 0 @grid_spacing/2;
191
- border-bottom: 1px solid transparent;
192
- transition: border-color .3s linear;
193
-
194
- > span {
195
- display: block;
196
- }
197
- }
180
+ > @{P}-button.@{PCSS}-adapter-page {
181
+ padding: @grid_spacing/6 @grid_spacing/2 0 @grid_spacing/2;
182
+ margin: 0;
183
+ background-color: transparent;
184
+ height: @_h_tab;
185
+ box-sizing: border-box;
186
+ border-top-left-radius: @border_radius;
187
+ border-top-right-radius: @border_radius;
188
+
189
+ &.@{PCSS}-disabled {
190
+ box-shadow: none;
191
+ }
192
+
193
+ > @{P}-span {
194
+ display: block;
195
+ box-sizing: border-box;
196
+ height: @_h_tab - @grid_spacing/6;
197
+ line-height: @_h_tab - @grid_spacing/6;
198
+ margin: 0 @grid_spacing/2;
199
+ border-bottom: 1px solid transparent;
200
+ transition: border-color .3s linear;
201
+
202
+ > span {
203
+ display: block;
204
+ }
205
+ }
198
206
 
199
- &.@{PCSS}-adapter-active {
200
- background-color: @_clr_tab;
201
- border-top: @_brd_tab solid @_clr_brd_tab;
202
- border-right: @_brd_tab solid @_clr_brd_tab;
203
- border-left: @_brd_tab solid @_clr_brd_tab;
204
- border-bottom: 0;
205
- z-index: 1;
206
- transform: translateY(@_brd_tab);
207
-
208
- > @{P}-span {
209
- border-color: @color_tab_highlight;
210
- //background-color: @color_teal;
207
+ &.@{PCSS}-adapter-active {
208
+ background-color: @_clr_tab;
209
+ border-top: @_brd_tab solid @_clr_brd_tab;
210
+ border-right: @_brd_tab solid @_clr_brd_tab;
211
+ border-left: @_brd_tab solid @_clr_brd_tab;
212
+ border-bottom: 0;
213
+ z-index: 1;
214
+ transform: translateY(@_brd_tab);
215
+
216
+ > @{P}-span {
217
+ border-color: @color_tab_highlight;
218
+ //background-color: @color_teal;
219
+ }
220
+ }
211
221
  }
212
222
  }
213
223
  }
214
- }
215
- }
216
224
 
217
- .@{PCSS}-adapter-next,
218
- .@{PCSS}-adapter-previous {
219
- font-size: 0;
220
- float: left;
221
- height: @_h_tab;
222
- line-height: @_h_tab;
223
- display: block;
224
- width: @_h_tab;
225
- background-color: transparent;
226
- margin: 0;
227
- }
225
+ .@{PCSS}-adapter-next,
226
+ .@{PCSS}-adapter-previous {
227
+ font-size: 0;
228
+ float: left;
229
+ height: @_h_tab;
230
+ line-height: @_h_tab;
231
+ display: block;
232
+ width: @_h_tab;
233
+ background-color: transparent;
234
+ margin: 0;
235
+ }
228
236
 
229
- .@{PCSS}-adapter-next::before {
230
- .Icon('chevron_right', @_s_btn);
231
- }
237
+ .@{PCSS}-adapter-next::before {
238
+ .Icon('chevron_right', @_s_btn);
239
+ }
232
240
 
233
- .@{PCSS}-adapter-previous::before {
234
- .Icon('chevron_left', @_s_btn);
235
- }
241
+ .@{PCSS}-adapter-previous::before {
242
+ .Icon('chevron_left', @_s_btn);
243
+ }
236
244
 
237
- .@{PCSS}-adapter-next,
238
- .@{PCSS}-adapter-previous {
245
+ .@{PCSS}-adapter-next,
246
+ .@{PCSS}-adapter-previous {
239
247
 
240
- &::before {
241
- left: 0;
242
- width: 100%;
243
- line-height: @_h_tab;
248
+ &::before {
249
+ left: 0;
250
+ width: 100%;
251
+ line-height: @_h_tab;
252
+ }
253
+ }
244
254
  }
245
- }
246
- }
247
255
 
248
- .@{PCSS}-tabs.tabs-vertical {
249
- display: flex;
250
- flex-direction: row;
256
+ &.tabs-vertical {
257
+ display: flex;
258
+ flex-direction: row;
251
259
 
252
- .@{PCSS}-tabs-adapter {
253
- flex-basis: @grid_cell * 2;
254
- flex-grow: 0;
255
- flex-shrink: 0;
260
+ @{P}-adapter.@{PCSS}-tabs-adapter {
261
+ flex-basis: @grid_cell * 2;
262
+ flex-grow: 0;
263
+ flex-shrink: 0;
256
264
 
257
- .@{PCSS}-adapter-dashboard {
258
- display: block;
259
- margin: 2 * @_s_btn 0 0 0;
260
-
261
- > li {
262
- display: list-item;
263
-
264
- > @{P}-button.@{PCSS}-adapter-page {
265
- padding: @grid_spacing/4 0 @grid_spacing/4 @grid_spacing/2;
265
+ .@{PCSS}-adapter-dashboard {
266
266
  display: block;
267
- border-bottom-left-radius: @border_radius;
268
- border-top-right-radius: 0;
269
-
270
- > @{P}-span {
271
- display: block;
272
- text-align: left;
273
- margin: 0;
274
- padding: 0 @grid_spacing/2 0 0;
275
- height: @_h_tab - 2 * @grid_spacing/4;
276
- line-height: @_h_tab - 2 * @grid_spacing/4;
277
- border-bottom: none;
278
- border-right: 1px solid transparent;
267
+ margin: 2 * @_s_btn 0 0 0;
268
+
269
+ > li {
270
+ display: list-item;
271
+
272
+ > @{P}-button.@{PCSS}-adapter-page {
273
+ padding: @grid_spacing/4 0 @grid_spacing/4 @grid_spacing/2;
274
+ display: block;
275
+ border-bottom-left-radius: @border_radius;
276
+ border-top-right-radius: 0;
277
+
278
+ > @{P}-span {
279
+ display: block;
280
+ text-align: left;
281
+ margin: 0;
282
+ padding: 0 @grid_spacing/2 0 0;
283
+ height: @_h_tab - 2 * @grid_spacing/4;
284
+ line-height: @_h_tab - 2 * @grid_spacing/4;
285
+ border-bottom: none;
286
+ border-right: 1px solid transparent;
287
+ }
288
+
289
+ &.@{PCSS}-adapter-active {
290
+ border-top: @_brd_tab solid @_clr_brd_tab;
291
+ border-bottom: @_brd_tab solid @_clr_brd_tab;
292
+ border-left: @_brd_tab solid @_clr_brd_tab;
293
+ border-right: 0;
294
+ z-index: 1;
295
+ transform: translateX(@_brd_tab);
296
+
297
+ > @{P}-span {
298
+ border-color: @color_tab_highlight;
299
+ }
300
+ }
301
+ }
279
302
  }
303
+ }
280
304
 
281
- &.@{PCSS}-adapter-active {
282
-
283
- border-top: @_brd_tab solid @_clr_brd_tab;
284
- border-bottom: @_brd_tab solid @_clr_brd_tab;
285
- border-left: @_brd_tab solid @_clr_brd_tab;
286
- border-right: 0;
287
- z-index: 1;
288
- transform: translateX(@_brd_tab);
305
+ .@{PCSS}-adapter-next,
306
+ .@{PCSS}-adapter-previous {
307
+ margin-left: @grid_spacing/2;
308
+ margin-bottom: 0;
309
+ margin-right: 0;
289
310
 
290
- > @{P}-span {
291
- border-color: @color_tab_highlight;
292
- }
311
+ &::before {
312
+ position: static;
293
313
  }
294
314
  }
295
- }
296
- }
297
315
 
298
- .@{PCSS}-adapter-next,
299
- .@{PCSS}-adapter-previous {
300
- margin-left: @grid_spacing/2;
301
- margin-bottom: 0;
302
- margin-right: 0;
316
+ .@{PCSS}-adapter-next::before {
317
+ content: 'keyboard_arrow_down';
318
+ }
303
319
 
304
- &::before {
305
- position: static;
320
+ .@{PCSS}-adapter-previous::before {
321
+ content: 'keyboard_arrow_up';
322
+ }
306
323
  }
307
- }
308
324
 
309
- .@{PCSS}-adapter-next::before {
310
- content: 'keyboard_arrow_down';
311
- }
312
-
313
- .@{PCSS}-adapter-previous::before {
314
- content: 'keyboard_arrow_up';
325
+ .@{PCSS}-tabs-content {
326
+ flex-grow: 1;
327
+ }
315
328
  }
316
329
  }
317
330
 
318
- .@{PCSS}-tabs-content {
319
- flex-grow: 1;
331
+ &.tabs-flat {
332
+ > .@{PCSS}-tabs {
333
+
334
+ @{P}-adapter.@{PCSS}-tabs-adapter {
335
+
336
+ .@{PCSS}-adapter-dashboard {
337
+ > li {
338
+
339
+ > @{P}-button.@{PCSS}-adapter-page {
340
+ &.@{PCSS}-adapter-active {
341
+ border: none;
342
+ }
343
+ }
344
+ }
345
+ }
346
+ }
347
+ }
320
348
  }
321
349
  }
322
350
 
323
- @{P}-tab::part(label){
351
+ @{P}-tab::part(label) {
324
352
  .Inert();
325
353
  }
326
-
327
354
  // animations
328
355
  .@{PCSS}-animations {
329
356
  @{P}-tabs {
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.51.9",
2
+ "version": "0.51.10-abel",
3
3
  "name": "pacem-less",
4
4
  "homepage": "https://js.pacem.it",
5
5
  "repository": {