decidim-theme 0.1.4

data/app/packs/stylesheets/decidim/theme/reset/_categories.scss

@@ -0,0 +1,130 @@
+.accountability {
+  .categories {
+    a:hover {
+      text-decoration: underline;
+    }
+
+    a:focus {
+      outline: $anchor-outline-focus;
+    }
+
+    .categories--header {
+      border-bottom-width: 0;
+      padding-bottom: 1rem;
+      margin-bottom: 1.5rem;
+
+      .icon--arrow-bottom {
+        fill: var(--emphasis-lowest);
+      }
+
+      span {
+        @extend .body-3;
+        color: var(--emphasis-lowest);
+      }
+    }
+
+    .categories--group {
+      margin-bottom: 2rem;
+
+      @include breakpoint(medium) {
+        display: flex;
+        margin-bottom: 4rem;
+      }
+
+      .category--title {
+        @extend .card;
+        margin-bottom: 0;
+        box-shadow: none;
+        min-height: auto;
+
+        @include breakpoint(medium) {
+          min-height: auto;
+        }
+        p {
+          margin-bottom: 1rem;
+        }
+        p > a {
+          @extend .heading-4;
+          @extend .heading-4-link;
+        }
+
+        .progress {
+          margin-bottom: 0.3rem;
+        }
+
+        .progress-info {
+          position: relative;
+          margin-bottom: 2rem;
+
+          .progress-figure {
+            display: inline-block;
+          }
+
+          .category--count {
+            position: absolute;
+            right: 0;
+            top: 0.5rem;
+            color: var(--emphasis-lowest);
+            @extend .body-4;
+          }
+        }
+      }
+
+      .card__link {
+        .category--line {
+          @extend .card;
+          box-shadow: none;
+          background-color: var(--grey2);
+          color: var(--primary);
+          min-height: 9rem;
+          position: relative;
+
+          strong {
+            font-weight: normal;
+            @extend .body-4;
+            @extend .body-4-link;
+            color: var(--primary);
+          }
+
+          .progress-figure {
+            position: absolute;
+            bottom: 1rem;
+            @extend .heading-4;
+          }
+
+          .category--count {
+            color: var(--primary);
+            position: absolute;
+            right: 1rem;
+            bottom: 1rem;
+            @extend .body-6;
+            opacity: 0.8;
+          }
+        }
+
+        &:hover {
+          .category--count {
+            color: var(--primary);
+          }
+
+          strong {
+            color: var(--primary);
+          }
+        }
+      }
+    }
+
+    .category--elements.active {
+      display: block !important;
+
+      .medium-4:first-child {
+        margin-top: 1rem;
+      }
+    }
+
+    .progress-figure {
+      @extend .heading-4;
+      color: var(--emphasis-lowest);
+    }
+  }
+}

data/app/packs/stylesheets/decidim/theme/reset/_collapsible.scss

@@ -0,0 +1,59 @@
+.collapsible-list {
+  &.is-filtered {
+    @for $i from 1 through 12 {
+      &.show-#{$i} {
+        .collapse:nth-of-type(n + #{$i + 1}),
+        > div:nth-of-type(n + #{$i + 1}) {
+          display: none;
+        }
+      }
+    }
+
+    .collapsible-list__see-more {
+      display: inline-block;
+
+      + .text-small {
+        padding-top: 0.15rem;
+        padding-left: 0.2rem;
+      }
+    }
+
+    .collapsible-list__see-less {
+      display: none;
+    }
+  }
+
+  .collapsible-list__see-less {
+    display: inline-block;
+    color: var(--secondary);
+  }
+
+  .collapsible-list__see-less:hover {
+    color: var(--secondary);
+    text-decoration: underline;
+  }
+
+  .collapsible-list__see-more {
+    display: none;
+    color: var(--secondary);
+  }
+
+  .collapsible-list__see-more:hover {
+    color: var(--secondary);
+    text-decoration: underline;
+  }
+
+  .card__text--paragraph {
+    text-decoration: none;
+    color: var(--emphasis-low) !important;
+  }
+
+  .card__text--paragraph:hover {
+    text-decoration: none;
+  }
+
+  > * {
+    display: inline-flex;
+    margin: 0 0 0.5rem;
+  }
+}

data/app/packs/stylesheets/decidim/theme/reset/_columns.scss

@@ -0,0 +1,8 @@
+.hero__container > .row > .small-centered {
+  text-align: left;
+  margin: initial;
+  margin-right: initial;
+  margin-right: initial;
+  float: initial;
+  padding-left: 0;
+}

data/app/packs/stylesheets/decidim/theme/reset/_comments.scss

