@expressivecss/expressive 0.1.0-alpha.3

package/src/scss/forms/_input-fields.scss

@@ -0,0 +1,360 @@
+@use '../foundation/variables' as *;
+
+/* Style Placeholders */
+::placeholder {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+/* Text inputs */
+input:not([type]):not(.browser-default),
+input[type=text]:not(.browser-default),
+input[type=password]:not(.browser-default),
+input[type=email]:not(.browser-default),
+input[type=url]:not(.browser-default),
+input[type=time]:not(.browser-default),
+input[type=date]:not(.browser-default),
+input[type=datetime]:not(.browser-default),
+input[type=datetime-local]:not(.browser-default),
+input[type=month]:not(.browser-default),
+input[type=tel]:not(.browser-default),
+input[type=number]:not(.browser-default),
+input[type=search]:not(.browser-default),
+textarea.materialize-textarea {
+  outline: none;
+  color: var(--md-sys-color-on-background);
+  width: 100%;
+  font-size: $md_sys_typescale_body-large_size; //16px; // => 16 dp
+  height: 56px; // 56dp
+  background-color: transparent;
+}
+
+%invalid-input-style {
+  border-bottom: 2px solid var(--md-sys-color-error);
+  box-shadow: 0 1px 0 0 var(--md-sys-color-error);
+}
+
+%hidden-text > span {
+  display: none
+}
+
+%custom-error-message {
+  content: attr(data-error);
+  color: var(--md-sys-color-error);
+}
+
+.input-field {
+  --input-color: var(--md-sys-color-primary);
+
+  position: relative;
+  clear: both;
+
+  // Default
+
+  input, textarea {
+    box-sizing: border-box; /* https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100*/
+    padding: 0 16px;
+    padding-top: 20px;
+    //background-color: transparent; //background-color: var(--md-sys-color-surface);
+    border: none; // reset
+    border-radius: 4px; // md.sys.shape.corner.extra-small.top
+    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &:focus:not([readonly]) {
+      border-bottom: 2px solid var(--input-color);
+      padding-top: 20px + 1px; // add border-width
+    }
+
+    &:disabled, &[readonly="readonly"] {
+      color: rgba(var(--md_sys_color_on-surface), 0.38);
+      border-color: rgba(var(--md_sys_color_on-surface), 0.12);
+      background-color: rgba(var(--md_sys_color_on-surface), 0.04);
+    }
+
+    // Label
+    &:focus:not([readonly]) + label {
+      color: var(--input-color);
+    }
+    &:focus:not([readonly]) + label,
+    &:not([placeholder=' ']) + label,
+    &:not(:placeholder-shown) + label {
+      //font-size: 12px; // md.sys.typescale.body-small.size
+      // https://stackoverflow.com/questions/34717492/css-transition-font-size-avoid-jittering-wiggling
+      transform: scale(calc(12 / 16));
+      top: 8px;
+    }
+
+    &:disabled + label, &[readonly="readonly"] + label {
+      color: rgba(var(--md_sys_color_on-surface), 0.38);
+    }
+
+    // Hide helper text on data message
+    &.invalid ~ .supporting-text[data-error] {
+      @extend %hidden-text;
+    }
+
+    // Invalid Input Style
+    &.invalid {
+      @extend %invalid-input-style;
+    }
+
+    // Custom Error message
+    &.invalid ~ .supporting-text:after {
+      @extend %custom-error-message;
+    }
+
+    &.invalid ~ label,
+    &:focus.invalid ~ label {
+      color: var(--md-sys-color-error);
+    }
+  }
+
+  input::placeholder {
+    user-select: none;
+  }
+
+  & > label {
+    color: var(--md-sys-color-on-surface-variant);
+    user-select: none;
+    font-size: 16px;
+    position: absolute;
+    left: 16px;
+    top: 16px;
+    cursor: text;
+    transform-origin: top left;
+    transition:
+      left 0.2s ease-out,
+      top 0.2s ease-out,
+      transform 0.2s ease-out
+    ;
+  }
+
+  // Sub-Infos
+
+  .supporting-text {
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: 12px;
+    padding: 0 16px;
+    margin-top: 4px;
+  }
+
+  .character-counter {
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: 12px;
+    float: right;
+    padding: 0 16px;
+    margin-top: 4px;
+  }
+
+  .prefix {
+    position: absolute;
+    left: 12px;
+    top: 16px;
+    user-select: none;
+    display: flex;
+    align-self: center;
+
+    ~ input, ~ textarea {
+      padding-left: calc(12px + 24px + 16px);
+    }
+    ~ label {
+      left: calc(12px + 24px + 16px);
+    }
+  }
+
+  .suffix {
+    position: absolute;
+    right: 12px;
+    top: 16px;
+    user-select: none;
+
+    ~ input, ~ textarea {
+      padding-right: calc(12px + 24px + 16px);
+    }
+  }
+
+  // Outlined
+
+  // todo: use this approach for floating labels with outline
+  // https://dev.to/icyjoseph/use-more-html-elements-floating-from-field-37o9
+
+  &.outlined {
+
+    input, textarea {
+      padding-top: 0;
+      background-color: transparent; //(--md-sys-color-background);
+      border: 1px solid var(--md-sys-color-on-surface-variant);
+      border-radius: 4px; // md.sys.shape.corner.extra-small
+
+      &:focus:not([readonly]) {
+        border: 2px solid var(--input-color);
+        padding-top: 0;
+        margin-left: -1px; // subtract border-width
+
+      }
+
+      // Label
+      &:focus:not([readonly]) + label {
+        color: var(--input-color);
+      }
+      &:focus:not([readonly]) + label,
+      &:not([placeholder=' ']) + label,
+      &:not(:placeholder-shown) + label {
+        top: -8px;
+        left: 16px;
+        margin-left: -4px;
+        padding: 0 4px;
+        background-color: transparent; //var(--md-sys-color-background);
+      }
+
+      &:disabled, &[readonly="readonly"] {
+        color: rgba(var(--md_sys_color_on-surface), 0.38);
+        border-color: rgba(var(--md_sys_color_on-surface), 0.12);
+      }
+    }
+  }
+
+  // Error
+  &.error {
+    input, textarea {
+      border-color: var(--md-sys-color-error);
+
+      &:focus:not([readonly]) {
+        border-color: var(--md-sys-color-error);
+
+        + label {
+          color: var(--md-sys-color-error);
+        }
+      }
+    }
+    label {
+      color: var(--md-sys-color-error);
+    }
+    .supporting-text {
+      color: var(--md-sys-color-error);
+    }
+    .suffix {
+      color: var(--md-sys-color-error);
+    }
+  }
+}
+
+/* Inline */
+.inline {
+  display: inline-block;
+}
+
+/* Search Field */
+.searchbar {
+  .prefix {
+    position: absolute;
+    padding-left: 1rem;
+    top: 0;
+    user-select: none;
+    display: flex;
+    align-self: center;
+  }
+
+  & > input {
+    border-width: 0;
+    background-color: transparent;
+    padding-left: 3rem;
+  }
+
+  &.has-sidebar {
+    margin-left: 0;
+    @media #{$large-and-up} {
+      margin-left: 300px;
+    }
+  }
+}
+
+/*
+.input-field input[type=search] {
+  display: block;
+  line-height: inherit;
+
+  .nav-wrapper & {
+    height: inherit;
+    padding-left: 4rem;
+    width: calc(100% - 4rem);
+    border: 0;
+    box-shadow: none;
+  }
+  &:focus:not(.browser-default) {
+    border: 0;
+    box-shadow: none;
+  }
+  & + .label-icon {
+    transform: none;
+    left: 1rem;
+  }
+}
+*/
+
+/* Textarea */
+// Default textarea
+textarea {
+  width: 100%;
+  height: 3rem;
+  background-color: transparent;
+
+  &.materialize-textarea {
+    padding-top: 26px !important;
+    padding-bottom: 4px !important;
+    line-height: normal;
+    overflow-y: hidden; /* prevents scroll bar flash */
+    resize: none;
+    min-height: 3rem;
+    box-sizing: border-box;
+  }
+}
+
+// For textarea autoresize
+.hiddendiv {
+  visibility: hidden;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
+  padding-top: 1.2rem; /* prevents text jump on Enter keypress */
+  // Reduces repaints
+  position: absolute;
+  top: 0;
+  z-index: -1;
+}
+
+/* Autocomplete Items */
+.autocomplete-content {
+  li {
+    .highlight { color: var(--md-sys-color-on-background); }
+    img {
+      height: $dropdown-item-height - 10;
+      width: $dropdown-item-height - 10;
+      margin: 5px 15px;
+    }
+  }
+}
+
+/* Datepicker date input fields */
+.datepicker-date-input {
+  position: relative;
+  text-indent: -9999px;
+
+  &::after {
+    display: block;
+    position: absolute;
+    top: 1.10rem;
+    content: attr(data-date);
+    color: var(--input-color);
+    text-indent: 0;
+  }
+
+  &:focus-visible {
+    text-indent: 0;
+  }
+
+  &:focus-visible:after {
+    text-indent: -9999px;
+  }
+}

