decidim-core 0.21.0 → 0.22.0

data/app/assets/stylesheets/decidim/modules/_conference-programme.scss

@@ -3,7 +3,6 @@
     border-bottom: $border;
     padding-bottom: $global-margin * .5;
     color: $muted;
-    text-transform: uppercase;
     font-size: rem-calc(19);
     display: flex;
     align-items: center;

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

@@ -0,0 +1,5 @@
+.confirm-reveal{
+  .confirm-content{
+    padding-bottom: 1rem;
+  }
+}

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

@@ -31,6 +31,16 @@
       flex-shrink: 0;
     }
 
+    > div{
+      flex: 1;
+    }
+
+    .p-s{
+      > p:last-child{
+        margin-bottom: 0;
+      }
+    }
+
     img{
       width: rem-calc(33px);
       height: rem-calc(33px);
@@ -56,3 +66,43 @@
     }
   }
 }
+
+.conversations{
+  .card--list__item{
+    align-items: stretch;
+  }
+}
+
+.conversation-groups{
+  .title-action{
+    margin-bottom: .8rem;
+  }
+}
+
+// Conversations in user profile pages to full length
+.user-activity{
+  .conversation{
+    .conversation-reply{
+      width: 100%;
+    }
+  }
+}
+
+.disabled-tribute-element{
+  color: $muted;
+
+  span.disabled-tribute-element-info{
+    font-size: rem-calc(12);
+    font-weight: normal;
+    font-style: italic;
+  }
+}
+
+.tribute-container{
+  .disabled-tribute-element{
+    cursor: auto;
+    margin: -5px;
+    padding: 5px;
+    z-index: 10;
+  }
+}

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

@@ -9,14 +9,18 @@
     display: block;
     width: 100%;
     padding: .4rem .7rem;
+    outline: $input-outline;
     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;
+    &:active,
+    &:focus{
+      outline: $input-outline-focus;
+      outline-color: var(--highlight);
+      outline-offset: $input-outline-offset;
       border: 1px solid #1a181d;
       background-color: #fff;
       box-shadow: 0 0 5px #adadad;
@@ -85,14 +89,6 @@
     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%;
@@ -107,7 +103,7 @@
   }
 }
 
-.scope-picker{
+.picker-list{
   ul{
     margin-left: 0;
 
@@ -115,7 +111,9 @@
       list-style: none;
     }
   }
+}
 
