This way we simplify the code a bit.
Note we're only using this function when variables for background colors
are already defined, since that means customizing the variable using the
background color will automatically change the color of the text.
Customization isn't easier when using raw colors.
We were defining (for instance) white text against the `$brand`
background. That meant that, if somebody customized the `$brand` color
so it used a light color, they had to customize the text color as well
in order to guarantee proper contrast between text and background
colors.
So we're using `color-pick-contrast` instead, which means we don't have
to manually calculate whether white or black will be the color which
makes the text more readable.
These elements were already using these colors because they inherited
them from their parent elements or Foundation already defined them.
Note that the only contents of `.comment-info` are: `.user-name` and
`.is-author`, `.is-association`, `.level-1`, ... and the link to the
comment. All of these elements were overwriting the `$text-medium`
color, so there's no need to set it. That means we can use the default
text color for `.user-name` without specifically setting it.
We're using `background: #fff` and `background: $white` in many places.
Sometimes we mean "use the same background as the body", which means if
we change the body background so it's, let's say, dark, we'll also have
to change all these places.
So now we're using `$body-background` in more places, so changing the
general background color is easier.
There are still some places where we use `#fff` or `$white`. Sometimes
it's hard to tell whether the intention is "use a white background here"
or "use the same background as the body here". When in doubt, I've left
it the way it was.
Just for testing purposes, I've tested locally how things would look
like if we added this code to `_consul_custom_overrides.scss`:
```
$body-background: #fea;
$card-background: $body-background;
$tab-background: $body-background;
$tab-content-background: $body-background;
$table-background: $body-background;
```
Or:
```
$body-background: #333;
$text: #fcfcfc;
$body-font-color: $text;
$card-background: $body-background;
$tab-background: $body-background;
$tab-content-background: $body-background;
$table-background: $body-background;
```
Testing shows we've still got a long way to go to make it easy to add
custom color themes, since there are many custom colors in the code.
Hopefully these changes bring us one step closer.
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;
}
```
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;
}
```
Using `<a>` tags with no `href` means these elements cannot be activated
by keyboard users, so we're replacing them with buttons.
In the future we probably want to add more consistency so all toggle
buttons use the same code. We might also add styles depending on the
`aria-expanded` property.
On high-resolution screens where neither the menu nor the main content
were filling the screen, there was a blank space at the bottom which
looked weird.
We were using `overflow: scroll` as a workaround with a problem we had
with the equalizer. But now we never need an extra vertical scroll bar,
and we only need an extra horizontal scroll bar on small screens.
Since the dashboard was using the class `admin-content` as well, we need
to apply to the dashboard the same changes we've done in the admin
section. I've extracted them into a mixin.
- Created blue images quotes
- Added quotes images to preview poster
- Added quotes images to download poster
- Removed reference to Decide Madrid and use %{org}
- Removed reference to decide.madrid.es and use %{link}
- FIxed some style (font, padding, maring) in PDF
- Passed scss-lint
- Removed class large-7
- Changed font size preview-email and email
- Changed text color in the email
- Changed some font size and padding in the email
- Added some padding in preview email
- Pass scss-lint
- Changed padding and added font size.
- Inserted normal quotation marks
- Remove class quote
- Added max width mail preview
- Added some styles in the email
- Added image decide_madrid at the end of the email
- Added cover to the image preview poster and PDF
- Passed scss lint
- Added two temporal variables for colors. (Deciding how to call these new variables)
- Replaced hexadecimal with variable
- Remove white space in the html
- Converted the TAG image into background image inside an overflow container because the height of the image in the pdf pushes to create 2 pages.
- Remove unused css
-
- Added icon finger
- Chnage color quote
- Add class icon-finger
- Add some style
- Remove Open Sans
- Arranged the content in the A4
- Remove some style css
- Change some style
- Fixing the bug to the svg that was not rendered
- Change some rem to cm
- The Lato font does not render well while Open Sans is correct. Strong and normal weight.
- Customized the preview as shown by email
- Added two svg for quote icons. (Need convert to font)
- Ceate two class for quote icons.
- Added tag strong into yml for text decoration
- Customize css
- Found new solution to show dashboard proposals stats
- Added new class for behaviour change in the medium version
- Moved the progress bar to the bottom
- Moved below by adding counter-label class to the text support
- Added class to support text to push under the counter
