mautourco-components 0.2.22 → 0.2.24

package/dist/styles/components/molecule/service-selector.css

@@ -2085,9 +2085,15 @@
 
 .service-selector__trigger {
   width: 100%;
-  padding: var(--service-selector-spacing-service-selector-padding-y, 12px) var(--service-selector-spacing-service-selector-padding-x, 24px);
-  background-color: var(--service-selector-color-service-selector-background-default, #ffffff);
-  border: var(--service-selector-border-width-default, 1px) solid var(--service-selector-color-service-selector-border-default, #a3a3a3);
+  max-height: 48px;
+  padding: var(--service-selector-spacing-service-selector-padding-y, 12px)
+    var(--service-selector-spacing-service-selector-padding-x, 24px);
+  background-color: var(
+    --service-selector-color-service-selector-background-default,
+    #ffffff
+  );
+  border: var(--service-selector-border-width-default, 1px) solid
+    var(--service-selector-color-service-selector-border-default, #a3a3a3);
   border-radius: var(--border-radius-rounded-xl, 12px);
   opacity: var(--opacity-opacity-100, 1);
   display: flex;
@@ -2097,11 +2103,22 @@
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   /* Website/Light/Level 1 */
-  box-shadow: var(--spacing-base-0, 0px) var(--spacing-base-0, 0px) var(--backdrop-blur-backdrop-blur-sm, 4px) var(--spacing-base-0, 0px) rgba(48, 54, 66, 0.11), var(--spacing-base-0, 0px) var(--spacing-base-0-5, 2px) var(--backdrop-blur-backdrop-blur-xs, 2px) var(--spacing-base-0, 0px) rgba(48, 54, 66, 0.10);
+  box-shadow:
+    var(--spacing-base-0, 0px) var(--spacing-base-0, 0px)
+      var(--backdrop-blur-backdrop-blur-sm, 4px) var(--spacing-base-0, 0px)
+      rgba(48, 54, 66, 0.11),
+    var(--spacing-base-0, 0px) var(--spacing-base-0-5, 2px)
+      var(--backdrop-blur-backdrop-blur-xs, 2px) var(--spacing-base-0, 0px)
+      rgba(48, 54, 66, 0.1);
 }
 
-.service-selector__trigger:hover:not(:disabled):not(.service-selector__trigger--selected) {
-  background-color: var(--service-selector-color-service-selector-background-hover, #ccfbf6);
+.service-selector__trigger:hover:not(:disabled):not(
+    .service-selector__trigger--selected
+  ) {
+  background-color: var(
+    --service-selector-color-service-selector-background-hover,
+    #ccfbf6
+  );
   border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
 }
 
@@ -2139,7 +2156,10 @@
 /* Trigger States */
 
 .service-selector__trigger--default {
-  background-color: var(--service-selector-color-service-selector-background-default, #ffffff);
+  background-color: var(
+    --service-selector-color-service-selector-background-default,
+    #ffffff
+  );
   border-color: var(--service-selector-color-service-selector-border-default, #a3a3a3);
 }
 
@@ -2156,20 +2176,29 @@
 /* Selected state - same style as default */
 
 .service-selector__trigger.service-selector__trigger--selected {
-  background-color: var(--service-selector-color-service-selector-background-default, #ffffff);
+  background-color: var(
+    --service-selector-color-service-selector-background-default,
+    #ffffff
+  );
   border-color: var(--service-selector-color-service-selector-border-default, #a3a3a3);
 }
 
-.service-selector__trigger.service-selector__trigger--selected .service-selector__trigger-icon,
-.service-selector__trigger.service-selector__trigger--selected .service-selector__trigger-text,
-.service-selector__trigger.service-selector__trigger--selected .service-selector__trigger-chevron {
+.service-selector__trigger.service-selector__trigger--selected
+  .service-selector__trigger-icon,
+.service-selector__trigger.service-selector__trigger--selected
+  .service-selector__trigger-text,
+.service-selector__trigger.service-selector__trigger--selected
+  .service-selector__trigger-chevron {
   color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
 }
 
 /* When dropdown is open AND a service is selected, keep default style */
 
 .service-selector__trigger.service-selector__trigger--selected:hover {
-  background-color: var(--service-selector-color-service-selector-background-hover, #ccfbf6);
+  background-color: var(
+    --service-selector-color-service-selector-background-hover,
+    #ccfbf6
+  );
   border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
 }
 
@@ -2186,17 +2215,21 @@
 /* Dropdown Panel */
 
 .service-selector__panel {
-  position: absolute;
+  /* position: absolute; */
   top: 100%;
   left: 0;
   right: 0;
+  padding: 0;
   margin-top: 8px;
   background-color: var(--color-elevation-level-1, #ffffff);
   border-radius: var(--service-selector-boder-radius-dropdown-item-default, 12px);
   overflow: hidden;
   z-index: 50;
-  border: var(--service-selector-border-width-default, 1px) solid var(--service-selector-color-service-selector-border-default, #a3a3a3);
-  box-shadow: 0px 0px 4px 0px rgba(48, 54, 66, 0.11), 0px 0px 2px 0px rgba(48, 54, 66, 0.1);
+  border: var(--service-selector-border-width-default, 1px) solid
+    var(--service-selector-color-service-selector-border-default, #a3a3a3);
+  box-shadow:
+    0px 0px 4px 0px rgba(48, 54, 66, 0.11),
+    0px 0px 2px 0px rgba(48, 54, 66, 0.1);
 }
 
 .service-selector__content {
@@ -2230,14 +2263,18 @@
 
 .service-selector__option {
   width: 100%;
-  padding: var(--service-selector-spacing-dropdown-item-padding-y, 12px) var(--service-selector-spacing-dropdown-item-padding-x, 24px);
+  padding: var(--service-selector-spacing-dropdown-item-padding-y, 12px)
+    var(--service-selector-spacing-dropdown-item-padding-x, 24px);
   display: flex;
   align-items: center;
   gap: var(--service-selector-spacing-dropdown-item-gap, 12px);
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   border: 0;
-  background-color: var(--service-selector-color-dropdown-item-background-default, transparent);
+  background-color: var(
+    --service-selector-color-dropdown-item-background-default,
+    transparent
+  );
   text-align: left;
   border-radius: var(--service-selector-boder-radius-dropdown-item-default, 12px);
 }
@@ -2246,17 +2283,25 @@
   background-color: var(--service-selector-color-dropdown-item-background-hover, #f5f5f5);
 }
 
-.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected) .service-selector__option-icon,
-.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected) .service-selector__option-text {
+.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected)
+  .service-selector__option-icon,
+.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected)
+  .service-selector__option-text {
   color: var(--service-selector-color-dropdown-item-foreground-hover, #404040);
 }
 
 .service-selector__option--selected {
-  background-color: var(--service-selector-color-dropdown-item-background-active, #042c2f);
+  background-color: var(
+    --service-selector-color-dropdown-item-background-active,
+    #042c2f
+  );
 }
 
 .service-selector__option--selected:hover {
-  background-color: var(--service-selector-color-dropdown-item-background-active, #042c2f);
+  background-color: var(
+    --service-selector-color-dropdown-item-background-active,
+    #042c2f
+  );
 }
 
 .service-selector__option--selected .service-selector__option-icon,
@@ -2308,3 +2353,7 @@
     padding: 10px 16px;
   }
 }
+
+[data-radix-popper-content-wrapper] {
+  z-index: 99999 !important;
+}