Skip to content

G
gitlab-ce
Commit 81852a37 authored by Jacques Erasmus's avatar Jacques Erasmus Committed by Kushal Pandya
Browse files
Options

Move avatar related styles to components directory 

Moved all avatar related styles to the components directory
parent 83d80bc9
Hide whitespace changes
Inline Side-by-side
Showing with 41 additions and 38 deletions
app/assets/stylesheets/framework/avatar.scss → app/assets/stylesheets/components/avatar.scss
View file @ 81852a37
@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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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;
......
app/assets/stylesheets/framework.scss
View file @ 81852a37
...@@ -8,7 +8,6 @@ ...@@ -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';
......
app/assets/stylesheets/framework/mixins.scss
View file @ 81852a37
...@@ -376,3 +376,12 @@ ...@@ -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;
}
app/assets/stylesheets/framework/variables.scss
View file @ 81852a37
...@@ -589,6 +589,7 @@ $issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards ...@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7