catalog-ui/src/app/view-models/catalog/catalog.less

   1 .sdc-catalog-container {
   2
   3     .i-sdc-categories-list-item {
   4         font-weight: normal;
   5     }
   6
   7     // Checkboxes
   8     .i-sdc-designer-leftbar-section-content-ul {
   9         padding: 0;
  10         margin: 0;
  11
  12         .i-sdc-designer-leftbar-section-content-ul-li {
  13             margin-top: 5px;
  14
  15             .tlv-checkbox {
  16                 font-size: 13px;
  17                 font-family: @font-opensans-medium;
  18                 color: @func_color_s;
  19             }
  20         }
  21
  22         .i-sdc-catalog-subcategories-checkbox {
  23             padding: 0 0 0 20px;
  24             margin: 0;
  25
  26             > li {
  27                 margin-top: 5px;
  28
  29                 .tlv-checkbox {
  30                     font-size:13px;
  31                     font-family: @font-opensans-regular;
  32                 }
  33             }
  34
  35             .i-sdc-catalog-grouping-checkbox {
  36                 padding: 0 0 0 20px;
  37                 margin: 0;
  38             }
  39
  40         }
  41
  42     }
  43
  44     .i-sdc-designer-leftbar-section-content-li {
  45         &:last-child {
  46             .i-sdc-categories-list-item {
  47                 margin: 0;
  48             }
  49         }
  50     }
  51
  52     .i-sdc-categories-list-item {
  53         display: block;
  54         //margin-bottom: 5px;
  55         //padding-left: 15px;
  56         //text-indent: -24px;
  57         vertical-align: top;
  58         font-weight: bold;
  59     }
  60
  61     .i-sdc-subcategories-list-item {
  62         display: block;
  63         //padding-left: 20px;
  64         vertical-align: top;
  65         font-weight: normal;
  66         margin: 0;
  67         //text-indent: -10px;
  68     }
  69
  70     .i-sdc-categories-list-item-icon {
  71         display: inline-block;
  72         float: right;
  73         position: relative;
  74         right: -8px;
  75         top: 6px;
  76     }
  77
  78     .i-sdc-categories-list-item {
  79         margin-top: 7px;
  80         &.NOT_CERTIFIED_CHECKOUT,
  81         &.NOT_CERTIFIED_CHECKIN {
  82             .i-sdc-categories-list-item-icon {
  83                 background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2889px;
  84                 width: 14px;
  85                 height: 14px;
  86
  87             }
  88         }
  89
  90         &.CERTIFIED {
  91             .i-sdc-categories-list-item-icon {
  92                 background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -3034px;
  93                 width: 14px;
  94                 height: 16px;
  95             }
  96         }
  97
  98         &.READY_FOR_CERTIFICATION {
  99             .i-sdc-categories-list-item-icon {
 100                 background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2985px;
 101                 width: 14px;
 102                 height: 16px;
 103             }
 104         }
 105
 106         &.CERTIFICATION_IN_PROGRESS {
 107             .i-sdc-categories-list-item-icon {
 108                 background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2934px;
 109                 width: 14px;
 110                 height: 16px;
 111             }
 112         }
 113
 114         &.DISTRIBUTED,
 115         &.TBD {
 116             .i-sdc-categories-list-item-icon {
 117                 background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -43px -3087px;
 118                 width: 24px;
 119                 height: 14px;
 120
 121             }
 122         }
 123     }
 124
 125     .i-sdc-categories-list-input {
 126         margin: 8px;
 127
 128     }
 129
 130     .i-sdc-subcategories-list-input {
 131
 132         margin: 8px;
 133     }
 134     .i-sdc-subcategories-list-input-container {
 135         margin: 0px 0px 0px 20px;
 136         padding: 2px;
 137     }
 138
 139     .w-sdc-header-catalog-search-container {
 140         display: table;
 141         padding: 21px 0;
 142         position: relative;
 143
 144         .w-sdc-designer-leftbar-search-input {
 145             color: #000;
 146             width: 300px;
 147         }
 148
 149        // .magnification {
 150       //      .sprite;
 151       //      .sprite.magnification-glass;
 152       //      .hand;
 153       //      position: absolute;
 154       //      top: 40px;
 155      //       right: 42px;
 156       //  }
 157     }
 158
 159     .w-sdc-catalog-main {
 160         padding: 10px 12px;
 161     }
 162     .w-sdc-dashboard-catalog-header {
 163         .b_3;
 164         display: inline-block;
 165         font-style: italic;
 166         font-weight: bold;
 167         padding-left: 10px;
 168     }
 169
 170     .w-sdc-dashboard-catalog-header-order {
 171         .b_3;
 172         font-weight: 800;
 173     }
 174
 175     .w-sdc-dashboard-catalog-sort {
 176         .b_3;
 177         font-weight: bold;
 178         white-space:pre;
 179         &:hover{
 180             .hand;
 181             text-decoration: none;
 182             .a_3;
 183         }
 184         &.blue {
 185             .a_3;
 186         }
 187     }
 188
 189     .w-sdc-catalog-sort-arrow{
 190         display: inline-block;
 191         &.up{
 192             .b_3;
 193             width: 0;
 194             height: 0;
 195             border-left: 5px solid transparent;
 196             border-right: 5px solid transparent;
 197             border-bottom: 5px solid ;
 198         }
 199         &.down{
 200             .b_3;
 201             width: 0;
 202             height: 0;
 203             border-left: 5px solid transparent;
 204             border-right: 5px solid transparent;
 205             border-top: 5px solid;
 206         }
 207     }
 208
 209
 210
 211
 212     .w-sdc-dashboard-catalog-header-right{
 213         float: right;
 214         display: inline-block;
 215         padding-right:34px;
 216     }
 217
 218     .w-sdc-header-catalog-search-input {
 219         width: 420px;
 220         display: table-cell;
 221         padding: 0 25px 1px 10px;
 222         border: 1px solid #bcbcbc;
 223         .border-radius(10px);
 224         height: 30px;
 225         margin: 10px 30px;
 226         outline: none;
 227     }
 228
 229     .sdc-catalog-type-filter-container {
 230         margin-top: -1px;
 231     }
 232
 233     .i-sdc-designer-leftbar-section-title {
 234         text-transform: uppercase;
 235         .l_14_m;
 236         line-height: 30px;
 237     }
 238
 239     .i-sdc-designer-leftbar-section-title-icon {
 240         .hand;
 241         .tlv-sprite;
 242         .footer-close;
 243         transition: .3s all;
 244         margin-top: -4px;
 245     }
 246
 247     .i-sdc-designer-leftbar-section-title-text {
 248         margin-left: 20px;
 249     }
 250
 251     .seperator-left,
 252     .seperator-right {
 253         border-right: solid 1px @color_m;
 254         display: table-cell;
 255         width: 2px;
 256     }
 257
 258     // Rotate catalog left side arrows
 259     .i-sdc-designer-leftbar-section-title.expanded .i-sdc-designer-leftbar-section-title-icon {
 260         transform: rotate(180deg);
 261     }
 262
 263     // Transform catalog left side sections
 264     .i-sdc-designer-leftbar-section-title + .i-sdc-designer-leftbar-section-content {
 265         max-height: 0px;
 266         margin: 0 auto;
 267         transition: all .3s;
 268         overflow: hidden;
 269         padding: 0 10px 0 18px;
 270     }
 271
 272     .i-sdc-designer-leftbar-section-title.expanded + .i-sdc-designer-leftbar-section-content {
 273         max-height: 9999px;
 274         margin: 0 auto 1px;
 275         transition: all .3s;
 276         padding: 10px 18px 10px 18px;
 277         overflow: hidden;
 278     }
 279
 280 }
 281
 282 .w-sdc-search-icon{
 283     position: absolute;
 284     right: 40px;
 285     top: 40px;
 286     &.leftbar{
 287         top: 19px;
 288         right: 18px;
 289     }
 290     &.magnification {
 291         .sprite;
 292         .sprite.magnification-glass;
 293         .hand;
 294     }
 295
 296     &.cancel {
 297         .sprite;
 298         .sprite.clear-text;
 299         .hand;
 300     }
 301 }