consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplify using current color on borders

Browse Source 
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;
}
```
This commit is contained in:
Javi Martín
2021-05-20 00:12:57 +02:00
parent 7053b17e64
commit b2a05322fd
4 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/admin.scss
View File

@@ -581,7 +581,7 @@ code {
background: #fafafa; background: #fafafa;
border-bottom-left-radius: rem-calc(6); border-bottom-left-radius: rem-calc(6);
border-bottom-right-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; font-size: $small-font-size;
padding: $line-height / 2; padding: $line-height / 2;
} }

4
app/assets/stylesheets/dashboard.scss
View File

@@ -340,7 +340,7 @@
&::before { &::before {
background: linear-gradient(to right, rgba(231, 236, 240, 1) 0%, rgba(251, 251, 251, 1) 90%); 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: ""; content: "";
height: rem-calc(48); height: rem-calc(48);
left: 0; left: 0;
@@ -366,7 +366,7 @@
} }
.submenu-active { .submenu-active {
border-bottom: 2px solid $brand; border-bottom: 2px solid;
.has-tip { .has-tip {
@include brand-text; @include brand-text;

8
app/assets/stylesheets/layout.scss
View File

@@ -101,7 +101,7 @@ a {
.button.hollow { .button.hollow {
@include normal-selection; @include normal-selection;
border: 1px solid $link; border: 1px solid;
color: $link; color: $link;
} }
@@ -346,7 +346,7 @@ a {
&::after { &::after {
background: $brand; background: $brand;
border-bottom: 2px solid $brand; border-bottom: 2px solid;
bottom: 0; bottom: 0;
content: ""; content: "";
left: 0; left: 0;
@@ -726,7 +726,7 @@ body > header,
@include breakpoint(medium) { @include breakpoint(medium) {
@include brand-text; @include brand-text;
border-bottom: 2px solid $brand; border-bottom: 2px solid;
} }
} }
} }
@@ -798,7 +798,7 @@ body > header,
.is-active { .is-active {
@include brand-text; @include brand-text;
border-bottom: 2px solid $brand; border-bottom: 2px solid;
&:hover { &:hover {
text-decoration: none; text-decoration: none;

8
app/assets/stylesheets/participation.scss
View File

@@ -29,7 +29,7 @@
.icon-like, .icon-like,
.icon-unlike { .icon-unlike {
background: #fff; background: #fff;
border: 2px solid $text-light; border: 2px solid;
border-radius: rem-calc(3); border-radius: rem-calc(3);
color: $text-light; color: $text-light;
display: inline-block; display: inline-block;
@@ -1577,11 +1577,11 @@
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
.column:nth-child(odd) { .column:nth-child(odd) {
border-right: 2px solid $text; border-right: 2px solid;
} }
.answer-divider { .answer-divider {
border-bottom: 2px solid $text; border-bottom: 2px solid;
border-right: 0 !important; border-right: 0 !important;
margin-bottom: $line-height; margin-bottom: $line-height;
padding-bottom: $line-height; padding-bottom: $line-height;
@@ -1776,7 +1776,7 @@
margin: $line-height 0; margin: $line-height 0;
span { span {
border-bottom: 1px solid #000; border-bottom: 1px solid;
} }
} }