git ssb

1
Compose {
2
  display: flex
3
  flex-direction: column
4
5
  padding: 1rem .5rem 1rem 7.3rem
6
7
  textarea {
8
    border: 1px solid gainsboro
9
    border-top-left-radius: 0
10
    border-top-right-radius: 0
11
  }
12
13
  input.channel {
14
    border: 1px solid gainsboro
15
    border-bottom: none
16
    border-bottom-left-radius: 0
17
    border-bottom-right-radius: 0
18
    padding: .5rem
19
20
    :focus {
21
      outline: none
22
      box-shadow: none
23
    }
24
    :disabled {
25
      background-color: #f1f1f1
26
      cursor: not-allowed
27
    }
28
  }
29
30
  section.actions {
31
    display: flex
32
    flex-direction: row
33
    align-items: baseline
34
35
    margin-top: .4rem
36
37
    input[type="file"] {
38
      flex-grow: 1
39
40
      padding: .5rem 0
41
42
      width: 5.5rem
43
      color: transparent
44
45
      ::-webkit-file-upload-button {
46
        visibility: hidden
47
      }
48
49
      ::before {
50
        $composeButton
51
        padding-top: .3rem
52
53
        content: '📎'
54
        font-size: 1rem
55
56
        outline: none
57
        white-space: nowrap
58
        -webkit-user-select: none
59
      }
60
61
      :active, :focus {
62
        outline: none
63
        box-shadow: none
64
      }
65
    }
66
67
    button {
68
      $composeButton
69
70
      text-transform: uppercase
71
      font-weight: bold
72
      font-size: .7rem
73
    }
74
  }
75
76
  -expanded {
77
    textarea {
78
      height: 200px
79
      transition: height .15s ease-out
80
    }
81
82
    input.channel {
83
      display: flex
84
    }
85
86
    section.actions {
87
      display: flex
88
    }
89
  }
90
91
  -contracted {
92
    textarea {
93
      height: 50px
94
      transition: height .15s ease-in
95
    }
96
97
    input.channel {
98
      display: none
99
    }
100
101
    section.actions {
102
      display: none
103
    }
104
  }
105
106
}
107
108
$composeButton {
109
  background: #fff
110
  color: #666
111
  border: 1px solid #bbb
112
  border-radius: .5rem
113
  padding: .5rem
114
  margin: 0
115
  cursor: pointer
116
}
117