~cadence/cloudtube

ref: ec34702d90a94d70c1d531fe7b6c57b5d1c30802 cloudtube/sass/includes/forms.sass -rw-r--r-- 2.5 KiB
ec34702dCadence Ember Fix footer on chromium 8 months ago
                                                                                
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
@use "colors.sass" as c

@mixin disabled
  background-color: c.$bg-dark
  color: #808080

fieldset
  border: none
  padding: 55px 0px 0px 0px
  position: relative

  @media screen and (max-width: 400px)
    padding-top: 70px

  legend
    position: absolute
    top: 5px
    left: 0px
    width: 100%
    font-size: 28px
    font-weight: bold
    padding: 0
    border-bottom: 1px solid #333
    line-height: 1.56

    @media screen and (max-width: 400px)
      margin-top: 15px


.field-row
  line-height: 1
  display: grid
  grid-template-areas: "label input" "description description"
  align-items: center
  justify-content: space-between
  position: relative
  padding-bottom: 5px
  margin-bottom: 5px
  border-bottom: 1px solid #999

  @media screen and (max-width: 400px)
    flex-direction: column
    align-items: start
    padding-bottom: 15px

  &__label
    grid-area: label
    padding: 8px 8px 8px 0px
    color: #fff

  &__input
    grid-area: input
    justify-self: end

  &__description
    grid-area: description
    white-space: pre-line
    margin: 12px 0px 18px
    font-size: 16px
    color: #ccc

//
  .checkbox-row
    .pill
      display: flex
      align-items: center
      user-select: none

    .fake-checkbox
      -webkit-appearance: none
      background-color: white
      width: 16px
      height: 16px
      padding: 0px
      border: 1px solid #666
      border-radius: 3px
      margin-left: 8px
      position: relative
      outline: none

    .checkbox
      display: none

      &:checked + .pill .fake-checkbox
        background: center center / contain url(/static/img/tick.svg)

      &:disabled + .pill
        @include disabled

        .fake-checkbox
          @include disabled

      &.checkbox:not(:disabled) + .pill
        @include acts-like-button
        cursor: pointer

@mixin checkbox-hider($base)
  ##{$base}
    position: relative
    left: 10px
    display: block
    z-index: 1
    height: 42px
    margin: 0

  .#{$base}-container
    position: relative
    display: grid // why does the default not work???
    top: -42px
    background: c.$bg-accent-x
    line-height: 1
    border-radius: 8px
    margin-bottom: -18px

    .#{$base}-label
      padding: 12px 0px 12px 32px
      cursor: pointer

@mixin single-button-form
  display: inline-block
  white-space: pre-wrap // preserve whitespace inside the form at the edge

  > button
    background: none
    padding: 0
    margin: 0
    border: none
    color: inherit
    font-family: inherit
    font-size: inherit
    text-decoration: underline