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

Simplify using text color for links

Browse Source 
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;
}
```
This commit is contained in:
Javi Martín
2021-05-15 21:26:39 +02:00
parent bc7005aeef
commit 8e8a4d784c
10 changed files with 35 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -658,7 +658,7 @@ code {
.admin-content .select-heading {
a {
color: $text;
color: inherit;
display: block;
&.is-active {

6
app/assets/stylesheets/admin/menu.scss
View File

@@ -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;
}
}

5
app/assets/stylesheets/budgets/ballot/investment.scss
View File

@@ -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;
}

4
app/assets/stylesheets/budgets/phases.scss
View File

@@ -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 {

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

@@ -332,7 +332,7 @@
}
a {
color: $text;
color: inherit;
}
.is-active {

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

@@ -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;
}
}
}

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

@@ -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;

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

@@ -57,7 +57,7 @@
}
h3 a {
color: $black;
color: inherit;
margin-bottom: 1rem;
}
}

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

@@ -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 {

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

@@ -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;
}
}
}