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