@dodlhuat/basix 1.0.0

package/css/flyout-menu.scss

@@ -0,0 +1,355 @@
+:root {
+  --bg-color: #0f172a;
+  --text-color: #f8fafc;
+  --glass-bg: rgba(15, 23, 42, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --menu-width: 320px;
+  --transition-speed: 0.4s;
+  --font-family: 'Outfit', sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  overflow-x: hidden;
+  min-height: 100vh;
+}
+
+/* Header */
+.site-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 2rem;
+  position: relative;
+  z-index: 10;
+}
+
+.logo {
+  font-size: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.menu-trigger {
+  background: none;
+  border: none;
+  color: var(--text-color);
+  cursor: pointer;
+  padding: 0.5rem;
+  transition: transform 0.2s;
+}
+
+.menu-trigger:hover {
+  transform: scale(1.1);
+  color: var(--accent-color);
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 80vh;
+  text-align: center;
+  padding: 2rem;
+}
+
+.main-content h1 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  background: linear-gradient(to right, #c084fc, #6366f1);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.main-content p {
+  color: #94a3b8;
+  font-size: 1.2rem;
+}
+
+/* Flyout Overlay */
+.flyout-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--transition-speed), visibility var(--transition-speed);
+  z-index: 40;
+}
+
+.flyout-overlay.is-visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Flyout Menu Base */
+.flyout-menu {
+  position: fixed;
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+  transition: transform var(--transition-speed) cubic-bezier(0.25, 1, 0.5, 1);
+  /* Smoother rollout */
+}
+
+/* Directional Variants */
+.flyout-from-right {
+  top: 0;
+  right: 0;
+  width: var(--menu-width);
+  height: 100%;
+  border-left: 1px solid var(--glass-border);
+  transform: translateX(100%);
+}
+
+.flyout-from-left {
+  top: 0;
+  left: 0;
+  width: var(--menu-width);
+  height: 100%;
+  border-right: 1px solid var(--glass-border);
+  transform: translateX(-100%);
+}
+
+.flyout-menu.is-open {
+  transform: translate(0, 0);
+}
+
+/* Flyout Header */
+.flyout-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 3rem;
+}
+
+.flyout-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #94a3b8;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.close-menu {
+  background: none;
+  border: none;
+  color: var(--text-color);
+  cursor: pointer;
+  padding: 0.5rem;
+  transition: transform 0.2s, color 0.2s;
+}
+
+.close-menu:hover {
+  transform: rotate(90deg);
+  color: var(--accent-color);
+}
+
+/* Flyout Links */
+.flyout-links {
+  list-style: none;
+  flex-grow: 1;
+}
+
+.flyout-links li {
+  margin-bottom: 1.5rem;
+  overflow: hidden;
+}
+
+.flyout-links a,
+.submenu-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background: none;
+  border: none;
+  font-size: 2rem;
+  font-weight: 600;
+  color: var(--text-color);
+  text-decoration: none;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 0;
+  transform: translateY(100%);
+  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s;
+  transition-delay: var(--delay);
+  text-align: left;
+}
+
+.flyout-menu.is-open .flyout-links a,
+.flyout-menu.is-open .submenu-toggle {
+  transform: translateY(0);
+}
+
+.flyout-links a:hover,
+.submenu-toggle:hover {
+  color: var(--accent-color);
+}
+
+.chevron {
+  transition: transform 0.3s;
+  opacity: 0.7;
+}
+
+.submenu-toggle.active .chevron {
+  transform: rotate(180deg);
+}
+
+/* Submenu */
+.submenu {
+  list-style: none;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out;
+  padding-left: 1rem;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  margin-top: 0;
+}
+
+.submenu.is-open {
+  max-height: 500px;
+  /* Reduced from 2000px for tighter animation */
+  /* Arbitrary large height, increased for nesting */
+  margin-top: 1rem;
+  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  /* Smoother easing */
+}
+
+.submenu li {
+  margin-bottom: 0.5rem;
+}
+
+.submenu a {
+  font-size: 1.25rem;
+  font-weight: 400;
+  color: #cbd5e1;
+  transform: none !important;
+  /* Override slide-in for submenu items */
+  transition-delay: 0s !important;
+}
+
+.submenu .submenu-toggle {
+  font-size: 1.25rem;
+  font-weight: 400;
+  color: #cbd5e1;
+  transform: none !important;
+  transition-delay: 0s !important;
+  padding: 0;
+  margin: 0;
+}
+
+/* Flyout Footer */
+.flyout-footer {
+  padding-top: 2rem;
+  border-top: 1px solid var(--glass-border);
+  color: #64748b;
+  font-size: 0.9rem;
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.4s, transform 0.4s;
+  transition-delay: var(--delay);
+}
+
+.flyout-menu.is-open .flyout-footer {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 480px) {
+  :root {
+    --menu-width: 100%;
+  }
+
+  .main-content h1 {
+    font-size: 2rem;
+  }
+
+  /* Force Fullscreen for all directions */
+  .flyout-from-right,
+  .flyout-from-left,
+  .flyout-from-top {
+    width: 100% !important;
+    height: 100% !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: auto !important;
+    bottom: auto !important;
+    border: none !important;
+    /* Remove borders for cleaner fullscreen look */
+    border-right: 1px solid var(--glass-border) !important;
+    /* Add consistent right border */
+    transform: translateX(-100%) !important;
+    /* Force ALL to slide from LEFT with !important */
+  }
+
+  /* Remove specific transforms and force left slide */
+  .flyout-from-right,
+  .flyout-from-left,
+  .flyout-from-top {
+    transform: translateX(-100%) !important;
+  }
+
+  .flyout-menu.is-open {
+    transform: translate(0, 0) !important;
+  }
+
+  /* Reset Top Menu Horizontal Layout to Vertical for Mobile */
+  .flyout-from-top .flyout-links {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+  }
+
+  .flyout-from-top .flyout-links>li {
+    margin-bottom: 1.5rem;
+  }
+
+  .flyout-from-top .flyout-links>li>a,
+  .flyout-from-top .flyout-links>li>.submenu-toggle {
+    font-size: 2rem;
+    /* Restore larger size */
+    justify-content: space-between;
+  }
+
+  .flyout-from-top .submenu {
+    position: static;
+    transform: none;
+    margin-top: 0;
+    min-width: 100%;
+    box-shadow: none;
+    border: none;
+    background: transparent;
+    padding-left: 1rem;
+    border-left: 1px solid rgba(255, 255, 255, 0.1);
+    text-align: left;
+  }
+
+  .flyout-from-top .submenu.is-open {
+    transform: none;
+    margin-top: 1rem;
+  }
+
+  .flyout-from-top .submenu a {
+    font-size: 1.25rem;
+    justify-content: space-between;
+    /* Match default behavior */
+  }
+}

