html-reference/sass/attribute.sass at master · csseditor/html-reference · GitHub

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
.attribute--required
  .attribute-name
    .tag
      background: $red
      color: $red-invert

.attribute--novalue,
.attribute--novaluebut
  .attribute-name
    .tag
      background: $purple-light

.attribute-name
  .tag
    background: lavender
    background: #BADBFF
    // color: $plum

.attribute-is-required
  color: $red
  font-size: 0.8em

.attribute-is-novalue
  color: $purple
  font-size: 0.8em

.attribute-description
  font-size: 0.8em
  line-height: 1.4
  margin-top: 0.5em
  a:hover
    text-decoration: underline
  code
    background: $background
    border-radius: 2px
    padding: 0 4px 2px
    position: relative
    top: -1px
    vertical-align: baseline

.value-name
  position: relative
  .tag
    background: $yellow
    // color: $yellow-invert
    background: #DEFF82
    &:before
      bottom: 50%
      left: 100%
      transform: translateX(0) translateY(50%)
    &:after
      color: #000
      content: "="
      font-weight: $weight-normal
      margin-right: 0.5em
      opacity: 0.5
      pointer-events: none
      position: absolute
      right: 100%
      top: 0
    &:hover:before
      transform: translateX(4px) translateY(50%)

.value-header
  padding-left: 1rem

.value-name
  margin-bottom: 0.5em

.value-description
  color: $text-light
  font-size: 0.7em
  line-height: 1.4
  a:hover
    text-decoration: underline
  strong
    color: inherit
  p,
  pre
    margin-bottom: 0.5em
    &:last-child
      margin-bottom: 0
  code
    background: $background
    border-radius: 2px
    padding: 0 4px 2px
    position: relative
    top: -1px
    vertical-align: baseline
  pre
    background: none
    font-size: 12px
    line-height: 1.6
    overflow: auto
    padding: 1em
    max-width: 100%
    code
      background: none
      padding: 0
      position: static

.value-preview
  font-size: 14px

.value-output
  a
    text-decoration: underline
  fieldset
    padding: 0.5em 1em 1em
  iframe
    border: inset 2px $border

+mobile
  .attribute
    margin-top: 2rem
    padding: 0 2rem
  .value
    margin-top: 1rem
  .value-preview
    margin-top: 0.5rem
    padding-left: 1rem

+desktop
  .attribute
    display: flex
    margin-top: 2rem
    padding: 0 3rem
  .attribute-header
    flex-grow: 0
    flex-shrink: 0
    padding-right: 1rem
    width: 20%
  .attribute-values
    flex-grow: 1
    flex-shrink: 1
    width: 80%
  .value
    display: flex
  .value + .value
    margin-top: 1rem
  .value--example
    margin-top: 0.5rem !important
  .value-header
    flex-grow: 1
    flex-shrink: 1
    padding-right: 2rem
  .value-preview
    flex-shrink: 0
    width: 30%
  .attribute--novalue
    .attribute-header
      width: 76%
    .value-header
      display: none
    .value-preview
      width: 100%