From 0c2e752932374dcdbe8effd02a1d9f3e7d7e4f65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 20 May 2021 00:00:09 +0200 Subject: [PATCH 1/5] Simplify overriding menu dropdown icon color By default Foundation uses a `#1779ba transparent transparent` transparent border. We were overriding the whole border, when we only needed to override the top border. Furthermore, we were overriding it twice: once in the public area and once in the admin area. However, if we use `currentcolor`, we only have to override it once, and in both cases the border will have the same color as the text surrounding it (white in the public area and black in the admin area). --- app/assets/stylesheets/admin.scss | 4 ---- app/assets/stylesheets/layout.scss | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index d2d2915f4..c05286a01 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -155,10 +155,6 @@ $table-header: #ecf1f6; color: $admin-color; } - .dropdown.menu > .is-dropdown-submenu-parent > a::after { - border-color: #000 transparent transparent; - } - .fieldset { select { diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 9d459878b..5f4bae0d5 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -644,7 +644,7 @@ body > header, } &.is-dropdown-submenu-parent > a::after { - border-color: #fff transparent transparent; + border-top-color: currentcolor; } } From 80dbdeec983186055ce9ccd644337ba58076990e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 20 May 2021 00:04:38 +0200 Subject: [PATCH 2/5] Simplify borders in dashboard resource cards In both cases we were using a 2px solid border with the color of the current text, so we can write the rule once and without defining the colors. --- app/assets/stylesheets/dashboard.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index 711ae419b..81cdca0e5 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -182,14 +182,13 @@ background: #feeaeb; &::before { - border: 2px solid #fb9497; color: #fb9497; content: "\74"; } } &::before { - border: 2px solid #00cb96; + border: 2px solid; border-radius: rem-calc(40); color: #00cb96; content: "\6c"; From 2efc307e5995d02d22f4cd3361c9b05fe873dfc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 20 May 2021 00:07:39 +0200 Subject: [PATCH 3/5] Simplify changing "delete/remove" links styles Since we're only changing the style of the border in one case and the color in the other case, we don't have to duplicate the code for every property. This makes it easier for other CONSUL installations to customize these borders. --- app/assets/stylesheets/admin.scss | 2 +- app/assets/stylesheets/layout.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index c05286a01..994da0dcc 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -451,7 +451,7 @@ code { &:hover, &:active, &:focus { - border-bottom: 1px dotted #fff; + border-bottom-color: transparent; color: #cf2a0e; } } diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 5f4bae0d5..98e3d9254 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -2497,7 +2497,7 @@ table { &:hover, &:active, &:focus { - border-bottom: 1px solid #cf2a0e; + border-bottom-style: solid; color: #cf2a0e; text-decoration: none; } From 7053b17e6469d9afe71466b16fd4e33459af5357 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 20 May 2021 00:08:46 +0200 Subject: [PATCH 4/5] Simplify setting border on active menu elements Since we are using the same color as the text color in both the public and admin areas, we can omit the border color completely. Since now admin elements get the exact same border, we can remove this border so they'll inherit the same border as used in the public area. --- app/assets/stylesheets/admin.scss | 1 - app/assets/stylesheets/layout.scss | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index 994da0dcc..007fa2d41 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -291,7 +291,6 @@ $table-header: #ecf1f6; } .is-active { - border-bottom: 2px solid $admin-color; color: $admin-color; font-weight: bold; } diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 98e3d9254..441358ceb 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -235,7 +235,7 @@ a { &.is-active { @include brand-text; - border-bottom: 2px solid $brand; + border-bottom: 2px solid; padding-bottom: rem-calc(1); } @@ -272,7 +272,7 @@ a { &.is-active { @include brand-text; - border-bottom: 2px solid $brand; + border-bottom: 2px solid; } } From b2a05322fda23fe8d1ca4b00dc29395757557873 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 20 May 2021 00:12:57 +0200 Subject: [PATCH 5/5] Simplify using current color on borders Using `currentcolor` is IMHO more expressive, since it shows the intention of styling the border with the same color as the text. This is particularly useful for CONSUL installations using custom styles. Consider the following code: ``` .is-active { border: 1px solid $brand; color: $brand; } ``` If we'd like to customize the way active items look, we'd have to override two colors: ``` .is-active { border: 1px solid $brand-secondary; color: $brand-secondary; } ``` Consider the scenario where we use `currentcolor` (which is the default border color): ``` .is-active { border: 1px solid; color: $brand; } ``` Now we only need to override one color to change the styles: ``` .is-active { color: $brand-secondary; } ``` --- app/assets/stylesheets/admin.scss | 2 +- app/assets/stylesheets/dashboard.scss | 4 ++-- app/assets/stylesheets/layout.scss | 8 ++++---- app/assets/stylesheets/participation.scss | 8 ++++---- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index 007fa2d41..17a3739d0 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -581,7 +581,7 @@ code { background: #fafafa; border-bottom-left-radius: rem-calc(6); border-bottom-right-radius: rem-calc(6); - border-top: 2px solid #000; + border-top: 2px solid; font-size: $small-font-size; padding: $line-height / 2; } diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index 81cdca0e5..42daef732 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -340,7 +340,7 @@ &::before { background: linear-gradient(to right, rgba(231, 236, 240, 1) 0%, rgba(251, 251, 251, 1) 90%); - border-left: 4px solid $brand; + border-left: 4px solid; content: ""; height: rem-calc(48); left: 0; @@ -366,7 +366,7 @@ } .submenu-active { - border-bottom: 2px solid $brand; + border-bottom: 2px solid; .has-tip { @include brand-text; diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 441358ceb..313d06903 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -101,7 +101,7 @@ a { .button.hollow { @include normal-selection; - border: 1px solid $link; + border: 1px solid; color: $link; } @@ -346,7 +346,7 @@ a { &::after { background: $brand; - border-bottom: 2px solid $brand; + border-bottom: 2px solid; bottom: 0; content: ""; left: 0; @@ -726,7 +726,7 @@ body > header, @include breakpoint(medium) { @include brand-text; - border-bottom: 2px solid $brand; + border-bottom: 2px solid; } } } @@ -798,7 +798,7 @@ body > header, .is-active { @include brand-text; - border-bottom: 2px solid $brand; + border-bottom: 2px solid; &:hover { text-decoration: none; diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index aba94db5c..167ca4003 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -29,7 +29,7 @@ .icon-like, .icon-unlike { background: #fff; - border: 2px solid $text-light; + border: 2px solid; border-radius: rem-calc(3); color: $text-light; display: inline-block; @@ -1577,11 +1577,11 @@ border-bottom: 1px solid #eee; .column:nth-child(odd) { - border-right: 2px solid $text; + border-right: 2px solid; } .answer-divider { - border-bottom: 2px solid $text; + border-bottom: 2px solid; border-right: 0 !important; margin-bottom: $line-height; padding-bottom: $line-height; @@ -1776,7 +1776,7 @@ margin: $line-height 0; span { - border-bottom: 1px solid #000; + border-bottom: 1px solid; } }