decidim-core 0.30.1 → 0.31.0.rc1

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

@@ -7,7 +7,7 @@
 }
 
 [data-target*="dropdown"] {
-  @apply w-full md:hidden flex items-center justify-between gap-2 p-2 first-of-type:[&>svg]:block last-of-type:[&>svg]:hidden;
+  @apply w-full flex items-center justify-between first-of-type:[&>svg]:block last-of-type:[&>svg]:hidden;
 
   & > span {
     @apply hidden font-semibold text-secondary;
@@ -19,7 +19,7 @@
   }
 
   > svg {
-    @apply w-6 h-6 flex-none text-secondary fill-current;
+    @apply flex-none text-secondary fill-current;
   }
 
   &[aria-expanded="false"] > svg:last-of-type,
@@ -33,6 +33,13 @@
   }
 }
 
+[data-target="dropdown-menu-participatory-space"],
+[data-target="dropdown-menu-order"],
+[data-target="dropdown-menu-resource"],
+[data-target="dropdown-menu-sidebar"] {
+  @apply md:hidden;
+}
+
 [data-target="dropdown-menu-language-chooser"] {
   & > span {
     @apply block font-semibold text-black text-xs;
@@ -70,36 +77,66 @@
 }
 
 .dropdown {
-  @apply absolute border-2 border-gray-3 rounded min-w-max p-4 drop-shadow-md text-left z-10;
-
-  /*
-    NOTE: the calculated value is the sum of the arrow offset position plus the half of the arrow size:
-    - offset position: 20%
-    - arrow size: 1.5rem
-  */
-  --arrow-offset: 20%;
-  --arrow-size: 1.5rem;
-  --arrow-visible-size: var(--arrow-size) * 0.5;
+  @apply absolute border-2 border-gray-3 rounded-md min-w-max p-1 drop-shadow-md text-left z-10 after:content-[''] after:absolute after:left-0 after:top-0 after:w-full after:h-full after:bg-white;
 
   & > * {
-    @apply relative z-10 p-3.5 first:pt-1.5 last:pb-1.5;
+    @apply relative z-10;
   }
 
   &__item {
-    @apply gap-x-2 flex items-center text-secondary;
+    @apply flex rounded;
 
     font-size: 14px;
 
-    > svg {
-      @apply w-4 h-4 flex-none text-gray fill-current;
+    svg {
+      @apply w-4 h-4 flex-none text-secondary fill-current;
+    }
+
+    .dropdown__button {
+      @apply font-normal button button__sm button__text button__text-secondary w-full flex justify-start !p-2;
+
+      span {
+        @apply mr-4 font-normal;
+      }
+
+      &-disabled {
+        @apply text-gray-2 font-normal w-full flex justify-start !p-2;
+
+        svg {
+          @apply text-gray-2 mr-1;
+        }
+      }
     }
 
-    &:hover {
-      @apply underline [&>svg]:text-secondary;
+    &:hover,
+    &-hovered {
+      > .dropdown__button {
+        @apply text-white no-underline;
+
+        span {
+          @apply text-white;
+        }
+
+        svg {
+          @apply fill-white;
+        }
+      }
     }
   }
 
   &__bottom {
-    @apply top-full right-0 mt-3 translate-x-[calc(var(--arrow-offset)-var(--arrow-visible-size))] before:content-[''] before:absolute before:right-[var(--arrow-offset)] before:-top-2 before:w-[var(--arrow-size)] before:h-[var(--arrow-size)] before:rotate-45 before:bg-white before:rounded before:border-2 before:border-gray-3 after:content-[''] after:absolute after:left-0 after:top-0 after:w-full after:h-full after:bg-white;
+    @apply top-full right-0;
+  }
+
+  &__right {
+    @apply top-0 left-48;
+  }
+
+  &__action {
+    @apply top-full left-0 md:right-0 md:left-auto;
+
+    li {
+      @apply border-none;
+    }
   }
 }

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

@@ -89,7 +89,7 @@
   }
 
   span {
-    @apply text-sm text-gray-2 truncate whitespace-nowrap first-letter:uppercase;
+    @apply text-sm text-gray-2 first-letter:uppercase;
   }
 
   [data-controls*="panel"] {

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

@@ -23,7 +23,7 @@
   select,
   textarea {
     &:not(.reset-defaults) {
-      @apply inline-block px-4 py-2 border border-gray outline outline-1 outline-transparent rounded bg-background-2 text-black font-normal placeholder:text-gray focus:outline-2 focus:outline-secondary disabled:bg-background-3 disabled:text-gray-2 disabled:cursor-not-allowed;
+      @apply inline-block px-4 py-2 border border-neutral-200 outline outline-1 outline-transparent rounded bg-background-2 text-black font-normal placeholder:text-gray focus:outline-2 focus:outline-secondary disabled:bg-background-3 disabled:text-gray-2 disabled:cursor-not-allowed;
 
       &.sm {
         @apply px-1 py-0.5 text-sm;
@@ -79,7 +79,7 @@
 }
 
 .form__wrapper {
-  @apply flex flex-col pt-10 pb-4 gap-10 last:pb-0;
+  @apply flex flex-col pt-10 pb-4 gap-5 last:pb-0;
 
   &-block {
     @apply py-10 last:pb-0 border-background flex flex-col gap-4 [&_p]:text-gray-2;
@@ -98,10 +98,6 @@
     @apply font-semibold text-lg;
   }
 
-  .help-text {
-    @apply mt-4;
-  }
-
   input[type="date"],
   input[type="datetime-local"],
   input[type="email"],
@@ -154,6 +150,10 @@
   }
 }
 
+.input-group {
+  @apply border border-neutral-200 outline outline-1 outline-transparent rounded bg-background-2 text-black font-normal placeholder:text-gray;
+}
+
 .input-group__password {
   @apply w-full relative;
 

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

@@ -41,6 +41,14 @@ header {
   .main-bar {
     @apply container grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-4 items-center py-5 h-24;
 
+    &--focus-mode-back-button {
+      @apply h-16 lg:h-24;
+
+      .main-bar__links-desktop__item {
+        @apply flex-row;
+      }
+    }
+
     &__container {
       @apply relative w-full;
     }
@@ -61,7 +69,7 @@ header {
       @apply hidden md:block col-span-2 col-start-5 xl:col-start-4;
 
       form {
-        @apply block relative rounded text-md bg-background;
+        @apply block relative rounded text-md border border-neutral-200 outline outline-1 outline-transparent rounded bg-background-2 leading-relaxed;
       }
 
       input[type="text"] {
@@ -69,7 +77,15 @@ header {
       }
 
       button[type="submit"] {
-        @apply absolute ltr:right-2 rtl:left-2 inset-y-2 text-secondary;
+        @apply absolute ltr:right-2 rtl:left-2 inset-y-0 text-secondary px-2;
+      }
+    }
+
+    &__back-button {
+      @apply col-span-2 text-secondary;
+
+      svg {
+        @apply fill-current;
       }
     }
 
@@ -78,7 +94,7 @@ header {
     }
 
     &__links-desktop,
-    > *:last-child {
+    > *:last-child:not(.main-bar__back-button) {
       @apply col-span-1 md:col-start-8 lg:col-start-8 lg:col-span-5 justify-self-end;
     }
 
@@ -404,7 +420,7 @@ header {
         @apply w-full px-4;
 
         &-menu {
-          @apply w-full md:w-1/2 mt-0 grid md:grid-cols-2 gap-x-6 text-secondary;
+          @apply w-full md:w-[100%] 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;
@@ -431,6 +447,14 @@ header {
 
       &__bottom {
         @apply hidden md:flex;
+
+        &-right {
+          @apply mr-2 mb-2;
+        }
+
+        &-left {
+          @apply mr-2 mt-1;
+        }
       }
 
       &__title {

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

@@ -21,6 +21,6 @@
   }
 
   &.reverse {
-    @apply bg-gray-2 text-white;
+    @apply bg-neutral-200 text-neutral-900;
   }
 }

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

@@ -2,11 +2,11 @@
   @apply flex flex-col min-h-screen;
 
   &__skip {
-    @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;
+    @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;
   }
 
   [data-content] {
-    @apply relative flex flex-col;
+    @apply relative flex flex-col flex-1;
   }
 }
 
@@ -48,6 +48,18 @@
   &__reverse &__main {
     @apply pl-0 md:pr-16;
   }
+
+  &__large {
+    @apply md:block lg:grid;
+  }
+
+  &__large &__aside {
+    @apply lg:grid md:pr-0 md:gap-6 lg:col-span-3 lg:pr-16 py-0 md:py-6 lg:py-12 gap-6 lg:gap-12 md:before:bg-transparent lg:before:bg-background;
+  }
+
+  &__large &__main {
+    @apply md:pl-0 lg:pl-16 py-6;
+  }
 }
 
 .layout-item {
@@ -120,8 +132,6 @@
   }
 
   .dropdown__bottom {
-    @apply [&>li]:pl-0;
-
     .button {
       @apply [&>svg]:order-1 [&>span]:order-2;
     }

data/app/packs/stylesheets/decidim/{_endorsers_list.scss → _likes_list.scss}

@@ -1,4 +1,4 @@
-.endorsers-list {
+.likes-list {
   @apply space-y-3 opacity-0 -translate-y-full invisible transition-all absolute;
 
   &__text {

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

@@ -1,24 +1,98 @@
+.qr-modal {
+  @apply md:p-6 lg:p-8;
+
+  [data-dialog-title] {
+    @apply flex justify-start items-center text-2xl text-black font-semibold focus:outline-none;
+
+    > svg {
+      @apply w-10 h-10 text-gray fill-current flex-none;
+    }
+
+    > :last-child {
+      @apply ml-1;
+    }
+  }
+
+  [data-dialog-container] {
+    @apply inline grid-cols-none;
+
+    .content {
+      @apply md:grid md:grid-cols-2 gap-5 md:py-4;
+
+      > * {
+        @apply mx-auto w-full mb-8;
+
+        &:first-child {
+          img {
+            @apply block;
+          }
+
+          h2 {
+            @apply mb-4 md:text-2xl text-center text-gray-2;
+          }
+        }
+
+        > * {
+          @apply mx-auto;
+        }
+      }
+
+      > :first-child {
+        @apply md:self-center;
+      }
+    }
+  }
+
+  [data-dialog-actions] {
+    @apply mt-0;
+  }
+
+  [data-dialog-closable] {
+    @apply top-6 right-6 lg:top-8 lg:right-8;
+  }
+}
+
 .share-modal {
-  @apply md:pb-16 md:pr-16;
+  @apply md:pb-16;
+
+  [data-dialog-closable] {
+    @apply top-6 right-6;
+  }
+
+  [data-dialog-container] {
+    @apply inline grid-cols-none;
+  }
+
+  [data-dialog-title] {
+    @apply col-span-2 md:col-span-1 md:col-start-2 grid grid-cols-[auto_1fr] items-start md:items-center gap-2 pb-4 text-left text-xl text-gray-2 md:border-b md:border-gray-3;
+  }
 
   &__list {
-    @apply mt-8 grid grid-cols-1 md:grid-cols-4 gap-3 md:gap-6;
+    @apply my-6 flex flex-wrap justify-center items-center md:grid grid-cols-4 md:grid-cols-5 gap-3 md:gap-6 max-w-96 mx-auto text-secondary;
+
+    > a {
+      @apply text-center;
 
-    > * {
-      @apply button button__lg border border-gray hover:border-tertiary shadow-[0_4px_6px_rgba(211,211,211,0.25)] text-md text-gray-2 gap-2;
+      .icon {
+        @apply inline-block w-11 h-11 rounded-full p-2.5 bg-background-2 shadow-[0_4px_6px_rgba(211,211,211,0.25)];
+
+        img,
+        svg {
+          @apply w-6 h-6 flex-none fill-current;
+        }
+      }
 
-      img,
-      svg {
-        @apply flex-none w-6 h-6 fill-current;
+      .text {
+        @apply text-center block;
       }
     }
   }
 
   &__input {
-    @apply mt-8 w-full relative;
+    @apply mt-6 w-full relative;
 
     #urlShareLink {
-      @apply w-full truncate pr-10;
+      @apply w-full truncate pr-16;
     }
 
     > button {

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

@@ -117,11 +117,7 @@
   }
 
   &__files {
-    @apply mt-1 space-y-4;
-
-    &-container {
-      @apply space-y-10 [&_label]:block [&_label]:mb-4;
-    }
+    @apply mt-2 space-y-4;
 
     /* It does not use regular class names, because it could come from javascript also. Avoid binds among css and js */
     > * {
@@ -132,8 +128,12 @@
       }
 
       span {
-        @apply text-sm text-gray-2 mx-auto;
+        @apply text-sm text-gray-2 mx-auto w-full break-all mb-2;
       }
     }
   }
+
+  &__span {
+    @apply w-full break-all mb-2;
+  }
 }

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

@@ -142,7 +142,7 @@
     &-link {
       @apply md:ml-auto flex flex-col items-center gap-1 font-semibold text-secondary hover:underline;
 
-      &-endorsers {
+      &-likes {
         @apply hidden md:flex items-center justify-start -space-x-2;
 
         > span {

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

@@ -7,6 +7,19 @@
   .editor-content-videoEmbed {
     @apply my-10 mx-auto;
   }
+
+  .editor-mention {
+    @apply inline-flex items-center align-bottom font-semibold underline text-secondary;
+
+    img,
+    svg {
+      @apply w-5 h-5 rounded-full;
+    }
+
+    span {
+      @apply ml-1;
+    }
+  }
 }
 
 .rich-text-display,

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

@@ -1,12 +1,44 @@
 .statistic {
-  @apply flex flex-col items-start gap-2 p-4 rounded border-[3px] border-background;
+  @apply flex flex-col items-start gap-1.5 p-4 rounded border-[3px] border-background bg-background;
 
   &__container {
-    @apply grid grid-cols-2 md:grid-cols-[repeat(auto-fit,minmax(0,120px))] gap-4;
+    @apply grid grid-cols-[repeat(auto-fit,minmax(345px,1fr))] md:grid-cols-4 gap-4;
+  }
+
+  &__dashboard-container {
+    @apply grid grid-cols-[repeat(auto-fit,minmax(340px,1fr))] md:grid-cols-3 gap-4;
+  }
+
+  &__header {
+    @apply w-full flex flex-row justify-between items-center;
+  }
+
+  &__icon {
+    @apply text-gray-2;
+
+    svg {
+      @apply w-[24px] h-[24px] fill-current;
+    }
+  }
+
+  &__metric {
+    @apply flex flex-row justify-start items-center gap-1.5;
   }
 
   &__title {
-    @apply w-full truncate text-gray-2 font-normal text-sm;
+    @apply w-full max-w-[135px] truncate text-gray-2 font-semibold text-[20px]/[26px] overflow-hidden whitespace-nowrap;
+  }
+
+  &__tooltip {
+    @apply text-secondary;
+
+    svg {
+      @apply w-4 h-4 fill-current;
+    }
+  }
+
+  &__second-number {
+    @apply text-[16px]/[22px] text-gray-2;
   }
 
   &__number {

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

@@ -6,7 +6,7 @@
     - offset position: 20%
     - arrow size: 16px
   */
-  --arrow-offset: 20%;
+  --arrow-offset: 50%;
   --arrow-size: 16px;
   --arrow-visible-size: var(--arrow-size) * 0.5;
   --arrow-margin: var(--arrow-visible-size) * 1.4142135623730951; // due to the rotation, the margin is SQRT2 times the visible size

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

@@ -30,6 +30,12 @@
   @apply h2 md:h1 decorator;
 }
 
+.text-with-links {
+  a {
+    @apply underline text-secondary font-semibold;
+  }
+}
+
 /* default styles for those dynamic text blocks */
 .editor-content {
   @apply prose max-w-full text-gray-2 text-lg prose-a:text-secondary break-words prose-ul:pl-4;

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

@@ -1,5 +1,5 @@
 .wizard-steps {
-  @apply flex items-stretch my-10;
+  @apply flex justify-center my-10;
 
   & > * {
     @apply w-1/4 relative text-center text-sm text-gray-2 before:content-[''] before:absolute before:-top-3 before:-left-1/2 before:w-full first:before:w-0 before:h-0.5 before:bg-success before:-translate-y-1/2 after:z-10 after:content-[''] after:absolute after:-top-1 after:left-1/2 after:w-4 after:h-4 after:bg-success after:border after:border-white after:rounded-full after:-translate-y-full after:-translate-x-1/2;