git ssb

1
Compose {
2
  $maxWidth
3
4
  display: flex
5
  flex-direction: column
6
7
  textarea {
8
    $fontBasic
9
10
    padding: 1rem
11
    border-radius: 1rem
12
    $borderSubtle
13
    margin-bottom: .5rem
14
15
    outline: none
16
  }
17
18
  section.actions {
19
    display: flex
20
    flex-direction: row
21
    align-items: center
22
    justify-content: flex-end
23
24
    margin-top: .4rem
25
26
    input { flex-grow: 1 }
27
28
    input[type="file"] {
29
      /* padding: .5rem 0 */
30
31
      /* width: 2.5rem */
32
      /* height: 1.5rem */
33
      margin-left: .5rem
34
      color: transparent
35
36
      ::-webkit-file-upload-button {
37
        visibility: hidden
38
      }
39
40
      ::before {
41
        $attachButton
42
        /* padding-top: .3rem */
43
44
        /* content: '📎' */
45
        content: url('file.png')
46
        font-size: 1rem
47
48
        outline: none
49
        white-space: nowrap
50
        -webkit-user-select: none
51
      }
52
53
      :active, :focus {
54
        outline: none
55
        box-shadow: none
56
      }
57
    }
58
59
    div.Button {
60
      margin-left: .5rem
61
    }
62
  }
63
64
  -expanded {
65
    textarea {
66
      height: 200px
67
      transition: height .15s ease-out
68
    }
69
70
    input.channel {
71
      display: flex
72
    }
73
74
    section.actions {
75
      display: flex
76
    }
77
  }
78
79
  -contracted {
80
    textarea {
81
      height: 50px
82
      transition: height .15s ease-in
83
    }
84
85
    input.channel {
86
      display: none
87
    }
88
89
    section.actions {
90
      display: none
91
    }
92
  }
93
94
}
95
96
$attachButton {
97
  /* background: #fff */
98
  color: #666
99
  /* padding: .5rem */
100
  /* border: 1px solid #b9b9b9 */
101
  border-radius: 4rem
102
  margin: 0
103
  cursor: pointer
104
}
105