@expressivecss/expressive 0.1.0-alpha.3 → 0.2.0

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

@@ -1,114 +0,0 @@
-// 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

@@ -1,148 +0,0 @@
-@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

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

package/src/scss/forms/_switches.scss

@@ -1,127 +0,0 @@
-@use '../utilities/colors' as *;
-
-.switch {
-  --track-height: 32px;
-  --track-width: 52px;
-  --border-width: 2px;
-  --size-off: 16px;
-  --size-on: 24px;
-  --icon-size: 16px;
-  --gap-on: calc(((var(--track-height) - var(--size-on)) / 2) - var(--border-width));
-  --gap-off: calc(((var(--track-height) - var(--size-off)) / 2) - var(--border-width));
-
-  &, & * {
-    -webkit-tap-highlight-color: transparent;
-    user-select: none;
-  }
-
-  label {
-    cursor: pointer;
-
-    input[type=checkbox] {
-      opacity: 0;
-      width: 0;
-      height: 0;
-
-      // CHECKED
-      // Track
-      &:checked + .lever {
-        background-color: var(--md-sys-color-primary);
-        border-color:  var(--md-sys-color-primary);
-
-        // Dot
-        &:before, &:after {
-          top: var(--gap-on);
-          left: calc(var(--track-width) - var(--size-on) - var(--gap-on) - 2 * var(--border-width));
-          width: var(--size-on);
-          height: var(--size-on);
-        }
-        &:after {
-          @extend .surface;
-        }
-      }
-
-      // Disabled Styles
-      &[disabled] + .lever {
-        cursor: default;
-        opacity: 0.5;
-      }
-
-      // Interaction states (non-disabled)
-      &:not(:disabled) {
-        ~ .lever:active:before,
-        &.tabbed:focus ~ .lever::before,
-        ~ .lever:hover::before {
-          transform: scale(2.4);
-        }
-
-        // Unchecked hover
-        ~ .lever:hover::before {
-          background-color: rgba(0, 0, 0, 0.04);
-        }
-
-        // Unchecked active/focus
-        ~ .lever:active:before,
-        &.tabbed:focus ~ .lever::before {
-          background-color: rgba(0, 0, 0, 0.12);
-        }
-
-        // Checked hover
-        &:checked ~ .lever:hover::before {
-          background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
-        }
-
-        // Checked active/focus
-        &:checked ~ .lever:active::before,
-        &:checked.tabbed:focus ~ .lever::before {
-          background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
-        }
-      }
-    }
-
-    .lever {
-      content: "";
-      display: inline-block;
-      position: relative;
-      width: var(--track-width);
-      height: var(--track-height);
-      border-style: solid;
-      border-width: 2px;
-      border-color: var(--md-sys-color-outline);
-
-      //@extend .surface-variant;
-      background-color: var(--md-sys-color-surface-variant);
-
-      border-radius: 15px;
-      margin-right: 10px;
-      transition: background 0.3s ease;
-      vertical-align: middle;
-      margin: 0 16px;
-
-      // DOT
-      &:before, &:after {
-        content: "";
-        position: absolute;
-        display: inline-block;
-        width: var(--size-off);
-        height: var(--size-off);
-        border-radius: 50%;
-
-        left: var(--gap-off);
-        top: var(--gap-off);
-
-        transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
-      }
-
-      // NOT CHECKED [DOT]
-      &:after {
-        @extend .outline;
-        height: var(--size-off);
-        width: var(--size-off);
-
-        //@extend .surface-variant;
-        //box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-      }
-    }
-  }
-}

package/src/scss/foundation/_base.scss

@@ -1,71 +0,0 @@
-@use './variables' as *;
-
-html {
-  box-sizing: border-box;
-}
-
-*, *:before, *:after {
-  box-sizing: inherit;
-}
-
-body {
-  background-color: var(--md-sys-color-background);
-  color: var(--md-sys-color-on-background);
-}
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: $font-stack;
-}
-
-a {
-  color: $link-color;
-  text-decoration: none;
-  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
-}
-
-//  Blockquote
-blockquote { margin: 20px 0; padding-left: 1.5rem; border-left: 5px solid var(--md-sys-color-primary); }
-
-// Icon Styles
-i {
-  line-height: inherit;
-  &.left {
-    float: left;
-    margin-left: -8px;
-    // margin-right: 15px;
-  }
-  &.right {
-    float: right;
-    // margin-left: 15px;
-  }
-  &.tiny {
-    font-size: 1rem;
-  }
-  &.small {
-    font-size: 2rem;
-  }
-  &.medium {
-    font-size: 4rem;
-  }
-  &.large {
-    font-size: 6rem;
-  }
-}
-
-// Modal
-html.noscroll {
-  position: fixed;
-  overflow-y: scroll;
-  width: 100%;
-}
-
-// Images
-img.responsive-img,
-video.responsive-video {
-  max-width: 100%;
-  height: auto;
-}