decidim-admin 0.30.2 → 0.31.0.rc1

data/app/packs/stylesheets/decidim/admin/_item_edit.scss

@@ -3,7 +3,7 @@
 
   &-form {
     .card {
-      @apply rounded bg-white border-background border fill-secondary;
+      @apply rounded bg-white border-neutral-200 border fill-secondary;
     }
 
     .card-section {
@@ -30,7 +30,7 @@
       }
 
       &[aria-expanded="true"] {
-        @apply border-solid border-b border-gray w-full rounded-none;
+        @apply border-solid border-b border-neutral-200 w-full rounded-none;
 
         svg {
           @apply rotate-90 transition-transform;
@@ -42,10 +42,6 @@
       @apply font-semibold text-md text-left inline-block text-secondary;
     }
 
-    .label--tabs {
-      @apply mb-2;
-    }
-
     label {
       @apply text-gray-2 text-sm;
     }
@@ -111,10 +107,6 @@
       }
     }
   }
-
-  .label--tabs {
-    @apply mb-2;
-  }
 }
 
 .item__edit-1col {

data/app/packs/stylesheets/decidim/admin/_item_show.scss

@@ -3,7 +3,7 @@
 }
 
 .item_show__header {
-  @apply flex items-center pb-4 border-b border-gray mb-4 gap-x-2;
+  @apply flex items-center pb-4 border-b border-neutral-200 mb-4 gap-x-2;
 
   > svg {
     @apply w-4 h-4;
@@ -11,10 +11,6 @@
 
   &-title {
     @apply text-xl font-bold block sm:flex items-center justify-between gap-4 w-full first-letter:capitalize first:[&>div]:ml-0 first:[&>*]:ml-auto;
-
-    .dropdown-pane {
-      @apply font-normal;
-    }
   }
 
   &--with-action-options {

data/app/packs/stylesheets/decidim/admin/_legacy_foundation.scss

@@ -1,415 +1,3 @@
-li.opens-left > .is-dropdown-submenu {
-  top: 100%;
-  right: 0;
-  left: auto;
-}
-
-.dropdown.menu > li.opens-right > .is-dropdown-submenu {
-  top: 100%;
-  right: auto;
-  left: 0;
-}
-
-.dropdown.menu > li.is-dropdown-submenu-parent > a {
-  position: relative;
-  padding-right: 1.5rem;
-}
-
-[data-whatinput="mouse"] .dropdown.menu a {
-  outline: 0;
-}
-
-.dropdown.menu > li > a {
-  padding: 0.7rem 1rem;
-}
-
-.dropdown.menu > li.is-active > a {
-  background: 0 0;
-  color: #1779ba;
-}
-
-.no-js .dropdown.menu ul {
-  display: none;
-}
-
-.dropdown.menu ul {
-  &[aria-hidden="true"] {
-    display: none;
-  }
-
-  &[aria-hidden="false"] {
-    display: block;
-  }
-}
-
-.dropdown.menu .nested.is-dropdown-submenu {
-  margin-right: 0;
-  margin-left: 0;
-}
-
-.dropdown.menu.vertical > li .is-dropdown-submenu {
-  top: 0;
-}
-
-.dropdown.menu.vertical > li.opens-left > .is-dropdown-submenu {
-  top: 0;
-  right: 100%;
-  left: auto;
-}
-
-.dropdown.menu.vertical > li.opens-right > .is-dropdown-submenu {
-  right: auto;
-  left: 100%;
-}
-
-.dropdown.menu.vertical > li > a::after {
-  right: 14px;
-}
-
-.dropdown.menu.vertical > li.opens-left > a::after {
-  display: block;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 6px;
-  content: "";
-  border-left-width: 0;
-  border-color: transparent #1779ba transparent transparent;
-  right: auto;
-  left: 5px;
-}
-
-.dropdown.menu.vertical > li.opens-right > a::after {
-  display: block;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 6px;
-  content: "";
-  border-right-width: 0;
-  border-color: transparent transparent transparent #1779ba;
-}
-
-@media print, screen and (min-width: 40em) {
-  .dropdown.menu.medium-horizontal > li.opens-left > .is-dropdown-submenu {
-    top: 100%;
-    right: 0;
-    left: auto;
-  }
-
-  .dropdown.menu.medium-horizontal > li.opens-right > .is-dropdown-submenu {
-    top: 100%;
-    right: auto;
-    left: 0;
-  }
-
-  .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a {
-    position: relative;
-    padding-right: 1.5rem;
-  }
-
-  .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 6px;
-    content: "";
-    border-bottom-width: 0;
-    border-color: #1779ba transparent transparent;
-    right: 5px;
-    left: auto;
-    margin-top: -3px;
-  }
-
-  .dropdown.menu.medium-vertical > li .is-dropdown-submenu {
-    top: 0;
-  }
-
-  .dropdown.menu.medium-vertical > li.opens-left > .is-dropdown-submenu {
-    top: 0;
-    right: 100%;
-    left: auto;
-  }
-
-  .dropdown.menu.medium-vertical > li.opens-right > .is-dropdown-submenu {
-    right: auto;
-    left: 100%;
-  }
-
-  .dropdown.menu.medium-vertical > li > a::after {
-    right: 14px;
-  }
-
-  .dropdown.menu.medium-vertical > li.opens-left > a::after {
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 6px;
-    content: "";
-    border-left-width: 0;
-    border-color: transparent #1779ba transparent transparent;
-    right: auto;
-    left: 5px;
-  }
-
-  .dropdown.menu.medium-vertical > li.opens-right > a::after {
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 6px;
-    content: "";
-    border-right-width: 0;
-    border-color: transparent transparent transparent #1779ba;
-  }
-}
-
-@media print, screen and (min-width: 64em) {
-  .dropdown.menu.large-horizontal > li.opens-left > .is-dropdown-submenu {
-    top: 100%;
-    right: 0;
-    left: auto;
-  }
-
-  .dropdown.menu.large-horizontal > li.opens-right > .is-dropdown-submenu {
-    top: 100%;
-    right: auto;
-    left: 0;
-  }
-
-  .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a {
-    position: relative;
-    padding-right: 1.5rem;
-  }
-
-  .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a::after {
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 6px;
-    content: "";
-    border-bottom-width: 0;
-    border-color: #1779ba transparent transparent;
-    right: 5px;
-    left: auto;
-    margin-top: -3px;
-  }
-
-  .dropdown.menu.large-vertical > li .is-dropdown-submenu {
-    top: 0;
-  }
-
-  .dropdown.menu.large-vertical > li.opens-left > .is-dropdown-submenu {
-    top: 0;
-    right: 100%;
-    left: auto;
-  }
-
-  .dropdown.menu.large-vertical > li.opens-right > .is-dropdown-submenu {
-    right: auto;
-    left: 100%;
-  }
-
-  .dropdown.menu.large-vertical > li > a::after {
-    right: 14px;
-  }
-
-  .dropdown.menu.large-vertical > li.opens-left > a::after {
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 6px;
-    content: "";
-    border-left-width: 0;
-    border-color: transparent #1779ba transparent transparent;
-    right: auto;
-    left: 5px;
-  }
-
-  .dropdown.menu.large-vertical > li.opens-right > a::after {
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 6px;
-    content: "";
-    border-right-width: 0;
-    border-color: transparent transparent transparent #1779ba;
-  }
-}
-
-.dropdown.menu.align-right .is-dropdown-submenu.first-sub {
-  top: 100%;
-  right: 0;
-  left: auto;
-}
-
-.is-dropdown-menu.vertical {
-  width: 100px;
-}
-
-.is-dropdown-menu.vertical.align-right {
-  float: right;
-}
-
-.is-dropdown-submenu-parent {
-  position: relative;
-}
-
-.is-dropdown-submenu-parent a::after {
-  position: absolute;
-  top: 50%;
-  right: 5px;
-  left: auto;
-  margin-top: -6px;
-}
-
-.is-dropdown-submenu-parent.opens-inner > .is-dropdown-submenu {
-  top: 100%;
-  left: auto;
-}
-
-.is-dropdown-submenu-parent.opens-left > .is-dropdown-submenu {
-  right: 100%;
-  left: auto;
-}
-
-.is-dropdown-submenu-parent.opens-right > .is-dropdown-submenu {
-  right: auto;
-  left: 100%;
-}
-
-.is-dropdown-submenu {
-  position: absolute;
-  top: 0;
-  left: 100%;
-  z-index: 1;
-  display: none;
-  min-width: 200px;
-  border: 1px solid #cacaca;
-  background: #fefefe;
-}
-
-.dropdown .is-dropdown-submenu a {
-  padding: 0.7rem 1rem;
-}
-
-.is-dropdown-submenu .is-dropdown-submenu-parent > a::after {
-  right: 14px;
-}
-
-.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a::after {
-  display: block;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 6px;
-  content: "";
-  border-left-width: 0;
-  border-color: transparent #1779ba transparent transparent;
-  right: auto;
-  left: 5px;
-}
-
-.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after {
-  display: block;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 6px;
-  content: "";
-  border-right-width: 0;
-  border-color: transparent transparent transparent #1779ba;
-}
-
-.is-dropdown-submenu .is-dropdown-submenu {
-  margin-top: -1px;
-}
-
-.is-dropdown-submenu > li {
-  width: 100%;
-}
-
-.is-dropdown-submenu.js-dropdown-active {
-  display: block;
-}
-
-.dropdown-pane {
-  position: absolute;
-  z-index: 10;
-  display: none;
-  width: 300px;
-  padding: 1rem;
-  visibility: hidden;
-  border: 1px solid #cacaca;
-  border-radius: 0;
-  background-color: #fefefe;
-  font-size: 1rem;
-}
-
-.dropdown-pane.is-opening {
-  display: block;
-}
-
-.dropdown-pane.is-open {
-  display: block;
-  visibility: visible;
-}
-
-.dropdown-pane.tiny {
-  width: 100px;
-}
-
-.dropdown-pane.small {
-  width: 200px;
-}
-
-.dropdown-pane.large {
-  width: 400px;
-}
-
-.dropdown-pane {
-  padding: 0;
-  background-color: #fff;
-  border: 1px solid #eee;
-}
-
-.dropdown-pane ul {
-  margin: 0;
-  padding: 0;
-}
-
-.dropdown-pane li {
-  padding: 1rem;
-  color: var(--secondary);
-}
-
-.dropdown-pane.dropdown-pane--buttons {
-  li {
-    padding: 0;
-  }
-
-  li button {
-    width: 100%;
-    height: 100%;
-    text-align: left;
-    padding: 1rem;
-  }
-}
-
-.dropdown-pane li:hover {
-  color: #fff;
-  background-color: var(--secondary);
-}
-
-.dropdown-pane li:not(:last-child) {
-  border-bottom: 1px solid #eee;
-}
-
 .autoComplete_wrapper {
   width: 100%;
   position: relative;

data/app/packs/stylesheets/decidim/admin/_main-nav.scss

@@ -1,3 +1,5 @@
+@use "stylesheets/decidim/buttons";
+
 .layout-wrapper {
   &.is-nav-open {
     .layout-nav {
@@ -39,14 +41,12 @@
     @apply text-white py-2 block text-xs w-full bg-transparent transition;
 
     &:hover {
-      @apply underline;
-
       background-color: rgba(4, 11, 23, 0.3);
     }
   }
 
   .is-active a {
-    @apply text-white underline;
+    @apply text-white;
 
     background-color: rgba(4, 11, 23, 0.3);
   }
@@ -80,6 +80,22 @@
           @apply fill-secondary;
         }
       }
+
+      & .component-counter {
+        @apply text-sm font-semibold text-white rounded-full bg-gray px-2;
+      }
+    }
+
+    .sidebar-menu__item-disabled {
+      @apply w-full flex gap-2 justify-center items-center text-md text-neutral-400 leading-9 border-none pb-0 rounded-t cursor-not-allowed;
+
+      & .component-counter {
+        @apply hidden;
+      }
+
+      svg {
+        @apply fill-neutral-400 w-4 h-4 mb-0;
+      }
     }
 
     .is-active a {
@@ -88,6 +104,62 @@
       svg {
         @apply fill-secondary;
       }
+
+      & .component-counter {
+        @apply no-underline bg-secondary;
+      }
+    }
+  }
+}
+
+.main-tabs-menu {
+  @apply flex flex-col sm:flex-row items-center border-b-2 border-neutral-300 mb-4 relative;
+
+  &__tabs {
+    @apply w-full sm:w-2/3;
+
+    .main-nav {
+      ul.tab-x-container {
+        @apply mb-0;
+
+        li {
+          @apply pb-0;
+
+          a {
+            @apply border-b-0;
+          }
+        }
+
+        span.sidebar-menu__item-disabled {
+          @apply pt-0;
+        }
+      }
+    }
+
+    .tab-item {
+      @apply relative pb-1;
+    }
+
+    .is-active {
+      @apply font-medium text-secondary;
+
+      a {
+        @apply relative inline-block pb-1;
+
+        &::after {
+          @apply absolute left-0 -bottom-[0.10rem] h-[3px] w-full bg-secondary;
+
+          content: "";
+        }
+      }
     }
   }
+
+  &__buttons {
+    @apply w-1/3 sm:w-auto sm:-mt-4 sm:ml-auto;
+  }
+
+  &__cta-button {
+    @apply button button__xs button__secondary h-6;
+  }
 }

