decidim-core 0.8.4 → 0.9.0

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

@@ -7,9 +7,6 @@ $comment-vote-down-color: $alert;
 $comment-nested-bg: $light-gray;
 $comment-nested-alt-bg: $white;
 
-$comment-highlight-bg: rgba($secondary,.15);
-$comment-pinned-bg: lighten($warning,45);
-
 $comment-form-bg: $light-gray;
 
 /* Comments */
@@ -29,26 +26,13 @@ $comment-form-bg: $light-gray;
   color: $muted;
 }
 
-.show-more--comment-thread{
-  margin-top: -$card-margin-bottom / 2;
-  margin-bottom: $card-margin-bottom;
-}
-
-.comment{
-  &--highlight{
-    background: $comment-highlight-bg !important;
-  }
-  &--pinned{
-    background: $comment-pinned-bg !important;
-  }
-}
-
 .comment__header{
   padding: $comment-padding;
 }
 
 .comment__content{
   padding: 0 $comment-padding;
+
   > :last-child{
     margin-bottom: 0;
   }
@@ -58,6 +42,7 @@ $comment-form-bg: $light-gray;
 .comment__additionalreply{
   padding: $comment-padding;
   font-size: 90%;
+
   @include clearfix;
 }
 
@@ -65,9 +50,11 @@ $comment-form-bg: $light-gray;
   background: $comment-nested-bg;
   margin: $comment-padding;
   padding-bottom: 1px;
+
   &.comment--nested--alt{
-   background: $comment-nested-alt-bg;
+    background: $comment-nested-alt-bg;
   }
+
   &:first-of-type{
     margin-top: 0;
   }
@@ -81,42 +68,54 @@ $comment-form-bg: $light-gray;
 .comment__votes{
   float: right;
 }
+
 .comment__votes--up{
   color: $muted;
+
   .icon{
     color: $comment-vote-up-color;
   }
+
   &:hover,
   &.is-vote-selected{
-    color: darken($comment-vote-up-color,10);
+    color: darken($comment-vote-up-color, 10);
+
     .icon{
       color: inherit;
     }
   }
+
   &.is-vote-notselected{
     color: $muted;
     opacity: .3;
+
     .icon{
       color: inherit;
     }
   }
 }
+
 .comment__votes--down{
   color: $muted;
   padding-left: .3rem;
+
   .icon{
     color: $comment-vote-down-color;
   }
+
   &:hover,
   &.is-vote-selected{
-    color: darken($comment-vote-down-color,10);
+    color: darken($comment-vote-down-color, 10);
+
     .icon{
       color: inherit;
     }
   }
+
   &.is-vote-notselected{
     color: $muted;
     opacity: .3;
+
     .icon{
       color: inherit;
     }
@@ -128,6 +127,7 @@ $comment-form-bg: $light-gray;
 .add-comment{
   background: $comment-form-bg;
   padding: $comment-padding;
+
   .button{
     margin-bottom: 0;
   }
@@ -135,6 +135,7 @@ $comment-form-bg: $light-gray;
 
 .add-comment--reply{
   display: none;
+
   &.is-active{
     display: block;
   }

data/app/assets/stylesheets/decidim/modules/_cookie-bar.scss

@@ -2,6 +2,7 @@
   background: $medium-gray;
   padding: .5em 1em;
   text-align: center;
+
   a{
     color: darken($anchor-color, 10%);
   }
@@ -9,12 +10,15 @@
 
 .cookie-warning__action{
   text-align: center;
+
   .button{
     margin: .5em 0;
   }
+
   @include breakpoint(mediumlarge){
     vertical-align: baseline;
     display: inline-block;
+
     .button{
       margin: 0 0 0 1em;
     }

data/app/assets/stylesheets/decidim/modules/_data-picker.scss

@@ -0,0 +1,159 @@
+
+.data-picker{
+  &.picker-single .picker-values div a,
+  .picker-prompt a{
+    background: white;
+    cursor: pointer;
+    display: block;
+    width: 100%;
+    margin-bottom: 1rem;
+    padding: .4rem .7rem;
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+    box-shadow: inset 0 1px 2px rgba(26, 24, 29, .1);
+    -webkit-box-shadow: inset 0 1px 2px rgba(26, 24, 29, .1);
+    color: #1a181d;
+
+    &:active{
+      outline: none;
+      border: 1px solid #1a181d;
+      background-color: #fff;
+      box-shadow: 0 0 5px #adadad;
+      -webkit-box-shadow: 0 0 5px #adadad;
+      transition: border-color .25s ease-in-out, -webkit-box-shadow .5s;
+      -webkit-transition: border-color .25s ease-in-out, -webkit-box-shadow .5s;
+    }
+
+    &::after{
+      display: block;
+      width: 0;
+      height: 0;
+      border: inset 5px;
+      content: '';
+      border-right-width: 0;
+      border-color: transparent transparent transparent #1a181d;
+      float: right;
+      margin-top: 7px;
+    }
+  }
+
+  &.is-invalid-input.picker-single .picker-values div a,
+  &.is-invalid-input .picker-prompt a{
+    border-color: $alert-color;
+    background-color: #fdeeec;
+  }
+
+  &.picker-single .picker-values:not(:empty) + .picker-prompt{
+    display: none;
+  }
+
+  &.disabled.picker-single .picker-values div a,
+  &.disabled .picker-prompt a{
+    cursor: not-allowed;
+    background: #eee;
+
+    &:active{
+      border: inherit !important;
+      box-shadow: inherit !important;
+      -webkit-box-shadow: inherit !important;
+      transition: none !important;
+      -webkit-transition: none !important;
+    }
+  }
+
+  &.picker-multiple .picker-values{
+    div{
+      display: block;
+      margin: 0 0 2px;
+      font-size: .9rem;
+
+      input{
+        margin: 2px 8px 8px 2px;
+        vertical-align: top;
+      }
+    }
+  }
+}
+
+#data_picker-modal{
+  height: 90%;
+
+  .data_picker-modal-content{
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    min-height: 100%;
+
+    .picker-footer{
+      .buttons{
+        display: flex;
+        justify-content: center;
+        padding: 10px 0 50px; // bottom padding is needed to avoid hiding buttons on mobiles because of https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser
+      }
+    }
+
+    .picker-content{
+      flex-grow: 10;
+      min-height: 100%;
+      max-height: 100%;
+      overflow: auto;
+
+      .picker-scrollable-content{
+        max-height: 100%;
+        overflow: auto;
+      }
+    }
+  }
+}
+
+.scope-picker{
+  ul{
+    margin-left: 0;
+
+    li{
+      list-style: none;
+    }
+  }
+
+  &.picker-header{
+    padding: 5px;
+
+    li:hover{
+      background: #ddd;
+    }
+
+    li ~ li a::before{
+      content: '';
+      width: 10px;
+      height: 2em;
+      float: left;
+    }
+
+    li:last-child a{
+      color: #333;
+    }
+
+    a{
+      display: block;
+      padding: 2px;
+    }
+  }
+
+  &.picker-content{
+    .picker-scrollable-content{
+      scroll-snap-type: mandatory;
+
+      a{
+        scroll-snap-coordinate: 0 0;
+        display: block;
+        border-top: 1px solid #ddd;
+        line-height: 1.5rem;
+        padding: 5px;
+
+        &:hover{
+          background: #ddd;
+        }
+      }
+    }
+  }
+}

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

@@ -1,15 +1,15 @@
 $calendar-bg-color: $white;
-$calendar-border: 1px solid rgba(0, 0, 0, 0.1);
-$calendar-border-color: rgba(0, 0, 0, 0.1);
+$calendar-border: 1px solid rgba(0, 0, 0, .1);
+$calendar-border-color: rgba(0, 0, 0, .1);
 $calendar-active-color: $primary-color;
 $calendar-bg-hover: $light-gray;
-$calendar-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+$calendar-shadow: 0 5px 10px rgba(0, 0, 0, .2);
 $calendar-color-old: $medium-gray;
 $calendar-color-disabled: $light-gray;
 $calendar-radius: $global-radius;
 $calendar-font-size: $global-font-size * .9;
 
-.datepicker {
+.datepicker{
   display: none;
   position: absolute;
   padding: 4px;
@@ -17,7 +17,7 @@ $calendar-font-size: $global-font-size * .9;
   direction: ltr;
 }
 
-.datepicker.dropdown-menu {
+.datepicker.dropdown-menu{
   position: absolute;
   top: 100%;
   left: 0;
@@ -35,21 +35,21 @@ $calendar-font-size: $global-font-size * .9;
   line-height: 18px;
 }
 
-.datepicker.dropdown-menu th {
+.datepicker.dropdown-menu th{
   padding: 4px 5px;
 }
 
-.datepicker.dropdown-menu td {
+.datepicker.dropdown-menu td{
   padding: 6px 9px;
 }
 
-.datepicker table {
+.datepicker table{
   border: 0;
   margin: 0;
   width: auto;
 }
 
-.datepicker table tr td span {
+.datepicker table tr td span{
   display: block;
   width: 23%;
   height: 54px;
@@ -59,7 +59,7 @@ $calendar-font-size: $global-font-size * .9;
   cursor: pointer;
 }
 
-.datepicker td {
+.datepicker td{
   text-align: center;
   width: 20px;
   height: 20px;
@@ -71,7 +71,7 @@ $calendar-font-size: $global-font-size * .9;
 }
 
 .datepicker td.active.day,
-.datepicker td.active.year {
+.datepicker td.active.year{
   background: $calendar-active-color;
 }
 
@@ -82,31 +82,31 @@ $calendar-font-size: $global-font-size * .9;
 .datepicker .month:hover,
 .datepicker .year:hover{
   background-color: $calendar-bg-hover;
+
   &.active{
     background: $calendar-active-color;
   }
 }
 
-
 .datepicker td.new,
-.datepicker td.old {
+.datepicker td.old{
   color: $calendar-color-old;
 }
 
-.datepicker td span.active {
+.datepicker td span.active{
   background: $calendar-active-color;
 }
 
-.datepicker td.day.disabled {
+.datepicker td.day.disabled{
   color: $calendar-color-disabled;
 }
 
 .datepicker td span.month.disabled,
-.datepicker td span.year.disabled {
+.datepicker td span.year.disabled{
   color: $calendar-color-disabled;
 }
 
-.datepicker th {
+.datepicker th{
   text-align: center;
   width: 20px;
   height: 20px;
@@ -118,68 +118,68 @@ $calendar-font-size: $global-font-size * .9;
 }
 
 .datepicker th.active.day,
-.datepicker th.active.year {
+.datepicker th.active.year{
   background: $calendar-active-color;
 }
 
-.datepicker th.date-switch {
+.datepicker th.date-switch{
   width: 145px;
 }
 
-.datepicker th span.active {
+.datepicker th span.active{
   background: $calendar-active-color;
 }
 
-.datepicker .cw {
+.datepicker .cw{
   font-size: 10px;
   width: 12px;
   padding: 0 2px 0 5px;
   vertical-align: middle;
 }
 
-.datepicker.days div.datepicker-days {
+.datepicker.days div.datepicker-days{
   display: block;
 }
 
-.datepicker.months div.datepicker-months {
+.datepicker.months div.datepicker-months{
   display: block;
 }
 
-.datepicker.years div.datepicker-years {
+.datepicker.years div.datepicker-years{
   display: block;
 }
 
-.datepicker thead tr:first-child th {
+.datepicker thead tr:first-child th{
   cursor: pointer;
 }
 
-.datepicker thead tr:first-child th.cw {
+.datepicker thead tr:first-child th.cw{
   cursor: default;
   background-color: transparent;
 }
 
-.datepicker tfoot tr:first-child th {
+.datepicker tfoot tr:first-child th{
   cursor: pointer;
 }
 
-.datepicker-inline {
+.datepicker-inline{
   width: 220px;
 }
 
-.datepicker-rtl {
+.datepicker-rtl{
   direction: rtl;
 }
 
-.datepicker-rtl table tr td span {
+.datepicker-rtl table tr td span{
   float: right;
 }
 
-.datepicker-dropdown {
+.datepicker-dropdown{
   top: 0;
   left: 0;
 }
 
-.datepicker-dropdown:before {
+.datepicker-dropdown::before{
   content: '';
   display: inline-block;
   border-left: 7px solid transparent;
@@ -191,7 +191,7 @@ $calendar-font-size: $global-font-size * .9;
   left: 6px;
 }
 
-.datepicker-dropdown:after {
+.datepicker-dropdown::after{
   content: '';
   display: inline-block;
   border-left: 6px solid transparent;
@@ -204,11 +204,11 @@ $calendar-font-size: $global-font-size * .9;
 
 .datepicker > div,
 .datepicker-dropdown::after,
-.datepicker-dropdown::before {
+.datepicker-dropdown::before{
   display: none;
 }
 
-.datepicker-close {
+.datepicker-close{
   position: absolute;
   top: -30px;
   right: 0;
@@ -219,6 +219,6 @@ $calendar-font-size: $global-font-size * .9;
 }
 
 .table-striped .datepicker table tr td,
-.table-striped .datepicker table tr th {
+.table-striped .datepicker table tr th{
   background-color: transparent;
 }