+.scope-picker{
   &.picker-header{
     padding: 5px;
 

data/app/assets/stylesheets/decidim/modules/_definition-data.scss

@@ -17,6 +17,10 @@
     a{
       display: block;
     }
+
+    a:hover{
+      text-decoration: underline;
+    }
   }
 
   &.expanded{
@@ -64,8 +68,9 @@
 
 .definition-data__title{
   display: block;
-  text-transform: uppercase;
   font-size: 85%;
+  letter-spacing: .01em;
+  text-transform: uppercase;
   line-height: 1;
   margin-bottom: .25rem;
   color: $muted;

data/app/assets/stylesheets/decidim/modules/_docs-manager.scss

@@ -1,7 +1,6 @@
 .docs__container{
   h6{
     cursor: pointer;
-    text-transform: uppercase;
   }
 
   svg{

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

@@ -20,7 +20,6 @@
 
 .extra__suport-text{
   display: block;
-  text-transform: uppercase;
   line-height: 1;
   font-size: .9rem;
   margin-bottom: .5rem;
@@ -33,7 +32,6 @@
 
 .extra__month{
   display: block;
-  text-transform: uppercase;
   font-size: 1rem;
 }
 

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

@@ -87,7 +87,6 @@ $filters-padding-y: 1rem;
   }
 
   .section-title{
-    text-transform: uppercase;
     color: var(--primary);
     text-decoration: underline;
     margin-right: $global-margin;
@@ -167,3 +166,28 @@ $filters-padding-y: 1rem;
     margin-bottom: 0;
   }
 }
+
+.filters__help{
+  position: relative;
+
+  p:last-of-type{
+    margin-bottom: 0;
+  }
+
+  .skip{
+    @include skip-button;
+  }
+}
+
+.filters__left-legend{
+  legend{
+    float: left;
+    padding-top: 10px;
+  }
+
+  .picker-prompt,
+  select{
+    width: 75%;
+    float: right;
+  }
+}

data/app/assets/stylesheets/decidim/modules/_floating-helper.scss

@@ -18,6 +18,13 @@
   border-bottom-left-radius: 100px;
   border-top-left-radius: 100px;
 
+  &:active,
+  &:focus{
+    outline: $anchor-outline-focus;
+    outline-color: var(--highlight);
+    outline-offset: $anchor-outline-offset;
+  }
+
   @include breakpoint(small only){
     bottom: $global-margin * 2;
   }
@@ -29,8 +36,8 @@
 }
 
 .floating-helper__text{
-  color: $secondary;
-  background-color: rgba($secondary, .1);
+  color: var(--secondary);
+  background-color: rgba(var(--secondary-rgb), .1);
   font-size: rem-calc(14);
   font-weight: $global-weight-bold;
   border-bottom-left-radius: 100px;
@@ -40,7 +47,7 @@
 
 .floating-helper__icon{
   color: $white;
-  background-color: $secondary;
+  background-color: var(--secondary);
   padding: $global-padding / 8 $global-padding / 2;
 }
 
@@ -49,8 +56,8 @@
 }
 
 .floating-helper__content{
-  background-color: rgba($secondary, .1);
-  border-top: 5px solid $secondary;
+  background-color: rgba(var(--secondary-rgb), .1);
+  border-top: 5px solid var(--secondary);
   margin-bottom: $global-margin * 3;
   padding: $global-padding * 2;
   width: 100%;
@@ -70,9 +77,9 @@
 
 .floating-helper__icon-big{
   border-radius: 50%;
-  background-color: rgba($secondary, .1);
+  background-color: rgba(var(--secondary-rgb), .1);
   flex-shrink: 0;
-  color: $secondary;
+  color: var(--secondary);
 
   @include flex;
   @include flex-align($x: center, $y: middle);
@@ -95,7 +102,7 @@
 }
 
 .floating-helper__content-close{
-  background-color: $secondary;
+  background-color: var(--secondary);
   color: $white;
   flex-shrink: 0;
   cursor: pointer;
@@ -103,4 +110,9 @@
   @include flex;
   @include flex-align($x: center, $y: middle);
   @include square(1.5rem);
+
+  &:active,
+  &:focus{
+    color: $white;
+  }
 }

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

@@ -1,6 +1,5 @@
 //Vars
-$main-footer-bg: $black;
-$mini-footer-bg: $dark-gray;
+$footer-bg: $black;
 
 //Common
 
@@ -13,13 +12,18 @@ $mini-footer-bg: $dark-gray;
 
     &:hover{
       color: darken($medium-gray, 20%);
+      text-decoration: underline;
+    }
+
+    &:focus{
+      outline-color: var(--highlight-alternative);
     }
   }
 }
 
 //Main footer
 .main-footer{
-  background-color: $main-footer-bg;
+  background-color: $footer-bg;
   position: relative;
   padding: 1rem 0;
   min-height: 76px;
@@ -92,7 +96,7 @@ $mini-footer-bg: $dark-gray;
 //Mini footer
 .mini-footer{
   padding: 1rem 0;
-  background-color: $mini-footer-bg;
+  background-color: $footer-bg;
 }
 
 .cc-badge{

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

@@ -1,6 +1,17 @@
 /* Froms foundation overwrites */
 
 $checkboxes-minimum-width: 200px;
+$help-text-margin-top: ($form-spacing * .5) * -1;
+
+.input-group{
+  .input-group-field{
+    &:focus{
+      // To raise the focus border on top of any other nearby elements
+      position: relative;
+      z-index: 10;
+    }
+  }
+}
 
 .input-group-button button{
   height: 2.5rem;
@@ -8,11 +19,29 @@ $checkboxes-minimum-width: 200px;
 }
 
 .help-text{
+  display: block;
   line-height: 1.2;
+  margin: $help-text-margin-top 0 $form-spacing;
+}
+
+.form-input-extra-before,
+.form-input-extra-after{
+  display: block;
+  font-size: $input-error-font-size;
+  font-weight: $input-error-font-weight;
+  margin-top: $form-spacing * -1;
+}
+
+.form-input-extra-before{
+  margin-bottom: $form-spacing / 2;
+}
+
+.form-input-extra-after{
+  margin-bottom: $form-spacing;
 }
 
-label > [type='checkbox'],
-label > [type='radio']{
+label > [type="checkbox"],
+label > [type="radio"]{
   margin-bottom: 0; //fixes some problems with line-height in double-line labels
 }
 
@@ -32,13 +61,27 @@ label > [type='radio']{
   }
 }
 
+.switch{
+  input.switch-input{
+    &:active,
+    &:focus{
+      & + .switch-paddle{
+        outline: $input-outline-focus;
+        outline-color: var(--highlight);
+        outline-offset: $input-outline-offset;
+      }
+    }
+  }
+}
+
 .checkboxes{
   margin-bottom: 1rem;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
 
-  &::after{ /* Align last row to left */
+  &::after{
+    /* Align last row to left */
     min-width: $checkboxes-minimum-width;
     content: "";
   }
@@ -46,8 +89,24 @@ label > [type='radio']{
   label{
     min-width: $checkboxes-minimum-width;
 
-    input[type=checkbox]{
+    input[type="checkbox"]{
       vertical-align: middle;
     }
   }
 }
+
+#{text-inputs()},
+textarea,
+select,
+input[type="file"],
+input[type="checkbox"],
+input[type="radio"]{
+  outline: $input-outline;
+
+  &:active,
+  &:focus{
+    outline: $input-outline-focus;
+    outline-color: var(--highlight);
+    outline-offset: $input-outline-offset;
+  }
+}

data/app/assets/stylesheets/decidim/modules/_horizontal-tabs.scss

@@ -10,13 +10,22 @@
     margin-bottom: $global-margin;
 
     .tabs-title{
+      &.is-active{
+        a{
+          background: transparent;
+          color: var(--primary);
+          font-weight: 600;
+          border-bottom: 3px solid var(--primary);
+        }
+      }
+
       a{
         color: $anchor-color;
         padding: $global-padding * 3/4;
         position: relative;
 
         &:focus,
-        &[aria-selected='true']{
+        &[aria-selected="true"]{
           background: transparent;
           color: var(--primary);
           font-weight: 600;
@@ -49,3 +58,57 @@
   color: inherit;
   transition: all .5s ease;
 }
+
+.responsive-tab-block{
+  @media only screen and (max-width: 639px){
+    overflow: hidden;
+    height: 44px;
+
+    & > ul.tabs{
+      flex-direction: column;
+
+      & > li{
+        flex: 0 0 auto;
+
+        &.is-active{
+          -webkit-box-ordinal-group: -1; // fixes older Safari issues
+          order: -1;
+
+          &::before{
+            display: block;
+            content: " ";
+            font-weight: normal;
+            float: right;
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-top: 5px solid #f00;
+            margin-top: 20px;
+          }
+
+          & > a:focus{
+            outline: 0 !important;
+          }
+        }
+
+        & > a{
+          border-bottom: 3px solid transparent;
+          color: green;
+
+          &:focus{
+            outline: 0 !important;
+          }
+        }
+      }
+    }
+
+    &.expanded{
+      height: auto;
+
+      & > ul.tabs > li.is-active::before{
+        transform: rotate(180deg);
+      }
+    }
+  }
+}