git ssb

1
Compose {
2
  display: flex
3
  flex-direction: column
4
5
  padding: .5rem .5rem 1rem 5.5rem
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.warnings {
31
    color: #fff
32
33
    div.warning {
34
      background-color: red
35
      padding: .5rem
36
      margin-bottom: 5px
37
38
      display: flex
39
      justify-content: start
40
      align-items: center
41
42
      i.fa-exclamation-triangle { margin-right: .5rem }
43
44
      div.message {
45
        flex-grow: 1
46
        font-weight: 600
47
        margin-right: .3rem
48
      }
49
50
      i.fa-times { cursor: pointer }
51
    }
52
  }
53
54
  section.actions {
55
    display: flex
56
    flex-direction: row
57
    align-items: baseline
58
    justify-content: space-between
59
60
    margin-top: .4rem
61
62
    input[type="file"] {
63
      width: 1.8rem
64
      height: 1.8rem
65
      cursor: pointer
66
      color: transparent
67
      font-family: FontAwesome
68
      border: 1px rgba(0,0,0,0) solid
69
70
      ::-webkit-file-upload-button {
71
        visibility: hidden
72
      }
73
74
      ::before {
75
        padding-top: .3rem
76
77
        content: '\f0c6'
78
        font-size: 1rem
79
        color: #666;
80
        background-color: #fff
81
82
        outline: none
83
        white-space: nowrap
84
        -webkit-user-select: none
85
86
        display: flex
87
        justify-content: center
88
      }
89
90
      :hover, :focus {
91
        border: 1px gainsboro solid
92
        outline: none
93
        box-shadow: none
94
      }
95
    }
96
97
  }
98
99
  -expanded {
100
    textarea {
101
      height: 200px
102
      transition: height .15s ease-out
103
    }
104
105
    input.channel {
106
      display: flex
107
    }
108
109
    section.actions {
110
      display: flex
111
    }
112
  }
113
114
  -contracted {
115
    textarea {
116
      height: 50px
117
      transition: height .15s ease-in
118
    }
119
120
    input.channel {
121
      display: none
122
    }
123
124
    section.actions {
125
      display: none
126
    }
127
  }
128
129
}
130