@trintel/zooy 1.0.1-beta.0 → 1.0.1

package/src/sass/panels.scss

@@ -1,26 +1,62 @@
-//--------------------------------------------------------------------------------------
+// =============================================================================
+// Panel Layout System
+// Modern CSS for zooy panel layouts, modals, and flex utilities
+// =============================================================================
+
+// -----------------------------------------------------------------------------
+// CSS Custom Properties
+// -----------------------------------------------------------------------------
+:root {
+  // Spacing
+  --zoo-spacing-sm: 1rem;
+  --zoo-spacing-md: 1.5rem;
+  --zoo-spacing-lg: 3rem;
+  --zoo-spacing-xl: 4rem;
+
+  // Layout widths
+  --zoo-max-width-default: 960px;
+  --zoo-max-width-three: 1030px;
+  --zoo-max-width-four: 1330px;
+
+  // Modal
+  --zoo-modal-backdrop: rgb(0 0 0 / 0.3);
+  --zoo-modal-panel-bg: rgb(255 255 255 / 0.7);
+  --zoo-modal-blur: 10px;
+  --zoo-modal-border-radius: 10px;
+
+  // Z-index scale
+  --zoo-z-fab: 2;
+  --zoo-z-modal: 10;
+}
+
+// -----------------------------------------------------------------------------
+// Main Menu
+// -----------------------------------------------------------------------------
 .zoo__main-menu-inner-wrapper {
-  margin: 1rem;
+  margin: var(--zoo-spacing-sm);
   display: flex;
   flex-flow: column wrap;
   align-items: flex-start;
 }
 
+// -----------------------------------------------------------------------------
+// List Layout System
+// -----------------------------------------------------------------------------
 .zoo__list-wrap {
   align-items: flex-start;
   display: flex;
   flex-wrap: wrap;
-  max-width: 960px;
+  max-width: var(--zoo-max-width-default);
   position: relative;
   margin: 20px auto 0;
   padding: 0 20px;
 
   &.three_wide {
-    max-width: 1030px;
+    max-width: var(--zoo-max-width-three);
   }
 
   &.four_wide {
-    max-width: 1330px;
+    max-width: var(--zoo-max-width-four);
   }
 
   &.full_wide {
@@ -34,7 +70,6 @@
 }
 
 .zoo__list-control {
-  -webkit-box-flex: 1;
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: auto;
@@ -42,19 +77,21 @@
   min-width: calc(8.33333% - 40px);
   word-wrap: break-word;
   margin: 0 20px;
-  padding-bottom: 3rem;
-  //overflow: scroll; // This causes a white box on the overflow scrollbar
+  padding-bottom: var(--zoo-spacing-lg);
 }
 
+// -----------------------------------------------------------------------------
+// Modal System
+// -----------------------------------------------------------------------------
 .zoo__modal-base {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: var(--zoo-modal-backdrop);
   position: absolute;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 10;
+  z-index: var(--zoo-z-modal);
 
   &.top_locked {
     align-items: flex-start;
@@ -65,12 +102,17 @@
     width: initial;
     max-width: 80vw;
     min-width: 50vw;
-    border-radius: 10px;
-    background: rgba(255,255,255,0.7);
-    backdrop-filter: blur(10px);
+    border-radius: var(--zoo-modal-border-radius);
+    background: var(--zoo-modal-panel-bg);
+    backdrop-filter: blur(var(--zoo-modal-blur));
   }
 }
 
+// -----------------------------------------------------------------------------
+// Width & Height Utilities
+// -----------------------------------------------------------------------------
+
+// Width constraints
 .zoo__suppress-width--30 {
   max-width: 30rem !important;
 }
@@ -79,6 +121,7 @@
   width: 80% !important;
 }
 
+// Height constraints
 .zoo__min-height--12vh {
   min-height: 12vh;
 }
@@ -88,176 +131,108 @@
   max-width: 90vw;
 }
 
