decidim-admin 0.27.5 → 0.28.0.rc4

data/app/packs/stylesheets/decidim/admin/_component-show.scss

@@ -0,0 +1,95 @@
+.component__show {
+  &_header {
+    @apply flex items-center pb-4 border-b border-gray mb-4 gap-x-2;
+
+    &-title {
+      @apply text-xl font-bold inline-block;
+    }
+  }
+
+  &_nav {
+    @apply flex items-center mb-8;
+
+    &-circle {
+      @apply w-10 h-10 rounded-full relative border-2 border-white bg-background;
+
+      svg {
+        @apply w-6 h-6 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 fill-secondary;
+      }
+    }
+
+    &-author {
+      @apply flex items-center gap-x-4;
+
+      &-title {
+        @apply font-semibold text-gray-2 text-md list-none;
+      }
+
+      &-date {
+        @apply text-gray-2 text-xs;
+      }
+    }
+  }
+
+  &-title {
+    @apply font-semibold text-gray-2 text-xs;
+  }
+
+  &-text {
+    @apply text-gray-2 text-md;
+  }
+
+  .card-section {
+    @apply rounded p-4;
+  }
+
+  &_grid {
+    @apply grid grid-cols-[75%_25%] gap-x-4;
+
+    &-item {
+      .card-section:not(:last-child) {
+        @apply mb-4;
+      }
+
+      .component__show-icon-text {
+        @apply text-gray-2 text-sm;
+      }
+
+      svg {
+        @apply w-3.5 h-3.5 fill-gray;
+      }
+    }
+  }
+
+  &_notes {
+    &-grid {
+      @apply grid grid-cols-2 gap-4 my-4;
+
+      .comment {
+        @apply p-4 rounded;
+
+        background-color: rgba(255, 252, 238, 1);
+      }
+    }
+  }
+
+  .card-divider-button {
+    @apply flex-none flex items-center justify-start w-full;
+
+    svg {
+      @apply inline-block w-6 h-6;
+    }
+
+    &[aria-expanded="true"] {
+      @apply border-solid border-b border-gray w-full rounded-none pb-3;
+
+      svg {
+        @apply rotate-90 transition-transform;
+      }
+    }
+  }
+
+  .card-title {
+    @apply font-semibold text-md text-left inline-block text-secondary;
+  }
+}

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

@@ -0,0 +1,55 @@
+#data_picker-modal {
+  @apply invisible opacity-0 fixed z-50 inset-0 bg-[rgba(0,0,0,.25)] transition duration-300;
+
+  .data_picker-modal-content {
+    @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,.25)];
+  }
+
+  .close-button {
+    @apply absolute top-4 right-4 text-2xl text-secondary;
+  }
+
+  &[aria-hidden="false"] {
+    @apply visible opacity-100;
+  }
+
+  #data_picker-title {
+    @apply text-2xl text-black font-semibold focus:outline-none mb-2;
+  }
+
+  .picker-header {
+    @apply mb-4;
+
+    li {
+      @apply mb-2;
+
+      a {
+        @apply text-secondary;
+
+        &:hover {
+          @apply underline;
+        }
+      }
+    }
+  }
+
+  .picker-footer {
+    @apply my-4;
+  }
+}
+
+.data-picker {
+  @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;
+
+  a:hover {
+    @apply underline text-secondary;
+  }
+
+  &.picker-multiple {
+    @apply block;
+  }
+}
+
+.data-picker.picker-single .picker-values:not(:empty) + .picker-prompt {
+  @apply hidden;
+}

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

