decidim-core 0.28.5 → 0.29.0.rc1

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

@@ -0,0 +1,193 @@
+.sc-wc-datepicker-h {
+  @apply absolute w-80 h-96 left-0;
+}
+
+.wc-datepicker {
+  @apply absolute w-80 h-96 z-20 text-sm;
+
+  &__header {
+    @apply px-0 py-0 pb-0 gap-0 h-14;
+  }
+
+  &__month-select,
+  &__year-select {
+    @apply h-10 mb-4 leading-normal;
+  }
+
+  &__month-select {
+    @apply pr-3;
+  }
+
+  &__year-select {
+    @apply max-w-fit;
+  }
+
+  &__previous-month-button,
+  &__next-month-button,
+  &__previous-year-button,
+  &__next-year-button {
+    @apply h-10 text-secondary bg-transparent;
+  }
+
+  &__date:focus > * {
+    @apply outline-1 outline-gray;
+  }
+
+  &__date--selected > * {
+    @apply bg-secondary border-solid border-2 border-gray;
+  }
+
+  &__date--selected:hover > * {
+    @apply bg-secondary;
+  }
+}
+
+.datepicker {
+  &__container {
+    @apply absolute w-80 h-96;
+  }
+
+  &__datepicker-row {
+    @apply flex gap-4;
+  }
+
+  &__time-row {
+    @apply flex top-6 absolute w-full;
+  }
+
+  &__date-column,
+  &__time-column {
+    @apply flex-1 w-1/2 relative;
+
+    > input {
+      @apply h-9;
+    }
+  }
+
+  &__hour-column,
+  &__minute-column {
+    @apply flex-1 h-20 relative my-2 mx-8 rounded border border-solid border-gray;
+  }
+
+  &__period-column {
+    @apply w-28 h-8 top-1 right-10 my-2 mx-1 absolute;
+  }
+
+  &__calendar-button {
+    @apply h-8 rounded absolute top-4 mt-0.5 fill-gray-2 leading-3 right-2;
+  }
+
+  &__clock-button {
+    @apply h-8 rounded absolute top-4 mt-0.5 fill-gray-2 leading-3 right-2;
+  }
+
+  &__time-frame {
+    @apply w-52 max-w-lg h-40 bg-white absolute border border-solid border-[#f2f3f5] z-20;
+  }
+
+  &__hour-picker,
+  &__minute-picker {
+    @apply w-1/2 left-2.5 h-8 text-center text-sm absolute top-6;
+
+    &:hover {
+      @apply cursor-default;
+    }
+
+    &:focus-visible {
+      @apply outline-0;
+    }
+  }
+
+  &__close-calendar {
+    @apply absolute z-30 bottom-2 right-1;
+  }
+
+  &__pick-calendar {
+    @apply absolute z-30 bottom-2 right-16 mr-1;
+
+    &:disabled {
+      @apply bg-gray;
+    }
+  }
+
+  &__close-clock {
+    @apply absolute z-30 bottom-2 right-1;
+  }
+
+  &__reset-clock {
+    @apply absolute z-30 bottom-2 left-2;
+  }
+
+  &__select-clock {
+    @apply absolute z-30 bottom-2 right-16 mr-1;
+  }
+
+  &__hour-up {
+    @apply absolute rounded-t w-full h-6;
+
+    &:hover {
+      @apply bg-gray-3;
+    }
+  }
+
+  &__hour-down {
+    @apply absolute rounded-b w-full h-6 bottom-0;
+
+    &:hover {
+      @apply bg-gray-3;
+    }
+  }
+
+  &__minute-up {
+    @apply absolute rounded-t w-full h-6;
+
+    &:hover {
+      @apply bg-gray-3;
+    }
+  }
+
+  &__minute-down {
+    @apply absolute rounded-b w-full h-6 bottom-0;
+
+    &:hover {
+      @apply bg-gray-3;
+    }
+  }
+
+  &__period-am {
+    @apply ml-1 accent-secondary bg-secondary;
+  }
+
+  &__period-pm {
+    @apply ml-1;
+  }
+
+  &__label-row {
+    @apply absolute flex top-2 w-full text-sm font-semibold;
+  }
+
+  &__hour-label-container {
+    @apply flex-1 text-center;
+  }
+
+  &__minute-label-container {
+    @apply flex-1 text-center;
+  }
+
+  &__help-text-container {
+    @apply w-full h-10 relative;
+  }
+
+  &__help-date {
+    @apply w-1/2 relative inline-block;
+  }
+
+  &__help-time {
+    @apply w-1/2 relative inline-block left-2;
+  }
+}
+
+input[type="date"]::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}

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

