decidim-core 0.29.6 → 0.30.0.rc1

data/app/packs/stylesheets/decidim/_header.scss

@@ -61,7 +61,7 @@ header {
       @apply hidden md:block col-span-2 col-start-5 xl:col-start-4;
 
       form {
-        @apply block relative rounded text-md border border-neutral-200 outline outline-1 outline-transparent rounded bg-background-2 leading-relaxed;
+        @apply block relative rounded text-md bg-background;
       }
 
       input[type="text"] {
@@ -69,7 +69,7 @@ header {
       }
 
       button[type="submit"] {
-        @apply absolute ltr:right-2 rtl:left-2 inset-y-0 text-secondary px-2;
+        @apply absolute ltr:right-2 rtl:left-2 inset-y-2 text-secondary;
       }
     }
 
@@ -167,7 +167,7 @@ header {
       }
 
       &__item {
-        @apply flex relative;
+        @apply relative;
       }
 
       &__search {
@@ -334,6 +334,10 @@ header {
       &__dropdown-trigger {
         @apply flex items-center justify-between text-white;
 
+        span {
+          @apply flex flex-wrap md:flex-nowrap gap-x-2.5 overflow-hidden text-white;
+        }
+
         svg {
           @apply w-6 h-6 fill-current;
         }
@@ -369,76 +373,20 @@ header {
       @apply absolute top-full left-0 bg-white rounded w-full bg-gray-5;
     }
 
-    &__dropdown-menu {
-      @apply w-full md:w-1/4 bg-primary px-4 md:px-8 pt-0 pb-3 md:py-3 divide-y divide-gray-3 text-white;
-
-      > * {
-        @apply py-3 md:py-3.5;
-      }
-
-      a {
-        @apply flex items-center justify-start gap-1 font-semibold text-lg text-white;
-
-        span {
-          @apply min-w-0 truncate;
-        }
-
-        svg {
-          @apply flex-none fill-current;
-        }
-      }
-    }
-
     &__main-dropdown {
-      @apply bg-white flex flex-row rounded-b shadow-lg text-black w-full lg:w-[1280px] h-screen md:h-auto;
-
-      &__left {
-        @apply flex flex-col justify-between p-4 md:p-8 space-y-5 hidden md:block md:w-3/4;
-
-        &-top {
-          @apply border-b-4 border-gray-3 pb-3;
-        }
-      }
+      @apply bg-white divide-y divide-gray-3 rounded-b shadow-lg text-black w-full lg:w-[1280px] h-screen md:h-auto;
 
+      &__bottom,
       &__top {
-        @apply w-full px-4;
-
-        &-menu {
-          @apply w-full md:w-[100%] mt-0 grid md:grid-cols-2 gap-x-6 text-secondary;
+        @apply flex flex-col md:flex-row justify-between p-4 md:p-8 gap-x-8;
 
-          > * {
-            @apply py-3 md:py-3.5 border-b last:border-0 border-gray-3;
-
-            /* since the grid has 2 columns, remove the border for these last 2 columns */
-            &:nth-last-child(-n + 2) {
-              @apply md:border-0;
-            }
-          }
-
-          a {
-            @apply flex items-center justify-start gap-1 font-semibold text-lg text-secondary;
-
-            span {
-              @apply min-w-0 truncate;
-            }
-
-            svg {
-              @apply flex-none fill-current;
-            }
-          }
+        &-right {
+          @apply hidden md:block md:w-1/2;
         }
       }
 
       &__bottom {
         @apply hidden md:flex;
-
-        &-right {
-          @apply mr-2 mb-2;
-        }
-
-        &-left {
-          @apply mr-2 mt-1;
-        }
       }
 
       &__title {
@@ -448,6 +396,31 @@ header {
       &__subtitle {
         @apply hidden text-md md:flex md:text-lg text-gray-2 mt-5;
       }
+
+      &__menu {
+        @apply w-full md:w-1/2 mt-0 grid md:grid-cols-2 gap-x-6 text-secondary;
+
+        > * {
+          @apply py-3 md:py-3.5 border-b last:border-0 border-gray-3;
+
+          /* since the grid has 2 columns, remove the border for these last 2 columns */
+          &:nth-last-child(-n + 2) {
+            @apply md:border-0;
+          }
+        }
+
+        a {
+          @apply flex items-center justify-start gap-1 font-semibold text-lg text-secondary;
+
+          span {
+            @apply min-w-0 truncate;
+          }
+
+          svg {
+            @apply flex-none fill-current;
+          }
+        }
+      }
     }
 
     &__secondary-dropdown {
@@ -461,12 +434,8 @@ header {
         @apply h4 md:h3;
       }
 
-      nav {
-        @apply w-full md:w-1/4;
-      }
-
       &__menu {
-        @apply w-full bg-primary px-4 md:px-8 pt-0 pb-3 md:py-3 divide-y divide-gray-3 text-white;
+        @apply w-full md:w-1/4 bg-primary px-4 md:px-8 pt-0 pb-3 md:py-3 divide-y divide-gray-3 text-white;
 
         > * {
           @apply py-3 md:py-3.5;
@@ -486,7 +455,7 @@ header {
       }
 
       &__metadata {
-        @apply flex items-center text-sm space-x-6 pb-6;
+        @apply flex items-center text-sm space-x-6 py-8;
 
         > span {
           @apply flex items-center space-x-2;

data/app/packs/stylesheets/decidim/_layout.scss

@@ -2,11 +2,11 @@
   @apply flex flex-col min-h-screen;
 
   &__skip {
-    @apply absolute z-[9999] left-0 -translate-x-full py-1 px-4 bg-primary rounded-br-lg text-white cursor-pointer transition focus:translate-x-0;
+    @apply absolute z-10 left-0 -translate-x-full py-1 px-4 bg-primary rounded-br-lg text-white cursor-pointer transition focus:translate-x-0;
   }
 
   [data-content] {
-    @apply relative flex flex-col flex-1;
+    @apply relative flex flex-col;
   }
 }
 
@@ -51,7 +51,7 @@
 }
 
 .layout-item {
-  @apply container grid grid-cols-1 lg:grid-cols-12 py-4 lg:py-24 gap-12 lg:gap-x-0;
+  @apply container grid grid-cols-1 lg:grid-cols-12 py-4 lg:py-24 gap-12 lg:gap-x-0 pt-12;
 
   &__main {
     @apply xl:col-start-2 lg:col-span-8 xl:col-span-7 relative;
@@ -59,6 +59,10 @@
 
   &__aside {
     @apply lg:col-start-10 xl:col-start-10 lg:col-span-3 xl:col-span-2;
+
+    &--footer {
+      @apply order-last;
+    }
   }
 
   &__back {
@@ -92,10 +96,36 @@
 
 .layout-main__heading {
   @apply space-y-8;
+
+  .layout-author.has_status {
+    @apply mt-6;
+
+    &:last-of-type {
+      @apply mt-2;
+    }
+  }
 }
 
 .layout-author {
   @apply flex items-center gap-4;
+
+  /* overwrite default dropdown styles */
+  [data-target*="dropdown"] {
+    @apply w-auto cursor-pointer text-secondary text-2xl flex;
+  }
+
+  /* overwrite default dropdown styles */
+  [id*="dropdown-menu"][aria-hidden="true"] {
+    @apply md:hidden;
+  }
+
+  .dropdown__bottom {
+    @apply [&>li]:pl-0;
+
+    .button {
+      @apply [&>svg]:order-1 [&>span]:order-2;
+    }
+  }
 }
 
 .layout-aside__buttons {
@@ -103,7 +133,7 @@
 }
 
 .layout-main__buttons {
-  @apply flex gap-x-1 items-center;
+  @apply flex gap-x-4 items-center;
 }
 
 .layout-aside__ctas-buttons {

data/app/packs/stylesheets/decidim/_login.scss

@@ -1,6 +1,11 @@
+$facebook_background: #0866ff;
+$facebook_background_hover: #155cba; // 30% opacity
+$google_background: #f2f2f2;
+$google_background_hover: #dcdcdc; // 30% opacity
+
 .login {
   &__info {
-    @apply text-gray-2 text-lg space-y-4 mb-10 prose-a:text-secondary prose-a:underline;
+    @apply text-gray-2 text-lg space-y-4 mt-10 prose-a:text-secondary prose-a:underline;
   }
 
   &__info-required {
@@ -12,18 +17,50 @@
   }
 
   &__omniauth {
-    @apply flex flex-col items-center gap-8 text-gray-2 font-semibold w-fit mx-auto mt-10;
+    @apply flex flex-row items-center gap-8 text-gray-2 font-semibold w-fit mx-auto mt-10 [&>a]:w-auto;
 
     &-button {
-      @apply button button__xl border border-gray shadow-[0_4px_6px_rgba(211,211,211,0.25)] justify-start gap-8 text-lg w-full;
+      @apply button__lg border border-gray shadow-[0_4px_6px_rgba(211,211,211,0.25)] justify-start gap-8 text-lg w-full rounded;
 
       svg {
-        @apply w-6 h-6 fill-current flex-none;
+        @apply w-6 h-6 flex-none fill-white;
+      }
+
+      span {
+        @apply hidden 2xl:inline;
+      }
+
+      &--developer {
+        @apply flex;
+      }
+
+      &--facebook {
+        @apply flex flex-row text-white border border-background;
+
+        background-color: $facebook_background;
+      }
+
+      &--facebook:hover {
+        background-color: $facebook_background_hover;
+      }
+
+      &--x {
+        @apply flex flex-row text-white bg-black;
+      }
+
+      &--google {
+        @apply flex flex-row text-black border border-background;
+
+        background-color: $google_background;
+      }
+
+      &--google:hover {
+        background-color: $google_background_hover;
       }
     }
 
     &-separator {
-      @apply mt-10 flex items-center justify-center gap-12 after:content-[''] before:content-[''] after:h-px before:h-px after:bg-background before:bg-background after:grow before:grow;
+      @apply mt-10 flex items-center justify-center gap-8 after:content-[''] before:content-[''] after:h-0.5 before:h-0.5 after:bg-background before:bg-background after:grow before:grow;
     }
 
     &__horizontal {
@@ -32,7 +69,7 @@
   }
 
   &__links {
-    @apply flex flex-col gap-4 py-10 border-t-2 border-background;
+    @apply flex flex-col gap-4 pb-10 border-background items-center;
 
     a {
       @apply w-fit text-secondary hover:underline;
@@ -40,10 +77,20 @@
   }
 
   &__modal {
+    @apply p-8;
+
     &-links {
       @apply flex flex-col md:flex-row gap-4 justify-between items-start md:items-center [&>a]:text-secondary;
     }
 
+    &-remember {
+      @apply flex flex-row justify-between;
+
+      a {
+        @apply underline;
+      }
+    }
+
     [data-announcement] {
       @apply mt-4;
     }

data/app/packs/stylesheets/decidim/_modal.scss

@@ -18,11 +18,15 @@
   }
 
   [data-dialog-container] {
-    @apply grid grid-rows-[auto_1fr] items-start md:items-center gap-2 text-left;
+    @apply grid grid-cols-[auto_1fr] items-start md:items-center gap-2 text-left;
 
     > svg {
       @apply w-6 h-6 text-gray fill-current flex-none;
     }
+
+    > :last-child {
+      @apply col-span-2 md:col-span-1 md:col-start-2;
+    }
   }
 
   [data-dialog-title] {
@@ -38,4 +42,46 @@
       @apply w-full md:w-auto;
     }
   }
+
+  &[data-drawer] {
+    & > * {
+      @apply h-full max-h-full w-0 inset-0 translate-x-0 translate-y-0 right-0 left-auto max-w-[90%] lg:max-w-[900px] transition-none transition-[width] duration-500 overflow-visible;
+    }
+
+    &[aria-hidden="false"] {
+      > * {
+        @apply w-[60%];
+      }
+    }
+
+    [data-dialog-container] {
+      @apply grid-cols-none;
+
+      &.layout-content {
+        @apply bg-white;
+
+        > .spinner-container {
+          @apply sticky h-screen;
+        }
+      }
+    }
+
+    [data-dialog-closable] {
+      @apply absolute top-0 right-auto -left-10 p-4 py-2 bg-white rounded-bl;
+    }
+
+    .form-defaults {
+      h1 {
+        @apply text-2xl font-semibold text-black my-10 mx-4 border-b border-gray border-b-[1px] pb-8;
+
+        > .button {
+          @apply text-sm float-right;
+        }
+      }
+    }
+
+    .card {
+      @apply p-4 my-4 bg-background-2;
+    }
+  }
 }

data/app/packs/stylesheets/decidim/_modal_tos_refuse.scss

@@ -3,4 +3,8 @@
   [data-dialog-actions] {
     @apply flex-nowrap;
   }
+
+  a {
+    @apply underline text-secondary;
+  }
 }

data/app/packs/stylesheets/decidim/_modal_update.scss

@@ -132,12 +132,8 @@
       }
 
       span {
-        @apply text-sm text-gray-2 mx-auto w-full break-all mb-2;
+        @apply text-sm text-gray-2 mx-auto;
       }
     }
   }
-
-  &__span {
-    @apply w-full break-all mb-2;
-  }
 }

data/app/packs/stylesheets/decidim/_participatory_spaces.scss

@@ -19,6 +19,52 @@
     > [id^="html-block"] {
       @apply w-full prose max-w-none [&+*]:border-t-0;
     }
+
+    .content-block {
+      @apply gap-0;
+
+      &__title {
+        @apply pb-8;
+      }
+
+      .documents {
+        &__container > div {
+          @apply border-b border-[#D3D5D9] border-t-0 pb-4 pt-6;
+        }
+
+        &__dropdown-container {
+          @apply border-b border-[#D3D5D9];
+        }
+
+        &__collection-trigger {
+          @apply bg-transparent max-w-full mt-0 pb-4 pt-6 px-0 rounded-none;
+
+          .documents-details {
+            @apply flex flex-col gap-2.5;
+
+            span {
+              @apply flex items-center text-lg leading-6 text-[var(--secondary)] font-semibold gap-1.5;
+            }
+          }
+        }
+
+        &__collection-content {
+          @apply w-auto ml-6 my-4 pl-4 lg:pl-8 border-l border-[#D3D5D9];
+
+          p {
+            @apply pt-4;
+          }
+
+          & > .documents__container {
+            @apply border-t-0 pt-0 mt-0;
+
+            & > :last-child {
+              @apply border-b-0;
+            }
+          }
+        }
+      }
+    }
   }
 
   &__content-block {

data/app/packs/stylesheets/decidim/_profile.scss

@@ -9,18 +9,18 @@
     &-container {
       @apply w-24 h-24 relative;
     }
-  }
-
-  &__details {
-    @apply pb-3 space-y-2;
 
     &-badge {
-      @apply flex items-center gap-1 text-sm text-gray-2;
+      @apply absolute top-full right-0 -translate-y-full grid place-items-center w-6 h-6 rounded-full overflow-hidden bg-primary border border-white;
 
       svg {
-        @apply w-4 h-4 inline-block bg-primary rounded-full text-white fill-current;
+        @apply w-4 h-4 text-white fill-current;
       }
     }
+  }
+
+  &__details {
+    @apply pb-3 space-y-2;
 
     &-data {
       @apply flex flex-wrap gap-x-6 gap-y-4;
@@ -166,7 +166,7 @@
       }
 
       &-container {
-        @apply w-12 h-12 relative flex-none;
+        @apply w-20 h-20 relative flex-none mr-4;
       }
 
       &-badge {

data/app/packs/stylesheets/decidim/_success_image.scss

@@ -0,0 +1,64 @@
+.success-image {
+  --success: #28a745;
+
+  width: 100px;
+  height: 100px;
+  margin: auto;
+
+  .animation-success__checkmark {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    display: block;
+    stroke-width: 5;
+    stroke: var(--success);
+    stroke-miterlimit: 10;
+    box-shadow: inset 0 0 0 #4bb71b;
+    animation: fill 0.4s ease-in-out 0.4s forwards,
+      scale 0.3s ease-in-out 0.09s both;
+    position: relative;
+    top: 5px;
+    right: 5px;
+    margin: 0 auto;
+  }
+
+  .animation-success__checkmark__circle {
+    stroke-dasharray: 166;
+    stroke-dashoffset: 166;
+    stroke-width: 5;
+    stroke-miterlimit: 10;
+    stroke: var(--success);
+    fill: #fff;
+    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+  }
+
+  .animation-success__checkmark__check {
+    transform-origin: 50% 50%;
+    stroke-dasharray: 48;
+    stroke-dashoffset: 48;
+    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+  }
+
+  @keyframes stroke {
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes scale {
+    0%,
+    100% {
+      transform: none;
+    }
+
+    50% {
+      transform: scale3d(1.1, 1.1, 1);
+    }
+  }
+
+  @keyframes fill {
+    100% {
+      box-shadow: inset 0 0 0 30 var(--success);
+    }
+  }
+}

data/app/packs/stylesheets/decidim/_tribute.scss

@@ -0,0 +1,36 @@
+.tribute-container {
+  @apply w-full relative;
+
+  #results {
+    @apply absolute max-h-[225px] top-full left-0 right-0 p-0 my-2 rounded z-50 overflow-y-scroll bg-white border border-gray-3;
+
+    li {
+      @apply flex items-center gap-2 cursor-pointer px-4 py-2;
+    }
+
+    li:hover {
+      @apply cursor-pointer bg-background;
+    }
+
+    img {
+      @apply rounded-full w-6 h-6 object-cover;
+    }
+
+    span,
+    strong {
+      @apply font-semibold text-sm text-secondary;
+    }
+
+    small {
+      @apply font-normal text-gray-2 text-xs;
+    }
+
+    svg {
+      @apply w-4 h-4 text-primary fill-current;
+    }
+
+    .is-group {
+      @apply ml-auto flex items-center gap-1;
+    }
+  }
+}

data/app/packs/stylesheets/decidim/application.scss

@@ -58,7 +58,7 @@
   @import "stylesheets/decidim/_hero.scss";
   @import "stylesheets/decidim/_actions.scss";
   @import "stylesheets/decidim/_emoji.scss";
-  @import "stylesheets/decidim/_hashtags.scss";
+  @import "stylesheets/decidim/_success_image.scss";
 }
 
 @import "stylesheets/decidim/vendor/datepicker_light.scss";

data/app/packs/stylesheets/decidim/editor.scss

@@ -89,9 +89,7 @@
     }
 
     .ProseMirror {
-      @apply relative p-2.5 outline-0 resize-y overflow-hidden prose max-w-none prose-headings:first:mt-0 prose-p:first:mt-0 prose-ul:first:mt-0 prose-ol:first:mt-0 prose-blockquote:first:mt-0 prose-pre:first:mt-0;
-
-      min-height: inherit;
+      @apply relative p-2.5 outline-0 min-h-full prose max-w-none prose-headings:first:mt-0 prose-p:first:mt-0 prose-ul:first:mt-0 prose-ol:first:mt-0 prose-blockquote:first:mt-0 prose-pre:first:mt-0;
 
       &.ProseMirror-focused,
       &.dialog-open {

data/app/packs/stylesheets/decidim/geocoding_addons.scss

@@ -0,0 +1,5 @@
+.geocoding-container {
+  .user-device-location button {
+    @apply mt-4;
+  }
+}

data/app/packs/stylesheets/decidim/map.scss

@@ -1,13 +1,6 @@
-/*
-  NOTE: Bad practice. These dependencies should not be loaded in this way (as static files),
-  but leaflet makes use of image files, which are being wrong resolved by webpack,
-  as currently is missing the "file-loader" in the webpack.config.js
-
-  See https://github.com/Leaflet/Leaflet/issues/4849 for further info
-*/
-@import "stylesheets/decidim/legacy/leaflet";
-@import "stylesheets/decidim/legacy/MarkerCluster";
-@import "stylesheets/decidim/legacy/MarkerCluster.Default";
+@import "leaflet/dist/leaflet";
+@import "leaflet.markercluster/dist/MarkerCluster";
+@import "leaflet.markercluster/dist/MarkerCluster.Default";
 
 /* overwrite leaflet and card styles */
 .leaflet-popup-content-wrapper {
@@ -30,6 +23,10 @@
       @apply font-sans text-white;
     }
 
+    &-metadata svg {
+      @apply fill-current;
+    }
+
     &-title {
       @apply truncate;
     }