@expressivecss/expressive 0.1.0-alpha.3

package/src/scss/components/_dropdown.scss

@@ -0,0 +1,98 @@
+@use '../foundation/variables' as *;
+@use '../utilities/elevation' as *;
+
+[popover] {
+  outline: none;
+  padding: 0;
+  border: none;
+}
+
+// M3 Expressive: Dropdown / Menu component
+.dropdown-content,
+.menu-content {
+  // -- Component tokens --
+  --md-comp-menu-shape: var(--md-sys-shape-corner-extra-small, 4px);
+  --md-comp-menu-container-color: var(--md-sys-color-surface-container, var(--md-sys-color-surface));
+
+  padding-left: 0;
+  list-style-type: none;
+  @extend .elevation-2;
+  background-color: var(--md-comp-menu-container-color);
+  margin: 0;
+  display: none;
+  min-width: 100px;
+  overflow-y: auto;
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 9999; // TODO: Check if this doesn't break other things
+  transform-origin: 0 0;
+  user-select: none;
+  border-radius: var(--md-comp-menu-shape);
+  transition:
+    opacity var(--md-sys-motion-duration-short3, 0.15s) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+    transform var(--md-sys-motion-duration-medium1, 0.25s) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+
+  li {
+    clear: both;
+    color: var(--md-sys-color-on-surface);
+    cursor: pointer;
+    min-height: $dropdown-item-height;
+    line-height: 1.5rem;
+    width: 100%;
+    text-align: left;
+
+    &.divider {
+      min-height: 0;
+      height: 1px;
+    }
+
+    & > a, & > span {
+      font-size: 16px;
+      color: var(--md-sys-color-on-surface);
+      display: block;
+      line-height: 22px;
+      padding: (($dropdown-item-height - 22) * 0.5) 16px;
+    }
+
+    & > span > label {
+      top: 1px;
+      left: 0;
+      height: 18px;
+    }
+
+    // Icon alignment override
+    & > a > i {
+      height: inherit;
+      line-height: inherit;
+      float: left;
+      margin: 0 24px 0 0;
+      width: 24px;
+    }
+
+    &:not(.disabled):hover, &.active {
+      background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%);
+    }
+
+    // Keyboard focus state (parent context nesting)
+    body.keyboard-focused & {
+      &:focus {
+        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+      }
+    }
+  }
+}
+
+// Input field specificity bugfix
+.input-field.col .dropdown-content [type="checkbox"] + label {
+  top: 1px;
+  left: 0;
+  height: 18px;
+  transform: none;
+}
+
+.dropdown-trigger,
+.menu-trigger {
+  cursor: pointer;
+}

package/src/scss/components/_index.scss

@@ -0,0 +1,28 @@
+@forward 'buttons';
+@forward 'collection';
+@forward 'badges';
+@forward 'material-icons';
+@forward 'appbar';
+@forward 'transitions';
+@forward 'cards';
+@forward 'toast';
+@forward 'tabs';
+@forward 'tooltip';
+@forward 'dropdown';
+@forward 'modal';
+@forward 'collapsible';
+@forward 'chips';
+@forward 'material-box';
+@forward 'table-of-contents';
+@forward 'sidenav';
+@forward 'preloader';
+@forward 'slider';
+@forward 'carousel';
+@forward 'tap-target';
+@forward 'pulse';
+@forward 'date-picker';
+@forward 'time-picker';
+@forward 'breadcrumb';
+@forward 'pagination';
+@forward 'parallax';
+@forward 'video';

package/src/scss/components/_material-box.scss

@@ -0,0 +1,42 @@
+.materialboxed {
+  display: block;
+  cursor: zoom-in;
+  position: relative;
+  transition: opacity .4s;
+  -webkit-backface-visibility: hidden;
+
+  &:hover {
+    &:not(.active) {
+      opacity: .8;
+    }
+  }
+  &.active {
+    cursor: zoom-out;
+  }
+}
+
+#materialbox-overlay {
+  position:fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(--md-sys-color-background);
+  z-index: 1000;
+  will-change: opacity;
+}
+
+.materialbox-caption {
+  position: fixed;
+  display: none;
+  color: var(--md-sys-color-on-background);
+  line-height: 50px;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  padding: 0% 15%;
+  height: 50px;
+  z-index: 1000;
+  -webkit-font-smoothing: antialiased;
+}

