From 8e8a4d784cd68c7f8a73adee60d64646915892f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 15 May 2021 21:26:39 +0200 Subject: [PATCH] Simplify using text color for links Using `inherit` is IMHO more expressive since it means "use the color of the parent element". This is particularly useful for CONSUL installations using custom styles. Consider the following code: ``` h2 { color: $white; a { color: $white; } } ``` If we'd like to customize the way headings look, we'd have to override two colors: ``` h2 { color: $red; a { color: $red; } } ``` Consider the scenario where we use `inherit`: ``` h2 { color: $white; a { color: inherit; } } ``` Now we only need to override one color to change the styles: ``` h2 { color: $red; } ``` --- app/assets/stylesheets/admin.scss | 2 +- app/assets/stylesheets/admin/menu.scss | 6 ++--- .../budgets/ballot/investment.scss | 5 ++--- app/assets/stylesheets/budgets/phases.scss | 4 ++-- app/assets/stylesheets/dashboard.scss | 2 +- .../stylesheets/datepicker_overrides.scss | 4 ++-- app/assets/stylesheets/layout.scss | 20 ++++++++--------- app/assets/stylesheets/legislation.scss | 2 +- .../stylesheets/legislation_process.scss | 4 ++-- app/assets/stylesheets/participation.scss | 22 +++++++++---------- 10 files changed, 35 insertions(+), 36 deletions(-) diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index e03125ca4..f612c6eb1 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -658,7 +658,7 @@ code { .admin-content .select-heading { a { - color: $text; + color: inherit; display: block; &.is-active { diff --git a/app/assets/stylesheets/admin/menu.scss b/app/assets/stylesheets/admin/menu.scss index 61651a36b..b0d72571e 100644 --- a/app/assets/stylesheets/admin/menu.scss +++ b/app/assets/stylesheets/admin/menu.scss @@ -2,6 +2,7 @@ background: $sidebar; background: linear-gradient(to bottom, #245b80 0%, #488fb5 100%); border-right: 1px solid $border; + color: $white; ul { list-style-type: none; @@ -22,7 +23,6 @@ } [class^="icon-"] { - color: #fff; display: inline-block; font-size: rem-calc(20); line-height: $line-height; @@ -136,7 +136,7 @@ } li a { - color: #fff; + color: inherit; display: block; line-height: $line-height * 2; padding-left: $line-height / 4; @@ -144,7 +144,7 @@ &:hover { background: $sidebar-hover; - color: #fff; + color: inherit; text-decoration: none; } } diff --git a/app/assets/stylesheets/budgets/ballot/investment.scss b/app/assets/stylesheets/budgets/ballot/investment.scss index 55f6e5cae..a09be82ab 100644 --- a/app/assets/stylesheets/budgets/ballot/investment.scss +++ b/app/assets/stylesheets/budgets/ballot/investment.scss @@ -11,7 +11,7 @@ position: relative; a { - color: $text; + color: inherit; } .ballot-list-title { @@ -42,9 +42,8 @@ &:hover { @include brand-background; - a, span { - color: #fff; + color: inherit; outline: 0; text-decoration: none; } diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss index c796aa324..4f06a78ae 100644 --- a/app/assets/stylesheets/budgets/phases.scss +++ b/app/assets/stylesheets/budgets/phases.scss @@ -75,13 +75,13 @@ a { background: $white; - color: $black; + color: inherit; height: 100%; padding: $line-height $line-height * 1.5; &:hover { background: #e6e6e6; - color: $black; + color: inherit; } &:focus { diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index 86a02be16..711ae419b 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -332,7 +332,7 @@ } a { - color: $text; + color: inherit; } .is-active { diff --git a/app/assets/stylesheets/datepicker_overrides.scss b/app/assets/stylesheets/datepicker_overrides.scss index 2b1b2567c..239b38f70 100644 --- a/app/assets/stylesheets/datepicker_overrides.scss +++ b/app/assets/stylesheets/datepicker_overrides.scss @@ -32,7 +32,7 @@ .ui-datepicker-prev, .ui-datepicker-next { - color: #fff; + color: inherit; cursor: pointer; font-family: "icons" !important; font-size: rem-calc(24); @@ -85,7 +85,7 @@ a { text-align: center; line-height: $line-height; - color: $text; + color: inherit; } } } diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 39c9b4eea..9d459878b 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -218,7 +218,7 @@ a { } a { - color: $text; + color: inherit; display: inline-block; font-weight: bold; position: relative; @@ -237,10 +237,6 @@ a { @include brand-text; border-bottom: 2px solid $brand; padding-bottom: rem-calc(1); - - h2 a { - @include brand-text; - } } &:not(.is-active) { @@ -658,7 +654,7 @@ body > header, padding-right: $line-height / 2; a { - color: #fff; + color: inherit; margin: 0 rem-calc(6); &:hover { @@ -691,6 +687,7 @@ body > header, @include breakpoint(medium) { background: #fff; + color: $text; padding-bottom: 0; } @@ -707,7 +704,7 @@ body > header, } a { - color: #fff; + color: inherit; display: inline-block; line-height: $line-height * 2; position: relative; @@ -715,7 +712,6 @@ body > header, width: 100%; @include breakpoint(medium) { - color: $text; display: block; font-weight: bold; width: auto; @@ -822,6 +818,9 @@ body > header, // ---------- footer { + .logo { + color: inherit; + } .logo a { font-family: "Lato" !important; @@ -843,7 +842,7 @@ footer { a, a:active, a:focus { - color: $text; + color: inherit; text-decoration: underline; &:hover { @@ -927,6 +926,7 @@ footer { background: $brand image-url("auth_bg.jpg"); background-repeat: no-repeat; background-size: cover; + color: $white; @include breakpoint(medium) { min-height: $line-height * 42; @@ -936,7 +936,7 @@ footer { margin-top: $line-height; a { - color: #fff; + color: inherit; display: block; text-align: center; diff --git a/app/assets/stylesheets/legislation.scss b/app/assets/stylesheets/legislation.scss index cdf361a44..044f969f4 100644 --- a/app/assets/stylesheets/legislation.scss +++ b/app/assets/stylesheets/legislation.scss @@ -57,7 +57,7 @@ } h3 a { - color: $black; + color: inherit; margin-bottom: 1rem; } } diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss index 03c58399a..119a5bb06 100644 --- a/app/assets/stylesheets/legislation_process.scss +++ b/app/assets/stylesheets/legislation_process.scss @@ -498,7 +498,7 @@ } a { - color: $text; + color: inherit; &:hover, &:active, @@ -506,7 +506,7 @@ text-decoration: none; h3 { - color: $text; + color: inherit; } .anchor::before { diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 776c8f6f4..aba94db5c 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -166,7 +166,7 @@ .button-support { background: $proposals; - color: $text; + color: inherit; display: inline-block; font-size: $small-font-size; margin-top: rem-calc(12); @@ -223,13 +223,13 @@ z-index: 2; p { - color: $color-warning !important; + color: inherit !important; margin: 0 rem-calc(12); text-align: left; } a { - color: $color-warning !important; + color: inherit !important; font-weight: bold; text-decoration: underline; } @@ -623,7 +623,7 @@ margin-top: $line-height / 2; a { - color: $text; + color: inherit; } } @@ -1042,7 +1042,7 @@ margin-bottom: 0; a { - color: $text; + color: inherit; font-size: rem-calc(24); } } @@ -1097,7 +1097,7 @@ padding-top: 0; a { - color: $color-warning; + color: inherit; } p { @@ -1117,7 +1117,7 @@ .social-share-button .ssb-icon { background: none; - color: $text; + color: inherit; height: rem-calc(33); &::before { @@ -1170,7 +1170,7 @@ .back, .icon-angle-left, .description { - color: #fff; + color: inherit; } a { @@ -1234,7 +1234,7 @@ font-size: $base-font-size; a { - color: $color-warning; + color: inherit; } } @@ -1455,7 +1455,7 @@ position: relative; a { - color: $text; + color: inherit; display: block; img { @@ -1761,7 +1761,7 @@ line-height: $line-height * 1.5; a { - color: $text; + color: inherit; } } }