From 47b6dc228747bb12e53ef1efd72b5db178349cf8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Mu=CC=88ller?= Date: Wed, 10 Aug 2016 08:42:53 +0200 Subject: [PATCH 1/6] fix(footer): Improve styleguide trigger positioning --- public/_includes/_footer.jade | 2 +- public/resources/css/module/_footer.scss | 18 +++++++++++------- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/public/_includes/_footer.jade b/public/_includes/_footer.jade index 7f77d739f3..a186b59ca8 100644 --- a/public/_includes/_footer.jade +++ b/public/_includes/_footer.jade @@ -53,5 +53,5 @@ else footer(class="background-steel") small.text-caption Powered by Google ©2010-2016. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0. - a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow" md-button) + a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow") span.icon-favorite diff --git a/public/resources/css/module/_footer.scss b/public/resources/css/module/_footer.scss index d0376f476c..50ece15507 100644 --- a/public/resources/css/module/_footer.scss +++ b/public/resources/css/module/_footer.scss @@ -92,13 +92,17 @@ position: relative; .styleguide-trigger { - position: absolute; - top: $unit * 2; - right: $unit * 2; - font-size: 14px; - line-height: 20px; - padding: 0px $unit; opacity: .24; + float: right; + + @media handheld and (max-width: $phone-breakpoint), + screen and (max-device-width: $phone-breakpoint), + screen and (max-width: $tablet-breakpoint) { + display: block; + margin-top: 8px; + font-size: 18px; + float: none; + } } } -} \ No newline at end of file +} From 18dba19b8efaa7009007bb5969d42fb2b14c1940 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Thu, 11 Aug 2016 23:15:50 +0200 Subject: [PATCH 2/6] Further improve styleguide trigger styles - Add some more space to the right on desktop - Remove `text-decoration` - Use correct `line-height` for the icon --- public/resources/css/module/_footer.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/public/resources/css/module/_footer.scss b/public/resources/css/module/_footer.scss index 50ece15507..214ff89059 100644 --- a/public/resources/css/module/_footer.scss +++ b/public/resources/css/module/_footer.scss @@ -92,6 +92,8 @@ position: relative; .styleguide-trigger { + text-decoration: none; + margin-right: $unit * 2; opacity: .24; float: right; @@ -99,10 +101,15 @@ screen and (max-device-width: $phone-breakpoint), screen and (max-width: $tablet-breakpoint) { display: block; - margin-top: 8px; + margin-top: $unit; + margin-right: 0; font-size: 18px; float: none; } + + .icon-favorite { + line-height: 20px; + } } } } From 8a4a80033e0a0cca49398581b1df5ec79fd5d108 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Mu=CC=88ller?= Date: Wed, 21 Sep 2016 15:32:11 +0200 Subject: [PATCH 3/6] Fix up styles after sync --- public/_includes/_footer.jade | 2 +- public/resources/css/module/_footer.scss | 33 ++++++++++-------------- 2 files changed, 15 insertions(+), 20 deletions(-) diff --git a/public/_includes/_footer.jade b/public/_includes/_footer.jade index 62a9e97016..efd8cde21a 100644 --- a/public/_includes/_footer.jade +++ b/public/_includes/_footer.jade @@ -53,5 +53,5 @@ else footer(class="background-midnight") small.text-caption Powered by Google ©2010-2016. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0. - a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow") + a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger") span.icon-favorite diff --git a/public/resources/css/module/_footer.scss b/public/resources/css/module/_footer.scss index 14ab30a64c..5734ee69f3 100644 --- a/public/resources/css/module/_footer.scss +++ b/public/resources/css/module/_footer.scss @@ -77,33 +77,28 @@ } footer { - text-align: left; - padding: ($unit * 2) ($unit * 6); + text-align: center; + padding: $unit * 2; position: relative; .styleguide-trigger { - box-sizing: border-box; - position: absolute; - display: inline-block; - bottom: $unit * 2; - right: $unit * 2; - font-size: 14px; - line-height: 24px; - height: 24px; - margin: 0; - padding: 0 ($unit * 3); + color: $snow; + text-decoration: none; + margin-right: $unit * 2; opacity: .24; - transition: all .3s; + float: right; - &:hover { - background: $blue-grey-700; - text-decoration: none; + @include respond-to('mobile') { + display: block; + margin-top: $unit; + margin-right: 0; + font-size: 18px; + float: none; } .icon-favorite { - display: inline-block; - line-height: 24px; + line-height: 20px; } } } -} \ No newline at end of file +} From 9a338b659e1866abc2c147f5664e4c5040f83bbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Mu=CC=88ller?= Date: Wed, 21 Sep 2016 16:11:12 +0200 Subject: [PATCH 4/6] Some more cleanup --- public/_includes/_footer.jade | 2 +- public/resources/css/module/_footer.scss | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/public/_includes/_footer.jade b/public/_includes/_footer.jade index efd8cde21a..1cb22a54d2 100644 --- a/public/_includes/_footer.jade +++ b/public/_includes/_footer.jade @@ -52,6 +52,6 @@ else li 中文版 footer(class="background-midnight") - small.text-caption Powered by Google ©2010-2016. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0. + small.text-caption Powered by Google ©2010-2016. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0. a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger") span.icon-favorite diff --git a/public/resources/css/module/_footer.scss b/public/resources/css/module/_footer.scss index 5734ee69f3..5127bedcf2 100644 --- a/public/resources/css/module/_footer.scss +++ b/public/resources/css/module/_footer.scss @@ -78,20 +78,20 @@ footer { text-align: center; - padding: $unit * 2; - position: relative; + padding: ($unit * 2) ($unit * 6); + + a { + color: $snow; + } .styleguide-trigger { - color: $snow; text-decoration: none; - margin-right: $unit * 2; opacity: .24; float: right; @include respond-to('mobile') { display: block; margin-top: $unit; - margin-right: 0; font-size: 18px; float: none; } From c8b2c394098f9fe422ded1b4f28cfe7c30df418e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Mu=CC=88ller?= Date: Fri, 23 Sep 2016 08:58:06 +0200 Subject: [PATCH 5/6] Align footer text left on desktop --- public/resources/css/module/_footer.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/public/resources/css/module/_footer.scss b/public/resources/css/module/_footer.scss index 5127bedcf2..5bca0a6907 100644 --- a/public/resources/css/module/_footer.scss +++ b/public/resources/css/module/_footer.scss @@ -77,9 +77,13 @@ } footer { - text-align: center; + text-align: left; padding: ($unit * 2) ($unit * 6); + @include respond-to('mobile') { + text-align: center; + } + a { color: $snow; } From 8d713f1574e287f79d6f52decbee8ed7142e3078 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Fri, 23 Sep 2016 19:44:14 +0200 Subject: [PATCH 6/6] Use solid color and transition to red color on hover --- public/resources/css/module/_footer.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/public/resources/css/module/_footer.scss b/public/resources/css/module/_footer.scss index 5bca0a6907..2842294f0e 100644 --- a/public/resources/css/module/_footer.scss +++ b/public/resources/css/module/_footer.scss @@ -89,9 +89,10 @@ } .styleguide-trigger { + color: $darkgrey; text-decoration: none; - opacity: .24; float: right; + transition: color .3s; @include respond-to('mobile') { display: block; @@ -100,6 +101,10 @@ float: none; } + &:hover { + color: $red-600; + } + .icon-favorite { line-height: 20px; }