package/src/scss/components/_material-icons.scss

@@ -0,0 +1,6 @@
+/* This is needed for some mobile phones to display the Google Icon font properly */
+.material-icons, .material-symbols-outlined,
+.material-symbols-rounded, .material-symbols-sharp {
+  text-rendering: optimizeLegibility;
+  font-feature-settings: 'liga';
+}

package/src/scss/components/_modal.scss

@@ -0,0 +1,84 @@
+@use '../foundation/variables' as *;
+@use '../utilities/elevation' as *;
+
+// M3 Expressive: Component tokens for Modal / Dialog
+// use with dialog html element
+.modal,
+.dialog {
+  // -- Component tokens --
+  --modal-footer-divider-height: 1px;
+  --modal-border-radius: var(--md-sys-shape-corner-extra-large, 28px);
+  --modal-padding: 24px;
+  --modal-padding-bottom: 16px;
+  --modal-background-color: var(--md-sys-color-surface-container-high,
+    color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%)
+  );
+
+  @extend .elevation-5;
+  border: none;
+  outline: none;
+  padding: 0;
+  max-height: 70%;
+  width: 55%;
+  border-radius: var(--modal-border-radius);
+  will-change: top, opacity;
+  background-color: var(--modal-background-color);
+
+  // Dialog open
+  &[open] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  @media #{$medium-and-down} {
+    width: 80%;
+  }
+
+  // custom backdrop blur
+  &::backdrop {
+    backdrop-filter: blur(1px);
+  }
+
+  .modal-header,
+  .dialog-header {
+    padding: var(--modal-padding);
+    padding-bottom: var(--modal-padding-bottom);
+    flex-shrink: 0;
+    position: sticky;
+    top: 0;
+    background-color: var(--modal-background-color);
+  }
+  .modal-content,
+  .dialog-content {
+    padding: 0 var(--modal-padding);
+  }
+  .modal-footer,
+  .dialog-footer {
+    border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
+    padding: var(--modal-padding);
+    text-align: right;
+    flex-shrink: 0;
+    position: sticky;
+    bottom: 0;
+    background-color: var(--modal-background-color);
+  }
+
+  .modal-close,
+  .dialog-close {
+    cursor: pointer;
+  }
+
+  // todo: remove maybe
+  h1,h2,h3,h4,h5,h6 {
+    margin: 0;
+  }
+
+  // Modal Bottom Sheet Style
+  &.bottom-sheet {
+    margin-bottom: 0;
+    max-height: 45%;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    will-change: bottom, opacity;
+  }
+}

package/src/scss/components/_pagination.scss

@@ -0,0 +1,45 @@
+@use '../foundation/variables' as *;
+@use '../foundation/mixins' as *;
+
+.pagination {
+  li {
+    display: inline-block;
+    vertical-align: top;
+
+    a {
+      @include btn($height: 2rem, $padding-left: .66rem, $padding-right: .66rem, $font-size: 1.2rem);
+    }
+
+    &.active a {
+      @include btn-filled;
+    }
+
+    &.disabled a {
+      @include btn-disabled;
+    }
+
+    i {
+      font-size: 2rem;
+    }
+  }
+
+  li.pages ul li {
+    display: inline-block;
+    float: none;
+  }
+
+  @media #{$medium-and-down} {
+    width: 100%;
+
+    li.prev,
+    li.next {
+      width: 10%;
+    }
+
+    li.pages {
+      width: 80%;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+}

package/src/scss/components/_parallax.scss

@@ -0,0 +1,26 @@
+// Parallax
+.parallax-container {
+  position: relative;
+  overflow: hidden;
+  height: 500px;
+
+  .parallax {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+
+    img {
+      opacity: 0;
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      min-width: 100%;
+      min-height: 100%;
+      transform: translate3d(0, 0, 0);
+      transform: translateX(-50%);
+    }
+  }
+}