@egovernments/digit-ui-components-css 0.0.2-beta.28 → 0.0.2-beta.29

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.0.2-beta.29] - 2024-09-05
+### Changed
+- Added Accordion animation styles
+
 ## [0.0.2-beta.28] - 2024-09-04
 ### Changed
 - Added BottomSheet styles

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * @egovernments/digit-ui-components-css - 0.0.2-beta.28
+ * @egovernments/digit-ui-components-css - 0.0.2-beta.29
  *
  * Copyright (c) 2024 Jagankumar <jagan.kumar@egovernments.org>
  * 
@@ -1243,7 +1243,7 @@
 .customEmployeeCard {
   margin: 8px !important; }
 
-.digit-accordion-header {
+.digit-accordion-title {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1255,19 +1255,19 @@
   grid-gap: 1.25rem;
   gap: 1.25rem; }
   @media (max-aspect-ratio: 9 / 16) {
-    .digit-accordion-header {
+    .digit-accordion-title {
       padding-left: 1rem;
       padding-bottom: 1rem;
       padding-right: 1rem;
       padding-top: 1rem; } }
   @media (min-aspect-ratio: 9 / 16) and (max-aspect-ratio: 3 / 4) {
-    .digit-accordion-header {
+    .digit-accordion-title {
       padding-left: 1.25rem;
       padding-bottom: 1.25rem;
       padding-right: 1.25rem;
       padding-top: 1.25rem; } }
   @media (min-aspect-ratio: 3 / 4) {
-    .digit-accordion-header {
+    .digit-accordion-title {
       padding-left: 1.5rem;
       padding-bottom: 1.5rem;
       padding-right: 1.5rem;
@@ -1290,19 +1290,17 @@
   -ms-flex-align: center;
   align-items: center; }
 
-.digit-accordion-title {
+.digit-accordion-header-title {
   color: #363636;
   -webkit-box-flex: 1;
   -ms-flex-positive: 1;
   flex-grow: 1; }
 
-.digit-accordion-toggle {
-  width: 2rem;
-  height: 2rem;
-  -ms-flex-negative: 0;
-  flex-shrink: 0; }
-
 .digit-accordion-content {
+  max-height: 0;
+  overflow: hidden;
+  -webkit-transition: max-height .3s ease,padding .3s ease;
+  transition: max-height .3s ease,padding .3s ease;
   background-color: initial;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -1322,37 +1320,60 @@
     .digit-accordion-content {
       font-size: .875rem;
       padding-left: 1rem;
-      padding-bottom: 1rem;
+      padding-bottom: 0;
       padding-right: 1rem;
-      padding-top: 1rem; } }
+      padding-top: 0; } }
   @media (min-aspect-ratio: 9 / 16) and (max-aspect-ratio: 3 / 4) {
     .digit-accordion-content {
       font-size: 1rem;
       padding-left: 1.25rem;
-      padding-bottom: 1.25rem;
+      padding-bottom: 0;
       padding-right: 1.25rem;
-      padding-top: 1.25rem; } }
+      padding-top: 0; } }
   @media (min-aspect-ratio: 3 / 4) {
     .digit-accordion-content {
       font-size: 1rem;
+      padding-left: 1.5rem;
+      padding-bottom: 0;
+      padding-right: 1.5rem;
+      padding-top: 0; } }
+
+.digit-accordion-content.open {
+  max-height: -webkit-fit-content;
+  max-height: -moz-fit-content;
+  max-height: fit-content; }
+  @media (max-aspect-ratio: 9 / 16) {
+    .digit-accordion-content.open {
+      padding-left: 1rem;
+      padding-bottom: 1rem;
+      padding-right: 1rem;
+      padding-top: 1rem; } }
+  @media (min-aspect-ratio: 9 / 16) and (max-aspect-ratio: 3 / 4) {
+    .digit-accordion-content.open {
+      padding-left: 1.25rem;
+      padding-bottom: 1.25rem;
+      padding-right: 1.25rem;
+      padding-top: 1.25rem; } }
+  @media (min-aspect-ratio: 3 / 4) {
+    .digit-accordion-content.open {
       padding-left: 1.5rem;
       padding-bottom: 1.5rem;
       padding-right: 1.5rem;
       padding-top: 1.5rem; } }
 
-.digit-accordion-container.border {
+.digit-accordion.border {
   border: .063rem solid #d6d5d4; }
 
-.digit-accordion-container.borderRadius {
+.digit-accordion.borderRadius {
   border-radius: .25rem; }
 
-.digit-accordion-container.divider .digit-accordion-content {
+.digit-accordion.divider .digit-accordion-content {
   border-top: 1px solid #d6d5d4; }
 
-.digit-accordion-container.no-divider .digit-accordion-header {
+.digit-accordion.no-divider .digit-accordion-title {
   padding-bottom: 0; }
 
-.digit-accordion-container.cardBg {
+.digit-accordion.cardBg {
   background-color: #fafafa; }
 
 @-webkit-keyframes rotateOpen {
@@ -2029,22 +2050,22 @@ body {
   .typography.heading-m, .digit-panel-wrapper .digit-panel-info-wrapper .digit-panel-response, .digit-text-block-wrap .digit-text-block-header-content .digit-text-block-subheader, .digit-uploader-wrap .capture-heading {
     font-size: 1.5rem; } }
 
-.typography.heading-m, .digit-panel-wrapper .digit-panel-info-wrapper .digit-panel-response, .digit-text-block-wrap .digit-text-block-header-content .digit-text-block-subheader, .digit-uploader-wrap .capture-heading, .typography.heading-s, .digit-accordion-number, .digit-accordion-title, .digit-multiselectdropdown-wrap .digit-category-name, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active:hover p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.checked p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect.checked .option-des-container p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect:active .option-des-container p, .digit-category-name, .digit-dropdown-item:active .option-des-container .main-option, .digit-dropdown-item.nestedtextdropdown:active .option-des-container .main-option, .digit-dropdown-item.profilenestedtext:active .option-des-container .main-option, .digit-stepper-container .digit-stepper-content .stepper-label.current, .digit-stepper-container .digit-stepper-content:hover .stepper-label.completed, .timeline-label, .digit-toggle-btn-wrap input:checked + .digit-toggle-label, .digit-toggle-btn-wrap .digit-checkbox-container .input-emp:checked + .digit-toggle-label, .digit-checkbox-container .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap.checked .digit-toggle-label, .digit-tree-multiselect-option.expanded .digit-option-label, .digit-tree-select-option.expanded .digit-option-label, .digit-tree-multiselect-option.checked .digit-option-label, .digit-uploader-wrap .digit-uploaded-file-container .uploaded-file-container-sub .uploaded-file-details, .digit-viewcard-field-pair .digit-viewcard-label, .header-dropdown-option.activeIndex, .header-dropdown-option:active, .digit-topbar .digit-logo-ulb-wrapper .digit-topbar-ulb, .digit-sidebar-item.selected .item-label, .digit-sidebar-item.selected:hover .item-label, .digit-sidebar-item:active .item-label, .digit-sidebar-item:active:hover .item-label, .tooltip-content .tooltip-header {
+.typography.heading-m, .digit-panel-wrapper .digit-panel-info-wrapper .digit-panel-response, .digit-text-block-wrap .digit-text-block-header-content .digit-text-block-subheader, .digit-uploader-wrap .capture-heading, .typography.heading-s, .digit-accordion-number, .digit-accordion-header-title, .digit-multiselectdropdown-wrap .digit-category-name, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active:hover p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.checked p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect.checked .option-des-container p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect:active .option-des-container p, .digit-category-name, .digit-dropdown-item:active .option-des-container .main-option, .digit-dropdown-item.nestedtextdropdown:active .option-des-container .main-option, .digit-dropdown-item.profilenestedtext:active .option-des-container .main-option, .digit-stepper-container .digit-stepper-content .stepper-label.current, .digit-stepper-container .digit-stepper-content:hover .stepper-label.completed, .timeline-label, .digit-toggle-btn-wrap input:checked + .digit-toggle-label, .digit-toggle-btn-wrap .digit-checkbox-container .input-emp:checked + .digit-toggle-label, .digit-checkbox-container .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap.checked .digit-toggle-label, .digit-tree-multiselect-option.expanded .digit-option-label, .digit-tree-select-option.expanded .digit-option-label, .digit-tree-multiselect-option.checked .digit-option-label, .digit-uploader-wrap .digit-uploaded-file-container .uploaded-file-container-sub .uploaded-file-details, .digit-viewcard-field-pair .digit-viewcard-label, .header-dropdown-option.activeIndex, .header-dropdown-option:active, .digit-topbar .digit-logo-ulb-wrapper .digit-topbar-ulb, .digit-sidebar-item.selected .item-label, .digit-sidebar-item.selected:hover .item-label, .digit-sidebar-item:active .item-label, .digit-sidebar-item:active:hover .item-label, .tooltip-content .tooltip-header {
   font-family: Roboto;
   font-style: normal;
   font-weight: 700;
   line-height: 1.14rem; }
 
 @media (max-aspect-ratio: 9 / 16) {
-  .typography.heading-s, .digit-accordion-number, .digit-accordion-title, .digit-multiselectdropdown-wrap .digit-category-name, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active:hover p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.checked p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect.checked .option-des-container p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect:active .option-des-container p, .digit-category-name, .digit-dropdown-item:active .option-des-container .main-option, .digit-dropdown-item.nestedtextdropdown:active .option-des-container .main-option, .digit-dropdown-item.profilenestedtext:active .option-des-container .main-option, .digit-stepper-container .digit-stepper-content .stepper-label.current, .digit-stepper-container .digit-stepper-content:hover .stepper-label.completed, .timeline-label, .digit-toggle-btn-wrap input:checked + .digit-toggle-label, .digit-toggle-btn-wrap .digit-checkbox-container .input-emp:checked + .digit-toggle-label, .digit-checkbox-container .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap.checked .digit-toggle-label, .digit-tree-multiselect-option.expanded .digit-option-label, .digit-tree-select-option.expanded .digit-option-label, .digit-tree-multiselect-option.checked .digit-option-label, .digit-uploader-wrap .digit-uploaded-file-container .uploaded-file-container-sub .uploaded-file-details, .digit-viewcard-field-pair .digit-viewcard-label, .header-dropdown-option.activeIndex, .header-dropdown-option:active, .digit-topbar .digit-logo-ulb-wrapper .digit-topbar-ulb, .digit-sidebar-item.selected .item-label, .digit-sidebar-item.selected:hover .item-label, .digit-sidebar-item:active .item-label, .digit-sidebar-item:active:hover .item-label, .tooltip-content .tooltip-header {
+  .typography.heading-s, .digit-accordion-number, .digit-accordion-header-title, .digit-multiselectdropdown-wrap .digit-category-name, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active:hover p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.checked p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect.checked .option-des-container p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect:active .option-des-container p, .digit-category-name, .digit-dropdown-item:active .option-des-container .main-option, .digit-dropdown-item.nestedtextdropdown:active .option-des-container .main-option, .digit-dropdown-item.profilenestedtext:active .option-des-container .main-option, .digit-stepper-container .digit-stepper-content .stepper-label.current, .digit-stepper-container .digit-stepper-content:hover .stepper-label.completed, .timeline-label, .digit-toggle-btn-wrap input:checked + .digit-toggle-label, .digit-toggle-btn-wrap .digit-checkbox-container .input-emp:checked + .digit-toggle-label, .digit-checkbox-container .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap.checked .digit-toggle-label, .digit-tree-multiselect-option.expanded .digit-option-label, .digit-tree-select-option.expanded .digit-option-label, .digit-tree-multiselect-option.checked .digit-option-label, .digit-uploader-wrap .digit-uploaded-file-container .uploaded-file-container-sub .uploaded-file-details, .digit-viewcard-field-pair .digit-viewcard-label, .header-dropdown-option.activeIndex, .header-dropdown-option:active, .digit-topbar .digit-logo-ulb-wrapper .digit-topbar-ulb, .digit-sidebar-item.selected .item-label, .digit-sidebar-item.selected:hover .item-label, .digit-sidebar-item:active .item-label, .digit-sidebar-item:active:hover .item-label, .tooltip-content .tooltip-header {
     font-size: 1rem; } }
 
 @media (min-aspect-ratio: 9 / 16) and (max-aspect-ratio: 3 / 4) {
-  .typography.heading-s, .digit-accordion-number, .digit-accordion-title, .digit-multiselectdropdown-wrap .digit-category-name, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active:hover p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.checked p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect.checked .option-des-container p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect:active .option-des-container p, .digit-category-name, .digit-dropdown-item:active .option-des-container .main-option, .digit-dropdown-item.nestedtextdropdown:active .option-des-container .main-option, .digit-dropdown-item.profilenestedtext:active .option-des-container .main-option, .digit-stepper-container .digit-stepper-content .stepper-label.current, .digit-stepper-container .digit-stepper-content:hover .stepper-label.completed, .timeline-label, .digit-toggle-btn-wrap input:checked + .digit-toggle-label, .digit-toggle-btn-wrap .digit-checkbox-container .input-emp:checked + .digit-toggle-label, .digit-checkbox-container .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap.checked .digit-toggle-label, .digit-tree-multiselect-option.expanded .digit-option-label, .digit-tree-select-option.expanded .digit-option-label, .digit-tree-multiselect-option.checked .digit-option-label, .digit-uploader-wrap .digit-uploaded-file-container .uploaded-file-container-sub .uploaded-file-details, .digit-viewcard-field-pair .digit-viewcard-label, .header-dropdown-option.activeIndex, .header-dropdown-option:active, .digit-topbar .digit-logo-ulb-wrapper .digit-topbar-ulb, .digit-sidebar-item.selected .item-label, .digit-sidebar-item.selected:hover .item-label, .digit-sidebar-item:active .item-label, .digit-sidebar-item:active:hover .item-label, .tooltip-content .tooltip-header {
+  .typography.heading-s, .digit-accordion-number, .digit-accordion-header-title, .digit-multiselectdropdown-wrap .digit-category-name, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active:hover p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.checked p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect.checked .option-des-container p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect:active .option-des-container p, .digit-category-name, .digit-dropdown-item:active .option-des-container .main-option, .digit-dropdown-item.nestedtextdropdown:active .option-des-container .main-option, .digit-dropdown-item.profilenestedtext:active .option-des-container .main-option, .digit-stepper-container .digit-stepper-content .stepper-label.current, .digit-stepper-container .digit-stepper-content:hover .stepper-label.completed, .timeline-label, .digit-toggle-btn-wrap input:checked + .digit-toggle-label, .digit-toggle-btn-wrap .digit-checkbox-container .input-emp:checked + .digit-toggle-label, .digit-checkbox-container .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap.checked .digit-toggle-label, .digit-tree-multiselect-option.expanded .digit-option-label, .digit-tree-select-option.expanded .digit-option-label, .digit-tree-multiselect-option.checked .digit-option-label, .digit-uploader-wrap .digit-uploaded-file-container .uploaded-file-container-sub .uploaded-file-details, .digit-viewcard-field-pair .digit-viewcard-label, .header-dropdown-option.activeIndex, .header-dropdown-option:active, .digit-topbar .digit-logo-ulb-wrapper .digit-topbar-ulb, .digit-sidebar-item.selected .item-label, .digit-sidebar-item.selected:hover .item-label, .digit-sidebar-item:active .item-label, .digit-sidebar-item:active:hover .item-label, .tooltip-content .tooltip-header {
     font-size: 1rem; } }
 
 @media (min-aspect-ratio: 3 / 4) {
-  .typography.heading-s, .digit-accordion-number, .digit-accordion-title, .digit-multiselectdropdown-wrap .digit-category-name, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active:hover p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.checked p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect.checked .option-des-container p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect:active .option-des-container p, .digit-category-name, .digit-dropdown-item:active .option-des-container .main-option, .digit-dropdown-item.nestedtextdropdown:active .option-des-container .main-option, .digit-dropdown-item.profilenestedtext:active .option-des-container .main-option, .digit-stepper-container .digit-stepper-content .stepper-label.current, .digit-stepper-container .digit-stepper-content:hover .stepper-label.completed, .timeline-label, .digit-toggle-btn-wrap input:checked + .digit-toggle-label, .digit-toggle-btn-wrap .digit-checkbox-container .input-emp:checked + .digit-toggle-label, .digit-checkbox-container .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap.checked .digit-toggle-label, .digit-tree-multiselect-option.expanded .digit-option-label, .digit-tree-select-option.expanded .digit-option-label, .digit-tree-multiselect-option.checked .digit-option-label, .digit-uploader-wrap .digit-uploaded-file-container .uploaded-file-container-sub .uploaded-file-details, .digit-viewcard-field-pair .digit-viewcard-label, .header-dropdown-option.activeIndex, .header-dropdown-option:active, .digit-topbar .digit-logo-ulb-wrapper .digit-topbar-ulb, .digit-sidebar-item.selected .item-label, .digit-sidebar-item.selected:hover .item-label, .digit-sidebar-item:active .item-label, .digit-sidebar-item:active:hover .item-label, .tooltip-content .tooltip-header {
+  .typography.heading-s, .digit-accordion-number, .digit-accordion-header-title, .digit-multiselectdropdown-wrap .digit-category-name, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem:active:hover p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.checked p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect.checked .option-des-container p, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem.nestedtextmultiselect:active .option-des-container p, .digit-category-name, .digit-dropdown-item:active .option-des-container .main-option, .digit-dropdown-item.nestedtextdropdown:active .option-des-container .main-option, .digit-dropdown-item.profilenestedtext:active .option-des-container .main-option, .digit-stepper-container .digit-stepper-content .stepper-label.current, .digit-stepper-container .digit-stepper-content:hover .stepper-label.completed, .timeline-label, .digit-toggle-btn-wrap input:checked + .digit-toggle-label, .digit-toggle-btn-wrap .digit-checkbox-container .input-emp:checked + .digit-toggle-label, .digit-checkbox-container .digit-toggle-btn-wrap .input-emp:checked + .digit-toggle-label, .digit-toggle-btn-wrap.checked .digit-toggle-label, .digit-tree-multiselect-option.expanded .digit-option-label, .digit-tree-select-option.expanded .digit-option-label, .digit-tree-multiselect-option.checked .digit-option-label, .digit-uploader-wrap .digit-uploaded-file-container .uploaded-file-container-sub .uploaded-file-details, .digit-viewcard-field-pair .digit-viewcard-label, .header-dropdown-option.activeIndex, .header-dropdown-option:active, .digit-topbar .digit-logo-ulb-wrapper .digit-topbar-ulb, .digit-sidebar-item.selected .item-label, .digit-sidebar-item.selected:hover .item-label, .digit-sidebar-item:active .item-label, .digit-sidebar-item:active:hover .item-label, .tooltip-content .tooltip-header {
     font-size: 1rem; } }
 
 .typography.heading-xs, .digit-tag-container .digit-tag.errortag .digit-text {