From 5ba1055d23ee4109e75e35352e0193f39bc65b01 Mon Sep 17 00:00:00 2001
From: dimitrieh <dimitriehoekstra@gmail.com>
Date: Tue, 3 Jan 2017 14:51:19 +0100
Subject: [PATCH] added additional hover animations, fixed up avatars
---
.../stylesheets/framework/animations.scss | 22 +++++++++++++++++--
app/assets/stylesheets/framework/avatar.scss | 4 ++++
app/assets/stylesheets/framework/header.scss | 4 +++-
.../stylesheets/framework/variables.scss | 1 +
.../stylesheets/pages/cycle_analytics.scss | 4 ++++
app/assets/stylesheets/pages/issuable.scss | 4 ++++
app/assets/stylesheets/pages/profile.scss | 10 ++++++++-
app/assets/stylesheets/pages/search.scss | 14 ++++++++++++
app/views/profiles/show.html.haml | 3 ++-
9 files changed, 61 insertions(+), 5 deletions(-)
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index d9046696bc3..572bb51e24b 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -94,10 +94,23 @@
@return $unfoldedTransition;
}
-.btn {
+.btn,
+.side-nav-toggle {
@include transition(background-color, border-color, color, box-shadow);
}
+.dropdown-menu-toggle,
+.avatar-circle {
+ @include transition(border-color);
+}
+
+.note-action-button .link-highlight,
+.toolbar-btn,
+.dropdown-toggle-caret,
+.fa {
+ @include transition(color);
+}
+
a {
@include transition(background-color, color, border);
}
@@ -106,6 +119,11 @@ a {
@include transition(box-shadow);
}
-.tree-table td {
+.tree-table td,
+.well-list > li {
@include transition(background-color, border-color);
}
+
+.stage-nav-item {
+ @include transition(background-color, box-shadow);
+}
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index 48827578d94..905a61aaee9 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -24,6 +24,10 @@
&.s110 { @include avatar-size(110px, 15px); }
&.s140 { @include avatar-size(140px, 15px); }
&.s160 { @include avatar-size(160px, 20px); }
+
+ &:hover {
+ border-color: $gl-link-color;
+ }
}
.avatar {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 971940773f7..09e7db80914 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -104,6 +104,7 @@ header {
&:hover {
background-color: $white-normal;
+ color: $gl-header-nav-hover-color;
}
}
}
@@ -180,6 +181,7 @@ header {
&:hover {
text-decoration: underline;
+ color: $gl-header-nav-hover-color;
}
}
@@ -198,7 +200,7 @@ header {
cursor: pointer;
&:hover {
- color: darken($color: $gl-text-color, $amount: 30%);
+ color: $gl-header-nav-hover-color;
}
}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 05d32137ad2..9f2f045fb00 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -109,6 +109,7 @@ $gl-grayish-blue: #7f8fa4;
$gl-gray: $gl-text-color;
$gl-gray-dark: #313236;
$gl-header-color: #4c4e54;
+$gl-header-nav-hover-color: #434343;
/*
* Lists
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 9ce261eafef..47286727bc1 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -20,6 +20,10 @@
.fa {
color: $cycle-analytics-light-gray;
+
+ &:hover {
+ color: $gl-text-color;
+ }
}
.stage-header {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 6b4d1f85564..bc4ac8d2eb4 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -277,6 +277,10 @@
&:hover {
color: $md-link-color;
text-decoration: none;
+
+ .avatar {
+ border-color: $md-link-color;
+ }
}
}
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 8b1976bd925..a677e34a615 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -222,6 +222,10 @@
margin-left: 5px;
}
+ .nav-links li {
+ margin-right: -4px;
+ }
+
.profile-header {
margin: 0 auto;
@@ -253,6 +257,10 @@
}
}
}
+
+ .nav-links li {
+ margin-right: -7px;
+ }
}
}
@@ -271,4 +279,4 @@ table.u2f-registrations {
.scopes-list {
padding-left: 18px;
}
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index cedd4cb2987..e524872ff3a 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -14,6 +14,20 @@
}
}
+.search form:hover,
+.file-finder-input:hover,
+.issuable-search-form:hover,
+.search-text-input:hover,
+textarea:hover,
+.form-control:hover {
+ border-color: lighten($dropdown-input-focus-border, 20%);
+ box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%);
+}
+
+input[type="checkbox"]:hover {
+ box-shadow: 0 0 2px 2px rgba(153, 212, 247, 0.4), 0 0 0 1px rgba(153, 212, 247, 0.4);
+}
+
.search {
margin-right: 10px;
margin-left: 10px;
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index 2385a90401e..c0c82cde2f6 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -18,7 +18,8 @@
or change it at #{link_to Gitlab.config.gravatar.host, "http://" + Gitlab.config.gravatar.host}
.col-lg-9
.clearfix.avatar-image.append-bottom-default
- = image_tag avatar_icon(@user, 160), alt: '', class: 'avatar s160'
+ = link_to avatar_icon(@user, 400), target: '_blank' do
+ = image_tag avatar_icon(@user, 160), alt: '', class: 'avatar s160'
%h5.prepend-top-0
Upload new avatar
.prepend-top-5.append-bottom-10
--
GitLab