Commit 483203fe authored by Anne Lyle's avatar Anne Lyle Committed by Andrey Azov
Browse files

Remove 'ens-' prefix from colour variable names (#153)

parent a2b8630e
Pipeline #33494 passed with stages
in 4 minutes and 38 seconds
......@@ -6,7 +6,7 @@
align-items: center;
width: 18px;
height: 18px;
border: 2px solid $ens-blue;
border: 2px solid $blue;
border-radius: 50%;
cursor: pointer;
......@@ -18,17 +18,17 @@
svg {
width: 66%;
height: 66%;
fill: $ens-blue;
fill: $blue;
}
}
.clearButtonInverted {
background-color: $ens-blue;
background-color: $blue;
border: none;
svg {
width: 56%;
height: 56%;
fill: $ens-white;
fill: $white;
}
}
......@@ -18,8 +18,8 @@ $generalErrorImagesTotalWidth: calc(
}
.errorLinkButton {
background-color: $ens-blue;
color: $ens-white;
background-color: $blue;
color: $white;
font-weight: $bold;
padding: 8px 18px;
border-radius: 4px;
......
......@@ -18,7 +18,7 @@
.disabled {
cursor: not-allowed;
svg {
fill: $ens-grey;
fill: $grey;
opacity: 1;
}
&:before {
......@@ -44,7 +44,7 @@
.active {
svg {
fill: $ens-dark-blue;
fill: $dark-blue;
}
&svg:hover {
opacity: 0.8;
......@@ -53,8 +53,8 @@
.highlighted {
svg {
fill: $ens-white;
background: $ens-dark-blue;
fill: $white;
background: $dark-blue;
}
&svg:hover {
opacity: 0.8;
......@@ -63,7 +63,7 @@
.inactive {
svg {
fill: $ens-grey;
fill: $grey;
}
&svg:hover {
opacity: 0.8;
......
......@@ -2,8 +2,8 @@
.circleLoader {
display: inline-block;
border: 3px solid $ens-light-grey;
border-top-color: $ens-red;
border: 3px solid $light-grey;
border-top-color: $red;
width: 40px;
height: 40px;
border-radius: 100%;
......
......@@ -3,7 +3,7 @@
.privacyBanner {
position: fixed;
bottom: 0;
background: $ens-black;
background: $black;
color: white;
font-size: 13px;
line-height: 2;
......@@ -13,7 +13,7 @@
z-index: 10000;
button {
background: $ens-blue;
background: $blue;
border-radius: 2px;
color: white;
font-weight: $bold;
......@@ -22,7 +22,7 @@
}
a {
color: $ens-blue;
color: $blue;
font-weight: $bold;
}
}
......@@ -7,13 +7,13 @@
align-items: center;
width: 18px;
height: 18px;
border: 2px solid $ens-blue;
border: 2px solid $blue;
border-radius: 50%;
> svg {
width: 70%;
height: 70%;
fill: $ens-blue;
fill: $blue;
}
*[class*='tooltip'] {
......
......@@ -5,8 +5,8 @@
padding: 6px 15px;
min-width: 170px;
position: relative;
border: 1px solid $ens-blue;
color: $ens-dark-blue;
border: 1px solid $blue;
color: $dark-blue;
&:active,
&:focus {
......@@ -15,20 +15,20 @@
}
.active {
background-color: $ens-black;
border: 1px solid $ens-black;
color: $ens-white;
background-color: $black;
border: 1px solid $black;
color: $white;
}
.inactive {
background-color: $ens-blue;
border: 1px solid $ens-blue;
color: $ens-white;
background-color: $blue;
border: 1px solid $blue;
color: $white;
}
.disabled {
background-color: transparent;
color: $ens-grey;
border: 1px solid $ens-grey;
color: $grey;
border: 1px solid $grey;
cursor: default;
}
@import 'src/styles/common';
.searchField {
border: 1px solid $ens-grey;
border: 1px solid $grey;
display: inline-flex;
padding: 0 0.6em;
}
......
......@@ -25,7 +25,7 @@ $optionsPanelLeftPadding: 14px;
margin-left: 0.8em;
height: 8px;
width: 8px;
fill: $ens-blue;
fill: $blue;
}
.selectControl {
......@@ -44,7 +44,7 @@ $optionsPanelLeftPadding: 14px;
display: inline-block;
min-width: 100%;
padding: $optionsPanelTopPadding 0 34px 0;
box-shadow: 2px 2px 6px 0 $ens-grey;
box-shadow: 2px 2px 6px 0 $grey;
white-space: nowrap;
z-index: 1;
......@@ -76,7 +76,7 @@ $optionsPanelLeftPadding: 14px;
.scrollButtonBottom {
position: absolute;
left: 0;
background: $ens-white;
background: $white;
width: 100%;
text-align: center;
}
......@@ -97,7 +97,7 @@ $optionsPanelLeftPadding: 14px;
}
.optionsPanelHeader {
color: $ens-grey;
color: $grey;
margin-bottom: 1em;
}
......@@ -114,5 +114,5 @@ $optionsPanelLeftPadding: 14px;
}
.optionHighlighted {
background-color: $ens-light-blue;
background-color: $light-blue;
}
......@@ -3,7 +3,7 @@
.speciesTab {
display: inline-block;
padding: 6px 20px;
border: 1px solid $ens-blue;
border: 1px solid $blue;
border-radius: 20px;
cursor: pointer;
overflow: hidden;
......@@ -31,12 +31,12 @@
}
.speciesTabActive {
background-color: $ens-black;
background-color: $black;
border: none;
.name,
.assembly {
color: $ens-white;
color: $white;
}
}
......
@import 'src/styles/common';
$fill-color: $ens-dark-grey;
$fill-color: $dark-grey;
.tooltip {
position: absolute;
background: $fill-color;
padding: 6px 18px 8px;
box-shadow: 2px 2px 5px $ens-shadow-color;
box-shadow: 2px 2px 5px $shadow-color;
width: max-content; // not supported in IE or non-webkit Edge
cursor: default;
color: $ens-white;
color: $white;
border-radius: 4px;
font-size: 14px;
z-index: 1000;
......@@ -20,7 +20,7 @@ $fill-color: $ens-dark-grey;
&[class*='left_centre'],
&[class*='left_top'] {
svg {
filter: drop-shadow(0px -3px 2px $ens-shadow-color);
filter: drop-shadow(0px -3px 2px $shadow-color);
}
}
......@@ -28,7 +28,7 @@ $fill-color: $ens-dark-grey;
&[class*='top_centre'],
&[class*='top_right'] {
svg {
filter: drop-shadow(0px -3px 2px $ens-shadow-color);
filter: drop-shadow(0px -3px 2px $shadow-color);
}
}
}
......
......@@ -4,8 +4,9 @@
$global-font-size: 14px;
$global-lineheight: 1.5;
$black: #17354e;
$white: #fefefe;
$body-background: $white;
$white: #fff;
$off-white: #fefefe;
$body-background: $off-white;
$body-font-color: $black;
$body-font-family: Lato, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$body-antialiased: true;
......@@ -17,43 +18,40 @@ $global-button-cursor: auto;
// Colour Palette
// ---------
$shadow-color: rgba(0, 0, 0, 0.4);
$ens-black: #17354e;
$ens-shadow-color: rgba(0, 0, 0, 0.4);
$light-blue: #e5f5ff; // text highlight
$blue: #33adff; // blue on black
$dark-blue: #0099ff; // blue on white
$ens-light-blue: #e5f5ff; // text highlight
$ens-blue: #33adff; // blue on black
$ens-dark-blue: #0099ff; // blue on white
$light-grey: #f1f2f4;
$medium-light-grey: #d4d9de;
$grey: #b7c0c8;
$medium-dark-grey: #9aa7b1;
$dark-grey: #6f8190;
$ens-light-grey: #f1f2f4;
$ens-medium-light-grey: #d4d9de;
$ens-grey: #b7c0c8;
$ens-medium-dark-grey: #9aa7b1;
$ens-dark-grey: #6f8190;
$red: #d90000;
$ens-red: #d90000;
$green: #47d147;
$ens-green: #47d147;
$ens-white: #fff;
$global-box-shadow: $ens-medium-light-grey;
$global-box-shadow: $medium-light-grey;
/* stylelint-disable */
:export {
ens-black: $ens-black;
ens-blue: $ens-blue;
ens-light-blue: $ens-light-blue;
ens-dark-blue: $ens-dark-blue;
ens-red: $ens-red;
ens-dark-grey: $ens-dark-grey;
ens-medium-dark-grey: $ens-medium-dark-grey;
ens-grey: $ens-grey;
ens-medium-light-grey: $ens-medium-light-grey;
ens-light-grey: $ens-light-grey;
ens-green: $ens-green;
ens-white: $ens-white;
ens-shadow-color: $ens-shadow-color;
black: $black;
blue: $blue;
light-blue: $light-blue;
dark-blue: $dark-blue;
red: $red;
dark-grey: $dark-grey;
medium-dark-grey: $medium-dark-grey;
grey: $grey;
medium-light-grey: $medium-light-grey;
light-grey: $light-grey;
green: $green;
white: $white;
shadow-color: $shadow-color;
}
/* stylelint-enable */
......
......@@ -10,11 +10,11 @@ body,
}
a {
color: $ens-dark-blue;
color: $dark-blue;
text-decoration: none;
&.inactive {
color: $ens-dark-grey;
color: $dark-grey;
}
}
......
......@@ -7,63 +7,63 @@ import variables from 'src/styles/_settings.scss';
const colours = [
{
name: 'Ensembl black',
variableName: '$ens-black',
value: variables['ens-black']
variableName: '$black',
value: variables['black']
},
{
name: 'Ensembl blue',
variableName: '$ens-blue',
value: variables['ens-blue']
variableName: '$blue',
value: variables['blue']
},
{
name: 'Ensembl dark blue',
variableName: '$ens-dark-blue',
value: variables['ens-dark-blue']
variableName: '$dark-blue',
value: variables['dark-blue']
},
{
name: 'Ensembl light blue',
variableName: '$ens-light-blue',
value: variables['ens-light-blue']
variableName: '$light-blue',
value: variables['light-blue']
},
{
name: 'Ensembl red',
variableName: '$ens-red',
value: variables['ens-red']
variableName: '$red',
value: variables['red']
},
{
name: 'Ensembl grey',
variableName: '$ens-grey',
value: variables['ens-grey']
variableName: '$grey',
value: variables['grey']
},
{
name: 'Ensembl medium dark grey',
variableName: '$ens-medium-dark-grey',
value: variables['ens-medium-dark-grey']
variableName: '$medium-dark-grey',
value: variables['medium-dark-grey']
},
{
name: 'Ensembl dark grey',
variableName: '$ens-dark-grey',
value: variables['ens-dark-grey']
variableName: '$dark-grey',
value: variables['dark-grey']
},
{
name: 'Ensembl medium light grey',
variableName: '$ens-medium-light-grey',
value: variables['ens-medium-light-grey']
variableName: '$medium-light-grey',
value: variables['medium-light-grey']
},
{
name: 'Ensembl light grey',
variableName: '$ens-light-grey',
value: variables['ens-light-grey']
variableName: '$light-grey',
value: variables['light-grey']
},
{
name: 'Ensembl green',
variableName: '$ens-green',
value: variables['ens-green']
variableName: '$green',
value: variables['green']
},
{
name: 'Ensembl white',
variableName: '$ens-white',
value: variables['ens-white']
variableName: '$white',
value: variables['white']
}
];
......
......@@ -6,8 +6,8 @@
.active {
border: none;
background-color: $ens-dark-grey;
color: $ens-white;
background-color: $dark-grey;
color: $white;
}
.imageButtonWrapper {
......@@ -17,5 +17,5 @@
}
.badge {
background-color: $ens-red;
background-color: $red;
}
......@@ -5,5 +5,5 @@
}
.lightGreyWrapper {
background: $ens-light-grey;
background: $light-grey;
}
......@@ -2,7 +2,7 @@
.wrapper {
padding: 20px;
background-color: $ens-light-grey;
background-color: $light-grey;
width: 100%;
height: 100%;
position: absolute;
......
......@@ -37,7 +37,7 @@
.codeContent {
float: left;
background: $ens-light-grey;
background: $light-grey;
padding: 10px;
margin-top: 10px;
height: 200px;
......
......@@ -6,6 +6,6 @@
.active {
border: none;
background-color: $ens-dark-grey;
color: $ens-white;
background-color: $dark-grey;
color: $white;
}
......@@ -14,6 +14,6 @@
height: 20px;
width: 20px;
border-width: 1px;
border-color: $ens-medium-light-grey;
border-top-color: $ens-red;
border-color: $medium-light-grey;
border-top-color: $red;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment