@materializecss/materialize 2.2.1 → 2.3.0

package/sass/components/_dropdown.scss

@@ -1,78 +0,0 @@
-[popover] {
-  outline: none;
-  padding: 0;
-  border: none;
-}
-
-.dropdown-content {
-  padding-left: 0;
-  list-style-type: none;
-  @extend .z-depth-1;
-  background-color: var(--md-sys-color-surface);
-  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;
-  
-  li {
-    &.divider {
-      min-height: 0;
-      height: 1px;
-    }
-    & > a, & > span {
-      font-size: 16px;
-      color: var(--md-sys-color-primary);
-      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;
-    }
-    clear: both;
-    color: var(--md-sys-color-on-background);
-    cursor: pointer;
-    min-height: $dropdown-item-height;
-    line-height: 1.5rem;
-    width: 100%;
-    text-align: left;
-  }
-  li:not(.disabled):hover, li.active {
-    background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%);
-  }
-}
-
-body.keyboard-focused {
-  .dropdown-content li:focus {
-    background-color: rgba(0, 0, 0, 0.12);
-  }
-}
-
-// Input field specificity bugfix
-.input-field.col .dropdown-content [type="checkbox"] + label {
-  top: 1px;
-  left: 0;
-  height: 18px;
-  transform: none;
-}
-
-.dropdown-trigger {
-  cursor: pointer;
-}

package/sass/components/_icons-material-design.scss

