@expressivecss/expressive 0.1.0-alpha.3 → 0.2.0

package/src/scss/components/_tooltip.scss

@@ -1,49 +0,0 @@
-// M3 Expressive: Tooltip component tokens
-.material-tooltip,
-.md-tooltip {
-  // -- Component tokens --
-  --md-comp-tooltip-shape: var(--md-sys-shape-corner-extra-small, 4px);
-  --md-comp-tooltip-color: var(--md-sys-color-inverse-on-surface);
-  --md-comp-tooltip-container-color: var(--md-sys-color-inverse-surface);
-
-  padding: 0 8px;
-  border-radius: var(--md-comp-tooltip-shape);
-  color: var(--md-comp-tooltip-color);
-  background-color: var(--md-comp-tooltip-container-color);
-  font-family: var(--md-sys-typescale-body-small-font-family-name);
-  font-size: var(--md-sys-typescale-body-small-font-size);
-  line-height: var(--md-sys-typescale-body-small-line-height);
-  font-weight: var(--md-sys-typescale-body-small-font-weight);
-  min-height: 24px;
-  opacity: 0;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 400;
-  letter-spacing: 0.4px;
-  position: absolute;
-  max-width: 300px;
-  overflow: hidden;
-  left: 0;
-  top: 0;
-  pointer-events: none;
-  display: flex;
-  align-items: center;
-  visibility: hidden;
-  z-index: 2000;
-  transition: opacity var(--md-sys-motion-duration-short4, 0.2s) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
-}
-
-.backdrop {
-  position: absolute;
-  opacity: 0;
-  height: 7px;
-  width: 14px;
-  border-radius: 0 0 var(--md-sys-shape-corner-full, 50%) var(--md-sys-shape-corner-full, 50%);
-  background-color: var(--md-sys-color-inverse-surface);
-  z-index: -1;
-  transform-origin: 50% 0;
-  visibility: hidden;
-  transition: opacity var(--md-sys-motion-duration-short4, 0.2s) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
-}

package/src/scss/components/_video.scss

