decidim-core 0.20.1 → 0.23.1

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

@@ -2,6 +2,7 @@
 
 $navbar-bg: $dark-gray;
 $navbar-bg-hover: rgba(white, .02);
+$navbar-bg-focus: $primary;
 $navbar-color: rgba(white, .5);
 $navbar-color-hover: $white;
 $navbar-active-color: $white;
@@ -13,6 +14,13 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
 
 .navbar{
   background: $navbar-bg;
+
+  a,
+  .button{
+    &:focus{
+      outline-color: var(--highlight-alternative);
+    }
+  }
 }
 
 /* Title bar */
@@ -23,6 +31,21 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
   @include breakpoint(smallmedium down){
     border-top: 2.125rem solid $dark-gray;
   }
+
+  .skip{
+    @include skip-button;
+
+    &:focus{
+      outline-color: var(--highlight-alternative);
+    }
+  }
+
+  a,
+  .button{
+    &:focus{
+      outline-color: var(--highlight-alternative);
+    }
+  }
 }
 
 .logo-cityhall{
@@ -50,27 +73,93 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
 
 .topbar__search{
   position: relative;
+  max-width: 220px; // Safari fix
 
-  input,
-  input:focus{
+  input{
     color: $navbar-color-hover;
-    border: 0;
-    padding-left: $input-padding * 4;
+    border-color: transparent;
     box-shadow: none;
     background: $navbar-active-bg;
+    margin-top: 8px;
+    display: inline-block;
+    border-radius: 4px 0 0 4px;
+    transition: .3s all;
+    height: 2.5rem; //matches input group button height
+
+    &:focus{
+      color: $navbar-color-hover;
+      box-shadow: none;
+      background: $navbar-active-bg;
+      outline-color: var(--highlight-alternative);
+    }
 
     @include breakpoint(medium){
       background: $navbar-bg;
     }
   }
 
-  svg{
-    color: $input-placeholder-color;
-    position: absolute;
-    top: 50%;
-    left: $input-padding;
-    transform: translateY(-50%);
-    opacity: .5;
+  .input-group-button{
+    position: relative;
+    height: 1px; // Fix for Safari and Firefox
+    vertical-align: top;
+  }
+
+  // Fix for Safari and Firefox
+  .button-wrapper{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  button{
+    padding: 5px 10px;
+    border-radius: 0 $button-radius $button-radius 0;
+    transition: .3s all;
+  }
+
+  form:first-child{
+    display: inline-flex;
+  }
+
+  .input-group{
+    margin-bottom: 0;
+  }
+
+  &:not(:focus-within){
+    button{
+      background-color: $navbar-active-bg;
+      color: rgba(white, .5);
+
+      @include breakpoint(medium){
+        background: $navbar-bg;
+      }
+    }
+  }
+
+  &:focus-within{
+    input{
+      background-color: $light-gray;
+      color: $body-font-color;
+      border: 0;
+
+      &::placeholder{
+        color: $dark-medium-gray;
+      }
+    }
+  }
+}
+
+// Hack to fix the top bar display for IE11
+// This cannot be applied to other browsers as the focus borders would be
+// invisible if overflow is hidden on the search element.
+@media all and (-ms-high-contrast: none){
+  *::-ms-backdrop,
+  .topbar__search{
+    overflow: hidden;
   }
 }
 
@@ -79,12 +168,20 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
   display: flex;
   align-items: center;
   justify-content: flex-end;
+
+  // Fix for Safari
+  > div{
+    flex: 0 0 auto;
+    display: flex;
+
+    &.logo-wrapper{
+      flex: 1 0 auto;
+    }
+  }
 }
 
 .logo-wrapper{
-  display: inline-block;
   line-height: 0;
-  flex-grow: 1;
 
   a{
     display: inline-block;
@@ -108,6 +205,7 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
   margin-left: 2rem;
 
   .dropdown > li > a{
+    background: transparent;
     padding-left: 0;
   }
 
@@ -153,14 +251,16 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
     }
 
     li{
-      padding: $global-padding  / 2;
+      padding: $global-padding / 2;
 
       a{
         padding: .5rem;
         color: $anchor-color;
 
-        &:hover{
+        &:hover,
+        &:focus{
           color: lighten($body-font-color, 20);
+          text-decoration: underline;
         }
       }
 
@@ -168,9 +268,11 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
         border-bottom: $border;
       }
 
-      &:hover{
+      &:hover,
+      &:focus{
         cursor: pointer;
         background-color: rgba(var(--secondary-rgb), .05);
+        text-decoration: underline;
       }
     }
   }
@@ -196,6 +298,10 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
 .topbar__dropmenu > ul > li > a{
   color: $medium-gray;
 
+  &:hover{
+    text-decoration: underline;
+  }
+
   &::after{
     margin-top: -1px !important;
     border-top-color: $medium-gray !important;
@@ -210,10 +316,20 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
     left: .5rem;
     margin-left: 0;
 
+    &:hover,
+    &:focus{
+      text-decoration: underline;
+    }
+
     .dropdown.menu > li.is-dropdown-submenu-parent > a::after{
       border-width: 3px;
       right: 10px;
       margin-top: 0;
+
+      &:hover,
+      &:focus{
+        text-decoration: underline;
+      }
     }
   }
 }
@@ -233,18 +349,27 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
   padding-right: 2.5rem;
   display: none;
 
+  // hide caret down
+  .dropdown.menu > li.is-dropdown-submenu-parent > a::after{
+    display: none;
+  }
+
   @include breakpoint(medium){
     display: block;
+
+    .dropdown.menu > li.is-dropdown-submenu-parent > a::after{
+      display: block;
+
+      &:hover,
+      &:focus{
+        text-decoration: underline;
+      }
+    }
   }
 
   @media (min-width: (1300 / 16) + em){
     padding-right: 0;
   }
-
-  // hide caret down
-  .dropdown.menu > li.is-dropdown-submenu-parent > a::after{
-    display: none;
-  }
 }
 
 .topbar__user__logged__picture{
@@ -316,8 +441,12 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
     color: $medium-gray;
     font-weight: 600;
 
+    @include breakpoint(medium){
+      margin-left: 1rem;
+    }
+
     &:hover{
-      color: $anchor-color;
+      text-decoration: underline;
     }
   }
 
@@ -330,10 +459,20 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
     height: 2px;
     border-left: $border;
     vertical-align: middle;
+
+    @include breakpoint(medium){
+      display: none;
+    }
   }
 
-  a:first-of-type::before{
-    display: none;
+  a:first-of-type{
+    @include breakpoint(medium){
+      margin-left: 0;
+    }
+
+    &::before{
+      display: none;
+    }
   }
 }
 
@@ -348,12 +487,18 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
   }
 }
 
