com.phloxui/styles/lib/component/ComponentAccordion.less

PhloxUI Ng2+ Framework

// component accordion
.phx-component-accordion{

    >.accordion-container{
      .phlox-transition();
      overflow: hidden;

      >.accordion-item{
  				background-color: extract(@CLR_1, 9);
  				.phlox-transition();
  				padding-left: 0;
  				padding-right: 0;
  				position: relative;
          z-index: 10;

  				>.header {
  					height: @COMPONENT_ACCORDION_HEADER_HEIGHT;
  					border-bottom: @COMPONENT_ACCORDION_HEADER_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
						cursor: pointer;

            >.header-wrapper{
          		height: 100%;
          		position: relative;
              overflow: hidden;
              padding-left: @COMPONENT_ACCORDION_HEADER_PADDING_LEFT;
              padding-right: @COMPONENT_ACCORDION_HEADER_PADDING_RIGHT;

              &.disable {
                color: extract(@CLR_1, 7);
              }

          		>.left {
          			float: left;
                display: flex;
                align-items: center;
                height: 100%;
          		}

          		>.right {
          			float: right;
                display: flex;
                align-items: center;
								height: 100%;

								>.down-triangle {
									cursor: pointer;

									&.left-triangle-accordion {
										transform: rotate(90deg);
									}

								}
          		}
          	}
  				}

  				>.body {
              .phlox-transition();

              >.body-wrapper{
								// display: none;
                overflow: auto;
            		position: relative;
                padding-left: @COMPONENT_ACCORDION_BODY_PADDING_LEFT;
                padding-right: @COMPONENT_ACCORDION_BODY_PADDING_RIGHT;

                &.disable {
                  color: extract(@CLR_1, 7);
                  // opacity: 0;
                }

            		>.address-item {
            		}

            		>.row {
            			&.adding {
            				margin-top: 5pt;
            			}
            		}

            	}
  				}

  				&.hideborder {
  					border-bottom: 0;
  				}
  			}

  			>.accordion-fake-item {
  					background-color: extract(@CLR_1, 9);
  					height: 0;
  			}
    }

}