git ssb

1
Compose {
2
  display: flex
3
  flex-direction: column
4
  flex-shrink: 0
5
  width: 100%
6
7
  margin: 20px auto;
8
  border: 1px solid gainsboro
9
  background: white
10
11
  textarea {
12
    resize: vertical
13
    font-size: 120%
14
    background: transparent
15
    border: none
16
    padding: 10px
17
    [disabled] {
18
      color: #AAA;
19
      background: #ebf7ee;
20
    }
21
  }
22
23
  section.warning {
24
    overflow: hidden
25
    color: #fff
26
    font-size: 1.2rem
27
    background-color: #ff00b6
28
29
    height: 0
30
    padding: 0 .5rem
31
    transition: all ease-in .1s
32
33
    display: flex
34
    justify-content: space-between
35
36
37
    -open {
38
      padding: .5rem
39
      height: initial
40
    }
41
42
    i.fa { margin-right: .5rem }
43
    div.warning {
44
      strong { margin-right: .3rem }
45
    }
46
    div.close {
47
      cursor: pointer
48
    }
49
  }
50
51
  section.actions {
52
    display: flex
53
    flex-direction: row
54
    align-items: baseline
55
    justify-content: space-between
56
    background: #fafafa
57
58
    padding: .4rem
59
60
    button {
61
      -private {
62
        color: #8a6610;
63
        background: #f3e7ac;
64
        border-color: #f3e7ac;
65
66
        :hover {
67
          color: #ffffff
68
          background-color: #8a6610
69
          border-color: #8a6610
70
        }
71
      }
72
    }
73
74
    input[type="file"] {
75
      padding: .5rem 0
76
77
      width: 95px
78
      height: 29px
79
80
      color: transparent
81
82
      :hover {
83
        ::before {
84
          color: black
85
          border-color: #8B8B8B
86
        }
87
      }
88
89
      ::-webkit-file-upload-button {
90
        display: none
91
      }
92
93
      ::before {
94
        color: #5f5f5f;
95
        padding: 3px 6px;
96
        background: white;
97
        border: 2px solid #DDD;
98
        border-radius: 4px;
99
        cursor: pointer
100
        padding-top: .3rem
101
        content: '📎 Attach File'
102
        font-size: 1rem
103
        outline: none
104
        white-space: nowrap
105
        -webkit-user-select: none
106
      }
107
108
      :active, :focus {
109
        outline: none
110
        box-shadow: none
111
      }
112
    }
113
  }
114
115
  -expanded {
116
    textarea {
117
      height: 200px
118
      transition: height .15s ease-out
119
      border-bottom: 1px solid gainsboro
120
    }
121
122
    section.actions {
123
      display: flex
124
    }
125
  }
126
127
  -contracted {
128
    textarea {
129
      height: 50px
130
      transition: height .15s ease-in
131
    }
132
133
    section.actions {
134
      display: none
135
    }
136
  }
137
138
}
139