~cadence/cloudtube

ref: 739f537bc7f09d3a8f65de444076e71d87922d14 cloudtube/sass/includes/forms.sass -rw-r--r-- 2.6 KiB
739f537bCadence Ember Setting to alter recommended videos display 10 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
132
133
134
135
136
137
138
@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

  &.max-width-input
    grid-template-columns: auto 1fr

    .field-row__input
      justify-self: stretch

  &__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
    line-height: 1.2

//
  .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