profile.scss 6.38 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
.avatar-image {
Clement Ho's avatar
Clement Ho committed
8
  @include media-breakpoint-up(sm) {
Phil Hughes's avatar
Phil Hughes committed
9 10 11 12 13 14 15 16 17 18 19
    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
  a:not(.text-link) {
77 78 79 80 81 82
    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.
Taurie Davis's avatar
Taurie Davis committed
99
  max-width: 600px;
Taurie Davis's avatar
Taurie Davis committed
100
  margin: 10px auto;
Taurie Davis's avatar
Taurie Davis 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;
  }
}

111 112 113 114 115
.subkeys-list {
  @include basic-list;

  li {
    padding: 3px 0;
116
    border: 0;
117 118 119
  }
}

Phil Hughes's avatar
Phil Hughes committed
120 121
.key-list-item {
  .key-list-item-info {
Clement Ho's avatar
Clement Ho committed
122
    @include media-breakpoint-up(sm) {
Phil Hughes's avatar
Phil Hughes committed
123 124 125 126 127 128 129 130 131 132 133
      float: left;
    }
  }

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

Phil Hughes's avatar
Phil Hughes committed
134 135 136
.key-created-at {
  line-height: 42px;
}
137 138 139

.profile-settings-content {
  a {
140
    color: $md-link-color;
141 142
  }
}
Phil Hughes's avatar
Phil Hughes committed
143 144 145 146

.provider-btn-group {
  display: inline-block;
  margin-right: 10px;
147
  border: 1px solid $border-color;
Phil Hughes's avatar
Phil Hughes committed
148 149 150 151 152 153 154 155 156 157
  border-radius: 3px;

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

.provider-btn-image {
  display: inline-block;
  padding: 5px 10px;
158
  border-right: 1px solid $border-color;
Phil Hughes's avatar
Phil Hughes committed
159 160 161 162 163 164 165 166 167 168 169 170 171 172

  > 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
173
    color: $provider-btn-not-active-color;
Phil Hughes's avatar
Phil Hughes committed
174 175
  }
}
176 177 178 179 180

.oauth-applications {
  form {
    display: inline-block;
  }
181 182 183 184

  .last-heading {
    width: 105px;
  }
185
}
Alfredo Sumaran's avatar
Alfredo Sumaran committed
186 187 188 189

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

Clement Ho's avatar
Clement Ho committed
191
    @include media-breakpoint-down(xs) {
Alfredo Sumaran's avatar
Alfredo Sumaran committed
192 193 194
      width: auto;
    }

Alfredo Sumaran's avatar
Alfredo Sumaran committed
195 196 197
  }

  .profile-crop-image-container {
Alfredo Sumaran's avatar
Alfredo Sumaran committed
198
    height: 300px;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
199 200 201 202
    margin: 0 auto;
  }

  .crop-controls {
203
    padding: 10px 0 0;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
204 205 206
    text-align: center;
  }
}
207

208
.personal-access-tokens-never-expires-label {
209
  color: $note-disabled-comment-color;
210 211
}

212 213
.created-personal-access-token-container {
  .btn-clipboard {
214
    border: 1px solid $border-color;
215 216 217
  }
}

218

