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

   1 @import '../../../../../../assets/styles/variables';
   2
   3 .zone-instance {
   4     position:relative;
   5     width:76px;
   6     margin:5px;
   7     opacity:1;
   8
   9     .zone-instance__handle {
  10         display:none;
  11         position:absolute;
  12         right:4px;
  13         top:10px;
  14         width:22px;
  15         height:22px;
  16         cursor:pointer;
  17         border: solid @main_color_p 1px;
  18         border-radius: 2px;
  19         text-align: center;
  20         font-weight:bold;
  21     }
  22
  23     .zone-instance__body {
  24         margin:0 auto;
  25         width:43px;
  26         height:43px;
  27         display:flex;
  28         padding:3px;
  29     }
  30
  31     .zone-instance__body-content {
  32         border-radius: 2px;
  33         flex:1;
  34         color:@main_color_p;
  35         font-size:16px;
  36         text-align:center;
  37         display:flex;
  38         align-items: center;
  39         justify-content: center;
  40         box-shadow:none;
  41         transition:box-shadow 5s;
  42     }
  43
  44     .zone-instance__name {
  45         text-overflow: ellipsis;
  46         overflow: hidden;
  47         white-space: nowrap;
  48         text-align:center;
  49     }
  50     /* Dynamic classes below */
  51
  52     .target-handle {
  53         position:absolute;
  54         width:18px;
  55         height:18px;
  56         display:block;
  57         top: -4px;
  58         right: 10px;
  59         background-size: 100% 100%;
  60         cursor: url("../../../../../../assets/styles/images/canvas-tagging-icons/policy_2.svg"), pointer;
  61
  62         &.tagged-policy {
  63             background-image: url('../../../../../../assets/styles/images/canvas-tagging-icons/policy_added.svg');
  64         }
  65
  66         &.tag-available {
  67             background-image: url('../../../../../../assets/styles/images/canvas-tagging-icons/indication.svg');
  68         }
  69     }
  70
  71
  72     &.mode-1, &.mode-2, &.mode-3 { //hover, selected, tag
  73         .zone-instance__body {
  74             border:solid 2px;
  75             border-radius: 2px;
  76             padding:2px;
  77             cursor:pointer;
  78         }
  79     }
  80
  81     &.mode-1, &.mode-2:hover{
  82         .zone-instance__handle{
  83             display:block;
  84         }
  85     }
  86
  87     &.locked {
  88         cursor: inherit;
  89     }
  90
  91     &.hiding {
  92         opacity:0;
  93         .zone-instance__body-content {
  94             box-shadow: #CCC 0px 0px 15px;
  95         }
  96     }
  97
  98
  99     &.mode-3 .zone-instance__handle {
 100         width:24px;
 101         height:24px;
 102         right:3px;
 103         top:9px;
 104         display:block;
 105         background-image: linear-gradient(-140deg, #009E98 0%, #97D648 100%);
 106         border: 2px solid @main_color_p;
 107         border-radius: 2px;
 108         box-shadow: inset 2px -2px 3px 0 #007A3E;
 109     }
 110
 111 }
 112 .sdc-canvas-zone.group-zone {
 113     .zone-instance__handle {
 114         background-color:@main_color_a;
 115     }
 116     .zone-instance__body {
 117         border-color:@main_color_a;
 118         .zone-instance__body-content {
 119             background: @main_color_a;
 120         }
 121     }
 122 }
 123
 124 .sdc-canvas-zone.policy-zone {
 125     .zone-instance__handle {
 126         background-color:@main_color_r;
 127     }
 128     .zone-instance__body {
 129         border-color:@main_color_r;
 130         .zone-instance__body-content {
 131             background: @main_color_r;
 132         }
 133     }
 134 }