@madie/madie-design-system 1.0.0

package/styles/qppds/utilities/_height.scss

@@ -0,0 +1,38 @@
+$static-height-vals: (
+  10: 10px,
+  12: 12px,
+  15: 15px,
+  16: 16px,
+  20: 20px,
+  24: 24px,
+  30: 30px,
+  32: 32px,
+  40: 40px,
+  50: 50px
+);
+
+@each $name in map-keys($static-height-vals) {
+  $value: map-get($static-height-vals, $name);
+
+  .qpp-u-height--#{$name}px {
+    height: #{$value} !important;
+  }
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+  $viewport: map-get($breakpoints, $breakpoint);
+
+  @media (min-height: $viewport) {
+    @each $name in map-keys($static-height-vals) {
+      $value: map-get($static-height-vals, $name);
+
+      .qpp-u-#{$breakpoint}-height--#{$name}px {
+        height: #{$value} !important;
+      }
+    }
+  }
+}
+
+.qpp-u-height--auto {
+    height: auto !important;
+}

package/styles/qppds/utilities/_margin.scss

@@ -0,0 +1,136 @@
+// stylelint-disable declaration-no-important
+@import '../settings/variables/index';
+
+@each $key, $value in $spacers {
+  .qpp-u-margin--#{$key} {
+    margin: #{$value} !important;
+  }
+
+  .qpp-u-margin-top--#{$key} {
+    margin-top: #{$value} !important;
+  }
+
+  .qpp-u-margin-right--#{$key} {
+    margin-right: #{$value} !important;
+  }
+
+  .qpp-u-margin-bottom--#{$key} {
+    margin-bottom: #{$value} !important;
+  }
+
+  .qpp-u-margin-left--#{$key} {
+    margin-left: #{$value} !important;
+  }
+
+  .qpp-u-margin-x--#{$key} {
+    margin-left: #{$value} !important;
+    margin-right: #{$value} !important;
+  }
+
+  .qpp-u-margin-y--#{$key} {
+    margin-top: #{$value} !important;
+    margin-bottom: #{$value} !important;
+  }
+}
+
+.qpp-u-margin--auto {
+  margin: auto !important;
+}
+
+.qpp-u-margin-top--auto {
+  margin-top: auto !important;
+}
+
+.qpp-u-margin-right--auto {
+  margin-right: auto !important;
+}
+
+.qpp-u-margin-bottom--auto {
+  margin-bottom: auto !important;
+}
+
+.qpp-u-margin-left--auto {
+  margin-left: auto !important;
+}
+
+.qpp-u-margin-x--auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.qpp-u-margin-y--auto {
+  margin-bottom: auto !important;
+  margin-top: auto !important;
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+  $value: map-get($breakpoints, $breakpoint);
+
+  @media (min-width: $value) {
+    @each $spacer in map-keys($spacers) {
+      $size: map-get($spacers, $spacer);
+
+      // Example: qpp-u-sm-margin--0
+      .qpp-u-#{$breakpoint}-margin--#{$spacer} {
+        // Example: margin: 0 !important;
+        margin: #{$size} !important;
+      }
+
+      .qpp-u-#{$breakpoint}-margin-top--#{$spacer} {
+        margin-top: #{$size} !important;
+      }
+
+      .qpp-u-#{$breakpoint}-margin-right--#{$spacer} {
+        margin-right: #{$size} !important;
+      }
+
+      .qpp-u-#{$breakpoint}-margin-bottom--#{$spacer} {
+        margin-bottom: #{$size} !important;
+      }
+
+      .qpp-u-#{$breakpoint}-margin-left--#{$spacer} {
+        margin-left: #{$size} !important;
+      }
+
+      .qpp-u-#{$breakpoint}-margin-x--#{$spacer} {
+        margin-left: #{$size} !important;
+        margin-right: #{$size} !important;
+      }
+
+      .qpp-u-#{$breakpoint}-margin-y--#{$spacer} {
+        margin-bottom: #{$size} !important;
+        margin-top: #{$size} !important;
+      }
+    }
+
+    .qpp-u-#{$breakpoint}-margin--auto {
+      margin: auto !important;
+    }
+
+    .qpp-u-#{$breakpoint}-margin-top--auto {
+      margin-top: auto !important;
+    }
+
+    .qpp-u-#{$breakpoint}-margin-right--auto {
+      margin-right: auto !important;
+    }
+
+    .qpp-u-#{$breakpoint}-margin-bottom--auto {
+      margin-bottom: auto !important;
+    }
+
+    .qpp-u-#{$breakpoint}-margin-left--auto {
+      margin-left: auto !important;
+    }
+
+    .qpp-u-#{$breakpoint}-margin-x--auto {
+      margin-left: auto !important;
+      margin-right: auto !important;
+    }
+
+    .qpp-u-#{$breakpoint}-margin-y--auto {
+      margin-bottom: auto !important;
+      margin-top: auto !important;
+    }
+  }
+}

package/styles/qppds/utilities/_padding.scss

