catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less

   1  @import '../../../../assets/styles/tlv-sprite';
   2 @import '../../../../assets/styles/sprite';
   3
   4
   5 .checkbox-container {
   6     display:inline-block;
   7     position:relative;
   8     text-align: left;
   9     height: 20px;
  10
  11
  12     .checkbox-icon {
  13         display: inline-block;
  14     }
  15
  16     .checkbox-label {
  17         font-weight: inherit;
  18         font-size: inherit;
  19     }
  20
  21     .checkbox-label-content {
  22         margin-left:2px;
  23     }
  24
  25     .checkbox-icon::before {
  26         .tlv-sprite;
  27         background-position: -10px -60px;
  28         width: 14px;
  29         height: 14px;
  30         content: '';
  31         display: inline-block;
  32         margin-right: 0px;
  33         margin-top: -2px;
  34         vertical-align: middle;
  35     }
  36
  37     input[type=checkbox].checkbox-hidden {
  38         width:0;
  39         height:0;
  40         display:none;
  41         &:checked ~ .checkbox-icon::before{
  42             .sprite-new;
  43             .filled-checkbox-icon
  44         }
  45         &[disabled] ~ .checkbox-icon::before {
  46             /* TODO: add disabled styles here */
  47             background-image: none;
  48             background-color: #EFEFEF;
  49             border-radius: 2px;
  50             border: solid #CCC 1px;
  51         }
  52     }
  53
  54     .checkbox-animation {
  55         background-color: #009fdb;
  56         position: absolute;
  57         left: 2px;
  58         top: 4px;
  59         width:10px;
  60         height:10px;
  61         border-radius: 50%;
  62         z-index: 1;
  63         pointer-events: none;
  64         opacity:0;
  65     }
  66
  67 }