git ssb

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