@@ -216,6 +216,13 @@ div.flot-text {
216
216
margin-right : $panel-margin ;
217
217
margin-left : 0 ;
218
218
219
+ & :hover {
220
+ .dash-row-header-actions {
221
+ display : block ;
222
+ opacity : 0 ;
223
+ animation : fadeIn 150ms linear 100ms forwards ;
224
+ }
225
+ }
219
226
220
227
.h1 { font-size : 2.7rem ; font-style : normal ; line-height : 4rem }
221
228
.h2 { font-size : 2.4rem ; line-height : 3.5rem ; }
@@ -267,6 +274,9 @@ div.flot-text {
267
274
.dash-row-header-action-show-options {
268
275
color : $link-color ;
269
276
}
277
+ .dash-row-header {
278
+ border-bottom : none ;
279
+ }
270
280
}
271
281
272
282
.dash-row-show-add-panel {
@@ -276,6 +286,9 @@ div.flot-text {
276
286
.dash-row-header-action--add-panel {
277
287
color : $link-color ;
278
288
}
289
+ .dash-row-header {
290
+ border-bottom : none ;
291
+ }
279
292
}
280
293
281
294
.dash-row-show-title {
@@ -302,21 +315,55 @@ div.flot-text {
302
315
.dash-edit-mode {
303
316
.dash-row-header {
304
317
display : flex ;
305
- & :hover {
306
- .dash-row-header-actions {
307
- display : block ;
308
- }
318
+ border-bottom : 1px solid $dark-4 ;
319
+ border-right : 1px solid $dark-4 ;
320
+ margin-right : 0 ;
321
+ .dash-row-header-actions {
322
+ display : block ;
309
323
}
310
324
}
325
+ .dash-row-show-add-panel {
326
+ .dash-row-header {
327
+ border-bottom : none ;
328
+ }
329
+ }
330
+ .dash-row-show-options {
331
+ .dash-row-header {
332
+ border-bottom : none ;
333
+ }
334
+ }
335
+ .dash-row-header ::after {
336
+ content : ' ' ;
337
+ border-top : 1px solid $dark-4 ;
338
+ width : 15px ;
339
+ position : relative ;
340
+ }
311
341
.dash-row {
312
- border-left : 1 px solid $dark-4 ;
342
+ margin-bottom : $spacer * 2 ;
313
343
}
314
344
.dash-row-header-title {
345
+ border-left : 1px solid $dark-4 ;
346
+ }
347
+ .dash-row-header-title ::before {
348
+ content : ' ' ;
315
349
border-top : 1px solid $dark-4 ;
350
+ width : 15px ;
351
+ position : absolute ;
352
+ margin : -9px 0 0 -9px ;
316
353
}
317
354
.panels-wrapper {
318
- margin-left : $panel-margin ;
355
+ padding : $panel-margin * 2 $panel-margin 0 $panel-margin * 2 ;
356
+ border-left : 1px solid $dark-4 ;
357
+ border-right : 1px solid $dark-4 ;
319
358
}
359
+ .panels-wrapper ::after {
360
+ content : ' ' ;
361
+ border-bottom : 1px solid $dark-4 ;
362
+ width : 15px ;
363
+ position : absolute ;
364
+ margin : 0 0 0 -12px ;
365
+ }
366
+
320
367
.add-row-panel-hint {
321
368
display : block ;
322
369
}
@@ -339,18 +386,33 @@ div.flot-text {
339
386
}
340
387
341
388
.dash-row-options {
342
- background : $panel-bg ;
343
- border : $panel-border ;
344
- margin : 0 0 $panel-margin * 2 $panel-margin * 2 ;
345
- padding : $spacer * 1.5 ;
389
+ border-left : $panel-border ;
390
+ border-bottom : $panel-border ;
391
+ border-right : $panel-border ;
392
+ margin : 0 0 $panel-margin * 2 0 ;
393
+ padding : $panel-margin * 2 ;
394
+ box-shadow : 0px 3px 7px -3px $black ;
346
395
}
347
396
348
397
.dash-row-add-panel {
349
- margin : 0 ;
398
+ border-left : $panel-border ;
399
+ border-bottom : $panel-border ;
400
+ border-right : $panel-border ;
401
+ margin : 0 0 $panel-margin * 2 0 ;
350
402
padding : $panel-margin * 2 ;
351
403
// display: flex;
352
404
// align-items: flex-start;
353
405
// position: relative;
406
+ box-shadow : 0px 3px 7px -3px $black ;
407
+ }
408
+
409
+ .dash-edit-mode {
410
+ .dash-row-options {
411
+ margin-bottom : 0 ;
412
+ }
413
+ .dash-row-add-panel {
414
+ margin-bottom : 0 ;
415
+ }
354
416
}
355
417
356
418
.add-panel-panels-scroll {
@@ -383,8 +445,22 @@ div.flot-text {
383
445
text-overflow : ellipsis ;
384
446
overflow : hidden ;
385
447
white-space : nowrap ;
448
+ font-size : $font-size-sm ;
386
449
}
387
450
388
451
.add-panel-item-img {
389
- width : 3 rem ;
452
+ width : 2 rem ;
390
453
}
454
+
455
+ // Animations
456
+
457
+ @keyframes fadeIn {
458
+ from {
459
+ opacity : 0 ;
460
+ }
461
+
462
+ to {
463
+ opacity : 1 ;
464
+ }
465
+ }
466
+
0 commit comments