git ssb

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