diff options
-rw-r--r-- | app/assets/stylesheets/components/avatar.scss (renamed from app/assets/stylesheets/framework/avatar.scss) | 68 | ||||
-rw-r--r-- | app/assets/stylesheets/framework.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/mixins.scss | 9 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 1 |
4 files changed, 41 insertions, 38 deletions
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/components/avatar.scss index 37a729c7a63..4ab197b935b 100644 --- a/app/assets/stylesheets/framework/avatar.scss +++ b/app/assets/stylesheets/components/avatar.scss @@ -1,33 +1,28 @@ -@mixin avatar-size($size, $margin-right) { - width: $size; - height: $size; - margin-right: $margin-right; -} - .avatar-circle { float: left; margin-right: 15px; border-radius: $avatar-radius; border: 1px solid $gray-normal; - &.s16 { @include avatar-size(16px, 6px); } - &.s18 { @include avatar-size(18px, 6px); } - &.s19 { @include avatar-size(19px, 6px); } - &.s20 { @include avatar-size(20px, 7px); } + &.s16 { @include avatar-size(16px, 8px); } + &.s18 { @include avatar-size(18px, 8px); } + &.s19 { @include avatar-size(19px, 8px); } + &.s20 { @include avatar-size(20px, 8px); } &.s24 { @include avatar-size(24px, 8px); } &.s26 { @include avatar-size(26px, 8px); } - &.s32 { @include avatar-size(32px, 10px); } - &.s36 { @include avatar-size(36px, 10px); } - &.s40 { @include avatar-size(40px, 10px); } - &.s46 { @include avatar-size(46px, 15px); } - &.s48 { @include avatar-size(48px, 10px); } - &.s60 { @include avatar-size(60px, 12px); } - &.s64 { @include avatar-size(64px, 14px); } - &.s70 { @include avatar-size(70px, 14px); } - &.s90 { @include avatar-size(90px, 15px); } - &.s100 { @include avatar-size(100px, 15px); } - &.s110 { @include avatar-size(110px, 15px); } - &.s140 { @include avatar-size(140px, 15px); } - &.s160 { @include avatar-size(160px, 20px); } + &.s32 { @include avatar-size(32px, 8px); } + &.s36 { @include avatar-size(36px, 16px); } + &.s40 { @include avatar-size(40px, 16px); } + &.s46 { @include avatar-size(46px, 16px); } + &.s48 { @include avatar-size(48px, 16px); } + &.s60 { @include avatar-size(60px, 16px); } + &.s64 { @include avatar-size(64px, 16px); } + &.s70 { @include avatar-size(70px, 16px); } + &.s90 { @include avatar-size(90px, 16px); } + &.s96 { @include avatar-size(96px, 16px); } + &.s100 { @include avatar-size(100px, 16px); } + &.s110 { @include avatar-size(110px, 16px); } + &.s140 { @include avatar-size(140px, 16px); } + &.s160 { @include avatar-size(160px, 16px); } } .avatar { @@ -39,6 +34,7 @@ padding: 0; background: $gray-lightest; overflow: hidden; + border-color: rgba($black, $gl-avatar-border-opacity); &.avatar-inline { float: none; @@ -64,41 +60,37 @@ &.avatar-placeholder { border: 0; } - - &:not([href]):hover { - border-color: darken($gray-normal, 10%); - } } .identicon { text-align: center; vertical-align: top; - color: $gl-gray-700; + color: $gray-800; background-color: $gray-darker; // Sizes - &.s16 { font-size: 12px; - line-height: 1.33; } + &.s16 { font-size: 10px; + line-height: 16px; } - &.s24 { font-size: 13px; - line-height: 1.8; } + &.s24 { font-size: 12px; + line-height: 24px; } &.s26 { font-size: 20px; line-height: 1.33; } - &.s32 { font-size: 20px; - line-height: 30px; } + &.s32 { font-size: 14px; + line-height: 32px; } &.s40 { font-size: 16px; line-height: 38px; } &.s48 { font-size: 20px; - line-height: 46px; } + line-height: 48px; } &.s60 { font-size: 32px; line-height: 58px; } - &.s64 { font-size: 32px; + &.s64 { font-size: 28px; line-height: 64px; } &.s70 { font-size: 34px; @@ -107,6 +99,9 @@ &.s90 { font-size: 36px; line-height: 88px; } + &.s96 { font-size: 48px; + line-height: 96px; } + &.s100 { font-size: 36px; line-height: 98px; } @@ -144,7 +139,6 @@ .avatar { border-radius: 0; - border: 0; height: auto; width: 100%; margin: 0; diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index ab9047c54e4..9b0d19b0ef0 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -8,7 +8,6 @@ @import 'framework/animations'; @import 'framework/vue_transitions'; -@import 'framework/avatar'; @import 'framework/asciidoctor'; @import 'framework/banner'; @import 'framework/blocks'; diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 97de0c98325..18671f7c4d8 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -376,3 +376,12 @@ } } } + +/* +* Mixin that handles the size and right margin of avatars. +*/ +@mixin avatar-size($size, $margin-right) { + width: $size; + height: $size; + margin-right: $margin-right; +} diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 1cf122102cc..28768bdf88f 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -589,6 +589,7 @@ $issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards */ $avatar-radius: 50%; $gl-avatar-size: 40px; +$gl-avatar-border-opacity: 0.1; /* * Blame |