Variablize all color property values

Also going with `--modifier` naming scheme when direct pseudo-class
modifying variable. And fixing small typo.

Change-Id: Ife2f9dc9cb57c063a43e4b3dfad3c737aaf3b72b
This commit is contained in:
Volker E 2019-09-29 23:36:58 -07:00
parent 2b0a28cdcb
commit e3f9cdcf70
4 changed files with 7 additions and 5 deletions

View file

@ -114,7 +114,7 @@
color: @color-link; color: @color-link;
&:visited { &:visited {
color: @color-link-visited; color: @color-link--visited;
} }
} }
} }

View file

@ -29,10 +29,10 @@
// Styles for both the search input and the button. // Styles for both the search input and the button.
input { input {
// Support IE6-8:; Fallback for browsers, which don't support `rgba()`. // Support IE6-8: Fallback for browsers, which don't support `rgba()`.
background-color: @background-color-base; background-color: @background-color-base;
background-color: rgba( 0, 0, 0, 0 ); background-color: rgba( 0, 0, 0, 0 );
color: #000; color: @color-base--emphasized;
margin: 0; margin: 0;
} }
} }

View file

@ -44,7 +44,7 @@
&.new { &.new {
a, a,
a:visited { a:visited {
color: #a55858; color: @color-link-new;
} }
} }

View file

@ -11,8 +11,10 @@
// Page content // Page content
@background-color-base: #fff; @background-color-base: #fff;
@color-base: #222; @color-base: #222;
@color-base--emphasized: #000;
@color-link: #0645ad; @color-link: #0645ad;
@color-link-visited: #0b0080; @color-link--visited: #0b0080;
@color-link-new: #a55858;
@color-link-selected: @color-base; @color-link-selected: @color-base;
@font-size-base: unit( 14 / @font-size-browser, em ); // Equals `0.875em`. @font-size-base: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.