git ssb

1
Thread {
2
  background-color: #eee
3
  padding: 1rem
4
  font-family: 'arial'
5
6
  max-width: 1400px
7
8
  display: flex
9
  flex-direction: column
10
11
  div.my-chunk {
12
    $chunk
13
14
    justify-content: space-between
15
    
16
    div.avatar {
17
      visibility: hidden
18
    }
19
20
    div.msgs {
21
      div.msg-row {
22
        div.msg {
23
          $primaryColor
24
25
          border-bottom-left-radius: .7rem
26
          border-top-left-radius: .7rem
27
        }
28
        :first-child {
29
          div.msg {
30
            border-top-right-radius: .7rem
31
          }
32
        }
33
        :last-child {
34
          div.msg {
35
            border-bottom-right-radius: .7rem
36
          }
37
        }
38
      }
39
    }
40
  }
41
42
  div.other-chunk {
43
    $chunk
44
45
    div.msgs {
46
47
      div.msg-row {
48
        div.msg {
49
          border-bottom-right-radius: .7rem
50
          border-top-right-radius: .7rem
51
        }
52
        :first-child {
53
          div.msg {
54
            border-top-left-radius: .7rem
55
          }
56
        }
57
        :last-child {
58
          div.msg {
59
            border-bottom-left-radius: .7rem
60
          }
61
        }
62
      }
63
    }
64
  }
65
}
66
67
$chunk {
68
  display: flex
69
  margin-bottom: .5rem
70
71
  div.avatar {
72
    background-color: grey
73
    width: 2rem
74
    height: 2rem
75
    border-radius: 1rem
76
77
    margin-right: 1rem
78
  }
79
80
  div.msgs {
81
    max-width: 80%
82
    div.msg-row {
83
      display: flex
84
85
      div.msg {
86
        line-height: 1.2rem
87
        background-color: #fff
88
        padding: .7rem
89
        margin-bottom: .3rem 
90
        border-radius: .3rem
91
      }
92
      div.msg-spacer {
93
        flex-grow: grow
94
      }
95
    }
96
  }
97
}
98
99