@expressivecss/expressive 0.1.0-alpha.3 → 0.2.0

package/src/{scss → sass}/components/_preloader.scss

@@ -1,12 +1,11 @@
-@use '../foundation/variables' as *;
-@use '../utilities/colors' as *;
+@use "../abstracts" as *;
 
 .progress {
   position: relative;
   height: 4px;
   display: block;
   width: 100%;
-  @extend .surface-variant;
+  background-color: var(--md-sys-color-surface-variant);
   border-radius: 4px;
   margin: $element-top-margin 0 $element-bottom-margin 0;
   overflow: hidden;
@@ -131,15 +130,10 @@
 
   &.active {
     /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
-    -webkit-animation: container-rotate 1568ms linear infinite;
     animation: container-rotate 1568ms linear infinite;
   }
 }
 
-@-webkit-keyframes container-rotate {
-  to { -webkit-transform: rotate(360deg) }
-}
-
 @keyframes container-rotate {
   to { transform: rotate(360deg) }
 }
@@ -173,39 +167,37 @@
 }
 
 /**
- * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
+ * NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
  *
  * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
  * guarantee that the animation will start _exactly_ after that value. So we avoid using
  * animation-delay and instead set custom keyframes for each color (as redundant as it
  * seems).
  *
- * We write out each animation in full (instead of separating animation-name,
- * animation-duration, etc.) because under the polyfill, Safari does not recognize those
- * specific properties properly, treats them as -webkit-animation, and overrides the
- * other animation rules. See https://github.com/Polymer/platform/issues/53.
+ * The second half of this note explained why each animation is written as the
+ * `animation` shorthand rather than as separate animation-name/-duration
+ * longhands: the Web Animations polyfill on old Safari mistook the longhands
+ * for -webkit-animation. That polyfill is long gone, and the prefixed
+ * declarations it was about have been removed - the shorthand is kept only
+ * because it is shorter here. See github.com/Polymer/platform/issues/53.
  */
 .active .spinner-layer.spinner-blue {
   /* durations: 4 * ARCTIME */
-  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
 }
 
 .active .spinner-layer.spinner-red {
   /* durations: 4 * ARCTIME */
-  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
 }
 
 .active .spinner-layer.spinner-yellow {
   /* durations: 4 * ARCTIME */
-  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
 }
 
 .active .spinner-layer.spinner-green {
   /* durations: 4 * ARCTIME */
-  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
 }
 
@@ -216,21 +208,9 @@
 .active .spinner-layer.spinner-green-only {
   /* durations: 4 * ARCTIME */
   opacity: 1;
-  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
 }
 
-@-webkit-keyframes fill-unfill-rotate {
-  12.5% { -webkit-transform: rotate(135deg);  } /* 0.5 * ARCSIZE */
-  25%   { -webkit-transform: rotate(270deg);  } /* 1   * ARCSIZE */
-  37.5% { -webkit-transform: rotate(405deg);  } /* 1.5 * ARCSIZE */
-  50%   { -webkit-transform: rotate(540deg);  } /* 2   * ARCSIZE */
-  62.5% { -webkit-transform: rotate(675deg);  } /* 2.5 * ARCSIZE */
-  75%   { -webkit-transform: rotate(810deg);  } /* 3   * ARCSIZE */
-  87.5% { -webkit-transform: rotate(945deg);  } /* 3.5 * ARCSIZE */
-  to    { -webkit-transform: rotate(1080deg); } /* 4   * ARCSIZE */
-}
-
 @keyframes fill-unfill-rotate {
   12.5% { transform: rotate(135deg);  } /* 0.5 * ARCSIZE */
   25%   { transform: rotate(270deg);  } /* 1   * ARCSIZE */
@@ -242,15 +222,6 @@
   to    { transform: rotate(1080deg); } /* 4   * ARCSIZE */
 }
 
