git ssb

1
Thread {
2
  background-color: #f7f7f7
3
  font-family: 'arial'
4
  padding: 1rem
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: .9rem
26
          border-top-left-radius: .9rem
27
        }
28
        :first-child {
29
          div.msg {
30
            border-top-right-radius: .9rem
31
          }
32
        }
33
        :last-child {
34
          div.msg {
35
            border-bottom-right-radius: .9rem
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: 1.5px #ddd solid
50
          border-bottom-right-radius: .9rem
51
          border-top-right-radius: .9rem
52
        }
53
        :first-child {
54
          div.msg {
55
            border-top-left-radius: .9rem
56
          }
57
        }
58
        :last-child {
59
          div.msg {
60
            border-bottom-left-radius: .9rem
61
          }
62
        }
63
      }
64
    }
65
  }
66
}
67
68
$chunk {
69
  display: flex
70
  margin-bottom: .5rem
71
72
  div.avatar {
73
    background-color: #333
74
    $smallAvatar
75
76
    img {
77
      $smallAvatar
78
    }
79
80
    margin-right: 1rem
81
  }
82
83
  div.msgs {
84
    max-width: 80%
85
    div.msg-row {
86
      display: flex
87
88
      div.msg {
89
        line-height: 1.2rem
90
        background-color: #fff
91
        padding: 0 .7rem
92
        margin-bottom: .1rem 
93
        border-radius: .3rem
94
      }
95
      div.msg-spacer {
96
        flex-grow: grow
97
      }
98
    }
99
  }
100
}
101
102