@@ -33,18 +33,45 @@
   }
 }
 
+[data-target="dropdown-menu-language-chooser"] {
+  & > span {
+    @apply block font-semibold text-black text-xs;
+  }
+
+  > svg {
+    @apply w-5 h-6 flex-none text-xs font-normal text-black fill-current;
+  }
+
+  & > ul {
+    @apply w-6 bg-gray;
+
+    > li {
+      @apply w-6 bg-gray;
+    }
+  }
+}
+
+[data-target="dropdown-menu-language-chooser-mobile"] {
+  & > span {
+    @apply block text-black font-normal text-sm;
+  }
+
+  > svg {
+    @apply w-5 h-6 flex-none text-xs font-normal text-black fill-current;
+  }
+
+  & > ul {
+    @apply w-6 bg-gray;
+
+    > li {
+      @apply w-6 bg-gray;
+    }
+  }
+}
+
 .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 relative z-10 p-3.5 first:pt-1.5 last:pb-1.5;
   }
@@ -63,6 +90,15 @@
     }
   }
 
+  /*
+    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;
+
   &__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;
   }

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

@@ -0,0 +1,36 @@
+.emoji-picker {
+  &__popupContainer {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+
+    & .emoji-picker__closeButton {
+      position: absolute;
+      border: none;
+      z-index: 1;
+      right: 0;
+      top: 0;
+      cursor: pointer;
+      padding: 4px;
+      align-self: flex-end;
+      transform: translate(50%, -50%);
+      background: #999;
+      width: 1.5rem;
+      height: 1.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+
+      &:hover {
+        background: #4f46e5;
+      }
+
+      & svg {
+        fill: white;
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+    }
+  }
+}

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

@@ -1,5 +1,7 @@
 .filter {
-  @apply flex items-center gap-2 p-1.5 rounded cursor-pointer relative;
+  label {
+    @apply flex items-center gap-2 p-1.5 rounded cursor-pointer relative;
+  }
 
   &-container {
     @apply rounded border-4 border-background md:border-0;
@@ -69,7 +71,7 @@
   }
 
   &-search {
-    @apply w-full relative;
+    @apply w-full relative bg-gray;
 
     input {
       @apply w-full;

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

@@ -12,9 +12,9 @@
   }
 
   &__message {
-    @apply text-black font-semibold text-md;
+    @apply text-black font-medium text-md flex-col;
 
-    a {
+    a:not(.button) {
       @apply underline text-secondary;
 
       svg {

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

@@ -1,11 +1,9 @@
 footer {
-  @apply mb-16 lg:mb-0;
-
   .main-footer {
     @apply bg-gray-4;
 
     &__top {
-      @apply flex flex-col lg:flex-row gap-8 container py-10;
+      @apply hidden flex flex-col lg:flex-row lg:block gap-8 container py-10;
     }
 
     &__down {

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

@@ -1,3 +1,11 @@
+#form-search-mobile {
+  @apply py-1.5 px-4 bg-gray-5 rounded-lg border border-gray outline outline-1 outline-transparent;
+
+  input[type="text"] {
+    @apply bg-gray-5;
+  }
+}
+
 .form-defaults {
   /* text-like inputs */
   input[type="date"],
