@expressivecss/expressive 0.1.0-alpha.3

package/src/scss/components/_toast.scss

@@ -0,0 +1,70 @@
+@use '../foundation/variables' as *;
+@use '../utilities/elevation' as *;
+
+#toast-container,
+#snackbar-container {
+  display:block;
+  position: fixed;
+  z-index: 10000;
+
+  @media #{$small-and-down} {
+    min-width: 100%;
+    bottom: 0%;
+  }
+  @media #{$medium-only} {
+    left: 5%;
+    bottom: 7%;
+    max-width: 90%;
+  }
+  @media #{$large-and-up} {
+    top: 10%;
+    right: 7%;
+    max-width: 86%;
+  }
+}
+
+// M3 Expressive: Snackbar is the M3 alias for Toast
+.toast,
+.snackbar {
+  @extend .elevation-3;
+  border-radius: var(--md-sys-shape-corner-extra-small, 4px);
+  top: 35px;
+  width: auto;
+  margin-top: 10px;
+  position: relative;
+  max-width: 100%;
+  height: auto;
+  min-height: 48px;
+
+  padding-left: 16px;
+  padding-right: 12px;
+
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+
+  color: var(--md-sys-color-inverse-on-surface);
+  background-color: var(--md-sys-color-inverse-surface);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: default;
+
+  .toast-action,
+  .snackbar-action {
+    color: var(--md-sys-color-inverse-primary);
+    font-weight: 500;
+    margin-right: -25px;
+    margin-left: 3rem;
+  }
+
+  &.rounded{
+    border-radius: var(--md-sys-shape-corner-full, 24px);
+  }
+
+  @media #{$small-and-down} {
+    width: 100%;
+    border-radius: 0;
+  }
+}

package/src/scss/components/_tooltip.scss

@@ -0,0 +1,49 @@
+// 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/_transitions.scss

@@ -0,0 +1,19 @@
+/*********************
+  Transition Classes
+**********************/
+
+ul.staggered-list li { opacity: 0; }
+.fade-in { opacity: 0; transform-origin: 0 50%; }
+
+.scale-transition {
+  transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
+
+  &.scale-out {
+    transform: scale(0);
+    transition: transform .2s !important;
+  }
+
+  &.scale-in {
+    transform: scale(1);
+  }
+}

package/src/scss/components/_video.scss

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

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

package/src/scss/forms/_checkboxes.scss

@@ -0,0 +1,199 @@
+/* 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/_file-input.scss

@@ -0,0 +1,41 @@
+.file-field {
+  display: grid;
+  grid-template-columns: min-content auto;
+  gap: 10px;
+  //position: relative;
+
+  .file-path-wrapper {
+    overflow: hidden;
+  }
+
+  input.file-path { width: 100%; }
+
+  .btn {
+    height: 3rem;
+    line-height: 3rem;
+  }
+
+  span {
+    cursor: pointer;
+  }
+
+  input[type=file] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;    
+    cursor: pointer;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    font-size: 20px;    
+    filter: alpha(opacity=0);
+
+    // Needed to override webkit button
+    &::-webkit-file-upload-button {
+      display: none;
+    }
+  }
+}

package/src/scss/forms/_index.scss

@@ -0,0 +1,17 @@
+@forward 'input-fields';
+@forward 'radio-buttons';
+@forward 'checkboxes';
+@forward 'switches';
+@forward 'select';
+@forward 'file-input';
+@forward 'range';
+
+// Remove Focus Boxes
+select:focus {
+  outline: 1px solid var(--md-ref-palette-primary80);
+}
+
+label {
+  font-size: .8rem;
+  color: var(--md-sys-color-on-surface-variant);
+}