git ssb

1
Relationships {
2
  header {
3
    margin-bottom: .8rem
4
    border-bottom: 1px gainsboro solid
5
  }
6
7
  div {
8
    display: flex
9
    flex-wrap: wrap
10
    justify-content: space-between
11
    align-content: flex-start
12
13
    min-height: 5rem
14
    margin-bottom: 2rem
15
16
    header {
17
      flex-basis: 100%
18
      
19
      $textSubtle
20
      font-size: .9rem
21
      
22
      margin-bottom: .2rem
23
    }
24
25
    section a {
26
      margin-right: .2rem
27
28
      img { $avatar-small }
29
    }
30
  }
31
32
  div.your-status {
33
    justify-content: flex-start
34
    align-items: center
35
36
    margin: 0 
37
38
    display: flex
39
40
    section {
41
      button { margin: 0 }
42
43
      -friendship {
44
        display: flex
45
        div.relationship-status {
46
          margin: auto
47
          margin-left: .5rem
48
        }
49
50
      }
51
      -blocking {
52
        margin-left: 8rem
53
        position: relative
54
55
        button {}
56
57
        div.explainer {
58
          visibility: hidden
59
          position: absolute
60
          background: #fff
61
          width: 24rem
62
          left: 1rem
63
          bottom: 2rem
64
          padding: .5rem
65
          box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 8px
66
67
          ul {
68
            font-size: .8rem
69
            padding-left: 1rem
70
          }
71
        }
72
73
        :hover {
74
          div.explainer {
75
            visibility: visible
76
          }
77
        }
78
      }
79
    }
80
81
  }
82
83
  div.friends {
84
    section a {
85
      margin: 0 .2rem 0.2rem 0
86
87
      img { 
88
        $avatar-large
89
      }
90
    }
91
  }
92
93
  div.follows {
94
  }
95
96
  div.followers {
97
  }
98
}
99
100
$avatar-large {
101
  width: 56px
102
  height: 56px
103
}
104
105
$avatar-small {
106
  width: 32px
107
  height: 32px
108
}
109
110
111