qpp-style 0.0.9 → 0.0.10

package/styles/qppds/components/_circular-loader.scss

@@ -0,0 +1,47 @@
+$rotation-animation-speed: 1.4s;
+$rotation-animation-easing: linear;
+$stroke-animation-speed: 1.5s;
+$stroke-animation-easing: ease-in-out;
+$stroke-width: 3.6;
+$stroke-start-dasharray: 1, 200;
+$stroke-end-dasharray: 80, 200;
+
+.qpp-c-circular-loader {
+  margin: 0 auto;
+  width: 50px;
+  height: 50px;
+}
+
+.qpp-c-circular-loader > svg {
+  animation: circular-rotate $rotation-animation-speed
+    $rotation-animation-easing infinite;
+}
+
+.qpp-c-circular-loader > svg > circle {
+  stroke: currentColor;
+  stroke-width: $stroke-width;
+  animation: circular-animate-stroke $stroke-animation-speed
+    $stroke-animation-easing infinite;
+  stroke-linecap: round;
+}
+
+@keyframes circular-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes circular-animate-stroke {
+  0% {
+    stroke-dasharray: $stroke-start-dasharray;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: $stroke-end-dasharray;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: $stroke-end-dasharray;
+    stroke-dashoffset: -124;
+  }
+}

package/styles/qppds/components/_details.scss

@@ -0,0 +1,90 @@
+@import '../settings/index';
+
+/* stylelint-disable selector-no-qualifying-type, max-nesting-depth */
+.qpp-c-details {
+  > summary {
+    cursor: pointer;
+    list-style: none;
+    border: 1px solid transparent;
+
+    svg {
+      display: inline-block;
+    }
+
+    .qpp-c-details--icon-open {
+      display: none;
+    }
+
+    &:focus {
+      @include focus-ring;
+    }
+  }
+
+  > summary::marker,
+  > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  &.qpp-c-details--header {
+    > summary {
+      background-color: $gray-04;
+      width: 100%;
+      padding: $spacing-12 $spacing-40;
+      color: $gray-90;
+      font-size: $font-size-20;
+      font-weight: $font-regular;
+      display: flex;
+      gap: 0.5ch;
+      justify-content: space-between;
+      align-items: center;
+      word-break: break-word; // for older Safari
+      overflow-wrap: anywhere;
+
+      > svg {
+        @include mat-icon-medium;
+      }
+
+      span {
+        &.qpp-c-details--icon,
+        &.qpp-c-details--icon-closed,
+        &.qpp-c-details--icon-open {
+          font-weight: $font-medium;
+          color: $blue-60;
+          font-size: $font-size-16;
+          line-height: 2;
+          width: 6ch;
+          text-align: end;
+          white-space: nowrap;
+
+          > svg {
+            @include mat-icon-medium;
+          }
+        }
+      }
+
+      &:focus {
+        @include focus-ring;
+      }
+    }
+  }
+
+  &[open] {
+    > summary {
+      .qpp-c-details--icon-closed {
+        display: none;
+      }
+      .qpp-c-details--icon-open {
+        display: inline-block;
+      }
+    }
+  }
+}
+
+.qpp-c-details-list {
+  @include unstyled-list;
+
+  > li {
+    padding-bottom: $spacing-16;
+  }
+}
+/* stylelint-enable selector-no-qualifying-type, max-nesting-depth */

package/styles/qppds/components/_dropdown-menu.scss

@@ -0,0 +1,125 @@
+@import '../settings/index';
+
+.qpp-c-dropdown-menu__box {
+  margin-top: $spacing-8;
+  background: rgb(255, 255, 255);
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  border-radius: 6px;
+  outline: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: absolute;
+}
+
+.qpp-c-dropdown-menu,
+.qppds .qpp-c-dropdown-menu {
+  &.qpp-c-dropdown-menu__list,
+  .qpp-c-dropdown-menu__list {
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    list-style: none;
+    outline: 0;
+    margin: 0;
+    position: relative;
+    max-height: 264px;
+    max-width: 400px;
+  }
+
+  &.qpp-c-dropdown-menu__box {
+    margin-top: $spacing-8;
+  }
+
+  .qpp-c-dropdown-menu__item {
+    font-size: $font-size-14;
+    line-height: $line-height-xs;
+    padding-left: $spacing-24;
+    padding-right: $spacing-24;
+    padding-top: $spacing-16;
+    padding-bottom: $spacing-16;
+    border: 0;
+    margin: 0;
+    outline: 0;
+    border-bottom: 1px solid $gray-10;
+    font-weight: $font-regular;
+    color: $gray-80;
+    background-color: $white;
+    width: auto;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family: $font-rubik;
+    white-space: nowrap;
+    letter-spacing: 0;
+    display: flex;
+    position: relative;
+    align-items: center;
+    text-align: left;
+    justify-content: flex-start;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    border-radius: 0;
+    vertical-align: middle;
+
+    svg {
+      font-size: $font-size-20;
+      color: inherit;
+    }
+
+    span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      padding: 0.25em 0;
+      margin: -0.25em 0;
+    }
+
+    .qpp-c-dropdown-menu__icon {
+      margin-right: $spacing-8;
+      margin-top: rem(-2px);
+      margin-bottom: rem(-2px);
+
+      > svg {
+        fill: currentColor;
+        width: 1em;
+        height: 1em;
+        display: inline-block;
+        flex-shrink: 0;
+        user-select: none;
+      }
+    }
+
+    &:focus {
+      box-shadow: inset 0 0 0 4px $blue-10, inset 0 0 0 5px $blue-70;
+      background-color: $white;
+    }
+
+    &:hover {
+      background-color: $gray-04;
+    }
+
+    &--header {
+      background-color: $gray-04;
+      font-weight: $font-medium;
+      cursor: default;
+
+      &[aria-disabled] {
+        opacity: 1;
+      }
+    }
+
+    &--loading {
+      cursor: default;
+
+      &[aria-disabled] {
+        opacity: 1;
+      }
+
+      .qpp-c-dropdown-menu__spinner {
+        margin-right: 1rem;
+        color: $blue-70;
+      }
+    }
+  }
+}

package/styles/qppds/components/_dropdown.scss

@@ -38,6 +38,7 @@
     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");
+    opacity: 1;
   }
 }
 
@@ -49,3 +50,7 @@
   background: none;
   color: $gray-80;
 }
+
+.qpp-c-dropdown--big {
+  padding: $spacing-16 $spacing-40 $spacing-16 $spacing-16;
+}