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.warning {
31
    color: #fff
32
    background-color: red
33
34
    height: 0
35
    padding: 0 .5rem
36
    transition: all ease-in .1s
37
38
    display: flex
39
    justify-content: space-between
40
41
42
    -open {
43
      padding: .5rem
44
      height: initial
45
    }
46
47
    i.fa { margin-right: .5rem }
48
    div.warning {
49
      strong { margin-right: .3rem }
50
    }
51
    div.close {
52
      cursor: pointer
53
    }
54
  }
55
56
  section.actions {
57
    display: flex
58
    flex-direction: row
59
    align-items: baseline
60
    justify-content: space-between
61
62
    margin-top: .4rem
63
64
    input[type="file"] {
65
66
      padding: .5rem 0
67
68
      width: 2.5rem
69
      height: 1.5rem
70
      color: transparent
71
72
      ::-webkit-file-upload-button {
73
        visibility: hidden
74
      }
75
76
      ::before {
77
        $composeButton
78
        padding-top: .3rem
79
80
        content: '📎'
81
        font-size: 1rem
82
83
        outline: none
84
        white-space: nowrap
85
        -webkit-user-select: none
86
      }
87
88
      :active, :focus {
89
        outline: none
90
        box-shadow: none
91
      }
92
    }
93
94
    button {
95
      $composeButton
96
97
      text-transform: uppercase
98
      font-weight: bold
99
      font-size: .7rem
100
    }
101
  }
102
103
  -expanded {
104
    textarea {
105
      height: 200px
106
      transition: height .15s ease-out
107
    }
108
109
    input.channel {
110
      display: flex
111
    }
112
113
    section.actions {
114
      display: flex
115
    }
116
  }
117
118
  -contracted {
119
    textarea {
120
      height: 50px
121
      transition: height .15s ease-in
122
    }
123
124
    input.channel {
125
      display: none
126
    }
127
128
    section.actions {
129
      display: none
130
    }
131
  }
132
133
}
134
135
$composeButton {
136
  background: #fff
137
  color: #666
138
  border: 1px solid #bbb
139
  border-radius: .5rem
140
  padding: .5rem
141
  margin: 0
142
  cursor: pointer
143
}
144