@madie/madie-design-system 1.0.0

package/styles/qppds/components/_button.scss

@@ -0,0 +1,292 @@
+@import '../settings/index';
+
+/* stylelint-disable selector-max-specificity */
+
+// Default / Primary Button
+.qpp-c-button,
+.qpp-c-button:visited,
+.qppds .qpp-c-button,
+.qppds .qpp-c-button:visited {
+  background-color: $blue-60;
+  border: 1px solid $blue-60;
+  border-radius: 3px;
+  box-sizing: border-box;
+  color: $white;
+  cursor: pointer;
+  display: inline-block;
+  font-family: $font-rubik;
+  font-size: $font-size-14;
+  font-weight: $font-medium;
+  letter-spacing: $letter-spacing-sm;
+  line-height: $line-height-xs;
+  padding: $spacing-12 $spacing-16;
+  text-align: center;
+  text-decoration: none;
+
+  &:hover,
+  &.qpp-c-button--hover {
+    background-color: $blue-70;
+    border: 1px solid $blue-70;
+    color: $white;
+  }
+
+  &:focus,
+  &.qpp-c-button--focus {
+    border: 1px solid $blue-70;
+    border-radius: 3px;
+    box-shadow: 0 0 0 4px $blue-10;
+    outline: none;
+    text-decoration: none;
+    color: $white;
+    padding: $spacing-12 $spacing-16;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  &:active,
+  &.qpp-c-button--active {
+    background-color: darken($blue-70, 3%);
+    border: 1px solid darken($blue-70, 3%);
+    color: $white;
+  }
+
+  &:disabled,
+  &.qpp-c-button--disabled {
+    background-color: $gray-10;
+    border: 1px solid $gray-10;
+    color: $gray-60;
+    pointer-events: none;
+  }
+
+  &.qpp-c-button--big {
+    padding: $spacing-16 $spacing-24;
+  }
+
+  &.qpp-c-button--text {
+    background-color: transparent;
+    border: 1px solid transparent;
+    padding: 1px;
+  }
+
+  // Secondary Button
+  &.qpp-c-button--secondary {
+    background-color: $white;
+    border: 1px solid $gray-10;
+    color: $gray-80;
+    font-size: $font-size-14;
+
+    &:hover,
+    &.qpp-c-button--hover {
+      background-color: $gray-04;
+      color: $gray-80;
+    }
+
+    &:active,
+    &.qpp-c-button--active {
+      background-color: darken($gray-04, 3%);
+      color: $gray-80;
+    }
+
+    &:disabled,
+    &.qpp-c-button--disabled {
+      background-color: $gray-10;
+      color: $gray-60;
+    }
+
+    &:focus,
+    &.qpp-c-button--focus {
+      border: 1px solid $blue-60;
+    }
+  }
+
+  // White Button
+  &.qpp-c-button--white {
+    background-color: $white;
+    border: 1px solid $white;
+    color: $gray-80;
+    font-size: $font-size-14;
+
+    &:hover,
+    &.qpp-c-button--hover {
+      border: 1px solid $gray-10;
+      background-color: $gray-10;
+      color: $gray-80;
+    }
+
+    &:active,
+    &.qpp-c-button--active {
+      background-color: darken($gray-10, 3%);
+      color: $gray-80;
+    }
+
+    &:focus,
+    &.qpp-c-button--focus {
+      border: 1px solid $blue-60;
+      box-shadow: 0 0 0 4px $blue-10;
+    }
+
+    &:disabled,
+    &.qpp-c-button--disabled {
+      background-color: $gray-10;
+      color: $gray-60;
+      border-color: $gray-10;
+    }
+
+    &.qpp-c-button--text {
+      background-color: transparent;
+      border: 1px solid transparent;
+      padding: 1px;
+    }
+  }
+
+  // Outline Button
+  &.qpp-c-button--outline {
+    background-color: transparent;
+    border: 1px solid $white;
+    color: $white;
+    font-size: $font-size-14;
+
+    &:disabled,
+    &.qpp-c-button--disabled {
+      background-color: $gray-10;
+      color: $gray-60;
+      border-color: $gray-10;
+    }
+
+    &:hover,
+    &.qpp-c-button--hover {
+      background-color: fade-out($black, 0.8);
+    }
+
+    &:active,
+    &.qpp-c-button--active {
+      background-color: fade-out($black, 0.7);
+    }
+
+    &:focus,
+    &.qpp-c-button--focus {
+      border: 1px solid $blue-60;
+      box-shadow: 0 0 0 4px $blue-10;
+    }
+  }
+
+  // Danger / Destructive Button
+  &.qpp-c-button--danger {
+    background-color: transparent;
+    border: 1px solid $red-60;
+    color: $red-60;
+    font-size: $font-size-14;
+
+    &:disabled,
+    &.qpp-c-button--disabled {
+      background-color: $gray-10;
+      border: 1px solid $gray-10;
+      color: $gray-60;
+    }
+
+    &:hover,
+    &.qpp-c-button--hover {
+      background-color: fade-out($red-50, 0.9);
+    }
+
+    &:active,
+    &.qpp-c-button--active {
+      background-color: fade-out($red-50, 0.85);
+    }
+
+    &:focus,
+    &.qpp-c-button--focus {
+      border: 1px solid $red-50;
+      box-shadow: 0 0 0 4px $red-10;
+      outline: none;
+      text-decoration: none;
+    }
+
+    &.qpp-c-button--text {
+      background-color: transparent;
+      border: 1px solid transparent;
+      padding: 1px;
+    }
+  }
+}
+
+.qpp-c-button.qpp-c-button--text,
+.qppds .qpp-c-button.qpp-c-button--text {
+  color: $blue-60;
+
+  &:disabled,
+  &.qpp-c-button--disabled {
+    color: $gray-60;
+  }
+
+  &:focus,
+  &.qpp-c-button--focus {
+    border: 1px solid $blue-60;
+    color: $blue-60;
+  }
+
+  &:hover,
+  &.qpp-c-button--hover {
+    color: $blue-70;
+  }
+
+  &.qpp-c-button--danger {
+    color: $red-50;
+
+    &:disabled,
+    &.qpp-c-button--disabled {
+      background-color: transparent;
+      color: $gray-60;
+    }
+
+    &:hover,
+    &.qpp-c-button--hover {
+      color: $red-60;
+    }
+
+    &:focus,
+    &.qpp-c-button--focus {
+      background-color: transparent;
+      border: 1px solid $red-50;
+    }
+  }
+
+  &.qpp-c-button--white {
+    color: $white;
+
+    &:disabled,
+    &.qpp-c-button--disabled {
+      background-color: transparent;
+      color: $gray-10;
+    }
+
+    &:hover,
+    &.qpp-c-button--hover {
+      color: $gray-10;
+    }
+
+    &:focus,
+    &.qpp-c-button--focus {
+      background-color: transparent;
+      border: 1px solid $blue-60;
+    }
+  }
+}
+
+// TODO: Text buttons (https://zeroheight.com/079543162/p/56ad70-button/t/17855d)
+
+.qpp-c-button > svg {
+  @include inline-icon-md;
+  height: 1rem;
+  width: 1rem;
+}
+
+.qpp-c-button--icon-before > svg {
+  margin-right: $spacing-8;
+}
+
+.qpp-c-button--icon-after > svg {
+  margin-left: $spacing-8;
+}
+
+/* stylelint-enable selector-max-specificity */

package/styles/qppds/components/_card.scss

@@ -0,0 +1,175 @@
+@import '../settings/index';
+
+.qpp-c-card {
+  flex-direction: column;
+  display: flex;
+  position: relative;
+
+  .qpp-c-card__content {
+    flex-direction: column;
+    display: flex;
+    position: relative;
+  }
+
+  .qpp-c-card__header {
+    border-top: 4px solid $blue-60;
+    box-shadow: none;
+    height: auto;
+    background: transparent;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    z-index: 0;
+    padding: 0;
+  }
+
+  .qpp-c-card__eyebrow {
+    color: $gray-80;
+    padding: $spacing-16 0 0;
+    margin: 0;
+    display: block;
+    order: -1;
+  }
+
+  .qpp-c-card__title {
+    color: $gray-80;
+    padding: $spacing-16 0 $spacing-8;
+    margin: 0;
+    font-weight: $font-regular;
+  }
+
+  .qpp-c-card__body {
+    display: block;
+    padding: 0 0 $spacing-8;
+    margin: 0;
+
+    p {
+      color: $gray-80;
+      font-size: $font-size-16;
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  .qpp-c-card__cta {
+    display: block;
+    margin: 0;
+    padding-top: rem(7px);
+    line-height: $line-height-xs;
+
+    .qpp-c-button {
+      margin: -1px;
+    }
+  }
+
+  .qpp-c-card__media {
+    display: block;
+    width: 100%;
+    order: -1;
+    padding: 0 0 $spacing-8;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    [role='img'] {
+      width: 100%;
+      height: 100%;
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      position: relative;
+    }
+  }
+
+  &.qpp-c-card--image {
+    .qpp-c-card__header {
+      border-top: 0;
+    }
+  }
+
+  &.qpp-c-card--flag {
+    flex-direction: row;
+
+    .qpp-c-card__media {
+      flex: 0 50%;
+      padding: 0 $spacing-24 0 0;
+    }
+
+    .qpp-c-card__content {
+      flex: 0 50%;
+    }
+  }
+
+  /* stylelint-disable max-nesting-depth */
+  @each $breakpoint in map-keys($breakpoints) {
+    $value: map-get($breakpoints, $breakpoint);
+
+    @media (min-width: $value) {
+      &.qpp-c-#{$breakpoint}-card--flag {
+        flex-direction: row;
+
+        .qpp-c-card__media {
+          flex: 0 50%;
+          padding: 0 $spacing-24 0 0;
+        }
+
+        .qpp-c-card__content {
+          flex: 0 50%;
+        }
+      }
+      &.qpp-c-#{$breakpoint}-card--default {
+        flex-direction: column;
+
+        .qpp-c-card__media {
+          flex: 0 1 auto;
+          padding: 0 0 $spacing-8;
+        }
+
+        .qpp-c-card__content {
+          flex: 0 1 auto;
+        }
+      }
+    }
+  }
+  /* stylelint-enable max-nesting-depth */
+
+  // "fixed image height" helper variants to match existing FE design.
+  // Required when using "background-image" cards, but not for img element media cards
+  &.qpp-c-card--small {
+    .qpp-c-card__media {
+      > img,
+      > [role='img'] {
+        height: 175px;
+      }
+    }
+
+    .qpp-c-card__title {
+      font-size: $font-size-18;
+
+      @media (min-width: $width-xs) {
+        font-size: $font-size-20;
+      }
+    }
+  }
+
+  &.qpp-c-card--medium {
+    .qpp-c-card__media {
+      > img,
+      > [role='img'] {
+        height: 220px;
+      }
+    }
+  }
+
+  &.qpp-c-card--large {
+    .qpp-c-card__media {
+      > img,
+      > [role='img'] {
+        height: 286px;
+      }
+    }
+  }
+}

package/styles/qppds/components/_dropdown.scss

@@ -0,0 +1,55 @@
+@import '../settings/index';
+
+.qpp-c-dropdown {
+  display: block;
+  border: 1px solid $gray-10;
+  border-radius: 3px;
+  color: $gray-80;
+  font-size: $font-size-14;
+  font-family: $font-rubik;
+  font-weight: $font-regular;
+  line-height: $line-height-xs;
+  background-color: $white;
+  box-sizing: border-box;
+  padding: $spacing-12 $spacing-40 $spacing-12 $spacing-16;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-size: $font-size-18 auto, 100%;
+  background-position: right $spacing-12 top 50%, 0 0;
+  background-repeat: no-repeat, repeat;
+  appearance: none;
+  -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
+  -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
+
+  &:hover,
+  &.qpp-c-dropdown--hover {
+    background-color: $gray-04;
+  }
+
+  &:focus,
+  &.qpp-c-dropdown--focus {
+    border: 1px solid $blue-60;
+    box-shadow: 0 0 0 4px $blue-10;
+    outline: none;
+    text-decoration: none;
+  }
+
+  &:disabled,
+  &.qpp-c-dropdown--disabled {
+    background-color: $gray-04;
+    color: $gray-60;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(113, 113, 113)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  }
+}
+
+.qpp-c-dropdown::-ms-expand {
+  display: none;
+}
+
+.qpp-c-dropdown::-ms-value {
+  background: none;
+  color: $gray-80;
+}
+
+.qpp-c-dropdown--big {
+  padding: $spacing-16 $spacing-40 $spacing-16 $spacing-16;
+}