package/src/scss/forms/_radio-buttons.scss

@@ -0,0 +1,114 @@
+// Remove default Radio Buttons
+[type="radio"] {
+  &:not(:checked),
+  &:checked {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &:not(:checked) + span,
+  &:checked + span {
+    position: relative;
+    padding-left: 35px;
+    cursor: pointer;
+    display: inline-block;
+    height: 25px;
+    line-height: 25px;
+    font-size: 1rem;
+    transition: .28s ease;
+    user-select: none;
+  }
+
+  + span:before,
+  + span:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    margin: 4px;
+    width: 16px;
+    height: 16px;
+    z-index: 0;
+    transition: .28s ease;
+  }
+
+  /* Unchecked styles */
+  &:not(:checked) + span:before,
+  &:not(:checked) + span:after,
+  &:checked + span:before,
+  &:checked + span:after,
+  &.with-gap:checked + span:before,
+  &.with-gap:checked + span:after {
+    border-radius: 50%;
+  }
+
+  &:not(:checked) + span:before,
+  &:not(:checked) + span:after {
+    border: 2px solid var(--md-sys-color-on-surface-variant);
+  }
+
+  &:not(:checked) + span:after {
+    transform: scale(0);
+  }
+
+  /* Checked styles */
+  &:checked + span:before {
+    border: 2px solid transparent;
+  }
+
+  &:checked + span:after,
+  &.with-gap:checked + span:before,
+  &.with-gap:checked + span:after {
+    border: 2px solid var(--md-sys-color-primary);
+  }
+
+  &:checked + span:after,
+  &.with-gap:checked + span:after {
+    background-color: var(--md-sys-color-primary);
+  }
+
+  &:checked + span:after {
+    transform: scale(1.02);
+  }
+
+  /* Radio With gap */
+  &.with-gap:checked + span:after {
+    transform: scale(.5);
+  }
+
+  /* Focused styles */
+  &.tabbed:focus + span:before {
+    box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
+  }
+
+  /* Disabled Radio With gap */
+  &.with-gap:disabled:checked + span:before {
+    border: 2px solid var(--md-sys-color-on-surface);
+  }
+
+  &.with-gap:disabled:checked + span:after {
+    border: none;
+    background-color: var(--md-sys-color-on-surface);
+  }
+
+  /* Disabled style */
+  &:disabled:not(:checked) + span:before,
+  &:disabled:checked + span:before {
+    background-color: transparent;
+    border-color: var(--md-sys-color-on-surface);
+  }
+
+  &:disabled + span {
+    color: var(--md-sys-color-on-surface);
+  }
+
+  &:disabled:not(:checked) + span:before {
+    border-color: var(--md-sys-color-on-surface);
+  }
+
+  &:disabled:checked + span:after {
+    background-color: var(--md-sys-color-on-surface);
+    border-color: var(--md-sys-color-on-surface);
+  }
+}

