Merge pull request #461 from unepwcmc/ticket-13

Ticket 13

.gitmodules

@@ -1,4 +1,4 @@
 [submodule "db"]
   path = db
   url = https://github.com/unepwcmc/protectedplanet-db.git
-  branch = refresh
+  branch = ticket-13

app/assets/stylesheets/base/_buttons.scss

@@ -92,6 +92,20 @@ $padding-medium: rem-calc(27);
 //--------------------------------------------------
 // mixins for classes
 //--------------------------------------------------
+@mixin button-all($small: false) {
+  @include button-with-icon;
+  @include flex-no-shrink;
+  &::after { @include icon-circle-chevron-black; }
+
+  @if $small {
+    @include breakpoint($medium) { font-size: rem-calc(16); }
+
+    &::after {
+      height: rem-calc(21);
+      width: rem-calc(21);
+    }
+  }
+}
 @mixin button-burger { 
   @include button-basic; 
   @include icon-burger;
@@ -216,11 +230,7 @@ $padding-medium: rem-calc(27);
 //--------------------------------------------------
 .button {
   &--accent { @include button-block; }
-  &--all {
-    @include button-with-icon;
-    @include flex-no-shrink;
-    &::after { @include icon-circle-chevron-black; }
-  }
+  &--all { @include button-all; }
   &--download {
     @include button-with-icon;
     &::after { 

app/assets/stylesheets/components/_cards.scss

@@ -4,16 +4,6 @@
 //--------------------------------------------------
 // mixins
 //--------------------------------------------------
-@mixin card-stats-padding {
-  padding: rem-calc(28 30); 
-}
-
-@mixin card-stats-number {
-  color: $primary;
-  font-weight: $bold;
-  line-height: 1;
-}
-
 //--------------------------------------------------
 // classes
 //--------------------------------------------------

app/assets/stylesheets/components/_lists.scss

@@ -87,17 +87,7 @@
           justify-content: flex-end;
         }
 
-        &__a {
-          @include button-with-icon;
-          @include flex-no-shrink;
-          font-size: rem-calc(16);
-
-          &::after {
-            @include icon-circle-chevron-black;
-            height: rem-calc(21);
-            width: rem-calc(21);
-          }
-        }
+        &__a { @include button-all($small: true); }
     }
   }
 }

app/assets/stylesheets/components/cards/card/_card-stats.scss

@@ -1,6 +1,13 @@
 //--------------------------------------------------
 // mixins
 //--------------------------------------------------
+@mixin card-stat-content {
+  @include flex;
+  @include flex-column;
+
+  @include breakpoint($small) { @include flex-row; }
+}
+
 @mixin card-stats-padding {
   padding: rem-calc(16 18); 
 
@@ -13,9 +20,27 @@
   line-height: 1;
 }
 
+@mixin card-stats {
+  @include card-stats-padding;
+  background-color: $white;
+  margin-top: rem-calc(30);
+}
+
+@mixin card-stats-h2 { margin-top: 0; } 
+
+@mixin card-stats-third { width: calc(33% - 16px); }
+
+@mixin card-button-external { @include button-all($small: true); }
+
 //--------------------------------------------------
 // classes
 //--------------------------------------------------
+&--stats-wrapper-chart {
+  @include container-medium;
+
+  @include breakpoint-down($small) { padding: 0; }
+}
+
 &--stats-wrapper {
   display: flex;
   flex-wrap: wrap;
@@ -26,103 +51,18 @@
   }
 }
 
