git ssb

1
Compose {
2
  display: flex
3
  flex-direction: column
4
5
  padding: 1rem .5rem 1rem 7.3rem
6
7
  textarea {
8
    border: 1px solid gainsboro
9
  }
10
11
  input.channel {
12
    border: 1px solid gainsboro
13
    padding: .5rem
14
    margin-top: 1rem
15
16
    :disabled {
17
      background-color: #e5e5e5
18
      cursor: not-allowed
19
    }
20
  }
21
22
  section.actions {
23
    display: flex
24
    flex-direction: row
25
    align-items: baseline
26
27
    margin-top: .4rem
28
29
    input[type="file"] {
30
      flex-grow: 1
31
32
      padding: .5rem 0
33
34
      width: 5.5rem
35
      color: transparent
36
37
      ::-webkit-file-upload-button {
38
        visibility: hidden
39
      }
40
41
      ::before {
42
        $composeButton
43
        padding-top: .3rem
44
45
        content: '📎'
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
    button {
60
      $composeButton
61
62
      text-transform: uppercase
63
      font-weight: bold
64
      font-size: .7rem
65
    }
66
  }
67
68
  -expanded {
69
    textarea {
70
      height: 200px
71
      transition: height .15s ease-out
72
    }
73
74
    input.channel {
75
      display: flex
76
    }
77
78
    section.actions {
79
      display: flex
80
    }
81
  }
82
83
  -contracted {
84
    textarea {
85
      height: 50px
86
      transition: height .15s ease-in
87
    }
88
89
    input.channel {
90
      display: none
91
    }
92
93
    section.actions {
94
      display: none
95
    }
96
  }
97
98
}
99
100
$composeButton {
101
  background: #fff
102
  color: #666
103
  border: 1px solid #bbb
104
  border-radius: .5rem
105
  padding: .5rem
106
  margin: 0
107
  cursor: pointer
108
}
109