decidim-core 0.19.1 → 0.23.0

data/app/assets/stylesheets/decidim/extras/_external-links.scss

@@ -0,0 +1,29 @@
+.external-link-container{
+  position: relative;
+  display: inline-block;
+}
+
+.external-link-indicator{
+  display: inline-block;
+  position: relative;
+  vertical-align: baseline;
+  width: .5em;
+  margin: 0 .2rem 0 .1rem;
+  height: .5em;
+
+  .icon{
+    display: block;
+    max-height: 100%;
+    max-width: 100%;
+  }
+
+  a img + &{
+    position: absolute;
+    top: 7px;
+    right: 5px;
+    background-color: rgba(white, .9);
+    padding: .2em;
+    width: .9rem;
+    height: .9rem;
+  }
+}

data/app/assets/stylesheets/decidim/extras/_extras.scss

@@ -0,0 +1,17 @@
+@import "decidim/extras/add_comments";
+@import "decidim/extras/announcement";
+@import "decidim/extras/collection-sort-controls";
+@import "decidim/extras/embed";
+@import "decidim/extras/external-links";
+@import "decidim/extras/impersonation-bar";
+@import "decidim/extras/label-required";
+@import "decidim/extras/leaflet";
+@import "decidim/extras/meeting-registrations";
+@import "decidim/extras/process_stats";
+@import "decidim/extras/proposal_form";
+@import "decidim/extras/quill";
+@import "decidim/extras/reference";
+@import "decidim/extras/results-per-page";
+@import "decidim/extras/social_icons_mini";
+@import "decidim/extras/social_share";
+@import "decidim/extras/status-labels";

data/app/assets/stylesheets/decidim/extras/_label-required.scss

@@ -1,3 +1,12 @@
 .label-required{
+  cursor: help;
+  border-bottom: $abbr-underline;
+  text-decoration: none;
+  padding-right: 0;
   margin-left: 5px;
+
+  > span{
+    padding-right: 0;
+    margin-right: 0;
+  }
 }

data/app/assets/stylesheets/decidim/extras/_process_stats.scss

@@ -34,9 +34,9 @@
     }
 
     .process_stats-text{
-      text-transform: uppercase;
       letter-spacing: .03em;
       font-size: 90%;
+      text-transform: uppercase;
       color: #3d393c;
       font-weight: 600;
       line-height: 1;

data/app/assets/stylesheets/decidim/extras/_quill.scss

@@ -6,3 +6,8 @@
   margin: 40px auto;
   display: block;
 }
+
+.ql-toolbar .ql-video{
+  margin-top: 0;
+  margin-bottom: 0;
+}

data/app/assets/stylesheets/decidim/extras/_results-per-page.scss

@@ -7,6 +7,14 @@ $order-border: $border;
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
+
+  a:hover{
+    text-decoration: underline;
+  }
+
+  a:focus{
+    outline: $anchor-outline-focus;
+  }
 }
 
 .results-per-page__dropdown{
@@ -63,4 +71,3 @@ $order-border: $border;
     border-left: none;
   }
 }
-

data/app/assets/stylesheets/decidim/layouts/_home.scss

@@ -14,6 +14,12 @@
     height: 100%;
     background-color: rgba($black, .6);
   }
