decidim-core 0.30.2 → 0.31.0.rc1

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

@@ -174,10 +174,6 @@
     @apply flex-1 text-center;
   }
 
-  &__help-text-container {
-    @apply w-full h-10 relative;
-  }
-
   &__help-date {
     @apply w-1/2 relative inline-block;
   }

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/_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;
     }
@@ -73,12 +81,20 @@ header {
       }
     }
 
+    &__back-button {
+      @apply col-span-2 text-secondary;
+
+      svg {
+        @apply fill-current;
+      }
+    }
+
     &__menu-mobile {
       @apply lg:hidden flex flex-row-reverse items-center;
     }
 
     &__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;
     }
 

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

@@ -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.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] {

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 */
     > * {

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;

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

@@ -1,86 +1,86 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@use "sass:meta";
+@use "tailwindcss/base";
+@use "tailwindcss/components";
+@use "tailwindcss/utilities";
+
+// Datepicker
+@use "stylesheets/decidim/vendor/datepicker_light";
+@use "stylesheets/decidim/datepicker";
+// On the other hand, the following styles match with specific routes
+@use "stylesheets/decidim/header";
+@use "stylesheets/decidim/footer";
+@use "stylesheets/decidim/login";
+@use "stylesheets/decidim/pages";
+@use "stylesheets/decidim/notifications";
+@use "stylesheets/decidim/profile";
+@use "stylesheets/decidim/conversations";
+@use "stylesheets/decidim/versions";
+@use "stylesheets/decidim/home";
+@use "stylesheets/decidim/search";
+@use "stylesheets/decidim/cookies";
+// participatory spaces are quite similar between processes and assemblies (different modules), so their stylesheets are placed in the core
+@use "stylesheets/decidim/participatory_spaces";
+@use "stylesheets/decidim/omnipresent_banner";
+// This imports all the Decidim module stylesheet imports registered at
+// `config/assets.rb` of the module for the "app" group. The import contains
+// a mixing named `styles` which is included at the bottom of this file.
+@use "decidim:style-imports[app]" as extra;
 
 @layer base {
-  @import "stylesheets/decidim/_fonts.scss";
-  @import "stylesheets/decidim/_typography.scss";
+  @include meta.load-css("stylesheets/decidim/fonts");
+  @include meta.load-css("stylesheets/decidim/typography");
   // Keep this in separate file as long as we are maintaining Foundation compatibility
-  @import "stylesheets/decidim/_rich_text.scss";
+  @include meta.load-css("stylesheets/decidim/rich_text");
 }
 
 // The CSS components must work identically all along the application,
 // no matter which view are being displayed in.
 @layer components {
-  @import "stylesheets/decidim/_layout.scss";
-  @import "stylesheets/decidim/_buttons.scss";
-  @import "stylesheets/decidim/_labels.scss";
-  @import "stylesheets/decidim/_forms.scss";
-  @import "stylesheets/decidim/_dropdown.scss";
-  @import "stylesheets/decidim/_login_box.scss";
-  @import "stylesheets/decidim/_callout.scss";
-  @import "stylesheets/decidim/_accordion.scss";
-  @import "stylesheets/decidim/_tos.scss";
-  @import "stylesheets/decidim/_vertical_tabs.scss";
-  @import "stylesheets/decidim/_flash.scss";
-  @import "stylesheets/decidim/_static-map.scss";
-  @import "stylesheets/decidim/_filters.scss";
-  @import "stylesheets/decidim/_tags.scss";
-  @import "stylesheets/decidim/_tabs_x.scss";
-  @import "stylesheets/decidim/_metadata.scss";
-  @import "stylesheets/decidim/_modal.scss";
-  @import "stylesheets/decidim/_modal_share.scss";
-  @import "stylesheets/decidim/_modal_flag.scss";
-  @import "stylesheets/decidim/_modal_identities.scss";
-  @import "stylesheets/decidim/_modal_authorization.scss";
-  @import "stylesheets/decidim/_modal_update.scss";
-  @import "stylesheets/decidim/_modal_tos_refuse.scss";
-  @import "stylesheets/decidim/_modal_fingerprint.scss";
-  @import "stylesheets/decidim/_address.scss";
-  @import "stylesheets/decidim/_statistics.scss";
-  @import "stylesheets/decidim/_content_blocks.scss";
-  @import "stylesheets/decidim/_documents.scss";
-  @import "stylesheets/decidim/_floating_help.scss";
-  @import "stylesheets/decidim/_cards.scss";
-  @import "stylesheets/decidim/_floating_help.scss";
-  @import "stylesheets/decidim/_metrics.scss";
-  @import "stylesheets/decidim/_order-by.scss";
-  @import "stylesheets/decidim/_photos.scss";
-  @import "stylesheets/decidim/_endorsers_list.scss";
-  @import "stylesheets/decidim/_activity.scss";
-  @import "stylesheets/decidim/_tooltip.scss";
-  @import "stylesheets/decidim/_author.scss";
-  @import "stylesheets/decidim/_order-by.scss";
-  @import "stylesheets/decidim/_wizard_steps.scss";
-  @import "stylesheets/decidim/_progress-bar.scss";
-  @import "stylesheets/decidim/_spinner.scss";
-  @import "stylesheets/decidim/_toggle_switch.scss";
-  @import "stylesheets/decidim/_hero.scss";
-  @import "stylesheets/decidim/_actions.scss";
-  @import "stylesheets/decidim/_emoji.scss";
-  @import "stylesheets/decidim/_success_image.scss";
-  @import "stylesheets/decidim/_hashtags.scss";
+  @include meta.load-css("stylesheets/decidim/layout");
+  @include meta.load-css("stylesheets/decidim/buttons");
+  @include meta.load-css("stylesheets/decidim/labels");
+  @include meta.load-css("stylesheets/decidim/forms");
+  @include meta.load-css("stylesheets/decidim/dropdown");
+  @include meta.load-css("stylesheets/decidim/login_box");
+  @include meta.load-css("stylesheets/decidim/callout");
+  @include meta.load-css("stylesheets/decidim/accordion");
+  @include meta.load-css("stylesheets/decidim/tos");
+  @include meta.load-css("stylesheets/decidim/vertical_tabs");
+  @include meta.load-css("stylesheets/decidim/flash");
+  @include meta.load-css("stylesheets/decidim/static-map");
+  @include meta.load-css("stylesheets/decidim/filters");
+  @include meta.load-css("stylesheets/decidim/tags");
+  @include meta.load-css("stylesheets/decidim/tabs_x");
+  @include meta.load-css("stylesheets/decidim/metadata");
+  @include meta.load-css("stylesheets/decidim/modal");
+  @include meta.load-css("stylesheets/decidim/modal_share");
+  @include meta.load-css("stylesheets/decidim/modal_flag");
+  @include meta.load-css("stylesheets/decidim/modal_authorization");
+  @include meta.load-css("stylesheets/decidim/modal_update");
+  @include meta.load-css("stylesheets/decidim/modal_tos_refuse");
+  @include meta.load-css("stylesheets/decidim/modal_fingerprint");
+  @include meta.load-css("stylesheets/decidim/address");
+  @include meta.load-css("stylesheets/decidim/statistics");
+  @include meta.load-css("stylesheets/decidim/content_blocks");
+  @include meta.load-css("stylesheets/decidim/documents");
+  @include meta.load-css("stylesheets/decidim/floating_help");
+  @include meta.load-css("stylesheets/decidim/cards");
+  @include meta.load-css("stylesheets/decidim/order-by");
+  @include meta.load-css("stylesheets/decidim/photos");
+  @include meta.load-css("stylesheets/decidim/likes_list");
+  @include meta.load-css("stylesheets/decidim/activity");
+  @include meta.load-css("stylesheets/decidim/tooltip");
+  @include meta.load-css("stylesheets/decidim/author");
+  @include meta.load-css("stylesheets/decidim/address");
+  @include meta.load-css("stylesheets/decidim/wizard_steps");
+  @include meta.load-css("stylesheets/decidim/progress-bar");
+  @include meta.load-css("stylesheets/decidim/spinner");
+  @include meta.load-css("stylesheets/decidim/toggle_switch");
+  @include meta.load-css("stylesheets/decidim/hero");
+  @include meta.load-css("stylesheets/decidim/actions");
+  @include meta.load-css("stylesheets/decidim/emoji");
+  @include meta.load-css("stylesheets/decidim/success_image");
 }
 
-@import "stylesheets/decidim/vendor/datepicker_light.scss";
-@import "stylesheets/decidim/datepicker.scss";
-
-// On the other hand, the following styles match with specific routes
-@import "stylesheets/decidim/_header.scss";
-@import "stylesheets/decidim/_footer.scss";
-@import "stylesheets/decidim/_login.scss";
-@import "stylesheets/decidim/_pages.scss";
-@import "stylesheets/decidim/_notifications.scss";
-@import "stylesheets/decidim/_profile.scss";
-@import "stylesheets/decidim/_conversations.scss";
-@import "stylesheets/decidim/_versions.scss";
-@import "stylesheets/decidim/_home.scss";
-@import "stylesheets/decidim/_search.scss";
-@import "stylesheets/decidim/_cookies.scss";
-// participatory spaces are quite similar between processes and assemblies (different modules), so their stylesheets are placed in the core
-@import "stylesheets/decidim/_participatory_spaces.scss";
-@import "stylesheets/decidim/_omnipresent_banner.scss";
-
-// This imports all the Decidim module stylesheet imports registered at
-// `config/assets.rb` of the module for the "app" group.
-@import "!decidim-style-imports[app]";
+// This applies the custom style imports registered at the application.
+@include extra.styles;