summaryrefslogtreecommitdiffstats
path: root/client/components/forms/forms.styl
blob: bfae2e7cdb2dfa28d9d432b81f3b4b421d07c72b (plain)
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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
@import 'nib'

select,
textarea,
input:not([type=file]),
button
  box-sizing: border-box
  background-color: #ebebeb
  border: 1px solid #ccc
  border-radius: 3px
  display: block
  margin-bottom: 12px
  min-height: 34px
  padding: 7px

  &.full
    width: 100%

  &.input-error
    background-color: #ece9e9
    border-color: #ba1212

  &:focus
    outline: 0

input[type="file"]
  margin-bottom: 16px

input[type="radio"]
  -webkit-appearance: radio
  min-height: inherit

input[type="text"],
input[type="password"],
input[type="email"]
  transition: background 85ms ease-in,
        border-color 85ms ease-in
  width: 250px

  &.inline-input
    background: none
    border: 0
    margin: 0
    padding: 2px
    min-height: 0
    height: 18px
    width: 200px

  &.full-line
    width: 100%

input[type="email"]:invalid
  box-shadow: none

input[type="text"],
input[type="password"],
input[type="email"],
textarea

  &:hover
    border-color: #999

    &.input-error
      border-color: #ba1212

  &:focus
    background: #fff
    border-color: #318ec4
    box-shadow: 0 0 2px #318ec4

    &.input-error
      background-color: #f8f7f7
      border-color: #ba1212
      box-shadow: 0 0 2px #d11515

  &:disabled
    background-color: #dcdcdc
    border-color: #bfbfbf
    color: #8c8c8c
    -webkit-touch-callout: none
    user-select: none

select
  max-height: 300px
  width: 256px
  margin-bottom: 8px

  &.inline
  	width: 100%

option[disabled]
  color: #8c8c8c

textarea
  height: 150px
  transition: background 85ms ease-in,
        border-color 85ms ease-in
  resize: vertical
  width: 100%

  &.editor
    resize: none
    padding-bottom: 22px


.button
  border-radius: 3px
  text-decoration: none
  position: relative

