catalog-ui/src/app/directives/graphs-v2/palette/palette.less

   1 .drag-icon-border{
   2   border: 7px solid red;
   3   border-radius: 500px;
   4   -webkit-border-radius: 500px;
   5   -moz-border-radius: 500px;
   6   width: 53px;
   7   height: 53px;
   8 }
   9
  10 .drag-icon-circle{
  11   width: 60px;
  12   height: 60px;
  13   -webkit-border-radius: 50%;
  14   -moz-border-radius: 50%;
  15   border-radius: 50%;
  16   position: relative;
  17
  18 }
  19
  20
  21 @green-shadow: rgba(29, 154, 149, 0.3);
  22 @red-shadow: rgba(218, 31, 61, 0.3);
  23 .drag-icon-circle .sprite-resource-icons {
  24   position: absolute;
  25   top: 10px;
  26   left: 10px;
  27 }
  28
  29 .drag-icon-circle.red {
  30   background: @red-shadow;
  31 }
  32
  33 .drag-icon-circle.green {
  34   background: @green-shadow;
  35 }
  36
  37
  38 .node-substitute {
  39   display: none;
  40   position: absolute;
  41   z-index: 9999;
  42   height: 80px;
  43   width: 80px;
  44   border-radius: 50%;
  45   text-align: center;
  46
  47   span {
  48     display: inline-block;
  49     vertical-align: middle;
  50     height: 100%;
  51   }
  52
  53   img {
  54     height: 40px;
  55     width: 40px;
  56     box-shadow: 0 0 0 10px @green-shadow;
  57     border-radius: 50%;
  58
  59     -webkit-user-drag: none;
  60     -moz-user-drag: none;
  61     user-drag: none;
  62   }
  63   &.red img {
  64     box-shadow: 0 0 0 10px @red-shadow;
  65   }
  66   &.bounce img {
  67     -moz-animation:bounceOut 0.3s linear;
  68     -webkit-animation:bounceOut 0.3s linear;
  69     animation:bounceOut 0.3s linear;
  70   }
  71 }
  72
  73 @keyframes bounceOut {
  74   0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; }
  75   60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
  76   85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; }
  77   100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
  78 }
  79
  80 @-moz-keyframes bounceOut {
  81   0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; }
  82   60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
  83   85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; }
  84   100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
  85 }
  86
  87 @-webkit-keyframes bounceOut {
  88   0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; }
  89   60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
  90   85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; }
  91   100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
  92 }