Commit 6bd785a5 authored by dimitrieh's avatar dimitrieh

hover animations for award buttons, buttons, dropdowns, rows in file list,...

hover animations for award buttons, buttons, dropdowns, rows in file list, links, navigation tabs, labels
parent de25604f
...@@ -50,3 +50,62 @@ ...@@ -50,3 +50,62 @@
.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 {
@include transition(background-color, border-color, color, box-shadow);
}
a {
@include transition(background-color, color, border);
}
.color-label {
@include transition(box-shadow);
}
.tree-table td {
@include transition(background-color, border-color);
}
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
border-bottom: none; border-color: transparent;
} }
} }
} }
......
...@@ -182,6 +182,9 @@ $count-arrow-border: #dce0e5; ...@@ -182,6 +182,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
......
...@@ -106,6 +106,10 @@ ...@@ -106,6 +106,10 @@
.color-label { .color-label {
padding: 3px 7px; padding: 3px 7px;
border-radius: $label-border-radius; border-radius: $label-border-radius;
&:hover {
box-shadow: inset 0 0 0 80px rgba(0,0,0,0.1);
}
} }
.dropdown-labels-error { .dropdown-labels-error {
...@@ -203,6 +207,10 @@ ...@@ -203,6 +207,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 rgba(0,0,0,0.1);
}
} }
.btn { .btn {
......
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