-&--stats-wrapper-chart {
-  @include container-medium;
-
-  @include breakpoint-down($small) { padding: 0; }
-}
-
-&--stats {
-  @include card-stats-padding;
-  background-color: $white;
-  margin-top: rem-calc(30);
-
-  &--half {
-    width: 100%; 
-
-    @include breakpoint($small) { width: calc(50% - 15px); }
-  }
-
-  .card {
-    &__chart {
-      margin-bottom: rem-calc(14);
-      width: 50%;
-
-      @include breakpoint($small) { 
-        margin-right: rem-calc(20);
-        margin-bottom: 0;
-        width: 30%;
-      }
-    }
-
-    &__content {
-      @include flex;
-      @include flex-column;
-
-      @include breakpoint($small) { @include flex-row; }
-    }
-
-    &__logos {
-      @include flex;
-      @include ul-unstyled;
-    }
-
-    &__logo {
-      margin-left: rem-calc(24);
+&--stats-half {
+  width: 100%; 
 
-      &:first-child { margin-left: 0; }
-    }
-
-    &__logo-image {
-      width: rem-calc(100); height: auto;
-
-      display: block;
-    }
-
-    &__number { 
-      font-size: rem-calc(16);
-      font-weight: $bold; 
-      line-height: .9;
-    }
-
-    &__number-large { 
-      font-size: rem-calc(40);
-      font-weight: $bold; 
-      line-height: .9;
-    }
-
-    &__stat-box {
-      @include bg-grey-xdark;
-      @include flex;
-      @include flex-center;
-      font-size: rem-calc(20);
-      font-weight: $bold;
-      margin-right: rem-calc(20);
-      height: rem-calc(280);
-    }
-
-    &__stat {
-      font-size: rem-calc(14);
-      line-height: 1.3;
-      margin: rem-calc(6 0 14 0);
-    }
-
-    &__stat-large { margin-bottom: rem-calc(14); }
-
-    &__subsection { border-top: solid 1px $grey-light; }
-
-    &__subtitle {
-      font-size: rem-calc(20);
-      font-weight: $bold;
-      margin: rem-calc(12 0 0 0);
-    }
-
-    &__title {
-      margin-top: 0;
-    }
-
-    &__third { width: calc(33% - 16px); }
-    &__two-thirds {  width: calc(100% - 33%); }
-  }
+  @include breakpoint($small) { width: calc(50% - 15px); }
 }
 
+@import './stats/card-stats-affiliations';
+@import './stats/card-stats-attributes';
+@import './stats/card-stats-coverage';
+@import './stats/card-stats-designations';
+@import './stats/card-stats-governance';
+@import './stats/card-stats-iucn';
+@import './stats/card-stats-management';
+@import './stats/card-stats-overview';
+@import './stats/card-stats-sources';

app/assets/stylesheets/components/cards/card/stats/_card-stats-affiliations.scss

@@ -0,0 +1,42 @@
+//--------------------------------------------------
+// classes
+//--------------------------------------------------
+&--stats-affliations {
+  @include card-stats;
+
+  .card {
+    &__button {
+      @include card-button-external;
+      margin-top: auto;
+      padding-top: rem-calc(14);
+
+      display: none; //to be added later
+    }
+
+    &__h2 { @include card-stats-h2; }
+
+    &__logos {
+      @include flex;
+      @include ul-unstyled;
+    }
+
+    &__logo {
+      margin-left: rem-calc(30);
+      max-width: rem-calc(200);
+
+      &:first-child { margin-left: 0; }
+    }
+
+    &__logo-image {
+      width: rem-calc(100); height: auto;
+
+      display: block;
+    }
+
+    &__subtitle {
+      font-weight: $bold;
+      line-height: 1.2;
+      margin: rem-calc(14 0 0 0);
+    }
+  }
+}

app/assets/stylesheets/components/cards/card/stats/_card-stats-attributes.scss

@@ -0,0 +1,10 @@
+//--------------------------------------------------
+// classes
+//--------------------------------------------------
+&--stats-attributes {
+  @include card-stats;
+
+  .card {
+    &__h2 { @include card-stats-h2; }
+  }
+}

app/assets/stylesheets/components/cards/card/stats/_card-stats-coverage.scss

@@ -0,0 +1,51 @@
+//--------------------------------------------------
+// classes
+//--------------------------------------------------
+&--stats-coverage {
+  @include card-stats;
+
+  .card {
+    &__chart {
+      margin-bottom: rem-calc(14);
+      width: 50%;
+
+      @include breakpoint($small) { 
+        margin-right: rem-calc(20);
+        margin-bottom: 0;
+        width: 30%;
+      }
+    }
+
+    &__content { @include card-stat-content; }
+
+    &__h2 { @include card-stats-h2; }
+
+    &__number { 
+      font-size: rem-calc(16);
+      font-weight: $bold; 
+      line-height: .9;
+    }
+
+    &__number-large { 
+      font-size: rem-calc(40);
+      font-weight: $bold; 
+      line-height: .9;
+    }
+
+    &__stat {
+      font-size: rem-calc(14);
+      line-height: 1.3;
+      margin: rem-calc(6 0 14 0);
+    }
+
+    &__stat-large { margin-bottom: rem-calc(14); }
+
+    &__subsection { border-top: solid 1px $grey-light; }
+
+    &__subtitle {
+      font-size: rem-calc(20);
+      font-weight: $bold;
+      margin: rem-calc(12 0 0 0);
+    }
+  }
+}

app/assets/stylesheets/components/cards/card/stats/_card-stats-designations.scss

@@ -0,0 +1,12 @@
+//--------------------------------------------------
+// classes
+//--------------------------------------------------
+&--stats-designations {
+  @include card-stats;
+
+  .card {
+    &__h2 { @include card-stats-h2; }
+
+    &__third { @include card-stats-third; }
+  }
+}

app/assets/stylesheets/components/cards/card/stats/_card-stats-governance.scss

@@ -0,0 +1,10 @@
+//--------------------------------------------------
+// classes
+//--------------------------------------------------
+&--stats-governance {
+  @include card-stats;
+
+  .card {
+    &__h2 { @include card-stats-h2; }
+  }
+}

app/assets/stylesheets/components/cards/card/stats/_card-stats-iucn.scss

@@ -0,0 +1,10 @@
+//--------------------------------------------------
+// classes
+//--------------------------------------------------
+&--stats-iucn {
+  @include card-stats;
+
+  .card {
+    &__h2 { @include card-stats-h2; }
+  }
+}

app/assets/stylesheets/components/cards/card/stats/_card-stats-management.scss

@@ -0,0 +1,10 @@
+//--------------------------------------------------
+// classes
+//--------------------------------------------------
+&--stats-management {
+  @include card-stats;
+
+  .card {
+    &__h2 { @include card-stats-h2; }
+  }
+}