219
.user-profile {
Taurie Davis's avatar
Taurie Davis committed
220 221 222
  .cover-controls a {
    margin-left: 5px;
  }
223

Taurie Davis's avatar
Taurie Davis committed
224 225
  .profile-header {
    margin: 0 auto;
226

Taurie Davis's avatar
Taurie Davis committed
227 228
    .avatar-holder {
      width: 90px;
Taurie Davis's avatar
Taurie Davis committed
229
      margin: 0 auto 10px;
Taurie Davis's avatar
Taurie Davis committed
230 231
    }
  }
232

233 234 235
  .user-profile-nav {
    font-size: 0;
  }
236

237 238 239 240 241 242 243 244
  .fade-right {
    right: 0;
  }

  .fade-left {
    left: 0;
  }

Clement Ho's avatar
Clement Ho committed
245
  @include media-breakpoint-down(xs) {
246 247 248 249 250 251
    .cover-block {
      padding-top: 20px;
    }

    .cover-controls {
      position: static;
Taurie Davis's avatar
Taurie Davis committed
252
      padding: 0 16px;
253
      margin-bottom: 20px;
Taurie Davis's avatar
Taurie Davis committed
254 255
      display: -webkit-flex;
      display: flex;
256 257

      .btn {
Taurie Davis's avatar
Taurie Davis committed
258 259
        -webkit-flex-grow: 1;
        flex-grow: 1;
260

Taurie Davis's avatar
Taurie Davis committed
261 262 263
        &:first-child {
          margin-left: 0;
        }
264 265
      }
    }
266

267 268 269 270
    .user-profile-nav {
      a {
        margin-right: 0;
      }
271
    }
272 273
  }
}
274 275

table.u2f-registrations {
276 277
  th:not(:last-child),
  td:not(:last-child) {
278 279
    border-right: solid 1px transparent;
  }
280
}
281 282 283

.oauth-application-show {
  .scope-name {
284
    font-weight: $gl-font-weight-bold;
285 286 287 288 289
  }

  .scopes-list {
    padding-left: 18px;
  }
290
}
291

292
.user-callout {
293
  margin: 20px -5px 0;
294 295

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

  .landing {
306
    padding: 32px;
307 308

    .close {
309
      position: absolute;
310
      top: 20px;
311 312 313 314 315 316 317 318
      right: 20px;
      opacity: 1;

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

320 321 322 323 324 325 326 327
      &:hover {
        background-color: transparent;
        border: 0;

        .dismiss-icon {
          color: $blue-400;
        }
      }
328 329 330
    }

    .svg-container {
331 332
      margin-right: 30px;
      display: inline-block;
333 334

      svg {
335 336
        height: 110px;
        vertical-align: top;
337
      }
338 339 340 341 342 343 344 345

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

        svg {
          height: 127px;
        }
      }
346
    }
347 348 349 350

    .user-callout-copy {
      display: inline-block;
      vertical-align: top;
351
      max-width: 570px;
352
    }
353
  }
354

Clement Ho's avatar
Clement Ho committed
355
  @include media-breakpoint-down(xs) {
356 357 358 359 360 361 362 363 364
    text-align: center;

    .bordered-box {
      display: block;
    }

    .landing {
      .svg-container,
      .user-callout-copy {
365
        margin: 0 auto;
366 367 368 369 370
        display: block;

        svg {
          height: 75px;
        }
371 372 373 374 375 376 377 378

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

          svg {
            height: 120px;
          }
        }
379
      }
380 381
    }
  }
382
}
383 384 385

.nav-wip {
  border: 1px solid $blue-500;
386
  background: $blue-50;
387 388 389 390 391 392 393 394 395 396 397
  padding: $gl-padding;
  margin-bottom: $gl-padding;

  a {
    color: $blue-500;
  }

  p:last-child {
    margin-bottom: 0;
  }
}
398

399
.email-badge {
400 401 402
  display: inline;
  margin-right: $gl-padding / 2;

403
  .email-badge-email {
404 405 406 407
    display: inline;
    margin-right: $gl-padding / 4;
  }

408
  .badge-verification-status {
409 410 411 412 413 414 415 416
    border-width: 1px;
    border-style: solid;

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

    &.unverified {
Clement Ho's avatar
Clement Ho committed
417
      @include status-color($gray-dark, color("gray"), $common-gray-dark);
418 419 420
    }
  }
}
421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440

.edit-user {
  .clear-user-status {
    svg {
      fill: $gl-text-color-secondary;
    }
  }

  .emoji-menu-toggle-button {
    @extend .note-action-button;

    .no-emoji-placeholder {
      position: relative;

      svg {
        fill: $gl-text-color-secondary;
      }
    }
  }
}