+
+  a{
+    &:focus{
+      outline-color: var(--highlight-alternative);
+    }
+  }
 }
 
 .hero__container{
@@ -86,19 +92,23 @@
       height: auto;
       border: 1px solid transparent;
 
-      &::-webkit-input-placeholder{ /* Chrome/Opera/Safari */
+      &::-webkit-input-placeholder{
+        /* Chrome/Opera/Safari */
         color: $color;
       }
 
-      &::-moz-placeholder{ /* Firefox 19+ */
+      &::-moz-placeholder{
+        /* Firefox 19+ */
         color: $color;
       }
 
-      &:-ms-input-placeholder{ /* IE 10+ */
+      &:-ms-input-placeholder{
+        /* IE 10+ */
         color: $color;
       }
 
-      &:-moz-placeholder{ /* Firefox 18- */
+      &:-moz-placeholder{
+        /* Firefox 18- */
         color: $color;
       }
     }
@@ -177,7 +187,7 @@
   padding-bottom: 1rem;
 }
 
-.home-section:nth-of-type(2n+1){
+.home-section:nth-of-type(2n + 1){
   background-color: $light-gray-dark;
 }
 
@@ -208,9 +218,23 @@
   margin-top: 2rem;
   color: var(--primary);
   display: inline-block;
+  position: relative;
+
+  &:hover,
+  &:focus{
+    text-decoration: underline;
+    color: var(--primary);
+  }
 
   .icon{
-    vertical-align: -1px;
+    position: absolute;
+    top: .33em;
+    right: -1em;
+    transition: .3s right;
+  }
+
+  &:hover .icon{
+    right: -1.2em;
   }
 }
 
@@ -278,9 +302,9 @@
 
 .home-pam__title{
   color: $muted;
-  text-transform: uppercase;
   font-size: .9rem;
   letter-spacing: .01em;
+  text-transform: uppercase;
   font-weight: 600;
   margin-bottom: 0;
 

data/app/assets/stylesheets/decidim/layouts/_layouts.scss

@@ -0,0 +1,5 @@
+@import "decidim/layouts/highlighted_banner";
+@import "decidim/layouts/home";
+@import "decidim/layouts/logo";
+@import "decidim/layouts/user";
+@import "decidim/layouts/view";

data/app/assets/stylesheets/decidim/layouts/_logo.scss

@@ -0,0 +1,26 @@
+// Organization name
+
+.logo-wrapper span{
+  color: white;
+  font-weight: 600;
+  font-size: 1.4em;
+  display: inline-block;
+  text-align: left;
+  padding-left: 8px;
+  line-height: 1;
+  position: relative;
+
+  &:hover{
+    text-decoration: underline;
+  }
+}
+
+.logo-wrapper span::before{
+  content: "";
+  display: block;
+  position: absolute;
+  border-left: 4px solid white;
+  height: 88%;
+  top: 6%;
+  left: 0;
+}

data/app/assets/stylesheets/decidim/layouts/_user.scss

@@ -50,3 +50,7 @@
     vertical-align: middle;
   }
 }
+
+.profile--sidebar--title{
+  font-size: 1.25rem;
+}

data/app/assets/stylesheets/decidim/modules/_author-avatar.scss

@@ -16,17 +16,9 @@ $author-data-color: $muted;
   padding-left: 30px;
   position: relative;
 
-  a,
-  button{
-    color: $author-data-color;
-
-    &:hover{
-      color: $anchor-color;
-    }
-  }
-
   .author__name{
     color: $anchor-color;
+    margin-bottom: 0;
   }
 
   .author__avatar{
@@ -57,9 +49,10 @@ $author-data-color: $muted;
     margin-left: 0;
 
     img{
-      max-width: none;
       margin-top: auto;
       width: rem-calc(54);
+      height: rem-calc(54);
+      object-fit: cover;
     }
   }
 
@@ -129,6 +122,7 @@ $author-data-color: $muted;
 
 a:hover .author__name{
   color: inherit;
+  text-decoration: underline;
 }
 
 .author__avatar{
@@ -144,8 +138,9 @@ a:hover .author__name{
 
   img{
     border-radius: 50%;
-    width: 100%;
-    max-width: 25px;
+    width: 25px;
+    height: 25px;
+    object-fit: cover;
     margin-top: -5px;
   }
 }
@@ -156,7 +151,8 @@ a:hover .author__name{
   }
 
   img{
-    max-width: 20px;
+    width: 20px;
+    height: 20px;
     margin-top: -3px;
   }
 }

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

@@ -8,6 +8,7 @@
       padding-left: .5rem;
       padding-right: .5rem;
       letter-spacing: 0;
+      white-space: nowrap;
     }
   }
 
@@ -25,33 +26,148 @@
   &.button--right{
     float: right;
   }
