ply-css 1.3.0

package/src/scss/components/_dropdown.scss

@@ -0,0 +1,68 @@
+@use "colors";
+
+/* =Dropdown
+-----------------------------------------------------------------------------*/
+.dropdown {
+  display: none;
+  position: absolute;
+  z-index: 102;
+  top: 0;
+  right: 0;
+  width: 250px;
+  color: var(--ply-color-body, colors.$color-black);
+  background: var(--ply-bg-surface, colors.$color-white);
+  box-shadow: var(--ply-shadow-2, 0 1px 5px rgba(0, 0, 0, .3));
+  overflow: auto;
+
+  & section {
+    max-height: 250px;
+    overflow: auto;
+    padding: 20px;
+  }
+  & footer {
+    padding: 20px;
+  }
+
+}
+ul.dropdown {
+
+  max-height: 300px;
+  list-style: none;
+  margin: 0;
+  line-height: 1.5;
+  font-size: 95%;
+  padding: 0;
+
+  & a {
+    display: block;
+    padding: 7px 15px;
+    text-decoration: none;
+    color: var(--ply-color-body, colors.$color-black);
+    &:hover {
+      background: var(--ply-bg-surface-alt, #eee);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--ply-color-focus, #0f62fe);
+      outline-offset: 2px;
+    }
+  }
+
+  & li.divider {
+    border-bottom: 1px solid var(--ply-border-color, #e2e2e2);
+  }
+
+}
+.caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: .3em;
+  vertical-align: middle;
+  border-top: 5px solid;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  &.caret-up {
+    border-top: 0;
+    border-bottom: 4px solid;
+  }
+}

package/src/scss/components/_filterbox.scss

@@ -0,0 +1,57 @@
+/* =Filterbox
+-----------------------------------------------------------------------------*/
+.filterbox {
+  position: relative;
+  & input {
+    padding-right: 30px;
+  }
+  & span {
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    right: 1px;
+    width: 26px;
+    height: 100%;
+    cursor: pointer;
+    &:after {
+      content: "";
+      display: inline-block;
+      position: relative;
+      top: 50%;
+      margin-left: 8px;
+      margin-top: -21px;
+      width: 0;
+      height: 0;
+      vertical-align: middle;
+      border-top: 5px solid rgba(0, 0, 0, .6);
+      border-right: 5px solid transparent;
+      border-left: 5px solid transparent;
+    }
+  }
+}
+.filterbox-list {
+  z-index: 1000;
+  position: absolute;
+  left: 0;
+  display: none;
+  margin: 0;
+  list-style: none;
+  background: #fff;
+  width: 100%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
+  max-height: 250px;
+  overflow: auto;
+  & li {
+    padding: 4px 10px;
+    color: #000;
+    cursor: pointer;
+    &:hover {
+      background: $color-gray-light;
+    }
+    &.active {
+      background: $color-blue;
+      color: #fff;
+    }
+  }
+}
+

package/src/scss/components/_flexible-embed.scss

@@ -0,0 +1,19 @@
+@use "variables";
+
+/* =Flexible Embed
+-----------------------------------------------------------------------------*/
+.flexible-embed {
+  height: 0;
+  padding-bottom: 56.25%; // ratio 16:9
+  position: relative;
+  margin-bottom: variables.$base-line;
+  & iframe,
+  & object,
+  & embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

package/src/scss/components/_forms.scss

@@ -0,0 +1,450 @@
+@use "sass:math";
+
+@use "sass:color";
+@use "colors";
+@use "helpers";
+@use "mixins";
+@use "variables";
+
+/* =Forms
+-----------------------------------------------------------------------------*/
+.form  {
+  .btn,
+  input[type="submit"].btn,
+  button,
+  input[type="submit"],
+  input[type="reset"] {
+    padding: variables.$padding-btn-in-forms;
+
+    &.btn-outline, {
+      padding: variables.$padding-btn-outline-in-forms;
+    }
+    &.btn-outline.bold {
+      padding: variables.$padding-btn-outline-bold-in-forms;
+    }
+  }
+
+  label {
+    cursor: pointer;
+
+    display: block;
+    margin-bottom: 0.25rem;
+
+    input[type="text"],
+    input[type="password"],
+    input[type="email"],
+    input[type="url"],
+    input[type="phone"],
+    input[type="tel"],
+    input[type="number"],
+    input[type="datetime"],
+    input[type="date"],
+    input[type="month"],
+    input[type="color"],
+    input[type="time"],
+    input[type="search"],
+    input[type="range"],
+    input[type="file"],
+    input[type="datetime-local"],
+    textarea,
+    select {
+      margin-top: variables.$margin;
+      width: 100%;
+    }
+  }
+
+  input[type="text"],
+  input[type="password"],
+  input[type="email"],
+  input[type="url"],
+  input[type="phone"],
+  input[type="tel"],
+  input[type="number"],
+  input[type="datetime"],
+  input[type="date"],
+  input[type="month"],
+  input[type="color"],
+  input[type="time"],
+  input[type="search"],
+  input[type="range"],
+  input[type="file"],
+  input[type="datetime-local"],
+  textarea,
+  select {
+    border-radius: variables.$border-radius;
+    display: block;
+    width: 100%;
+    padding: 0.5em 0.75em;
+  }
+}
+
+.form-inline,
+.form-inline-list {
+  input[type="text"],
+  input[type="password"],
+  input[type="email"],
+  input[type="url"],
+  input[type="phone"],
+  input[type="tel"],
+  input[type="number"],
+  input[type="datetime"],
+  input[type="date"],
+  input[type="month"],
+  input[type="color"],
+  input[type="time"],
+  input[type="search"],
+  input[type="range"],
+  input[type="file"],
+  input[type="datetime-local"],
+  textarea,
+  select {
+    display: inline-block;
+  }
+}
+
+.form-list,
+.form-inline,
+.form-inline-list {
+  margin: 0;
+  padding: 0;
+  margin-bottom: math.div(variables.$base-line, 1.5);
+  list-style: none;
+
+  label,
+  li,
+  li label {
+    display: inline-block;
+    margin-bottom: 0;
+  }
+}
+
+.form-inline-list {
+  li {
+    margin-bottom: 3px;
+
+    label {
+      margin-right: variables.$base-line * 0.5;
+    }
+  }
+}
+
+.form-list {
+  li {
+    margin-bottom: 6px;
+  }
+}
+
+.form-desc {
+  margin-top: 4px;
+  color: var(--ply-color-muted, rgba(0, 0, 0, .4));
+  font-size: variables.$font-size-small;
+  line-height: 1.4em;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="url"],
+input[type="phone"],
+input[type="tel"],
+input[type="number"],
+input[type="datetime"],
+input[type="date"],
+input[type="month"],
+input[type="color"],
+input[type="time"],
+input[type="search"],
+input[type="datetime-local"],
+textarea {
+  @include mixins.transition(border ease .5s);
+}
+
+// Fieldset
+fieldset {
+  border-radius: variables.$border-radius;
+
+  background-color: var(--ply-bg-surface);
+  padding: variables.$base-line;
+  margin-bottom: variables.$base-line;
+  border: 1px solid var(--ply-border-color);
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* States */
+.error,
+.success {
+  font-weight: bold;
+  font-size: variables.$font-size-small;
+}
+
+input.input-error,
+textarea.input-error,
+select.input-error,
+.input-error {
+  border-color: colors.$color-red;
+  box-shadow: 0 0 0 2px rgba(color.channel(colors.$color-red, "red", $space: rgb), color.channel(colors.$color-red, "green", $space: rgb), color.channel(colors.$color-red, "blue", $space: rgb), .3),0 1px 2px rgba(0, 0, 0, .2) inset;
+}
+
+input.input-success,
+textarea.input-success,
+select.input-success,
+.input-success  {
+  border-color: colors.$color-green;
+  box-shadow: 0 0 0 2px rgba(color.channel(colors.$color-green, "red", $space: rgb), color.channel(colors.$color-green, "green", $space: rgb), color.channel(colors.$color-green, "blue", $space: rgb), .3),0 1px 2px rgba(0, 0, 0, .2) inset;
+
+}
+
+input.input-gray,
+textarea.input-gray,
+select.input-gray,
+.input-gray {
+  border-color: colors.$color-gray-dark;
+  box-shadow: 0 0 0 2px rgba(color.channel(colors.$color-gray-dark, "red", $space: rgb), color.channel(colors.$color-gray-dark, "green", $space: rgb), color.channel(colors.$color-gray-dark, "blue", $space: rgb), .4), 0 1px 2px rgba(0, 0, 0, .2) inset;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="url"],
+input[type="phone"],
+input[type="tel"],
+input[type="number"],
+input[type="datetime"],
+input[type="date"],
+input[type="month"],
+input[type="color"],
+input[type="time"],
+input[type="search"],
+input[type="datetime-local"],
+textarea {
+  &:focus-visible {
+    outline: none;
+    border-color: colors.$color-blue;
+    box-shadow: 0 0 0 2px rgba(color.channel(colors.$color-blue, "red", $space: rgb), color.channel(colors.$color-blue, "green", $space: rgb), color.channel(colors.$color-blue, "blue", $space: rgb), .3), 0 1px 2px rgba(0, 0, 0, .2) inset;
+  }
+}
+
+/*
+  Search
+*/
+input.input-search,
+input[type="search"] {
+  padding-right: .5em;
+  padding-left: .5em;
+  margin-bottom: 0;
+  border-radius: 15px;
+}
+
+input.input-on-black {
+  border: 1px solid rgba(255, 255, 255, .1);
+  background: rgba(255, 255, 255, .35);
+
+  &::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, .6);
+  }
+
+  &::-moz-placeholder {
+    color: rgba(255, 255, 255, .6);
+  }
+
+  &:focus,
+  &.active {
+    border: 1px solid #fff;
+    background: #fff;
+    box-shadow: none;
+
+    &::-webkit-input-placeholder {
+      color: #aaa;
+    }
+    &::-moz-placeholder {
+      color: #aaa;
+    }
+  }
+}
+
+/* Sizes */
+.form .input-lg,
+input.input-lg[type],
+textarea.input-lg,
+select.input-lg {
+  font-size: variables.$font-size-xl;
+}
+
+.form .input-sm,
+input.input-sm[type],
+textarea.input-sm,
+select.input-sm {
+  font-size: variables.$font-size-small;
+}
+
+.form .input-xs,
+input.input-xs[type],
+textarea.input-xs,
+select.input-xs {
+  font-size: variables.$font-size-smaller;
+}
+
+/* Append & Prepend */
+.input-groups {
+  display: flex !important;
+  align-items: stretch;
+  margin-bottom: variables.$base-line;
+
+  .btn {
+    &:hover,
+    &:active {
+      transform: none;
+    }
+  }
+
+  input,
+  textarea,
+  select {
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0;
+    display: block !important;
+    margin-bottom: 0;
+    border-radius: variables.$border-radius;
+  }
+
+  // Zero out joining edges
+  input:not(:last-child),
+  textarea:not(:last-child),
+  select:not(:last-child) {
+    border-right: none;
+    border-radius: variables.$border-radius 0 0 variables.$border-radius;
+  }
+
+  input:not(:first-child),
+  textarea:not(:first-child),
+  select:not(:first-child) {
+    border-radius: 0 variables.$border-radius variables.$border-radius 0;
+  }
+
+  // Middle element (both prepend and append)
+  input:not(:first-child, :last-child),
+  textarea:not(:first-child, :last-child),
+  select:not(:first-child, :last-child) {
+    border-radius: 0;
+  }
+
+  .input-append,
+  .input-prepend {
+    display: flex;
+    align-items: center;
+    background-color: var(--ply-bg-surface-alt);
+    border: 1px solid var(--ply-color-input-border);
+    margin: 0;
+    padding: 0 0.75rem;
+    color: var(--ply-color-secondary, rgba(0, 0, 0, .6));
+    line-height: variables.$base-line;
+    font-size: variables.$font-size-small;
+    white-space: nowrap;
+  }
+
+  .input-prepend {
+    border-right: none;
+    border-radius: variables.$border-radius 0 0 variables.$border-radius;
+  }
+
+  .input-append {
+    border-left: none;
+    border-radius: 0 variables.$border-radius variables.$border-radius 0;
+
+    &:has(.btn) {
+      padding: 0;
+      border: none;
+    }
+
+    .btn {
+      display: flex;
+      align-items: center;
+      border-radius: 0 variables.$border-radius variables.$border-radius 0;
+      margin: 0;
+      border-left: none;
+      white-space: nowrap;
+
+      &[class*="outline"] {
+        border: 1px solid var(--ply-color-input-border);
+        border-left: none;
+      }
+    }
+  }
+
+  .btn-append {
+    display: flex;
+    align-items: stretch;
+    margin: 0;
+
+    .btn {
+      display: flex;
+      align-items: center;
+      border-radius: 0 variables.$border-radius variables.$border-radius 0;
+      margin: 0;
+      white-space: nowrap;
+
+      &[class*="outline"] {
+        border: 1px solid var(--ply-color-input-border);
+        border-left: none;
+      }
+    }
+  }
+}
+
+/* Select */
+.form select {
+  appearance: none;
+  background-color: var(--ply-color-input-bg);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23525252' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75em center;
+  background-size: 0.75em;
+  padding: 0.5em 2.5em 0.5em 0.75em;
+  font-size: 1em;
+  line-height: variables.$base-line;
+  border: 1px solid var(--ply-color-input-border);
+  color: var(--ply-color-body);
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: none;
+    border-color: var(--ply-color-focus, colors.$color-blue);
+    box-shadow: 0 0 0 2px rgba(15, 98, 254, 0.3);
+  }
+}
+
+/* Select — outlined */
+.form select.select-outlined,
+select.select-outlined {
+  appearance: none;
+  background-color: transparent;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23525252' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75em center;
+  background-size: 0.75em;
+  padding: 0.5em 2.5em 0.5em 0.75em;
+  border: 1px solid var(--ply-border-strong, colors.$color-neutral-300);
+  border-radius: variables.$border-radius;
+  color: var(--ply-color-body);
+  font-size: 1em;
+  line-height: variables.$base-line;
+  cursor: pointer;
+  width: 100%;
+  display: block;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+  &:hover {
+    border-color: var(--ply-color-body);
+  }
+
+  &:focus-visible {
+    outline: none;
+    border-color: var(--ply-color-focus, colors.$color-blue);
+    box-shadow: 0 0 0 1px var(--ply-color-focus, colors.$color-blue);
+  }
+}
+