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