kmaterialize 2.3.3-1.0.2 → 2.3.3-1.0.21

package/components/appbar/appbar.css

@@ -72,7 +72,13 @@
   margin-top: -2px;
   margin-left: 15px;
   margin-right: 15px;
-  display: inline-block;
+  /* Was inline-block, which overrides .btn's own inline-flex;
+     align-items:center and breaks vertical centering of the button's
+     text - visually harmless on .btn-large (tall enough that the
+     misalignment doesn't stand out) but text nearly clips out the
+     bottom on the smaller .btn/.btn-flat/.btn-floating sizes. */
+  display: inline-flex;
+  align-items: center;
 }
 
 .navbar ul:not(.dropdown-content) > li > a.btn > .material-icons,
@@ -130,15 +136,52 @@
 .navbar .brand-logo {
   color: var(--md-sys-color-on-surface);
   font-size: var(--appbar-title-font-size);
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   padding: 0;
 }
 
 .navbar .brand-logo.center {
+  position: absolute;
   left: 50%;
   transform: translateX(-50%);
 }
 
+/* Collision-safe centered app bar: the left link region and the generated
+   right spacer share the available width, keeping the logo truly centered
+   without taking it out of the flex layout. */
+.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered::after {
+  content: '';
+  order: 3;
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > ul {
+  order: 1;
+  flex: 1 1 0;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > ul::-webkit-scrollbar {
+  display: none;
+}
+
+.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > ul > li > a {
+  white-space: nowrap;
+}
+
+.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > .brand-logo.center {
+  position: static;
+  order: 2;
+  flex: 0 0 auto;
+  left: auto;
+  transform: none;
+}
+
 .navbar .brand-logo.right {
   right: 0.5rem;
   padding: 0;
@@ -151,15 +194,268 @@
 .navbar .brand-logo i.material-symbols-outlined,
 .navbar .brand-logo i.material-symbols-rounded,
 .navbar .brand-logo i.material-symbols-sharp {
-  float: left;
+  /* Was float:left, paired with an explicit height/line-height (from
+     the general .navbar i rule) sized to the whole navbar row height,
+     inside a brand-logo that's only ever as tall as its own text.
+     Floating a block that tall out of a small inline-block parent
+     with nothing to clear it let it render outside/clipped by the
+     navbar row - invisible in practice. brand-logo is flex now, so
+     this just needs to be a normal flex item. */
   margin-right: 15px;
 }
 
+/* Structured MD3 app-bar content. These hooks keep branded demos and app
+   shells from falling back to bare, loosely spaced anchor elements. */
+.navbar.appbar-bordered {
+  overflow: visible;
+  background: var(--md-sys-color-surface-variant);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 0;
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent);
+}
+
+/* Layout variants. `navbar-rounded` adds the inset treatment; use
+   `navbar-full` for a flush, full-width rectangle. */
+.navbar.appbar-bordered.navbar-rounded {
+  margin: 8px 0;
+  padding: 4px;
+  border-radius: 16px;
+}
+
+.navbar.appbar-bordered.navbar-full {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+/* Extended app bars may contain tabs and a halfway FAB. Keep the rounded
+   surface on its children, but let the FAB extend below the bar. */
+.navbar.appbar-bordered.nav-extended {
+  overflow: visible;
+}
+
+.navbar.appbar-bordered.nav-extended.navbar-rounded .nav-wrapper {
+  border-radius: 15px 15px 0 0;
+}
+
+.navbar.appbar-bordered.nav-extended.navbar-rounded .nav-content {
+  color: var(--md-sys-color-on-surface);
+  background: var(--md-sys-color-surface-variant);
+  border-radius: 0 0 15px 15px;
+}
+
+.navbar.appbar-bordered .nav-wrapper {
+  gap: 12px;
+  padding-inline: 12px;
+  background: var(--md-sys-color-surface-variant);
+  align-items: center;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.navbar.appbar-bordered .nav-wrapper > .brand-logo,
+.navbar.appbar-bordered .nav-wrapper > ul:not(.dropdown-content),
+.navbar.appbar-bordered .nav-actions > li {
+  align-self: center;
+}
+
+.navbar.appbar-bordered:not(.nav-extended) .nav-wrapper > .brand-logo,
+.navbar.appbar-bordered:not(.nav-extended) .nav-wrapper > ul:not(.dropdown-content),
+.navbar.appbar-bordered:not(.nav-extended) .nav-wrapper > ul:not(.dropdown-content) > li {
+  height: 40px;
+}
+
+.navbar.appbar-bordered .nav-actions > li {
+  display: flex;
+  align-items: center;
+}
+
+.navbar.appbar-bordered .nav-wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul:not(.dropdown-content) {
+  min-width: 0;
+  flex-shrink: 1;
+}
+
+.navbar.appbar-bordered.navbar-wrap .nav-wrapper {
+  flex-wrap: wrap;
+  height: auto;
+  row-gap: 8px;
+  overflow: visible;
+}
+
+.navbar.appbar-bordered.navbar-wrap .nav-wrapper > ul:not(.dropdown-content) {
+  flex-wrap: wrap;
+  white-space: normal;
+}
+
+.navbar .brand-logo .brand-logo-image {
+  box-sizing: border-box;
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+  padding: 8px;
+  object-fit: contain;
+  background: var(--md-sys-color-primary-container);
+  border-radius: 12px;
+}
+
+.navbar .nav-separator {
+  flex: 0 0 1px;
+  width: 1px;
+  height: 32px;
+  margin-inline: 4px;
+  background: var(--md-sys-color-outline-variant);
+}
+
+.navbar .nav-context {
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.navbar ul.nav-actions:not(.dropdown-content) {
+  gap: 8px;
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li > a:not(.btn):not(.btn-floating) {
+  box-sizing: border-box;
+  height: 40px;
+  padding-inline: 12px;
+  line-height: 40px;
+  border-radius: 20px;
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li > a:not(.btn):not(.btn-floating):hover {
+  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li.active > a:not(.btn):not(.btn-floating) {
+  color: var(--md-sys-color-on-primary-container);
+  background: var(--md-sys-color-primary-container);
+}
+
+/* Text links use the same centred row as the app bar. The global navbar icon
+   rule intentionally sizes standalone icons to the full bar; undo that for
+   icons embedded beside link text. */
+.navbar.appbar-bordered ul:not(.dropdown-content):not(.tabs) > li > a:not(.btn):not(.btn-floating):has(> .material-icons.left),
+.navbar.appbar-bordered ul:not(.dropdown-content):not(.tabs) > li > a:not(.btn):not(.btn-floating):has(> .material-icons.right),
+.navbar.appbar-bordered .dropdown-trigger:has(> .material-icons) {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 40px;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content):not(.tabs) > li > a > .material-icons:is(.left, .right) {
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  line-height: 24px;
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content):not(.tabs) > li > a > .material-icons.right {
+  order: 1;
+}
+
+/* Tabs retain their component geometry and click target instead of inheriting
+   navigation-pill spacing. */
+.navbar.appbar-bordered .tabs {
+  gap: 0;
+  background: transparent;
+}
+
+.navbar.appbar-bordered .tabs .tab > a {
+  height: 48px;
+  min-height: 48px;
+  padding-inline: 24px;
+  line-height: 48px;
+  border-radius: 0;
+}
+
+/* Buttons must remain legible and vertically centred in the constrained app
+   bar row, including legacy examples using btn-large. */
+.navbar.appbar-bordered ul:not(.dropdown-content) > li > :is(.btn, .btn-large) {
+  box-sizing: border-box;
+  max-height: 48px;
+  margin: 0;
+  color: var(--md-sys-color-on-primary);
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content) > li > :is(.btn, .btn-large) > .material-icons {
+  flex: 0 0 20px;
+  width: 20px;
+  height: 20px;
+  margin-left: 8px;
+  line-height: 20px;
+}
+
+.navbar.appbar-bordered .dropdown-trigger {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content) > li > a:has(> .material-icons:only-child) {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  padding: 0;
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content) > li > a:has(> .material-icons:only-child) > .material-icons {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+}
+
+.navbar ul.nav-actions:not(.dropdown-content) > li > :is(.btn, .btn-floating) {
+  margin: 0;
+}
+
+.navbar .nav-actions .btn-floating {
+  display: inline-grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border-radius: 50%;
+  box-shadow: none;
+}
+
+.navbar .nav-actions .btn-floating > .material-icons {
+  display: block;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+}
+
+.navbar .nav-actions .btn > .material-icons {
+  height: 16px;
+  line-height: 16px;
+}
+
 /* Title */
 .navbar .nav-title {
   display: inline-block;
+  color: var(--md-sys-color-on-surface);
   font-size: 32px;
-  padding: 28px 0;
+  padding: 20px 24px 28px;
 }
 
 /* Navbar Search Form */
@@ -222,6 +518,7 @@
   }
 
   .nav,
+  .navbar,
   .navbar .nav-wrapper i,
   nav a.sidenav-trigger,
   .navbar a.sidenav-trigger i {

package/components/button/_buttons.scss

@@ -23,6 +23,19 @@
   );
 }
 
+// .btn/.btn-large/.btn-small carry no color of their own - only the
+// .filled/.tonal/.elevated/.outlined/.text modifiers do - so a bare
+// .btn with none of those had no background or text color at all,
+// same "invisible button" bug as .btn.text and .btn.elevated before
+// they were fixed. Default to filled, same as v1's plain .btn always
+// being a real visible button. Modifier classes still win (two
+// classes beats one on specificity), and .btn-floating/.btn-flat
+// already have their own complete color rules elsewhere so are
+// deliberately excluded here.
+.btn, .btn-large, .btn-small {
+  @include btn-filled;
+}
+
 // Icon
 .btn.icon-left, .btn.icon-right {
   position: relative;
@@ -38,7 +51,10 @@
 
 .btn.icon-left i, .btn.icon-right i {
   position: absolute;
+  top: 50%;
   font-size: var(--btn-font-size-icon);
+  line-height: 1;
+  transform: translateY(-50%);
 }
 
 .btn.icon-left i {
@@ -115,7 +131,13 @@
   }
 
   &:focus {
-    background-color: $button-floating-background-focus;
+    // Was $button-floating-background-focus (--md-ref-palette-secondary80,
+    // a raw MD3 secondary tone) - it doesn't track a custom theme's
+    // primary/container colors the way :hover's color-mix above does, so
+    // it could show as a clashing color (e.g. blue) on a themed palette.
+    // Same formula as :hover, just mixed a bit stronger for the stronger
+    // state.
+    background-color: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 24%);
     @extend .z-depth-1-half;
   }
 
@@ -243,6 +265,22 @@ button.btn-floating {
     }
   }
 
+  // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+  // Anchors the FAB (and its expanded menu) to the top of the viewport
+  // instead of the bottom, for layouts where the bottom edge is already
+  // occupied (e.g. a footer or bottom nav).
+  &.top {
+    top: 23px;
+    bottom: unset;
+    padding-bottom: 15px;
+    padding-top: 0;
+
+    > ul {
+      top: 64px;
+      bottom: unset;
+    }
+  }
+
   &.toolbar {
     padding: 0;
     height: 56px;

package/components/card/_cards.scss

@@ -2,12 +2,14 @@
 @use '../../sass/mixins.module.scss' as *;
 
 .card-panel {
+  --background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
+
   transition: box-shadow .25s;
   padding: 24px;
   margin: $element-top-margin 0 $element-bottom-margin 0;
   border-radius: 12px;
   @extend .z-depth-1;
-  background-color: var(--md-sys-color-surface);
+  background-color: var(--background-color);
 }
 
 .card {
@@ -166,6 +168,12 @@
 
       i {
         line-height: 32px;
+
+        // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+        // Sits on the title's baseline with a small gap before the text,
+        // instead of floating flush against it mid-line.
+        vertical-align: text-bottom;
+        margin-right: 6px;
       }
 
       &.activator {