-.zoo__max_height--95vh {
-  max-height: 95vh;
-}
-
-.zoo__max_height--90vh {
-  max-height: 90vh;
-}
-
-.zoo__max_height--85vh {
-  max-height: 85vh;
-}
-
-.zoo__max_height--80vh {
-  max-height: 80vh;
-}
-
-.zoo__suggest_width_90vw {
-  flex-basis: 90vw;;
-}
-
-.zoo__suggest_width_1000 {
-  flex-basis: 1000px;
-}
-
-.zoo__suggest_width_950 {
-  flex-basis: 950px;
-}
-
-.zoo__suggest_width_900 {
-  flex-basis: 900px;
-}
-
-.zoo__suggest_width_850 {
-  flex-basis: 850px;
-}
-
-.zoo__suggest_width_800 {
-  flex-basis: 800px;
-}
-
-.zoo__suggest_width_750 {
-  flex-basis: 750px;
-}
-
-.zoo__suggest_width_700 {
-  flex-basis: 700px;
-}
-
-.zoo__suggest_width_650 {
-  flex-basis: 650px;
-}
-
-.zoo__suggest_width_600 {
-  flex-basis: 600px;
-}
-
-.zoo__suggest_width_550 {
-  flex-basis: 550px;
-}
-
-.zoo__suggest_width_500 {
-  flex-basis: 500px;
-  min-width: initial !important;
-}
-
-.zoo__suggest_width_450 {
-  flex-basis: 450px;
-  min-width: initial !important;
-}
-
-.zoo__suggest_width_400 {
-  flex-basis: 400px;
-  min-width: initial !important;
-}
-
-.zoo__suggest_width_350 {
-  flex-basis: 350px;
-  min-width: initial !important;
-}
-
-.zoo__suggest_width_300 {
-  flex-basis: 300px;
-  min-width: initial !important;
-}
-
+.zoo__max_height--95vh { max-height: 95vh; }
+.zoo__max_height--90vh { max-height: 90vh; }
+.zoo__max_height--85vh { max-height: 85vh; }
+.zoo__max_height--80vh { max-height: 80vh; }
+
+// Suggested widths (flex-basis)
+.zoo__suggest_width_90vw { flex-basis: 90vw; }
+.zoo__suggest_width_1000 { flex-basis: 1000px; }
+.zoo__suggest_width_950 { flex-basis: 950px; }
+.zoo__suggest_width_900 { flex-basis: 900px; }
+.zoo__suggest_width_850 { flex-basis: 850px; }
+.zoo__suggest_width_800 { flex-basis: 800px; }
+.zoo__suggest_width_750 { flex-basis: 750px; }
+.zoo__suggest_width_700 { flex-basis: 700px; }
+.zoo__suggest_width_650 { flex-basis: 650px; }
+.zoo__suggest_width_600 { flex-basis: 600px; }
+.zoo__suggest_width_550 { flex-basis: 550px; }
+
+.zoo__suggest_width_500,
+.zoo__suggest_width_450,
+.zoo__suggest_width_400,
+.zoo__suggest_width_350,
+.zoo__suggest_width_300,
 .zoo__suggest_width_200 {
-  flex-basis: 200px;
   min-width: initial !important;
 }
 
+.zoo__suggest_width_500 { flex-basis: 500px; }
+.zoo__suggest_width_450 { flex-basis: 450px; }
+.zoo__suggest_width_400 { flex-basis: 400px; }
+.zoo__suggest_width_350 { flex-basis: 350px; }
+.zoo__suggest_width_300 { flex-basis: 300px; }
+.zoo__suggest_width_200 { flex-basis: 200px; }
+
+// -----------------------------------------------------------------------------
+// Visual Utilities
+// -----------------------------------------------------------------------------
 .zoo__suppress-elevation {
   box-shadow: none !important;
 }
 
-.zoo__border-radius--10 {
-  border-radius: 10px;
-}
-
-.zoo__border-radius--15 {
-  border-radius: 15px;
-}
-
-.zoo__border-radius--20 {
-  border-radius: 20px;
-}
+.zoo__border-radius--10 { border-radius: 10px; }
+.zoo__border-radius--15 { border-radius: 15px; }
+.zoo__border-radius--20 { border-radius: 20px; }
 
