]> BookStack Code Mirror - bookstack/blob - resources/assets/sass/_forms.scss
typo in readme.md
[bookstack] / resources / assets / sass / _forms.scss
1
2 .input-base {
3   background-color: #FFF;
4   border-radius: 3px;
5   border: 1px solid #D4D4D4;
6   display: inline-block;
7   font-size: $fs-s;
8   padding: $-xs*1.5;
9   color: #666;
10   width: 250px;
11   max-width: 100%;
12   &.neg, &.invalid {
13     border: 1px solid $negative;
14   }
15   &.pos, &.valid {
16     border: 1px solid $positive;
17   }
18   &.disabled, &[disabled] {
19     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==);
20   }
21   &:focus {
22     outline: 0;
23   }
24 }
25
26 .fake-input {
27   @extend .input-base;
28   overflow: auto;
29 }
30
31 #html-editor {
32   display: none;
33 }
34
35 #markdown-editor {
36   position: relative;
37   z-index: 5;
38   #markdown-editor-input {
39     font-style: normal;
40     font-weight: 400;
41     padding: $-xs $-m;
42     color: #444;
43     border-radius: 0;
44     max-height: 100%;
45     flex: 1;
46     border: 0;
47     width: 100%;
48     &:focus {
49       outline: 0;
50     }
51   }
52   .markdown-display, .markdown-editor-wrap {
53     flex: 1;
54     position: relative;
55   }
56   .markdown-editor-wrap {
57     display: flex;
58     flex-direction: column;
59     border: 1px solid #DDD;
60     width: 50%;
61   }
62 }
63
64 .markdown-display {
65   padding: 0 $-m 0;
66   margin-left: -1px;
67   overflow-y: scroll;
68   &.page-content {
69     margin: 0 auto;
70     width: 100%;
71     max-width: 100%;
72   }
73   [drawio-diagram]:hover {
74     outline: 2px solid $primary;
75   }
76 }
77
78 .editor-toolbar {
79   width: 100%;
80   padding: $-xs $-m;
81   font-size: 11px;
82   line-height: 1.6;
83   border-bottom: 1px solid #DDD;
84   background-color: #EEE;
85   flex: none;
86   &:after {
87     content: '';
88     display: block;
89     clear: both;
90   }
91 }
92
93
94 label {
95   display: block;
96   line-height: 1.4em;
97   font-size: 0.94em;
98   font-weight: 400;
99   color: #999;
100   text-transform: uppercase;
101   padding-bottom: 2px;
102   margin-bottom: 0.2em;
103   &.inline {
104     display: inline-block;
105   }
106 }
107
108 label.radio, label.checkbox {
109   font-weight: 400;
110   user-select: none;
111   input[type="radio"], input[type="checkbox"] {
112     margin-right: $-xs;
113   }
114 }
115
116 label.inline.checkbox {
117   margin-right: $-m;
118 }
119
120 label + p.small {
121   margin-bottom: 0.8em;
122 }
123
124 table.form-table {
125   max-width: 100%;
126   td {
127     overflow: hidden;
128     padding: $-xxs/2 0;
129   }
130 }
131
132 input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="search"], input[type="url"], input[type="password"], select, textarea {
133   @extend .input-base;
134 }
135
136 input[type=date] {
137   width: 190px;
138 }
139
140 .toggle-switch {
141   display: inline-block;
142   background-color: #BBB;
143   width: 36px;
144   height: 14px;
145   border-radius: 7px;
146   position: relative;
147   transition: all ease-in-out 120ms;
148   cursor: pointer;
149   user-select: none;
150   &:after {
151     content: '';
152     display: block;
153     position: relative;
154     left: 0;
155     margin-top: -3px;
156     width: 20px;
157     height: 20px;
158     border-radius: 50%;
159     background-color: #fafafa;
160     border: 1px solid #CCC;
161     box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
162     transition: all ease-in-out 120ms;
163   }
164   &.active {
165     background-color: rgba($positive, 0.4);
166     &:after {
167       left: 16px;
168       background-color: $positive;
169       border: darken($positive, 20%);
170     }
171   }
172 }
173 .toggle-switch-checkbox {
174   display: none;
175 }
176 input:checked + .toggle-switch {
177   background-color: rgba($positive, 0.4);
178   &:after {
179     left: 16px;
180     background-color: $positive;
181     border: darken($positive, 20%);
182   }
183 }
184
185 .form-group {
186   margin-bottom: $-s;
187   textarea {
188     display: block;
189     width: 100%;
190     min-height: 64px;
191   }
192 }
193
194 .form-group {
195   .text-pos, .text-neg {
196     padding: $-xs 0;
197   }
198 }
199
200 .form-group[collapsible] {
201   margin-left: -$-m;
202   margin-right: -$-m;
203   padding: 0 $-m;
204   border-top: 1px solid #DDD;
205   border-bottom: 1px solid #DDD;
206   .collapse-title {
207     margin-left: -$-m;
208     margin-right: -$-m;
209     padding: $-s $-m;
210   }
211   .collapse-title, .collapse-title label {
212     cursor: pointer;
213   }
214   .collapse-title label {
215     padding-bottom: 0;
216     margin-bottom: 0;
217     color: inherit;
218   }
219   .collapse-title label:before {
220     display: inline-block;
221     content: '▸';
222     margin-right: $-m;
223     transition: all ease-in-out 400ms;
224     transform: rotate(0);
225   }
226   .collapse-content {
227     display: none;
228     padding-bottom: $-m;
229   }
230   &.open .collapse-title label:before {
231     transform: rotate(90deg);
232   }
233 }
234
235 .inline-input-style {
236   display: block;
237   width: 100%;
238   padding: $-s;
239 }
240
241 .title-input input[type="text"] {
242   @extend .inline-input-style;
243   margin-top: 0;
244   font-size: 2em;
245 }
246
247 .title-input.page-title {
248   font-size: 0.8em;
249   .input {
250     border: 0;
251     margin-bottom: -1px;
252   }
253   input[type="text"] {
254     max-width: 840px;
255     margin: 0 auto;
256     border: none;
257   }
258 }
259
260 .page-title input {
261   display: block;
262   width: 100%;
263   font-size: 1.4em;
264 }
265
266 .description-input textarea {
267   @extend .inline-input-style;
268   font-size: $fs-m;
269   color: #666;
270   width: 100%;
271 }
272
273 div[editor-type="markdown"] .title-input.page-title input[type="text"] {
274   max-width: 100%;
275 }
276
277 .search-box {
278   max-width: 100%;
279   position: relative;
280   button {
281     background-color: transparent;
282     border: none;
283     color: $primary;
284     padding: 0;
285     cursor: pointer;
286     position: absolute;
287     left: 8px;
288     top: 9.5px;
289   }
290   input {
291     display: block;
292     padding-left: $-l;
293     width: 300px;
294     max-width: 100%;
295   }
296 }
297
298 .outline > input {
299   border: 0;
300   border-bottom: 2px solid #DDD;
301   border-radius: 0;
302   &:focus, &:active {
303     border: 0;
304     border-bottom: 2px solid #AAA;
305     outline: 0;
306   }
307 }
308
309 #login-form label[for="remember"] {
310   margin: 0;
311 }
312 #login-form label.toggle-switch {
313   margin-left: $-xl;
314 }
315
316 .image-picker img {
317   background-color: #BBB;
318 }