@@ -45,16 +53,16 @@
   }
 
   select {
+    &:not(.reset-defaults) {
+      @apply pr-8;
+    }
+
     @apply appearance-none;
 
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 12 8'%3e%3cpath fill='%233E4C5C' d='M5.99962 4.97656L10.1246 0.851562L11.303 2.0299L5.99962 7.33323L0.696289 2.0299L1.87462 0.851562L5.99962 4.97656Z'/%3e%3c/svg%3e");
     background-position: right 1rem center;
     background-repeat: no-repeat;
     background-size: 0.75rem;
-
-    &:not(.reset-defaults) {
-      @apply pr-8;
-    }
   }
 }
 
@@ -154,7 +162,7 @@
   }
 
   button {
-    @apply absolute right-2 top-8;
+    @apply absolute ltr:right-2 rtl:left-2 top-8;
   }
 }
 

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

@@ -20,8 +20,26 @@ header {
     }
   }
 
+  #flash-messages-container {
+    @apply mt-28 md:mt-0;
+  }
+
+  &.with-admin-bar {
+    #flash-messages-container {
+      @apply mt-40 md:mt-0;
+    }
+
+    #menu-bar-container {
+      @apply mt-[140px] md:mt-0;
+    }
+  }
+
+  #sticky-header-container {
+    @apply fixed w-full top-0 shadow-lg z-40 bg-white md:relative transition-top duration-300;
+  }
+
   .main-bar {
-    @apply container grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-4 items-center py-5;
+    @apply container grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-4 items-center py-5 h-24;
 
     &__container {
       @apply relative w-full;
@@ -31,6 +49,14 @@ header {
       @apply col-span-3 xl:col-span-2 prose prose-img:max-h-16 prose-img:my-0;
     }
 
+    &__logo-desktop {
+      @apply hidden lg:block;
+    }
+
+    &__logo-mobile {
+      @apply lg:hidden;
+    }
+
     &__search {
       @apply hidden md:block col-span-2 col-start-5 xl:col-start-4;
 
@@ -43,10 +69,14 @@ header {
       }
 
       button[type="submit"] {
-        @apply absolute right-2 inset-y-2 text-secondary;
+        @apply absolute ltr:right-2 rtl:left-2 inset-y-2 text-secondary;
       }
     }
 
+    &__menu-mobile {
+      @apply lg:hidden flex flex-row-reverse items-center;
+    }
+
     &__links-desktop,
     > *:last-child {
       @apply col-span-1 md:col-start-8 lg:col-start-8 lg:col-span-5 justify-self-end;
@@ -61,6 +91,10 @@ header {
         &-wrapper {
           @apply flex gap-x-4 xl:gap-x-6;
         }
+
+        &-account {
+          @apply w-6 h-6 flex items-center justify-center bg-secondary text-white rounded-full text-xs font-bold mr-2;
+        }
       }
 
       /* overwrite default dropdown styles */
@@ -81,10 +115,10 @@ header {
       @apply fixed bottom-0 left-0 z-40 bg-white w-full px-4 py-3 flex justify-between text-secondary shadow-[0_-4px_6px_rgba(198,198,198,0.25)];
 
       &__trigger {
-        @apply flex flex-col items-center text-secondary cursor-pointer p-2;
+        @apply flex flex-col items-center text-secondary cursor-pointer pl-4 border-l border-gray-3;
 
         svg {
-          @apply w-5 h-5 fill-current;
+          @apply w-6 h-6 fill-current;
         }
 
         span {
@@ -96,6 +130,10 @@ header {
         @apply absolute top-full left-0 z-30 bg-white;
       }
 
+      &__dropdown-before {
+        @apply before:block before:absolute before:-top-10 before:right-12 before:content-[""] before:bg-white before:w-24 before:h-12 before:-mt-8;
+      }
+
       &__account {
         @apply fixed top-0 left-0 w-full h-full z-30 bg-white;
 
@@ -118,46 +156,33 @@ header {
         .main-bar__avatar {
           @apply w-12 h-12;
         }
-      }
-
-      &__search {
-        @apply fixed top-0 left-0 w-full h-full z-30 bg-white;
 
-        &-block {
-          @apply container h-full flex flex-col justify-center;
+        .main-bar__avatar-name {
+          @apply w-12 h-12 text-2xl;
         }
 
-        .main-bar {
-          @apply border-b border-gray;
+        .account-container {
+          @apply before:block before:absolute before:top-16 before:right-14 before:content-[""] before:bg-white before:w-2 before:h-12 before:-mt-8;
         }
+      }
 
-        label {
-          @apply block mb-4 text-black;
-        }
+      &__item {
+        @apply relative;
+      }
 
-        form {
-          @apply relative;
-        }
+      &__search {
+        @apply fixed top-0 left-0 w-full h-full z-30 bg-white;
       }
 
-      &__item {
-        @apply w-1/4 flex flex-col items-center relative;
+      &__login {
+        @apply w-20 h-full flex flex-row items-center relative text-secondary gap-1;
 
         svg {
-          @apply w-8 h-8 fill-current;
+          @apply w-8 h-6 fill-current;
         }
 
         svg + span {
-          @apply text-sm first-letter:uppercase;
-        }
-
-        /* overwrite default dropdown styles */
-        &[data-target*="dropdown"] {
-          @apply p-0 gap-0;
-
-          > span {
-            @apply block font-normal text-sm first-letter:uppercase;
-          }
+          @apply text-sm first-letter:uppercase pr-4 w-16;
         }
       }
     }
@@ -179,11 +204,11 @@ header {
     }
 
     &__notification {
-      @apply w-2.5 h-2.5 rounded-full block absolute -top-0.5 right-0 bg-primary;
+      @apply w-2.5 h-2.5 rounded-full block absolute -top-0.5 right-1.5 bg-primary;
     }
 
     &__avatar {
-      @apply block w-8 h-8 rounded-full border border-secondary overflow-hidden;
+      @apply block w-6 h-6 rounded-full border border-secondary overflow-hidden mr-2;
 
       span {
         @apply w-full h-full rounded-full overflow-hidden;
@@ -194,6 +219,10 @@ header {
       }
     }
 
+    &__avatar-name {
+      @apply w-6 h-6 flex items-center justify-center bg-secondary text-white rounded-full text-xs font-bold mr-2;
+    }
+
     /* overwrite default dropdown styles */
     [id*="dropdown-menu"] {
       @apply py-0 mx-0 w-full;
@@ -202,14 +231,10 @@ header {
         @apply md:hidden;
       }
     }
-
-    [data-target*="dropdown"] {
-      @apply last-of-type:[&>svg]:block;
-    }
   }
 
   .menu-bar {
-    @apply container h-full flex justify-between items-center lg:relative;
+    @apply container h-full flex justify-between items-center lg:relative last-of-type:[&>svg]:hidden;
 
     &__container {
       @apply bg-primary relative h-14;
@@ -235,10 +260,10 @@ header {
       }
 
       &__dropdown-content {
-        @apply absolute z-20 top-full left-8 cursor-auto;
+        @apply absolute z-20 top-full cursor-auto;
 
         &-secondary {
-          @apply absolute z-20 top-[calc(100%+12px)] left-0;
+          @apply absolute z-20 top-[calc(100%+12px)];
         }
       }
 
@@ -342,22 +367,17 @@ header {
       }
     }
 
+    &__language-chooser {
+      @apply absolute top-full left-0 bg-white rounded w-full bg-gray-5;
+    }
+
     &__main-dropdown {
-      @apply bg-white divide-y divide-gray-3 rounded-b shadow-lg text-black w-full lg:w-[1280px];
+      @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 flex flex-col md:flex-row justify-between p-4 md:p-8 gap-x-8;
 
-        &-left {
-          @apply w-full md:w-1/2;
-
-          /* Overwrite default size */
-          .card__highlight-text {
-            @apply text-md;
-          }
-        }
-
         &-right {
           @apply hidden md:block md:w-1/2;
         }

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

@@ -37,7 +37,7 @@
     @apply mb-6 md:mb-8 flex flex-col md:flex-row gap-y-6 md:gap-y-0 gap-x-1 items-start md:items-center;
 
     .button {
-      @apply md:ml-auto;
+      @apply ltr:md:ml-auto rtl:md:mr-auto;
     }
   }
 

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

@@ -105,3 +105,16 @@
 .layout-main__buttons {
   @apply flex gap-x-1 items-center;
 }
+
+.layout-aside__ctas-buttons {
+  @apply fixed md:relative inset-x-0 bottom-0 z-30 md:z-0 flex flex-row-reverse md:flex-col items-center md:items-stretch last:[&>button]:font-semibold first:[&>button]:text-lg justify-around bg-white md:bg-transparent gap-4 md:gap-0 p-4 md:p-0 shadow-inner md:shadow-none first:[&>*]:grow md:first:[&>*]:grow-0 last:[&>*]:w-1/2 md:last:[&>*]:w-auto h-20 md:h-fit first:[&>button]:py-3;
+
+  .meeting__aside-progress,
+  .proposals__aside-progress {
+    @apply flex flex-col-reverse md:flex-col md:w-auto;
+  }
+}
+
+.survey-section-buttons {
+  @apply flex-row last:[&>button]:font-semibold md:[&>button]:font-normal last:[&>button]:text-lg md:last:[&>button]:text-sm md:first:[&>button]:text-sm last:[&>button]:py-3 md:last:[&>button]:py-1.5 md:first:[&>button]:py-1.5;
+}

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

@@ -2,7 +2,7 @@
   @apply invisible opacity-0 fixed z-50 inset-0 bg-[rgba(0,0,0,0.25)] transition duration-300;
 
   & > * {
-    @apply absolute inset-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] lg:max-w-[900px] max-h-[95vh] h-fit overflow-y-auto p-6 bg-white z-50 rounded shadow-[0_4px_6px_rgba(211,211,211,0.25)];
+    @apply absolute inset-1/2 ltr:-translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 w-[90%] lg:max-w-[900px] max-h-[95vh] h-fit overflow-y-auto p-6 bg-white z-50 rounded shadow-[0_4px_6px_rgba(211,211,211,0.25)];
 
     & > svg:only-child {
       @apply w-8 h-8 mx-auto text-gray-2 fill-current animate-spin;

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

@@ -6,12 +6,8 @@
       @apply py-14;
     }
 
-    &.is-disabled label.button__secondary {
-      @apply text-gray-2 bg-background-3 border border-gray-2 cursor-not-allowed;
-    }
-
     &-container {
-      @apply mt-4 md:mt-12 space-y-4;
+      @apply space-y-4;
     }
 
     &-placeholder {

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

@@ -20,6 +20,10 @@
       @apply prose-a:font-semibold hover:prose-a:underline prose-a:text-secondary;
     }
 
+    &-actions {
+      @apply pt-4;
+    }
+
     &-resource {
       @apply text-sm text-gray-2 flex items-center gap-1;
 

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

@@ -45,7 +45,7 @@
 
   &__actions {
     &-main {
-      @apply w-fit mx-auto gap-x-4 gap-y-6 md:gap-4;
+      @apply w-fit grid grid-cols-2 md:grid-cols-1 mx-auto gap-x-4 gap-y-6 md:gap-4;
 
       &__dropdown {
         @apply divide-y divide-gray-3 z-20 w-64;

data/app/packs/stylesheets/decidim/_progress-bar.scss

@@ -29,7 +29,7 @@
   }
 
   &__sm {
-    @apply w-16 pt-2;
+    @apply w-16;
   }
 
   &__sm &__number {