debian-mirror-gitlab/app/assets/stylesheets/framework/avatar.scss

195 lines
4.6 KiB
SCSS
Raw Normal View History

2017-08-17 22:00:37 +05:30
@mixin avatar-size($size, $margin-right) {
width: $size;
height: $size;
margin-right: $margin-right;
}
.avatar-circle {
2014-09-02 18:07:02 +05:30
float: left;
2017-08-17 22:00:37 +05:30
margin-right: 15px;
2018-11-18 11:00:15 +05:30
border-radius: $avatar-radius;
2018-11-20 20:47:30 +05:30
border: 1px solid $gray-normal;
2017-08-17 22:00:37 +05:30
&.s16 { @include avatar-size(16px, 6px); }
2017-09-10 17:25:29 +05:30
&.s18 { @include avatar-size(18px, 6px); }
&.s19 { @include avatar-size(19px, 6px); }
2017-08-17 22:00:37 +05:30
&.s20 { @include avatar-size(20px, 7px); }
&.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); }
2019-02-15 15:39:39 +05:30
&.s64 { @include avatar-size(64px, 14px); }
2017-08-17 22:00:37 +05:30
&.s70 { @include avatar-size(70px, 14px); }
&.s90 { @include avatar-size(90px, 15px); }
2018-03-17 18:26:18 +05:30
&.s100 { @include avatar-size(100px, 15px); }
2017-08-17 22:00:37 +05:30
&.s110 { @include avatar-size(110px, 15px); }
&.s140 { @include avatar-size(140px, 15px); }
&.s160 { @include avatar-size(160px, 20px); }
}
.avatar {
@extend .avatar-circle;
2018-11-08 19:23:39 +05:30
transition-property: none;
2017-08-17 22:00:37 +05:30
2014-09-02 18:07:02 +05:30
width: 40px;
2015-04-26 12:48:37 +05:30
height: 40px;
padding: 0;
2018-11-20 20:47:30 +05:30
background: $gray-lightest;
2017-09-10 17:25:29 +05:30
overflow: hidden;
2014-09-02 18:07:02 +05:30
&.avatar-inline {
float: none;
2017-08-17 22:00:37 +05:30
display: inline-block;
2018-03-17 18:26:18 +05:30
margin-left: 2px;
2017-08-17 22:00:37 +05:30
flex-shrink: 0;
2014-09-02 18:07:02 +05:30
2015-04-26 12:48:37 +05:30
&.s16 { margin-right: 4px; }
&.s24 { margin-right: 4px; }
}
2017-08-17 22:00:37 +05:30
&.center {
font-size: 14px;
line-height: 1.8em;
text-align: center;
}
2016-09-13 17:45:13 +05:30
&.avatar-tile {
2016-11-03 12:29:30 +05:30
border-radius: 0;
2018-03-17 18:26:18 +05:30
border: 0;
2014-09-02 18:07:02 +05:30
}
2019-07-07 11:18:12 +05:30
&.avatar-placeholder {
border: 0;
}
2017-08-17 22:00:37 +05:30
&:not([href]):hover {
2018-11-20 20:47:30 +05:30
border-color: darken($gray-normal, 10%);
2017-08-17 22:00:37 +05:30
}
2014-09-02 18:07:02 +05:30
}
2015-04-26 12:48:37 +05:30
.identicon {
text-align: center;
vertical-align: top;
2018-12-05 23:21:45 +05:30
color: $gl-gray-700;
2018-11-20 20:47:30 +05:30
background-color: $gray-darker;
2015-04-26 12:48:37 +05:30
2018-11-18 11:00:15 +05:30
// Sizes
2019-07-07 11:18:12 +05:30
&.s16 { font-size: 12px;
line-height: 1.33; }
&.s24 { font-size: 13px;
line-height: 1.8; }
&.s26 { font-size: 20px;
line-height: 1.33; }
&.s32 { font-size: 20px;
line-height: 30px; }
&.s40 { font-size: 16px;
line-height: 38px; }
&.s48 { font-size: 20px;
line-height: 46px; }
&.s60 { font-size: 32px;
line-height: 58px; }
&.s64 { font-size: 32px;
line-height: 64px; }
&.s70 { font-size: 34px;
line-height: 70px; }
&.s90 { font-size: 36px;
line-height: 88px; }
&.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; }
2018-11-18 11:00:15 +05:30
// Background colors
&.bg1 { background-color: $identicon-red; }
&.bg2 { background-color: $identicon-purple; }
&.bg3 { background-color: $identicon-indigo; }
&.bg4 { background-color: $identicon-blue; }
&.bg5 { background-color: $identicon-teal; }
&.bg6 { background-color: $identicon-orange; }
2018-11-20 20:47:30 +05:30
&.bg7 { background-color: $gray-darker; }
2015-04-26 12:48:37 +05:30
}
2017-08-17 22:00:37 +05:30
.avatar-container {
@extend .avatar-circle;
overflow: hidden;
display: flex;
2017-09-10 17:25:29 +05:30
a {
2018-11-20 20:47:30 +05:30
width: 100%;
height: 100%;
2017-09-10 17:25:29 +05:30
display: flex;
2019-02-15 15:39:39 +05:30
text-decoration: none;
2017-09-10 17:25:29 +05:30
}
2017-08-17 22:00:37 +05:30
.avatar {
border-radius: 0;
2018-03-17 18:26:18 +05:30
border: 0;
2017-08-17 22:00:37 +05:30
height: auto;
width: 100%;
margin: 0;
align-self: center;
}
2017-09-10 17:25:29 +05:30
2019-07-07 11:18:12 +05:30
&.s40 { min-width: 40px;
min-height: 40px; }
&.s64 { min-width: 64px;
min-height: 64px; }
}
.rect-avatar {
border-radius: $border-radius-small;
&.s16 { border-radius: $border-radius-small; }
&.s18 { border-radius: $border-radius-small; }
&.s19 { border-radius: $border-radius-small; }
&.s20 { border-radius: $border-radius-small; }
&.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; }
2017-08-17 22:00:37 +05:30
}
.avatar-counter {
background-color: $gray-darkest;
color: $white-light;
2018-11-20 20:47:30 +05:30
border: 1px solid $gray-normal;
2017-08-17 22:00:37 +05:30
border-radius: 1em;
2018-11-18 11:00:15 +05:30
font-family: $regular-font;
2017-08-17 22:00:37 +05:30
font-size: 9px;
line-height: 16px;
text-align: center;
}