ply-css 1.3.0

package/src/scss/components/_livesearch.scss

@@ -0,0 +1,233 @@
+@use "colors";
+@use "mixins";
+@use "variables";
+
+/* =Typeahead / Autocomplete
+-----------------------------------------------------------------------------*/
+.typeahead,
+.livesearch-container {
+  position: relative;
+  width: 100%;
+
+  input {
+    width: 100%;
+    position: relative;
+    z-index: 2;
+  }
+
+  &.active input {
+    border-radius: variables.$border-radius variables.$border-radius 0 0;
+    border-bottom-color: var(--ply-border-color, colors.$color-gray);
+  }
+}
+
+.typeahead-results,
+.livesearch-results {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  z-index: 101;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: var(--ply-bg-surface, colors.$color-white);
+  border: 1px solid var(--ply-color-input-border, colors.$color-input-border);
+  border-top: none;
+  border-radius: 0 0 variables.$border-radius variables.$border-radius;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
+  max-height: 240px;
+  overflow-y: auto;
+
+  .typeahead.active & {
+    display: block;
+  }
+
+  li {
+    margin: 0;
+  }
+
+  .typeahead-item {
+    display: block;
+    padding: 0.5rem 0.75rem;
+    color: var(--ply-color-body, colors.$color-body);
+    text-decoration: none;
+    cursor: pointer;
+    transition: background 0.1s ease;
+
+    &:hover,
+    &[aria-selected="true"] {
+      background: var(--ply-bg-muted, colors.$color-gray-light);
+    }
+
+    // Already chosen in multi-select
+    &.disabled {
+      opacity: 0.4;
+      cursor: default;
+
+      &:hover {
+        background: none;
+      }
+    }
+  }
+
+  li + li {
+    border-top: 1px solid var(--ply-border-color, colors.$color-gray-light);
+  }
+}
+
+.typeahead-empty {
+  padding: 0.5rem 0.75rem;
+  color: var(--ply-color-muted);
+  font-size: variables.$font-size-sm;
+}
+
+/* =Multi-select
+-----------------------------------------------------------------------------*/
+.multiselect {
+  position: relative;
+  width: 100%;
+}
+
+.multiselect-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  padding: 0.375rem;
+  min-height: 2.5rem;
+  background: var(--ply-color-input-bg, colors.$color-white);
+  border: 1px solid var(--ply-color-input-border, colors.$color-input-border);
+  border-radius: variables.$border-radius;
+  cursor: text;
+  transition: border-color 0.15s ease;
+  align-items: center;
+
+  &:focus-within {
+    border-color: var(--ply-color-focus, colors.$color-blue);
+    box-shadow: 0 0 0 2px rgba(15, 98, 254, 0.3);
+  }
+
+  .multiselect.active & {
+    border-radius: variables.$border-radius variables.$border-radius 0 0;
+    border-bottom-color: var(--ply-border-color, colors.$color-gray);
+  }
+
+  input {
+    flex: 1;
+    min-width: 80px;
+    border: none;
+    outline: none;
+    padding: 0.25rem 0.375rem;
+    background: transparent;
+    color: var(--ply-color-body, colors.$color-body);
+    font-size: inherit;
+    font-family: inherit;
+    line-height: variables.$base-line;
+
+    &::placeholder {
+      color: var(--ply-color-placeholder, colors.$color-neutral-400);
+    }
+  }
+}
+
+.multiselect-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  background: var(--ply-bg-muted, colors.$color-gray);
+  color: var(--ply-color-body, colors.$color-body);
+  border-radius: variables.$border-radius;
+  font-size: variables.$font-size-sm;
+  line-height: 1.5;
+  white-space: nowrap;
+  max-width: 100%;
+
+  .multiselect-tag-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.5;
+    font-size: 1rem;
+    line-height: 1;
+    transition: opacity 0.1s ease;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+
+    &:focus {
+      outline: 2px solid var(--ply-color-focus, colors.$color-blue);
+      outline-offset: 1px;
+      border-radius: 2px;
+    }
+
+    &::before {
+      content: '\00D7';
+    }
+  }
+}
+
+.multiselect-results {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  z-index: 101;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: var(--ply-bg-surface, colors.$color-white);
+  border: 1px solid var(--ply-color-input-border, colors.$color-input-border);
+  border-top: none;
+  border-radius: 0 0 variables.$border-radius variables.$border-radius;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
+  max-height: 240px;
+  overflow-y: auto;
+
+  .multiselect.active & {
+    display: block;
+  }
+
+  li {
+    margin: 0;
+  }
+
+  .multiselect-item {
+    display: block;
+    padding: 0.5rem 0.75rem;
+    color: var(--ply-color-body, colors.$color-body);
+    cursor: pointer;
+    transition: background 0.1s ease;
+
+    &:hover,
+    &[aria-selected="true"] {
+      background: var(--ply-bg-muted, colors.$color-gray-light);
+    }
+
+    &.disabled {
+      opacity: 0.4;
+      cursor: default;
+
+      &:hover {
+        background: none;
+      }
+    }
+  }
+
+  li + li {
+    border-top: 1px solid var(--ply-border-color, colors.$color-gray-light);
+  }
+}
+

