git ssb

1
Compose {
2
  display: flex
3
  flex-direction: column
4
5
  textarea {
6
    border: 1px solid gainsboro
7
    border-top-left-radius: 0
8
    border-top-right-radius: 0
9
  }
10
11
  input.channel {
12
    border: 1px solid gainsboro
13
    border-bottom: none
14
    border-bottom-left-radius: 0
15
    border-bottom-right-radius: 0
16
    padding: .5rem
17
18
    :focus {
19
      outline: none
20
      box-shadow: none
21
    }
22
    :disabled {
23
      background-color: #f1f1f1
24
      cursor: not-allowed
25
    }
26
  }
27
28
  section.warnings {
29
    color: #fff
30
31
    div.warning {
32
      background-color: red
33
      padding: .5rem
34
      margin-bottom: 5px
35
36
      display: flex
37
      justify-content: start
38
      align-items: center
39
40
      i.fa-exclamation-triangle { margin-right: .5rem }
41
42
      div.message {
43
        flex-grow: 1
44
        font-weight: 600
45
        margin-right: .3rem
46
      }
47
48
      i.fa-times { cursor: pointer }
49
    }
50
  }
51
52
  section.actions {
53
    display: flex
54
    flex-direction: row
55
    align-items: baseline
56
    justify-content: space-between
57
58
    margin-top: .4rem
59
60
    div.attach {
61
      position: relative
62
      transition: opacity ease-in 1s
63
64
      :hover {
65
        background-color: black
66
        i.fa { color: white }
67
68
        div.attachers { display: grid }
69
      }
70
71
      i.fa {
72
        color: black
73
74
        width: 30px
75
        height: 30px
76
77
        display: grid
78
        justify-content: center
79
        align-content: center
80
      }
81
82
      div.attachers {
83
        position: absolute
84
        top: 0
85
        left: 30px
86
87
        width: 250px
88
89
        color: black
90
        background: white
91
        border: 1px solid black
92
93
        display: none
94
        justify-items: stretch
95
        align-items: center
96
        grid-gap: 2px
97
        padding: 8px
98
99
        div.attacher {
100
          i.fa {}
101
          div.label {}
102
          div.subtext {
103
            color: grey
104
            font-size: 12px
105
          }
106
107
          display: grid
108
          grid-template-columns: auto 1fr auto
109
          grid-gap: 10px
110
111
          padding: 3px 5px
112
          cursor: pointer
113
          :hover {
114
            color: white
115
            background: black
116
117
            div.subtext { color: gainsboro }
118
          }
119
        }
120
121
        input[type="file"] {
122
          display: none
123
        }
124
      }
125
    }
126
127
  }
128
129
  -expanded {
130
    textarea {
131
      height: 200px
132
      transition: height .15s ease-out
133
    }
134
135
    input.channel {
136
      display: flex
137
    }
138
139
    section.actions {
140
      display: flex
141
    }
142
  }
143
144
  -contracted {
145
    textarea {
146
      height: 50px
147
      transition: height .15s ease-in
148
    }
149
150
    input.channel {
151
      display: none
152
    }
153
154
    section.actions {
155
      display: none
156
    }
157
  }
158
159
}
160