qpp-style 2.1.13 → 2.2.0-sm.0

package/styles/qppds/utilities/_font-size.scss

@@ -0,0 +1,8 @@
+// stylelint-disable declaration-no-important
+@use '../settings/variables' as v;
+
+@each $key, $value in v.$font-sizes {
+  .qpp-u-font-size--#{$key} {
+    font-size: #{$value} !important;
+  }
+}

package/styles/qppds/utilities/_font-weight.scss

@@ -0,0 +1,10 @@
+// stylelint-disable declaration-no-important
+@use '../settings/variables' as v;
+
+.qpp-u-font-weight--regular {
+  font-weight: v.$font-regular !important;
+}
+
+.qpp-u-font-weight--medium {
+  font-weight: v.$font-medium !important;
+}

package/styles/qppds/utilities/_gap.scss

@@ -0,0 +1,38 @@
+// stylelint-disable declaration-no-important
+@use '../settings/variables' as v;
+
+@each $name in map-keys(v.$spacers) {
+  $value: map-get(v.$spacers, $name);
+  .qpp-u-gap--#{$name} {
+    gap: $value;
+  }
+
+  .qpp-u-row-gap--#{$name} {
+    row-gap: $value;
+  }
+
+  .qpp-u-column-gap--#{$name} {
+    column-gap: $value;
+  }
+}
+
+@each $breakpoint in map-keys(v.$breakpoints) {
+  $viewport: map-get(v.$breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    @each $name in map-keys(v.$spacers) {
+      $value: map-get(v.$spacers, $name);
+      .qpp-u-#{$breakpoint}-gap--#{$name} {
+        gap: $value;
+      }
+
+      .qpp-u-#{$breakpoint}-row-gap--#{$name} {
+        row-gap: $value;
+      }
+
+      .qpp-u-#{$breakpoint}-column-gap--#{$name} {
+        column-gap: $value;
+      }
+    }
+  }
+}

package/styles/qppds/utilities/_height.scss

@@ -0,0 +1,81 @@
+// stylelint-disable declaration-no-important
+@use '../settings/variables' as v;
+
+$-px-height-vals: (
+  10: 10px,
+  12: 12px,
+  15: 15px,
+  16: 16px,
+  20: 20px,
+  24: 24px,
+  30: 30px,
+  32: 32px,
+  40: 40px,
+  50: 50px,
+);
+
+$-height-vals: (
+  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),
+  half: 50%,
+  two-thirds: calc(100% / 1.5),
+  full: 100%,
+  auto: auto,
+);
+
+@each $name in map-keys($-px-height-vals) {
+  $value: map-get($-px-height-vals, $name);
+
+  .qpp-u-height--#{$name}px {
+    height: #{$value} !important;
+  }
+}
+
+@each $breakpoint in map-keys(v.$breakpoints) {
+  $viewport: map-get(v.$breakpoints, $breakpoint);
+
+  @media (min-height: $viewport) {
+    @each $name in map-keys($-px-height-vals) {
+      $value: map-get($-px-height-vals, $name);
+
+      .qpp-u-#{$breakpoint}-height--#{$name}px {
+        height: #{$value} !important;
+      }
+    }
+  }
+}
+
+@each $name in map-keys($-height-vals) {
+  $value: map-get($-height-vals, $name);
+
+  .qpp-u-height--#{$name} {
+    height: #{$value} !important;
+  }
+}
+
+@each $breakpoint in map-keys(v.$breakpoints) {
+  $viewport: map-get(v.$breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    @each $name in map-keys($-height-vals) {
+      $value: map-get($-height-vals, $name);
+
+      .qpp-u-#{$breakpoint}-height--#{$name} {
+        height: #{$value} !important;
+      }
+    }
+  }
+}

package/styles/qppds/utilities/_list-style.scss

@@ -0,0 +1,17 @@
+// stylelint-disable declaration-no-important
+
+.qpp-u-list-style--none {
+  list-style: none !important;
+}
+
+.qpp-u-list-style--decimal {
+  list-style: decimal !important;
+}
+
+.qpp-u-list-style--upper-alpha {
+  list-style: upper-alpha !important;
+}
+
+.qpp-u-list-style--circle {
+  list-style: circle !important;
+}

package/styles/qppds/utilities/_margin.scss