data/app/packs/stylesheets/decidim/admin/_secondary-nav.scss

@@ -74,19 +74,15 @@
         }
 
         a {
-          @apply flex items-center gap-x-4 text-secondary;
-
-          svg {
-            @apply fill-gray;
-          }
-
-          &:hover {
-            @apply underline;
-          }
+          @apply flex items-center gap-x-4;
         }
 
         &:hover {
-          @apply no-underline;
+          @apply text-white;
+
+          svg {
+            @apply fill-white;
+          }
         }
       }
     }

data/app/packs/stylesheets/decidim/admin/_select_picker.scss

@@ -1,4 +1,4 @@
-@import "tom-select/dist/scss/tom-select";
+@use "tom-select/dist/scss/tom-select";
 
 /* overwrite tom-select defaults */
 .ts {

data/app/packs/stylesheets/decidim/admin/_sidebar-menu.scss

@@ -17,7 +17,7 @@
 
     &.is-active > a,
     & > a:hover {
-      @apply underline [&>svg]:text-secondary bg-white border;
+      @apply [&>svg]:text-secondary bg-white border;
     }
 
     &.is-active > a {
@@ -42,7 +42,7 @@
 
         &.is-active > a,
         & > a:hover {
-          @apply underline [&>svg]:text-secondary bg-white;
+          @apply [&>svg]:text-secondary bg-white;
         }
       }
     }