input[type="submit"],
button
  background: #cfcfcf
  background: linear-gradient(#cfcfcf, #c2c2c2)
  border: none
  cursor: pointer
  display: inline-block
  font-weight: 700
  line-height: 22px
  margin: 8px 4px 0 0
  padding: 7px 20px
  text-align: center

  .wide
    padding-left: 30px
    padding-right: 30px

  &:hover,
  &:focus
    background: #c2c2c2
    background: linear-gradient(#c2c2c2, #b5b5b5)

  &:active
    background: #b5b5b5
    background: linear-gradient(#b5b5b5, #a8a8a8)
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1)

    &:hover,
    &:focus,
    &:active
      background: #e6e6e6
      background: linear-gradient(#e6e6e6, #e6e6e6)

  &.primary
    background: #005377
    box-shadow: 0 1px 0 #4d4d4d
    color: white

    &:hover,
    &:focus
      background: #004766

    &:active
      background: #01628C

  &.negate
    &:hover,
    &:focus
      background: #990f0f
      background: linear-gradient(#990f0f, #7d0c0c)
      box-shadow: 0 1px 0 #4d4d4d
      color: #fff

    &:active
      background: #7d0c0c
      box-shadow: 0 1px 0 #4d4d4d
      color: #fff

  i.fa
    margin-right: 10px

input[type="submit"].disabled,
input[type="submit"]:disabled,
input[type="button"].disabled,
button.disabled,
.button.disabled

  &,
  &:hover,
  &:active
    background: #cfcfcf
    cursor: default
    box-shadow: none
    color: #a8a8a8

fieldset
  border: 1px solid #bfbfbf
  padding: 15px
  margin-bottom: 15px

input[type="hidden"]
  display: none

.radio-div,
.check-div
  display: block
  margin: 0 0 4px 20px
  min-height: 20px
  position: relative

  input
    left: -18px
    min-height: 0
    margin: 0
    padding: 0
    position: absolute
    top: 2px

  label
    font-weight: 400

label
  display: block
  font-weight: 700
  margin-bottom: 4px

  &.form-error
    color: #ba1212

input,
textarea
  &::-webkit-input-placeholder,
  &::-moz-placeholder
    color: #8c8c8c

.edit-controls,
.add-controls
  display: flex
  align-items: baseline
  margin-top: 0

  button[type=submit]
  input[type=button]
    float: left
    height: 32px
    margin-top: -2px
    padding-top: 5px
    padding-bottom: 5px

  .fa-times-thin
    font-size: 26px
    margin: 3px 4px

// Material Design checkboxes
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked
  position: absolute
  left: -9999px
  visibility: hidden

.materialCheckBox
  position: relative
  width: 13px
  height: @width
  z-index: 0
  border: 2px solid #5a5a5a
  border-radius: 1px
  transition: .2s
  margin: 0
  cursor: pointer

  &.is-checked
    top: -4px
    left: -3px
    width: 7px
    height: 15px
    margin-right: 6px
    border-top: 2px solid transparent
    border-left: 2px solid transparent
    transform: rotate(40deg)
    -webkit-backface-visibility: hidden
    transform-origin: 100% 100%

.button-link
  background: #fff
  background: linear-gradient(#fff, #f5f5f5)
  border-radius: 3px
  box-sizing: border-box
  user-select: none
  border: 1px solid #e3e3e3
  border-bottom-color: #c2c2c2
  cursor: pointer
  display: block
  font-weight: 700
  height: 34px
  margin-top: 6px
  max-width: 300px
  padding: 7px
  position: relative
  text-decoration: none
  overflow: ellipsis

  .on
    background: #48b512
    background: linear-gradient(#48b512, #3d990f)
    border-radius: 3px
    color: #fff
    display: none
    font-size: 12px
    font-weight: 700
    height: 17px
    line-height: @height
    margin: 0
    padding: 2px 4px
    position: absolute
    right: 5px
    top: 5px
    text-align: center

  &.is-on
    padding-right: 30px
    max-width: 196px

    .on
      display: block

  &.inline
    color: #666
    padding: 2px 14px
    margin-left: 4px

  &.setting
    height: 52px
    float: left
    position: relative
    margin-top: 0

    &.disabled
      background: #fff
      border-color: #e9e9e9
      color: #8c8c8c
      cursor: default

      select
        display: none

      &:hover .label
        color: #8c8c8c

      &,
      &:hover,
      &:active,
      &.primary,
      &.primary:hover,
      &.primary:active
        background: #cfcfcf
        border-color: #c2c2c2
        border-bottom-color: #b5b5b5
        cursor: default
        box-shadow: none
        color: #a8a8a8

    .label
      color: #8c8c8c
      display: block
      font-size: 12px
      line-height: 14px
      margin-bottom: 0

    &:hover .label
      color: #eee

    .value
      display: block
      font-size: 18px
      line-height: 24px
      overflow: hidden
      text-overflow: ellipsis

    label
      display: none

    select
      border: none
      cursor: pointer
      height: 50px
      left: 0
      margin: 0
      opacity: 0
      position: absolute
      top: 0
      z-index: 2
      width: 100%

  &:hover
    background: #318ec4
    background: linear-gradient(#318ec4, #2b7cab)
    border-color: #2e85b8
    color: #fff

    .on
      background-image: none
      background-color: rgba(255, 255, 255, .3)
      border-color: transparent

  &:active
    background: #2e85b8
    background: linear-gradient(#2e85b8, #28739f)
    border-color: #2b7cab
    color: #fff

  .button-link.negate

    &:hover
      background: #990f0f
      background: linear-gradient(#990f0f, #7d0c0c)
      border-color: @background

    &:active
      background: #7d0c0c
      border-color: #990f0f


  &.primary
    background: #48b512
    background: linear-gradient(#48b512, #3d990f)
    border: 1px solid
    border-color: #3d990f
    color: #fff

    &:hover
      background: #3d990f
      background: linear-gradient(#3d990f, #327d0c)
      border-color: #3d990f

  &.danger
    background: #ba1212
    background: linear-gradient(#ba1212, #8b0e0e)
    border: 1px solid
    border-color: #a21010
    color: #fff

    &:hover
      background: #a21010
      background: linear-gradient(#a21010, #740b0b)
      border-color: #8b0e0e

button
  &.quiet-button,
  &.loud-text-button
    background: none
    text-align: left
    line-height: normal
    border: none
    box-shadow: none

    &:active
      color: #4d4d4d
      background: #d3d3d3
      box-shadow: none

  &.quiet-button
    font-weight: 400
    text-decoration: underline

  &.loud-text-button
    width: 100%

    &:hover
      color: #111

.emphasis-button,
.quiet-button
  border-radius: 3px
  user-select: none
  color: #8c8c8c
  display: block
  margin: 2px 0
  padding: 6px 8px
  position: relative

  &.w-img
    padding-left: 28px

  &:hover
    color: #4d4d4d
    background: #dcdcdc

  &:active
    color: #4d4d4d
    background: #d3d3d3

.quiet-button-large
  padding: 16px 24px

.emphasis-button
  color: #74663e
  background: #ecdfbb

  &:hover
    color: #53492d
    background: #e7d6a7

  &:active
    color: #53492d
    background: #e1cc93

.is-editable
  cursor: pointer

.big-link
  border-radius: 3px
  display: block
  margin: 6px 0 6px 40px
  padding: 11px
  position: relative
  text-decoration: none
  font-size: 16px
  line-height: 20px

  .text
    text-decoration: underline

  &:hover
    background: #dcdcdc

  &.options
    padding-right: 41px

  .option
    height: 30px
    width: @height
    position: absolute
    right: 6px
    top: 6px

  &.none
    color: #8c8c8c
    text-decoration: none

    &:hover
      background: transparent

  &.avatar-changer
    padding-right: 51px

    .member
      border: 1px solid #ccc
      border-radius: 3px
      height: 40px
      width: @height
      position: absolute
      right: 0
      top: 0

      .member-avatar
        height: 40px
        width: @height

      .member-initials
        font-size: 16px
        height: 40px
        line-height: @height
        max-height: @height

.show-more
  border-radius: 3px
  color: #8c8c8c
  display: block
  padding: 16px 8px 16px 40px
  margin: 8px 0

  &:hover
    background: #dcdcdc
    text-decoration: underline

  &.compact
    padding: 12px 8px
    margin: 8px 0 0
    text-align: center

.board-widget .show-more
  padding: 12px 8px 12px 40px

.uploader
  clear: both
  cursor: pointer
  position: relative
  height: 34px
  width: 100%

  .realfile
    cursor: pointer
    height: 34px
    line-height: @height
    position: absolute
    top: 0
    left: 0
    width: 100%
    z-index: 2
    font-size: 23px

    input[type="file"]
      cursor: pointer
      height: 34px
      line-height: @height
      margin: 0
      opacity: 0
      padding: 0
      width: 100%
      z-index: 2
      font-size: 23px

  &:hover .fakefile
    background: #318ec4
    background: linear-gradient(#318ec4, #2b7cab)
    border-color: #2e85b8
    color: #fff

.dropdown-menu
  border-radius: 2px
  overflow: hidden

  li
    border-top: none

    a
      padding: 4px 12px 4px 8px

      img
        width: 18px
        height: @width
        margin-right: 5px
        vertical-align: middle

      .minicard-label
        width: 11px
        height: @width
        border-radius: 2px
        margin: 2px 7px -2px -2px
        display: inline-block

    &.active
      background: #005377

      a, .quiet
        color: white

// Material Design Toggle Switch
.material-toggle-switch
  display: flex

.toggle-label
  position: relative
  display: block
  height: 20px
  width: 44px
  background-color: #a6a6a6
  border-radius: 100px
  cursor: pointer
  transition: all 0.3s ease

  &:after
    position: absolute
    left: -2px
    top: -3px
    display: block
    width: 26px
    height: 26px
    border-radius: 100px
    background-color: #fff
    box-shadow: 0px 3px 3px rgba(0,0,0,0.05)
    content: ''
    transition: all 0.3s ease

  &:active
    &:after
      transform: scale(1.15, 0.85)

.toggle-switch:checked ~ .toggle-label
  background-color: #6fbeb5

  &:after
    left: 20px
    background-color: #179588

.toggle-switch:checked:disabled ~ .toggle-label
  background-color: #d5d5d5
  pointer-events: none

  &:after
    background-color: #bcbdbc

.toggle-switch
  display: none

.toggle-switch-title
  margin: 0 0.5em
  display: flex


@media screen and (max-width: 800px)
  .edit-controls,
  .add-controls
    .fa-times-thin
      margin: 3px 20px