Skip to content

G
gitlab-ce
Commit 5eceef96 authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Use SCSS maps and lists to keep code DRY

parent 340ea9aa
Hide whitespace changes
Inline Side-by-side
Showing with 142 additions and 98 deletions
app/assets/stylesheets/components/avatar.scss
View file @ 5eceef96
$avatar-sizes: (
16: (
font-size: 10px,
line-height: 16px,
border-radius: $border-radius-small
),
18: (
border-radius: $border-radius-small
),
19: (
border-radius: $border-radius-small
),
20: (
border-radius: $border-radius-small
),
24: (
font-size: 12px,
line-height: 24px,
border-radius: $border-radius-default
),
26: (
font-size: 20px,
line-height: 1.33,
border-radius: $border-radius-default
),
32: (
font-size: 14px,
line-height: 32px,
border-radius: $border-radius-default
),
36: (
border-radius: $border-radius-default
),
40: (
font-size: 16px,
line-height: 38px,
border-radius: $border-radius-default
),
46: (
border-radius: $border-radius-default
),
48: (
font-size: 20px,
line-height: 48px,
border-radius: $border-radius-large
),
60: (
font-size: 32px,
line-height: 58px,
border-radius: $border-radius-large
),
64: (
font-size: 28px,
line-height: 64px,
border-radius: $border-radius-large
),
70: (
font-size: 34px,
line-height: 70px,
border-radius: $border-radius-large
),
90: (
font-size: 36px,
line-height: 88px,
border-radius: $border-radius-large
),
96: (
font-size: 48px,
line-height: 96px,
border-radius: $border-radius-large
),
100: (
font-size: 36px,
line-height: 98px,
border-radius: $border-radius-large
),
110: (
font-size: 40px,
line-height: 108px,
font-weight: $gl-font-weight-normal,
border-radius: $border-radius-large
),
140: (
font-size: 72px,
line-height: 138px,
border-radius: $border-radius-large
),
160: (
font-size: 96px,
line-height: 158px,
border-radius: $border-radius-large
)
);
$identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $identicon-blue, $identicon-teal,
$identicon-orange, $gray-darker;
.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, 8px); }
&.s18 { @include avatar-size(18px, 8px); } @each $size, $size-config in $avatar-sizes {
&.s19 { @include avatar-size(19px, 8px); } &.s#{$size} {
&.s20 { @include avatar-size(20px, 8px); } @include avatar-size(#{$size}px, if($size < 36, 8px, 16px));
&.s24 { @include avatar-size(24px, 8px); } }
&.s26 { @include avatar-size(26px, 8px); } }
&.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 { .avatar {
...@@ -42,8 +125,13 @@ ...@@ -42,8 +125,13 @@
margin-left: 2px; margin-left: 2px;
flex-shrink: 0; flex-shrink: 0;
&.s16 { margin-right: 4px; } &.s16 {
&.s24 { margin-right: 4px; } margin-right: 4px;
}
&.s24 {
margin-right: 4px;
}
} }
&.center { &.center {
...@@ -69,60 +157,25 @@ ...@@ -69,60 +157,25 @@
background-color: $gray-darker; background-color: $gray-darker;
// Sizes // Sizes
&.s16 { font-size: 10px; @each $size, $size-config in $avatar-sizes {
line-height: 16px; } $keys: map-keys($size-config);
&.s24 { font-size: 12px; &.s#{$size} {
line-height: 24px; } @each $key in $keys {
// We don't want `border-radius` to be included here.
&.s26 { font-size: 20px; @if ($key != 'border-radius') {
line-height: 1.33; } #{$key}: map-get($size-config, #{$key});
}
&.s32 { font-size: 14px; }
line-height: 32px; } }
}
&.s40 { font-size: 16px;
line-height: 38px; }
&.s48 { font-size: 20px;
line-height: 48px; }
&.s60 { font-size: 32px;
line-height: 58px; }
&.s64 { font-size: 28px;
line-height: 64px; }
&.s70 { font-size: 34px;
line-height: 70px; }
&.s90 { font-size: 36px;
line-height: 88px; }
&.s96 { font-size: 48px;
line-height: 96px; }
&.s100 { font-size: 36px;
line-height: 98px; }
&.s110 { font-size: 40px;
line-height: 108px;
font-weight: $gl-font-weight-normal; }
&.s140 { font-size: 72px;
line-height: 138px; }
&.s160 { font-size: 96px;
line-height: 158px; }
// Background colors // Background colors
&.bg1 { background-color: $identicon-red; } @for $i from 1 through length($identicon-backgrounds) {
&.bg2 { background-color: $identicon-purple; } &.bg#{$i} {
&.bg3 { background-color: $identicon-indigo; } background-color: nth($identicon-backgrounds, $i);
&.bg4 { background-color: $identicon-blue; } }
&.bg5 { background-color: $identicon-teal; } }
&.bg6 { background-color: $identicon-orange; }
&.bg7 { background-color: $gray-darker; }
} }
.avatar-container { .avatar-container {
...@@ -139,41 +192,32 @@ ...@@ -139,41 +192,32 @@
.avatar { .avatar {
border-radius: 0; border-radius: 0;
border: 0;
height: auto; height: auto;
width: 100%; width: 100%;
margin: 0; margin: 0;
align-self: center; align-self: center;
} }
&.s40 { min-width: 40px; &.s40 {
min-height: 40px; } min-width: 40px;
min-height: 40px;
}
&.s64 { min-width: 64px; &.s64 {
min-height: 64px; } min-width: 64px;
min-height: 64px;
}
} }
.rect-avatar { .rect-avatar {
border-radius: $border-radius-small; border-radius: $border-radius-small;
&.s16 { border-radius: $border-radius-small; }
&.s18 { border-radius: $border-radius-small; } @each $size, $size-config in $avatar-sizes {
&.s19 { border-radius: $border-radius-small; } &.s#{$size} {
&.s20 { border-radius: $border-radius-small; } border-radius: map-get($size-config, 'border-radius');
&.s24 { border-radius: $border-radius-default; } }
&.s26 { border-radius: $border-radius-default; } }
&.s32 { border-radius: $border-radius-default; }
&.s36 { border-radius: $border-radius-default; }
&.s40 { border-radius: $border-radius-default; }
&.s46 { border-radius: $border-radius-default; }
&.s48 { border-radius: $border-radius-large; }
&.s60 { border-radius: $border-radius-large; }
&.s64 { border-radius: $border-radius-large; }
&.s70 { border-radius: $border-radius-large; }
&.s90 { border-radius: $border-radius-large; }
&.s96 { border-radius: $border-radius-large; }
&.s100 { border-radius: $border-radius-large; }
&.s110 { border-radius: $border-radius-large; }
&.s140 { border-radius: $border-radius-large; }
&.s160 { border-radius: $border-radius-large; }
} }
.avatar-counter { .avatar-counter {
......
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