decidim-theme 0.1.4

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

@@ -0,0 +1,317 @@
+$nav-border-width: 3px;
+
+.process-nav {
+  position: relative;
+  background-color: var(--white);
+  padding: 0.75rem 0.5rem;
+  box-shadow: unset;
+  @include breakpoint(small only) {
+    padding: 0;
+  }
+
+  &::after {
+    display: none;
+  }
+
+  ul {
+    margin: 0;
+    list-style: none;
+  }
+
+  .about-link {
+    font-size: 80%;
+  }
+
+  @include breakpoint(medium) {
+    padding: 0;
+
+    ul {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      justify-content: space-between;
+      flex-grow: 1;
+    }
+
+    ul::-webkit-scrollbar {
+      display: none;
+    }
+
+    ul::after {
+      display: inline-block;
+      flex-grow: 1;
+      content: "";
+    }
+
+    li {
+      flex: 1;
+      align-items: center;
+      flex-grow: 1;
+      display: flex;
+      padding: 0;
+    }
+
+    .about-link {
+      float: right;
+      margin-right: 0;
+      margin-left: auto;
+    }
+  }
+}
+
+.process-nav__trigger {
+  display: block;
+  width: 100%;
+  text-align: left;
+  position: relative;
+}
+
+.process-nav__trigger__icon {
+  position: absolute;
+  right: 0.5rem;
+  top: 0.55rem;
+}
+
+.process-nav__content {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  @include breakpoint(medium down) {
+    display: none;
+
+    &.is-active {
+      display: block;
+    }
+  }
+}
+
+.process-nav__content li {
+  position: relative;
+  a {
+    display: block;
+    flex: 1;
+    padding: rem-calc(16) rem-calc(10) calc(rem-calc(16) + rem-calc(3px)) 1rem;
+    @include breakpoint(large) {
+      padding-left: rem-calc(10);
+    }
+    text-align: left;
+    color: var(--emphasis-low);
+    font-size: 16px;
+    text-transform: none;
+    @include breakpoint(large) {
+      text-align: center;
+    }
+    &:hover,
+    &:focus {
+      color: var(--primary);
+      text-decoration: none;
+    }
+    &::after {
+      display: none;
+    }
+    @include breakpoint(small only) {
+      &::after {
+        display: block;
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 3px;
+        width: 100%;
+        background-color: var(--grey2);
+        z-index: 1;
+      }
+      &:hover,
+      &:focus {
+        &:after {
+          background-color: var(--primary);
+        }
+      }
+    }
+  }
+
+  @include breakpoint(small medium down) {
+    margin-top: 0;
+  }
+
+  &.is-active {
+    box-shadow: none;
+    display: flex;
+
+    & a,
+    & a:hover,
+    & a:focus {
+      color: var(--primary);
+      text-decoration: none;
+      &:after {
+        display: none;
+      }
+      @include breakpoint(small only) {
+        &::after {
+          display: block;
+          content: "";
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          height: 3px;
+          width: 100%;
+          background-color: var(--grey2);
+          z-index: 1;
+        }
+      }
+    }
+  }
+}
+
+.process-nav__more {
+  @extend .btn--nav-more;
+
+  &:hover,
+  &:focus {
+    background: var(--primary);
+    color: var(--on-primary);
+    i {
+      background-color: var(--on-primary);
+    }
+  }
+  i {
+    @include square(5px);
+
+    border-radius: 100%;
+    background-color: var(--on-primary);
+    display: inline-block;
+    margin-top: 5px;
+    align-items: center;
+    vertical-align: middle;
+    margin-bottom: 0.25rem;
+
+    &:not(:last-child) {
+      margin-right: 0.1rem;
+    }
+  }
+}
+
+.process-nav__hidden-content.dropdown-pane {
+  background-color: var(--white);
+  box-shadow: var(--card-shadow);
+  padding: 0;
+  top: 0px !important;
+  & > ul {
+    padding-top: $global-padding * 0.5;
+    padding-left: 0;
+    display: flex;
+    flex-direction: column;
+    border-top: var(--divider-border);
+    justify-content: flex-start;
+    align-items: flex-start;
+    text-align: left;
+
+    &:after {
+      display: none;
+    }
+
+    & > li {
+      width: 100%;
+      padding: 0;
+      margin: 0;
+      a,
+      a:hover {
+        text-align: left;
+        &::after {
+          display: block;
+          content: "";
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          height: 3px;
+          width: 100%;
+          background-color: var(--grey2);
+          z-index: 1;
+        }
+      }
+    }
+  }
+}
+
+.process-nav__hidden-content__more {
+  @extend .process-nav__more;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  text-align: right;
+  width: 100%;
+  min-height: 48px;
+  background-color: transparent;
+  border-bottom: $border;
+  padding-top: 1.25rem;
+  padding-bottom: $card-padding-small;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+  &,
+  &:hover,
+  &:focus {
+    background-color: var(--white);
+    color: var(--primary);
+    i {
+      background-color: var(--primary);
+    }
+  }
+  i {
+    background-color: var(--primary);
+  }
+}
+
+.process-nav__link {
+  @extend .body-4;
+  @extend .body-4-medium;
+  @extend .body-4-link;
+  text-transform: initial;
+  color: var(--primary);
+  display: inline-flex;
+  align-items: center;
+  padding: 0.62rem 1rem;
+  &:hover,
+  &.active,
+  &:focus {
+    background: var(--primary-10);
+    text-decoration: none !important;
+  }
+
+  svg {
+    margin-right: 0.4em;
+    width: 25px;
+    height: 25px;
+    fill: var(--grey2);
+
+    .stroked-shape {
+      fill: none;
+      fill-opacity: 1;
+      stroke-width: 2.01957917;
+      stroke-miterlimit: 4;
+      stroke-dasharray: none;
+      stroke-dashoffset: 0;
+      stroke: $muted;
+    }
+  }
+
+  &.process-nav__hidden-content__more {
+    text-align: left;
+  }
+}
+
+@include breakpoint(medium) {
+  .process-nav__link.is-active {
+    color: var(--primary);
+
+    svg {
+      fill: var(--primary);
+
+      .stroked-shape {
+        stroke: var(--primary);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,89 @@
+// Foundation for Sites
+// https://get.foundation
+// Licensed under MIT Open Source
+$progress-radius: 40px;
+$progress-height: 1rem;
+$progress-background: var(--grey2);
+
+/// Adds styles for a progress bar container.
+@mixin ov-progress-container {
+  height: $progress-height;
+  margin-bottom: $progress-margin-bottom;
+  border-radius: $progress-radius;
+  background-color: var(--grey2);
+}
+
+/// Adds styles for the inner meter of a progress bar.
+@mixin ov-progress-meter {
+  position: relative;
+  display: block;
+  width: 0%;
+  height: 1rem;
+  background-color: var(--primary);
+  min-height: $progress-height;
+  &.progress-meter--minimum {
+    background-color: var(--grey2) !important;
+  }
+  @if has-value($progress-radius) {
+    border-radius: $progress-radius;
+  }
+}
+
+/// Adds styles for text in the progress meter.
+@mixin ov-progress-meter-text {
+  @include absolute-center;
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: bold;
+  color: var(--white);
+  white-space: nowrap;
+  transform: translate(-42%, -50%);
+  @if has-value($progress-radius) {
+    border-radius: $progress-radius;
+  }
+}
+
+// Progress bar
+
+.progress__bar {
+  .progress__bar__title .progress__bar__number {
+    color: var(--emphasis-low) !important;
+  }
+  .progress__bar__bar {
+    height: 1rem;
+    .progress__bar__bar--complete {
+      border-radius: $progress-radius;
+      background-color: $actions;
+      height: 1rem;
+    }
+
+    .progress__bar__bar--incomplete {
+      background-color: var(--grey2);
+      height: 1rem;
+      margin-left: 1px;
+      border-top-right-radius: $progress-radius;
+      border-bottom-right-radius: $progress-radius;
+    }
+  }
+
+  .progress {
+    @include ov-progress-container;
+  }
+  @each $name, $color in $foundation-palette {
+    &.#{$name} {
+      .progress-meter {
+        background-color: $color;
+      }
+    }
+  }
+}
+
+// Inner meter
+.progress-meter {
+  @include ov-progress-meter;
+}
+
+// Inner meter text
+.progress-meter-text {
+  @include ov-progress-meter-text;
+}

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

@@ -0,0 +1,47 @@
+//impact  project cards, higligted process, blog card, randomly add or
+//remove spaces here and there due to strange positioning that may not be due to css
+
+.ql-reset-decidim {
+  & > p {
+    @extend .body-4;
+    margin-bottom: rem-calc(32);
+
+    //Used at least in blog component
+    padding: 0 $card-padding;
+
+    //used in projects cards
+    &:only-child {
+      padding: 0;
+      margin: 0;
+    }
+  }
+}
+
+.ql-editor.ql-reset-decidim {
+  &:not(.card--post) {
+    & > p {
+      //Was used at least in help page but stopped working for some reason
+      padding: $card-padding 0;
+
+      //used in projects cards
+      &:only-child {
+        padding: 0;
+        margin: 0;
+      }
+    }
+  }
+}
+
+.card__content {
+  & > .ql-editor.ql-reset-decidim {
+    padding-top: 0;
+    padding-right: $card-padding;
+    padding-bottom: $card-padding;
+    padding-left: $card-padding;
+  }
+
+  > .card__header {
+    margin: 0;
+    padding-bottom: 0;
+  }
+}

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

@@ -0,0 +1,82 @@
+//Variables
+$order-border: $border;
+
+/* Results per page styles */
+.results-per-page {
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  z-index: 10;
+  .results-per-page__text {
+    @extend .body-4;
+    color: var(--emphasis-med);
+  }
+
+  a:hover {
+    color: var(--primary);
+    background: var(--primary-10);
+
+    text-decoration: none;
+  }
+
+  a:focus {
+    outline: var(--primary);
+  }
+}
+
+.results-per-page__dropdown {
+  transform: translateY(-4px);
+  z-index: 1;
+  .menu {
+    margin-top: 0;
+    .is-dropdown-submenu-parent > a {
+      padding: 1rem 0.5rem;
+      margin-left: 0.5rem;
+      margin-top: 0.25rem;
+    }
+  }
+}
+
+.results-per-page__dropdown--right {
+  margin-left: auto;
+}
+
+.results-per-page__action {
+  margin-left: auto;
+  justify-content: flex-end;
+
+  .button {
+    margin-bottom: 0;
+  }
+}
+
+.results-per-page__tabs {
+  display: inline-block;
+}
+
+.results-per-page__tab {
+  color: $muted;
+
+  &::after {
+    content: "";
+    display: inline-block;
+    height: 0.75em;
+    border-left: $border;
+    margin: 0 0.2em 0 0.5em;
+    vertical-align: middle;
+  }
+
+  &.is-active {
+    color: var(--primary);
+    background: var(--primary-10);
+  }
+
+  &:first-of-type {
+    padding-left: 0;
+  }
+
+  &:last-of-type::after {
+    border-left: none;
+  }
+}

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

@@ -0,0 +1,158 @@
+.result-view .result-meta .result-meta--data {
+  @extend .body-4;
+}
+.result-view .result-meta {
+  @extend .body-4;
+}
+
+.accountability {
+  .result-view .result-meta {
+    @extend .body-4;
+  }
+
+  .result-view .result-meta .result-meta--data {
+    @extend .body-4;
+  }
+
+  .intro {
+    ul {
+      margin-bottom: 1rem;
+    }
+
+    .progress-level {
+      @extend .card;
+      margin-bottom: 0;
+
+      p {
+        margin-bottom: 1rem;
+        display: inline-block;
+        margin-right: 0.5rem;
+        @extend .body-2;
+        @extend .body-2-semibold;
+        color: var(--emphasis-low);
+      }
+
+      .icon {
+        background: var(--grey2);
+        border-radius: 50%;
+        fill: white;
+        padding: 0.15rem;
+      }
+
+      .progress {
+        max-width: 85%;
+        margin-bottom: 0;
+      }
+
+      .progress-figure {
+        @extend .heading-2;
+        color: var(--emphasis-lowest);
+        margin-top: 2.25rem;
+      }
+    }
+  }
+
+  .scope-filters {
+    div {
+      @extend .mini-title;
+      margin-bottom: 0.5rem;
+    }
+
+    span {
+      margin-right: 0.5rem;
+    }
+
+    ul {
+      display: inline;
+    }
+
+    li.active {
+      background-color: var(--grey2);
+    }
+  }
+
+  .description {
+    margin-bottom: 1rem;
+  }
+
+  .title-action {
+    margin-bottom: 0.5rem;
+  }
+}
+
+.result-view {
+  .title {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+    flex-direction: column;
+
+    .icon {
+      fill: $secondary;
+      min-width: 1.5rem;
+      min-height: 1.5rem;
+      margin-bottom: 0.5rem;
+
+      @include breakpoint(medium) {
+        margin-right: 0.75rem;
+        margin-top: 0.5rem;
+      }
+    }
+
+    @include breakpoint(medium) {
+      flex-direction: row;
+    }
+  }
+
+  .progress-level {
+    background: $white;
+    border-radius: 4px;
+    padding: 1.5rem;
+    border: 1px solid var(--grey2);
+
+    .progress-label {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      margin-bottom: 0.5rem;
+
+      .progress-text {
+        @extend .body-2;
+        @extend .body-2-semibold;
+        color: var(--emphasis-low);
+      }
+
+      .progress-figure {
+        line-height: 1;
+        font-size: 2.25rem;
+        font-weight: 600;
+        margin-top: 2.25rem;
+      }
+    }
+  }
+
+  .result-description div {
+    margin-bottom: 1rem;
+  }
+
+  .result-meta {
+    margin-bottom: 0.5rem;
+
+    .result-meta--label {
+      font-weight: inherit;
+      @extend .mini-title;
+    }
+  }
+
+  hr {
+    width: 100%;
+    margin: 0 0 3rem;
+  }
+
+  .timeline {
+    .timeline__info {
+      background-color: transparent;
+      border: none;
+    }
+  }
+}