From 8fd27f72135c90b45fb1aca0e989cf04b17a8416 Mon Sep 17 00:00:00 2001 From: Hugo Soucy Date: Fri, 20 Mar 2015 20:54:50 -0400 Subject: [PATCH 1/7] Add transition + color var name. --- app/assets/sass/global/_color-schemes.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/assets/sass/global/_color-schemes.scss b/app/assets/sass/global/_color-schemes.scss index 1571916..21a2f86 100644 --- a/app/assets/sass/global/_color-schemes.scss +++ b/app/assets/sass/global/_color-schemes.scss @@ -26,9 +26,11 @@ %colorLink { color:$_color_dark_delta; + transition-duration: 0.5s; + transition-property: color; &:hover { - color:white; + color:$_color_omega; } } From a665272dfc489fb2f421b6362400867bb2c43fe3 Mon Sep 17 00:00:00 2001 From: Hugo Soucy Date: Fri, 20 Mar 2015 20:55:27 -0400 Subject: [PATCH 2/7] Modify panes's table to have a full length on small screen. --- app/assets/sass/modules-interface/_main.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/assets/sass/modules-interface/_main.scss b/app/assets/sass/modules-interface/_main.scss index 7a035ca..f293c58 100644 --- a/app/assets/sass/modules-interface/_main.scss +++ b/app/assets/sass/modules-interface/_main.scss @@ -5,7 +5,7 @@ .main[role="main"] {} .main__overview { - padding:$_space $_space_narrow $_space_narrow; + padding:$_space 0 $_space_narrow; position:relative; @include large-xlarge-screen { @@ -81,9 +81,11 @@ .main__overview__title { margin-bottom:$_space_narrow; + padding:0 $_space_narrow; @include large-xlarge-screen { margin-bottom:$_space; + padding:0; } .color-scheme--dark & { From 2d5b77e457c6698da1891b9faccb61867c0fc3c6 Mon Sep 17 00:00:00 2001 From: Hugo Soucy Date: Fri, 20 Mar 2015 20:56:23 -0400 Subject: [PATCH 3/7] Delete trailing spaces. --- app/assets/sass/modules-objects/_filters.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app/assets/sass/modules-objects/_filters.scss b/app/assets/sass/modules-objects/_filters.scss index 88f4e88..7af6bd4 100644 --- a/app/assets/sass/modules-objects/_filters.scss +++ b/app/assets/sass/modules-objects/_filters.scss @@ -26,7 +26,7 @@ } .filters__sublist { - padding:$_space_narrow; + padding:$_space_narrow; .filters__item, .filters__subitem {display:block;} @@ -44,13 +44,13 @@ position:relative; width:auto; - .color-scheme--dark & { + .color-scheme--dark & { border-color:$_color_dark_beta; - } + } - .color-scheme--light & { + .color-scheme--light & { border-color:$_color_light_beta; - } + } .filters__item--more &, .filters__item--settings & {border-right-width:1px;} @@ -65,8 +65,8 @@ .filters__item--more & { min-width:87px; text-align:left; - text-transform:lowercase; - + text-transform:lowercase; + .ico-down-dir { float:right; } From 84390b410c634b91376271f542e322c43f16f45f Mon Sep 17 00:00:00 2001 From: Hugo Soucy Date: Fri, 20 Mar 2015 20:56:51 -0400 Subject: [PATCH 4/7] Add transition properties. --- app/components/sidebar/_sidebar.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/components/sidebar/_sidebar.scss b/app/components/sidebar/_sidebar.scss index 33cc7fe..de47d54 100644 --- a/app/components/sidebar/_sidebar.scss +++ b/app/components/sidebar/_sidebar.scss @@ -118,6 +118,8 @@ position:absolute; right:0; top:0 ; + transition-duration:0.5s; + transition-property:color; @include large-xlarge-screen { padding:$_space $_space 0; @@ -131,6 +133,9 @@ color:$_color_light_gamma; } + &:focus, + &:hover {color:$_color_omega;} + &:before {margin:0;} .sidebar__item:first-child & {padding-top:0;} From 59f0aba8b78e81f150052c7e90c31f55d7d7d343 Mon Sep 17 00:00:00 2001 From: Hugo Soucy Date: Fri, 20 Mar 2015 20:57:14 -0400 Subject: [PATCH 5/7] Create a class for button with hover effect. --- app/components/topbar/_topbar.scss | 57 ++++++++++-------------------- 1 file changed, 19 insertions(+), 38 deletions(-) diff --git a/app/components/topbar/_topbar.scss b/app/components/topbar/_topbar.scss index 65a5f79..3dcfa3e 100644 --- a/app/components/topbar/_topbar.scss +++ b/app/components/topbar/_topbar.scss @@ -83,22 +83,26 @@ &:before {margin:0;} } + + &.topbar__button--hover { + transition-duration: 0.5s; + transition-property: color, background-color; + + &[aria-expanded="true"], + &:hover { + .color-scheme--dark & { + background:$_color_dark_alpha; + } + + .color-scheme--light & { + background:$_color_light_alpha; + } + } + } } .topbar__toggle-sidebar { - /* .topbar__button { */ - /* &:hover { */ - /* .color-scheme--dark & { */ - /* background:$_color_dark_alpha; */ - /* } */ - - /* .color-scheme--light & { */ - /* background:$_color_light_alpha; */ - /* } */ - /* } */ - /* } */ - .ico-menu { &:after { @@ -124,20 +128,9 @@ } .topbar__notifications { - .topbar__button { - &[aria-expanded="true"], - &:hover { - .color-scheme--dark & { - background:$_color_dark_alpha; - } - - .color-scheme--light & { - background:$_color_light_alpha; - } - } - } - + .ico-bell-alt { + &:after { background:$_color_error; border-radius:100%; @@ -176,19 +169,7 @@ } } -.topbar__settings { - .topbar__button { - &[aria-expanded="true"], - &:hover { - .color-scheme--dark & { - background:$_color_dark_alpha; - } - - .color-scheme--light & { - background:$_color_light_alpha; - } - } - } +.topbar__settings { .ico-sliders:before { @include vendor(transform, rotate(90deg)); From 5abc1891977a2829048cef5cc064e5df96cd48b8 Mon Sep 17 00:00:00 2001 From: Hugo Soucy Date: Fri, 20 Mar 2015 20:57:56 -0400 Subject: [PATCH 6/7] Add new hover classe. --- app/components/topbar/topbar.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/topbar/topbar.html b/app/components/topbar/topbar.html index ad1d5a1..99d02b5 100644 --- a/app/components/topbar/topbar.html +++ b/app/components/topbar/topbar.html @@ -12,7 +12,7 @@
  • -