decidim-core 0.8.4 → 0.9.0

data/app/assets/stylesheets/decidim/modules/_buttons.scss

@@ -1,10 +1,11 @@
-/* Foundation button overrides*/
+/* Foundation button overrides */
 
 .button{
   &.small{
     padding-top: .5rem;
     padding-bottom: .5rem;
   }
+
   &.tiny{
     padding-top: .25rem;
     padding-bottom: .25rem;
@@ -17,30 +18,34 @@
   background-color: transparent;
   border-color: inherit;
   color: $primary;
+
   &.secondary{
     color: $secondary;
   }
+
   &.success{
     color: $success;
   }
+
   &.alert{
     color: $alert;
   }
+
   &.warning{
     color: $warning;
   }
 }
 
-
-
-/*Extra buttons styles*/
+/* Extra buttons styles */
 
 .button--icon{
   display: flex;
   align-items: center;
+
   .icon{
     margin: 0 2px;
   }
+
   &.small{
     .icon{
       width: 12px;
@@ -56,9 +61,11 @@
 
 .button--muted{
   background-color: $muted;
+
   &:hover{
     background-color: $secondary;
   }
+
   &.hollow{
     border-color: $muted;
   }
@@ -68,6 +75,7 @@
   text-transform: uppercase;
   letter-spacing: .05em;
   font-weight: 600;
+
   &.large{
     font-size: 1rem;
   }
@@ -89,6 +97,7 @@
 .muted-link{
   font-weight: 600;
   color: $muted;
+
   &:hover{
     color: $anchor-color;
   }
@@ -99,7 +108,7 @@
   margin-bottom: $margin-s;
 }
 
-/*Social buttons*/
+/* Social buttons */
 
 .button--social{
   padding: 0 1.5rem 0 0;
@@ -111,8 +120,8 @@
 .button--social__icon{
   display: inline-block;
   vertical-align: middle;
-  padding: 0.85em 1rem;
-  border-right: 1px solid rgba(black,.075);
+  padding: .85em 1rem;
+  border-right: 1px solid rgba(black, .075);
   margin-right: .5rem;
   min-width: 3rem;
   text-align: center;
@@ -120,19 +129,24 @@
 
 .button--twitter{
   background-color: $twitter;
+
   &:hover{
-    background-color: lighten($twitter,5);
+    background-color: lighten($twitter, 5);
   }
 }
+
 .button--facebook{
   background-color: $facebook;
+
   &:hover{
-    background-color: lighten($facebook,5);
+    background-color: lighten($facebook, 5);
   }
 }
+
 .button--google{
   background-color: $google;
+
   &:hover{
-    background-color: lighten($google,5);
+    background-color: lighten($google, 5);
   }
 }

data/app/assets/stylesheets/decidim/modules/_callout.scss

@@ -1,4 +1,4 @@
-/* Callout foundation overwrites*/
+/* Callout foundation overwrites */
 
 .callout{
   &.primary{
@@ -6,18 +6,22 @@
     border-color: $medium-gray;
     border-left: 8px solid $primary;
   }
+
   &.secondary{
     border-color: $medium-gray;
     border-left: 8px solid $secondary;
   }
+
   &.success{
     border-color: $medium-gray;
     border-left: 8px solid $success;
   }
+
   &.warning{
     border-color: $medium-gray;
     border-left: 8px solid $warning;
   }
+
   &.alert{
     border-color: $medium-gray;
     border-left: 8px solid $alert;

data/app/assets/stylesheets/decidim/modules/_card-grid.scss

@@ -4,7 +4,7 @@ $card-grid-margin-bottom: map-get($grid-column-gutter, medium);
   display: flex;
   flex-wrap: wrap;
 
-  &:before{
+  &::before{
     width: 0; //fixes a flexbox bug in Safari with the clearfix element
   }
 

data/app/assets/stylesheets/decidim/modules/_cards.scss

@@ -4,7 +4,7 @@ $card-bg: $white;
 $card-secondary-bg: $light-gray-dark;
 $card-border: $border;
 $card-border-radius: $global-radius;
-$card-shadow: 0 2px 7px rgba(black,.1);
+$card-shadow: 0 2px 7px rgba(black, .1);
 
 $card-padding-small: 1rem;
 $card-padding: 1.5rem;
@@ -19,7 +19,6 @@ $card-meeting: $meetings;
 
 $datetime-bg: $primary;
 
-
 /* Cards */
 .card{
   margin-bottom: $card-margin-bottom;
@@ -27,7 +26,14 @@ $datetime-bg: $primary;
   border: $card-border;
   border-radius: $card-border-radius;
   overflow: hidden;
-  //box-shadow: $card-shadow;
+
+  @include modifiers(border-top-color, (muted: rgba($muted, .3))){
+    border-top-width: 8px;
+  }
+
+  &:hover{
+    @include modifiers(border-color, (muted: rgba($muted, .3)));
+  }
 }
 
 .card--nomargin{
@@ -40,12 +46,17 @@ $datetime-bg: $primary;
 }
 
 .card__content{
-   padding: $card-padding-small;
+  padding: $card-padding-small;
+
   @include breakpoint(medium){
-   padding: $card-padding;
+    padding: $card-padding;
   }
 }
 
+.card__content--center{
+  text-align: center;
+}
+
 .card__extra{
   background: $card-secondary-bg;
   padding: $card-padding-small;
@@ -55,6 +66,11 @@ $datetime-bg: $primary;
   @extend .heading5;
 }
 
+.card__title--strong{
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
 .card__header{
   margin-bottom: 1rem;
 }
@@ -76,6 +92,7 @@ $datetime-bg: $primary;
   display: flex;
   align-self: flex-start;
   align-items: center;
+
   .icon{
     width: 14px;
     height: 14px;
@@ -85,21 +102,19 @@ $datetime-bg: $primary;
 }
 
 /* Card meetings */
-
 .card--meeting{
   .card__content{
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+
     .address{
       margin-top: auto;
     }
   }
 }
 
-
 /* Card datetime */
-
 .card__datetime{
   flex-shrink: 0;
   text-align: center;
@@ -128,33 +143,40 @@ $datetime-bg: $primary;
   font-size: .8rem;
 }
 
-
 /* Card footer */
-
 .card__footer{
   background: $card-footer-bg;
   border-top: $card-border;
   border-radius: 0 0 $card-border-radius $card-border-radius;
   clear: both;
+
   .card__content{
     display: flex;
   }
 }
 
+.card__footer--transparent{
+  background: transparent;
+}
+
 .card__footer--data{
   display: flex;
   align-items: center;
+
   .card__content{
     flex-grow: 1;
   }
+
   .card-data{
     flex-direction: column;
   }
+
   .card-data__item{
     flex-basis: auto;
     border-right: none;
     border-left: $border;
     border-bottom: $border;
+
     &:last-of-type{
       border-bottom: none;
     }
@@ -185,6 +207,7 @@ $datetime-bg: $primary;
   display: flex;
   flex-wrap: wrap;
 }
+
 .card-data__item{
   display: inline-block;
   flex-basis: 33.33%;
@@ -200,6 +223,7 @@ $datetime-bg: $primary;
   border-top: $border;
   margin-top: -1px;
 }
+
 .card-data__item__number{
   display: block;
   line-height: 1;
@@ -214,6 +238,7 @@ $datetime-bg: $primary;
 .card__popularity{
   padding: $card-padding;
   text-align: center;
+
   .icon{
     fill: $medium-gray;
   }
@@ -228,8 +253,6 @@ $datetime-bg: $primary;
   color: $muted;
 }
 
-
-
 /* Card support */
 
 .card__support{
@@ -239,9 +262,11 @@ $datetime-bg: $primary;
   justify-content: space-between;
   align-items: center;
   padding: $card-padding-small;
+
   @include breakpoint(medium){
     padding: $card-padding;
   }
+
   .card__button{
     //margin-left: auto;
     font-size: $small-font-size;
@@ -264,10 +289,10 @@ $datetime-bg: $primary;
   color: $body-font-color;
 }
 
-
 /* Card with image */
 .card__img{
   text-align: center;
+
   @include breakpoint(large){
     float: right;
     width: 35%;
@@ -281,10 +306,10 @@ $datetime-bg: $primary;
   }
 }
 
-
 /* Card Link */
 .card__link{
   color: inherit;
+
   &:hover{
     color: $anchor-color;
   }
@@ -297,7 +322,7 @@ $datetime-bg: $primary;
 /* Card list */
 .card--list{
   .card--list__item:not(:last-of-type),
-  *:not(:last-of-type) .card--list__item {
+  *:not(:last-of-type) .card--list__item{
     border-bottom: $border;
   }
 }
@@ -306,9 +331,11 @@ $datetime-bg: $primary;
   display: flex;
   align-items: center;
   padding-left: $card-padding-small;
+
   .card--list--mini &{
     padding-left: $card-padding-small;
   }
+
   @include breakpoint(medium){
     padding-left: $card-padding;
   }
@@ -317,6 +344,7 @@ $datetime-bg: $primary;
 .card--list__icon{
   display: none;
   fill: $anchor-color;
+
   @include breakpoint(medium){
     margin-right: 1rem;
     display: block;
@@ -333,9 +361,11 @@ $datetime-bg: $primary;
   overflow: hidden;
   align-items: center;
   padding: 1rem 1rem 1rem 0;
+
   .card--list--mini &{
     padding: .5rem .5rem .5rem 0;
   }
+
   .author{
     margin-top: .3rem;
     margin-right: 1rem;
@@ -367,9 +397,11 @@ $datetime-bg: $primary;
   color: $muted;
   padding: $card-padding-small;
   background: $card-secondary-bg;
+
   @include breakpoint(medium){
     padding: 1rem $card-padding;
   }
+
   .card--list--mini &{
     padding: .5rem $card-padding-small;
   }
@@ -381,6 +413,7 @@ $datetime-bg: $primary;
     height: 20px;
     fill: $muted;
   }
+
   &:hover{
     .icon{
       fill: $anchor-color;
@@ -390,11 +423,13 @@ $datetime-bg: $primary;
 
 .card--list__data__number{
   @extend .card-data__item__number;
+
   font-size: 1.5rem;
 }
 
 .card--list__titled-text{
   @extend .card--list__text;
+
   flex-wrap: wrap;
 
   $date-width: 28px;
@@ -424,7 +459,7 @@ $datetime-bg: $primary;
     margin-left: auto;
     width: $counter-size;
 
-    span {
+    span{
       display: block;
       line-height: $counter-size;
       text-align: center;
@@ -436,14 +471,18 @@ $datetime-bg: $primary;
 
 .card--full{
   margin-bottom: $card-margin-bottom*2;
-	&:last-child{
-		margin-bottom: 0;
-	}
+
+  &:last-child{
+    margin-bottom: 0;
+  }
+
   .card__title{
     @extend .heading2;
   }
+
   .card__content{
     padding: $card-padding;
+
     @include breakpoint(large){
       padding: $card-padding*2;
     }
@@ -452,21 +491,25 @@ $datetime-bg: $primary;
 
 .card--full__image{
   background-size: cover;
-	background-position: center;
-	background-repeat: no-repeat;
+  background-position: center;
+  background-repeat: no-repeat;
   position: relative;
+
   @include breakpoint(medium only){
     min-height: 15rem;
     display: flex;
     align-items: center;
     justify-content: center;
   }
+
   > .card__content{
     position: relative;
     z-index: 1;
+
     @include breakpoint(medium only){
       min-width: 50%;
     }
+
     @include breakpoint(mediumlarge){
       position: absolute;
       top: 0;
@@ -478,37 +521,40 @@ $datetime-bg: $primary;
 //small card with top image
 .card__image-top{
   background-size: cover;
-	background-position: center;
-	background-repeat: no-repeat;
-	height: 10rem;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 10rem;
+
   .card--process &{
     display: none;
+
     @include breakpoint(mediumlarge){
       display: block;
     }
   }
 }
 
-
 /* Card full width process variant */
 
-
- @include breakpoint(mediumlarge){
+@include breakpoint(mediumlarge){
   .card--process__row{
-      display: flex;
+    display: flex;
   }
 
   .card--process__column{
     position: relative;
+
     .card--full__image-wrapper{
       height: 100%;
       overflow: hidden;
     }
+
     .card--full__image{
       height: 100%;
       position: absolute;
       right: -1px;
       left: 0;
+
       > img{
         min-height: 100%;
         max-width: initial;
@@ -520,9 +566,10 @@ $datetime-bg: $primary;
 
 .card--process__small{
   font-size: $small-font-size;
-	&:last-child{
-		margin-bottom: 0;
-	}
+
+  &:last-child{
+    margin-bottom: 0;
+  }
 }
 
 /* Card mini */
@@ -534,11 +581,35 @@ $datetime-bg: $primary;
     flex-direction: column;
     flex-grow: 1;
   }
+
   .card__image-top{
     display: block;
     height: 8rem;
   }
+
   .card--process__small{
     margin-top: auto;
   }
 }
+
+// card status
+.card__status{
+  .card-data__item{
+    flex-basis: initial;
+    padding: 1em .5em;
+
+    &:empty{
+      border-right: 0;
+
+      & + .card-data__item:not(:empty){
+        border-left: $border;
+      }
+    }
+  }
+
+  .card-status__text{
+    font-weight: bold;
+
+    @include modifiers(color, (muted: $muted));
+  }
+}