From 41893f3435d4d7b64cbb28372bfabfede37155ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 29 Apr 2021 14:56:25 +0200 Subject: [PATCH 1/5] Differenciate links in summaries Using the same color as text made it impossible to visually recognize the link. Users might click the link accidentally while trying to select the text of that link. Furthermore, sighted keyboard users would be surprised when tabbing through the interface and realizing some apparently normal text is really a link. --- app/assets/stylesheets/participation.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 5b6ed3783..776c8f6f4 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -725,10 +725,6 @@ margin-top: 0; overflow: hidden; position: relative; - - a { - color: $text; - } } .truncate { From 9a94a5f87f15f36d8d91d59b4ea0856c0dfa68ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 29 Apr 2021 17:45:42 +0200 Subject: [PATCH 2/5] Simplify top bar colors The text color is inherited from the `
` element since commit e2d540d20, while the background color can also be inherited as well. --- app/assets/stylesheets/layout.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 3a8163578..7358c43ad 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -537,7 +537,7 @@ body > header, } .top-bar { - @extend %brand-background; + background-color: inherit; padding-bottom: 0; padding-top: 0; From bc7005aeef5748253e75838995653e07039e230f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 29 Apr 2021 17:49:51 +0200 Subject: [PATCH 3/5] Simplify dropdown menu colors Using `inherit` we don't have to overwrite the styles in the admin menu. --- app/assets/stylesheets/admin.scss | 4 ---- app/assets/stylesheets/layout.scss | 11 ++++------- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index 91a80ff92..e03125ca4 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -147,10 +147,6 @@ $table-header: #ecf1f6; @include breakpoint(medium) { height: auto !important; } - - a { - color: #000 !important; - } } .title-bar { diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 7358c43ad..39c9b4eea 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -559,7 +559,7 @@ body > header, } a { - color: #fff; + color: inherit; padding-left: 0; @include breakpoint(medium) { @@ -591,6 +591,7 @@ body > header, &.is-dropdown-submenu { background: #fff; + color: $text; margin: 0; margin-top: rem-calc(-12); padding: 0; @@ -601,10 +602,6 @@ body > header, display: block; height: auto; margin-bottom: 0; - - a { - color: $text; - } } } @@ -647,7 +644,7 @@ body > header, } &.is-active > a { - color: #fff; + color: inherit; } &.is-dropdown-submenu-parent > a::after { @@ -787,7 +784,7 @@ body > header, margin-bottom: $line-height / 2; a { - color: $text; + color: inherit; display: inline-block; font-weight: bold; margin-right: $line-height / 2; 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 4/5] 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; } } } From e6c1cf77438023e390f84d46f1c46d779f38abdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 28 May 2021 02:10:02 +0200 Subject: [PATCH 5/5] Simplify colors in admin header Not that we've simplified the top bar colors, we can just use a transparent header to get the same background as the body. --- app/assets/stylesheets/admin.scss | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index f612c6eb1..d2d2915f4 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -53,6 +53,7 @@ $table-header: #ecf1f6; } .header { + background: transparent; border: 0; } @@ -64,14 +65,9 @@ $table-header: #ecf1f6; } } - .admin-top-bar { - background: #fff; - } - .top-bar { - background: #fff !important; border-bottom: 1px solid #eee; - color: #000; + color: $text; height: auto; padding-top: $line-height / 2; @@ -128,7 +124,7 @@ $table-header: #ecf1f6; } small { - color: #000; + color: inherit; text-transform: uppercase; } }