profile.scss 6.07 KB
Newer Older
Phil Hughes's avatar
Phil Hughes committed
1 2 3
.profile-avatar-form-option {
  hr {
    margin: 10px 0;
4 5 6
  }
}

Phil Hughes's avatar
Phil Hughes committed
7 8 9 10 11 12 13 14 15 16 17 18 19
.avatar-image {
  @media (min-width: $screen-sm-min) {
    float: left;
    margin-bottom: 0;
  }
}

.avatar-file-name {
  position: relative;
  top: 2px;
  display: inline-block;
}

Phil Hughes's avatar
Phil Hughes committed
20
.account-btn-link,
21 22
.profile-settings-sidebar a,
.settings-sidebar a {
23
  color: $md-link-color;
Phil Hughes's avatar
Phil Hughes committed
24 25
}

26 27 28 29
.private-tokens-reset div.reset-action:not(:first-child) {
  padding-top: 15px;
}

30 31 32 33 34 35
.oauth-buttons {
  .btn-group {
    margin-right: 10px;
  }

  .btn {
36 37
    line-height: 40px;
    height: 42px;
38
    padding: 0 12px;
39 40 41 42 43 44 45

    img {
      width: 32px;
      height: 32px;
    }
  }
}
46 47 48 49 50 51 52 53 54 55 56 57 58 59

// Profile > Account > Two Factor Authentication
.two-factor-new {
  .manual-instructions {
    h3 {
      margin-top: 0;
    }

    // Slightly increase the size of the details so they're easier to read
    dl {
      font-size: 1.1em;
    }
  }
}
60

Phil Hughes's avatar
Phil Hughes committed
61
.account-well {
62
  padding: 10px;
63 64
  background-color: $gray-light;
  border: 1px solid $border-color;
65
  border-radius: $border-radius-base;
Phil Hughes's avatar
Phil Hughes committed
66 67 68 69 70 71 72

  ul {
    padding-left: 20px;
    margin-bottom: 0;
  }
}

73 74 75
.profile-link-holder {
  display: inline;

76 77 78 79 80 81 82
  a {
    text-decoration: none;
  }
}

// Middle dot divider between each element in a list of items.
.middle-dot-divider {
83
  &::after {
84 85
    content: "\00B7"; // Middle Dot
    padding: 0 6px;
86
    font-weight: $gl-font-weight-bold;
87 88 89
  }

  &:last-child {
90
    &::after {
91 92 93 94
      content: "";
      padding: 0;
    }
  }
95
}
96

97 98
.profile-user-bio {
  // Limits the width of the user bio for readability.
tauriedavis's avatar
tauriedavis committed
99
  max-width: 600px;
tauriedavis's avatar
tauriedavis committed
100
  margin: 10px auto;
tauriedavis's avatar
tauriedavis committed
101
  padding: 0 16px;
102
}
103

Phil Hughes's avatar
Phil Hughes committed
104 105 106 107 108 109 110
.user-avatar-button {
  .file-name {
    display: inline-block;
    padding-left: 10px;
  }
}

