Skip to content

G
gitlab-ce
Commit b05e2e2b authored by Zack Cuddy's avatar Zack Cuddy Committed by Enrique Alcántara
Browse files
Options

Identicon - Align GitLab UI Colors 

This change updates the identicon classes
to use the GitLab UI color pallete.

Changelog: changed
EE: true
parent 11b52207
Hide whitespace changes
Inline Side-by-side
Showing with 45 additions and 60 deletions
app/assets/stylesheets/components/avatar.scss
View file @ b05e2e2b
......@@ -67,15 +67,12 @@ $avatar-sizes: (
)
);
$identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $identicon-blue, $identicon-teal,
$identicon-orange, $identicon-gray;
.avatar,
.avatar-container {
float: left;
margin-right: $gl-padding;
border-radius: $avatar-radius;
border: 1px solid $gray-normal;
border: 1px solid $t-gray-a-08;
@each $size, $size-config in $avatar-sizes {
&.s#{$size} {
......@@ -125,8 +122,8 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i
.identicon {
text-align: center;
vertical-align: top;
color: $identicon-text-color;
background-color: $identicon-gray;
color: $gray-900;
background-color: $gray-50;
// Sizes
@each $size, $size-config in $avatar-sizes {
......@@ -143,9 +140,9 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i
}
// Background colors
@for $i from 1 through length($identicon-backgrounds) {
@for $i from 1 through length($gl-avatar-identicon-bgs) {
&.bg#{$i} {
background-color: nth($identicon-backgrounds, $i);
background-color: nth($gl-avatar-identicon-bgs, $i);
}
}
}
......
app/assets/stylesheets/framework/variables.scss
View file @ b05e2e2b
......@@ -633,18 +633,6 @@ $note-disabled-comment-color: #b2b2b2;
$note-targe3-outside: #fffff0;
$note-targe3-inside: #ffffd3;
/*
* Identicon
*/
$identicon-text-color: #525252 !default;
$identicon-red: #ffebee !default;
$identicon-purple: #f3e5f5 !default;
$identicon-indigo: #e8eaf6 !default;
$identicon-blue: #e3f2fd !default;
$identicon-teal: #e0f2f1 !default;
$identicon-orange: #fbe9e7 !default;
$identicon-gray: #eee !default;
/*
* Calendar
*/
......
app/assets/stylesheets/startup/startup-dark.scss
View file @ b05e2e2b
......@@ -2066,7 +2066,7 @@ svg.s16 {
float: left;
margin-right: 16px;
border-radius: 50%;
border: 1px solid #333;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.avatar.s16,
.avatar-container.s16 {
......@@ -2108,8 +2108,8 @@ svg.s16 {
.identicon {
text-align: center;
vertical-align: top;
color: #525252;
background-color: #eee;
color: #fafafa;
background-color: #303030;
}
.identicon.s16 {
font-size: 10px;
......@@ -2124,25 +2124,25 @@ svg.s16 {
line-height: 38px;
}
.identicon.bg1 {
background-color: #ffebee;
background-color: #660e00;
}
.identicon.bg2 {
background-color: #f3e5f5;
background-color: #f4f0ff;
}
.identicon.bg3 {
background-color: #e8eaf6;
background-color: #f1f1ff;
}
.identicon.bg4 {
background-color: #e3f2fd;
background-color: #033464;
}
.identicon.bg5 {
background-color: #e0f2f1;
background-color: #0a4020;
}
.identicon.bg6 {
background-color: #fbe9e7;
background-color: #5c2900;
}
.identicon.bg7 {
background-color: #eee;
background-color: #303030;
}
.avatar-container {
overflow: hidden;
......
app/assets/stylesheets/startup/startup-general.scss
View file @ b05e2e2b
......@@ -1934,7 +1934,7 @@ svg.s16 {
float: left;
margin-right: 16px;
border-radius: 50%;
border: 1px solid #f5f5f5;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.avatar.s16,
.avatar-container.s16 {
......@@ -1976,8 +1976,8 @@ svg.s16 {
.identicon {
text-align: center;
vertical-align: top;
color: #525252;
background-color: #eee;
color: #303030;
background-color: #f0f0f0;
}
.identicon.s16 {
font-size: 10px;
......@@ -1992,25 +1992,25 @@ svg.s16 {
line-height: 38px;
}
.identicon.bg1 {
background-color: #ffebee;
background-color: #fcf1ef;
}
.identicon.bg2 {
background-color: #f3e5f5;
background-color: #f4f0ff;
}
.identicon.bg3 {
background-color: #e8eaf6;
background-color: #f1f1ff;
}
.identicon.bg4 {
background-color: #e3f2fd;
background-color: #e9f3fc;
}
.identicon.bg5 {
background-color: #e0f2f1;
background-color: #ecf4ee;
}
.identicon.bg6 {
background-color: #fbe9e7;
background-color: #fdf1dd;
}
.identicon.bg7 {
background-color: #eee;
background-color: #f0f0f0;
}
.avatar-container {
overflow: hidden;
......
ee/app/assets/stylesheets/startup/startup-dark.scss
View file @ b05e2e2b
......@@ -2066,7 +2066,7 @@ svg.s16 {
float: left;
margin-right: 16px;
border-radius: 50%;
border: 1px solid #333;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.avatar.s16,
.avatar-container.s16 {
......@@ -2108,8 +2108,8 @@ svg.s16 {
.identicon {
text-align: center;
vertical-align: top;
color: #525252;
background-color: #eee;
color: #fafafa;
background-color: #303030;
}
.identicon.s16 {
font-size: 10px;
......@@ -2124,25 +2124,25 @@ svg.s16 {
line-height: 38px;
}
.identicon.bg1 {
background-color: #ffebee;
background-color: #660e00;
}
.identicon.bg2 {
background-color: #f3e5f5;
background-color: #f4f0ff;
}
.identicon.bg3 {
background-color: #e8eaf6;
background-color: #f1f1ff;
}
.identicon.bg4 {
background-color: #e3f2fd;
background-color: #033464;
}
.identicon.bg5 {
background-color: #e0f2f1;
background-color: #0a4020;
}
.identicon.bg6 {
background-color: #fbe9e7;
background-color: #5c2900;
}
.identicon.bg7 {
background-color: #eee;
background-color: #303030;
}
.avatar-container {
overflow: hidden;
......
ee/app/assets/stylesheets/startup/startup-general.scss
View file @ b05e2e2b
......@@ -1934,7 +1934,7 @@ svg.s16 {
float: left;
margin-right: 16px;
border-radius: 50%;
border: 1px solid #f5f5f5;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.avatar.s16,
.avatar-container.s16 {
......@@ -1976,8 +1976,8 @@ svg.s16 {
.identicon {
text-align: center;
vertical-align: top;
color: #525252;
background-color: #eee;
color: #303030;
background-color: #f0f0f0;
}
.identicon.s16 {
font-size: 10px;
......@@ -1992,25 +1992,25 @@ svg.s16 {
line-height: 38px;
}
.identicon.bg1 {
background-color: #ffebee;
background-color: #fcf1ef;
}
.identicon.bg2 {
background-color: #f3e5f5;
background-color: #f4f0ff;
}
.identicon.bg3 {
background-color: #e8eaf6;
background-color: #f1f1ff;
}
.identicon.bg4 {
background-color: #e3f2fd;
background-color: #e9f3fc;
}
.identicon.bg5 {
background-color: #e0f2f1;
background-color: #ecf4ee;
}
.identicon.bg6 {
background-color: #fbe9e7;
background-color: #fdf1dd;
}
.identicon.bg7 {
background-color: #eee;
background-color: #f0f0f0;
}
.avatar-container {
overflow: hidden;
......
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