package/src/scss/components/_loader.scss

@@ -0,0 +1,24 @@
+@use "colors";
+@use "mixins";
+
+/* =Loader
+-----------------------------------------------------------------------------*/
+
+.loader,
+.loader::after {
+	@include mixins.square(5em);
+
+	border-radius: 100%;
+}
+
+.loader {
+	@include mixins.spinning();
+
+  margin: 5em auto;
+  font-size: .8em;
+  position: relative;
+  text-indent: -9999em;
+  border: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid colors.$color-white;
+  transform: translateZ(0);
+}

package/src/scss/components/_media-queries.scss

@@ -0,0 +1,9 @@
+// * ply media queries
+
+// Breakpoints
+$breakpoint-phone: 480px;
+$breakpoint-large-phone: 650px;
+$breakpoint-tablet: 767px;
+$breakpoint-small-desktop: 1024px;
+$breakpoint-large-screen: 1400px;
+$breakpoint-x-large-screen: 1800px;

package/src/scss/components/_mixins.scss

@@ -0,0 +1,387 @@
+@use "sass:math";
+
+@use "sass:color";
+@use "colors";
+@use "variables";
+
+@mixin clearfix() {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@keyframes spinning {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@mixin spinning($duration: 1s, $iteration: infinite) {
+  animation-duration: $duration;
+  animation-name: spinning;
+  animation-iteration-count: $iteration;
+}
+
+@mixin opacity($opacity: 100) {
+  opacity: $opacity * 0.01;
+}
+
+@mixin selection($r, $g, $b) {
+  ::selection { background: rgb($r, $g, $b); }
+  img::selection { background: transparent; }
+}
+
+@mixin square($size:100%) {
+  box-sizing: border-box;
+  display: block;
+  width: $size;
+  height: $size;
+}
+
+@mixin gradient($start: #555, $end: #333) {
+  background-color: color.mix($start, $end, 60%);
+  background-image: linear-gradient(to bottom, $start, $end); // The standard
+}
+
+@mixin border-top-radius($radius) {
+  border-top-right-radius: $radius;
+  border-top-left-radius: $radius;
+}
+
+@mixin border-right-radius($radius) {
+  border-bottom-right-radius: $radius;
+  border-top-right-radius: $radius;
+}
+
+@mixin border-bottom-radius($radius) {
+  border-bottom-right-radius: $radius;
+  border-bottom-left-radius: $radius;
+}
+
+@mixin border-left-radius($radius) {
+  border-bottom-left-radius: $radius;
+  border-top-left-radius: $radius;
+}
+
+@mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) {
+  border-top: 1px solid $top-color;
+  border-right: 1px solid $right-color;
+  border-bottom: 1px solid $bottom-color;
+  border-left: 1px solid $left-color;
+}
+
+@mixin retina-image($file, $type, $width, $height) {
+  background-image: url($file + '.' + $type);
+
+  @media only screen and (min-resolution: 2dppx) {
+    & {
+      background-image: url($file + '@2x.' + $type);
+      background-size: $width $height;
+    }
+  }
+}
+
+@mixin transition($transition: all linear .2s) {
+  transition: $transition;
+}
+
+@mixin blur($radius) {
+  filter: blur($radius);
+}
+
+@mixin rotate($deg) {
+    transform: rotate($deg);
+}
+
+@mixin arrow-top($color: #fff, $size: 5px, $left: 5px) {
+  &:after {
+    bottom: 100%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-bottom-color: $color;
+    border-width: $size;
+    left: $left;
+  }
+}
+
+@mixin arrow-bottom($color: #fff, $size: 5px, $left: 5px) {
+  &:after {
+    top: 100%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-top-color: $color;
+    border-width: $size;
+    left: $left;
+  }
+}
+
+@mixin arrow-left($color: #fff, $size: 5px, $top: 5px) {
+  &:after {
+    right: 100%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-right-color: $color;
+    border-width: $size;
+    top: $top;
+  }
+}
+
+@mixin arrow-right($color: #fff, $size: 5px, $top: 5px) {
+  &:after {
+    left: 100%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-left-color: $color;
+    border-width: $size;
+    top: $top;
+  }
+}
+
+@mixin close($r: 0, $g: 0, $b: 0) {
+  padding: 4px 6px;
+  line-height: 1;
+  font-size: 20px;
+  cursor: pointer;
+  color: rgba($r, $g, $b, 1);
+  text-decoration: none;
+  @include opacity(50);
+  &:before {
+    content: '\00D7';
+  }
+  &:hover {
+    @include opacity(100);
+  }
+}
+
+@mixin striped($color: rgba(255, 255, 255, .2), $angle: 45deg) {
+  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+}
+
+@mixin animation($animation) {
+  animation: $animation;
+}
+
+@mixin fadeIn($duration: .25s) {
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  animation-duration: $duration;
+  animation-name: fadeIn;
+  animation-iteration-count: 1;
+}
+
+// Grid
+@mixin column($num) {
+  width: math.div(math.div(variables.$grid-width - (variables.$grid-gutter-width * ($num - 1)), $num), (variables.$grid-width * 0.01)) * .01;
+}
+
+@mixin columns($factor, $num) {
+  width: (math.div(math.div(variables.$grid-width - (variables.$grid-gutter-width * ($num - 1)), $num), (variables.$grid-width * 0.01)) * $factor) + (math.div(variables.$grid-gutter-width, (variables.$grid-width * 0.01)) * ($factor - 1)) * .01;
+}
+
+// Buttons
+@mixin create-button($base-color, $hover-color, $text-color, $active-shadow: .5) {
+
+  color: rgba(color.channel($text-color, "red", $space: rgb), color.channel($text-color, "green", $space: rgb), color.channel($text-color, "blue", $space: rgb), 1);
+  background: $base-color;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: rgba(color.channel($text-color, "red", $space: rgb), color.channel($text-color, "green", $space: rgb), color.channel($text-color, "blue", $space: rgb), 1);
+    background: $hover-color;
+  }
+  
+  &:hover {
+    transform: translateY(0) scale(1.05, 1.05);
+  }
+
+  &:focus,
+  &:active {
+    transform: translateY(0) scale(.95, .95);
+    background: color.adjust($hover-color,$lightness: -5%);
+    box-shadow: 0 0 10px color.adjust($hover-color,$lightness: -15%) inset;
+  }
+
+  &.btn-active {
+    box-shadow: 0 1px 4px rgba(0, 0, 0, $active-shadow) inset;
+  }
+
+  &.btn-active,
+  &.btn-disabled,
+  &.btn[disabled] {
+    cursor: not-allowed;
+    color: rgba(color.channel($text-color, "red", $space: rgb), color.channel($text-color, "green", $space: rgb), color.channel($text-color, "blue", $space: rgb), .5);
+    background: $hover-color;
+
+    &:hover {
+      color: rgba(color.channel($text-color, "red", $space: rgb), color.channel($text-color, "green", $space: rgb), color.channel($text-color, "blue", $space: rgb), .5);
+      transform: scale(1,1);
+    }
+
+    &:active,
+    &:focus {
+      transform: scale(1,1);
+      box-shadow: 0 0 0;
+    }
+  }
+
+  &.btn-disabled,
+  &.btn[disabled] {
+    background: color.adjust($hover-color, $saturation: -50%);
+  }
+
+  &.btn-outline {
+    background: none;
+    border-color: $base-color;
+    color: $base-color;
+    &:hover {
+      color: rgba(color.channel($text-color, "red", $space: rgb), color.channel($text-color, "green", $space: rgb), color.channel($text-color, "blue", $space: rgb), 1);
+      background: $base-color;
+    }
+  }
+
+  &.btn-outline.btn[disabled],
+  &.btn-outline.btn-disabled {
+    background: none;
+    box-shadow: none;
+    color: rgba(color.channel($base-color, "red", $space: rgb), color.channel($base-color, "green", $space: rgb), color.channel($base-color, "blue", $space: rgb), .5);
+    border: 1px solid rgba(color.channel($base-color, "red", $space: rgb), color.channel($base-color, "green", $space: rgb), color.channel($base-color, "blue", $space: rgb), .3);
+  }
+  &.btn-outline.btn-active {
+    background: none;
+    color: rgba(color.channel($base-color, "red", $space: rgb), color.channel($base-color, "green", $space: rgb), color.channel($base-color, "blue", $space: rgb), 1);
+    border: none;
+    box-shadow: 0 1px 3px rgba(color.channel($hover-color, "red", $space: rgb), color.channel($hover-color, "green", $space: rgb), color.channel($hover-color, "blue", $space: rgb), .6) inset;
+  }
+}
+
+// Theme-aware button using CSS custom properties
+// $color-var: the custom property name (e.g. --ply-blue)
+// $text-color: text color for the filled button
+@mixin create-theme-button($color-var, $text-color: #fff) {
+  color: $text-color;
+  background: var(#{$color-var}-1);
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $text-color;
+    background: var(#{$color-var}-2);
+  }
+
+  &:hover {
+    transform: translateY(0) scale(1.05, 1.05);
+  }
+
+  &:focus,
+  &:active {
+    transform: translateY(0) scale(.95, .95);
+    background: var(#{$color-var}-3);
+    box-shadow: 0 0 10px rgba(0, 0, 0, .15) inset;
+  }
+
+  &.btn-active {
+    box-shadow: 0 1px 4px rgba(0, 0, 0, .5) inset;
+  }
+
+  &.btn-active,
+  &.btn-disabled,
+  &.btn[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+    background: var(#{$color-var}-2);
+
+    &:hover {
+      opacity: 0.5;
+      transform: scale(1,1);
+    }
+
+    &:active,
+    &:focus {
+      transform: scale(1,1);
+      box-shadow: 0 0 0;
+    }
+  }
+
+  &.btn-disabled,
+  &.btn[disabled] {
+    background: var(#{$color-var}-2);
+  }
+
+  &.btn-outline {
+    background: none;
+    border-color: var(#{$color-var}-1);
+    color: var(#{$color-var}-1);
+    opacity: 1;
+
+    &:hover {
+      color: $text-color;
+      background: var(#{$color-var}-1);
+    }
+  }
+
+  &.btn-outline.btn[disabled],
+  &.btn-outline.btn-disabled {
+    background: none;
+    box-shadow: none;
+    opacity: 0.4;
+    border: 1px solid var(#{$color-var}-1);
+    color: var(#{$color-var}-1);
+  }
+
+  &.btn-outline.btn-active {
+    background: none;
+    color: var(#{$color-var}-1);
+    border: none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .3) inset;
+  }
+}
+
+@mixin text-shadow($x: 2px, $y: 2px, $distance: 5px, $color: rgba(0,0,0,.5)) {
+    text-shadow: $x $y $distance $color;
+}
+
+@mixin box-shadow($x: 2px, $y: 2px, $distance: 5px, $color: rgba(0,0,0,.5)) {
+    box-shadow: $x $y $distance $color;
+}
+
+@mixin color-opacity($color: colors.$color-white, $opacity: 0.5) {
+  background-color: rgba($color, $opacity);
+}
+
+@mixin centered($space: auto) {
+  margin: $space auto;
+}
+
+@mixin uppercase() {
+  text-transform: uppercase;
+}

package/src/scss/components/_modal.scss

@@ -0,0 +1,73 @@
+/* =Modal
+-----------------------------------------------------------------------------*/
+#modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  margin: auto;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+  background-color: #000 !important;
+  @include opacity(30);
+  z-index: 100;
+}
+.modal-blur {
+  @include blur(3px);
+}
+.modal-box {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: 101;
+}
+.modal {
+  position: relative;
+  margin: auto;
+  margin-bottom: 20px;
+  padding: 0;
+  background: var(--ply-bg-surface, #fff);
+  color: var(--ply-color-body, #000);
+  box-shadow: 0 1px 70px rgba(0, 0, 0, .5);
+
+  & header {
+    padding: 30px 40px 5px 40px;
+    font-size: 18px;
+    font-weight: bold;
+  }
+  & section {
+    padding: 30px 40px 50px 40px;
+  }
+  & footer {
+    & button {
+      width: 100%;
+      border-radius: 0;
+    }
+  }
+}
+.modal-close {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  width: 30px;
+  height: 30px;
+  text-align: right;
+  color: var(--ply-color-secondary, #525252);
+  font-size: 30px;
+  font-weight: 300;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  &:hover {
+    color: var(--ply-color-body, #000);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--ply-color-focus, #0f62fe);
+    outline-offset: 2px;
+  }
+}