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
    input[type="file"] {
61
      width: 1.8rem
62
      height: 1.8rem
63
      cursor: pointer
64
      color: transparent
65
      font-family: FontAwesome
66
      border: 1px rgba(0,0,0,0) solid
67
68
      ::-webkit-file-upload-button {
69
        visibility: hidden
70
      }
71
72
      ::before {
73
        padding-top: .3rem
74
75
        content: '\f0c6'
76
        font-size: 1rem
77
        color: #666;
78
        background-color: #fff
79
80
        outline: none
81
        white-space: nowrap
82
        -webkit-user-select: none
83
84
        display: flex
85
        justify-content: center
86
      }
87
88
      :hover, :focus {
89
        border: 1px gainsboro solid
90
        outline: none
91
        box-shadow: none
92
      }
93
    }
94
95
  }
96
97
  -expanded {
98
    textarea {
99
      height: 200px
100
      transition: height .15s ease-out
101
    }
102
103
    input.channel {
104
      display: flex
105
    }
106
107
    section.actions {
108
      display: flex
109
    }
110
  }
111
112
  -contracted {
113
    textarea {
114
      height: 50px
115
      transition: height .15s ease-in
116
    }
117
118
    input.channel {
119
      display: none
120
    }
121
122
    section.actions {
123
      display: none
124
    }
125
  }
126
127
}
128