Commit 0a52c40b authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Merge branch '26207-add-hover-animations' into 'master'

Resolve "Add Hover animations"

Closes #26207

See merge request !8415
parents 3e013664 2f5593d7
...@@ -50,3 +50,77 @@ ...@@ -50,3 +50,77 @@
.pulse { .pulse {
@include webkit-prefix(animation-name, pulse); @include webkit-prefix(animation-name, pulse);
} }
/*
* General hover animations
*/
// Sass multiple transitions mixin | https://gist.github.com/tobiasahlin/7a421fb9306a4f518aab
// Usage: @include transition(width, height 0.3s ease-in-out);
// Output: -webkit-transition(width 0.2s, height 0.3s ease-in-out);
// transition(width 0.2s, height 0.3s ease-in-out);
//
// Pass in any number of transitions
@mixin transition($transitions...) {
$unfoldedTransitions: ();
@each $transition in $transitions {
$unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
}
transition: $unfoldedTransitions;
}
@function unfoldTransition ($transition) {
// Default values
$property: all;
$duration: $general-hover-transition-duration;
$easing: $general-hover-transition-curve; // Browser default is ease, which is what we want
$delay: null; // Browser default is 0, which is what we want
$defaultProperties: ($property, $duration, $easing, $delay);
// Grab transition properties if they exist
$unfoldedTransition: ();
@for $i from 1 through length($defaultProperties) {
$p: null;
@if $i <= length($transition) {
$p: nth($transition, $i);
} @else {
$p: nth($defaultProperties, $i);
}
$unfoldedTransition: append($unfoldedTransition, $p);
}
@return $unfoldedTransition;
}
.btn,
.side-nav-toggle {
@include transition(background-color, border-color, color, box-shadow);
}
.dropdown-menu-toggle,
.avatar-circle,
.header-user-avatar {
@include transition(border-color);
}
.note-action-button .link-highlight,
.toolbar-btn,
.dropdown-toggle-caret,
.fa:not(.fa-bell) {
@include transition(color);
}
a {
@include transition(background-color, color, border);
}
.tree-table td,
.well-list > li {
@include transition(background-color, border-color);
}
.stage-nav-item {
@include transition(background-color, box-shadow);
}
...@@ -52,6 +52,10 @@ ...@@ -52,6 +52,10 @@
border-radius: 0; border-radius: 0;
border: none; border: none;
} }
&:not([href]):hover {
border-color: rgba($avatar-border, .2);
}
} }
.identicon { .identicon {
......
...@@ -57,6 +57,14 @@ header { ...@@ -57,6 +57,14 @@ header {
&.header-user-dropdown-toggle { &.header-user-dropdown-toggle {
margin-left: 14px; margin-left: 14px;
&:hover,
&:focus,
&:active {
.header-user-avatar {
border-color: rgba($avatar-border, .2);
}
}
} }
&:hover, &:hover,
...@@ -104,6 +112,7 @@ header { ...@@ -104,6 +112,7 @@ header {
&:hover { &:hover {
background-color: $white-normal; background-color: $white-normal;
color: $gl-header-nav-hover-color;
} }
} }
} }
...@@ -180,6 +189,7 @@ header { ...@@ -180,6 +189,7 @@ header {
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
color: $gl-header-nav-hover-color;
} }
} }
...@@ -198,7 +208,7 @@ header { ...@@ -198,7 +208,7 @@ header {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: darken($color: $gl-text-color, $amount: 30%); color: $gl-header-nav-hover-color;
} }
} }
...@@ -271,4 +281,5 @@ header { ...@@ -271,4 +281,5 @@ header {
float: left; float: left;
margin-right: 5px; margin-right: 5px;
border-radius: 50%; border-radius: 50%;
border: 1px solid $avatar-border;
} }
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
border-bottom: none; border-color: transparent;
} }
} }
} }
......
...@@ -102,6 +102,10 @@ $gl-text-red: #d12f19; ...@@ -102,6 +102,10 @@ $gl-text-red: #d12f19;
$gl-text-orange: #d90; $gl-text-orange: #d90;
$gl-link-color: #3777b0; $gl-link-color: #3777b0;
$gl-grayish-blue: #7f8fa4; $gl-grayish-blue: #7f8fa4;
$gl-gray: $gl-text-color;
$gl-gray-dark: #313236;
$gl-header-color: #4c4e54;
$gl-header-nav-hover-color: #434343;
/* /*
* Lists * Lists
...@@ -172,6 +176,9 @@ $count-arrow-border: #dce0e5; ...@@ -172,6 +176,9 @@ $count-arrow-border: #dce0e5;
$save-project-loader-color: #555; $save-project-loader-color: #555;
$divergence-graph-bar-bg: #ccc; $divergence-graph-bar-bg: #ccc;
$divergence-graph-separator-bg: #ccc; $divergence-graph-separator-bg: #ccc;
$general-hover-transition-duration: 150ms;
$general-hover-transition-curve: linear;
/* /*
* Common component specific colors * Common component specific colors
......
...@@ -20,6 +20,10 @@ ...@@ -20,6 +20,10 @@
.fa { .fa {
color: $cycle-analytics-light-gray; color: $cycle-analytics-light-gray;
&:hover {
color: $gl-text-color;
}
} }
.stage-header { .stage-header {
......
...@@ -154,8 +154,8 @@ ...@@ -154,8 +154,8 @@
.edit-link { .edit-link {
color: $gl-text-color; color: $gl-text-color;
&:hover { &:not([href]):hover {
color: $md-link-color; color: rgba($avatar-border, .2);
} }
} }
} }
...@@ -332,6 +332,10 @@ ...@@ -332,6 +332,10 @@
&:hover { &:hover {
color: $md-link-color; color: $md-link-color;
text-decoration: none; text-decoration: none;
.avatar {
border-color: rgba($avatar-border, .2);
}
} }
} }
......
...@@ -203,6 +203,10 @@ ...@@ -203,6 +203,10 @@
z-index: 3; z-index: 3;
border-radius: $label-border-radius; border-radius: $label-border-radius;
padding: 6px 10px 6px 9px; padding: 6px 10px 6px 9px;
&:hover {
box-shadow: inset 0 0 0 80px $label-remove-border;
}
} }
.btn { .btn {
......
...@@ -216,8 +216,8 @@ ...@@ -216,8 +216,8 @@
} }
} }
.user-profile {
.user-profile {
.cover-controls a { .cover-controls a {
margin-left: 5px; margin-left: 5px;
} }
...@@ -231,8 +231,11 @@ ...@@ -231,8 +231,11 @@
} }
} }
@media (max-width: $screen-xs-max) { .user-profile-nav {
font-size: 0;
}
@media (max-width: $screen-xs-max) {
.cover-block { .cover-block {
padding-top: 20px; padding-top: 20px;
} }
...@@ -253,6 +256,12 @@ ...@@ -253,6 +256,12 @@
} }
} }
} }
.user-profile-nav {
a {
margin-right: 0;
}
}
} }
} }
......
...@@ -14,6 +14,20 @@ ...@@ -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 lighten($search-input-focus-shadow-color, 20%), 0 0 0 1px lighten($search-input-focus-shadow-color, 20%);
}
.search { .search {
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
......
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
or change it at #{link_to Gitlab.config.gravatar.host, "http://" + Gitlab.config.gravatar.host} or change it at #{link_to Gitlab.config.gravatar.host, "http://" + Gitlab.config.gravatar.host}
.col-lg-9 .col-lg-9
.clearfix.avatar-image.append-bottom-default .clearfix.avatar-image.append-bottom-default
= link_to avatar_icon(@user, 400), target: '_blank' do
= image_tag avatar_icon(@user, 160), alt: '', class: 'avatar s160' = image_tag avatar_icon(@user, 160), alt: '', class: 'avatar s160'
%h5.prepend-top-0 %h5.prepend-top-0
Upload new avatar Upload new avatar
......
---
title: Add various hover animations throughout the application
merge_request:
author:
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