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
      justify-content: space-between
45
      align-content: flex-start
46
47
      margin-bottom: 1rem
48
49
      header {
50
        flex-basis: 100%
51
52
        font-size: .9rem
53
        $textSubtle
54
55
        margin-bottom: .2rem
56
      }
57
58
      input {
59
      }
60
    }
61
62
    section.avatars {
63
      img {
64
        $avatar-large
65
        margin: 0 .15rem 0.2rem 0
66
67
        cursor: pointer
68
      }
69
70
      div.file-upload {
71
        position: relative
72
73
        input[type="file"] {
74
          $avatar-large
75
          color: transparent
76
77
          ::-webkit-file-upload-button {
78
            visibility: hidden
79
          }
80
81
          ::before {
82
            position: absolute
83
84
            background: #fff
85
            color: #666
86
            border: 1px solid #bbb
87
            border-radius: .2rem
88
            padding: .5rem
89
            cursor: pointer
90
91
            margin: 0
92
            padding: 10% 20%
93
            top: 12%
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
      input {
113
        border: 1px gainsboro solid
114
        font-size: 1rem
115
      }
116
    }
117
118
    button.confirm {
119
      margin-left: 0
120
      
121
      color: #fff
122
      $backgroundPrimary
123
      border: none
124
    }
125
  }
126
}
127
128