package/css/form-builder.css

@@ -0,0 +1,9 @@
+.form-content .dropzone {
+  border: 1px dashed black;
+  min-height: 200px;
+  padding: 0.5rem;
+}
+
+.row .column .form-content .row {
+  margin-bottom: 1rem;
+}/*# sourceMappingURL=form-builder.css.map */

package/css/form-builder.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["form-builder.scss","form-builder.css"],"names":[],"mappings":"AACE;EACE,wBAAA;EACA,iBAAA;EACA,eAAA;ACAJ;;ADIA;EACE,mBAAA;ACDF","file":"form-builder.css"}

package/css/form-builder.scss

@@ -0,0 +1,11 @@
+.form-content {
+  .dropzone {
+    border: 1px dashed black;
+    min-height: 200px;
+    padding: 0.5rem;
+  }
+}
+
+.row .column .form-content .row {
+  margin-bottom: 1rem;
+}

package/css/form.css

@@ -0,0 +1,130 @@
+:root {
+  --primary-text: #1E1F24;
+  --secondary-text: #62636C;
+  --divider: #D8D9E0;
+  --accent-text: #3D63DD;
+  --error: #D64545;
+  --warning: #C28A00;
+  --success: #2E8B57;
+  --secondary-background: #E7E8EC;
+  --background: #F9F9FB;
+  --accent-color: #3D63DD;
+  --accent-color-lighten: #87A5EF;
+  --accent-color-text: #D8D9E0;
+  --disabled: #D8D9E0;
+}
+
+[data-theme=dark] {
+  --primary-text: #EEEEF0;
+  --secondary-text: #B2B3BD;
+  --divider: #393A40;
+  --accent-text: #0E496D;
+  --error: #FF6B6B;
+  --warning: #F7B500;
+  --success: #5CC689;
+  --background: #111113;
+  --secondary-background: #19191B;
+  --accent-color: #1B7BB4;
+  --accent-color-lighten: #175982;
+  --accent-color-text: #B2B3BD;
+  --disabled: #303136;
+}
+
+textarea, select, .select .dropdown, input {
+  width: 100%;
+  border: 1px solid var(--divider);
+  border-radius: 0.2rem;
+  padding: 0.5rem;
+  box-sizing: border-box;
+  background-color: var(--background);
+  min-height: 2rem;
+  font-size: 1rem;
+  color: var(--primary-text);
+}
+
+select {
+  padding: 0.2rem;
+}
+
+.select-group .dropdown {
+  position: relative;
+  background-color: var(--background);
+}
+.select-group .dropdown-selected {
+  border: 1px solid var(--divider);
+  padding: 0 0.8rem;
+  border-radius: 0.2rem;
+  cursor: pointer;
+  background: var(--background);
+  height: 2rem;
+  line-height: 2rem;
+}
+.select-group .dropdown-selected:after {
+  font-family: "Material Symbols Outlined 24pt", serif;
+  content: "\e5cf";
+  float: right;
+  color: var(--primary-text);
+}
+.select-group .dropdown-options {
+  position: absolute;
+  top: calc(100% + 5px);
+  left: 0;
+  right: 0;
+  border: 1px solid var(--divider);
+  border-radius: 0.2rem;
+  display: none;
+  flex-direction: column;
+  z-index: 10;
+  max-height: 250px;
+  overflow-y: auto;
+  background-color: var(--background);
+}
+.select-group .dropdown-option {
+  padding: 10px;
+  cursor: pointer;
+}
+.select-group .dropdown-option:hover {
+  background: var(--divider);
+}
+.select-group .dropdown-option.selected {
+  background: var(--secondary-background);
+  color: var(--secondary-text);
+}
+.select-group .dropdown.open .dropdown-options {
+  display: flex;
+}
+.select-group .hidden {
+  display: none;
+}
+@media (max-width: 768px) {
+  .select-group .dropdown-options-menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background: #333;
+    color: white;
+    text-align: center;
+    padding: 15px;
+    font-weight: bold;
+  }
+  .select-group .dropdown-options-menu.hidden {
+    display: block;
+  }
+  .select-group .dropdown-options-menu .dropdown-options-icon {
+    position: absolute;
+    right: 45px;
+    cursor: pointer;
+  }
+  .select-group .dropdown-options {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: none;
+    border-radius: 0;
+    padding-top: 60px;
+    font-size: 1.2rem;
+  }
+}/*# sourceMappingURL=form.css.map */