Phil Hughes's avatar
Phil Hughes committed
111 112 113 114 115 116 117 118 119 120 121 122 123 124
.key-list-item {
  .key-list-item-info {
    @media (min-width: $screen-sm-min) {
      float: left;
    }
  }

  .description {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

Phil Hughes's avatar
Phil Hughes committed
125 126 127
.key-created-at {
  line-height: 42px;
}
128 129 130

.profile-settings-content {
  a {
131
    color: $md-link-color;
132 133
  }
}
Phil Hughes's avatar
Phil Hughes committed
134 135 136 137

.provider-btn-group {
  display: inline-block;
  margin-right: 10px;
138
  border: 1px solid $border-color;
Phil Hughes's avatar
Phil Hughes committed
139 140 141 142 143 144 145 146 147 148
  border-radius: 3px;

  &:last-child {
    margin-right: 0;
  }
}

.provider-btn-image {
  display: inline-block;
  padding: 5px 10px;
149
  border-right: 1px solid $border-color;
Phil Hughes's avatar
Phil Hughes committed
150 151 152 153 154 155 156 157 158 159 160 161 162 163

  > img {
    width: 20px;
  }
}

.provider-btn {
  display: inline-block;
  padding: 5px 10px;
  margin-left: -3px;
  line-height: 22px;
  background-color: $gray-light;

  &.not-active {
Phil Hughes's avatar
Phil Hughes committed
164
    color: $provider-btn-not-active-color;
Phil Hughes's avatar
Phil Hughes committed
165 166
  }
}
167 168 169 170 171

.oauth-applications {
  form {
    display: inline-block;
  }
172 173 174 175

  .last-heading {
    width: 105px;
  }
176
}
Alfredo Sumaran's avatar
Alfredo Sumaran committed
177 178 179 180

.modal-profile-crop {
  .modal-dialog {
    width: 380px;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
181

182
    @media (max-width: $screen-xs-max) {
Alfredo Sumaran's avatar
Alfredo Sumaran committed
183 184 185
      width: auto;
    }

Alfredo Sumaran's avatar
Alfredo Sumaran committed
186 187 188
  }

  .profile-crop-image-container {
Alfredo Sumaran's avatar
Alfredo Sumaran committed
189
    height: 300px;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
190 191 192 193
    margin: 0 auto;
  }

  .crop-controls {
194
    padding: 10px 0 0;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
195 196 197
    text-align: center;
  }
}
198

199
.personal-access-tokens-never-expires-label {
200
  color: $note-disabled-comment-color;
201 202
}

203 204 205 206 207 208 209 210 211 212 213
.created-personal-access-token-container {
  #created-personal-access-token {
    width: 90%;
    display: inline;
  }

  .btn-clipboard {
    margin-left: 5px;
  }
}

214

215
.user-profile {
tauriedavis's avatar
tauriedavis committed
216 217 218
  .cover-controls a {
    margin-left: 5px;
  }
219

tauriedavis's avatar
tauriedavis committed
220 221
  .profile-header {
    margin: 0 auto;
222

tauriedavis's avatar
tauriedavis committed
223 224
    .avatar-holder {
      width: 90px;
tauriedavis's avatar
tauriedavis committed
225
      margin: 0 auto 10px;
tauriedavis's avatar
tauriedavis committed
226 227
    }
  }
228

229 230 231
  .user-profile-nav {
    font-size: 0;
  }
232

233 234 235 236 237 238 239 240
  .fade-right {
    right: 0;
  }

  .fade-left {
    left: 0;
  }

241
  @media (max-width: $screen-xs-max) {
242 243 244 245 246 247
    .cover-block {
      padding-top: 20px;
    }

    .cover-controls {
      position: static;
tauriedavis's avatar
tauriedavis committed
248
      padding: 0 16px;
249
      margin-bottom: 20px;
tauriedavis's avatar
tauriedavis committed
250 251
      display: -webkit-flex;
      display: flex;
252 253

      .btn {
tauriedavis's avatar
tauriedavis committed
254 255
        -webkit-flex-grow: 1;
        flex-grow: 1;
256

tauriedavis's avatar
tauriedavis committed
257 258 259
        &:first-child {
          margin-left: 0;
        }
260 261
      }
    }
262

263 264 265 266
    .user-profile-nav {
      a {
        margin-right: 0;
      }
267
    }
268 269
  }
}
270 271

table.u2f-registrations {
272 273
  th:not(:last-child),
  td:not(:last-child) {
274 275
    border-right: solid 1px transparent;
  }
276
}
277 278 279

.oauth-application-show {
  .scope-name {
280
    font-weight: $gl-font-weight-bold;
281 282 283 284 285
  }

  .scopes-list {
    padding-left: 18px;
  }
286
}
287

288
.user-callout {
289
  margin: 20px -5px 0;
290 291

  .bordered-box {
292
    border: 1px solid $blue-300;
293
    border-radius: $border-radius-default;
294
    background-color: $blue-50;
295 296 297
    position: relative;
    display: flex;
    justify-content: center;
298
    align-items: center;
299 300 301
  }

  .landing {
302
    padding: 32px;
303 304

    .close {
305
      position: absolute;
306
      top: 20px;
307 308 309 310 311 312 313 314
      right: 20px;
      opacity: 1;

      .dismiss-icon {
        float: right;
        cursor: pointer;
        color: $blue-300;
      }
315

316 317 318 319 320 321 322 323
      &:hover {
        background-color: transparent;
        border: 0;

        .dismiss-icon {
          color: $blue-400;
        }
      }
324 325 326
    }

    .svg-container {
327 328
      margin-right: 30px;
      display: inline-block;
329 330

      svg {
331 332
        height: 110px;
        vertical-align: top;
333
      }
334 335 336 337 338 339 340 341

      &.convdev {
        margin: 0 0 0 30px;

        svg {
          height: 127px;
        }
      }
342
    }
343 344 345 346

    .user-callout-copy {
      display: inline-block;
      vertical-align: top;
347
      max-width: 570px;
348
    }
349
  }
350 351

  @media(max-width: $screen-xs-max) {
352 353 354 355 356 357 358 359 360
    text-align: center;

    .bordered-box {
      display: block;
    }

    .landing {
      .svg-container,
      .user-callout-copy {
361
        margin: 0 auto;
362 363 364 365 366
        display: block;

        svg {
          height: 75px;
        }
367 368 369 370 371 372 373 374

        &.convdev {
          margin: $gl-padding auto 0;

          svg {
            height: 120px;
          }
        }
375
      }
376 377
    }
  }
378
}
379 380 381

.nav-wip {
  border: 1px solid $blue-500;
382
  background: $blue-50;
383 384 385 386 387 388 389 390 391 392 393
  padding: $gl-padding;
  margin-bottom: $gl-padding;

  a {
    color: $blue-500;
  }

  p:last-child {
    margin-bottom: 0;
  }
}
394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416

.gpg-email-badge {
  display: inline;
  margin-right: $gl-padding / 2;

  .gpg-email-badge-email {
    display: inline;
    margin-right: $gl-padding / 4;
  }

  .label-verification-status {
    border-width: 1px;
    border-style: solid;

    &.verified {
      @include green-status-color;
    }

    &.unverified {
      @include status-color($gray-dark, $gray, $common-gray-dark);
    }
  }
}