dgrcorrientes-modulos 1.0.0

package/src/stories/Components/Collapse/Collapse.scss

@@ -0,0 +1,339 @@
+@import '/src/sass/utilities/variables';
+
+.e-collapse {
+  &__container {
+    background-color: $white;
+    gap: 5px;
+    padding: 5px;
+    padding-bottom: 10px;
+    min-width: max-content;
+
+    .left-container {
+      gap: 9px;
+
+      &__dropIcon {
+        font-size: 13px;
+        padding-top: 5px;
+
+        .icon-drop {
+          transition: transform 0.3s ease;
+
+          &.rotate {
+            transform: rotate(90deg);
+            transition: transform 0.3s ease;
+          }
+        }
+      }
+
+      &__texts {
+        .state-title {
+          gap: 5px;
+          padding-bottom: 6px;
+
+          i {
+            font-size: 9px;
+          }
+
+          &__text {
+            color: $darkText;
+            font-size: 10px;
+            font-weight: $fw-medium;
+          }
+        }
+
+        .title-container {
+          gap: 8px;
+
+          .fa_icon {
+            font-size: 19px;
+          }
+
+          .badge {
+            font-size: 12px;
+          }
+
+          &__title {
+            margin: 0;
+            white-space: break-spaces;
+            max-width: 100%;
+
+            &--regular {
+              font-weight: $fw-regular;
+              color: $text-600;
+            }
+
+            &--semibold {
+              font-weight: $fw-semibold;
+            }
+          }
+        }
+
+        .description {
+          font-size: 14px;
+          padding-top: 5px;
+          color: $text-400;
+          white-space: break-spaces;
+        }
+
+        .details {
+          font-size: 12px;
+          padding-top: 2px;
+          color: $text-400;
+          white-space: break-spaces;
+        }
+
+        .date {
+          font-size: 12px;
+          padding-top: 2px;
+          gap: 7px;
+          color: $text-400;
+
+          i {
+            color: $primary-600;
+          }
+
+          &__days {
+            gap: 7px;
+          }
+
+          &__time {
+            gap: 7px;
+          }
+        }
+      }
+    }
+
+    .right-container {
+      gap: 20px;
+      padding-right: 15px;
+
+      &__buttonDetail {
+        position: relative;
+
+        .detail-tooltip {
+          position: absolute;
+
+          &--top {
+            bottom: 100%;
+          }
+
+          &--bottom {
+            top: 100%;
+          }
+        }
+      }
+
+      &__buttonMenu {
+        position: relative;
+        .menu-select {
+          background-color: white;
+          border-radius: 12px;
+          position: absolute;
+          top: 120%;
+          right: 0px;
+          z-index: 100;
+        }
+      }
+
+      .menu-drop-component{
+        right: -10px;
+        bottom: -105px;
+        z-index: 100;
+
+      }
+
+      &__price {
+        gap: 5px;
+
+        .input--checkbox {
+          color: $text-400;
+          font-size: 12px;
+        }
+
+        .col-price {
+          gap: 5px;
+          .desc {
+            font-size: 12px;
+            color: $text-400;
+            padding-right: 5px;
+          }
+
+          .value {
+            font-size: 14px;
+          }
+
+          &__price {
+            font-size: 18px;
+            font-weight: $fw-semibold;
+          }
+        }
+      }
+
+      &__dropRightButton {
+        .button {
+          .fa-icon {
+            font-size: 12px;
+          }
+        }
+      }
+
+      &__buttonLink {
+        .button {
+          font-weight: $fw-semibold;
+
+          .fa_icon {
+            font-size: 8px;
+          }
+        }
+      }
+
+      &__editCheckbox {
+        gap: 15px;
+        .buttonEdit {
+          .button {
+            color: $primary-600;
+          }
+        }
+      }
+    }
+
+    &--father {
+      &--onlyTitle {
+        padding-bottom: 10px;
+        // padding-top: 10px;
+      }
+    }
+
+    &--child {
+      
+
+      &--long {
+        .left-container {
+          padding-left: 48px;
+        }
+      }
+
+      &--short {
+        .left-container {
+          padding-left: 10px;
+        }
+      }
+
+      .left-container {
+        &__texts {
+          .title {
+            font-size: 14px;
+          }
+
+          .description {
+            font-size: 12px;
+          }
+        }
+      }
+
+      .right-container {
+        &__price {
+          .col-price {
+            &__price {
+              font-size: 16px;
+            }
+          }
+        }
+      }
+
+      &--onlyTitle {
+        &.e-collapse__container--show {
+          padding-top: 23px;
+        }
+      }
+    }
+
+    &--nephew {
+  
+
+      &--long {
+        .left-container {
+          padding-left: 67px;
+        }
+      }
+
+      &--short {
+        .left-container {
+          padding-left: 30px;
+        }
+      }
+
+      .left-container {
+        &__texts {
+          .title {
+            font-size: 14px;
+          }
+
+          .description {
+            font-size: 12px;
+          }
+        }
+      }
+
+      .right-container {
+        &__price {
+          .col-price {
+            &__price {
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+
+    &--disabled {
+      pointer-events: none;
+      opacity: 0.35;
+    }
+
+    &--borderBottom {
+      border-bottom: 1px solid $truegray-300;
+    }
+  }
+
+  &--show {
+    opacity: 1;
+    transition: all 0.4s ease-out;
+
+    .e-collapse__container {
+      &--child {
+        &--onlyTitle {
+          padding-top: 23px;
+        }
+      }
+
+      &--nephew {
+        &--onlyTitle {
+          padding-top: 23px;
+        }
+      }
+    }
+  }
+
+  &--hide {
+    max-height: 0;
+    opacity: 0;
+    transition: all 0.4s;
+    position: sticky;
+    z-index: -10;
+  }
+
+  &--colored {
+    &-gray {
+      background-color: $truegray-100;
+
+      .e-collapse__container {
+        background-color: $truegray-100;
+      }
+    }
+  }
+
+  &--borderTop {
+    border-top: 1px solid $truegray-300;
+  }
+}