+// -----------------------------------------------------------------------------
+// FAB Positioning
+// -----------------------------------------------------------------------------
 .app-fab--fixed.app-fab--fixed {
   position: fixed;
-  bottom: 4rem;
-  right: 3rem;
-  z-index: 2;
+  bottom: var(--zoo-spacing-xl);
+  right: var(--zoo-spacing-lg);
+  z-index: var(--zoo-z-fab);
 }
 
 .app-fab--absolute.app-fab--absolute {
   position: absolute;
-  bottom: 4rem;
-  right: 3rem;
+  bottom: var(--zoo-spacing-xl);
+  right: var(--zoo-spacing-lg);
 }
 
-@media(min-width: 1024px) {
+@media (min-width: 1024px) {
   .app-fab--absolute.app-fab--absolute {
-    bottom: 3rem;
+    bottom: var(--zoo-spacing-lg);
     right: 2rem;
   }
-}
 
-//--[  Flex ]--
+  #bottom_right-absolute-fab {
+    bottom: var(--zoo-spacing-lg);
+    right: 5rem;
+  }
+}
 
+// -----------------------------------------------------------------------------
+// Flexbox Container System
+// -----------------------------------------------------------------------------
 .zoo__flex-container {
   display: flex;
   flex-flow: column nowrap;
-  .flex-flow__row_wrap {
-    flex-flow: row wrap;
-  }
-  .flex-flow__row_nowrap {
-    flex-flow: row nowrap;
-  }
-  .flex-flow__column_wrap {
-    flex-flow: column wrap;
-  }
-  .flex-direction__row {
-    flex-direction: row;
-  }
-  .flex-direction__column {
-    flex-direction: column;
-  }
-  .wrap {
-    flex-wrap: wrap;
-  }
-  .nowrap {
-    flex-wrap: nowrap;
-  }
-  .align-items__center {
-    align-items: center;
-  }
-  .justify-content__center {
-    justify-content: center;
-  }
-  .justify-content__space-between {
-    justify-content: space-between;
-  }
-  .align-content__flex-start {
-    align-content: flex-start;
-  }
-  .align-content__flex-end {
-    align-content: flex-end;
-  }
-  .padding_0_24 {
-    padding: 0 24px;
-  }
+
+  // Flow modifiers
+  .flex-flow__row_wrap { flex-flow: row wrap; }
+  .flex-flow__row_nowrap { flex-flow: row nowrap; }
+  .flex-flow__column_wrap { flex-flow: column wrap; }
+
+  // Direction modifiers
+  .flex-direction__row { flex-direction: row; }
+  .flex-direction__column { flex-direction: column; }
+
+  // Wrap modifiers
+  .wrap { flex-wrap: wrap; }
+  .nowrap { flex-wrap: nowrap; }
+
+  // Alignment modifiers
+  .align-items__center { align-items: center; }
+  .justify-content__center { justify-content: center; }
+  .justify-content__space-between { justify-content: space-between; }
+  .align-content__flex-start { align-content: flex-start; }
+  .align-content__flex-end { align-content: flex-end; }
+
+  // Padding utilities
+  .padding_0_24 { padding: 0 24px; }
 
   & > .dashboard_grid_element {
     background-color: #e1e2e1;
@@ -267,21 +242,13 @@
   }
 }
 
-.overflow-scroll {
-  overflow: scroll;
-}
-
-.overflow-auto {
-  overflow: auto;
-}
-
-.display__none {
-  display: none !important;
-}
-
-.margin-bottom__24 {
-  margin-bottom: 24px;
-}
+// -----------------------------------------------------------------------------
+// General Utilities
+// -----------------------------------------------------------------------------
+.overflow-scroll { overflow: scroll; }
+.overflow-auto { overflow: auto; }
+.display__none { display: none !important; }
+.margin-bottom__24 { margin-bottom: 24px; }
 
 .zoo__flex-item {
   flex: 1;
@@ -289,12 +256,17 @@
   flex-basis: auto;
 }
 
