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