Skip to content

Commit

Permalink
Update green buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@barbara-chaves
barbara-chaves committed Nov 17, 2023
1 parent c8548ef commit aec8d77
Show file tree
Hide file tree
Showing 6 changed files with 46 additions and 27 deletions.
6 changes: 6 additions & 0 deletions app/assets/stylesheets/tpi/_emissions-chart.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
&__country-selector {
.button {
padding: 12px 16px;
color: $ascor-color;
}

&__countries {
Expand Down Expand Up @@ -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;
}
}
}
}
Expand Down
11 changes: 11 additions & 0 deletions app/assets/stylesheets/tpi/buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
48 changes: 25 additions & 23 deletions app/assets/stylesheets/tpi/pages/ascor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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);
}
}

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -312,7 +314,7 @@ $see-more-width-tablet: 130px;

&__icon {
&:before {
content: '';
content: "";
display: block;

min-width: 40px;
Expand All @@ -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");
}
}

Expand Down Expand Up @@ -418,7 +420,7 @@ $see-more-width-tablet: 130px;
flex-wrap: wrap;

&__title {
flex-grow:2
flex-grow: 2;
}

&__text {
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -500,7 +502,7 @@ $see-more-width-tablet: 130px;

.country-assessment__more {
&:before {
content: 'See less';
content: "See less";
}

&::after {
Expand All @@ -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;
Expand Down Expand Up @@ -552,7 +554,7 @@ $see-more-width-tablet: 130px;

p {
font-size: 14px;
margin-bottom: 50px
margin-bottom: 50px;
}

.button {
Expand All @@ -576,4 +578,4 @@ $see-more-width-tablet: 130px;
}
}
}
}
}
2 changes: 1 addition & 1 deletion app/javascript/components/tpi/charts/ascor-emissions/CountrySelector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const CountrySelector = ({
return (
<div className="emissions__filters__country-selector">
<button
className="button is-primary"
className="button is-emphasis"
onClick={() => setCountriesOpen((open) => !open)}
type="button"
>
Expand Down
4 changes: 2 additions & 2 deletions app/views/tpi/ascor/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
</a>
</div>

<%= link_to user_download_tpi_ascor_index_path, class: 'button is-primary is-pulled-right with-icon with-border' do %>
<%= link_to user_download_tpi_ascor_index_path, class: 'button is-emphasis is-pulled-right with-icon with-border' do %>
<img src="<%= asset_path 'icons/download.svg'%>" alt="download icon" />
Download ASCOR data
<% end %>
Expand Down Expand Up @@ -114,7 +114,7 @@
<div class="promoted-publications__title">
<div class="promoted-publications__title-text">Publications and news</div>

<%= link_to 'View all publications and news', tpi_publications_path, class: 'button is-secondary is-hidden-touch' %>
<%= link_to 'View all publications and news', tpi_publications_path, class: 'button is-emphasis is-hidden-touch' %>
</div>

<% if @publications_and_articles.any? %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/tpi/ascor/show.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
</div>
</div>

<%= link_to user_download_tpi_ascor_index_path, class: 'button is-primary is-pulled-right with-icon with-border' do %>
<%= link_to user_download_tpi_ascor_index_path, class: 'button is-emphasis is-pulled-right with-icon with-border' do %>
<img src="<%= asset_path 'icons/download.svg'%>" alt="download icon" />
Download ASCOR data
<% end %>
Expand Down

0 comments on commit aec8d77

Please sign in to comment.