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

   1 .zone-child {
   2     position:relative;
   3     width:76px;
   4     margin:5px;
   5
   6     .zone-child__handle {
   7         display:none;
   8         position:absolute;
   9         right:4px;
  10         top:10px;
  11         width:22px;
  12         height:22px;
  13         cursor:pointer;
  14         border: solid white 1px;
  15         border-radius: 2px;
  16         text-align: center;
  17         font-weight:bold;
  18     }
  19
  20     .zone-child__body {
  21         margin:0 auto;
  22         width:43px;
  23         height:43px;
  24         display:flex;
  25         padding:3px;
  26
  27     }
  28
  29     .zone-child__body-content {
  30         border-radius: 2px;
  31         flex:1;
  32         color:white;
  33         font-size:18px;
  34         text-align:center;
  35         display:flex;
  36         align-items: center;
  37         justify-content: center;
  38     }
  39
  40     .zone-child__name {
  41         text-overflow: ellipsis;
  42         overflow: hidden;
  43         white-space: nowrap;
  44         text-align:center;
  45     }
  46     /* Dynamic classes below */
  47
  48     &.mode-1, &.mode-2, &.mode-3 { //hover, selected, tag
  49         .zone-child__body {
  50             border:solid 2px;
  51             border-radius: 2px;
  52             padding:2px;
  53             cursor:pointer;
  54         }
  55         .zone-child__handle{
  56             display:block;
  57             cursor:pointer;
  58         }
  59     }
  60
  61     &.locked {
  62         cursor: default;
  63     }
  64
  65     // &:not(.locked):hover .zone-child__handle{
  66     //     display:block;
  67     // }
  68     .zone-child__body {
  69         cursor: default;
  70     }
  71     &.mode-3 .zone-child__handle {
  72         width:24px;
  73         height:24px;
  74         right:3px;
  75         top:9px;
  76         display:block;
  77         background-image: linear-gradient(-140deg, #009E98 0%, #97D648 100%);
  78         border: 2px solid #FFFFFF;
  79         border-radius: 2px;
  80         box-shadow: inset 2px -2px 3px 0 #007A3E;
  81         cursor: pointer;
  82     }
  83
  84 }
  85 .sdc-canvas-zone.group-zone {
  86     .zone-child__handle {
  87         background-color:#009FDB;
  88     }
  89     .zone-child__body {
  90         border-color:#009FDB;
  91     }
  92     .zone-child__body-content {
  93         background: #009FDB;
  94     }
  95 }
  96
  97 .sdc-canvas-zone.policy-zone {
  98     .zone-child__handle {
  99         background-color:#0568AE;
 100     }
 101     .zone-child__body {
 102         border-color:#1287D9;
 103         .zone-child__body-content {
 104             background: #1287D9;
 105         }
 106     }
 107     .zone-child__body-content {
 108         background: #0568AE;
 109     }
 110 }