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
    input[type="file"] {
62
      padding: .5rem 0
63
64
      width: 95px
65
      height: 29px
66
67
      color: transparent
68
69
      :hover {
70
        ::before {
71
          color: black
72
          border-color: #8B8B8B
73
        }
74
      }
75
76
      ::-webkit-file-upload-button {
77
        display: none
78
      }
79
80
      ::before {
81
        color: #5f5f5f;
82
        padding: 3px 6px;
83
        background: white;
84
        border: 2px solid #DDD;
85
        border-radius: 4px;
86
        cursor: pointer
87
        padding-top: .3rem
88
        content: '📎 Attach File'
89
        font-size: 1rem
90
        outline: none
91
        white-space: nowrap
92
        -webkit-user-select: none
93
      }
94
95
      :active, :focus {
96
        outline: none
97
        box-shadow: none
98
      }
99
    }
100
  }
101
102
  -expanded {
103
    textarea {
104
      height: 200px
105
      transition: height .15s ease-out
106
      border-bottom: 1px solid gainsboro
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
    section.actions {
121
      display: none
122
    }
123
  }
124
125
}
126