package/src/scss/forms/_range.scss

@@ -0,0 +1,148 @@
+@use '../utilities/colors' as *;
+@use '../utilities/helpers' as *;
+
+.range-field {
+  position: relative;
+}
+
+input[type=range] {
+  @extend .no-select;
+  cursor: pointer;
+  position: relative;
+  background: linear-gradient(var(--md-sys-color-outline-variant), var(--md-sys-color-outline-variant));
+  border: none;
+  outline: none;
+  width: 100%;
+  margin: 15px 0;
+  padding: 0;
+  height: 3px;
+  appearance: none;
+  -webkit-appearance: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  + .thumb {
+    @extend .no-select;
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    left: 0;
+    border: none;
+    height: 0;
+    width: 0;
+    border-radius: 50%;
+    background-color: var(--md-sys-color-primary);
+    margin-left: 7px;
+
+    transform-origin: 50% 50%;
+    transform: rotate(-45deg);
+
+    .value {
+      display: block;
+      width: 30px;
+      text-align: center;
+      color: var(--md-sys-color-primary);
+      font-size: 0;
+      transform: rotate(45deg);
+    }
+
+    &.active {
+      border-radius: 50% 50% 50% 0;
+
+      .value {
+        color:  var(--md-sys-color-on-primary);
+        margin-left: -1px;
+        margin-top: 8px;
+        font-size: 10px;
+      }
+    }
+  }
+}
+
+// Shared
+@mixin range-track {
+  height: 3px;
+  @extend .surface-variant;
+  border: none;
+}
+
+@mixin range-thumb {
+  border: none;
+  height: 14px;
+  width: 14px;
+  border-radius: 50%;
+  background: var(--md-sys-color-primary);
+  transition: box-shadow .3s;
+}
+
+// WebKit
+input[type=range]::-webkit-slider-runnable-track {
+  @include range-track;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  @include range-thumb;
+  -webkit-appearance: none;
+  background-color: var(--md-sys-color-primary);
+  transform-origin: 50% 50%;
+  margin: -5px 0 0 0;
+}
+
+.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb {
+  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
+}
+
+// FireFox
+input[type=range]::-moz-range-track {
+  @include range-track;
+}
+
+input[type=range]::-moz-focus-inner {
+  border: 0;
+}
+
+input[type=range]::-moz-range-thumb {
+  @include range-thumb;
+  margin-top: -5px;
+}
+
+// hide the outline behind the border
+input[type=range]:-moz-focusring {
+  outline: 1px solid #fff;
+  outline-offset: -1px;
+}
+
+.keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb {
+  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
+}
+
+//------------------------------- Remove this?
+// IE 10+
+input[type=range]::-ms-track {
+  height: 3px;
+  // remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead
+  background: transparent;
+  // leave room for the larger thumb to overflow with a transparent border */
+  border-color: transparent;
+  border-width: 6px 0;
+  /*remove default tick marks*/
+  color: transparent;
+}
+input[type=range]::-ms-fill-lower,
+input[type=range]::-moz-range-progress {
+  background: var(--md-sys-color-primary);
+}
+input[type=range]::-ms-fill-upper,
+input[type=range]::-moz-range-track {
+  background: var(--md-sys-color-shadow-light);
+}
+input[type=range]::-ms-thumb {
+  @include range-thumb;
+}
+//--------------------------------
+
+.keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {
+  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
+}

