~cadence/cloudtube

ref: db49bb38b073479bbbabab29b5e8ebd5060e849f cloudtube/sass/includes/base.sass -rw-r--r-- 1.2 KiB
db49bb38Cadence Ember Make details/summary keyboard accessible 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
@use "colors.sass" as c

body
  background-color: c.$bg-dark
  color: c.$fg-main
  font-family: "Bariol", sans-serif
  font-size: 18px
  margin: 0
  padding: 0
  // for footer alignment
  min-height: 100vh
  display: flex
  flex-direction: column

a
  color: c.$link

pre, code
  font-size: 0.88em

code
  background: c.$bg-darker
  padding: 3px 5px
  border-radius: 4px

input, select, button
  font-family: inherit
  font-size: 16px
  min-width: 0px

button
  cursor: pointer

:focus
  outline: none

:-moz-focusring
  outline: none

::-moz-focus-inner
  border: 0

select:-moz-focusring
  color: transparent
  text-shadow: 0 0 0 c.$fg-bright

body.show-focus
  a, select, button, input, video, summary
    &:focus
      outline: 2px dotted #ddd

video
  background-color: black

details
  background-color: c.$bg-accent-x
  padding: 12px
  border-radius: 8px

  summary
    cursor: pointer
    line-height: 1
    margin-bottom: 0
    user-select: none
    color: c.$fg-main

  &[open] summary
    margin-bottom: 16px

table
  background-color: c.$bg-darker

table, td, th
  border: 1px solid c.$edge-grey
  border-collapse: collapse

td, th
  padding: 4px 8px

thead, tr:nth-child(even)
 background-color: c.$bg-darkest