git ssb

1
ProfileEdit {
2
  display: flex
3
  flex-wrap: wrap
4
  justify-content: space-between
5
6
  margin-bottom: 2rem
7
8
  section.lightbox {
9
    position: absolute
10
  }
11
12
  section.avatar {
13
    margin-right: 1rem
14
15
    section img {
16
      width: 256px
17
      height: 256px
18
    }
19
20
    footer {
21
      font-size: 1.2rem
22
    }
23
  }
24
25
  section.description {
26
    flex-basis: 40%
27
    flex-grow: 1
28
29
    margin-top: 1rem
30
  }
31
32
  section.aliases {
33
    flex-basis: 100%
34
35
    margin-top: 1rem
36
37
    header {
38
      margin-bottom: .2rem
39
    }
40
41
    section {
42
      display: flex
43
      flex-wrap: wrap
44
      align-content: flex-start
45
46
      margin-bottom: 1rem
47
48
      header {
49
        flex-basis: 100%
50
51
        font-size: .9rem
52
        $textSubtle
53
54
        margin-bottom: .2rem
55
      }
56
57
      input {
58
      }
59
    }
60
61
    section.avatars {
62
      img {
63
        $avatar-large
64
        margin: 0 .15rem 0.2rem 0
65
66
        cursor: pointer
67
      }
68
69
      div.file-upload {
70
        position: relative
71
72
        input[type="file"] {
73
          $avatar-large
74
          color: transparent
75
76
          ::-webkit-file-upload-button {
77
            visibility: hidden
78
          }
79
80
          ::before {
81
            position: absolute
82
83
            background: #fff
84
            color: #666
85
            border: 1px solid #bbb
86
            border-radius: .2rem
87
            padding: .5rem
88
            cursor: pointer
89
90
            margin: 0
91
            padding: 10% 20%
92
            top: 12%
93
            left: 18%
94
95
            content: '+'
96
            font-size: 1.4rem
97
98
            outline: none
99
            white-space: nowrap
100
            -webkit-user-select: none
101
          }
102
103
          :active, :focus {
104
            outline: none
105
            box-shadow: none
106
          }
107
        }
108
      }
109
    }
110
111
    section.names {
112
      header {
113
      }
114
      
115
      section {
116
        display: flex
117
        flex-wrap: wrap
118
119
        div {
120
          display: flex
121
          cursor: pointer
122
123
          border: 1px gainsboro solid
124
          margin: 0 .4rem .5rem 0
125
126
          div { padding: .3rem }
127
128
          div.name {
129
            border-right: 1px gainsboro solid
130
          }
131
132
          div.count {
133
            font-size: .9rem
134
            background-color: #eeeeee
135
          }
136
        }
137
138
        input {
139
          border: 1px gainsboro solid
140
          font-size: 1rem
141
          height: 1.7rem
142
        }
143
      }
144
145
    }
146
147
    section.action {
148
      button.cancel {
149
        margin-left: 0
150
      }
151
152
      button.confirm {
153
        color: #fff
154
        $backgroundPrimary
155
        border: none
156
      }
157
    }
158
  }
159
}
160
161