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
      z-index: 99
66
      position: relative
67
      width: 1.2rem
68
      height: 1.2rem
69
      border-radius: 1rem
70
      /* top: -.2rem */
71
      left: -.2rem
72
73
      background-color: red
74
      color: #fff
75
      font-size: .8rem
76
77
      display: flex
78
      justify-content: center
79
      align-items: center
80
      align-self: flex-start
81
    }
82
  }
83
84
  div.circle {
85
    margin-right: .6rem
86
87
    position: relative
88
89
    div.alert {
90
      position: absolute
91
      width: 1.2rem
92
      height: 1.2rem
93
      border-radius: 1rem
94
      top: -.2rem
95
      left: -.2rem
96
97
      background-color: red
98
      color: #fff
99
      font-size: .8rem
100
101
      display: flex
102
      justify-content: center
103
      align-items: center
104
    }
105
106
    img {}
107
    div.many-images {
108
      /* this width refernces avatarSmall */
109
      width: 2.8rem
110
      height: 2.8rem
111
112
      display: flex
113
      flex-wrap: wrap
114
      justify-content: center
115
      align-items: center
116
117
      img {
118
      }
119
    }
120
    
121
    i {
122
      $circleSmall
123
      $colorPrimary
124
      font-size: 1.3rem
125
126
      display: flex
127
      justify-content: center
128
      align-items: center
129
    }
130
  }
131
132
  div.label {
133
    $markdownSmall 
134
    (a) {
135
      $colorFontBasic
136
      :hover { text-decoration: none }
137
    }
138
139
    flex-grow: 1
140
141
    display: flex
142
    align-items: center
143
    min-height: 3rem
144
145
    div.Button {
146
      flex-grow: 1
147
    }
148
  }
149
}
150