-@-webkit-keyframes blue-fade-in-out {
-  from { opacity: 1; }
-  25% { opacity: 1; }
-  26% { opacity: 0; }
-  89% { opacity: 0; }
-  90% { opacity: 1; }
-  100% { opacity: 1; }
-}
-
 @keyframes blue-fade-in-out {
   from { opacity: 1; }
   25% { opacity: 1; }
@@ -260,14 +231,6 @@
   100% { opacity: 1; }
 }
 
-@-webkit-keyframes red-fade-in-out {
-  from { opacity: 0; }
-  15% { opacity: 0; }
-  25% { opacity: 1; }
-  50% { opacity: 1; }
-  51% { opacity: 0; }
-}
-
 @keyframes red-fade-in-out {
   from { opacity: 0; }
   15% { opacity: 0; }
@@ -276,14 +239,6 @@
   51% { opacity: 0; }
 }
 
-@-webkit-keyframes yellow-fade-in-out {
-  from { opacity: 0; }
-  40% { opacity: 0; }
-  50% { opacity: 1; }
-  75% { opacity: 1; }
-  76% { opacity: 0; }
-}
-
 @keyframes yellow-fade-in-out {
   from { opacity: 0; }
   40% { opacity: 0; }
@@ -292,14 +247,6 @@
   76% { opacity: 0; }
 }
 
-@-webkit-keyframes green-fade-in-out {
-  from { opacity: 0; }
-  65% { opacity: 0; }
-  75% { opacity: 1; }
-  90% { opacity: 1; }
-  100% { opacity: 0; }
-}
-
 @keyframes green-fade-in-out {
   from { opacity: 0; }
   65% { opacity: 0; }
@@ -320,11 +267,11 @@
   height: 100%;
   overflow: hidden;
   border-color: inherit;
+}
 
-  .circle {
-    width: 1000%;
-    left: -450%;
-  }
+.gap-patch .circle {
+  width: 1000%;
+  left: -450%;
 }
 
 .circle-clipper {
@@ -343,7 +290,6 @@
     border-color: inherit;
     border-bottom-color: transparent !important;
     border-radius: 50%;
-    -webkit-animation: none;
     animation: none;
     position: absolute;
     top: 0;
@@ -354,37 +300,25 @@
   &.left .circle {
     left: 0;
     border-right-color: transparent !important;
-    -webkit-transform: rotate(129deg);
     transform: rotate(129deg);
   }
   &.right .circle {
     left: -100%;
     border-left-color: transparent !important;
-    -webkit-transform: rotate(-129deg);
     transform: rotate(-129deg);
   }
 }
 
 
 