+.no_flex_resize {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+// -----------------------------------------------------------------------------
+// Panel Wrapper & Base
+// -----------------------------------------------------------------------------
 .pan-wrapper {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0; // Modern alternative to top: 0; left: 0; right: 0; bottom: 0;
 }
 
 .zoo_async_html > .pan-wrapper {
@@ -307,13 +279,16 @@
   width: 100%;
 }
 
+// -----------------------------------------------------------------------------
+// Toolbar System
+// -----------------------------------------------------------------------------
 .zoo__toolbar {
   background-color: #953b39;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   align-items: center;
-  box-shadow: 0px -1px 0px rgba(0,0,0,0.05) inset;
+  box-shadow: 0 -1px 0 rgb(0 0 0 / 0.05) inset;
   flex-shrink: 0;
 }
 
@@ -323,7 +298,6 @@
 }
 
 .zoo__tool_group_left {
-  background-color: pink;
   margin-right: 20px;
 }
 
@@ -334,61 +308,73 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   flex-grow: 2;
-  background-color: chocolate;
-}
-
-.zoo__tool_group_right {
-  background-color: coral;
 }
 
-
-/* Large */
+// -----------------------------------------------------------------------------
+// Tabbar System
+// -----------------------------------------------------------------------------
 .zoo__tabbar {
-  background-color: orange;
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-end;
-  box-shadow: 0px -1px 0px rgba(0,0,0,0.05) inset;
+  box-shadow: 0 -1px 0 rgb(0 0 0 / 0.05) inset;
 }
 