@@ -1,15 +0,0 @@
-// Responsive Videos
-.video-container {
-  position: relative;
-  padding-bottom: 56.25%;
-  height: 0;
-  overflow: hidden;
-
-  iframe, object, embed {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}

package/src/scss/expressive.scss

@@ -1,7 +0,0 @@
-@charset "UTF-8";
-
-@forward "foundation";
-@forward "utilities";
-@forward "layout";
-@forward "components";
-@forward "forms";

package/src/scss/forms/_checkboxes.scss

@@ -1,199 +0,0 @@
-/* Checkboxes */
-
-[type="checkbox"] {
-  /* Remove default checkbox */
-  &:not(:checked),
-  &:checked {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  // Text Label Style
-  + span:not(.lever) {
-    position: relative;
-    padding-left: 35px;
-    cursor: pointer;
-    display: inline-block;
-    height: 25px;
-    line-height: 25px;
-    font-size: 1rem;
-    user-select: none;
-  }
-
-  /* checkbox aspect */
-  + span:not(.lever):before,
-  &:not(.filled-in) + span:not(.lever):after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 18px;
-    height: 18px;
-    z-index: 0;
-    border: 2px solid var(--md-sys-color-on-surface-variant);
-    border-radius: 1px;
-    margin-top: 3px;
-    transition: .2s;
-  }
-
-  &:not(.filled-in) + span:not(.lever):after {
-    border: 0;
-    transform: scale(0);
-  }
-
-  &:not(:checked):disabled + span:not(.lever):before {
-    border: none;
-    background-color: var(--md-sys-color-on-surface);
-  }
-
-  // Focused styles
-  &.tabbed:focus + span:not(.lever):after {
-    transform: scale(1);
-    border: 0;
-    border-radius: 50%;
-    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12);
-    background-color: rgba(0, 0, 0, 0.12);
-  }
-
-  // Checked styles
-  &:checked {
-    + span:not(.lever):before {
-      top: -4px;
-      left: -5px;
-      width: 12px;
-      height: 22px;
-      border-top: 2px solid transparent;
-      border-left: 2px solid transparent;
-      border-right: 2px solid var(--md-sys-color-primary);
-      border-bottom: 2px solid var(--md-sys-color-primary);
-      transform: rotate(40deg);
-      backface-visibility: hidden;
-      transform-origin: 100% 100%;
-    }
-
-    &:disabled + span:before {
-      border-right: 2px solid var(--md-sys-color-on-surface);
-      border-bottom: 2px solid var(--md-sys-color-on-surface);
-    }
-  }
-
-  /* Indeterminate checkbox */
-  &:indeterminate {
-    + span:not(.lever):before {
-      top: -11px;
-      left: -12px;
-      width: 10px;
-      height: 22px;
-      border-top: none;
-      border-left: none;
-      border-right: 2px solid var(--md-sys-color-primary);
-      border-bottom: none;
-      transform: rotate(90deg);
-      backface-visibility: hidden;
-      transform-origin: 100% 100%;
-    }
-
-    // Disabled indeterminate
-    &:disabled + span:not(.lever):before {
-      border-right: 2px solid var(--md-sys-color-on-surface);
-      background-color: transparent;
-    }
-  }
-
-  // Filled in Style
-  &.filled-in {
-    // General
-    + span:not(.lever):after {
-      border-radius: 2px;
-    }
-
-    + span:not(.lever):before,
-    + span:not(.lever):after {
-      content: '';
-      left: 0;
-      position: absolute;
-      /* .1s delay is for check animation */
-      transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
-      z-index: 1;
-    }
-
-    // Unchecked style
-    &:not(:checked) + span:not(.lever):before {
-      width: 0;
-      height: 0;
-      border: 3px solid transparent;
-      left: 6px;
-      top: 10px;
-      transform: rotateZ(37deg);
-      transform-origin: 100% 100%;
-    }
-
-    &:not(:checked) + span:not(.lever):after {
-      height: 20px;
-      width: 20px;
-      background-color: transparent;
-      border: 2px solid var(--md-sys-color-on-surface-variant);
-      top: 0px;
-      z-index: 0;
-    }
-
-    // Checked style
-    &:checked {
-      + span:not(.lever):before {
-        top: 0;
-        left: 1px;
-        width: 8px;
-        height: 13px;
-        border-top: 2px solid transparent;
-        border-left: 2px solid transparent;
-        border-right: 2px solid  var(--md-sys-color-on-primary);
-        border-bottom: 2px solid  var(--md-sys-color-on-primary);
-        transform: rotateZ(37deg);
-        transform-origin: 100% 100%;
-      }
-
-      + span:not(.lever):after {
-        top: 0;
-        width: 20px;
-        height: 20px;
-        border: 2px solid var(--md-sys-color-primary);
-        background-color: var(--md-sys-color-primary);
-        z-index: 0;
-      }
-    }
-
-    // Focused styles
-    &.tabbed:focus + span:not(.lever):after {
-      border-radius: 2px;
-      border-color: var(--md-sys-color-on-surface-variant)r;
-      background-color: rgba(0, 0, 0, 0.12);
-    }
-
-    &.tabbed:checked:focus + span:not(.lever):after {
-      border-radius: 2px;
-      background-color: var(--md-sys-color-primary);
-      border-color: var(--md-sys-color-primary);
-    }
-
-    // Disabled style
-    &:disabled:not(:checked) + span:not(.lever):before {
-      background-color: transparent;
-      border: 2px solid transparent;
-    }
-
-    &:disabled:not(:checked) + span:not(.lever):after {
-      border-color: transparent;
-      background-color: var(--md-sys-color-on-surface);
-    }
-
-    &:disabled:checked + span:not(.lever):before {
-      background-color: transparent;
-    }
-
-    &:disabled:checked + span:not(.lever):after {
-      background-color: var(--md-sys-color-on-surface);
-      border-color: var(--md-sys-color-on-surface);
-    }
-  }
-}

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

@@ -1,360 +0,0 @@
-@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;
-  }
-}