package/css/form.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["properties.scss","form.css","form.scss","parameters.scss"],"names":[],"mappings":"AAAA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,+BAAA;EACA,qBAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;ADEA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EACA,+BAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;AC3BA;EACE,WAAA;EACA,gCAAA;EACA,qBAAA;EACA,eAAA;EACA,sBAAA;EACA,mCAAA;EACA,gBCRY;EDSZ,eCXQ;EDYR,0BAAA;AD8BF;;AC3BA;EACE,eAAA;AD8BF;;AC1BE;EACE,kBAAA;EACA,mCAAA;AD6BJ;AC1BE;EACE,gCAAA;EACA,iBAAA;EACA,qBAAA;EACA,eAAA;EACA,6BAAA;EACA,YC7BU;ED8BV,iBC9BU;AF0Dd;AC1BI;EACE,oDAAA;EACA,gBAAA;EACA,YAAA;EACA,0BAAA;AD4BN;ACxBE;EACE,kBAAA;EACA,qBAAA;EACA,OAAA;EACA,QAAA;EACA,gCAAA;EACA,qBAAA;EACA,aAAA;EACA,sBAAA;EACA,WAAA;EACA,iBAAA;EACA,gBAAA;EACA,mCAAA;AD0BJ;ACvBE;EACE,aAAA;EACA,eAAA;ADyBJ;ACtBE;EACE,0BAAA;ADwBJ;ACrBE;EACE,uCAAA;EACA,4BAAA;ADuBJ;ACpBE;EACE,aAAA;ADsBJ;ACnBE;EACE,aAAA;ADqBJ;AClBE;EACE;IACE,eAAA;IACA,MAAA;IACA,OAAA;IACA,WAAA;IACA,gBAAA;IACA,YAAA;IACA,kBAAA;IACA,aAAA;IACA,iBAAA;EDoBJ;EClBI;IACE,cAAA;EDoBN;ECjBI;IACE,kBAAA;IACA,WAAA;IACA,eAAA;EDmBN;ECfE;IACE,eAAA;IACA,MAAA;IACA,OAAA;IACA,QAAA;IACA,SAAA;IACA,YAAA;IACA,gBAAA;IACA,iBAAA;IACA,iBAAA;EDiBJ;AACF","file":"form.css"}

package/css/form.scss