data/app/packs/stylesheets/decidim/admin/_table-list.scss

@@ -12,6 +12,28 @@
   }
 }
 
+.table-stacked {
+  table {
+    @apply w-full border-collapse md:table;
+
+    thead {
+      @apply hidden md:table-header-group;
+    }
+
+    tbody {
+      @apply block md:table-row-group;
+    }
+
+    tr {
+      @apply block mb-4 md:table-row md:mb-0;
+
+      td {
+        @apply block p-3 md:table-cell before:content-[attr(data-label)] before:border-collapse before:border-spacing-0 before:inline-block before:w-24 before:bg-background-2 before:text-xs before:text-gray-2 before:font-semibold md:before:hidden;
+      }
+    }
+  }
+}
+
 //Table list
 .table-list {
   @apply border-collapse border-spacing-0;
@@ -72,7 +94,7 @@
 
   th:not(:first-child),
   td:not(:first-child) {
-    @apply text-center;
+    @apply text-left md:text-center;
   }
 
   th [type="checkbox"],
@@ -92,8 +114,8 @@
     @apply text-gray-2 text-xs;
   }
 
-  td a:not(.button) {
-    @apply underline text-md font-semibold text-secondary;
+  td a:not(.button):not([class*="dropdown"] a) {
+    @apply text-md font-semibold text-secondary;
   }
 
   td > .button {
@@ -145,10 +167,6 @@
 
   svg {
     @apply inline-block fill-secondary w-5 h-5;
-
-    &.action-icon--disabled {
-      @apply fill-gray mr-2;
-    }
   }
 
   .action-space {

data/app/packs/stylesheets/decidim/admin/_tabs.scss

@@ -51,6 +51,10 @@
   }
 }
 
+.tabs-panel .help-text {
+  @apply mt-1;
+}
+
 .tabs-panel[aria-hidden="true"] {
   @apply hidden;
 }

data/app/packs/stylesheets/decidim/admin/_taxonomies.scss

@@ -23,10 +23,10 @@
 }
 
 ul.taxonomy {
-  @apply flex;
+  @apply md:flex;
 
   li {
-    @apply flex-none text-center w-20 mt-2 mb-2;
+    @apply flex-none md:w-20 mt-2 mb-2 md:text-center;
 
     &:first-child {
       @apply flex-initial text-left flex-grow;
@@ -50,6 +50,10 @@ ul.taxonomy {
     .action-space {
       @apply w-5 h-5;
     }
+
+    .dropdown__item {
+      @apply text-left m-0 w-full;
+    }
   }
 }