kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Move avatar related styles to components directory

Browse source 
Moved all avatar related styles to the components directory
This commit is contained in:
Jacques Erasmus 2019-05-24 09:03:18 +00:00 committed by Kushal Pandya
parent 83d80bc968
commit 81852a37e2
4 changed files with 41 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
app/assets/stylesheets/framework/avatar.scss → app/assets/stylesheets/components/avatar.scss
View file

@ -1,33 +1,28 @@
@mixin avatar-size($size, $margin-right) {
width: $size;
height: $size;
margin-right: $margin-right;
}
.avatar-circle { .avatar-circle {
float: left; float: left;
margin-right: 15px; margin-right: 15px;
border-radius: $avatar-radius; border-radius: $avatar-radius;
border: 1px solid $gray-normal; border: 1px solid $gray-normal;
&.s16 { @include avatar-size(16px, 6px); } &.s16 { @include avatar-size(16px, 8px); }
&.s18 { @include avatar-size(18px, 6px); } &.s18 { @include avatar-size(18px, 8px); }
&.s19 { @include avatar-size(19px, 6px); } &.s19 { @include avatar-size(19px, 8px); }
&.s20 { @include avatar-size(20px, 7px); } &.s20 { @include avatar-size(20px, 8px); }
&.s24 { @include avatar-size(24px, 8px); } &.s24 { @include avatar-size(24px, 8px); }
&.s26 { @include avatar-size(26px, 8px); } &.s26 { @include avatar-size(26px, 8px); }
&.s32 { @include avatar-size(32px, 10px); } &.s32 { @include avatar-size(32px, 8px); }
&.s36 { @include avatar-size(36px, 10px); } &.s36 { @include avatar-size(36px, 16px); }
&.s40 { @include avatar-size(40px, 10px); } &.s40 { @include avatar-size(40px, 16px); }
&.s46 { @include avatar-size(46px, 15px); } &.s46 { @include avatar-size(46px, 16px); }
&.s48 { @include avatar-size(48px, 10px); } &.s48 { @include avatar-size(48px, 16px); }
&.s60 { @include avatar-size(60px, 12px); } &.s60 { @include avatar-size(60px, 16px); }
&.s64 { @include avatar-size(64px, 14px); } &.s64 { @include avatar-size(64px, 16px); }
&.s70 { @include avatar-size(70px, 14px); } &.s70 { @include avatar-size(70px, 16px); }
&.s90 { @include avatar-size(90px, 15px); } &.s90 { @include avatar-size(90px, 16px); }
&.s100 { @include avatar-size(100px, 15px); } &.s96 { @include avatar-size(96px, 16px); }
&.s110 { @include avatar-size(110px, 15px); } &.s100 { @include avatar-size(100px, 16px); }
&.s140 { @include avatar-size(140px, 15px); } &.s110 { @include avatar-size(110px, 16px); }
&.s160 { @include avatar-size(160px, 20px); } &.s140 { @include avatar-size(140px, 16px); }
&.s160 { @include avatar-size(160px, 16px); }
} }
.avatar { .avatar {
@ -39,6 +34,7 @@
padding: 0; padding: 0;
background: $gray-lightest; background: $gray-lightest;
overflow: hidden; overflow: hidden;
border-color: rgba($black, $gl-avatar-border-opacity);
&.avatar-inline { &.avatar-inline {
float: none; float: none;
@ -64,41 +60,37 @@
&.avatar-placeholder { &.avatar-placeholder {
border: 0; border: 0;
} }
&:not([href]):hover {
border-color: darken($gray-normal, 10%);
}
} }
.identicon { .identicon {
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
color: $gl-gray-700; color: $gray-800;
background-color: $gray-darker; background-color: $gray-darker;
// Sizes // Sizes
&.s16 { font-size: 12px; &.s16 { font-size: 10px;
line-height: 1.33; } line-height: 16px; }
&.s24 { font-size: 13px; &.s24 { font-size: 12px;
line-height: 1.8; } line-height: 24px; }
&.s26 { font-size: 20px; &.s26 { font-size: 20px;
line-height: 1.33; } line-height: 1.33; }
&.s32 { font-size: 20px; &.s32 { font-size: 14px;
line-height: 30px; } line-height: 32px; }
&.s40 { font-size: 16px; &.s40 { font-size: 16px;
line-height: 38px; } line-height: 38px; }
&.s48 { font-size: 20px; &.s48 { font-size: 20px;
line-height: 46px; } line-height: 48px; }
&.s60 { font-size: 32px; &.s60 { font-size: 32px;
line-height: 58px; } line-height: 58px; }
&.s64 { font-size: 32px; &.s64 { font-size: 28px;
line-height: 64px; } line-height: 64px; }
&.s70 { font-size: 34px; &.s70 { font-size: 34px;
@ -107,6 +99,9 @@
&.s90 { font-size: 36px; &.s90 { font-size: 36px;
line-height: 88px; } line-height: 88px; }
&.s96 { font-size: 48px;
line-height: 96px; }
&.s100 { font-size: 36px; &.s100 { font-size: 36px;
line-height: 98px; } line-height: 98px; }
@ -144,7 +139,6 @@
.avatar { .avatar {
border-radius: 0; border-radius: 0;
border: 0;
height: auto; height: auto;
width: 100%; width: 100%;
margin: 0; margin: 0;

1
app/assets/stylesheets/framework.scss
View file

@ -8,7 +8,6 @@
@import 'framework/animations'; @import 'framework/animations';
@import 'framework/vue_transitions'; @import 'framework/vue_transitions';
@import 'framework/avatar';
@import 'framework/asciidoctor'; @import 'framework/asciidoctor';
@import 'framework/banner'; @import 'framework/banner';
@import 'framework/blocks'; @import 'framework/blocks';

9
app/assets/stylesheets/framework/mixins.scss
View file

@ -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;
}

1
app/assets/stylesheets/framework/variables.scss
View file

@ -589,6 +589,7 @@ $issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards
*/ */
$avatar-radius: 50%; $avatar-radius: 50%;
$gl-avatar-size: 40px; $gl-avatar-size: 40px;
$gl-avatar-border-opacity: 0.1;
/* /*
* Blame * Blame