+
+  a{
+    color: inherit;
+
+    &:hover{
+      text-decoration: none;
+    }
+  }
 }
 
 .button{
+  position: relative;
   background-color: var(--primary);
 
-  &:hover,
+  &.focus,
   &:focus{
     background-color: var(--primary);
-    filter: brightness(120%);
+    box-shadow: $button-shadow-focus;
+    outline: $button-outline-focus;
+    outline-offset: $button-outline-offset;
+    filter: brightness($button-brightness-focus);
+  }
+
+  &.hover,
+  &:hover{
+    background-color: var(--primary);
+    filter: brightness($button-brightness-hover);
+    text-decoration: none;
+  }
+
+  &.active,
+  &:active{
+    filter: brightness($button-brightness-active);
+  }
+
+  &.disabled,
+  &[disabled]{
+    &,
+    &:active,
+    &:hover,
+    &:focus{
+      background-color: var(--primary);
+    }
   }
 
   &.hollow{
     background-color: transparent;
     color: var(--primary);
     border-color: var(--primary);
-  }
+    text-decoration: $button-hollow-underline;
 
-  &.secondary{
+    &.hover,
     &:hover,
+    &.focus,
     &:focus{
-      filter: brightness(120%);
+      border-color: var(--primary);
+      background-color: var(--primary);
+      color: $white;
     }
 
-    &.hollow{
+    &.disabled,
+    &[disabled]{
+      &,
+      &:active,
+      &:hover,
+      &:focus{
+        background-color: transparent;
+        border-color: var(--primary);
+        color: var(--primary);
+        box-shadow: none;
+        text-decoration: none;
+      }
+    }
+
+    &.light{
+      &.hover,
+      &:hover,
+      &.focus,
+      &:focus{
+        border-color: var(--primary);
+        background-color: var(--primary);
+        color: $white;
+      }
+
+      &.disabled,
+      &[disabled]{
+        &,
+        &:active,
+        &:hover,
+        &:focus{
+          border-color: $white;
+          color: $white;
+        }
+      }
+    }
+  }
+
+  &.secondary{
+    @include button-hollow-variant(var(--secondary));
+  }
+
+  &.success{
+    @include button-hollow-variant(var(--success));
+  }
+
+  &.alert{
+    @include button-hollow-variant(var(--alert));
+  }
+
+  &.warning{
+    @include button-hollow-variant(var(--warning));
+  }
+
+  &.clear{
+    &.secondary,
+    &.success,
+    &.alert,
+    &.warning{
       background-color: transparent;
+
+      &.hover,
+      &:hover,
+      &.focus,
+      &:focus{
+        background-color: transparent;
+      }
+    }
+
+    &.secondary{
       color: var(--secondary);
-      border-color: var(--secondary);
+    }
+
+    &.success{
+      color: var(--success);
+    }
+
+    &.alert{
+      color: var(--alert);
+    }
+
+    &.warning{
+      color: var(--warning);
     }
   }
 }
@@ -63,15 +179,6 @@
 // Overwrite Foundation hover styles in hollow disabled buttons
 .button.hollow:disabled:hover,
 .button.hollow.disabled:hover{
-  background-color: transparent;
-  border-color: var(--primary);
-  color: var(--primary);
-
-  &.secondary{
-    border-color: var(--secondary);
-    color: var(--secondary);
-  }
-
   &.success{
     border-color: var(--success);
     color: var(--success);
@@ -89,7 +196,13 @@
 }
 
 .button.light:not(.hollow){
-  @include modifiers(color, (success: $white, secondary: $white));
+  @include modifiers(
+    color,
+    (
+      success: $white,
+      secondary: $white,
+    )
+  );
 }
 
 .button.light.hollow{
@@ -107,10 +220,6 @@
     flex: 1;
   }
 
-  .button{
-    margin-right: 0;
-  }
-
   > :first-child,
   > :first-child *{
     border-top-right-radius: 0;
@@ -127,6 +236,12 @@
   > :not(:first-child):not(:last-child) *{
     border-radius: 0;
   }
+
+  &.no-gaps{
+    .button{
+      margin-right: 0;
+    }
+  }
 }
 
 // buttons layout
@@ -141,13 +256,13 @@
 /* Extra buttons styles */
 
 .button--shadow{
-  $shadows:(
+  $shadows: (
     primary: shade($primary, 50),
     secondary: shade($secondary, 50),
     success: shade($success, 50),
     warning: shade($warning, 50),
     alert: shade($alert, 50),
-    muted: shade($muted, 50)
+    muted: shade($muted, 50),
   );
 
   @include modifiers(background-color, $shadows){
@@ -158,12 +273,52 @@
 .button--icon{
   display: flex;
   align-items: center;
+  position: relative;
+
+  .icon-wrap{
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: .85em;
+    border-right: 1px solid $white;
+    height: 100%;
+    min-width: 3.5em;
+    white-space: no-wrap;
+    padding-right: 5px;
+
+    .icon{
+      margin: 0;
+      vertical-align: bottom;
+    }
+  }
+
+  .text-wrap{
+    display: block;
+    margin-left: 2rem;
+  }
 
   .icon{
     margin: 0 2px;
   }
 
+  &.hollow{
+    .icon-wrap{
+      border-right: 1px solid var(--primary);
+    }
+
+    &.secondary{
+      .icon-wrap{
+        border-right: 1px solid var(--secondary);
+      }
+    }
+  }
+
   &.small{
+    .icon-wrap{
+      padding: .5rem;
+      min-width: 2.5rem;
+    }
+
     .icon{
       width: 12px;
       height: 12px;
@@ -193,9 +348,13 @@
 }
 
 .button--sc{
-  text-transform: uppercase;
   letter-spacing: .05em;
   font-weight: 600;
+  text-transform: uppercase;
+
+  &.hollow{
+    letter-spacing: .01em;
+  }
 
   &.large{
     font-size: 1rem;
@@ -214,6 +373,23 @@
   cursor: pointer;
   color: $anchor-color;
   font-weight: 600;
+
+  &:hover{
+    color: $anchor-color-hover;
+    text-decoration: underline;
+    text-decoration-skip-ink: auto;
+  }
+}
+
+.link-alt{
+  cursor: pointer;
+  color: $anchor-color;
+
+  &:hover{
+    color: $anchor-color-hover;
+    text-decoration: underline;
+    text-decoration-skip-ink: auto;
+  }
 }
 
 .muted-link{
@@ -222,6 +398,7 @@
 
   &:hover{
     color: $anchor-color;
+    text-decoration: underline;
   }
 }
 
@@ -233,14 +410,29 @@
 /* Social buttons */
 
 .button--social{
+  position: relative;
   padding: 0 1.5rem 0 0;
   text-align: left;
   display: block;
   min-width: 250px;
+
+  &::after{
+    content: "";
+    clear: both;
+  }
+}
+
+.button--social__icon,
+.button--social__text{
+  display: block;
+  padding: .85em 1rem;
 }
 
 .button--social__icon{
-  display: inline-block;
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
   vertical-align: middle;
   padding: .85em 1rem;
   border-right: 1px solid rgba(black, .075);
@@ -249,11 +441,20 @@
   text-align: center;
 }
 
+.button--social--mini .button--social__icon{
+  position: relative;
+}
+
+.button--social__text{
+  margin-left: 3rem;
+}
+
 .button--twitter{
   background-color: var(--twitter);
 
   &:hover{
-    filter: brightness(50%);
+    background-color: var(--twitter);
+    filter: brightness(90%);
   }
 }
 
@@ -261,14 +462,58 @@
   background-color: var(--facebook);
 
   &:hover{
-    filter: brightness(50%);
+    background-color: var(--facebook);
+    filter: brightness(90%);
   }
 }
 
 .button--google{
   background-color: var(--google);
+  font-family: Roboto;
 
   &:hover{
-    filter: brightness(50%);
+    background-color: var(--google);
+    filter: brightness(90%);
+  }
+
+  .button--social__icon{
+    padding: 0;
+
+    svg.icon{
+      fill: inherit;
+      width: inherit;
+      height: inherit;
+      margin-top: 2px;
+
+      /*
+       * This is a hack to comply with google guidelines
+       * https://developers.google.com/identity/branding-guidelines
+       * Currently the icons.svg file have the wrong google icon, until that's fixed
+       * google icon can be specified in secrets.yml with icon_path: decidim/brands/google.svg
+       * however to facilitate upgrades this provides a fallback
+       */
+      max-width: 42px;
+      max-height: 42px;
+
+      &.icon--google{
+        > use{
+          display: none;
+        }
+
+        background-image: image-url("decidim/brands/google.svg");
+      }
+    }
+  }
+
+  &.button--social--mini{
+    .button--social__icon{
+      font-size: 0;
+      min-width: auto;
+      padding: 0;
+
+      svg.icon{
+        margin: 1px;
+      }
+    }
   }
 }