gerrit.onap Code Review - sdc/sdc-workflow-designer.git/blob

   1 @import "../default/theme.less";
   2
   3 @checkbox-border-size: 1px;
   4
   5 .plx-checkbox-container {
   6         font-size: 0;
   7         position: relative;
   8 }
   9
  10 .plx-checkbox {
  11         position: absolute;
  12         z-index: -1;
  13         opacity: 0;
  14         & + .checkbox-substitute {
  15                 position: relative;
  16                 display: inline-block;
  17                 cursor: pointer;
  18                 height: @checkbox-size;
  19                 width: @checkbox-size;
  20                 border: @checkbox-border-size solid @border-color-base;
  21                 border-radius: @radius-sm;
  22                 vertical-align: middle;
  23         }
  24         & + .checkbox-substitute + span {
  25                 font-weight: normal;
  26                 font-size: @font-size;
  27                 cursor: pointer;
  28                 vertical-align: middle;
  29                 .font-padding(@font-size);
  30         }
  31         &:hover + .checkbox-substitute {
  32                 border-color: @primary-color;
  33                 outline: none;
  34                 background-image: none;
  35                 -webkit-box-shadow: none;
  36                 -moz-box-shadow: none;
  37                 box-shadow: none;
  38                 text-shadow: none;
  39         }
  40         &:checked + .checkbox-substitute {
  41                 border-color: @primary-color;
  42                 background-color: @primary-color;
  43                 &::after {
  44                         .checkbox-check(@component-bg);
  45                 }
  46         }
  47         &.portion + .checkbox-substitute {
  48                 background-color: @primary-color;
  49                 border-color: @primary-color;
  50                 opacity: 0.5;
  51                 &::after {
  52                         .checkbox-check(@component-bg);
  53                 }
  54         }
  55         &:disabled + .checkbox-substitute,
  56         &[disabled] + .checkbox-substitute {
  57                 border-color: @border-color-base;
  58                 background-color: @input-bg-color-disabled;
  59                 cursor: not-allowed;
  60         }
  61         &:disabled + .checkbox-substitute + span,
  62         &[disabled] + .checkbox-substitute + span {
  63                 cursor: not-allowed;
  64         }
  65         &.portion[disabled] + .checkbox-substitute {
  66                 background-color: @border-color-base;
  67                 border-color: @border-color-base;
  68                 &::after {
  69                         .checkbox-check(@fonticon-color);
  70                 }
  71         }
  72         &:checked[disabled] + .checkbox-substitute {
  73                 border-color: @border-color-base;
  74                 background-color: @border-color-base;
  75         }
  76 }
  77
  78 .checkbox-check(@color) {
  79         content: '';
  80         position: absolute;
  81         display: block;
  82         width: 6px;
  83         height: 10px;
  84         border: solid @color;
  85         border-width: 0 2px 2px 0;
  86         transform: rotate(45deg);
  87         .checkbox-check-left(@font-size);
  88         top: 0;
  89 }
  90
  91 .checkbox-check-left(12px) {
  92         left: 3px;
  93 }
  94
  95 .checkbox-check-left(14px) {
  96         left: 4px;
  97 }
  98
  99 .font-padding(12px) {
 100         padding-left: 6px;
 101 }
 102
 103 .font-padding(14px) {
 104         padding-left: 10px;
 105 }