@teamimpact/veda-ui-blocks 0.1.0-beta.7 → 0.1.0-beta.9

package/src/styles/components/card.scss

@@ -1,284 +0,0 @@
-@use "uswds-core" as *;
-$theme-card-max-width: "desktop-lg" !default;
-$theme-card-title-color: "ink" !default;
-$theme-card-text-color: "ink" !default;
-$theme-card-overlay-color: "base-lightest" !default;
-$theme-card-title-dark-color: "white" !default;
-$theme-card-text-dark-color: "white" !default;
-$theme-card-overlay-dark-color: "base-darkest" !default;
-$theme-card-title-brand-color: "white" !default;
-$theme-card-text-brand-color: "white" !default;
-$theme-card-overlay-brand-color: "primary-dark" !default;
-
-@mixin blocks-card-overlay($color, $direction: 90deg) {
-  background: linear-gradient($direction, rgba(color($color), 1) 0%, rgba(color($color), 0.3) 100%);
-
-  @include at-media("desktop") {
-    background: linear-gradient(
-      $direction,
-      rgba(color($color), 1) 0%,
-      rgba(color($color), 0.3) 70%,
-      rgba(color($color), 0) 100%
-    );
-  }
-}
-
-// LAYOUT
-.blocks-card {
-  display: flex;
-  flex-direction: column;
-  isolation: isolate;
-  min-height: units("mobile");
-  position: relative;
-  width: 100%;
-
-  &__content-container {
-    flex: 1;
-  }
-
-  &__content-container,
-  &__children {
-    align-items: center;
-    display: flex;
-    padding: units(4) units(3);
-    width: 100%;
-    z-index: 1;
-
-    @include at-media("tablet") {
-      padding: units(5) units(8);
-    }
-
-    @include at-media("desktop") {
-      padding: units(5) units(10);
-    }
-  }
-
-  &--image-left,
-  &--image-right {
-    .blocks-card__content-container {
-      align-items: start;
-      flex-direction: column;
-      gap: units(3);
-
-      @include at-media("tablet") {
-        align-items: center;
-        flex-direction: row;
-        gap: units(5);
-      }
-    }
-  }
-
-  &--image-right {
-    .blocks-card__content-container {
-      @include at-media("tablet") {
-        flex-direction: row-reverse;
-      }
-    }
-  }
-
-  &--mast-head {
-    .blocks-card__content-container,
-    .blocks-card__children {
-      @include grid-container($theme-card-max-width);
-    }
-  }
-
-  &__media {
-    inset: 0;
-    min-height: 175px;
-    position: absolute;
-    width: 100%;
-    z-index: 0;
-
-    &:only-child {
-      min-height: 100%;
-    }
-
-    @include at-media("tablet") {
-      min-height: 0;
-    }
-
-    > :is(img, svg, video, canvas) {
-      height: 100%;
-      display: block;
-      inset: 0;
-      object-fit: cover;
-      position: absolute;
-      width: 100%;
-    }
-  }
-
-  &--image-left,
-  &--image-right {
-    .blocks-card__media {
-      position: relative;
-
-      @include at-media("tablet") {
-        align-self: stretch;
-        flex: 1 1 0;
-      }
-
-      &:only-child {
-        position: unset;
-      }
-    }
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: units(2);
-    position: relative;
-
-    @include at-media("tablet") {
-      flex: 1 1 0;
-      max-width: measure(5);
-    }
-  }
-
-  &--image-left,
-  &--image-right {
-    .blocks-card__content {
-      @include at-media("tablet") {
-        max-width: none;
-      }
-    }
-  }
-
-  &__title {
-    margin: 0;
-  }
-
-  &__description {
-    margin: 0;
-  }
-
-  &__actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: units(1);
-
-    .usa-button {
-      margin-right: 0;
-    }
-  }
-
-  &--image-left,
-  &--image-right {
-    .blocks-card__actions {
-      .usa-button {
-        flex: 1 1 0;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-  }
-}
-
-// Visually align card content if placed in a grid column
-@include at-media("tablet") {
-  [class*="grid-col-"] > .blocks-card {
-    .blocks-card__content-container {
-      align-items: stretch;
-    }
-
-    .blocks-card__actions {
-      margin-top: auto;
-    }
-  }
-}
-
-// THEME
-.blocks-card {
-  &::after {
-    @include blocks-card-overlay($theme-card-overlay-color);
-  }
-
-  &--dark {
-    &::after {
-      @include blocks-card-overlay($theme-card-overlay-dark-color);
-    }
-  }
-
-  &--brand {
-    &::after {
-      @include blocks-card-overlay($theme-card-overlay-brand-color);
-    }
-  }
-
-  &--image-left,
-  &--image-right {
-    background-color: color($theme-card-overlay-color);
-
-    &::after {
-      background: none;
-    }
-  }
-
-  &--dark.blocks-card--image-left,
-  &--dark.blocks-card--image-right {
-    background-color: color($theme-card-overlay-dark-color);
-  }
-
-  &--brand.blocks-card--image-left,
-  &--brand.blocks-card--image-right {
-    background-color: color($theme-card-overlay-brand-color);
-  }
-
-  &__title {
-    color: color($theme-card-title-color);
-    font-family: family($theme-card-font-family);
-    font-size: size("heading", "xl");
-    font-weight: font-weight("bold");
-    line-height: lh("heading", 1);
-  }
-
-  &__subtitle {
-    color: color($theme-card-text-color);
-    font-family: family($theme-card-font-family);
-    font-size: size("heading", "xl");
-    line-height: lh("heading", 3);
-  }
-
-  &__description {
-    color: color($theme-card-text-color);
-    font-family: family($theme-card-font-family);
-    font-size: size("body", "sm");
-    font-weight: font-weight("normal");
-    line-height: lh("body", 5);
-  }
-
-  &--dark {
-    .blocks-card__title {
-      color: color($theme-card-title-dark-color);
-    }
-
-    .blocks-card__subtitle {
-      color: color($theme-card-text-dark-color);
-    }
-
-    .blocks-card__description {
-      color: color($theme-card-text-dark-color);
-    }
-  }
-
-  &--brand {
-    .blocks-card__title {
-      color: color($theme-card-title-brand-color);
-    }
-
-    .blocks-card__subtitle {
-      color: color($theme-card-text-brand-color);
-    }
-
-    .blocks-card__description {
-      color: color($theme-card-text-brand-color);
-    }
-  }
-}

package/src/styles/components/compare-map.scss

@@ -1,15 +0,0 @@
-@use "uswds-core" as *;
-
-$theme-compare-swiper-bgcolor: "primary" !default;
-
-.blocks-compare-map {
-  position: relative;
-  width: 100%;
-  flex: 1;
-  min-height: 0;
-
-  // Override mapbox-gl-compare handle color
-  .mapboxgl-compare .compare-swiper-vertical {
-    background-color: color($theme-compare-swiper-bgcolor);
-  }
-}

package/src/styles/components/footer.scss

@@ -1,256 +0,0 @@
-@use "uswds-core" as *;
-
-$theme-footer-background-color: $theme-body-background-color !default;
-$theme-footer-primary-link-color: $theme-link-color !default;
-$theme-footer-secondary-link-color: "ink" !default;
-$theme-footer-title-color: "ink" !default;
-$theme-footer-text-color: "ink" !default;
-$theme-footer-separator-color: "ink" !default;
-
-// LAYOUT
-.blocks-footer.usa-footer--slim {
-  .usa-footer__primary-section > .grid-container,
-  .usa-footer__secondary-section > .grid-container {
-    section {
-      padding-bottom: units(3);
-    }
-  }
-
-  .usa-footer__primary-section {
-    > .grid-container {
-      padding-top: units(4);
-
-      @include at-media("desktop") {
-        padding-top: units(5);
-      }
-    }
-  }
-
-  .usa-footer__secondary-section {
-    padding-top: 0;
-    padding-bottom: 0;
-
-    > .grid-container {
-      padding-bottom: units(3);
-
-      @include at-media("desktop") {
-        padding-bottom: units(7);
-      }
-    }
-  }
-
-  .blocks-footer__primary-section-lower {
-    display: grid;
-    gap: units(5);
-
-    @include at-media("desktop") {
-      align-items: start;
-      column-gap: units(8);
-      grid-template-columns: (units(10) * 4) minmax(0, 1fr);
-    }
-  }
-
-  .blocks-footer__secondary-section-lower {
-    display: grid;
-    gap: units(4);
-    padding-top: units(3);
-
-    @include at-media("desktop") {
-      align-items: start;
-      column-gap: units(8);
-      grid-template-columns: minmax(0, auto) minmax(0, 1fr);
-    }
-  }
-
-  .blocks-footer__secondary-meta {
-    display: flex;
-    flex-direction: column;
-    gap: units(4);
-
-    @include at-media("desktop") {
-      column-gap: units(6);
-      flex-direction: row;
-      flex-wrap: wrap-reverse;
-      justify-content: flex-end;
-    }
-  }
-
-  .blocks-footer__title {
-    display: grid;
-    gap: units(1.5);
-  }
-
-  .usa-footer__primary-section,
-  .usa-footer__secondary-section {
-    nav {
-      ul {
-        display: flex;
-        flex-direction: column;
-        gap: units(3);
-        @include add-list-reset;
-
-        @include at-media("desktop") {
-          flex-direction: row;
-          flex-wrap: wrap;
-          gap: units(5);
-        }
-      }
-    }
-  }
-
-  .blocks-footer__primary-nav,
-  .blocks-footer__secondary-nav {
-    padding-top: units(2);
-
-    @include at-media("desktop") {
-      padding-top: units(3);
-    }
-  }
-
-  .blocks-footer__primary-nav {
-    ul {
-      justify-content: flex-end;
-    }
-  }
-
-  .usa-footer__secondary-link {
-    line-height: inherit;
-    margin-left: 0;
-    padding: 0;
-
-    & + .usa-footer__secondary-link {
-      padding-top: 0;
-    }
-  }
-
-  .blocks-footer__utility-nav,
-  .blocks-footer__contacts-nav {
-    display: flex;
-    flex-wrap: wrap;
-    gap: units(2);
-
-    li {
-      align-items: center;
-      display: flex;
-      gap: units(1.5);
-
-      a {
-        display: inline-flex;
-        gap: units(1);
-        align-items: center;
-      }
-    }
-  }
-
-  .blocks-footer__utility-nav ul {
-    gap: units(1);
-  }
-
-  .blocks-footer__contacts-nav ul {
-    gap: units(3);
-
-    @include at-media("desktop") {
-      align-items: center;
-      gap: units(3);
-      justify-content: flex-end;
-    }
-  }
-
-  .blocks-footer__secondary-meta > p {
-    margin: 0;
-
-    @include at-media("desktop") {
-      text-align: right;
-    }
-  }
-}
-
-// THEME
-.blocks-footer.usa-footer--slim {
-  .usa-footer__primary-section,
-  .usa-footer__secondary-section {
-    background-color: color($theme-footer-background-color);
-    color: color($theme-text-color);
-  }
-
-  .blocks-footer__primary-section-lower,
-  .blocks-footer__secondary-section-upper {
-    border-bottom: 1px solid rgba(color($theme-footer-separator-color), 0.1);
-  }
-
-  .blocks-footer__title {
-    span {
-      color: color($theme-footer-title-color);
-      font-size: size("body", "lg");
-      font-weight: font-weight("bold");
-      text-decoration: none;
-    }
-
-    p {
-      color: color($theme-footer-text-color);
-      margin: 0;
-      font-size: size("body", "2xs");
-      line-height: line-height("body", 5);
-    }
-  }
-
-  .usa-footer__primary-link {
-    border: 0;
-    color: color($theme-footer-primary-link-color);
-    font-size: size("body", "2xs");
-    font-weight: font-weight("bold");
-    padding: 0;
-    text-decoration: none;
-
-    &:visited {
-      color: color($theme-footer-primary-link-color);
-    }
-
-    &:hover,
-    &:active {
-      color: color($theme-footer-primary-link-color);
-      text-decoration: underline;
-      text-underline-offset: 0.18em;
-    }
-  }
-
-  .usa-footer__secondary-link > a {
-    color: color($theme-footer-secondary-link-color);
-    font-size: size("body", "2xs");
-    line-height: line-height("body", 5);
-    text-decoration: underline;
-    text-decoration-thickness: 1px;
-    text-underline-offset: 0.18em;
-
-    &:visited {
-      color: color($theme-footer-secondary-link-color);
-    }
-
-    &:hover,
-    &:active {
-      color: color($theme-footer-secondary-link-color);
-      text-decoration-thickness: 2px;
-    }
-  }
-
-  .blocks-footer__secondary-section-lower {
-    color: color($theme-footer-text-color);
-    font-size: size("body", "2xs");
-  }
-
-  .blocks-footer__secondary-section-lower a {
-    text-decoration: underline;
-    text-decoration-thickness: 1px;
-    text-underline-offset: 0.18em;
-    color: color($theme-footer-primary-link-color);
-    &:visited {
-      color: color($theme-footer-primary-link-color);
-    }
-
-    &:hover,
-    &:active {
-      color: color($theme-footer-primary-link-color);
-      text-decoration-thickness: 2px;
-    }
-  }
-}