@@ -0,0 +1,35 @@
+.main {
+  [id*="dropdown-menu"] {
+    @apply mx-0 py-0;
+
+    &[aria-hidden="true"] {
+      @apply hidden;
+    }
+  }
+
+  .dropdown__trigger {
+    @apply flex underline p-0;
+  }
+
+  .dropdown {
+    @apply divide-y divide-gray-3 z-20;
+
+    &.button {
+      @apply z-10;
+    }
+  }
+
+  #processes {
+    button.dropdown {
+      @apply divide-y divide-gray-3 z-20 relative py-1 px-3 bg-secondary text-white;
+
+      &.button {
+        @apply z-10;
+      }
+
+      svg {
+        @apply fill-white p-0 ml-2;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,94 @@
+.filters__section {
+  @apply flex gap-x-6 items-center mb-8;
+
+  & > .fcell {
+    &.search {
+      @apply w-full relative;
+    }
+  }
+
+  .dropdown .is-dropdown-submenu a {
+    @apply w-full inline-block;
+  }
+
+  .dropdown .is-dropdown-submenu li {
+    @apply w-full relative;
+  }
+
+  .dropdown {
+    @apply relative p-0 bg-transparent border-0;
+  }
+
+  .button,
+  .input-group {
+    @apply mb-0;
+  }
+
+  .input-group {
+    @apply relative;
+
+    [type="search"] {
+      @apply border-0 shadow-none rounded w-full py-1 px-4;
+    }
+  }
+
+  .input-group-button {
+    @apply absolute right-4 top-0 h-full top-1;
+  }
+
+  .dropdown.menu {
+    z-index: 5;
+
+    li {
+      @apply p-0;
+    }
+
+    .button {
+      @apply drop-shadow-none;
+    }
+
+    & > li.is-dropdown-submenu-parent > a {
+      @apply px-4 py-1 text-white bg-secondary flex items-center gap-x-2;
+
+      &:hover {
+        @apply text-white bg-secondary;
+      }
+    }
+
+    li.is-active > a,
+    li.is-active li.is-submenu-item > a:hover {
+      @apply text-white bg-secondary;
+    }
+
+    .dropdown-filter-icon {
+      @apply fill-white w-5 h-5 p-0;
+    }
+  }
+}
+
+.filter-status {
+  @apply relative w-full mt-2;
+
+  .label {
+    @apply font-semibold mt-2;
+
+    .type-icon {
+      @apply align-top;
+    }
+
+    .action-icon {
+      span {
+        @apply ml-1;
+      }
+
+      &.action-icon--remove {
+        color: #e66a5d;
+        margin-left: 0.3rem;
+
+        &:hover {
+          color: #e66a5d;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,81 @@
+.layout-content {
+  .form__wrapper {
+    @apply pt-0;
+
+    input[type="date"],
+    input[type="datetime-local"],
+    input[type="email"],
+    input[type="month"],
+    input[type="number"],
+    input[type="password"],
+    input[type="search"],
+    input[type="tel"],
+    input[type="text"],
+    input[type="time"],
+    input[type="url"],
+    input[type="week"],
+    select,
+    textarea {
+      @apply mt-0;
+    }
+
+    & label:not(&-checkbox-label),
+    &-block label:not(&-checkbox-label) {
+      @apply text-sm;
+    }
+
+    .help-text {
+      @apply mt-1;
+    }
+
+    .row .columns,
+    .row.column {
+      @apply mb-4;
+    }
+  }
+
+  .form-defaults {
+    select.chosen-select {
+      @apply bg-none;
+    }
+
+    select#component_step_settings_1_default_sort_order {
+      @apply block my-2;
+    }
+
+    textarea#component_step_settings_1_automatic_hashtags,
+    textarea#component_step_settings_1_suggested_hashtags {
+      @apply block w-full;
+    }
+
+    #choose-template label {
+      @apply block my-2;
+    }
+  }
+
+  #q_with_participatory_space {
+    @apply h-9;
+  }
+}
+
+.questionnaire-question {
+  button[aria-expanded="true"] {
+    .icon-collapse {
+      @apply block;
+    }
+
+    .icon-expand {
+      @apply hidden;
+    }
+  }
+
+  button[aria-expanded="false"] {
+    .icon-collapse {
+      @apply hidden;
+    }
+
+    .icon-expand {
+      @apply block;
+    }
+  }
+}

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

@@ -0,0 +1,122 @@
+.item__edit {
+  @apply grid grid-cols-1 md:grid-cols-[20%_80%] mb-8;
+
+  &-form {
+    .card {
+      @apply rounded bg-white border-background border fill-secondary;
+    }
+
+    .card-section {
+      @apply px-0 pb-0;
+    }
+
+    .row {
+      @apply px-4;
+    }
+
+    .card-divider {
+      @apply p-4 mt-0 pb-2 rounded-none;
+
+      *:not(.button--title) > svg {
+        @apply inline-block w-6 h-6;
+      }
+    }
+
+    .card-divider-button {
+      @apply flex items-center justify-start w-full pb-3;
+
+      svg {
+        @apply fill-secondary;
+      }
+
+      &[aria-expanded="true"] {
+        @apply border-solid border-b border-gray w-full rounded-none;
+
+        svg {
+          @apply rotate-90 transition-transform;
+        }
+      }
+    }
+
+    .card-title {
+      @apply font-semibold text-md text-left inline-block text-secondary;
+    }
+
+    .label--tabs {
+      @apply mb-2;
+    }
+
+    label {
+      @apply text-gray-2 text-sm;
+    }
+
+    .form {
+      [type="text"],
+      [type="password"],
+      [type="date"],
+      [type="datetime"],
+      [type="datetime-local"],
+      [type="month"],
+      [type="week"],
+      [type="email"],
+      [type="number"],
+      [type="search"],
+      [type="tel"],
+      [type="time"],
+      [type="url"],
+      [type="color"] {
+        @apply shadow-none bg-background-2 text-md h-[40px];
+      }
+
+      textarea {
+        @apply shadow-none bg-background-2 text-md;
+      }
+
+      .editor-container .editor-input .ProseMirror {
+        @apply bg-background-2;
+      }
+
+      &.edit_content_block {
+        .tabs-content {
+          @apply mb-2;
+        }
+      }
+    }
+  }
+
+  &-menu {
+    @apply pr-4;
+
+    &-anchor {
+      @apply block underline mb-3 text-secondary text-sm;
+    }
+
+    &-title {
+      @apply text-black font-semibold mb-3;
+    }
+
+    &-sticky {
+      @apply sticky top-0;
+    }
+  }
+
+  &-sticky {
+    @apply w-full fixed left-0 bottom-0 bg-gray-2 border-t border-white;
+
+    &-container {
+      @apply px-8 py-4 flex gap-x-4 justify-end;
+
+      .button {
+        @apply bg-white text-secondary;
+      }
+    }
+  }
+
+  .label--tabs {
+    @apply mb-2;
+  }
+}
+
+.item__edit-1col {
+  @apply grid grid-cols-[80%_20%];
+}

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

@@ -0,0 +1,69 @@
+.item_show__wrapper {
+  @apply bg-white p-8;
+}
+
+.item_show__header {
+  @apply flex items-center pb-4 border-b border-gray mb-4 gap-x-2;
+
+  > svg {
+    @apply w-4 h-4;
+  }
+
+  &-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;
+    }
+  }
+}
+
+.item_show__content {
+  @apply grid grid-cols-1 md:grid-cols-[70%_30%];
+
+  &-activity {
+    @apply pr-8;
+  }
+
+  &-aside {
+    @apply h-full border-l border-gray pl-8;
+  }
+
+  .card {
+    @apply mb-6;
+  }
+
+  .card-section {
+    @apply p-6;
+  }
+
+  &-title {
+    @apply text-lg font-semibold text-black mb-6;
+  }
+
+  &-menu {
+    li {
+      @apply flex items-center gap-x-2 pb-3;
+
+      svg {
+        @apply w-4 h-4 fill-gray;
+      }
+
+      a {
+        @apply text-md font-semibold flex items-center gap-x-4 w-full text-secondary;
+
+        &:hover span {
+          @apply no-underline;
+        }
+
+        span {
+          @apply ml-auto;
+        }
+      }
+
+      &:not(:last-child) {
+        @apply border-b border-gray mb-3;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,79 @@
+html {
+  @apply h-full;
+}
+
+body {
+  @apply flex flex-col min-h-screen;
+}
+
+.main {
+  @apply grow flex flex-col;
+
+  & > .row {
+    @apply w-full md:flex grow;
+  }
+}
+
+.layout-wrapper {
+  @apply grow flex flex-col;
+}
+
+.layout-nav {
+  @apply max-w-[340px] bg-gray-2;
+}
+
+.layout-content {
+  @apply flex-grow min-h-max bg-gray-5;
+
+  table svg {
+    @apply fill-current inline-block;
+  }
+
+  &__container {
+    @apply p-8 pb-24 m-0 min-h-max;
+  }
+
+  &__container-sidebar {
+    @apply pb-24 m-0 min-h-max;
+  }
+
+  .hide {
+    @apply hidden;
+  }
+
+  .grid-x.grid-margin-x {
+    @apply mb-4;
+
+    .card-section {
+      @apply p-4;
+    }
+  }
+
+  .callout {
+    @apply mb-4;
+  }
+}
+
+.container {
+  @apply p-2 md:p-8 m-0;
+}
+
+.main {
+  .large-12,
+  .medium-12,
+  .small-12 {
+    @apply w-full;
+  }
+
+  .large-6,
+  .medium-6,
+  .small-6 {
+    @apply w-3/4;
+  }
+
+  .large-3,
+  .medium-3,
+  .small-3 {
+    @apply w-1/4;
+  }
+}