@@ -1,6 +0,0 @@
-/* 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/sass/components/_materialbox.scss

@@ -1,43 +0,0 @@
-.materialboxed {
-  &:hover {
-    &:not(.active) {
-      opacity: .8;
-    }
-  }
-
-  display: block;
-  cursor: zoom-in;
-  position: relative;
-  transition: opacity .4s;
-  -webkit-backface-visibility: hidden;
-
-  &.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/sass/components/_modal.scss

@@ -1,68 +0,0 @@
-// use with dialog html element
-.modal {
-  --modal-footer-divider-height: 1px;
-  --modal-border-radius: 28px;
-  --modal-padding: 24px;
-  --modal-padding-bottom: 16px;
-
-  @extend .z-depth-5;
-  border: none;
-  outline: none;
-  padding: 0;
-  max-height: 70%;
-  width: 55%;
-  border-radius: var(--modal-border-radius);
-  will-change: top, opacity;
-
-  // Dialog open
-  &[open] {
-    display: flex;
-    flex-direction: column;
-  }
-
-  // Background
-  background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
-
-  @media #{$medium-and-down} {
-    width: 80%;
-  }
-
-  // custom backdrop blur
-  &::backdrop {
-    backdrop-filter: blur(1px);
-  }
-
-  .modal-header {
-    padding: var(--modal-padding);
-    padding-bottom: var(--modal-padding-bottom);
-    flex-shrink: 0;
-  }
-  .modal-content {
-    padding: 0 var(--modal-padding);
-    overflow-y: auto;
-  }
-  .modal-footer {
-    border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
-    padding: var(--modal-padding);
-    text-align: right;
-    flex-shrink: 0;
-  }
-
-  .modal-close {
-    cursor: pointer;
-  }
-
-  // todo: remove maybe
-  h1,h2,h3,h4,h5,h6 {
-    margin: 0;
-  }
-}
-
-// Modal Bottom Sheet Style
-.modal.bottom-sheet {
-  margin-bottom: 0;
-  max-height: 45%;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  will-change: bottom, opacity;
-}

package/sass/components/_navbar.scss

@@ -1,231 +0,0 @@
-// TODO: Make better wrapper class like .navbar
-:root {
-  --navbar-height: 64px;
-  --navbar-height-mobile: 56px;
-}
-
-nav {
-  &.nav-extended {
-    height: auto;
-
-    .nav-wrapper {
-      min-height: var(--navbar-height-mobile);
-      height: auto;
-    }
-
-    .nav-content {
-      position: relative;
-      line-height: normal;
-    }
-  }
-
-  color:  var(--md-sys-color-on-primary);
-  @extend .z-depth-1;
-  background-color: var(--md-sys-color-secondary-container);
-
-  width: 100%;
-  height: var(--navbar-height-mobile);
-  line-height: var(--navbar-height-mobile);
-
-  a {
-    color:  var(--md-sys-color-on-primary);
-  }
-
-  i,
-  [class^="mdi-"], [class*="mdi-"],
-  i.material-icons, i.material-symbols-outlined,
-  i.material-symbols-rounded, i.material-symbols-sharp {
-    display: block;
-    font-size: 24px;
-    height: var(--navbar-height-mobile);
-    line-height: var(--navbar-height-mobile);
-  }
-
-  .nav-wrapper {
-    position: relative;
-    height: 100%;
-  }
-
-  @media #{$large-and-up} {
-    a.sidenav-trigger {
-      display: none;
-    }
-  }
-
-  // Collapse button
-  .sidenav-trigger {
-    float: left;
-    position: relative;
-    z-index: 1;
-    height: var(--navbar-height-mobile);
-    margin: 0 18px;
-
-    i {
-      height: var(--navbar-height-mobile);
-      line-height: var(--navbar-height-mobile);
-    }
-  }
-
-  // Logo
-  .brand-logo {
-    position: absolute;
-    color:  var(--md-sys-color-on-primary);
-    display: inline-block;
-    font-size: 2.1rem;
-    padding: 0;
-
-    &.center {
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    @media #{$medium-and-down} {
-      left: 50%;
-      transform: translateX(-50%);
-
-      &.left, &.right {
-        padding: 0;
-        transform: none;
-      }
-
-      &.left {
-        left: 0.5rem;
-      }
-      &.right {
-        right: 0.5rem;
-        left: auto;
-      }
-    }
-
-    &.right {
-      right: 0.5rem;
-      padding: 0;
-    }
-
-    i,
-    [class^="mdi-"], [class*="mdi-"],
-    i.material-icons, i.material-symbols-outlined,
-    i.material-symbols-rounded, i.material-symbols-sharp {
-      float: left;
-      margin-right: 15px;
-    }
-  }
-
-
-  // Title
-  .nav-title {
-    display: inline-block;
-    font-size: 32px;
-    padding: 28px 0;
-  }
-
-
-  // Navbar Links
-  ul:not(.dropdown-content) {
-    list-style-type: none;
-    margin: 0;
-
-    & > li {
-      transition: background-color .3s;
-      float: left;
-      padding: 0;
-
-      & > a {
-        transition: background-color .3s;
-        font-size: 1rem;
-        color:  var(--md-sys-color-on-primary);
-        display: block;
-        padding: 0 15px;
-        cursor: pointer;
-
-        &.active {
-          background-color: var(--md-ref-palette-primary80);
-        }
-
-        &:hover:not(.active) {
-          background-color: var(--md-ref-palette-primary70);
-        }
-
-        &.btn, &.btn-large, &.btn-flat, &.btn-floating {
-          margin-top: -2px;
-          margin-left: 15px;
-          margin-right: 15px;
-          display: inline-block;
-
-          & > .material-icons, & > .material-symbols-outlined,
-          & > .material-symbols-rounded, & > .material-symbols-sharp {
-            height: inherit;
-            line-height: inherit;
-          }
-        }
-      }
-    }
-
-    &.left {
-      float: left;
-    }
-  }
-
-  // Navbar Search Form
-  form {
-    height: 100%;
-  }
-
-  .input-field {
-    margin: 0;
-    height: 100%;
-
-    input[type=search] {
-      height: 100%;
-      font-size: 1.2rem;
-      border: none;
-      padding-left: 2rem;
-      color:  var(--md-sys-color-on-primary);
-
-      &:focus, &[type=text]:valid, &[type=password]:valid,
-      &[type=email]:valid, &[type=url]:valid, &[type=date]:valid {
-        border: none;
-        box-shadow: none;
-      }
-    }
-
-    label {
-      top: 0;
-      left: 0;
-
-      i {
-        color: var(--font-on-primary-color-medium);
-        transition: color .3s;
-      }
-
-      &.active i {
-        color:  var(--md-sys-color-on-primary)
-      }
-    }
-  }
-}
-
-// Fixed Navbar
-.navbar-fixed {
-  position: relative;
-  height: var(--navbar-height-mobile);
-  z-index: 997;
-
-  nav {
-    position: fixed;
-    right: 0;
-  }
-}
-
-@media #{$medium-and-up} {
-  nav.nav-extended .nav-wrapper {
-    min-height: var(--navbar-height-mobile);
-  }
-  nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
-    height: var(--navbar-height);
-    line-height: var(--navbar-height)
-  }
-  .navbar-fixed {
-    height: var(--navbar-height);
-  }
-}