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
@import 'src/styles/common';
.wrapper {
background-color: $ens-light-grey;
background-color: $light-grey;
height: 60px;
position: relative;
}
......@@ -10,7 +10,7 @@
position: absolute;
top: 50%;
left: 50px;
color: $ens-black;
color: $black;
margin-top: -10px;
span {
......@@ -45,11 +45,11 @@
.resultsLabel {
font-size: 11px;
color: $ens-dark-grey;
color: $dark-grey;
}
.saveConfiguration {
font-size: 11px;
color: $ens-dark-grey;
color: $dark-grey;
}
.backButton {
......@@ -67,19 +67,19 @@
}
.downloadTypeLabel {
color: $ens-dark-grey;
color: $dark-grey;
}
.downloadTypeSelect {
margin-left: 10px;
color: $ens-blue;
color: $blue;
li {
color: $ens-medium-dark-grey;
color: $medium-dark-grey;
}
}
.roundButtonInactive {
background-color: $ens-medium-dark-grey;
border-color: $ens-medium-dark-grey;
color: $ens-white;
background-color: $medium-dark-grey;
border-color: $medium-dark-grey;
color: $white;
}
@import 'src/styles/common';
.preFilterPanel {
background-color: $ens-light-grey;
background-color: $light-grey;
height: 300px;
box-shadow: 0 3px 5px $global-box-shadow;
}
.panelTitle {
margin-left: 45px;
color: $ens-dark-grey;
color: $dark-grey;
padding-top: 10px;
}
......@@ -22,23 +22,23 @@
/* RoundButton extended styles*/
.filterButtons {
.inactive {
background-color: $ens-blue;
border: 1px solid $ens-blue;
color: $ens-white;
background-color: $blue;
border: 1px solid $blue;
color: $white;
margin-left: 30px;
}
.active {
background-color: $ens-medium-dark-grey;
border: 1px solid $ens-medium-dark-grey;
color: $ens-white;
background-color: $medium-dark-grey;
border: 1px solid $medium-dark-grey;
color: $white;
margin-left: 30px;
}
.disabled {
background-color: transparent;
color: $ens-grey;
border: 1px solid $ens-grey;
color: $grey;
border: 1px solid $grey;
cursor: default;
margin-left: 30px;
}
......
@import 'src/styles/common';
.assemblySelectorLabel {
color: $ens-grey;
color: $grey;
margin-right: 0.5em;
}
......@@ -21,7 +21,7 @@ $button-gap: 1.4rem;
display: inline-block;
width: $button-width;
height: $button-width;
background: $ens-blue;
background: $blue;
padding: 3px;
overflow: hidden; // <-- solely for IE11's sake; it seems that without this rule invisible parts of svg mignt be excaping the button and messing up layout
cursor: pointer;
......@@ -40,12 +40,12 @@ $button-gap: 1.4rem;
}
.popularSpeciesButtonSelected {
background: $ens-dark-grey;
background: $dark-grey;
}
.popularSpeciesButtonCommitted {
background: white;
border: 1px solid $ens-blue;
border: 1px solid $blue;
svg {
fill: black;
......@@ -59,6 +59,6 @@ $button-gap: 1.4rem;
}
.popularSpeciesButtonDisabled {
background: $ens-grey;
background: $grey;
cursor: default;
}
......@@ -8,7 +8,7 @@ $deleteButtonPadding: 8px 20px 8px 28px;
position: relative;
display: inline-block;
padding: $selectedSpeciesPadding;
background-color: $ens-black;
background-color: $black;
border-radius: $selectedSpeciesBorderRadius;
line-height: 1;
cursor: pointer;
......@@ -36,7 +36,7 @@ $deleteButtonPadding: 8px 20px 8px 28px;
}
.selectedSpeciesDisabled {
background-color: $ens-grey;
background-color: $grey;
}
.selectedSpeciesOverlay {
......@@ -48,7 +48,7 @@ $deleteButtonPadding: 8px 20px 8px 28px;
height: 100%;
line-height: 1;
background: white;
border: 1px solid $ens-blue;
border: 1px solid $blue;
border-radius: $selectedSpeciesBorderRadius;
cursor: default;
......@@ -64,7 +64,7 @@ $deleteButtonPadding: 8px 20px 8px 28px;
padding: $selectedSpeciesPadding;
padding-left: 15px;
left: 0;
color: $ens-blue;
color: $blue;
}
.clearButtonContainer {
......
......@@ -10,19 +10,19 @@ $rightCornerWidth: 40px;
width: 100%;
max-width: 485px;
height: 36px;
box-shadow: inset 2px 2px 4px -2px $ens-dark-grey;
box-shadow: inset 2px 2px 4px -2px $dark-grey;
background: white;
}
.speciesSearchField {
width: 100%;
background: $ens-white;
background: $white;
padding-left: 18px;
border: none;
input {
&::placeholder {
color: $ens-grey;
color: $grey;
}
&:focus {
......
@import 'src/styles/common';
.speciesSearchMatch {
color: $ens-black;
color: $black;
padding: 2px 24px;
margin: 0 -23px;
cursor: pointer;
&:hover {
background-color: $ens-light-blue;
background-color: $light-blue;
}
}
......
@import 'src/styles/common';
.main {
color: $ens-black;
color: $black;
margin-left: 2em;
line-height: 2.5em;
}
......@@ -13,5 +13,5 @@
.genomeBrowserLinkContainer {
margin-left: 1.2rem;
display: inline-block;
color: $ens-blue;
color: $blue;
}
......@@ -7,13 +7,13 @@
transform: translateX(-60%);
white-space: nowrap;
display: inline-block;
color: $ens-white;
color: $white;
font-size: 12px; // FIXME
font-weight: 700;
padding: 4px 6px;
background-color: $ens-blue;
background-color: $blue;
border-radius: 4px;
box-shadow: 2px 2px 5px $ens-grey;
box-shadow: 2px 2px 5px $grey;
cursor: pointer;
user-select: none;
}
......@@ -27,11 +27,11 @@
.strain {
display: inline-block;
color: $ens-blue;
color: $blue;
cursor: pointer;
}
.strainSelected {
color: $ens-grey;
color: $grey;
cursor: default;
}
@import 'src/styles/common';
.speciesSearchPanel {
background-color: $ens-light-grey;
background-color: $light-grey;
height: 235px;
padding: 65px 40px;
padding-left: $global-padding-left;
......
......@@ -2,7 +2,7 @@
.home {
h2 {
color: $ens-grey;
color: $grey;
font-size: 14px;
font-weight: $normal;
}
......@@ -11,8 +11,8 @@
}
.search {
background: $ens-light-grey;
box-shadow: 0 3px 5px $ens-medium-light-grey;
background: $light-grey;
box-shadow: 0 3px 5px $medium-light-grey;
min-height: 235px;
padding: 15px 60px;
......@@ -22,8 +22,8 @@
input[type='text'] {
border: none;
box-shadow: inset 3px 3px 10px $ens-grey;
color: $ens-dark-grey;
box-shadow: inset 3px 3px 10px $grey;
color: $dark-grey;
font-size: 14px;
padding: 12px 20px;
min-width: 300px;
......@@ -31,7 +31,7 @@
}
button {
border: 1px solid $ens-grey;
border: 1px solid $grey;
border-radius: 5px;
margin-left: 15px;
padding: 8px 24px;
......@@ -53,7 +53,7 @@
padding-top: 2%;
h4 {
color: $ens-grey;
color: $grey;
font-size: 13px;
font-weight: $normal;
margin-bottom: 30px;
......
......@@ -7,7 +7,7 @@
align-items: center;
color: $white;
padding: 2px 20px;
background-color: $ens-black;
background-color: $black;
}
.homeLink {
......@@ -16,7 +16,7 @@
font-weight: $global-weight-bold;
a {
color: $ens-white;
color: $white;
}
img {
......@@ -39,6 +39,6 @@
}
a {
color: $ens-blue;
color: $blue;
}
}
@import 'src/styles/common';
.account {
border-bottom: 1px solid $ens-grey;
border-bottom: 1px solid $grey;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
h2 {
color: $ens-grey;
color: $grey;
text-align: center;
}
}
......@@ -3,8 +3,8 @@
.launchbar {
display: flex;
justify-content: space-between;
border-bottom: 1px solid $ens-grey;
border-top: 1px solid $ens-grey;
border-bottom: 1px solid $grey;
border-top: 1px solid $grey;
padding: 11px 6px;
overflow-x: auto;
}
......@@ -32,7 +32,7 @@
}
&:not(:last-child) {
border-right: 1px solid $ens-grey;
border-right: 1px solid $grey;
}
}
......@@ -40,7 +40,7 @@
display: inline-block;
height: 30px;
width: 30px;
border: 1px solid $ens-blue;
border: 1px solid $blue;
margin: 0 12px;
img {
......@@ -50,11 +50,11 @@
}
.launchbarButtonSelected {
border: 1px solid $ens-black;
border: 1px solid $black;
}
.launchbarButtonDisabled {
border: 1px solid $ens-grey;
border: 1px solid $grey;
}
.launchbarButtonImage {
......@@ -62,22 +62,22 @@
width: 30px;
height: 30px;
transform: scale(1.1);
fill: $ens-white;
background-color: $ens-blue;
fill: $white;
background-color: $blue;
}
}
.launchbarButtonSelectedImage {
svg {
fill: $ens-white;
background-color: $ens-black;
fill: $white;
background-color: $black;
}
}
.launchbarButtonDisabledImage {
svg {
fill: $ens-white;
background-color: $ens-grey;
fill: $white;
background-color: $grey;
}
}
......
@import 'src/styles/common';
.accordionDefault {
border: 2px solid $ens-medium-light-grey;
border: 2px solid $medium-light-grey;
border-radius: 2px;
}
.accordionItemDefault + .accordionItemDefault {
border-top: 2px solid $ens-medium-light-grey;
border-top: 2px solid $medium-light-grey;
}
.accordionButtonDefault {
......@@ -29,7 +29,7 @@
width: 10px;
margin-right: 12px;
transition: transform 0.2s linear, top 0.2s linear;
background-color: $ens-blue;
background-color: $blue;
}
.accordionButtonDefault:before {
......@@ -57,7 +57,7 @@
}
.accordionPanelDefault {
background: $ens-light-grey;
background: $light-grey;
animation: fadein 0.2s ease-in;
}
......
......@@ -22,7 +22,7 @@
top: 5px;
a {
color: $ens-black;
color: $black;
font-size: 12px;
font-weight: $light;
}
......
......@@ -14,8 +14,8 @@
z-index: 1;
padding: 18px 24px;
background: white;
border: 1px solid $ens-grey;
box-shadow: 2px 2px 6px 0 $ens-grey;
border: 1px solid $grey;
box-shadow: 2px 2px 6px 0 $grey;
}
.autosuggestionPlateMatchGroup {
......@@ -31,5 +31,5 @@
}
.autosuggestionPlateHighlightedItem {
background-color: $ens-light-blue;
background-color: $light-blue;
}
......@@ -7,14 +7,14 @@
.badgeDefault {
position: absolute;
background-color: $ens-green;
background-color: $green;
height: 26px;
min-width: 26px;
top: -13px;
right: -13px;
font-weight: 700;
padding: 2px 0 0 0;
color: $ens-white;
color: $white;
border-radius: 13px;
text-align: center;
cursor: pointer;
......
@import 'src/styles/common';
.primaryButton {
background-color: $ens-green;
color: $ens-white;
background-color: $green;
color: $white;
padding: 8px 18px;
font-weight: $bold;
}
.primaryButtonDisabled {
background-color: transparent;
color: $ens-grey;
border: 1px solid $ens-grey;
color: $grey;
border: 1px solid $grey;
cursor: default;
}
.secondaryButton {
background-color: $ens-blue;
color: $ens-white;
background-color: $blue;
color: $white;
font-weight: $bold;
}
......
......@@ -9,8 +9,8 @@
cursor: pointer;
height: 15px;
width: 15px;
border: 1px solid $ens-grey;
background-color: $ens-white;
border: 1px solid $grey;
background-color: $white;
transition: background-color 0.1s ease-in-out;
float: left;
margin-top: 2px;
......@@ -18,20 +18,20 @@
.unchecked {
cursor: pointer;
background-color: $ens-white;
background-color: $white;
}
.checked {
background-color: $ens-green;
background-color: $green;
}
.disabled {
background-color: $ens-light-grey;
background-color: $light-grey;
cursor: default;
}
.defaultLabel {
color: $ens-black;
color: $black;
line-height: 30px;
font-size: 14px;
padding-left: 8px;
......@@ -46,6 +46,6 @@
display: none;
&:focus + div {
border: 1px solid $ens-dark-grey;
border: 1px solid $dark-grey;
}
}