ASCII text
1
/* Network Dialogs */
2
@use "../../../../theme";
4
@use "../../../../theme-color";
5
@use "../../typography";
6
.nm-dialog {
8
max-height: 34em;
9
min-height: 31em;
10
min-width: 32em;
11
}
12
.nm-dialog-content {
14
spacing: 20px;
15
padding: 24px;
16
}
17
.nm-dialog-airplane-box {
19
spacing: 12px;
20
}
21
.nm-dialog-airplane-headline {
23
// font-weight: bold;
24
text-align: center;
25
}
26
.nm-dialog-airplane-text {
28
color: theme-color.hint(theme-color.$on-surface);
29
}
30
// header
32
.nm-dialog-header {
33
@include typography.headline6;
34
}
35
.nm-dialog-subheader {
37
color: theme-color.hint(theme-color.$on-surface);
38
}
39
.nm-dialog-header-icon {
41
icon-size: 32px;
42
color: theme-color.hint(theme-color.$on-surface);
43
}
44
.nm-dialog-header-hbox {
46
spacing: 16px;
47
}
48
// list of networks
50
.nm-dialog-scroll-view {
51
border: 0;
52
padding: 0;
53
background-color: transparent;
54
}
55
// list item
57
.nm-dialog-item {
58
transition-duration: theme.$state-duration;
59
padding: 12px;
60
spacing: 20px;
61
border-bottom: 0;
62
border-radius: theme.$corner-radius;
63
font-size: 1em;
64
&:focus {
66
background-color: theme-color.focus-overlay(theme-color.$on-surface);
67
}
68
&:hover {
70
background-color: theme-color.hover-overlay(theme-color.$on-surface);
71
}
72
&:active {
74
transition-duration: theme.$ripple-duration;
75
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
76
}
77
&:selected {
79
background-color: theme-color.$selected-overlay;
80
color: theme-color.$on-surface;
81
}
82
}
83
// icons in list
85
.nm-dialog-icon {
86
icon-size: 16px;
87
color: theme-color.hint(theme-color.$on-surface);
88
}
89
.nm-dialog-icons {
91
spacing: .5em;
92
}
93
// no networks
95
.no-networks-label {
96
color: theme-color.hint(theme-color.$on-surface);
97
}
98
.no-networks-box {
100
spacing: 12px;
101
}
102