-.topbar__edit__link a{
-  color: $medium-gray;
+.topbar__admin__link{
+  a{
+    color: $medium-gray;
 
-  &:hover{
-    background: $navbar-bg-hover;
-    color: $navbar-color-hover;
+    &:hover{
+      background: $navbar-bg-hover;
+      color: $navbar-color-hover;
+    }
+  }
+
+  ~ .topbar__admin__link{
+    margin-left: 1rem;
   }
 }
 
@@ -374,9 +519,11 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
     padding: 1em 2em;
     color: $navbar-color;
 
-    &:hover{
+    &:hover,
+    &:focus{
       background: $navbar-bg-hover;
       color: $navbar-color-hover;
+      text-decoration: underline;
     }
   }
 }
@@ -392,10 +539,10 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
 
 /* Main nav */
 .main-nav ul{
+  position: relative;
   padding: 0;
   margin: 0;
   list-style: none;
-  overflow-x: auto;
 
   @include breakpoint(medium){
     -webkit-overflow-scrolling: touch;
@@ -411,6 +558,7 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
 }
 
 .main-nav__link a{
+  position: relative;
   display: block;
   padding: 1em 2em;
   color: $navbar-color;
@@ -418,6 +566,14 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
   &:hover{
     background: $navbar-bg-hover;
     color: $navbar-color-hover;
+    text-decoration: underline;
+  }
+
+  &:focus{
+    z-index: 1;
+    color: $navbar-color-hover;
+    text-decoration: underline;
+    outline-offset: -2px;
   }
 
   @include breakpoint(medium){

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

@@ -0,0 +1,5 @@
+#notifications{
+  .card-data__item--expand{
+    align-items: stretch;
+  }
+}

data/app/assets/stylesheets/decidim/modules/_order-by.scss

@@ -9,6 +9,10 @@ $order-border: $border;
   align-items: baseline;
   flex-wrap: wrap;
 
+  a:hover{
+    text-decoration: underline;
+  }
+
   & + &{
     @include breakpoint(medium){
       margin-left: $global-margin;
@@ -27,6 +31,7 @@ $order-border: $border;
 
   .menu{
     .is-dropdown-submenu-parent > a{
+      background: transparent;
       padding: 0;
       margin-left: .5rem;
       margin-top: .25rem;

data/app/assets/stylesheets/decidim/modules/_process-nav.scss

@@ -96,7 +96,6 @@ $nav-border-width: 3px;
   margin: 0;
   color: var(--primary);
   background-color: rgba(var(--primary-rgb), .1);
-  text-transform: uppercase;
   font-weight: $global-weight-bold;
   font-size: rem-calc(14);
 
@@ -140,12 +139,16 @@ $nav-border-width: 3px;
 }
 
 .process-nav__link{
-  color: var(--primary);
   text-transform: uppercase;
+  color: var(--primary);
   font-weight: $global-weight-bold;
   display: flex;
   align-items: center;
 
+  &:hover{
+    text-decoration: underline;
+  }
+
   svg{
     margin-right: .4em;
     width: 25px;

data/app/assets/stylesheets/decidim/modules/_process-phase.scss

@@ -7,14 +7,13 @@
   .button{
     margin-top: $global-margin * .75;
     margin-bottom: 0;
-    font-weight: $global-weight-normal;
   }
 }
 
 .process-header__phase--simple{
   padding: .5rem 1rem;
 
-  @include breakpoint (medium){
+  @include breakpoint(medium){
     padding: 2rem 1rem;
   }
 }
@@ -100,7 +99,7 @@
   // arrow
   .phase-item--current{
     span::before{
-      content: ' ';
+      content: " ";
       height: 0;
       position: absolute;
       width: 0;
@@ -157,7 +156,6 @@
 .process-header__button{
   .button{
     border-color: var(--primary);
-    text-transform: uppercase;
   }
 }