Merge branch 'refresh' into pame-integration

A few questionable scss merges in doing this

.env.example

@@ -30,4 +30,3 @@ API_ISO3_ATTRIBUTE=XXXXXXXXXX
 API_COUNTRY_NAME_ATTRIBUTE=XXXXXXXXXX
 API_JRC_COUNTRY_AREA_ATTRIBUTE=XXXXXXXXXX
 API_JRC_TERR_AREA_ATTRIBUTE=XXXXXXXXXX
-

app/assets/stylesheets/base/_base.scss

@@ -42,6 +42,10 @@ h3 {
 
   &.h3-big-white { @include h-big; color: $white; }
 }
+
+h4 {
+  @include h4;
+}
 
 p,a { 
   color: inherit; 

app/assets/stylesheets/base/_buttons.scss

@@ -3,101 +3,91 @@
 //--------------------------------------------------
 $height-small: rem-calc(46);
 $height-medium: rem-calc(56);
-
 $padding-small: rem-calc(20);
 $padding-medium: rem-calc(27);
-
 //--------------------------------------------------
 // base mixins
 //--------------------------------------------------
 @mixin button-plain () { //delete
   border: none;
   padding: 0;
 }
-
 @mixin button-basic {
-  @include responsive(font-size, rem-calc(16), rem-calc(18), rem-calc(18));
   background-color: transparent;
   border: none;
   color: inherit;
   cursor: pointer;
   font-family: $body-font;
   padding: 0;
   text-decoration: none;
-
   &:hover { text-decoration: none; }
 }
-
-@mixin button-disabled { cursor: disabled; }
-
+@mixin button-font {
+  @include responsive(font-size, rem-calc(16), rem-calc(18), rem-calc(18));
+}
+@mixin button-disabled { 
+  cursor: not-allowed; 
+  opacity: .2;
+}
 @mixin button-height { 
   @include responsive(height, $height-small, $height-medium, $height-medium);
-
   display: inline-flex;
   align-items: center;
 }
-
-@mixin button-padding {
+@mixin button-padding($size: default) {
   @include responsive(padding-right, $padding-small, $padding-medium, $padding-medium);
   @include responsive(padding-left, $padding-small, $padding-medium, $padding-medium);
 }
-
 @mixin button-radius {
   border-radius: $button-radius;
 }
-
-
 //--------------------------------------------------
 // shared mixins
 //--------------------------------------------------
 @mixin button-block ($bg: $purple, $text: $white) {
   @include button-basic;
   @include button-height;
+  @include button-font;
   @include button-padding;
   @include button-radius;
   background-color: $bg;
   color: $text;
 }
-
 @mixin button-download {
   @include button-basic;
   @include button-height;
   @include button-radius;
   @include flex-center;
   background-color: $primary;
+  font-size: rem-calc(18);
   padding: 0 $padding-medium;
-
   &::after { 
     @include icon-download-black; 
     content: '';
     margin-left: rem-calc(10); 
-
     display: inline-block;
   }
 }
-
 @mixin button-with-icon {
   @include button-basic;
+  @include button-font;
   @include flex;
   @include flex-v-center;
-
   &::after {
     content: '';
     margin-left: rem-calc(10);
-
     display: inline-block;
   }
 }
-
-@mixin button-outline ($colour: $black, $border-size: 2px) {
+@mixin button-outline ($colour: $black) {
   @include button-basic;
+  @include button-font;
   @include button-height;
   @include button-padding;
   @include button-radius;
   border: solid $border-size $colour;
   color: $colour;
 }
-
 //--------------------------------------------------
 // mixins for classes
 //--------------------------------------------------
@@ -109,140 +99,106 @@ $padding-medium: rem-calc(27);
   @include button-basic; 
   @include icon-cross;
 }
-
 @mixin button-download-trigger {
   @include button-download;
 }
-
 @mixin button-download-trigger-small {
   @include button-download;
   @include responsive(padding, 0, 0 $padding-medium, 0 $padding-medium);
   @include responsive(width, $height-small, auto, auto);
-
   &::after { 
     @include responsive(margin-left, 0, rem-calc(10), rem-calc(10)); 
   }
-
   .download__trigger-text {
     @include responsive(display, none, initial, initial);
   }
 }
-
 @mixin button-dropdown {
   @include button-with-icon;
   &::after { @include icon-chevron-black-down; }
 }
-
 @mixin button-dropdown-up {
   @include button-with-icon;
   &::after { @include icon-chevron-black-up; }
 }
-
-@mixin button-dropdown-filter {
-  @include button-dropdown;
-  @include button-outline($black, 1px);
-
-  @include breakpoint-down($medium) {
-    font-size: rem-calc(16);
-    padding: rem-calc(1 11);
-    height: rem-calc(34);
-  }
-
-  &:after {
-    @include breakpoint-down($medium) { display: none; }
-  }
-}
-
 @mixin button-filter-trigger {
   @include button-with-icon;
   @include button-outline;
   @include breakpoint-down($small) { padding: rem-calc(0 12); }
-
   &::after { 
     @include icon-filters; 
     @include breakpoint-down($small) { margin: 0; }
   }
-
   .button__text { @include responsive(display, none, inline, inline); }
 }
-
-@mixin button-link {
-  @include button-basic;
-  font-size: rem-calc(18);
-
-  &:hover { text-decoration: underline;}
-}
-
 @mixin button-map-trigger {
   @include button-with-icon;
   @include button-outline;
   &::after { @include icon-pin-outline; }
 }
-
 @mixin button-next { @include button-basic; }
 @mixin button-prev { @include button-basic; }
-
 @mixin button-search {
   @include button-basic;
+  @include button-font;
   @include button-radius;
   background-color: $primary;
   width: rem-calc(47); height: rem-calc(47);
-
   &:before {
     @include icon-search-white;
     content: '';
     margin: 0 auto;
   }
 }
-
+@mixin button-tab-rounded($size: default) {
+  @include button-basic;
+  border: solid transparent 1px;
+  border-radius: rem-calc(20);
+  @if $size == 'small' {
+    font-size: rem-calc(14);
+    padding: rem-calc(6 16);
+  } @else {
+    @include text-tabs-fake;
+    padding: rem-calc(5 26);
+  }
+  &:hover,
+  .active { border-color: $primary; }
+  &.active { 
+    background-color: $primary;
+    color: $white;
+  }
+}
 //--------------------------------------------------
 // classes
 //--------------------------------------------------
 .button {
   &--accent { @include button-block; }
-
   &--all {
     @include button-with-icon;
     @include flex-no-shrink;
-
     &::after { @include icon-circle-chevron-black; }
   }
-
   &--download {
     @include button-with-icon;
-
     &::after { 
       @include icon-download; 
       display: inline-block;
     }
   }
-
   &--external {
     @include button-with-icon;
     @include button-block;
     font-weight: $bold;
-
     &::after { @include icon-arrow-external-white; }
   }
-
   &--link-external {
     @include button-with-icon;
-
     &::after { 
       @include icon-arrow-external; 
       display: inline-block;
     }
   }
-
-  &--link { @include button-link; }
-
-  &--link-bold {
-    @include button-link;
-    font-weight: $bold;
-  }
-
   &--outline-black { @include button-outline($black); }
   &--outline-white { @include button-outline($white); }
-
   &--primary { @include button-block; }
-}
+}

app/assets/stylesheets/base/mixins/_icons.scss

@@ -200,6 +200,10 @@ $icon-search-width: rem-calc(21);
   @include icon-image('pin-outline.svg', rem-calc(14), rem-calc(20));
 }
 
+@mixin icon-placeholder-image() {
+  @include icon-basic;
+  @include icon-image('image.svg', rem-calc(114), rem-calc(91));
+}
 @mixin icon-region() { @include icon-earth(); }
 
 @mixin icon-search() {

app/assets/stylesheets/base/mixins/_layout.scss

@@ -7,7 +7,8 @@
 
 @mixin container-medium {
   @include container;
-  @include breakpoint($large){ width: $site-width-medium-desktop; }
+  @include breakpoint($small){ max-width: $site-width-medium-desktop; }
+  @include breakpoint($medium){ width: $site-width-medium-desktop; }
 }
 
 @mixin gutters($sides:'both', $type:'padding') {

app/assets/stylesheets/base/mixins/_text.scss

@@ -61,6 +61,7 @@
 @mixin h4 {
   @include text-2;
   @include responsive(font-size, rem-calc(18), rem-calc(18), rem-calc(16));
+  margin: 1.5em 0 .8em 0;
 }
 
 @mixin h-big {