-
-
Notifications
You must be signed in to change notification settings - Fork 1.8k
/
ui.css
163 lines (133 loc) · 3.13 KB
/
ui.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
#ui__ac {
&-inner {
max-height: 400px;
overflow-x: hidden;
overflow-y: auto;
position: relative;
-webkit-overflow-scrolling: touch;
> .menu-link {
padding: 6px 8px;
}
}
}
.ui__notifications {
position: fixed;
z-index: 99;
width: 100%;
top: 3.2em;
&-content {
@apply inset-0 flex items-end justify-center px-4 py-3
pointer-events-none sm:px-6 sm:py-3 sm:items-start
sm:justify-end;
}
.notification-area {
background-color: var(--ls-tertiary-background-color, #fff);
color: var(--ls-primary-text-color);
}
}
.ui__toggle {
.wrapper {
@apply relative inline-block flex-shrink-0
h-6 w-11 border-2 border-transparent flex
rounded-full cursor-pointer focus:outline-none focus:shadow-outline;
}
.switcher {
@apply inline-block h-5 w-5 rounded-full bg-white shadow;
}
&.is-small {
.wrapper {
@apply h-4 w-8;
}
.switcher {
@apply h-3 w-3;
}
}
}
.ui__modal {
@apply fixed bottom-0 inset-x-0
sm:inset-0 sm:flex sm:items-center sm:justify-center
px-4 pb-4;
&-overlay {
@apply fixed inset-0 transition-opacity;
}
&-overlay div {
background: var(--ls-tertiary-background-color);
}
&-panel {
@apply relative bg-white rounded-md p-8 shadow-xl;
}
&-close {
@apply text-gray-400 hover:text-gray-500
focus:outline-none focus:text-gray-500
transition ease-in-out duration-150;
}
}
.ui__confirm-modal {
.sublabel {
display: flex;
padding: 2px 0;
align-items: center;
font-size: 14px;
input[type=checkbox] {
margin-right: 8px;
}
}
}
.ui__button {
@apply inline-flex items-center px-3 py-2 border border-transparent
text-sm leading-4 font-medium rounded-md text-white
focus:outline-none transition ease-in-out duration-150 mt-1;
&:disabled {
opacity: .5;
}
&.is-link {
@apply text-white;
}
&[intent='logseq'] {
@apply focus:border-gray-500 dark:hover:text-gray-200;
color: var(--ls-primary-text-color);
background: var(--ls-secondary-background-color);
&:hover {
color: var(--ls-link-text-color);
}
}
}
.dropdown-wrapper {
background-color: var(--ls-primary-background-color, #fff);
min-width: 12rem;
}
.dropdown-caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
content: "";
border-top-style: solid;
border-top-width: 4px;
border-right: 4px solid transparent;
border-bottom: 0 solid transparent;
border-left: 4px solid transparent;
}
.form-select {
@apply block w-full pl-3 pr-10 py-2 text-base leading-6
border-gray-300 focus:outline-none focus:shadow-outline-blue sm:text-sm sm:leading-5;
background-color: var(--ls-primary-background-color, transparent);
background-repeat: no-repeat;
border-width: 1px;
border-color: var(--ls-border-color);
&.is-small {
@apply pl-2 py-1.5 sm:leading-4 sm:text-xs;
}
}
.form-input {
@apply block w-full pl-2
sm:text-sm sm:leading-5;
border-width: 1px;
border-color: var(--ls-border-color);
&:focus {
box-shadow: 0 0 0 2px rgba(164, 202, 254, 0.45);
}
&.is-small {
@apply py-1.5 sm:leading-4 sm:text-xs;
}
}