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
    width: 13rem
11
    overflow-y: auto
12
    overflow-x: hidden
13
14
    border-right: 1px gainsboro solid
15
16
    section {
17
      header {
18
        $colorFontSubtle
19
        padding: .5rem 1rem
20
      }
21
22
      div.Option {}
23
24
      hr {
25
        border: 1px solid gainsboro
26
        border-bottom: none
27
        margin: 0
28
      }
29
    }
30
31
    -one {}
32
    -two {}
33
  }
34
}
35
36
Option {
37
  min-width: 8rem
38
  padding: .5rem 1rem
39
  display: flex
40
  align-items: center
41
42
  :hover {
43
    cursor: pointer
44
    $backgroundSelected
45
  }
46
47
  -selected {
48
    $backgroundSelected
49
  }
50
51
  div.spacer {
52
    display: flex
53
    align-self: center
54
    div.alert {
55
      position: relative
56
      width: 1.2rem
57
      height: 1.2rem
58
      border-radius: 1rem
59
      top: -.2rem
60
      left: -.2rem
61
62
      background-color: red
63
      color: #fff
64
      font-size: .8rem
65
66
      display: flex
67
      justify-content: center
68
      align-items: center
69
      align-self: flex-start
70
    }
71
  }
72
73
  div.circle {
74
    width: 3.6rem
75
    position: relative
76
77
    div.alert {
78
      position: absolute
79
      width: 1.2rem
80
      height: 1.2rem
81
      border-radius: 1rem
82
      top: -.2rem
83
      left: -.2rem
84
85
      background-color: red
86
      color: #fff
87
      font-size: .8rem
88
89
      display: flex
90
      justify-content: center
91
      align-items: center
92
    }
93
94
    
95
    a img {
96
   
97
    }
98
99
    i {
100
      $circleSmall
101
      $colorPrimary
102
      font-size: 1.3rem
103
      display: flex
104
      justify-content: center
105
      align-items: center
106
    }
107
  }
108
109
  div.label {
110
    $markdownSmall 
111
    (a) {
112
      $colorFontBasic
113
      :hover { text-decoration: none }
114
    }
115
116
    flex-grow: 1
117
118
    display: flex
119
    align-items: center
120
    min-height: 3rem
121
122
    div.Button {
123
      flex-grow: 1
124
    }
125
  }
126
}
127