-.active .circle-clipper {
-  &.left .circle {
-    /* duration: ARCTIME */
-    -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-    animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-  }
-
-  &.right .circle {
-    /* duration: ARCTIME */
-    -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-    animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-  }
+.active .circle-clipper.left .circle {
+  /* duration: ARCTIME */
+  animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
 }
 
-@-webkit-keyframes left-spin {
-  from { -webkit-transform: rotate(130deg); }
-  50% { -webkit-transform: rotate(-5deg); }
-  to { -webkit-transform: rotate(130deg); }
+.active .circle-clipper.right .circle {
+  /* duration: ARCTIME */
+  animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
 }
 
 @keyframes left-spin {
@@ -393,12 +327,6 @@
   to { transform: rotate(130deg); }
 }
 
-@-webkit-keyframes right-spin {
-  from { -webkit-transform: rotate(-130deg); }
-  50% { -webkit-transform: rotate(5deg); }
-  to { -webkit-transform: rotate(-130deg); }
-}
-
 @keyframes right-spin {
   from { transform: rotate(-130deg); }
   50% { transform: rotate(5deg); }
@@ -407,15 +335,9 @@
 
 #spinnerContainer.cooldown {
   /* duration: SHRINK_TIME */
-  -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
   animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
 }
 
-@-webkit-keyframes fade-out {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}
-
 @keyframes fade-out {
   from { opacity: 1; }
   to { opacity: 0; }

package/src/{scss → sass}/components/_pulse.scss

@@ -1,3 +1,5 @@
+@use "../abstracts" as *;
+
 .pulse {
   overflow: visible;
   position: relative;

package/src/sass/components/_pushpin.scss

@@ -0,0 +1,11 @@
+@use "../abstracts" as *;
+
+// Paired with components/pushpin.ts, which swaps these classes on scroll.
+
+.pin-top, .pin-bottom {
+  position: relative;
+}
+
+.pinned {
+  position: fixed !important;
+}

package/src/{scss → sass}/components/_sidenav.scss

@@ -1,9 +1,6 @@
-@use '../foundation/variables' as *;
-@use '../utilities/elevation' as *;
+@use "../abstracts" as *;
 
-// M3 Expressive: Navigation Drawer is the M3 alias for Sidenav
-.sidenav,
-.navigation-drawer {
+.sidenav {
   --sidenav-width: 300px;
   --sidenav-font-size: 14px;
   --sidenav-padding: 16px;
@@ -22,12 +19,12 @@
   overflow-y: auto;
   will-change: transform;
   backface-visibility: hidden;
-  transform: translateX(-105%);
+  transform: translateX(-105%); 
   user-select: none;
-
+  
   color: var(--md-sys-color-on-secondary-container);
-  background-color: var(--md-sys-color-surface-container, var(--md-sys-color-surface));
-  @extend .elevation-1;
+  background-color: var(--md-sys-color-surface);
+  @include z-depth("1");
 
   // Right Align
   &.right-aligned {
@@ -41,54 +38,70 @@
     margin: 0;
   }
 
+  /* Hover only on top row */
+  /*a:hover {
+    //color: red;
+    //background-color: var(--md-sys-color-on-secondary-container);
+    //md.sys.color.on-secondary-container
+  }*/
   a:focus {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+    background-color: rgba(0, 0, 0, 0.12);
   }
 
   li.active > a:not(.collapsible-header):not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating)  {
-    background-color: color-mix(in srgb, var(--md-sys-color-secondary) 10%, transparent);
+    //color: var(--md-sys-color-on-secondary-container); //var(--md-sys-color-on-secondary-container);
+    //background-color: var(--md-sys-color-secondary-container);
+    background-color: color-mix(in oklab, var(--md-sys-color-secondary) 10%, transparent);
   }
 
-  .collapsible-body {
-    padding: 0;
-
-    & > ul { padding-left: 10px; }
-  }
+  .collapsible-body > ul { padding-left: 10px; }
 
-  li {
+  li {    
     list-style: none;
     display: grid;
     align-content: center;
+  }
+  li > a {
+    /* https://stackoverflow.com/questions/5848090/full-width-hover-background-for-nested-lists */
+    //padding-left: calc(100% + var(--sidenav-padding));
+    //margin-left: -100%;
+    margin: 0 12px;
+    padding: 0 var(--sidenav-padding);
+    //padding-left: var(--sidenav-padding);
+    // Truncate too long text
+    /*
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    */
+    display: flex;
+    height: var(--sidenav-item-height);
+    font-size: var(--sidenav-font-size);
+    font-weight: 500;
+    align-items: center;
+    overflow: hidden;
+    border-radius: 100px;
 
-    & > a {
-      margin: 0 12px;
-      padding: 0 var(--sidenav-padding);
-      display: flex;
-      height: var(--sidenav-item-height);
-      font-size: var(--sidenav-font-size);
-      font-weight: 500;
-      align-items: center;
-      overflow: hidden;
-      border-radius: var(--md-sys-shape-corner-full, 100px);
-
-      &:not(.btn):not(.btn-flat):not(.btn-large):not(.btn-floating) {
-        color: var(--md-sys-color-on-secondary-container);
-        &:hover {
-          background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
-        }
+    &:not(.btn):not(.button):not(.btn-flat):not(.btn-large):not(.btn-floating) {
+      color: var(--md-sys-color-on-secondary-container);
+      &:hover {
+        //color: var(--md-sys-color-on-secondary-container);
+        //md.sys.color.on-secondary-container
+        background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
       }
+    }
 
-      &.btn, &.btn-large, &.btn-flat, &.btn-floating {
-        margin: 10px 15px;
-      }
+    &.btn, &.button, &.btn-large, &.btn-flat, &.btn-floating {
+      margin: 10px 15px;
+    }
 
-      /* TODO: Use special class in future like "mw-icon" */
-      & > .material-icons, & > .material-symbols-outlined,
-      & > .material-symbols-rounded, & > .material-symbols-sharp {
-        display: inline-flex;
-        vertical-align: middle;
-        margin-right: 12px;
-      }
+    /* TODO: Use special class in future like "mw-icon" */
+    & > .material-icons, & > .material-symbols-outlined,
+    & > .material-symbols-rounded, & > .material-symbols-sharp {
+      display: inline-flex;
+      vertical-align: middle;
+      margin-right: 12px;
     }
   }
 
@@ -155,38 +168,37 @@
       font-weight: 400;
     }
   }
+}
 
-  // Fixed Sidenav shown
-  &.sidenav-fixed,
-  &.navigation-drawer-fixed {
-    left: 0;
-    transform: translateX(0);
-    position: fixed;
+// Touch interaction
+.drag-target {
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 998;
 
-    &.right-aligned {
-      right: 0;
-      left: auto;
-    }
+  &.right-aligned {
+    right: 0;
   }
+}
 
-  // Sidenav collapsible styling (Taken from Collapsible.scss)
-  &, &.sidenav-fixed, &.navigation-drawer-fixed {
-    .collapsible {
-      border: none;
-      box-shadow: none;
-    }
-    .collapsible-header {
-      border: none;
-    }
-    .collapsible-body {
-      border: none;
-    }
+// Fixed Sidenav shown
+.sidenav.sidenav-fixed {
+  left: 0;
+  transform: translateX(0);
+  position: fixed;
+
+  &.right-aligned {
+    right: 0;
+    left: auto;
   }
+}
 
-  // Fixed Sidenav hide on smaller
-  @media #{$medium-and-down} {
-    &.sidenav-fixed,
-    &.navigation-drawer-fixed {
+// Fixed Sidenav hide on smaller
+@include bp-down("large") {
+  .sidenav {
+    &.sidenav-fixed {
       transform: translateX(-105%);
 
       &.right-aligned {
@@ -202,21 +214,11 @@
   }
 }
 
-// Touch interaction
-.drag-target {
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 998;
-
-  &.right-aligned {
-    right: 0;
-  }
+.sidenav .collapsible-body {
+  padding: 0;
 }
 
-.sidenav-overlay,
-.navigation-drawer-overlay {
+.sidenav-overlay {
   position: fixed;
   top: 0;
   left: 0;
@@ -227,3 +229,18 @@
   z-index: 997;
   display: none;
 }
+
+// Sidenav collapsible styling (Taken from Collapsible.scss)
+.sidenav,
+.sidenav.sidenav-fixed {
+  .collapsible {
+    border: none;
+    box-shadow: none;
+  }
+  .collapsible-header {
+    border: none;
+  }
+  .collapsible-body {
+    border: none;
+  }
+}

package/src/{scss → sass}/components/_slider.scss

@@ -1,3 +1,5 @@
+@use "../abstracts" as *;
+
 .slider {
   position: relative;
   height: 400px;
@@ -106,7 +108,7 @@
       width: 100%;
       height: 100%;
       cursor: pointer;
-      background-color: var(--md-sys-color-shadow-light);
+      background-color: var(--md-sys-color-shadow);
       transition: background-color .3s;
       border-radius: 50%;
       border-width: 0;

package/src/{scss/components/_table-of-contents.scss → sass/components/_table_of_contents.scss}

@@ -1,3 +1,5 @@
+@use "../abstracts" as *;
+
 .table-of-contents {
   list-style: none;