@@ -0,0 +1,76 @@
+// stylelint-disable declaration-no-important
+@import '../settings/variables/index';
+
+@each $key, $value in $spacers {
+  .qpp-u-padding--#{$key} {
+    padding: #{$value} !important;
+  }
+
+  .qpp-u-padding-top--#{$key} {
+    padding-top: #{$value} !important;
+  }
+
+  .qpp-u-padding-right--#{$key} {
+    padding-right: #{$value} !important;
+  }
+
+  .qpp-u-padding-bottom--#{$key} {
+    padding-bottom: #{$value} !important;
+  }
+
+  .qpp-u-padding-left--#{$key} {
+    padding-left: #{$value} !important;
+  }
+
+  .qpp-u-padding-x--#{$key} {
+    padding-left: #{$value} !important;
+    padding-right: #{$value} !important;
+  }
+
+  .qpp-u-padding-y--#{$key} {
+    padding-top: #{$value} !important;
+    padding-bottom: #{$value} !important;
+  }
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+  $value: map-get($breakpoints, $breakpoint);
+
+  @media (min-width: $value) {
+    @each $spacer in map-keys($spacers) {
+      $size: map-get($spacers, $spacer);
+
+      // Example: qpp-u-sm-padding--0
+      .qpp-u-#{$breakpoint}-padding--#{$spacer} {
+        // Example: padding: 0 !important;
+        padding: #{$size} !important;
+      }
+
+      .qpp-u-#{$breakpoint}-padding-top--#{$spacer} {
+        padding-top: #{$size} !important;
+      }
+
+      .qpp-u-#{$breakpoint}-padding-right--#{$spacer} {
+        padding-right: #{$size} !important;
+      }
+
+      .qpp-u-#{$breakpoint}-padding-bottom--#{$spacer} {
+        padding-bottom: #{$size} !important;
+      }
+
+      .qpp-u-#{$breakpoint}-padding-left--#{$spacer} {
+        padding-left: #{$size} !important;
+      }
+
+      .qpp-u-#{$breakpoint}-padding-x--#{$spacer} {
+        padding-left: #{$size} !important;
+        padding-right: #{$size} !important;
+      }
+
+      .qpp-u-#{$breakpoint}-padding-y--#{$spacer} {
+        padding-bottom: #{$size} !important;
+        padding-top: #{$size} !important;
+      }
+    }
+  }
+}

package/styles/qppds/utilities/_position.scss

@@ -0,0 +1,24 @@
+// stylelint-disable declaration-no-important
+@import '../settings/index.scss';
+
+.qpp-u-position--relative {
+  position: relative !important;
+}
+
+.qpp-u-position--absolute {
+  position: absolute !important;
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+  $viewport: map-get($breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    .qpp-u-#{$breakpoint}-position--relative {
+      position: relative !important;
+    }
+
+    .qpp-u-#{$breakpoint}-position--absolute {
+      position: absolute !important;
+    }
+  }
+}

package/styles/qppds/utilities/_text-align.scss

@@ -0,0 +1,40 @@
+// stylelint-disable declaration-no-important
+@import '../settings/index.scss';
+
+.qpp-u-text-align--center {
+  text-align: center !important;
+}
+
+.qpp-u-text-align--left {
+  text-align: left !important;
+}
+
+.qpp-u-text-align--right {
+  text-align: right !important;
+}
+
+.qpp-u-text-align--justify {
+  text-align: justify !important;
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+  $viewport: map-get($breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    .qpp-u-#{$breakpoint}-text-align--center {
+      text-align: center !important;
+    }
+
+    .qpp-u-#{$breakpoint}-text-align--left {
+      text-align: left !important;
+    }
+
+    .qpp-u-#{$breakpoint}-text-align--right {
+      text-align: right !important;
+    }
+
+    .qpp-u-#{$breakpoint}-text-align--justify {
+      text-align: justify !important;
+    }
+  }
+}

package/styles/qppds/utilities/_text-transform.scss

@@ -0,0 +1,7 @@
+.qpp-u-text-transform--uppercase {
+    text-transform: uppercase !important;
+}
+
+.qpp-u-text-transform--lowercase {
+    text-transform: lowercase !important;
+}

package/styles/qppds/utilities/_truncate.scss

@@ -0,0 +1,8 @@
+/* stylelint-disable declaration-no-important */
+
+.qpp-u-truncate {
+  max-width: 100% !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}

package/styles/qppds/utilities/_width.scss

