catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less

   1 .ellipsis-directive-more-less {
   2     float: right;
   3     margin-right: 10px;
   4     line-height: 23px;
   5     text-decoration: underline;
   6     text-align: left;
   7 }
   8
   9
  10 .expand-collapse-title {
  11     display:flex;
  12     align-items: center;
  13     cursor: pointer;
  14     font-size: 14px;
  15     text-transform: uppercase;
  16     line-height: 32px;
  17     padding: 0 10px 0 20px;
  18
  19     overflow: hidden;
  20     text-overflow: ellipsis;
  21     white-space: nowrap;
  22
  23     header {
  24         flex: 1;
  25     }
  26
  27     .expand-collapse-title-icon {
  28         padding-top: 10px;
  29         padding-left: 2px;
  30         transition: transform .3s ease-out;
  31
  32     }
  33
  34     &.expanded .expand-collapse-title-icon {
  35         transform: rotate(0);
  36     }
  37
  38     &.collapsed .expand-collapse-title-icon {
  39         transform: rotate(-180deg);
  40     }
  41
  42 }
  43
  44 .expand-collapse-content {
  45     overflow: hidden;
  46     transition: max-height .3s ease-in;
  47
  48     &.collapsed {
  49         max-height: 0px;
  50         overflow:hidden;
  51         transition: all .3s cubic-bezier(0, 1, 0, 1);
  52
  53     }
  54
  55 }