catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less

   1 .sdc-canvas-zone {
   2     width: 285px;
   3     max-height:186px;
   4     display:flex;
   5     flex-direction:column;
   6     align-self: flex-end;
   7     color:white;
   8     font-family:OpenSans-Regular, sans-serif;
   9     transition: width .2s ease-in-out, max-height .2s ease-in-out .1s;
  10     position:relative;
  11     bottom:0px;
  12
  13     .sdc-canvas-zone__header {
  14         background: #5A5A5A;
  15         border-radius: 2px 2px 0 0;
  16         padding: 5px 10px;
  17         display:flex;
  18         justify-content: space-between;
  19         font-size: 14px;
  20         text-transform:uppercase;
  21         .sdc-canvas-zone__state-button {
  22             font-weight:bold;
  23             cursor:pointer;
  24         }
  25     }
  26
  27     .sdc-canvas-zone__container {
  28         padding:5px;
  29         background-color: #5A5A5A;
  30         opacity:0.9;
  31         flex: 1;
  32         display:flex;
  33         flex-direction: row;
  34         align-items: flex-start;
  35         flex-wrap:wrap;
  36         overflow-y:auto;
  37         min-height: 80px;
  38         max-height: 170px;
  39     }
  40
  41
  42     &.minimized {
  43         max-height:30px;
  44         width:120px;
  45         cursor:pointer;
  46
  47         .sdc-canvas-zone__state-button {
  48             display:none;
  49         }
  50         .sdc-canvas-zone__container {
  51             flex: 0 0 0;
  52             min-height: 0;
  53             padding: 0;
  54             overflow-y:hidden;
  55             transition: min-height .2s ease-in-out .2s;
  56             transition: padding .1s ease-in-out 0s;
  57         }
  58     }
  59     &.hidden {
  60         display:none;
  61     }
  62 }