@@ -0,0 +1,115 @@
+@use "properties";
+@use "parameters" as *;
+
+textarea, select, .select .dropdown, input {
+  width: 100%;
+  border: 1px solid var(--divider);
+  border-radius: calc($border-radius / 2);
+  padding: calc($spacing / 2);
+  box-sizing: border-box;
+  background-color: var(--background);
+  min-height: $form-height;
+  font-size: $spacing;
+  color: var(--primary-text);
+}
+
+select {
+  padding: calc($border-radius / 2);
+}
+
+.select-group {
+  .dropdown {
+    position: relative;
+    background-color: var(--background);
+  }
+
+  .dropdown-selected {
+    border: 1px solid var(--divider);
+    padding: 0 calc($border-radius * 2);
+    border-radius: calc($border-radius / 2);
+    cursor: pointer;
+    background: var(--background);
+    height: $form-height;
+    line-height: $form-height;
+
+    &::after {
+      font-family: "Material Symbols Outlined 24pt", serif;
+      content: "\e5cf";
+      float: right;
+      color: var(--primary-text);
+    }
+  }
+
+  .dropdown-options {
+    position: absolute;
+    top: calc(100% + 5px);
+    left: 0;
+    right: 0;
+    border: 1px solid var(--divider);
+    border-radius: calc($border-radius / 2);
+    display: none;
+    flex-direction: column;
+    z-index: 10;
+    max-height: 250px;
+    overflow-y: auto;
+    background-color: var(--background);
+  }
+
+  .dropdown-option {
+    padding: 10px;
+    cursor: pointer;
+  }
+
+  .dropdown-option:hover {
+    background: var(--divider);
+  }
+
+  .dropdown-option.selected {
+    background: var(--secondary-background);
+    color: var(--secondary-text);
+  }
+
+  .dropdown.open .dropdown-options {
+    display: flex;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  @media (max-width: 768px) {
+    .dropdown-options-menu {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      background: #333;
+      color: white;
+      text-align: center;
+      padding: 15px;
+      font-weight: bold;
+
+      &.hidden {
+        display: block;
+      }
+
+      .dropdown-options-icon {
+        position: absolute;
+        right: 45px;
+        cursor: pointer;
+      }
+    }
+
+    .dropdown-options {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border: none;
+      border-radius: 0;
+      padding-top: 60px;
+      font-size: 1.2rem;
+    }
+  }
+}

package/css/gallery.css

@@ -0,0 +1,91 @@
+:root {
+  --primary-text: #1E1F24;
+  --secondary-text: #62636C;
+  --divider: #D8D9E0;
+  --accent-text: #3D63DD;
+  --error: #D64545;
+  --warning: #C28A00;
+  --success: #2E8B57;
+  --secondary-background: #E7E8EC;
+  --background: #F9F9FB;
+  --accent-color: #3D63DD;
+  --accent-color-lighten: #87A5EF;
+  --accent-color-text: #D8D9E0;
+  --disabled: #D8D9E0;
+}
+
+[data-theme=dark] {
+  --primary-text: #EEEEF0;
+  --secondary-text: #B2B3BD;
+  --divider: #393A40;
+  --accent-text: #0E496D;
+  --error: #FF6B6B;
+  --warning: #F7B500;
+  --success: #5CC689;
+  --background: #111113;
+  --secondary-background: #19191B;
+  --accent-color: #1B7BB4;
+  --accent-color-lighten: #175982;
+  --accent-color-text: #B2B3BD;
+  --disabled: #303136;
+}
+
+.masonry-container {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin: 0 auto;
+  align-items: flex-start;
+}
+
+.masonry-column {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.masonry-item {
+  background-color: var(--card-bg);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  position: relative;
+}
+
+.masonry-item img {
+  width: 100%;
+  height: auto;
+  display: block;
+  -o-object-fit: cover;
+     object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.5s ease-in;
+}
+
+.masonry-item img.loaded {
+  opacity: 1;
+}
+
+.masonry-item-info {
+  padding: 15px;
+}
+
+.masonry-item-title {
+  margin: 0 0 5px;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.masonry-item-desc {
+  margin: 0;
+  font-size: 0.9rem;
+  color: #666;
+}
+
+.loader {
+  text-align: center;
+  padding: 40px;
+}/*# sourceMappingURL=gallery.css.map */

package/css/gallery.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["properties.scss","gallery.css","gallery.scss","parameters.scss"],"names":[],"mappings":"AAAA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,+BAAA;EACA,qBAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;ADEA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EACA,+BAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;AC3BA;EACI,aAAA;EACA,SCLM;EDMN,uBAAA;EACA,cAAA;EACA,uBAAA;AD8BJ;;AC3BA;EACI,aAAA;EACA,sBAAA;EACA,SCdM;EDeN,OAAA;EACA,YAAA;AD8BJ;;AC3BA;EACI,gCAAA;EACA,kBAAA;EACA,gBAAA;EACA,4CCpBK;EDqBL,qDACI;EAEJ,kBAAA;AD4BJ;;ACzBA;EACI,WAAA;EACA,YAAA;EACA,cAAA;EACA,oBAAA;KAAA,iBAAA;EACA,UAAA;EACA,gCAAA;AD4BJ;;ACzBA;EACI,UAAA;AD4BJ;;ACzBA;EACI,aAAA;AD4BJ;;ACzBA;EACI,eAAA;EACA,eAAA;EACA,gBAAA;AD4BJ;;ACzBA;EACI,SAAA;EACA,iBAAA;EACA,WAAA;AD4BJ;;ACzBA;EACI,kBAAA;EACA,aAAA;AD4BJ","file":"gallery.css"}