package/src/scss/forms/_select.scss

@@ -0,0 +1,108 @@
+@use '../foundation/variables' as *;
+
+select {
+  background-color: var(--md-sys-color-surface);
+  width: 100%;
+  padding: 5px;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 2px;
+  height: 3rem;
+
+  // TODO: Change to ".select" and not use tag name directly
+  // Keep selects useable without javascript
+
+  &.browser-default {
+    opacity: 1;
+    color: var(--md-sys-color-on-background);
+  }
+
+  &:disabled {
+    color: var(--md-sys-color-on-surface);
+  }
+}
+
+.select-wrapper {
+  position: relative;
+
+  &:focus-within {
+    outline: 2px solid var(--md-sys-color-primary);
+    border-radius: 4px;
+  }
+
+  .caret {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    z-index: 0;
+    fill: var(--md-sys-color-on-background);
+    pointer-events: none;
+  }
+
+  // Hide select with overflow hidden instead of using display none
+  // (this prevents form validation errors with hidden form elements)
+  .hide-select {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    z-index: -1;
+  }
+
+  &.disabled {
+    + label {
+      color: var(--md-sys-color-on-surface);
+    }
+    .caret {
+      fill: var(--md-sys-color-on-surface);
+    }
+  }
+
+  input.select-dropdown:disabled {
+    color: var(--md-sys-color-on-surface);
+    cursor: default;
+    user-select: none;
+  }
+
+  i {
+    color: var(--md-sys-color-on-surface);
+  }
+}
+
+.select-dropdown {
+  li {
+    &.disabled,
+    &.disabled > span,
+    &.optgroup {
+      color: var(--md-sys-color-on-surface);
+      //background-color: transparent;
+    }
+
+    // Icons
+    img {
+      height: $dropdown-item-height - 10;
+      width: $dropdown-item-height - 10;
+      margin: 5px 15px;
+      float: right;
+    }
+
+    // Optgroup styles
+    &.optgroup {
+      border-top: 1px solid rgba(0, 0, 0, 0.04);
+
+      &.selected > span {
+        color: var(--md-sys-color-on-background);
+      }
+
+      & > span {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      & ~ li.optgroup-option {
+        padding-left: 1rem;
+      }
+    }
+  }
+}