@@ -0,0 +1,136 @@
+// stylelint-disable declaration-no-important
+@use '../settings/variables' as v;
+
+@each $key, $value in v.$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(v.$breakpoints) {
+  $value: map-get(v.$breakpoints, $breakpoint);
+
+  @media (min-width: $value) {
+    @each $spacer in map-keys(v.$spacers) {
+      $size: map-get(v.$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
+@use '../settings/variables' as v;
+
+@each $key, $value in v.$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(v.$breakpoints) {
+  $value: map-get(v.$breakpoints, $breakpoint);
+
+  @media (min-width: $value) {
+    @each $spacer in map-keys(v.$spacers) {
+      $size: map-get(v.$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
+@use '../settings/variables' as v;
+
+.qpp-u-position--relative {
+  position: relative !important;
+}
+
+.qpp-u-position--absolute {
+  position: absolute !important;
+}
+
+@each $breakpoint in map-keys(v.$breakpoints) {
+  $viewport: map-get(v.$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
+@use '../settings/variables' as v;
+
+.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(v.$breakpoints) {
+  $viewport: map-get(v.$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/_vertical-align.scss

@@ -0,0 +1,72 @@
+// stylelint-disable declaration-no-important
+@use '../settings/variables' as v;
+
+.qpp-u-vertical-align--baseline {
+  vertical-align: baseline !important;
+}
+
+.qpp-u-vertical-align--sub {
+  vertical-align: sub !important;
+}
+
+.qpp-u-vertical-align--super {
+  vertical-align: super !important;
+}
+
+.qpp-u-vertical-align--text-top {
+  vertical-align: text-top !important;
+}
+
+.qpp-u-vertical-align--text-bottom {
+  vertical-align: text-bottom !important;
+}
+
+.qpp-u-vertical-align--middle {
+  vertical-align: middle !important;
+}
+
+.qpp-u-vertical-align--top {
+  vertical-align: top !important;
+}
+
+.qpp-u-vertical-align--bottom {
+  vertical-align: bottom !important;
+}
+
+@each $breakpoint in map-keys(v.$breakpoints) {
+  $viewport: map-get(v.$breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    .qpp-u-#{$breakpoint}-vertical-align--baseline {
+      vertical-align: baseline !important;
+    }
+
+    .qpp-u-#{$breakpoint}-vertical-align--sub {
+      vertical-align: sub !important;
+    }
+
+    .qpp-u-#{$breakpoint}-vertical-align--super {
+      vertical-align: super !important;
+    }
+
+    .qpp-u-vertical-align--text-top {
+      vertical-align: text-top !important;
+    }
+
+    .qpp-u-#{$breakpoint}-vertical-align--text-bottom {
+      vertical-align: text-bottom !important;
+    }
+
+    .qpp-u-#{$breakpoint}-vertical-align--middle {
+      vertical-align: middle !important;
+    }
+
+    .qpp-u-#{$breakpoint}-vertical-align--top {
+      vertical-align: top !important;
+    }
+
+    .qpp-u-#{$breakpoint}-vertical-align--bottom {
+      vertical-align: bottom !important;
+    }
+  }
+}

package/styles/qppds/utilities/_width.scss

@@ -0,0 +1,82 @@
+/* Inspired by Tachyons implementation: https://tachyons.io/docs/layout/widths/ */
+// stylelint-disable declaration-no-important
+@use '../settings/variables' as v;
+
+$-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),
+  half: 50%,
+  two-thirds: calc(100% / 1.5),
+  full: 100%,
+  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(v.$breakpoints) {
+  $viewport: map-get(v.$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;
+      }
+    }
+  }
+}
+
+$-px-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($-px-width-vals) {
+  $value: map-get($-px-width-vals, $name);
+
+  .qpp-u-width--#{$name}px {
+    width: #{$value} !important;
+  }
+}
+
+@each $breakpoint in map-keys(v.$breakpoints) {
+  $viewport: map-get(v.$breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    @each $name in map-keys($-px-width-vals) {
+      $value: map-get($-px-width-vals, $name);
+
+      .qpp-u-#{$breakpoint}-width--#{$name}px {
+        width: #{$value} !important;
+      }
+    }
+  }
+}

package/styles/qppds/utilities/index.scss

@@ -0,0 +1,17 @@
+@forward './background-color';
+@forward './color';
+@forward './display-visibility';
+@forward './font-family';
+@forward './font-size';
+@forward './font-weight';
+@forward './margin';
+@forward './padding';
+@forward './flexbox';
+@forward './width';
+@forward './position';
+@forward './text-align';
+@forward './text-transform';
+@forward './height';
+@forward './vertical-align';
+@forward './list-style';
+@forward './gap';

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';