git ssb

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