git ssb

1
Compose {
2
  display: flex
3
  flex-direction: column
4
  flex-shrink: 0
5
  width: 100%
6
7
  margin: 20px auto;
8
  box-shadow: inset 0 0 0px 1px rgba(0,0,0,0.1)
9
  border-radius: 3px
10
  background: #2d2c2c
11
12
  textarea {
13
    resize: vertical
14
    font-size: 120%
15
    background: transparent
16
    border: none
17
    padding: 10px
18
    color: #ccc
19
    [disabled] {
20
      opacity: 0.5
21
    }
22
    :focus {
23
      outline: 0
24
    }
25
    ::-webkit-input-placeholder {
26
      color: #757474
27
    }
28
  }
29
30
  section.warning {
31
    overflow: hidden
32
    color: #fff
33
    font-size: 1.2rem
34
    background-color: #ff00b6
35
36
    height: 0
37
    padding: 0 .5rem
38
    transition: all ease-in .1s
39
40
    display: flex
41
    justify-content: space-between
42
43
44
    -open {
45
      padding: .5rem
46
      height: initial
47
    }
48
49
    i.fa { margin-right: .5rem }
50
    div.warning {
51
      strong { margin-right: .3rem }
52
    }
53
    div.close {
54
      cursor: pointer
55
    }
56
  }
57
58
  section.actions {
59
    display: flex
60
    flex-direction: row
61
    align-items: baseline
62
    justify-content: space-between
63
    background: #383736
64
    padding: 10px
65
    border-bottom-left-radius: 3px
66
    border-bottom-right-radius: 3px
67
68
    input[type="file"] {
69
      width: 85px
70
      height: 20px
71
      color: transparent
72
73
      :hover {
74
        ::before {
75
          color: #ccc
76
        }
77
      }
78
79
      ::-webkit-file-upload-button {
80
        display: none
81
      }
82
83
      ::before {
84
        display: inline-block
85
        color: #6e6d6d
86
        padding: 3px 6px 3px 20px
87
        background: svg(paperclip) no-repeat scroll center left;
88
        cursor: pointer
89
        content: 'Attach'
90
        font-size: 1rem
91
        outline: none
92
        white-space: nowrap
93
        -webkit-user-select: none
94
      }
95
96
      @svg paperclip {
97
        width: 18px
98
        height: 18px
99
        fill: #6e6d6d
100
        content: "<path d="M13 14c0 2.21-1.79 4-4 4s-4-1.79-4-4V3c0-1.66 1.34-3 3-3s3 1.34 3 3v9c0 1.1-.9 2-2 2s-2-.9-2-2V4h1v8c0 .55.45 1 1 1s1-.45 1-1V3c0-1.1-.9-2-2-2s-2 .9-2 2v11c0 1.66 1.34 3 3 3s3-1.34 3-3V4h1v10z"/>"
101
      }
102
103
      :active, :focus {
104
        outline: none
105
        box-shadow: none
106
      }
107
    }
108
109
    button {
110
      :hover {
111
        background: #e56f6f
112
      }
113
      -private {
114
        :hover {
115
          background: #ceab2f
116
        }
117
      }
118
    }
119
  }
120
121
  -expanded {
122
    textarea {
123
      height: 200px
124
      transition: height .15s ease-out
125
    }
126
127
    section.actions {
128
      display: flex
129
    }
130
  }
131
132
  -contracted {
133
    textarea {
134
      height: 50px
135
      transition: height .15s ease-in
136
    }
137
138
    section.actions {
139
      display: none
140
    }
141
  }
142
143
}
144