qpp-style 2.1.13 → 2.2.0-sm.0

package/styles/qppds/components/_gov-banner.scss

@@ -0,0 +1,342 @@
+// stylelint-disable declaration-no-important, property-no-vendor-prefix
+@use '../settings/variables' as v;
+@use '../settings/mixins' as m;
+@use '../settings/functions' as f;
+
+$-gov-banner-gray: #f0f0f0;
+$-gov-banner-button-text-color: #005ea2;
+$-gov-banner-button-text-hover-color: #1a4480;
+
+.qpp-c-gov-banner {
+  @include m.p2;
+  box-sizing: border-box;
+  background-color: $-gov-banner-gray;
+
+  @include m.at-media(xs) {
+    font-size: v.$font-size-14;
+    padding-bottom: 0;
+  }
+
+  span,
+  button,
+  p,
+  title,
+  desc {
+    font-family: v.$font-public-sans !important;
+  }
+
+  strong {
+    font-weight: 700;
+  }
+}
+
+.qpp-c-gov-banner__header,
+.qpp-c-gov-banner__content {
+  background-color: $-gov-banner-gray;
+}
+
+.qpp-c-gov-banner__content {
+  background-color: transparent;
+  font-size: v.$font-size-16;
+  overflow: hidden;
+  padding-bottom: v.$spacing-16;
+  padding-left: v.$spacing-16;
+  padding-right: v.$spacing-16;
+  padding-top: v.$spacing-4;
+  max-width: 64rem;
+  width: 100%;
+  margin-left: 1rem;
+
+  @include m.at-media(xs) {
+    padding-top: v.$spacing-24;
+    padding-bottom: v.$spacing-24;
+  }
+
+  p {
+    &:first-child {
+      margin: 0;
+    }
+  }
+
+  > div {
+    margin-top: 0 !important;
+  }
+}
+
+.qpp-c-gov-banner__guidance {
+  display: flex;
+  align-items: flex-start;
+  padding-top: v.$spacing-16;
+  max-width: 64ex;
+
+  p {
+    font-size: v.$font-size-16 !important;
+  }
+
+  @include m.at-media(xs) {
+    padding-top: 0;
+  }
+}
+
+.qpp-c-gov-banner__lock-image {
+  $-lock-h: 64; // unitless height of svg
+  $-lock-w: 52; // unitless width of svg
+  $-lock-aspect: $-lock-w / $-lock-h;
+  $-icon-height: 1.5ex; // height of the lock icon; use ex for resilience
+
+  height: $-icon-height;
+  width: $-icon-height * $-lock-aspect;
+  path {
+    fill: currentColor;
+  }
+}
+
+.qpp-c-gov-banner__inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  padding-left: v.$spacing-16;
+  padding-right: 0;
+  max-width: 64rem;
+
+  @include m.at-media(xs) {
+    align-items: center;
+  }
+
+  @include m.at-media(md) {
+    padding-left: v.$spacing-32;
+    padding-right: v.$spacing-32;
+  }
+
+  .qpp-c-gov-banner__header-col1 {
+    flex: 0 1 auto;
+    width: auto;
+    max-width: 100%;
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  .qpp-c-gov-banner__header-col2 {
+    flex: 1 1 0%;
+    min-width: 1px;
+    position: relative;
+    box-sizing: border-box;
+
+    @media (min-width: v.$width-xs) {
+      flex: 0 1 auto;
+      width: auto;
+      max-width: 100%;
+    }
+  }
+}
+
+.qpp-c-gov-banner__header {
+  padding-top: v.$spacing-8;
+  padding-bottom: v.$spacing-8;
+  font-size: v.$font-size-14;
+  font-weight: normal;
+  min-height: 3rem;
+  position: relative;
+  box-shadow: none;
+  height: auto;
+  display: block;
+
+  @include m.at-media(xs) {
+    padding-top: v.$spacing-4;
+    padding-bottom: v.$spacing-4;
+    min-height: 0;
+  }
+}
+
+.qpp-c-gov-banner__header-text {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: v.$font-size-12 !important;
+  line-height: v.$line-height-sm !important;
+}
+
+.qpp-c-gov-banner__header-flag {
+  float: left;
+  margin-right: v.$spacing-8;
+  width: v.$spacing-16;
+}
+
+.qpp-c-gov-banner__icon {
+  width: v.$spacing-40;
+  margin-right: v.$spacing-8;
+}
+
+.qpp-c-gov-banner__header-action {
+  line-height: v.$line-height-sm !important;
+  margin-bottom: 0;
+  margin-top: f.rem(2px);
+
+  span {
+    font-weight: v.$font-regular !important;
+    text-decoration: underline !important;
+  }
+
+  .qpp-c-gov__header--expanded & {
+    display: none;
+  }
+
+  @include m.at-media(xs) {
+    display: none;
+  }
+
+  .qpp-c-gov-banner__header-action-text {
+    text-decoration: underline;
+    font-size: v.$font-size-12;
+    color: $-gov-banner-button-text-color !important;
+  }
+
+  .qpp-c-gov-banner__header-action-icon {
+    padding: 0 !important;
+    margin: 0 !important;
+    border: 0 !important;
+
+    &::after {
+      content: '';
+      vertical-align: middle;
+      display: inline-block;
+      width: 1rem;
+      height: 1rem;
+      margin-top: f.rem(-2px);
+      background-color: currentColor;
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
+        no-repeat center/contain;
+      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
+        no-repeat center/contain;
+
+      @include m.at-media(xs) {
+        display: none;
+      }
+    }
+
+    &[aria-expanded='true']::after {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.qpp-c-gov-banner__header--expanded {
+  @include m.at-media(xs) {
+    background-color: transparent;
+    display: block;
+    min-height: 0;
+    padding-right: 0;
+  }
+
+  .qpp-c-gov-banner__inner {
+    margin-left: 0;
+  }
+
+  .qpp-c-gov-banner__header-action {
+    display: none;
+  }
+
+  @include m.at-media-max(xs) {
+    .qpp-c-gov-banner__header-text {
+      margin-right: 3rem;
+    }
+  }
+}
+
+.qpp-c-gov-banner__button {
+  font-weight: v.$font-regular !important;
+  color: $-gov-banner-button-text-color !important;
+
+  &::after {
+    content: '';
+    vertical-align: middle;
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    margin-top: f.rem(-2px);
+    background-color: currentColor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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")
+      no-repeat center/contain;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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")
+      no-repeat center/contain;
+  }
+  &:hover {
+    color: $-gov-banner-button-text-hover-color !important;
+  }
+
+  @include m.at-media-max(xs) {
+    &[aria-expanded='true']::after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      height: 1.5rem;
+      width: 1.5rem;
+      margin: 0.75rem;
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' focusable='false'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M0.292893219,0.292893219 C0.683417511,-0.0976310729 1.31658249,-0.0976310729 1.70710678,0.292893219 L1.70710678,0.292893219 L8,6.585 L14.2928932,0.292893219 C14.6834175,-0.0976310729 15.3165825,-0.0976310729 15.7071068,0.292893219 C16.0675907,0.65337718 16.0953203,1.22060824 15.7902954,1.61289944 L15.7071068,1.70710678 L9.415,8 L15.7071068,14.2928932 L15.7902954,14.3871006 C16.0953203,14.7793918 16.0675907,15.3466228 15.7071068,15.7071068 C15.3165825,16.0976311 14.6834175,16.0976311 14.2928932,15.7071068 L14.2928932,15.7071068 L8,9.415 L1.70710678,15.7071068 C1.31658249,16.0976311 0.683417511,16.0976311 0.292893219,15.7071068 C-0.0675907428,15.3466228 -0.0953202783,14.7793918 0.209704612,14.3871006 L0.292893219,14.2928932 L6.585,8 L0.292893219,1.70710678 L0.209704612,1.61289944 C-0.0953202783,1.22060824 -0.0675907428,0.65337718 0.292893219,0.292893219 Z' fill='%23242424' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' focusable='false'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M0.292893219,0.292893219 C0.683417511,-0.0976310729 1.31658249,-0.0976310729 1.70710678,0.292893219 L1.70710678,0.292893219 L8,6.585 L14.2928932,0.292893219 C14.6834175,-0.0976310729 15.3165825,-0.0976310729 15.7071068,0.292893219 C16.0675907,0.65337718 16.0953203,1.22060824 15.7902954,1.61289944 L15.7071068,1.70710678 L9.415,8 L15.7071068,14.2928932 L15.7902954,14.3871006 C16.0953203,14.7793918 16.0675907,15.3466228 15.7071068,15.7071068 C15.3165825,16.0976311 14.6834175,16.0976311 14.2928932,15.7071068 L14.2928932,15.7071068 L8,9.415 L1.70710678,15.7071068 C1.31658249,16.0976311 0.683417511,16.0976311 0.292893219,15.7071068 C-0.0675907428,15.3466228 -0.0953202783,14.7793918 0.209704612,14.3871006 L0.292893219,14.2928932 L6.585,8 L0.292893219,1.70710678 L0.209704612,1.61289944 C-0.0953202783,1.22060824 -0.0675907428,0.65337718 0.292893219,0.292893219 Z' fill='%23242424' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+    }
+
+    &[aria-expanded='false']::after {
+      display: none;
+    }
+
+    &[aria-expanded='true']::before {
+      bottom: 0;
+      top: 0;
+      position: absolute;
+      right: 0;
+      background-color: #e6e6e6;
+      content: '';
+      display: block;
+      height: 3rem;
+      width: 3rem;
+      z-index: -1;
+    }
+  }
+
+  @include m.at-media(xs) {
+    &[aria-expanded='true']::after {
+      transform: rotate(180deg);
+    }
+  }
+
+  @include m.at-media(xs) {
+    margin-left: v.$spacing-8;
+    position: relative;
+    display: inline;
+    left: auto;
+    right: auto;
+    top: auto;
+    bottom: auto;
+
+    &:focus,
+    &:visited {
+      margin-left: v.$spacing-8 !important;
+    }
+  }
+
+  @include m.at-media-max(xs) {
+    position: absolute;
+    height: auto;
+    width: 100%;
+    margin-left: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+}
+
+.qpp-c-gov-banner__button-text {
+  text-decoration: underline;
+  font-size: v.$font-size-12;
+  color: inherit;
+
+  @include m.at-media-max(xs) {
+    @include m.visually-hidden;
+  }
+
+  @include m.at-media(xs) {
+    display: inline;
+  }
+}