maverick-wave 3.1.0 → 3.1.3

package/src/scss/components/_cards.scss

@@ -12,7 +12,7 @@ $_mw-card-addon-colors: (
 .mw-card {
   background: var(--mw-card-background);
   border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
-  padding: spacing('4') spacing('0') spacing('2') spacing('0');
+  padding: spacing('5') spacing('0') spacing('3') spacing('0');
   box-shadow: 0 5px 10px var(--mw-shadow);
   transition: var(--mw-transition);
   border: 1px solid var(--mw-border);
@@ -22,7 +22,7 @@ $_mw-card-addon-colors: (
   z-index: z-index('card');
 
   &-simple {
-    padding: spacing('4');
+    padding: spacing('5');
   }
 
   &:hover {
@@ -34,7 +34,7 @@ $_mw-card-addon-colors: (
   &-badge {
     position: absolute;
     top: spacing('2');
-    right: spacing('3');
+    right: spacing('4');
     padding: spacing('1') spacing('4');
     font-size: font-size('xs');
     color: var(--mw-primary-text-color);
@@ -56,14 +56,13 @@ $_mw-card-addon-colors: (
     font-size: font-size('xs');
     color: var(--mw-primary-text-color);
     background: var(--mw-primary-color);
-    border-radius: radius('xs');
     white-space: nowrap;
     width: 220px;
     z-index: z-index('card') + 5;
     pointer-events: none;
     transform: rotate(25deg);
     text-align: center;
-    opacity: 0.75;
+    opacity: 0.8;
     font-weight: font-weight('medium');
     @include media-down('sm') {
       font-size: font-size('2xs');
@@ -110,7 +109,7 @@ $_mw-card-addon-colors: (
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    padding: spacing('4') spacing('5') spacing('4') spacing('4');
+    padding: spacing('5');
   }
 
   &-title {
@@ -218,14 +217,12 @@ $_mw-card-addon-colors: (
 
   @include media-down('sm') {
     &-body {
-      padding: spacing('3');
+      padding: spacing('4');
     }
 
     // Adjust the image margin to match the new padding
     .mw-card-img {
       margin-bottom: spacing('2');
-      // margin: -#{spacing('4')} -#{spacing('4')} spacing('4');
-
       img {
         width: 100%;
       }
@@ -233,13 +230,13 @@ $_mw-card-addon-colors: (
   }
 
   &-stack {
-    padding: spacing('3');
+    padding: spacing('4') spacing('5');
     transition: all 0.4s ease;
 
     // Icon transition setup
     &-icon {
-      width: 42px;
-      height: 42px;
+      width: 38px;
+      height: 38px;
       border-radius: radius('full');
       background: var(--mw-primary-color);
       color: var(--mw-primary-text-color);
@@ -255,20 +252,19 @@ $_mw-card-addon-colors: (
 
     // Add rotation on hover
     &:hover &-icon {
-      transform: rotate(33deg);
+      transform: rotate(25deg);
     }
 
     // Rest of your styles...
     &-header {
       display: flex;
       align-items: center;
-      margin-bottom: spacing('3');
       position: relative;
 
       &:after {
         content: '';
         position: absolute;
-        bottom: -#{spacing('4')};
+        bottom: spacing('-3');
         left: 48%;
         transform: translateX(-50%);
         width: 90%;
@@ -298,7 +294,7 @@ $_mw-card-addon-colors: (
     &-body {
       display: flex;
       flex-direction: column;
-      padding-top: spacing('3');
+      padding-top: spacing('5');
     }
 
     &-text {

package/src/scss/components/_coming-soon.scss

@@ -10,11 +10,10 @@
   overflow: hidden;
   position: relative;
   transition: var(--mw-transition);
-  padding: spacing('10') spacing('0');
-  margin: spacing('1');
+  padding: spacing('12') spacing('0');
 
   &-icon {
-    margin-right: spacing('5');
+    margin-right: spacing('7');
     font-size: font-size('3xl');
     transition: var(--mw-transition);
     position: relative;
@@ -57,7 +56,7 @@
 
     .mw-coming-soon-icon {
       color: var(--mw-primary-text-color);
-      transform: rotate(23deg);
+      transform: rotate(27deg);
     }
 
     .mw-coming-soon-text {
@@ -85,6 +84,7 @@
 
     &-text,
     &-icon {
+      margin-right: spacing('5');
       letter-spacing: spacing('2');
       font-size: font-size('lg');
     }

package/src/scss/components/_content-slider.scss

@@ -80,7 +80,7 @@
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: spacing('3');
-    padding: spacing('2') spacing('3');
+    padding: spacing('3');
     background: var(--mw-card-background);
     z-index: z-index('menu');
     width: 100%;
@@ -91,7 +91,6 @@
     }
 
     @include media-down('sm') {
-      padding: spacing('2');
       grid-template-columns: repeat(2, 1fr);
     }
   }
@@ -101,7 +100,7 @@
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: spacing('3');
-    padding: spacing('2') spacing('3');
+    padding: spacing('3');
     background: var(--mw-card-background);
     z-index: z-index('menu');
     width: 100%;
@@ -112,7 +111,6 @@
     }
 
     @include media-down('sm') {
-      padding: spacing('2');
       grid-template-columns: 1fr;
     }
   }

package/src/scss/components/_divider.scss

@@ -2,12 +2,14 @@
 
 // Base horizontal divider
 .mw-divider {
+  display: block;
+  width: 100%;
   border: none;
   border-top: 1px solid var(--mw-border);
   margin: spacing('5') spacing('0');
 
   &-thick {
-    border-top-width: 3px;
+    border-top-width: 4px;
   }
 
   &-dashed {
@@ -37,6 +39,7 @@
 // Divider with centered label text
 .mw-divider-text {
   display: flex;
+  width: 100%;
   align-items: center;
   gap: spacing('3');
   margin: spacing('5') spacing('0');

package/src/scss/components/_empty-state.scss

@@ -6,13 +6,13 @@
   align-items: center;
   justify-content: center;
   text-align: center;
-  padding: spacing('9') spacing('5');
+  padding: spacing('8') spacing('4');
 
   &-icon {
-    font-size: font-size('6xl');
+    font-size: font-size('5xl');
     color: var(--mw-text-muted-color);
-    opacity: 0.45;
-    margin-bottom: spacing('4');
+    opacity: 0.6;
+    margin-bottom: spacing('5');
     line-height: 1;
   }
 
@@ -20,7 +20,7 @@
     font-size: font-size('xl');
     font-weight: font-weight('medium');
     color: var(--mw-text-color);
-    margin-bottom: spacing('2');
+    margin-bottom: spacing('1');
   }
 
   &-desc {
@@ -53,21 +53,21 @@
   // Color variants (change icon color)
   &-primary .mw-empty-state-icon {
     color: var(--mw-primary-color);
-    opacity: 0.6;
+    opacity: 0.7;
   }
 
   &-success .mw-empty-state-icon {
     color: var(--mw-success-color);
-    opacity: 0.6;
+    opacity: 0.7;
   }
 
   &-warning .mw-empty-state-icon {
     color: var(--mw-warning-color);
-    opacity: 0.6;
+    opacity: 0.7;
   }
 
   &-danger .mw-empty-state-icon {
     color: var(--mw-danger-color);
-    opacity: 0.6;
+    opacity: 0.7;
   }
 }

package/src/scss/components/_gallery.scss

@@ -2,7 +2,6 @@
 
 .mw-gallery-container {
   max-width: 1100px;
-  border-radius: radius('md');
   margin: spacing('1') auto;
 }
 
@@ -11,7 +10,6 @@
   overflow: hidden;
   width: 100%;
   border-radius: radius('md');
-  margin: spacing('1');
 
   &-track {
     display: flex;
@@ -39,7 +37,6 @@
     color: rgba(23, 23, 23, 0.8); // fixed color
     background: rgba(240, 240, 240, 0.2); // fixed color
     border: none;
-    padding: spacing('5') spacing('2');
     font-size: font-size('5xl');
     cursor: pointer;
     z-index: z-index('menu');
@@ -69,7 +66,7 @@
   &-desc {
     text-align: left;
     padding: spacing('2') spacing('3');
-    margin-top: spacing('1');
+    margin-top: spacing('2');
     background: var(--mw-card-background);
     border-radius: radius('md');
     border: 1px solid var(--mw-primary-color-hover);
@@ -77,17 +74,17 @@
 
   &-dots {
     text-align: center;
-    margin-top: spacing('4');
+    margin-top: spacing('5');
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: spacing('3');
+    gap: spacing('4');
   }
 
   &-dot {
     display: inline-block;
-    width: 10px;
-    height: 10px;
+    width: 11px;
+    height: 11px;
     border-radius: 50%;
     background: var(--mw-gray-background);
     cursor: pointer;
@@ -106,7 +103,6 @@
       height: 470px;
     }
     &-navi {
-      padding: spacing('4') spacing('2');
       font-size: font-size('3xl');
       height: calc(470px * 0.9);
     }
@@ -124,6 +120,13 @@
     &-desc {
       font-size: font-size('sm');
     }
+    &-dot {
+      width: 10px;
+      height: 10px;
+      &.mw-active {
+        transform: scale(1.4);
+      }
+    }
   }
 }
 
@@ -133,23 +136,21 @@
       height: 270px;
     }
     &-navi {
-      padding: spacing('3') spacing('1');
       font-size: font-size('2xl');
       height: calc(270px * 0.9);
       border-radius: radius('sm');
-      width: 12%;
+      width: 11%;
     }
     &-desc {
       font-size: font-size('xs');
     }
     &-dots {
       gap: spacing('2');
-      margin-top: spacing('3');
+      margin-top: spacing('4');
     }
     &-dot {
       width: 9px;
       height: 9px;
-
       &.mw-active {
         transform: scale(1.3);
       }

package/src/scss/components/_info.scss

@@ -14,7 +14,7 @@ $_mw-info-colors: (
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: spacing('2') spacing('4');
+  padding: spacing('3') spacing('5');
   margin: spacing('1');
   font-size: font-size('base');
   font-weight: font-weight('medium');
@@ -39,18 +39,19 @@ $_mw-info-colors: (
     font-weight: font-weight('normal');
   }
   &-lg {
-    padding: spacing('3') spacing('5');
+    padding: spacing('4') spacing('6');
     font-size: font-size('lg');
     font-weight: font-weight('medium');
   }
   &-xl {
-    padding: spacing('4') spacing('6');
+    padding: spacing('5') spacing('8');
     font-size: font-size('xl');
     font-weight: font-weight('medium');
   }
 
   // counter variant: big number + small label
   &-counter {
+    min-width: spacing('12');
     .mw-info-value {
       font-size: font-size('4xl');
       font-weight: font-weight('bold');
@@ -59,8 +60,7 @@ $_mw-info-colors: (
     .mw-info-label {
       font-size: font-size('sm');
       font-weight: font-weight('medium');
-      opacity: 0.8;
-      min-width: 5rem;
+      opacity: 0.6;
       text-align: center;
     }
   }
@@ -99,7 +99,7 @@ $_mw-info-colors: (
     svg,
     [class*='fa-'],
     [class*='fas-'] {
-      font-size: 0.6rem;
+      font-size: 0.55rem;
     }
   }
 

package/src/scss/components/_lists.scss

@@ -2,9 +2,8 @@
 
 // Base list styles
 .mw-list {
-  margin: spacing('3') spacing('0') spacing('5') spacing('0');
-  padding-left: spacing('2');
-  padding-right: spacing('2');
+  margin: spacing('4') spacing('0');
+  padding: spacing('0') spacing('2');
 
   li {
     margin-bottom: spacing('1');
@@ -23,13 +22,13 @@
 // Unstyled list - removes bullets and padding
 .mw-list-unstyled {
   list-style: none;
-  padding-left: spacing('0');
+  padding-left: spacing('1');
 }
 
 // Inline list - horizontal layout
 .mw-list-inline {
   list-style: none;
-  padding-left: spacing('0');
+  padding-left: spacing('1');
 
   li {
     display: inline-block;
@@ -83,11 +82,11 @@
 
 // Dot lists
 .mw-list-dot {
-  padding-left: spacing('4');
+  padding-left: spacing('3');
   list-style: disc inside;
 
   li {
-    padding-left: spacing('0');
+    padding-left: spacing('1');
     margin-bottom: spacing('1');
 
     &::marker {
@@ -103,7 +102,7 @@
   padding-left: spacing('3');
 
   li {
-    padding-left: spacing('0');
+    padding-left: spacing('1');
     margin-bottom: spacing('1');
   }
 
@@ -160,7 +159,7 @@
   > * {
     position: relative;
     border-radius: radius('sm');
-    padding: spacing('3') spacing('4');
+    padding: spacing('3');
     background: var(--mw-card-background);
     border: 1px solid transparent;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -178,7 +177,7 @@
     }
 
     &:hover {
-      padding-left: spacing('5');
+      padding-left: spacing('4');
       background: var(--mw-primary-background-hover);
       border-color: var(--mw-primary-color);
       transform: translateX(4px);
@@ -246,7 +245,7 @@
 
       &:hover {
         color: var(--mw-text-color);
-        padding-left: spacing('3');
+        padding-left: spacing('4');
 
         &::before {
           display: none;
@@ -258,18 +257,17 @@
   // Nested compact lists styling
   .mw-item-list-compact {
     margin-top: spacing('2');
-    margin-left: spacing('3');
+    margin-left: spacing('2');
     border-left: 2px solid var(--mw-border);
     border-radius: 0;
 
     > * {
-      padding: spacing('2') spacing('3');
+      padding: spacing('2');
       font-size: font-size('sm');
 
       &:hover {
         background: var(--mw-primary-color-hover);
-        margin-left: spacing('-2');
-        padding-left: spacing('5');
+        padding-left: spacing('4');
         border-left: 3px solid var(--mw-primary-color);
       }
     }
@@ -287,7 +285,7 @@
   box-shadow: 0 2px 8px var(--mw-shadow);
 
   > * {
-    padding: spacing('3') spacing('4');
+    padding: spacing('4');
     border-bottom: 1px solid var(--mw-border);
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
@@ -387,7 +385,7 @@
 // Checkbox list component
 .mw-item-list-checkbox {
   @extend .mw-item-list;
-  gap: spacing('1');
+  gap: 0;
   border: 1px solid var(--mw-border);
   border-radius: radius('md');
   background: var(--mw-card-background);
@@ -395,9 +393,10 @@
 
   > * {
     display: flex;
-    align-items: flex-start;
-    padding: spacing('2') spacing('3');
+    align-items: center;
+    padding: spacing('2');
     border-bottom: 1px solid var(--mw-border);
+    border-left: 3px solid transparent;
     cursor: pointer;
     transition: all 0.2s ease;
     user-select: none;
@@ -417,8 +416,8 @@
 
     .mw-checkbox {
       display: flex;
-      align-items: flex-start;
-      gap: spacing('2');
+      align-items: center;
+      gap: spacing('3');
       flex: 1;
 
       // Hide native checkbox
@@ -434,13 +433,13 @@
       .mw-checkbox-box {
         position: relative;
         flex-shrink: 0;
-        width: spacing('4');
-        height: spacing('4');
+        width: 14px;
+        height: 14px;
         border: 2px solid var(--mw-border);
         border-radius: radius('sm');
         background: var(--mw-form-elements-background);
         transition: var(--mw-transition);
-        margin-top: spacing('0.5');
+        margin-top: 3px;
         cursor: pointer;
         display: block;
 
@@ -490,6 +489,11 @@
         }
       }
 
+      // When header + description exists, top-align box with text
+      &:has(.mw-checkbox-header) {
+        align-items: flex-start;
+      }
+
       // When only label exists (no header)
       &:not(:has(.mw-checkbox-header)) {
         align-items: center;
@@ -512,8 +516,7 @@
     // When item is selected, add visual feedback
     &.mw-selected {
       background: var(--mw-primary-background-hover);
-      border-left: 3px solid var(--mw-primary-color);
-      padding-left: spacing('2');
+      border-left-color: var(--mw-primary-color);
     }
   }
 

package/src/scss/components/_meta-info.scss

@@ -2,7 +2,7 @@
 
 .mw-meta {
   &-header {
-    padding: spacing('3') spacing('2');
+    padding: spacing('3');
     border-bottom: 1px solid var(--mw-border);
     margin-bottom: spacing('5');
     display: flex;

package/src/scss/components/_modals.scss

@@ -29,13 +29,11 @@
   background: var(--mw-card-background);
   border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
   box-shadow: 0 25px 50px var(--mw-shadow);
-  max-width: 450px;
+  max-width: 550px;
   width: 100%;
   max-height: 75vh;
   display: flex;
   flex-direction: column;
-  transform: scale(0.9) translateY(spacing('4'));
-  transition: transform 0.5s ease;
   z-index: z-index('modal');
 
   .mw-modal-open & {
@@ -43,15 +41,15 @@
   }
 
   &.mw-modal-sm {
-    max-width: 350px;
+    max-width: 370px;
     max-height: 70vh;
   }
   &.mw-modal-lg {
-    max-width: 600px;
+    max-width: 680px;
     max-height: 80vh;
   }
   &.mw-modal-xl {
-    max-width: 790px;
+    max-width: 900px;
     max-height: 85vh;
   }
 }

package/src/scss/components/_pagination.scss

@@ -19,7 +19,8 @@
     background: none;
     color: var(--mw-primary-text-color);
     cursor: pointer;
-    padding: spacing('2') spacing('3');
+    padding: spacing('2') spacing('4');
+    margin: spacing('0') spacing('5');
     border-radius: radius('sm');
     border: 1px solid var(--mw-primary-text-color);
     display: flex;
@@ -67,7 +68,7 @@
   }
 }
 
-// Optional: Add slide animation
+// Optional slide animation
 .mw-pagination-slide-left {
   animation: slideLeft 0.3s ease;
 }