catalog-ui/src/app/view-models/tabs/general-tab.less

   1 .sdc-general-tab {
   2
   3     display: flex;
   4     min-height: 100%;
   5     flex-flow: column;
   6
   7     .sdc-edit-icon {
   8         .sprite;
   9         .e-sdc-small-icon-pencil;
  10     }
  11     .sdc-general-tab-title {
  12
  13         .f-color.a;
  14         .f-type._14_m;
  15         padding: 0px 0px 15px 20px;
  16         border-bottom: 1px solid @main_color_o;
  17     }
  18
  19     .sdc-general-tab-sub-title {
  20
  21         .f-color.a;
  22         .f-type._14_m;
  23         padding: 15px 20px 15px 20px;
  24
  25     }
  26
  27     //scrollbar
  28     .general-tab-scrollbar-container {
  29
  30         .perfect-scrollbar;
  31         width: 100%;
  32     }
  33
  34     //plus minus expand collapse
  35     .general-tab-expand-collapse {
  36
  37         &.expanded {
  38             .expand-collapse-title {
  39                 .expand-collapse-title-icon {
  40                     .expand-collapse-minus-icon;
  41                 }
  42             }
  43         }
  44
  45         .expand-collapse-title {
  46
  47             padding: 8px 20px 4px 20px;
  48             cursor: pointer;
  49             &:hover {
  50                 background-color: @main_color_o;
  51             }
  52
  53             .expand-collapse-title-icon {
  54                 .hand;
  55                 .sprite-new;
  56                 .expand-collapse-plus-icon;
  57             }
  58             .expand-collapse-title-text {
  59                 max-width: 225px;
  60                 display: inline-block;
  61                 overflow: hidden;
  62                 text-overflow: ellipsis;
  63                 white-space: nowrap;
  64                 padding-left: 10px;
  65                 line-height: 15px;
  66             }
  67         }
  68         .selected {
  69             background-color: @main_color_a;
  70             .f-color.p;
  71         }
  72
  73     }
  74
  75     .expand-collapse-sub-title {
  76         max-width: 190px;
  77         display: inline-block;
  78         overflow: hidden;
  79         text-overflow: ellipsis;
  80         white-space: nowrap;
  81         padding: 10px 0 0 43px;
  82
  83     }
  84
  85     //resizable view
  86     .resizable-container {
  87
  88         flex: 1 1 auto;
  89         display: flex;
  90         flex-direction: column;
  91         height: 90%;
  92
  93         .resizable-section {
  94             min-height: 50px;
  95             flex: 1;
  96             display: flex;
  97             flex-flow: column;
  98             &.resizable {
  99                 flex: 0 0 300px;
 100             }
 101         }
 102
 103         //this is the resizable icon custom design for the angular resizable directive
 104         .rg-top {
 105             span {
 106                 margin-top: -5px;
 107                 &:before {
 108                     border-top: 1px dotted @main_color_m;
 109                     content: '';
 110                     display: inline-block;
 111                     width: 39px;
 112                     height: 6px;
 113                 }
 114
 115                 border-top: 1px dotted @main_color_m;
 116                 border-bottom: 1px dotted @main_color_m;
 117                 width: 39px;
 118                 height: 4px;
 119             }
 120         }
 121     }
 122 }