git ssb

1
SideNav {
2
  flex-shrink: 0
3
  flex-grow: 0
4
  overflow: hidden
5
  $backgroundPrimaryText
6
7
  display: flex
8
9
  div.level {
10
    min-width: 13rem
11
    max-width: 13rem
12
    overflow-y: auto
13
    overflow-x: hidden
14
15
    border-right: 1px gainsboro solid
16
17
    section {
18
      header {
19
        $colorFontSubtle
20
        padding: .5rem 1rem
21
      }
22
23
      div.Option {}
24
25
      hr {
26
        border: 1px solid gainsboro
27
        border-bottom: none
28
        margin: 0
29
      }
30
    }
31
32
    -one {}
33
    -two {}
34
  }
35
}
36
37
Option {
38
  min-width: 8rem
39
  padding: .5rem 1rem
40
  display: flex
41
  align-items: center
42
43
  :hover {
44
    cursor: pointer
45
    $backgroundSelected
46
  }
47
48
  -selected {
49
    $backgroundSelected
50
  }
51
52
  -disabled {
53
    filter: saturate(0)
54
    opacity: .5
55
    :hover {
56
      cursor: not-allowed
57
      background: initial
58
    }
59
  }
60
61
  div.spacer {
62
    display: flex
63
    align-self: center
64
    div.alert {
65
      position: relative
66
      width: 1.2rem
67
      height: 1.2rem
68
      border-radius: 1rem
69
      /* top: -.2rem */
70
      left: -.2rem
71
72
      background-color: red
73
      color: #fff
74
      font-size: .8rem
75
76
      display: flex
77
      justify-content: center
78
      align-items: center
79
      align-self: flex-start
80
    }
81
  }
82
83
  div.circle {
84
    margin-right: .6rem
85
86
    position: relative
87
88
    div.alert {
89
      position: absolute
90
      width: 1.2rem
91
      height: 1.2rem
92
      border-radius: 1rem
93
      top: -.2rem
94
      left: -.2rem
95
96
      background-color: red
97
      color: #fff
98
      font-size: .8rem
99
100
      display: flex
101
      justify-content: center
102
      align-items: center
103
    }
104
105
    img {}
106
    div.many-images {
107
      /* this width refernces avatarSmall */
108
      width: 2.8rem
109
      height: 2.8rem
110
111
      display: flex
112
      flex-wrap: wrap
113
      justify-content: center
114
      align-items: center
115
116
      img {
117
      }
118
    }
119
    
120
    i {
121
      $circleSmall
122
      $colorPrimary
123
      font-size: 1.3rem
124
125
      display: flex
126
      justify-content: center
127
      align-items: center
128
    }
129
  }
130
131
  div.label {
132
    $markdownSmall 
133
    (a) {
134
      $colorFontBasic
135
      :hover { text-decoration: none }
136
    }
137
138
    flex-grow: 1
139
140
    display: flex
141
    align-items: center
142
    min-height: 3rem
143
144
    div.Button {
145
      flex-grow: 1
146
    }
147
  }
148
}
149