decidim-theme 0.1.4

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

@@ -0,0 +1,173 @@
+// Foundation for Sites
+// https://get.foundation
+// Licensed under MIT Open Source
+
+////
+/// @group tooltip
+////
+
+/// Default cursor of the defined term.
+/// @type Keyword
+$has-tip-cursor: help;
+
+/// Default font weight of the defined term.
+/// @type Keyword | Number
+$has-tip-font-weight: $global-weight-bold;
+
+/// Default border bottom of the defined term.
+/// @type List
+$has-tip-border-bottom: 0px none transparent;
+
+/// Default color of the tooltip background.
+/// @type Color
+$tooltip-background-color: var(--grey2);
+
+/// Default color of the tooltip font.
+/// @type Color
+$tooltip-color: $white;
+
+/// Default padding of the tooltip background.
+/// @type Number
+$tooltip-padding: 0.75rem;
+
+/// Default max width for tooltips.
+/// @type Number
+$tooltip-max-width: 10rem;
+
+/// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.
+/// @type Number
+$tooltip-font-size: rem-calc(14);
+
+/// Default pip width for tooltips.
+/// @type Number
+$tooltip-pip-width: rem-calc(14);
+
+/// Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word.
+/// @type Number
+$tooltip-pip-height: $tooltip-pip-width * 0.866;
+
+/// Default radius for tooltips.
+/// @type Number
+$tooltip-radius: $global-radius;
+
+@mixin has-tip {
+  position: relative;
+  display: inline-block;
+
+  border-bottom: $has-tip-border-bottom;
+  font-weight: normal;
+  cursor: $has-tip-cursor;
+}
+
+@mixin tooltip {
+  position: absolute;
+  top: calc(100% + #{$tooltip-pip-height});
+  z-index: 1200;
+
+  max-width: $tooltip-max-width;
+  padding: $tooltip-padding;
+
+  border-radius: $tooltip-radius;
+  background-color: $tooltip-background-color;
+  @extend .body-5;
+
+  &::before {
+    position: absolute;
+  }
+
+  &.bottom {
+    &::before {
+      @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
+      bottom: 100%;
+    }
+
+    &.align-center::before {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  &.top {
+    &::before {
+      @include css-triangle(
+        $tooltip-pip-width,
+        $tooltip-background-color,
+        down
+      );
+      top: 100%;
+      bottom: auto;
+    }
+
+    &.align-center::before {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  &.left {
+    &::before {
+      @include css-triangle(
+        $tooltip-pip-width,
+        $tooltip-background-color,
+        right
+      );
+      left: 100%;
+    }
+
+    &.align-center::before {
+      bottom: auto;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  &.right {
+    &::before {
+      @include css-triangle(
+        $tooltip-pip-width,
+        $tooltip-background-color,
+        left
+      );
+      right: 100%;
+      left: auto;
+    }
+
+    &.align-center::before {
+      bottom: auto;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  &.align-top::before {
+    bottom: auto;
+    top: 10%;
+  }
+
+  &.align-bottom::before {
+    bottom: 10%;
+    top: auto;
+  }
+
+  &.align-left::before {
+    left: 10%;
+    right: auto;
+  }
+
+  &.align-right::before {
+    left: 0;
+    right: 10%;
+  }
+}
+
+.has-tip {
+  @include has-tip;
+}
+
+.tooltip {
+  @include tooltip;
+
+  &.light.expanded .p-xs.flex--sbc .ml-s > div:last-child {
+    margin-top: 1.5rem;
+  }
+}

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

@@ -0,0 +1,283 @@
+/* Typography - Foundation overrides */
+
+button,
+input {
+  font-family: inherit;
+}
+
+a {
+  @extend .body-4;
+  @extend .body-4-link;
+}
+
+button {
+  &:focus {
+    outline: 0;
+  }
+}
+.heading1 {
+  @extend .heading-1;
+}
+
+.subheading1 {
+  @extend .heading-3;
+}
+
+.heading2 {
+  @extend .heading-2;
+}
+
+.heading3 {
+  @extend .heading-3;
+}
+
+.heading4 {
+  @extend .heading-4;
+}
+
+//not supposed to exist
+.heading5,
+.heading6,
+.heading-small {
+  @extend .body-1;
+}
+
+hr {
+  width: 50%;
+
+  &.reset {
+    width: 100%;
+    //TODO: Hide the unnecessary divider under assemblies title in assemblies page
+    border: 0;
+  }
+}
+
+/* New typographic styles */
+
+.section-heading {
+  @extend .body-2;
+  @extend .body-2-semibold;
+  color: var(--emphasis-med);
+  letter-spacing: inherit;
+  text-transform: none;
+  max-width: $global-width;
+  margin-right: auto;
+  &::before {
+    content: none;
+    display: none;
+    width: 0;
+    height: 0;
+    background-color: transparent;
+    margin-right: 0;
+    margin-bottom: 0;
+    vertical-align: inherit;
+  }
+
+  &.collapse {
+    margin: 0;
+  }
+
+  span {
+    font-weight: normal;
+  }
+}
+
+.mini-title {
+  color: var(--emphasis-lowest);
+  font-size: 14px;
+  letter-spacing: normal;
+  text-transform: uppercase;
+  font-weight: 400;
+  margin-bottom: 0;
+  letter-spacing: 0.03em;
+
+  &__strong {
+    color: var(--emphasis-low);
+    @extend .body-1;
+    @extend .body-1-semibold;
+  }
+
+  &__strong--highlight {
+    color: var(--emphasis-med);
+    @extend .body-1;
+  }
+}
+
+.data-title {
+  &__over {
+    @extend .body-5;
+  }
+
+  &__main {
+    @extend .body-5;
+  }
+
+  &__sub {
+    @extend .body-6;
+    @extend .body-6-caps;
+  }
+}
+
+.page-title-wrapper {
+  text-align: left;
+}
+
+.page-title {
+  margin-bottom: 3rem;
+
+  a:hover {
+    text-decoration: underline;
+  }
+}
+
+.text-highlight {
+  margin-bottom: 0;
+  color: $white;
+  text-shadow: none;
+
+  &.heading1 {
+    @extend .heading-1-bold;
+  }
+
+  > a {
+    color: var(--primary);
+
+    &:hover {
+      color: var(--primary-10);
+    }
+  }
+}
+
+// text status-color
+$map: map-merge(
+  $foundation-palette,
+  (
+    muted: $muted,
+  )
+);
+
+.text-primary {
+  color: var(--primary);
+}
+.bg-primary {
+  background-color: var(--primary-10);
+}
+.text-secondary {
+  color: var(--secondary);
+}
+.bg-secondary {
+  background-color: var(--secondary-10);
+}
+.text-alert {
+  color: var(--red);
+}
+.bg-alert {
+  background-color: var(--red);
+}
+.text-warning {
+  color: var(--yellow);
+}
+.bg-warning {
+  background-color: var(--yellow);
+}
+.text-success {
+  color: var(--green);
+}
+.bg-success {
+  background-color: var(--green);
+}
+
+.text-large {
+  font-size: 20px;
+}
+
+.text-medium {
+  @extend .body-5;
+}
+
+.text-small {
+  font-size: 16px;
+}
+
+.text-sm {
+  font-size: 16px;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+.text-muted {
+  color: var(--emphasis-lowest);
+}
+
+.text-ellipsis {
+  @include ellipsis();
+}
+
+.text-compact {
+  line-height: 1.2;
+}
+
+.word-wrapper {
+  display: inline-block;
+}
+
+/* HTML inline text elements. Modifiers color text */
+a,
+abbr,
+acronym,
+b,
+bdo,
+big,
+br,
+button,
+cite,
+code,
+dfn,
+em,
+i,
+img,
+input,
+kbd,
+label,
+map,
+object,
+q,
+samp,
+script,
+select,
+small,
+span,
+strong,
+sub,
+sup,
+textarea,
+time,
+tt,
+var {
+  @include modifiers(
+    color,
+    (
+      muted: var(--emphasis-lowest),
+    )
+  );
+}
+
+blockquote {
+  border-left-color: var(--emphasis-lowest);
+  padding-left: 0.5rem;
+}
+
+ul.no-bullet-indented,
+ol.no-bullet-indented {
+  list-style-type: none;
+}
+
+.external-link-indicator {
+  display: none;
+}

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

@@ -0,0 +1,140 @@
+@import "stylesheets/decidim/variables";
+
+.upload-modal {
+  .button {
+    margin: 0;
+  }
+
+  .dropzone-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: 1rem;
+
+    input[type="file"] {
+      display: none;
+    }
+
+    label {
+      background-color: $white;
+      margin: 1rem 0;
+      cursor: pointer;
+
+      &.is-dragover {
+        background-color: lighten($secondary, 50);
+      }
+
+      &.dropzone {
+        padding: 1rem;
+        text-align: center;
+        border-style: dashed;
+        border-color: $secondary;
+        border-width: 2px;
+        border-radius: 4px;
+
+        .form-error {
+          margin: 0;
+        }
+      }
+
+      &.disabled {
+        background-color: $light-gray;
+        cursor: not-allowed;
+        border-color: lighten($secondary, 50);
+
+        span {
+          color: #ccc;
+        }
+      }
+    }
+  }
+
+  .upload-items {
+    .upload-item {
+      input[type="text"] {
+        margin: 0;
+      }
+
+      .file-name-span {
+        overflow: hidden;
+      }
+
+      .progress-bar-wrapper {
+        .progress-bar-border {
+          height: 2rem;
+          border: 1px solid $primary;
+          box-sizing: border-box;
+          padding: 0;
+
+          .progress-bar {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            color: white;
+            background-color: $primary;
+            padding: 0 0.5rem;
+            height: 2rem;
+
+            &.filled {
+              justify-content: center;
+              width: 100% !important;
+            }
+          }
+        }
+      }
+    }
+
+    .remove-upload-item {
+      cursor: pointer;
+    }
+
+    .upload-errors {
+      .form-error {
+        margin: 0;
+      }
+    }
+  }
+}
+
+.dynamic-uploads {
+  display: flex;
+  flex-direction: column;
+  @extend .body-5;
+  @include breakpoint(large down) {
+    margin-bottom: 0.5rem;
+  }
+
+  .actions-wrapper {
+    display: flex;
+    justify-content: flex-start;
+    align-items: baseline;
+    margin-bottom: 1rem;
+
+    button.primary {
+      margin-right: 0.5rem;
+    }
+
+    button.remove-upload {
+      cursor: pointer;
+    }
+
+    &.titled {
+      flex-direction: column-reverse;
+    }
+
+    .active-uploads {
+      span.filename {
+        margin-right: 0.5rem;
+      }
+
+      span:last-child {
+        margin-right: 0.5rem;
+      }
+    }
+  }
+
+  &.with-title {
+    display: block;
+    margin: 0;
+  }
+}

data/app/packs/stylesheets/decidim/theme/reset/_user-form.scss

@@ -0,0 +1,15 @@
+.user-form {
+  input[type="text"],
+  input[type="email"],
+  input[type="password"] {
+    height: 3rem;
+  }
+
+  .button {
+    margin: 1.5rem 0;
+  }
+}
+
+.user-form__label {
+  font-weight: normal;
+}