ASCII text
1
.lightbox { background-color: black; }
2
.flashspot { background-color: white; }
3
.hidden {
5
color: rgba(0,0,0,0);
6
}
7
// Rename popup
9
.rename-folder-popup {
10
.rename-folder-popup-item {
11
spacing: 6px;
12
&:ltr, &:rtl { padding: 0, 12px; }
13
}
14
}
15
/* Tiled window previews */
17
.tile-preview {
18
background-color: rgba(on(dark, primary), 0.3);
19
border: 1px solid on(dark, primary);
20
}
21
.tile-preview-left.on-primary {
23
border-radius: 0;
24
}
25
.tile-preview-right.on-primary {
27
border-radius: 0;
28
}
29
.tile-preview-left.tile-preview-right.on-primary {
31
border-radius: 0;
32
}
33
.app-menu,
35
.app-well-menu {
36
max-width: 27.25em;
37
}
38
// Rubberband for select-area screenshots
40
.select-area-rubberband {
41
background-color: rgba(on(dark, primary), 0.3);
42
border: 1px solid on(dark, primary);
43
}
44
// Pointer location
46
.ripple-pointer-location {
47
width: 50px;
48
height: 50px;
49
border-radius: 25px; // radius the size of the box give us the curve
50
background-color: $overlay-selected;
51
box-shadow: none;
52
}
53
//close buttons
55
.window-close {
57
// FIXME: unless disable the transition, button will distort when hovering
58
// transition-duration: $duration;
59
background-color: transparent;
60
border-radius: 0;
61
border: none;
62
box-shadow: none;
63
color: transparent;
64
height: $medium-size;
65
width: $medium-size;
66
-shell-close-overlap: $medium-size / 2;
67
-st-background-image-shadow: $shadow-1;
68
background-image: url("assets/window-close.svg");
69
background-size: $medium-size;
70
&:hover {
72
background-color: transparent;
73
border-color: transparent;
74
color: transparent;
75
-st-background-image-shadow: $shadow-2;
76
background-image: url("assets/window-close.svg");
77
}
78
&:active {
80
background-color: transparent;
81
border-color: transparent;
82
color: transparent;
83
// transition-duration: $duration-ripple;
84
background-image: url("assets/window-close-active.svg");
85
}
86
// For backward compatibility of 3.26.0
88
&:rtl { -st-background-image-shadow: $shadow-1; }
89
&:rtl:hover { -st-background-image-shadow: $shadow-2; }
90
}
91
// Pointer accessibility notifications
93
.pie-timer {
94
width: 60px;
95
height: 60px;
96
-pie-border-width: 0;
97
-pie-border-color: transparent;
98
-pie-background-color: $overlay-selected;
99
}
100
.window-picker { //container around window thumbnails
102
-horizontal-spacing: 16px;
103
-vertical-spacing: 16px;
104
padding: 0 16px 32px;
105
&.external-monitor { padding: 16px; }
107
}
108
.window-clone-border {
110
border: 4px solid on(dark, stroke);
111
border-radius: $corner-radius;
112
// For window decorations with round corners we can't match
113
// the exact shape when the window is scaled. So apply a shadow
114
// to fix that case
115
box-shadow: inset 0 0 0 1px on(dark, stroke);
116
}
117
.window-caption {
118
spacing: 25px;
119
color: on($scrim);
120
background-color: $scrim;
121
border-radius: $corner-radius;
122
padding: 4px 8px;
123
}
124
//search entry
126
.search-entry, %search_entry {
127
width: 320px - 8px * 2;
128
padding: 0 8px;
129
border-radius: $corner-radius $corner-radius 0 0;
130
color: on(dark, text-disabled);
131
selection-background-color: on(dark, stroke);
132
selected-color: on(dark);
133
@include entry(normal,$fc:on(dark, stroke));
134
&:hover { @include entry(hover,$fc:on(dark, stroke)); }
135
&:focus {
136
@include entry(focus,$fc:on(dark));
137
padding: 0 8px;
138
border-width: 0;
139
color: on(dark);
140
}
141
.search-entry-icon { icon-size: 16px; padding: 0 0; color: on(dark, text2); }
143
&:hover, &:focus {
145
.search-entry-icon { color: on(dark); }
146
}
147
}
148
//search results
150
#searchResultsContent {
152
max-width: 1000px;
153
padding-left: 20px;
154
padding-right: 20px;
155
spacing: 16px;
156
}
157
.search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
159
.search-section-content { spacing: 32px; } // This is the space between the provider icon and the results container
160
.search-statustext { // "no results"
161
@extend %status_text;
162
}
163
.list-search-results { spacing: 3px; }
164
.search-section-separator { height: 1px; background-color: on(dark, divider); }
166
.search-section:last-child .search-section-separator { background-color: transparent; }
168
.list-search-result-content { spacing: 30px; }
170
.list-search-result-title { @include type(subtitle1); color: on(dark); spacing: 12px; }
171
.list-search-result-description { color: on(dark, text2); }
172
.list-search-provider-details { width: 150px; color: on(dark, text2); margin-top: 0.24em; }
173
.list-search-provider-content { spacing: 20px; }
174
.search-provider-icon { padding: 15px; }
175
/* DASHBOARD */
178
#dash {
180
@extend %overview-panel;
181
font-size: 1em;
182
padding: 3px 0;
183
border-radius: 0px $corner-radius $corner-radius 0px;
184
&:rtl {
186
border-radius: $corner-radius 0 0 $corner-radius;
187
}
188
.placeholder {
190
background-image: url("assets/dash-placeholder.svg");
191
background-size: contain;
192
height: 24px;
193
}
194
.empty-dash-drop-target {
196
width: 24px;
197
height: 24px;
198
}
199
}
201
.dash-item-container > StWidget {
203
padding: 3px 6px;
204
}
205
.dash-label { //osd tooltip
207
// min-height: 32px - 6px * 2;
208
border-radius: $corner-radius;
209
padding: 7px 8px;
210
color: $text;
211
background-color: $surface;
212
box-shadow: $shadow-2;
213
border: none;
214
text-align: center;
215
-x-offset: 8px;
216
}
217
/* App Vault/Grid */
219
.icon-grid {
220
spacing: 30px;
221
-shell-grid-horizontal-item-size: 136px;
222
-shell-grid-vertical-item-size: 136px;
223
.overview-icon { icon-size: 96px; }
225
}
226
//.app-display { spacing: 20px; }
227
.system-action-icon {
229
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); // FIXME: this should really have a highlight
230
background-color: $grey_900;
231
color: $white;
232
border-radius: 99px;
233
icon-size: 48px;
234
}
235
.app-view-controls { //favorties | all toggle container
237
width: 320px;
238
padding-bottom: 32px;
239
}
240
.app-view-control { //favorties | all toggle button
241
padding: 0 8px;
242
margin: 0;
243
font-weight: bold;
244
color: on(dark, text2);
245
&, &:hover, &:active, &:checked { @include button(flat-normal, $tc: on(dark)); }
247
&:hover {
249
color: on(dark);
250
background-color: $inverse-overlay-hover !important;
251
}
252
&:active {
253
color: on(dark);
254
background-color: $inverse-overlay-active !important;
255
}
256
&:checked {
257
color: on(dark);
258
background-color: rgba($scrim, 0.01) !important;
259
box-shadow: inset 0 2px 0 on(dark);
260
}
261
&:first-child {
262
border-right-width: 0;
263
border-radius: $corner-radius;
264
&:checked { border-radius: 0; }
265
}
266
&:last-child {
267
border-radius: $corner-radius;
268
&:checked { border-radius: 0; }
269
}
270
}
271
//Icon tile
273
.search-provider-icon,
274
.list-search-result {
275
@extend %icon_tile;
276
&:focus, &:selected, &:hover {
277
background-color: $inverse-overlay-hover;
278
transition-duration: 0ms;
279
}
280
&:active, &:checked {
281
background-color: $inverse-overlay-active;
282
transition-duration: $duration-ripple;
283
}
284
}
285
.app-well-app,
286
.app-well-app.app-folder,
287
.show-apps,
288
.grid-search-result {
289
& .overview-icon {
290
@extend %icon_tile;
291
}
292
&:hover .overview-icon,
293
&:focus .overview-icon,
294
&:selected .overview-icon {
295
background-color: $inverse-overlay-hover;
296
transition-duration: 0ms;
297
border-image: none;
298
background-image: none;
299
}
300
&:drop .overview-icon {
301
background-color: $inverse-overlay-hover;
302
}
303
&:active .overview-icon,
304
&:checked .overview-icon {
305
background-color: $inverse-overlay-active;
306
box-shadow: $shadow-0;
307
transition-duration: $duration-ripple;
308
}
309
}
311
.app-well-app-running-dot { //running apps indicator
313
width: 32px; height: 2px;
314
background-color: on(dark);
315
margin-bottom: 0;
316
}
317
.app-well-app.app-folder > .overview-icon {
319
background-color: on(dark, fill);
320
}
321
.show-apps .show-apps-icon {
323
color: on(dark, text2);
324
}
325
.show-apps:hover .show-apps-icon,
327
.show-apps:active .show-apps-icon,
328
.show-apps:checked .show-apps-icon,
329
.show-apps:focus .show-apps-icon {
330
color: on(dark);
331
transition-duration: $duration;
332
}
333
// Collections
336
.app-folder-popup { //expanded collection
337
-arrow-border-radius: $corner-radius;
338
-arrow-background-color: on(dark, fill);
339
-arrow-base: 24px;
340
-arrow-rise: 12px;
341
}
342
.app-folder-popup-bin { padding: 5px; }
343
.app-folder-icon {
344
padding: 5px;
345
spacing-rows: 5px;
346
spacing-columns: 5px;
347
}
348
.page-indicator {
350
padding: 15px 20px;
351
.page-indicator-icon {
353
width: 12px;
354
height: 12px;
355
border: none;
356
border-radius: 12px;
357
background-image: none;
358
background-color: on(dark, text2-disabled);
359
transition-duration: $duration;
360
}
361
&:hover .page-indicator-icon {
362
border-color: transparent;
363
background-image: none;
364
background-color: on(dark, text-disabled);
365
}
366
&:active .page-indicator-icon {
367
border: none;
368
margin: 0;
369
background-image: none;
370
background-color: on(dark, text2);
371
}
372
&:checked .page-indicator-icon,
373
&:checked:active .page-indicator-icon {
374
background-image: none;
375
background-color: on(dark);
376
transition-duration: 0ms;
377
}
378
&:checked:active { background-image: none; background-color: transparent; }
379
}
380
.no-frequent-applications-label { @extend %status_text; }
382
.app-well-app > .overview-icon.overview-icon-with-label,
384
.grid-search-result .overview-icon.overview-icon-with-label {
385
padding: 10px 8px 5px 8px;
386
spacing: 4px;
387
}
388
// Workspace pager
390
.workspace-thumbnails { //container ala dash
391
@extend %overview-panel;
392
visible-width: 32px; //amount visible before hover
393
spacing: 12px;
394
padding: 12px;
395
border-radius: $corner-radius 0 0 $corner-radius;
396
//border-width: 0; //fixme: can't have non unoform borders :(
397
&:rtl { border-radius: 0 $corner-radius $corner-radius 0;}
398
.placeholder {
400
background-image: url("assets/dash-placeholder.svg");
401
background-size: contain;
402
height: 24px;
403
}
404
}
405
.workspace-thumbnail-indicator {
406
border: 0 solid on(dark);
407
border-left-width: 2px;
408
padding: 6px 10px;
409
border-radius: 0;
410
}
411
//Some hacks I don't even
413
.all-apps,
414
.frequent-apps > StBoxLayout {
415
// horizontal padding to make sure scrollbars or dash don't overlap content
416
padding: 0px 88px 10px 88px;
417
}
418
/* Eeeky things */
420
//magnifier
422
.magnifier-zoom-region {
424
border: 2px solid $primary;
425
&.full-screen { border-width: 0; }
426
}
427
//Keyboard
429
/* On-screen Keyboard */
430
.word-suggestions {
431
@include type(subtitle1);
432
spacing: 12px;
433
min-height: 20pt;
434
}
435
#keyboard {
437
background-color: $scrim-alt;
438
.page-indicator {
440
padding: 4px 4px;
441
.page-indicator-icon {
443
width: 8px;
444
height: 8px
445
}
446
}
447
}
448
.key-container {
450
padding: 4px;
451
spacing: 4px;
452
}
453
.keyboard-key {
455
min-height: 1.2em;
456
min-width: 1.2em;
457
font-size: 2em;
458
font-weight: 500;
459
border-radius: $corner-radius;
460
border: none;
461
@include button(normal);
462
&:focus { @include button(focus); }
463
&:hover,&:checked { @include button(hover); }
464
&:active { @include button(active);}
465
&:grayed { //FIXME
466
background-color: $scrim-alt;
467
color: on($scrim-alt);
468
border-color: $scrim-alt;
469
}
470
&.default-key {
471
border-color: transparent;
472
background-color: $surface;
473
background-size: 24px;
474
&:hover, &:checked { background-color: $surface; }
475
&:active { background-color: mix($text, $surface, percentage(0.2)); }
476
}
477
&.enter-key {
478
border-color: transparent;
479
background-color: $primary;
480
background-image: url("assets/key-enter.svg");
481
&:hover, &:checked { background-color: $primary; }
482
&:active { background-color: mix(on($primary), $primary, percentage(0.2)); }
483
}
484
&.shift-key-lowercase {
485
background-image: url("assets/key-shift.svg");
486
}
487
&.shift-key-uppercase {
488
background-image: url("assets/key-shift-uppercase.svg");
489
}
490
&.shift-key-uppercase:latched {
491
background-image: url("assets/key-shift-latched-uppercase.svg");
492
}
493
&.hide-key {
494
background-image: url("assets/key-hide.svg");
495
}
496
&.layout-key {
497
background-image: url("assets/key-layout.svg");
498
}
499
}
500
.keyboard-subkeys { //long press on a key popup
502
color: inherit;
503
padding: 5px;
504
-arrow-border-radius: 0;
505
-arrow-background-color: transparent;
506
-arrow-border-width: 0;
507
-arrow-border-color: transparent;
508
-arrow-base: 0;
509
-arrow-rise: 0;
510
-boxpointer-gap: 5px;
511
background-color: $surface;
512
border-radius: $corner-radius;
513
box-shadow: $shadow-2;
514
}
515
.emoji-page {
517
.keyboard-key {
518
border: none;
519
@include button(flat-normal, $tc: on($scrim-alt));
520
&:hover, &:focus { @include button(flat-hover, $tc: on($scrim-alt)); }
521
&:active { @include button(flat-active, $tc: on($scrim-alt)); }
522
}
523
}
524
.emoji-panel {
526
.keyboard-key:latched {
527
border-color: transparent;
528
background-color: $primary;
529
color: on($primary);
530
}
531
}
532
/* Auth Dialogs & Screen Shield */
534
.user-icon {
536
background-size: contain;
537
border: none;
538
color: on($os-background);
539
border-radius: $circular-radius;
540
&:hover {
541
border-color: on($os-background);
542
color: on($os-background);
543
}
544
}
545
// LOGIN DIALOG
547
.login-dialog-banner-view {
549
padding-top: 24px;
550
max-width: 23em;
551
}
552
.login-dialog {
554
//reset
555
border: none;
556
background-color: transparent;
557
StEntry {
559
color: on($os-background);
560
selection-background-color: on($os-background, stroke);
561
selected-color: on($os-background);
562
@include entry(normal, $fc:on($os-background, stroke));
563
&:focus { @include entry(focus, $fc:on($os-background)); }
564
&:insensitive {
565
@include entry(insensitive, $fc:on($os-background, stroke-disabled));
566
color: on($os-background, text-disabled);
567
}
568
}
569
.modal-dialog-button-box { spacing: 3px; }
571
.modal-dialog-button {
572
min-width: 64px - 8px * 2;
573
padding: 0 8px;
574
@include button(flat-normal, $tc: on($os-background));
575
&:hover,&:focus { @include button(flat-hover, $tc: on($os-background)); }
576
&:active { @include button(flat-active, $tc: on($os-background)); }
577
&:insensitive { @include button(flat-insensitive, $tc: on($os-background)); }
578
&:default {
580
min-width: 64px - 16px * 2;
581
padding: 0 16px;
582
@include button(normal, $c: $primary, $tc: on($primary));
583
&:hover,&:focus { @include button(hover, $c: $primary, $tc: on($primary)); }
584
&:active { @include button(active, $c: $primary, $tc: on($primary)); }
585
&:insensitive { @include button(insensitive, $c: on($os-background, fill), $tc: on($os-background, text-disabled)); }
586
}
587
}
588
}
589
.login-dialog-logo-bin { padding: 24px 0px; }
591
.login-dialog-banner { color: on($os-background, text2); }
592
.login-dialog-button-box { spacing: 5px; }
593
.login-dialog-message-warning { color: on($os-background, error); }
594
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
595
.login-dialog-user-selection-box { padding: 100px 0px; }
596
.login-dialog-not-listed-label {
597
padding-left: 2px;
598
.login-dialog-not-listed-button:focus &,
599
.login-dialog-not-listed-button:hover & {
600
color: on($os-background);
601
}
602
}
603
.login-dialog-not-listed-label {
604
transition-duration: $duration;
605
font-size: 1em;
606
font-weight: bold;
607
color: on($os-background, text2);
608
padding-top: 1em;
609
border-radius: $corner-radius;
610
&:hover {
611
background-color: $inverse-overlay-hover;
612
color: on($os-background);
613
}
614
&:focus { background-color: $inverse-overlay-focus; }
615
&:active {
616
transition-duration: $duration-ripple;
617
background-color: $inverse-overlay-active;
618
color: on($os-background);
619
}
620
}
621
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
623
.login-dialog-user-list {
624
spacing: 12px;
625
width: 23em;
626
&:expanded .login-dialog-user-list-item:selected { background-color: $inverse-overlay-focus; color: on($os-background); }
627
&:expanded .login-dialog-user-list-item:hover { background-color: $inverse-overlay-hover; color: on($os-background); }
628
&:expanded .login-dialog-user-list-item:active { background-color: $inverse-overlay-active; color: on($os-background); }
629
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid on($os-background); }
630
}
631
.login-dialog-user-list-item {
632
transition-duration: $duration;
633
border-radius: $corner-radius;
634
padding: 6px;
635
color: on($os-background, text2);
636
&:ltr .user-widget { padding-right: 1em; }
637
&:rtl .user-widget { padding-left: 1em; }
638
&:hover {
639
background-color: $inverse-overlay-hover;
640
color: on($os-background);
641
}
642
&:active {
643
transition-duration: $duration-ripple;
644
background-color: $inverse-overlay-active;
645
color: on($os-background);
646
}
647
.login-dialog-timed-login-indicator {
648
height: 2px;
649
margin-top: 6px;
650
background-color: on($os-background);
651
}
652
&:focus .login-dialog-timed-login-indicator { background-color: on($os-background); }
653
}
654
.login-dialog-username,
656
.user-widget-label {
657
color: on($os-background);
658
@include type(headline6);
659
text-align: left;
660
padding-left: 15px;
661
}
662
.user-widget-label {
663
&:ltr { padding-left: 14px; }
664
&:rtl { padding-right: 14px; }
665
}
666
.login-dialog-prompt-layout {
668
padding-top: 24px;
669
padding-bottom: 12px;
670
spacing: 8px;
671
width: 23em;
672
}
673
.login-dialog-prompt-label {
675
color: on($os-background, text2);
676
font-size: 1em;
677
padding-top: 1em;
678
}
679
.login-dialog-session-list-button StIcon {
681
icon-size: 1.25em;
682
}
683
.login-dialog-session-list-button {
685
color: on($os-background, text2);
686
&:hover,&:focus { color: on($os-background); }
687
&:active { color: on($os-background); }
688
}
689
//SCREEN SHIELD
691
.screen-shield-arrows {
693
padding-bottom: 3em;
694
}
695
.screen-shield-arrows Gjs_Arrow {
697
color: white;
698
width: 80px;
699
height: 48px;
700
-arrow-thickness: 12px;
701
-arrow-shadow: $shadow-1;
702
}
703
.screen-shield-clock {
705
color: white;
706
text-shadow: $shadow-1;
707
font-weight: normal;
708
text-align: center;
709
padding-bottom: 1.5em;
710
}
711
.screen-shield-clock-time {
713
@include type(headline1);
714
text-shadow: $shadow-1;
715
font-feature-settings: "tnum";
716
}
717
.screen-shield-clock-date { @include type(headline4); }
719
.screen-shield-notifications-container {
721
spacing: 6px;
722
width: 30em;
723
background-color: transparent;
724
max-height: 500px;
725
.summary-notification-stack-scrollview {
726
padding-top: 0;
727
padding-bottom: 0;
728
}
729
.notification,
731
.screen-shield-notification-source {
732
padding: 8px;
733
border: none;
734
background-color: $scrim-alt;
735
color: on($scrim-alt);
736
border-radius: $corner-radius;
737
}
738
.notification { margin-right: 16px; } //compensate for space allocated to the scrollbar
739
}
740
.screen-shield-notification-label {
743
min-height: $small-size - 2px;
744
padding: 2px 0px 0px 16px;
745
font-weight: bold;
746
}
747
.screen-shield-notification-count-text {
749
min-height: $small-size - 2px;
750
padding: 2px 0px 0px 16px;
751
color: on($scrim-alt, text2);
752
}
753
#panel.lock-screen { background-color: $scrim-alt; }
755
.screen-shield-background { //just the shadow, really
757
background: black;
758
box-shadow: $shadow-5;
759
}
760
#lockDialogGroup {
762
background: $os-background;
763
background-size: cover;
764
color: on($os-background, text2);
765
}
766
#screenShieldNotifications {
768
StScrollBar { @extend %overview_scrollbar; }
769
}
770
// Looking Glass
773
#LookingGlassDialog {
774
background-color: $surface;
775
spacing: 4px;
776
padding: 0;
777
border: none;
778
border-radius: $corner-radius;
779
box-shadow: $shadow-4;
780
& > #Toolbar {
781
padding: 0 8px;
782
border: none;
783
border-radius: 0;
784
background-color: rgba($surface, 0.01);
785
box-shadow: inset 0 -1px 0 $divider;
786
}
787
.labels { spacing: 0; }
788
.notebook-tab {
789
-natural-hpadding: 12px;
790
-minimum-hpadding: 6px;
791
font-weight: bold;
792
color: $text2;
793
transition-duration: $duration;
794
padding-left: 16px;
795
padding-right: 16px;
796
min-height: $medium-size;
797
padding: 0 16px * 2;
798
&:hover {
799
background-color: $overlay-hover;
800
color: $text;
801
text-shadow: none;
802
}
803
&:active {
804
background-color: $overlay-active;
805
color: $text;
806
transition-duration: $duration-ripple;
807
}
808
&:selected {
809
border-bottom-width: 0;
810
border-color: transparent;
811
background-color: rgba($surface, 0.01);
812
box-shadow: inset 0 -2px 0px $primary;
813
color: $text;
814
text-shadow: none;
815
}
816
}
817
StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
818
StBoxLayout#ResultsArea { spacing: 4px; }
819
}
820
.lg-dialog {
822
StEntry {
823
selection-background-color: $overlay-selected;
824
selected-color: $text;
825
}
826
.shell-link {
827
color: $primary;
828
&:hover { color: $primary; }
829
}
830
}
831
.lg-completions-text {
833
font-size: 1em;
834
font-style: italic;
835
}
836
.lg-obj-inspector-title {
838
spacing: 4px;
839
}
840
.lg-obj-inspector-button {
842
min-height: $medium-size;
843
min-width: 64px - 8px * 2;
844
padding: 0 8px;
845
border: none;
846
border-radius: $corner-radius;
847
@include type(button);
848
@include button(flat-normal);
849
&:hover { @include button(flat-hover); }
850
&:active { @include button(flat-active); }
851
&:insensitive { @include button(flat-insensitive); }
852
&:focus { @include button(flat-focus); }
853
&:hover { border: none; }
854
}
855
#lookingGlassExtensions { padding: 4px; }
857
.lg-extensions-list {
859
padding: 4px;
860
spacing: 6px;
861
}
862
.lg-extension {
864
border: none;
865
border-radius: $corner-radius;
866
padding: 4px;
867
}
868
.lg-extension-name {
870
@include type(headline5);
871
}
872
.lg-extension-meta {
874
spacing: 6px;
875
}
876
#LookingGlassPropertyInspector {
878
background: $surface;
879
border: none;
880
border-radius: $corner-radius;
881
padding: 6px;
882
box-shadow: $shadow-4;
883
}
884