@@ -0,0 +1,79 @@
+/* Inspired by Tachyons implementation: https://tachyons.io/docs/layout/widths/ */
+// stylelint-disable declaration-no-important
+
+$width-values: (
+  10: 10%,
+  20: 20%,
+  25: 25%,
+  30: 30%,
+  33: 33%,
+  34: 34%,
+  40: 40%,
+  50: 50%,
+  60: 60%,
+  70: 70%,
+  75: 75%,
+  80: 80%,
+  90: 90%,
+  100: 100%,
+  third: calc(100% / 3),
+  two-thirds: calc(100% / 1.5),
+  auto: auto
+);
+
+@each $name in map-keys($width-values) {
+  $value: map-get($width-values, $name);
+
+  .qpp-u-width--#{$name} {
+    width: #{$value} !important;
+  }
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+  $viewport: map-get($breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    @each $name in map-keys($width-values) {
+      $value: map-get($width-values, $name);
+
+      .qpp-u-#{$breakpoint}-width--#{$name} {
+        width: #{$value} !important;
+      }
+    }
+  }
+}
+
+$static-width-vals: (
+  10: 10px,
+  12: 12px,
+  15: 15px,
+  16: 16px,
+  20: 20px,
+  24: 24px,
+  30: 30px,
+  32: 32px,
+  40: 40px,
+  50: 50px
+);
+
+@each $name in map-keys($static-width-vals) {
+  $value: map-get($static-width-vals, $name);
+
+  .qpp-u-width--#{$name}px {
+    width: #{$value} !important;
+  }
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+  $viewport: map-get($breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    @each $name in map-keys($static-width-vals) {
+      $value: map-get($static-width-vals, $name);
+
+      .qpp-u-#{$breakpoint}-width--#{$name}px {
+        width: #{$value} !important;
+      }
+    }
+  }
+}

package/styles/qppds/utilities/index.scss

@@ -0,0 +1,15 @@
+@import './background-color';
+@import './color';
+@import './display-visibility';
+@import './font-family';
+@import './font-size';
+@import './font-weight';
+@import './margin';
+@import './padding';
+@import './flexbox';
+@import './width';
+@import './truncate';
+@import './position';
+@import './text-align';
+@import './text-transform';
+@import './height';

package/styles/qppds.scss

@@ -0,0 +1,2 @@
+@import './paths';
+@import './qppds/index';

package/styles/third-party/_legacy-bootstrap.scss

@@ -0,0 +1,19 @@
+// CORE VARIABLES AND MIXINS
+@import 'legacy-bootstrap/variables';
+@import 'legacy-bootstrap/mixins';
+
+// RESET BASE STYLES
+@import 'legacy-bootstrap/normalize';
+
+// CORE CSS USED ON LEGACY FOOTER AND HEADER QPP-STYLE COMPONENTS
+// WILL BE ABLE TO DELETE ONCE WE FULLY MOVE TO THE NEW HEADER/FOOTER
+@import 'legacy-bootstrap/scaffolding';
+@import 'legacy-bootstrap/grid';
+@import 'legacy-bootstrap/dropdowns';
+@import 'legacy-bootstrap/navs';
+@import 'legacy-bootstrap/navbar';
+
+// .form-control is deeply embedded in our codebase so we may end up keeping this
+@import 'legacy-bootstrap/forms';
+// our buttons are currently dependent on the original bootstrap button styles
+@import 'legacy-bootstrap/buttons';

package/styles/third-party/legacy-bootstrap/_buttons.scss

@@ -0,0 +1,126 @@
+//
+// Buttons
+// --------------------------------------------------
+
+// Base styles
+// --------------------------------------------------
+.btn {
+  display: inline-block;
+  margin-bottom: 0; // For input.btn
+  font-weight: $btn-font-weight;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  border: 1px solid transparent;
+  @include button-size(
+    $padding-base-vertical,
+    $padding-base-horizontal,
+    $font-size-base,
+    $line-height-base,
+    $btn-border-radius-base
+  );
+  @include user-select(none);
+
+  &,
+  &:active,
+  &.active {
+    &:focus,
+    &.focus {
+      @include tab-focus;
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &.focus {
+    color: $btn-default-color;
+    text-decoration: none;
+  }
+
+  &:active,
+  &.active {
+    background-image: none;
+    outline: 0;
+    @include box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: $cursor-disabled;
+    @include opacity(0.65);
+    @include box-shadow(none);
+  }
+
+  // [converter] extracted a& to a.btn
+}
+
+a.btn {
+  &.disabled,
+  fieldset[disabled] & {
+    pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
+  }
+}
+
+// Alternate buttons
+// --------------------------------------------------
+.btn-default {
+  @include button-variant(
+    $btn-default-color,
+    $btn-default-bg,
+    $btn-default-border
+  );
+}
+
+.btn-primary {
+  @include button-variant(
+    $btn-primary-color,
+    $btn-primary-bg,
+    $btn-primary-border
+  );
+}
+
+// Link buttons
+// -------------------------
+
+// Make a button look and behave like a link
+.btn-link {
+  font-weight: 400;
+  color: $link-color;
+  border-radius: 0;
+
+  &,
+  &:active,
+  &.active,
+  &[disabled],
+  fieldset[disabled] & {
+    background-color: transparent;
+    @include box-shadow(none);
+  }
+
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    border-color: transparent;
+  }
+
+  &:hover,
+  &:focus {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+    background-color: transparent;
+  }
+
+  &[disabled],
+  fieldset[disabled] & {
+    &:hover,
+    &:focus {
+      color: $btn-link-disabled-color;
+      text-decoration: none;
+    }
+  }
+}