decidim-admin 0.27.4 → 0.28.0.rc5

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

@@ -0,0 +1,482 @@
+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 .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 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;
+
+  input {
+    color: #000;
+    width: 100%;
+    margin: 0;
+  }
+
+  ul {
+    position: absolute;
+    margin: 0;
+
+    li {
+      color: var(--secondary);
+
+      span {
+        &.author__avatar {
+          display: inline-block;
+        }
+      }
+
+      &:hover,
+      &[aria-selected="true"] {
+        background-color: #ededed;
+      }
+
+      &.disabled {
+        pointer-events: none;
+        opacity: 0.6;
+      }
+
+      .is-group {
+        float: right;
+      }
+    }
+  }
+
+  span {
+    &.autocomplete__selected-item.sticky {
+      position: absolute;
+      overflow: hidden;
+      height: 40px;
+      padding: 1rem;
+    }
+  }
+
+  .clear-sticky-selection {
+    display: inline;
+    position: absolute;
+    font-size: 1.3rem;
+    cursor: pointer;
+    right: 1rem;
+    height: 40px;
+  }
+
+  .clear-multi-selection {
+    cursor: pointer;
+  }
+
+  .search-prompt {
+    color: #000;
+    border: 1px solid #6b7280cc;
+    padding: 0.2rem;
+  }
+}
+
+.multiselect {
+  background-color: #fff;
+  display: inline-block;
+  border: 1px solid #6b7280cc;
+  width: 100%;
+  cursor: text;
+  padding: 0 0.5rem;
+  min-height: 2.4375rem;
+
+  span {
+    display: inline-block;
+    position: relative;
+    margin: 0.5rem 0.5rem 0.5rem 0;
+
+    input {
+      border: none;
+      outline: none;
+    }
+
+    &.clear-multi-selection {
+      margin: 0 0 0 0.2rem;
+      cursor: pointer;
+    }
+  }
+}

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

@@ -0,0 +1,80 @@
+.logs {
+  @apply ml-0 mb-0 list-none p-4;
+
+  &__log:not(:last-child) {
+    @apply border-b border-gray-3;
+  }
+
+  .logs__log__content,
+  .logs__log__diff-row {
+    @apply flex flex-row gap-x-4 p-2 px-4 items-center;
+  }
+
+  .logs__log--deletion .logs__log__content {
+    background-color: rgb(255, 242, 242);
+  }
+
+  .logs__log__explanation {
+    a {
+      @apply underline text-secondary;
+    }
+
+    span {
+      @apply font-semibold;
+    }
+  }
+
+  .logs__log__diff {
+    max-height: 200px;
+    overflow-y: scroll;
+
+    &[aria-hidden="true"] {
+      @apply hidden;
+    }
+
+    &[aria-hidden="false"] {
+      @apply block;
+    }
+  }
+
+  .logs__log__actions {
+    @apply h-5 w-5;
+  }
+
+  .logs__log__actions-dropdown {
+    &[aria-expanded="false"] {
+      &::after {
+        @apply block h-5 w-5;
+
+        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.1714 12.0007L8.22168 7.05093L9.63589 5.63672L15.9999 12.0007L9.63589 18.3646L8.22168 16.9504L13.1714 12.0007Z'%3E%3C/path%3E%3C/svg%3E");
+      }
+    }
+
+    &[aria-expanded="true"] {
+      &::after {
+        @apply block h-5 w-5;
+
+        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z'%3E%3C/path%3E%3C/svg%3E");
+      }
+    }
+  }
+
+  .logs__log__diff-title {
+    padding-right: rem-calc(10);
+    font-weight: 600;
+  }
+
+  .logs__log__diff-row--new-value {
+    background-color: rgb(217, 255, 221);
+  }
+
+  .logs__log__diff-row--previous-value {
+    background-color: rgb(238, 238, 238);
+
+    .logs__log__diff-title {
+      color: rgb(152, 152, 152);
+      font-weight: normal;
+      text-transform: lowercase;
+    }
+  }
+}

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

@@ -0,0 +1,93 @@
+.layout-wrapper {
+  &.is-nav-open {
+    .layout-nav {
+      @apply translate-x-0;
+
+      .main-nav {
+        @apply w-[100px];
+      }
+
+      .logo {
+        @apply hidden;
+      }
+    }
+  }
+
+  .layout-nav {
+    @apply absolute md:relative top-0 bottom-0 z-50 -translate-x-full md:translate-x-0 ease-in transition;
+
+    .main-nav {
+      @apply bg-gray-2 w-[120px] text-center last:pt-4;
+    }
+
+    .main-nav__modules {
+      @apply pb-4 pt-0 border-b;
+
+      border-color: #2a3745;
+    }
+  }
+}
+
+.main-nav ul {
+  @apply list-none w-full;
+
+  li {
+    @apply pb-2;
+  }
+
+  a {
+    @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;
+
+    background-color: rgba(4, 11, 23, 0.3);
+  }
+
+  svg {
+    @apply w-5 h-5 block mx-auto mb-1 fill-background-4;
+  }
+
+  &.tab-x-container {
+    @apply mb-6;
+
+    svg {
+      @apply mx-0 inline-block;
+    }
+
+    li {
+      @apply pb-0;
+    }
+
+    a {
+      @apply w-full flex gap-2 justify-center items-center text-md text-gray-2 border-gray border-b-2 py-2 rounded-t cursor-pointer;
+
+      svg {
+        @apply fill-gray-2 w-4 h-4 mb-0;
+      }
+
+      &:hover {
+        @apply bg-white text-secondary border-secondary;
+
+        svg {
+          @apply fill-secondary;
+        }
+      }
+    }
+
+    .is-active a {
+      @apply bg-white text-secondary border-secondary;
+
+      svg {
+        @apply fill-secondary;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+#minimap-wrapper {
+  @apply md:max-w-xl w-full relative aspect-square md:aspect-video;
+}
+
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+#minimap {
+  @apply absolute inset-0 grid;
+
+  grid-template-areas:
+    "tab blank blank"
+    "header header header"
+    "navbar navbar navbar"
+    "body body body"
+    "footer footer footer";
+  grid-template-columns: 20% 1fr 1fr;
+  grid-template-rows: 20px 48px 24px 1fr 64px;
+
+  img {
+    @apply h-full;
+  }
+
+  span {
+    @apply text-black text-xs;
+  }
+
+  .minimap-tab {
+    @apply flex bg-background;
+
+    grid-area: tab;
+  }
+
+  .minimap-body {
+    @apply bg-white border-x-2 border-background;
+
+    grid-area: body;
+  }
+
+  .minimap-navbar {
+    @apply bg-primary border-x-2 border-background;
+
+    grid-area: navbar;
+  }
+
+  .minimap-footer {
+    @apply flex items-center bg-gray-4 px-4 py-1 border-2 border-t-0 border-background;
+
+    grid-area: footer;
+
+    span {
+      @apply text-white;
+    }
+  }
+
+  .minimap-header {
+    @apply flex items-center justify-between bg-white px-4 py-1 border-2 border-b-0 border-background;
+
+    grid-area: header;
+  }
+}