diff --git a/app/assets/stylesheets/tpi/_emissions-chart.scss b/app/assets/stylesheets/tpi/_emissions-chart.scss index 3f3fcb633..381cee482 100644 --- a/app/assets/stylesheets/tpi/_emissions-chart.scss +++ b/app/assets/stylesheets/tpi/_emissions-chart.scss @@ -23,6 +23,7 @@ &__country-selector { .button { padding: 12px 16px; + color: $ascor-color; } &__countries { @@ -73,6 +74,11 @@ &__button { display: flex; justify-content: flex-end; + button { + border: 2px solid $ascor-green !important; + background-color: white !important; + color: $ascor-green !important; + } } } } diff --git a/app/assets/stylesheets/tpi/buttons.scss b/app/assets/stylesheets/tpi/buttons.scss index fe1305ff0..449430a0d 100644 --- a/app/assets/stylesheets/tpi/buttons.scss +++ b/app/assets/stylesheets/tpi/buttons.scss @@ -120,6 +120,17 @@ $button-border-width: 4px; } } + &.is-emphasis { + background-color: $ascor-green !important; + color: $ascor-color !important; + img { + filter: brightness(0.1); + } + &:hover { + background-color: transparentize($ascor-green, 0.4) !important; + } + } + &.with-icon { img { margin-right: 10px; diff --git a/app/assets/stylesheets/tpi/pages/ascor.scss b/app/assets/stylesheets/tpi/pages/ascor.scss index a0debceaf..439ee3a91 100644 --- a/app/assets/stylesheets/tpi/pages/ascor.scss +++ b/app/assets/stylesheets/tpi/pages/ascor.scss @@ -10,7 +10,8 @@ $see-more-width-tablet: 130px; background-color: $ascor-background-color; @include desktop { - padding: $container-top-padding $container-side-padding 40px $container-side-padding; + padding: $container-top-padding $container-side-padding 40px + $container-side-padding; } } @@ -38,7 +39,7 @@ $see-more-width-tablet: 130px; } .left-icon { - background-image: image-url('tpi/ascor/circles_1.svg'); + background-image: image-url("tpi/ascor/circles_1.svg"); width: 100%; height: 100%; background-repeat: no-repeat; @@ -47,7 +48,7 @@ $see-more-width-tablet: 130px; } .right-icon { - background-image: image-url('tpi/ascor/circles_2.svg'); + background-image: image-url("tpi/ascor/circles_2.svg"); width: 100%; height: 100%; background-repeat: no-repeat; @@ -56,7 +57,7 @@ $see-more-width-tablet: 130px; } .bottom-icon { - background-image: image-url('tpi/ascor/logo.png'); + background-image: image-url("tpi/ascor/logo.png"); width: 100%; height: 100%; background-repeat: no-repeat; @@ -83,11 +84,11 @@ $see-more-width-tablet: 130px; } @include desktop { - padding-left: calc((960px - 608px)/2); + padding-left: calc((960px - 608px) / 2); } @include widescreen { - padding-left: calc((1152px - 608px)/2); + padding-left: calc((1152px - 608px) / 2); } } @@ -135,6 +136,7 @@ $see-more-width-tablet: 130px; .base-tooltip__default-trigger { background-color: $ascor-green; + color: $ascor-color; &:hover { background-color: transparentize($ascor-green, 0.4); @@ -312,7 +314,7 @@ $see-more-width-tablet: 130px; &__icon { &:before { - content: ''; + content: ""; display: block; min-width: 40px; @@ -324,31 +326,31 @@ $see-more-width-tablet: 130px; } &--no:before { - background-image: image-url('tpi/ascor/no.svg'); + background-image: image-url("tpi/ascor/no.svg"); } &--yes:before { - background-image: image-url('tpi/ascor/yes.svg'); + background-image: image-url("tpi/ascor/yes.svg"); } &--not-applicable:before { - background-image: image-url('tpi/ascor/not_applicable.svg'); + background-image: image-url("tpi/ascor/not_applicable.svg"); } &--no-data:before { - background-image: image-url('tpi/ascor/no_data.svg'); + background-image: image-url("tpi/ascor/no_data.svg"); } &--partial:before { - background-image: image-url('tpi/ascor/partial.svg'); + background-image: image-url("tpi/ascor/partial.svg"); } &--no-disclosure:before { - background-image: image-url('tpi/ascor/no_disclosure.svg'); + background-image: image-url("tpi/ascor/no_disclosure.svg"); } &--excempt:before { - background-image: image-url('tpi/ascor/excempt.svg'); + background-image: image-url("tpi/ascor/excempt.svg"); } } @@ -418,7 +420,7 @@ $see-more-width-tablet: 130px; flex-wrap: wrap; &__title { - flex-grow:2 + flex-grow: 2; } &__text { @@ -464,7 +466,7 @@ $see-more-width-tablet: 130px; width: $see-more-width; right: -1px; bottom: -1px; - border: 1px solid #CFD7ED; + border: 1px solid #cfd7ed; user-select: none; @include tablet { @@ -473,17 +475,17 @@ $see-more-width-tablet: 130px; &:before { color: $grey-dark; - content: 'See more'; + content: "See more"; display: block; font-size: 12px; margin-top: 3px; } &:after { - content: ''; + content: ""; display: block; - background-image: image-url('icons/chevron-gray.svg'); + background-image: image-url("icons/chevron-gray.svg"); background-repeat: no-repeat; background-position: right center; background-size: 16px; @@ -500,7 +502,7 @@ $see-more-width-tablet: 130px; .country-assessment__more { &:before { - content: 'See less'; + content: "See less"; } &::after { @@ -521,7 +523,7 @@ $see-more-width-tablet: 130px; position: relative; &__icon { - background-image: image-url('tpi/ascor/circles_3.svg'); + background-image: image-url("tpi/ascor/circles_3.svg"); width: 100%; height: 100%; background-repeat: no-repeat; @@ -552,7 +554,7 @@ $see-more-width-tablet: 130px; p { font-size: 14px; - margin-bottom: 50px + margin-bottom: 50px; } .button { @@ -576,4 +578,4 @@ $see-more-width-tablet: 130px; } } } -} \ No newline at end of file +} diff --git a/app/javascript/components/tpi/charts/ascor-emissions/CountrySelector.js b/app/javascript/components/tpi/charts/ascor-emissions/CountrySelector.js index 124bf9ea8..ceeb64592 100644 --- a/app/javascript/components/tpi/charts/ascor-emissions/CountrySelector.js +++ b/app/javascript/components/tpi/charts/ascor-emissions/CountrySelector.js @@ -41,7 +41,7 @@ const CountrySelector = ({ return (