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
122
          border: 1px gainsboro solid
123
          margin: 0 .4rem .5rem 0
124
125
          div { padding: .3rem }
126
127
          div.name {
128
            border-right: 1px gainsboro solid
129
          }
130
131
          div.count {
132
            font-size: .9rem
133
            background-color: #eeeeee
134
          }
135
        }
136
137
        input {
138
          border: 1px gainsboro solid
139
          font-size: 1rem
140
          height: 1.7rem
141
        }
142
      }
143
144
    }
145
146
    button.confirm {
147
      margin-left: 0
148
      
149
      color: #fff
150
      $backgroundPrimary
151
      border: none
152
    }
153
  }
154
}
155
156