decidim-theme 0.1.4

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

@@ -0,0 +1,23 @@
+.home-section:nth-of-type(2n + 1) {
+  background-color: white;
+}
+
+.hero {
+  height: 90vh;
+  min-height: 70vh;
+  max-height: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  @include breakpoint(small only) {
+    height: 70vh;
+  }
+}
+
+.hero-heading {
+  text-align: left;
+  margin-bottom: 0;
+}
+.home-section.upcoming-meetings .icon--datetime {
+  display: none;
+}

data/app/packs/stylesheets/decidim/theme/reset/_horizontal-tabs.scss

@@ -0,0 +1,130 @@
+// name specific
+#profile-tabs {
+  // Override foundation
+  &.tabs {
+    background: transparent;
+    border: 0;
+    display: flex;
+    justify-content: stretch;
+    border-bottom: $border;
+    margin-bottom: $global-margin;
+    position: relative;
+    &::before {
+      width: 100%;
+      height: 3px;
+      background-color: var(--grey2);
+      position: absolute;
+      bottom: 0px;
+    }
+    .tabs-title {
+      float: none;
+      flex: 1;
+      &.is-active {
+        a {
+          @extend .body-4;
+          background: transparent;
+          color: var(--primary);
+          background: transparent;
+          font-weight: normal;
+          border-bottom: 3px solid var(--primary);
+          padding-left: 1rem;
+          padding-right: 1rem;
+          &:hover,
+          &:focus {
+            text-decoration: none !important;
+          }
+        }
+      }
+
+      a {
+        color: var(--emphasis-low);
+        padding: 1rem 0.625rem 1.1875rem 0.625rem;
+        position: relative;
+        text-align: center;
+        @extend .body-4;
+
+        &:focus,
+        &:hover,
+        &[aria-selected="true"] {
+          background: transparent;
+          color: var(--primary);
+          font-weight: normal;
+          border-bottom: 3px solid var(--primary);
+          text-decoration: none !important;
+        }
+
+        &::after {
+          display: block;
+          content: attr(title);
+          font-weight: bold;
+          height: 0;
+          overflow: hidden;
+          visibility: hidden;
+        }
+      }
+    }
+  }
+}
+
+// Make the connection between the title and the content
+[data-tabs-content="profile-tabs"] {
+  border-top: 0;
+  background: transparent;
+  color: inherit;
+  transition: all 0.5s ease;
+}
+
+.responsive-tab-block {
+  @media only screen and (max-width: 639px) {
+    overflow: hidden;
+    height: 44px;
+
+    & > ul.tabs {
+      flex-direction: column;
+
+      & > li {
+        flex: 0 0 auto;
+
+        &.is-active {
+          -webkit-box-ordinal-group: -1; // fixes older Safari issues
+          order: -1;
+
+          &::before {
+            display: block;
+            content: " ";
+            font-weight: normal;
+            float: right;
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-top-color: var(--emphasis-high) !important;
+            transform: translateY(6px);
+            margin-top: 20px;
+          }
+
+          & > a:focus {
+            outline: 0 !important;
+          }
+        }
+
+        & > a {
+          border-bottom: 3px solid transparent;
+          color: green;
+
+          &:focus {
+            outline: 0 !important;
+          }
+        }
+      }
+    }
+
+    &.expanded {
+      height: auto;
+
+      & > ul.tabs > li.is-active::before {
+        transform: translateY(6px) rotate(180deg);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+.icon--datetime {
+  display: none;
+}

data/app/packs/stylesheets/decidim/theme/reset/_inline-filters.scss

@@ -0,0 +1,77 @@
+.inline-filters {
+  @include flexgap($global-margin * 2);
+  width: 41.7%;
+  // Override gap display property
+  display: inline-flex;
+  justify-content: space-between;
+  text-align: left;
+
+  label {
+    width: 100%;
+    display: flex;
+    align-items: baseline;
+
+    @include flexgap($global-margin * 0.5);
+
+    span {
+      white-space: nowrap;
+      @extend .mini-title;
+      width: 25%;
+      display: inline-block;
+    }
+  }
+
+  $dropdown-width: 12rem;
+
+  button[data-toggle] {
+    @extend select;
+    color: var(--emphasis-med);
+    margin: 0;
+    min-width: $dropdown-width;
+    width: 75%;
+    text-align: left;
+    align-items: center;
+    min-height: 35.58px;
+    box-shadow: unset;
+    &.hover {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  .dropdown-pane {
+    padding: 0;
+    background-color: $white;
+    width: calc(31.275% - 4rem);
+    min-width: $dropdown-width;
+
+    li {
+      a {
+        display: block;
+        padding: 1rem;
+        color: var(--emphasis-med);
+        text-decoration: none;
+        &:hover {
+          text-decoration: none;
+          color: var(--primary);
+        }
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--grey2);
+      }
+
+      &:hover {
+        cursor: pointer;
+        color: var(--primary);
+        background-color: var(--primary-10);
+      }
+    }
+
+    &.is-open {
+      margin-top: -1px;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+}

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

@@ -0,0 +1,79 @@
+// Foundation for Sites
+// https://get.foundation
+// Licensed under MIT Open Source
+
+////
+/// @group label
+////
+
+/// Default background color for labels.
+/// @type Color
+$label-background: $primary-color;
+
+/// Default text color for labels.
+/// @type Color
+$label-color: $white;
+
+/// Alternate text color for labels.
+/// @type Color
+$label-color-alt: $black;
+
+/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+/// @type Map
+$label-palette: $foundation-palette;
+
+/// Default font size for labels.
+/// @type Number
+$label-font-size: 0.8rem;
+
+/// Default padding inside labels.
+/// @type Number
+$label-padding: 0.33333rem 0.5rem;
+
+/// Default radius of labels.
+/// @type Number
+$label-radius: 40px;
+
+/// Generates base styles for a label.
+@mixin label {
+  display: inline-block;
+  padding: $label-padding;
+  border-radius: $label-radius;
+
+  font-size: $label-font-size;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: default;
+}
+
+.label {
+  @include label;
+
+  background: var(--grey-2);
+  color: var(--emphasis-med);
+
+  &.primary,
+  &.secondary,
+  &.success,
+  &.warning,
+  &.danger {
+    color: var(--white);
+  }
+}
+.label.primary,
+.label.secondary,
+.label--primary {
+  background: var(--primary);
+}
+.label.success,
+.label--success {
+  background-color: var(--green);
+}
+.label.warning,
+.label--warning {
+  background-color: var(--yellow);
+}
+.label.danger,
+.label--danger {
+  background-color: var(--red);
+}

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

@@ -0,0 +1,53 @@
+// Foundation for Sites
+// https://get.foundation
+// Licensed under MIT Open Source
+
+////
+/// @group forms
+////
+
+/// Color for form labels.
+/// @type Color
+$form-label-color: $black;
+
+/// Font size for form labels.
+/// @type Number
+$form-label-font-size: rem-calc(14);
+
+/// Font weight for form labels.
+/// @type Keyword
+$form-label-font-weight: $global-weight-normal;
+
+/// Line height for form labels. The higher the number, the more space between the label and its input field.
+/// @type Number
+$form-label-line-height: 1.8;
+
+@mixin form-label {
+  display: block;
+  margin: 0;
+  margin-bottom: 0;
+  &:not(:first-child) {
+    margin-top: 0.5rem;
+  }
+  color: var(--emphasis-high);
+  &,
+  & > * {
+    @extend .body-5;
+  }
+}
+
+@mixin form-label-middle {
+  $input-border-width: get-border-value($input-border, width);
+
+  margin: 0 0 $form-spacing;
+  line-height: $global-lineheight;
+  padding: ($form-spacing * 0.5 + rem-calc($input-border-width)) 0;
+}
+
+label {
+  @include form-label;
+
+  &.middle {
+    @include form-label-middle;
+  }
+}

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

@@ -0,0 +1,82 @@
+.wrapper {
+  padding: 1.5rem 1rem;
+  position: relative;
+
+  @include breakpoint(medium) {
+    padding: 3rem 1.5rem;
+  }
+
+  @include breakpoint(large) {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+}
+
+.wrapper-mini {
+  padding: 1.2rem 1rem 0;
+  position: relative;
+
+  @include breakpoint(medium) {
+    padding: 2rem 1.5rem 0;
+  }
+
+  @include breakpoint(large) {
+    padding: 3rem 4rem 0;
+  }
+}
+
+.wrapper--inner {
+  background: var(--grey1);
+  padding-top: 1rem;
+}
+
+//Flexbox sticky footer
+html {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  min-height: 100%;
+
+  @include breakpoint(smallmedium down) {
+    background-color: var(--grey1);
+  }
+}
+
+.footer-separator {
+  flex-grow: 1;
+}
+
+//fixes for off-canvas wrappers
+.off-canvas-wrapper {
+  background-color: var(--grey1);
+}
+
+.off-canvas-wrapper,
+.off-canvas-wrapper-inner,
+.off-canvas-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.off-canvas {
+  background-color: var(--grey1);
+
+  .close-button {
+    color: var(--emphasis-med) !important;
+    padding: 0.3rem 0.6rem;
+    margin-right: -0.5rem;
+  }
+}
+
+.translation-bar {
+  a.button {
+    margin-bottom: 0;
+    margin-top: -4px;
+    margin-right: 5px;
+  }
+}

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

@@ -0,0 +1,38 @@
+.lines-breadcrumb {
+  margin-bottom: 2rem;
+
+  .breadcrumb--separator {
+    color: var(--emphasis-lowest);
+    padding: 0 0.25rem;
+  }
+
+  div {
+    display: inline-block;
+  }
+
+  a {
+    font-weight: normal;
+    @extend .body-4;
+    @extend .body-4-link;
+    color: var(--emphasis-low);
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+      color: var(--primary);
+      outline: unset;
+      outline-offset: 0;
+    }
+  }
+
+  ul {
+    list-style: none;
+    margin-left: 0;
+  }
+
+  .percentage {
+    color: var(--emphasis-lowest);
+    @extend .body-4;
+    padding-left: 0.15rem;
+    display: inline-block;
+  }
+}

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

@@ -0,0 +1,3 @@
+.social-register {
+  display: flex;
+}

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

@@ -0,0 +1,28 @@
+.logo-wrapper span {
+  color: var(--emphasis-high);
+  font-weight: var(--font-weight-bold);
+  font-size: 26px;
+  display: inline-block;
+  text-align: left;
+  line-height: 1.2em;
+  position: relative;
+  padding-left: 0;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.logo-wrapper img {
+  max-height:70px;
+}
+
+
+.logo-wrapper span::before {
+  content: none;
+  display: none;
+  position: static;
+  border-left: unset;
+  height: 0;
+  top: 0;
+  left: inherit;
+}

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

@@ -0,0 +1,96 @@
+$container-bg: $white;
+$container-border: $border;
+$container-shadow: 0 2px 7px var(--black-6);
+$container-padding-x: rem-calc(22);
+$container-padding-y: rem-calc(24);
+$container-padding-2x: rem-calc(32);
+$container-padding-2y: rem-calc(34);
+
+/* Main container */
+
+.main-container {
+  background: $container-bg;
+  border: $container-border;
+
+  &.tabbed-container {
+    border: 0;
+  }
+}
+
+.main-container__content {
+  padding: $container-padding-y $container-padding-x;
+
+  @include breakpoint(medium) {
+    padding: $container-padding-2y $container-padding-2x;
+  }
+}
+
+/* Main container side panel */
+
+.main-container--side-panel {
+  @include breakpoint(medium) {
+    display: flex;
+  }
+}
+
+.side-panel {
+  background-color: transparent;
+  border-width: 0;
+  border-color: transparent;
+  @include breakpoint(medium) {
+    border-bottom: 0;
+    border-right: unset;
+  }
+}
+.tabs {
+  background-color: transparent;
+}
+
+.tabs-content {
+  border: 0 !important;
+  padding: 0;
+}
+
+.side-panel__tabs {
+  border: none;
+
+  .tabs-title {
+    border-bottom: $border;
+    padding: $global-padding;
+    &:last-of-type {
+      @include breakpoint(medium) {
+        margin-bottom: rem-calc(64);
+      }
+    }
+
+    > [role="tab"],
+    > a {
+      @extend .body-4;
+      color: var(--emphasis-med);
+      border-radius: $global-radius;
+      overflow: hidden;
+      &:hover,
+      &:focus {
+        color: var(--primary);
+        box-shadow: none;
+        background: var(--primary-10);
+        text-decoration: none !important;
+      }
+    }
+
+    &.is-active > [role="tab"],
+    &.is-active > a {
+      color: var(--primary);
+      box-shadow: none;
+      background: var(--primary-10);
+    }
+  }
+}
+
+.floating-helper__layout {
+  z-index: 1000;
+}
+
+.floating-helper__trigger {
+  position: fixed !important;
+}

data/app/packs/stylesheets/decidim/theme/reset/_metric-chart.scss

@@ -0,0 +1,25 @@
+.areachart.metric-chart {
+  svg {
+    max-height: rem-calc(120);
+  }
+  .circle,
+  .line,
+  .area {
+    display: none !important;
+  }
+  .title {
+    color: var(--emphasis-low);
+    @extend .body-5;
+    letter-spacing: normal;
+    text-transform: uppercase;
+    font-weight: 400;
+    letter-spacing: 0.03em;
+    transform: translateY(83px);
+  }
+  .sum {
+    @extend .heading-3;
+    @extend .heading-3-bold;
+    font-size: 4rem;
+    fill: var(--emphasis-med);
+  }
+}