@@ -0,0 +1,320 @@
+/* Variables */
+$comment-padding: 1rem;
+
+$comment-vote-up-color: $success;
+$comment-vote-down-color: $alert;
+
+$comment-nested-bg: $light-gray;
+$comment-nested-alt-bg: $white;
+
+$comment-form-bg: $light-gray;
+
+/* Comments */
+
+.comments {
+  padding-top: 3rem;
+  .dropdown.menu {
+    transform: translateY(0);
+  }
+}
+
+.comment-thread {
+  @extend .card;
+
+  .show-comment-replies {
+    display: none;
+  }
+
+  .hide-comment-replies {
+    display: inline;
+  }
+
+  .comment__hide {
+    float: left;
+    margin-bottom: 0;
+  }
+
+  .no-comments {
+    .show-comment-replies {
+      display: inline;
+    }
+
+    .hide-comment-replies,
+    .replies {
+      display: none;
+    }
+  }
+}
+
+.comment-thread__title {
+  font-weight: normal;
+  font-size: 90%;
+  text-transform: none;
+  color: $muted;
+}
+
+.comment__header {
+  padding: $comment-padding;
+  display: flex;
+
+  .comment__edited,
+  .comment__moderated,
+  .comment__deleted {
+    font-style: italic;
+    color: $muted;
+  }
+
+  &__context-menu {
+    position: relative;
+    margin-left: auto;
+
+    label {
+      transform: rotate(90deg);
+      cursor: pointer;
+    }
+
+    &__content {
+      list-style-type: none;
+      width: max-content;
+      min-width: 180px;
+      padding: 0;
+      margin: 0;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+      overflow: hidden;
+      position: absolute;
+      &-item {
+        width: 100%;
+        @extend .body-4;
+        @extend .body-4-link;
+        padding: $comment-padding * 0.5 $comment-padding;
+        display: flex;
+        align-items: baseline;
+        gap: $comment-padding;
+        cursor: pointer;
+
+        span {
+          line-height: $paragraph-lineheight;
+        }
+
+        .icon {
+          width: 14px;
+          height: 14px;
+          transform: translateY(2px);
+        }
+      }
+    }
+
+    &__content li:hover {
+      background-color: $light-gray-dark;
+    }
+
+    &__content li:not(:first-child) {
+      border-top: 1px solid $medium-gray;
+    }
+  }
+}
+
+.comment__content {
+  padding: 0 $comment-padding;
+  overflow-wrap: break-word;
+  hyphens: auto;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  p:empty {
+    display: none;
+  }
+}
+
+.comment__additionalreply {
+  padding: $comment-padding;
+  font-size: 90%;
+
+  @include clearfix;
+}
+
+.comment__footer {
+  padding: $comment-padding;
+  font-size: 90%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.comment--nested {
+  background: $comment-nested-bg;
+  margin: $comment-padding;
+  padding-bottom: 1px;
+
+  &.comment--nested--alt {
+    background: $comment-nested-alt-bg;
+  }
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+}
+
+.comment__actions {
+  display: flex;
+  flex-wrap: wrap;
+
+  > button,
+  a {
+    cursor: pointer;
+    margin-top: 0.5rem;
+  }
+}
+
+.comment__reply,
+.comment__reply[data-toggle] {
+  float: left;
+  color: $muted;
+  margin-right: 0.75rem;
+  margin-bottom: 0;
+
+  span {
+    margin-right: 0;
+  }
+
+  &.muted-link {
+    color: $anchor-color;
+
+    &:hover {
+      color: $anchor-color-hover;
+    }
+  }
+}
+
+.comment__votes {
+  float: right;
+  margin-top: 0.5rem;
+
+  form.button_to {
+    display: inline-block;
+  }
+}
+
+.comment__votes--up {
+  color: $muted;
+  cursor: pointer;
+  .icon {
+    color: $comment-vote-up-color;
+  }
+
+  &:hover,
+  &.is-vote-selected {
+    color: darken($comment-vote-up-color, 10);
+
+    .icon {
+      color: inherit;
+    }
+  }
+
+  &.is-vote-notselected {
+    color: $muted;
+    opacity: 0.3;
+
+    .icon {
+      color: inherit;
+    }
+  }
+}
+
+.comment__votes--down {
+  color: $muted;
+  padding-left: 0.3rem;
+  cursor: pointer;
+
+  .icon {
+    color: $comment-vote-down-color;
+  }
+
+  &:hover,
+  &.is-vote-selected {
+    color: darken($comment-vote-down-color, 10);
+
+    .icon {
+      color: inherit;
+    }
+  }
+
+  &.is-vote-notselected {
+    color: $muted;
+    opacity: 0.3;
+
+    .icon {
+      color: inherit;
+    }
+  }
+}
+
+.comment__quote {
+  border-left-width: 6px;
+  font-size: 80%;
+  background-color: rgba(0, 0, 0, 0.03);
+  padding: 1rem;
+  margin-bottom: 1rem;
+
+  > p:last-of-type {
+    margin-bottom: 0;
+  }
+
+  > br {
+    display: none;
+  }
+}
+
+/* Comment form */
+
+.comment__quote {
+  border-left-width: 6px;
+  font-size: 80%;
+  background-color: rgba(0, 0, 0, 0.03);
+  padding: 1rem;
+  margin-bottom: 1rem;
+
+  > p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.add-comment {
+  background: $comment-form-bg;
+  padding: $comment-padding;
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  .button {
+    margin-bottom: 0;
+  }
+}
+
+.add-comment--reply {
+  display: none;
+
+  &.is-active {
+    display: block;
+  }
+}
+
+/* Comments toggle */
+
+.comment {
+  &__text-is-open {
+    display: none;
+  }
+
+  &__is-open &__text-is-open {
+    display: inline;
+  }
+
+  &__is-open &__text-is-closed {
+    display: none;
+  }
+}

data/app/packs/stylesheets/decidim/theme/reset/_conversation.scss

@@ -0,0 +1,158 @@
+.conversation {
+  .conversation-header {
+    @extend .p-m;
+    justify-content: flex-start !important;
+    gap: 1rem;
+    border-bottom: $border;
+
+    h1 {
+      font-size: $global-font-size;
+      font-weight: normal;
+    }
+
+    img {
+      width: rem-calc(66);
+      height: rem-calc(66);
+      border-radius: 50%;
+      margin-left: 2.5rem;
+    }
+  }
+
+  .conversation-chat {
+    @include flex;
+    @include flex-align(left, top);
+    @include flexgap($global-margin);
+
+    @extend .mt-s;
+
+    width: 75%;
+
+    &.conversation-chat--offset {
+      @include flex-direction(row-reverse);
+      @include flexgap($global-margin, row-reverse);
+
+      margin-left: auto;
+    }
+
+    > :first-child {
+      flex-shrink: 0;
+    }
+
+    > div {
+      flex: 1;
+    }
+
+    .p-s {
+      > p:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    img {
+      width: rem-calc(33px);
+      height: rem-calc(33px);
+      border-radius: 50%;
+    }
+
+    .card {
+      margin-bottom: $global-margin * 0.5;
+      border: 1px solid var(--grey2);
+      box-shadow: none;
+    }
+
+    .card:last-of-type {
+      margin-bottom: 0;
+    }
+    .text-small {
+      @extend .body-6;
+    }
+  }
+
+  .conversation-reply {
+    @extend .mt-s;
+
+    width: 75%;
+    .button.secondary.light {
+      @extend .btn;
+      @extend .btn--primary;
+    }
+    &.conversation-reply--offset {
+      margin-left: auto;
+      .medium-offset-3 {
+        margin-left: 21%;
+        width: 79% !important;
+      }
+      h5.section-heading {
+        @extend .body-3;
+        @extend .body-3-medium;
+        margin-bottom: 1rem;
+      }
+    }
+  }
+}
+
+.conversations {
+  .card--list__item {
+    align-items: stretch;
+  }
+}
+
+.conversation-groups {
+  .title-action {
+    margin-bottom: 0.8rem;
+  }
+}
+
+// Conversations in user profile pages to full length
+.user-activity {
+  .conversation {
+    .conversation-reply {
+      width: 100%;
+    }
+  }
+}
+
+.disabled-tribute-element {
+  color: $muted;
+
+  span.disabled-tribute-element-info {
+    font-size: rem-calc(12);
+    font-weight: normal;
+    font-style: italic;
+  }
+}
+
+.tribute-container {
+  .disabled-tribute-element {
+    cursor: auto;
+    margin: -5px;
+    padding: 5px;
+    z-index: 10;
+  }
+}
+
+#user-conversations-add-modal {
+  .js-multiple-mentions-recipients label {
+    background: white;
+    padding: 0.5rem !important;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 0.2rem 0;
+    gap: 0.5rem;
+    cursor: pointer;
+    &:hover,
+    &:focus {
+      color: var(--primary);
+      background: var(--primary-10);
+      cursor: pointer;
+    }
+    .float-right {
+      font-size: 16px;
+      color: var(--primary);
+      align-self: baseline;
+      flex-grow: 2;
+      text-align: right;
+    }
+  }
+}