-/* Medium screens */
-@media all and (max-width: 800px) {
+// Tabbar button spacing
+.zoo__tabbar > .mdc-button {
+  margin: 5px;
+}
+
+.zoo__tabbar.zoo__tabbar_padded > .mdc-button {
+  margin: 18px 5px;
+}
+
+// -----------------------------------------------------------------------------
+// Responsive Toolbar & Tabbar
+// -----------------------------------------------------------------------------
+@media (max-width: 800px) {
   .zoo__tabbar {
-    /* When on medium sized screens, we center it by evenly distributing empty space around items */
     justify-content: space-around;
   }
+
   .zoo__toolbar {
     flex-direction: column;
   }
+
   .zoo__toolbar > .zoo__tool_group {
     min-width: 100%;
   }
+
   .zoo__tool_head_group {
-    order:1;
+    order: 1;
     justify-content: space-around;
     flex-direction: column;
   }
+
   .zoo__tool_group_left {
     order: 2;
     justify-content: space-around;
   }
+
   .zoo__tool_group_right {
     order: 3;
     justify-content: space-around;
   }
 }
 
-/* Small screens */
-@media all and (max-width: 500px) {
+@media (max-width: 500px) {
   .zoo__tabbar {
-    /* On small screens, we are no longer using row direction but column */
     flex-direction: column;
   }
+
   .zoo__actionbar > .zoo__tool_group {
     flex-direction: column;
   }
 }
 
+// -----------------------------------------------------------------------------
+// Content Area
+// -----------------------------------------------------------------------------
 .zoo__content {
   position: relative;
   flex: 999999 !important;
@@ -396,72 +382,15 @@
   .zoo__panel_a {
     position: absolute;
     height: auto;
-    top: 0;
-    bottom: 0;
+    inset: 0 0 0 0; // top: 0; bottom: 0; left: 0; right: 0
   }
 }
 
-.zoo__actionbar {
+// Content alignment variants
+.zoo__content.center_center {
   display: flex;
-  flex-flow: row wrap;
-  justify-content: space-between;
   align-items: center;
-  background-color: mediumpurple;
-  flex-shrink: 0;
-}
-
-
-//--[  Button Positions ]--
-.zoo__actionbar > .zoo__tool_group > .mdc-menu-surface--anchor,
-.zoo__actionbar > .zoo__tool_group > .mdc-button {
-  margin: 24px;
-}
-
-.zoo__actionbar > .zoo__action_group_left > .mdc-button {
-  margin-right: 0;
-}
-
-.zoo__actionbar > .zoo__action_group_right {
-  flex-flow: row-reverse wrap-reverse;
-}
-
-.zoo__actionbar > .zoo__action_group_right > .mdc-button {
-  margin-left: 0;
-}
-
-.zoo__tabbar > .mdc-button {
-  margin: 5px;
-}
-
-.zoo__tabbar.zoo__tabbar_padded > .mdc-button {
-  margin: 18px 5px;
-}
-
-//.zoo__toolbar .mdc-button {
-//  margin-left: 5px;
-//  padding: 0;
-//  width: 48px;
-//  height: 48px;
-//  line-height: 48px;
-//}
-
-.scrolly_content {
-  position: absolute;
-  height: auto;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  overflow: auto;
-  &.relative_position {
-    position: relative;
-  }
-}
-
-.zoo__content.center_center {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  justify-content: center;
 }
 
 .zoo__content.center_end {
@@ -482,161 +411,141 @@
   justify-content: flex-start;
 }
 
-.zoo__modifier__flex-direction-row {
-    flex-direction: row;
-}
+// Floaty content (panels within content)
+.zoo__content.zoo__floaty_content {
+  align-items: baseline;
+  justify-content: flex-start;
+  overflow: auto;
+  flex-flow: row wrap;
 
-.zoo__modifier__flex-wrap_nowrap {
-    flex-wrap: nowrap;
-}
+  > .pan-wrapper {
+    position: relative;
+    inset: initial;
+  }
 
-.zoo__modifier__align-center {
+  &.center_center {
     align-items: center;
-}
+    justify-content: center;
+  }
 
-@media(min-width: 1024px) {
-  #bottom_right-absolute-fab {
-    bottom: 3rem;
-    right: 5rem;
+  &.baseline_center {
+    align-items: baseline;
+    justify-content: center;
   }
-}
 
-/* Panels inside panel content ---------------------------------------------- */
+  &.center_center > .pan-wrapper,
+  &.baseline_center > .pan-wrapper {
+    margin: 30px 0 0 0;
+  }
 
-.zoo__content.zoo__floaty_content > .pan-wrapper {
-  position: relative;
-  left: initial;
-  right: initial;
-  top: initial;
-  bottom: initial;
+  &.table_manages_scroll {
+    overflow: hidden;
+  }
 }
 
-.zoo__content.zoo__floaty_content {
-  align-items: baseline;
-  justify-content: flex-start;
+.scrolly_content {
+  position: absolute;
+  height: auto;
+  inset: 0;
   overflow: auto;
-  flex-flow: row wrap;
+
+  &.relative_position {
+    position: relative;
+  }
 }
 
-.zoo__content.zoo__floaty_content.center_center {
+// -----------------------------------------------------------------------------
+// Actionbar System
+// -----------------------------------------------------------------------------
+.zoo__actionbar {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
+  flex-shrink: 0;
 }
 
-.zoo__content.zoo__floaty_content.baseline_center {
-  align-items: baseline;
-  justify-content: center;
+// Actionbar button spacing
+.zoo__actionbar > .zoo__tool_group > .mdc-menu-surface--anchor,
+.zoo__actionbar > .zoo__tool_group > .mdc-button {
+  margin: 24px;
 }
 
-.zoo__content.zoo__floaty_content.center_center > .pan-wrapper,
-.zoo__content.zoo__floaty_content.baseline_center > .pan-wrapper {
-  margin: 30px 0 0 0;
+.zoo__actionbar > .zoo__action_group_left > .mdc-button {
+  margin-right: 0;
 }
 
-.zoo__floaty_content.table_manages_scroll {
-  overflow: hidden;
+.zoo__actionbar > .zoo__action_group_right {
+  flex-flow: row-reverse wrap-reverse;
 }
 
-.no_flex_resize {
-  flex-grow: 0;
-  flex-shrink: 0;
+.zoo__actionbar > .zoo__action_group_right > .mdc-button {
+  margin-left: 0;
 }
 
-//--[ Animations ]--
-.slide-in-top {
-  -webkit-animation: slide-in-top .2s cubic-bezier(.25, .46, .45, .94) both;
-  animation: slide-in-top .5s cubic-bezier(.25, .46, .45, .94) both
+// -----------------------------------------------------------------------------
+// Modifier Classes
+// -----------------------------------------------------------------------------
+.zoo__modifier__flex-direction-row {
+  flex-direction: row;
 }
 
-@-webkit-keyframes slide-in-top {
-  0% {
-    -webkit-transform: translateY(-1000px);
-    transform: translateY(-1000px);
-    opacity: 0
-  }
-  100% {
-    -webkit-transform: translateY(0);
-    transform: translateY(0);
-    opacity: 1
-  }
+.zoo__modifier__flex-wrap_nowrap {
+  flex-wrap: nowrap;
+}
+
+.zoo__modifier__align-center {
+  align-items: center;
+}
+
+// -----------------------------------------------------------------------------
+// Animations
+// -----------------------------------------------------------------------------
+
+// Slide in from top
+.slide-in-top {
+  animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
 
 @keyframes slide-in-top {
-  0% {
-    -webkit-transform: translateY(-1000px);
+  from {
     transform: translateY(-1000px);
-    opacity: 0
+    opacity: 0;
   }
-  100% {
-    -webkit-transform: translateY(0);
+  to {
     transform: translateY(0);
-    opacity: 1
+    opacity: 1;
   }
 }
 
-
+// Slide in forward center
 .slide-in-fwd-center {
-  -webkit-animation: slide-in-fwd-center .2s cubic-bezier(.25, .46, .45, .94) both;
-  animation: slide-in-fwd-center .2s cubic-bezier(.25, .46, .45, .94) both
-}
-
-@-webkit-keyframes slide-in-fwd-center {
-  0% {
-    -webkit-transform: translateZ(-1400px);
-    transform: translateZ(-1400px);
-    opacity: 0
-  }
-  100% {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-    opacity: 1
-  }
+  animation: slide-in-fwd-center 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
 
 @keyframes slide-in-fwd-center {
-  0% {
-    -webkit-transform: translateZ(-1400px);
+  from {
     transform: translateZ(-1400px);
-    opacity: 0
+    opacity: 0;
   }
-  100% {
-    -webkit-transform: translateZ(0);
+  to {
     transform: translateZ(0);
-    opacity: 1
+    opacity: 1;
   }
 }
 
+// Ken Burns effect
 .kenburns-bottom {
-  -webkit-animation: kenburns-bottom 10s ease-out both;
-  animation: kenburns-bottom 10s ease-out both
-}
-
-@-webkit-keyframes kenburns-bottom {
-  0% {
-    -webkit-transform: scale(1) translateY(0);
-    transform: scale(1) translateY(0);
-    -webkit-transform-origin: 50% 84%;
-    transform-origin: 50% 84%;
-  }
-  100% {
-    -webkit-transform: scale(1.25) translateY(15px);
-    transform: scale(1.25) translateY(15px);
-    -webkit-transform-origin: bottom;
-    transform-origin: bottom;
-  }
+  animation: kenburns-bottom 10s ease-out both;
 }
 
 @keyframes kenburns-bottom {
-  0% {
-    -webkit-transform: scale(1) translateY(0);
+  from {
     transform: scale(1) translateY(0);
-    -webkit-transform-origin: 50% 84%;
     transform-origin: 50% 84%;
   }
-  100% {
-    -webkit-transform: scale(1.25) translateY(15px);
+  to {
     transform: scale(1.25) translateY(15px);
-    -webkit-transform-origin: bottom;
     transform-origin: bottom;
   }
 }