git ssb

1
Compose {
2
  display: flex
3
  flex-direction: column
4
  flex-shrink: 0
5
  max-width: 700px
6
  width: 100%
7
8
  margin: 20px auto;
9
  border: 1px solid gainsboro
10
  background: white
11
12
  textarea {
13
    resize: vertical
14
    font-size: 120%
15
    background: transparent
16
    border: none
17
    padding: 10px
18
    [disabled] {
19
      color: #AAA;
20
      background: #ebf7ee;
21
    }
22
  }
23
24
  section.warning {
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
    input[type="file"] {
61
      padding: .5rem 0
62
63
      width: 95px
64
      height: 29px
65
66
      color: transparent
67
68
      :hover {
69
        ::before {
70
          color: black
71
          border-color: #8B8B8B
72
        }
73
      }
74
75
      ::-webkit-file-upload-button {
76
        display: none
77
      }
78
79
      ::before {
80
        color: #5f5f5f;
81
        padding: 3px 6px;
82
        background: white;
83
        border: 2px solid #DDD;
84
        border-radius: 4px;
85
        cursor: pointer
86
        padding-top: .3rem
87
        content: '📎 Attach File'
88
        font-size: 1rem
89
        outline: none
90
        white-space: nowrap
91
        -webkit-user-select: none
92
      }
93
94
      :active, :focus {
95
        outline: none
96
        box-shadow: none
97
      }
98
    }
99
  }
100
101
  -expanded {
102
    textarea {
103
      height: 200px
104
      transition: height .15s ease-out
105
      border-bottom: 1px solid gainsboro
106
    }
107
108
    section.actions {
109
      display: flex
110
    }
111
  }
112
113
  -contracted {
114
    textarea {
115
      height: 50px
116
      transition: height .15s ease-in
117
    }
118
119
    section.actions {
120
      display: none
121
    }
122
  }
123
124
}
125