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