git ssb

1
Relationships {
2
  margin-bottom: 2rem
3
4
  header {
5
    margin-bottom: .8rem
6
    border-bottom: 1px gainsboro solid
7
  }
8
9
  div.relationship-status {
10
    margin: 0 
11
    margin-bottom: 1rem
12
13
    display: flex
14
    justify-content: space-between
15
    align-items: center
16
17
18
    section {
19
      button { margin: 0 }
20
21
      -friendship {
22
        display: flex
23
        div.relationship-status {
24
          margin: auto
25
          margin-left: .5rem
26
        }
27
28
      }
29
      -blocking {
30
        margin-left: 8rem
31
        position: relative
32
33
        button {
34
          i.fa { margin-right: .5rem }
35
        }
36
37
        div.explainer {
38
          visibility: hidden
39
          position: absolute
40
          background: #fff
41
          width: 24rem
42
          left: -20rem
43
          bottom: 2rem
44
          padding: .5rem
45
          box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 8px
46
47
          ul {
48
            font-size: .8rem
49
            padding-left: 1rem
50
          }
51
        }
52
53
        :hover {
54
          div.explainer {
55
            visibility: visible
56
          }
57
        }
58
      }
59
    }
60
  }
61
62
  div.groups {
63
    div.tabs {
64
      display: grid
65
      grid-auto-flow: column
66
      justify-content: start
67
      grid-gap: 2rem
68
69
      div.tab {
70
        color: #777
71
        cursor: pointer
72
        padding-bottom: .5rem
73
        border-bottom: 2px solid #fff
74
75
        margin: 1rem 0 .5rem
76
77
        -active { border-bottom: 2px solid #666 }
78
        :hover { color: #9754de }
79
80
        display: grid
81
        grid-auto-flow: column
82
        grid-gap: .5rem
83
84
        div.label {
85
          text-transform: uppercase 
86
          letter-spacing: 1px
87
          font-size: .8rem
88
          font-weight: 600
89
        }
90
        div.count {
91
          font-size: .8rem
92
          color: #999
93
        }
94
      }
95
    }
96
97
    div.group {
98
      display: grid
99
      grid-template-columns: repeat(auto-fit, 4rem)
100
    }
101
  }
102
}
103