@splendidlabz/styles 2.3.2 → 3.0.0

package/src/Experimental/_SimplePricingPlan.scss

@@ -1,141 +0,0 @@
-// ========================
-// Plan
-// ========================
-.PlanLayout {
-  display: grid;
-  align-content: center;
-  gap: 1rem;
-
-  // We only create a 3-column layout after 1000px width
-  @media (width >= 1000px) {
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, auto);
-
-    > * {
-      grid-row: 1/-1;
-      grid-template-rows: subgrid;
-    }
-  }
-}
-
-.Plan {
-  --border-width: 4px;
-  --radius: 1rem;
-  --border-color: #ccc;
-  --bg-color: white;
-  --bg-color-darker: #fafafa;
-
-  display: grid;
-  gap: inherit;
-  padding: 1.5rem 1rem;
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius);
-  color: color(mine);
-  background-color: var(--bg-color);
-
-  svg path {
-    fill: color(mine);
-  }
-
-  // Plans have a different style below 1000px breakpoint
-  // We're using breakpoints because container queries don't work with subgrid
-  // Oh! But why don't we try after a certain amount then container queries? 🤔
-  @media (550px <= width < 1000px) {
-    grid-template-columns: 1.5fr 1fr;
-
-    .Plan-body {
-      grid-column: 2;
-      grid-row: span 2;
-      display: flex;
-      flex-flow: column;
-      justify-content: center;
-      margin: -1rem -0.5rem;
-      padding-inline: inherit;
-      border: 1px solid var(--border-color);
-      border-radius: calc(var(--radius) - 0.5rem);
-      background-color: var(--bg-color-darker);
-      place-self: stretch stretch;
-    }
-
-    &:hover .Plan-body,
-    &:focus .Plan-body {
-      background-color: var(--bg-color-darker-hover);
-    }
-  }
-
-  @media (width >= 1000px) or (width < 550px) {
-    .Plan-header {
-      text-align: center;
-    }
-  }
-}
-
-.Plan:not(.Plan--Recommended) {
-  &:hover,
-  &:focus {
-    --border-color: #99c48e;
-    --bg-color: #f8fff6;
-    --bg-color-darker: #f8fff6;
-    --bg-color-darker-hover: #ebf7e7;
-  }
-}
-
-.Plan-recommended {
-  position: absolute;
-  font-size: 0.6rem;
-  text-transform: uppercase;
-  background-color: var(--recommended-background-color);
-
-  @media (width <= 550px) {
-    transform: translateX(-50%);
-  }
-
-  // Show as a pill
-  @media (width < 1000px) {
-    top: calc(-0.5rem - 0.5lh + 2px); // Padding, line height and borders
-    display: inline-block;
-    margin-bottom: -1.5rem;
-    padding: 0.25rem 0.5rem;
-    border: 3px solid var(--border-color);
-    border-radius: 2em;
-    font-weight: 700;
-    letter-spacing: 0.05em;
-  }
-
-  // Show recommended above plan
-  @media (width >=1000px) {
-    position: absolute;
-    top: 0;
-    left: calc(-1 * var(--border-width));
-    right: calc(-1 * var(--border-width));
-    padding: 0.5rem;
-    border: var(--border-width) solid var(--border-color);
-    border-top-left-radius: var(--radius);
-    border-top-right-radius: var(--radius);
-    font-weight: bold;
-    letter-spacing: 0.075em;
-    transform: translateY(-100%);
-    text-align: center;
-  }
-}
-
-// ========================
-// Accents for plans
-// ========================
-.Plan--Recommended {
-  --border-color: #7198c8;
-  --recommended-background-color: #c5e2ff;
-  --bg-color: #edf6ff;
-  --bg-color-darker: #e1f0ff;
-  --bg-color-darker-hover: #d4e7fb;
-
-  &:hover,
-  &:focus {
-    background-color: #e7f3ff;
-  }
-
-  @media (width >= 1000px) {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-}

package/src/Forms/_Button.scss

@@ -1,106 +0,0 @@
-// ========================
-// Reset Button and base styles
-// ========================
-@layer components {
-  button,
-  [class*='Button'] {
-    flex-shrink: 0; // Prevents button from shrinking when used in flex elements
-    // align-self: start; // Prevents buttons from expanding to 100% size when used in flex elements. Specify align-self:stretch to expand to full width. This is problematic in Horizontal flow.
-    justify-content: center;
-    padding: 0.25em 1em;
-    border-width: var(--border-width, 1px);
-    border-color: var(--border-color);
-    border-radius: var(--radius);
-    font: var(--input-font, inherit);
-    color: var(--text-color, currentColor);
-    background-color: var(--bg-color, #eee);
-    text-decoration: none !important;
-    transition: var(--transition-values);
-    transition-property: var(--transition-props);
-    cursor: pointer;
-
-    * {
-      pointer-events: none;
-    }
-
-    svg path {
-      transition: var(--transition-values);
-      transition-property: var(--transition-props);
-    }
-
-    // Ruleset here is the same as .Fill.
-    // We are duplicating because CSS doesn't have Tailwind's @apply functionality.
-    &:hover {
-      border-color: var(--border-hover-color, var(--border-color));
-      color: var(--text-hover-color, var(--text-color));
-      background-color: var(--bg-hover-color, var(--bg-color));
-    }
-
-    // Fallback to hover color
-    &:focus {
-      border-color: var(
-        --border-focus-color,
-        var(--border-hover-color, var(--border-color))
-      );
-      color: var(
-        --text-focus-color,
-        var(--text-hover-color, var(--text-color))
-      );
-      background-color: var(
-        --bg-focus-color,
-        var(--bg-hover-color, var(--bg-color))
-      );
-    }
-
-    // Fallback to hover color
-    &:active {
-      border-color: var(
-        --border-active-color,
-        var(--border-hover-color, var(--border-color))
-      );
-      color: var(
-        --text-active-color,
-        var(--text-hover-color, var(--text-color))
-      );
-      background-color: var(
-        --bg-active-color,
-        var(--bg-hover-color, var(--bg-color))
-      );
-    }
-
-    // Fallback to hover color
-    &.selected,
-    &[aria-selected],
-    &[aria-expanded='true'] {
-      border-color: var(
-        --border-selected-color,
-        var(--border-hover-color, var(--border-color))
-      );
-      color: var(
-        --text-selected-color,
-        var(--text-hover-color, var(--text-color))
-      );
-      background-color: var(
-        --bg-selected-color,
-        var(--bg-hover-color, var(--bg-color))
-      );
-    }
-  }
-
-  // ========================
-  // Base Splendid Labz Buttons
-  // ========================
-  [class*='Button'] {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5em;
-  }
-}
-
-// For using Icons as the button content
-@layer components {
-  .Button-icon {
-    padding: var(--padding, 0.5em);
-    line-height: 1;
-  }
-}

package/src/Forms/_Combobox.scss

@@ -1,49 +0,0 @@
-.ListboxPopover {
-  padding: 0;
-  border: 0;
-}
-
-[role='listbox'] {
-  max-height: 15rem; // Default value. Specify as you wish in CSS
-  overflow-y: auto;
-
-  [role='option'] {
-    cursor: pointer; // Ensures cursor stays as pointer even when hovering over text
-    > * {
-      pointer-events: none;
-    }
-  }
-
-  [aria-selected='true'] {
-    background: var(--bg-selected-color, pink);
-  }
-}
-
-// @layer components {
-.AutocompleteOptions {
-  .ComboboxMatchedString {
-    font-weight: bold;
-  }
-}
-
-// Needs fixing again.
-// Transition for AutocompleteLoader and AutocompleteEmpty. Relies on :empty state and @starting-style for transitions.
-.AutocompleteLoader,
-.AutocompleteEmpty {
-  transition: var(--transition);
-  transition-property: var(--transition-props), display;
-  transition-behavior: allow-discrete;
-
-  @starting-style {
-    opacity: 0;
-  }
-
-  &:empty {
-    display: none;
-    opacity: 0;
-  }
-}
-
-.TimepickerOptions .Listbox li {
-  padding: 0.5rem 1rem;
-}

package/src/Forms/_FormBase.scss

@@ -1,43 +0,0 @@
-@layer components {
-  // Text based inputs
-  input:where(
-      [type='text'],
-      [type='search'],
-      [type='email'],
-      [type='password'],
-      [type='tel'],
-      [type='url']
-    ),
-  textarea,
-  select,
-  .Field {
-    display: block;
-    width: 100%;
-    border-radius: inherit;
-    font: inherit;
-    font-family: var(--input-font, inherit);
-    color: var(--text-color, currentColor);
-    background-color: var(--bg-color, transparent);
-  }
-
-  // Friendly password dots
-  // See https://pqina.nl/blog/styling-password-field-dots/
-  input[type='password'] {
-    font-family: Verdana, sans-serif;
-    letter-spacing: 0.125em;
-  }
-
-  .disabled,
-  .readonly,
-  [disabled],
-  [readonly] {
-    opacity: 0.5; // Super simple way. Styles can be improved.
-    &:where(input) {
-      cursor: not-allowed;
-    }
-
-    &:focus-visible {
-      outline-color: transparent;
-    }
-  }
-}

package/src/Forms/_FormControls.scss

@@ -1,95 +0,0 @@
-// ========================
-// Checkboxes and Radios
-// ========================
-@layer components {
-  .Legend + * {
-    margin-top: 0.25rem;
-  }
-
-  .Radio,
-  .Checkbox {
-    display: flex;
-    align-items: center;
-    gap: var(--gap, 0.5em);
-
-    :where(&) + :where(&) {
-      margin-top: 0.125em;
-    }
-
-    // For both checkbox and radios
-    > :where(.Checkmark, .Radiomark) {
-      display: grid;
-      place-items: center;
-
-      > * {
-        grid-column: 1;
-        grid-row: 1;
-      }
-
-      > input {
-        appearance: none;
-        display: grid;
-        place-content: center;
-        width: var(--width, var(--size, 1em));
-        height: var(--height, var(--size, 1em));
-        margin: 0;
-        padding: 0;
-        border: var(--border-width, 1px) var(--border-style, solid)
-          var(--border-color, black);
-        font: inherit;
-        background-color: var(--bg-color, transparent);
-      }
-
-      svg {
-        pointer-events: none;
-        width: 0.85em;
-        height: 0.85em;
-        fill: var(--fill-color, none);
-        transform: scale(0);
-        transition: transform var(--transition-values);
-
-        path {
-          stroke: var(--stroke-color, pink);
-        }
-      }
-    }
-
-    :where(.Checkmark, .Radiomark) ~ .TextInput {
-      display: none;
-    }
-
-    :where(.Checkmark:has(:checked), .Radiomark:has(:checked)) ~ .TextInput {
-      display: block;
-    }
-
-    // Checkboxes
-    :where(input[type='checkbox']) {
-      border-radius: var(--checkbox-radius, 0.25em);
-    }
-
-    // SVG
-    :where(input:checked) ~ svg {
-      transform: scale(1);
-    }
-
-    // Radios only
-    :where(input[type='radio']) {
-      border-radius: 50%;
-    }
-
-    // Default radio
-    :where(.radio) {
-      pointer-events: none;
-      width: 0.5em;
-      height: 0.5em;
-      border-radius: 50%;
-      background-color: var(--stroke-color, pink);
-      transform: scale(0);
-      transition: transform var(--transition-values);
-    }
-
-    :where(input[type='radio']:checked ~ .radio) {
-      transform: scale(1);
-    }
-  }
-}

package/src/Forms/_Range.scss

@@ -1,101 +0,0 @@
-// WIP. Not included.
-// Simple - https://codepen.io/ibaslogic/pen/oNQMWrM
-// Simple 2 - https://stackblitz.com/edit/multi-range-slider?file=src%2Fstyle.css,src%2Fcomponents%2FmultiRangeSlider%2FMultiRangeSlider.js
-// Complex but more real - https://codepen.io/vsync/pen/mdEJMLv
-// Ana tudor collection - https://codepen.io/collection/DgYaMj/?cursor=eyJwYWdlIjo4fQ==
-@layer components {
-}
-
-input[type='range'] {
-  appearance: none;
-  width: 100%;
-
-  /* New additions */
-  height: 6px;
-  border-radius: 15px;
-  outline: none;
-  background: #ccc;
-  cursor: pointer;
-}
-
-/* Thumb: webkit */
-input[type='range']::-webkit-slider-thumb {
-  /* removing default appearance */
-  appearance: none;
-  width: 15px;
-
-  /* creating a custom design */
-  height: 15px;
-  border: none;
-  border-radius: 50%;
-  background-color: #f50;
-
-  /* box-shadow: -407px 0 0 400px #f50; emove this line */
-  transition: 0.2s ease-in-out;
-}
-
-/* Thumb: Firefox */
-input[type='range']::-moz-range-thumb {
-  width: 15px;
-  height: 15px;
-  border: none;
-  border-radius: 50%;
-  background-color: #f50;
-
-  /* box-shadow: -407px 0 0 400px #f50; emove this line */
-  transition: 0.2s ease-in-out;
-}
-
-/* Hover, active & focus Thumb: Webkit */
-
-input[type='range']::-webkit-slider-thumb:hover {
-  box-shadow: 0 0 0 10px rgb(255 85 0 / 10%);
-}
-
-input[type='range']:active::-webkit-slider-thumb {
-  box-shadow: 0 0 0 13px rgb(255 85 0 / 20%);
-}
-
-input[type='range']:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 13px rgb(255 85 0 / 20%);
-}
-
-/* Hover, active & focus Thumb: Firfox */
-
-input[type='range']::-moz-range-thumb:hover {
-  box-shadow: 0 0 0 10px rgb(255 85 0 / 10%);
-}
-
-input[type='range']:active::-moz-range-thumb {
-  box-shadow: 0 0 0 13px rgb(255 85 0 / 20%);
-}
-
-input[type='range']:focus::-moz-range-thumb {
-  box-shadow: 0 0 0 13px rgb(255 85 0 / 20%);
-}
-
-/* =============
-Adding tick marks
-========================= */
-.range-slider {
-  flex: 1;
-}
-
-.sliderticks {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 10px;
-}
-
-.sliderticks span {
-  display: flex;
-  justify-content: center;
-  width: 1px;
-  height: 10px;
-  line-height: 40px;
-  background: #d3d3d3;
-}
-
-/* =============
-End tick marks
-========================= */

package/src/Forms/_Select.scss

@@ -1,114 +0,0 @@
-@layer components {
-  .Select {
-    :where(select) {
-      appearance: none;
-      color: var(--text-color);
-      background: var(--bg-color);
-
-      &:hover {
-        border-color: var(--border-hover-color, var(--border-color));
-        color: var(--text-hover-color, var(--text-color));
-        background-color: var(--bg-hover-color, var(--bg-color));
-
-        :where(svg path) {
-          fill: var(
-            --fill-hover-color,
-            var(--text-hover-color, var(--fill-color, var(--text-color)))
-          );
-          stroke: var(
-            --stroke-hover-color,
-            var(--text-hover-color, var(--stroke-color, var(--text-color)))
-          );
-        }
-      }
-
-      // Fallback to hover color
-      &:focus {
-        border-color: var(
-          --border-focus-color,
-          var(--border-hover-color, var(--border-color))
-        );
-        color: var(
-          --text-focus-color,
-          var(--text-hover-color, var(--text-color))
-        );
-        background-color: var(
-          --bg-focus-color,
-          var(--bg-hover-color, var(--bg-color))
-        );
-
-        :where(svg path) {
-          fill: var(
-            --fill-focus-color,
-            var(
-              --text-focus-color,
-              var(
-                --fill-hover-color,
-                var(--text-hover-color, var(--fill-color, var(--text-color)))
-              )
-            )
-          );
-          stroke: var(
-            --stroke-focus-color,
-            var(
-              --text-focus-color,
-              var(
-                --stroke-hover-color,
-                var(--text-hover-color, var(--stroke-color, var(--text-color)))
-              )
-            )
-          );
-        }
-      }
-    }
-
-    :where(select[multiple]),
-    :where(select[multiple]:focus) {
-      overflow: auto;
-      padding: 0;
-
-      :where(option) {
-        padding: 0.375em 0.75em;
-        color: var(--text-color);
-        background-image: linear-gradient(
-          0deg,
-          var(--bg-color) 0%,
-          var(--bg-color) 100%
-        );
-      }
-
-      :where(option:hover) {
-        color: var(--text-hover-color, var(--text-color));
-        background-image: linear-gradient(
-          0deg,
-          var(--bg-hover-color, var(--bg-color)) 0%,
-          var(--bg-hover-color, var(--bg-color)) 100%
-        );
-      }
-
-      :where(option:focus) {
-        color: var(
-          --text-focus-color,
-          var(--text-hover-color, var(--text-color))
-        );
-
-        background-image: linear-gradient(
-          0deg,
-          var(--bg-focus-color, var(--bg-hover-color, var(--bg-color))) 0%,
-          var(--bg-focus-color, var(--bg-hover-color, var(--bg-color))) 100%
-        );
-      }
-
-      :where(option:checked) {
-        color: var(--text-selected-color);
-        background-image: linear-gradient(
-          0deg,
-          var(--bg-selected-color,) 0%,
-          var(--bg-selected-color,) 100%
-        );
-      }
-    }
-  }
-}
-
-// The :selected state of the options is fairly customizable in Chrome, somewhat in Firefox, and not at all in Safari. See the CodePen demo for a section that can be uncommented to preview this.

package/src/Forms/_Switch.scss

@@ -1,66 +0,0 @@
-@layer components {
-  // ========================
-  // Switches
-  // Inspiration: https://tailwindui.com/components/application-ui/forms/toggles
-  // Variables Used
-  // --transition-values
-
-  // Local Variables
-  // --height
-  // --aspectRatio
-  // --gap
-  // --toggleFill: white;
-  // --bg-color: #aaa;
-  // --onStateBg: teal;
-  // ========================
-  // Border-width must have a unit here for this to work.
-  .Switch {
-    --width: 3.5em;
-    --height: 1.2em;
-    --inner-margin: 0.2em;
-
-    display: inline-flex;
-
-    input[type='checkbox'] {
-      appearance: none;
-      display: grid;
-      align-items: center;
-      width: var(--width);
-      padding: 0;
-      border-width: var(--border-width, 1px);
-      border-style: var(--border-style, solid);
-      border-color: var(--border-color, black);
-      border-radius: var(--height);
-      background-color: var(--bg-color, #eee);
-      transition: background-color var(--transition-values);
-    }
-
-    input[type='checkbox']:checked {
-      background-color: var(--bg-color, teal);
-    }
-
-    // This is the part that moves
-    input[type='checkbox']::before {
-      --translateX: calc(
-        var(--width) - var(--height) - var(--inner-margin) * 2 - var(
-            --border-width,
-            1px
-          ) * 2
-      );
-
-      content: '';
-      box-sizing: content-box;
-      width: var(--height);
-      height: var(--height);
-      margin: var(--inner-margin);
-      border-radius: 50%;
-      background-color: white;
-      box-shadow: var(--shadow);
-      transition: transform var(--transition-values);
-    }
-
-    input[type='checkbox']:checked::before {
-      transform: translateX(var(--translateX));
-    }
-  }
-}