Fallagassrini Bypass Shell

@mixin checkbox-variant($box, $check, $label) {
    label {
      color: $label;
    }

    label > .box {
      border-color: $box;
    }

    label > .check {
      border-color: $check;
    }    
}

@mixin checkbox-label-variant($color) {         
    > label {
      color: $color;     
    }   
}


.c-checkbox {
    position:relative;

    // Inline checkbox

    &.c-checkbox-inline {
      display: inline-block;    
    }

    .form-inline &.c-checkbox-inline {
      margin-right: 20px;
      top: 3px;
    }

    input[type=checkbox]   { 
        visibility: hidden;
        position: absolute;   
    }

    label {   
        cursor:pointer; 
        padding-left: 30px;  
    }

    label > span { 
        display:block;    
        position:absolute; 
        left:0; 
        -webkit-transition-duration:0.3s; 
        -moz-transition-duration:0.3s; 
        transition-duration:0.3s;
    }

    label > span.inc   { 
      background: #fff;
      left:-10px;  
      top:-10px;
      height:40px;
      width:40px;
      opacity:0; 
      border-radius:50% !important; 
      -moz-border-radius:50% !important; 
      -webkit-border-radius:50% !important;
    }

    label > .box {
      top:1px;
      border:2px solid $input-checkbox-box-color;
      height:20px;   
      width:20px;
      z-index:5;
      -webkit-transition-delay:0.2s; -moz-transition-delay:0.2s; transition-delay:0.2s;

      .ie & {
          top: 2px;
      }
    }

    label > .check {
      top: -2px;
      left: 6px;
      width: 10px;
      height: 20px;
      border:2px solid $input-focus-border;  
      border-top: none;
      border-left: none;
      opacity:0; 
      z-index:5;
      -webkit-transform:rotate(180deg); 
      -moz-transform:rotate(180deg); 
      transform:rotate(180deg);
      -webkit-transition-delay:0.3s; 
      -moz-transition-delay:0.3s; transition-delay:0.3s;
    }

    /* handling click events */

    /* when checkbox is checked */
    label > span.inc {
      -webkit-animation   :growCircle 0.3s ease;
      -moz-animation      :growCircle 0.3s ease;
      animation           :growCircle 0.3s ease;   
    }

    input[type=checkbox]:checked ~ label > .box { 
      opacity:0;
      -webkit-transform   :scale(0) rotate(-180deg);
      -moz-transform        :scale(0) rotate(-180deg);
      transform                 :scale(0) rotate(-180deg);
    }

    input[type=checkbox]:checked ~ label > .check {
      opacity:1; 
      -webkit-transform   :scale(1) rotate(45deg);
      -moz-transform      :scale(1) rotate(45deg);
      transform           :scale(1) rotate(45deg);
    }

    // Disabled state
    input[type=checkbox]:disabled ~ label,
    input[type=checkbox][disabled] ~ label {
        cursor: not-allowed;   
        @include opacity($input-checkbox-disabled-opacity); 
    }
   
    input[type=checkbox]:disabled ~ label > .box,
    input[type=checkbox][disabled] ~ label > .box { 
        cursor: not-allowed;
        @include opacity($input-checkbox-disabled-opacity);
    }

    input[type=checkbox]:disabled:checked ~ label > .check, 
    input[type=checkbox][disabled]:checked ~ label > .check {           
        cursor: not-allowed;
        @include opacity($input-checkbox-disabled-opacity);
    } 

    // Error states
    //checkbox-variant($box, $check, $label)

    &.has-error {
        @include checkbox-variant($brand-danger, $brand-danger, $brand-danger);
    }
  
    &.has-info {
        @include checkbox-variant($brand-info, $brand-info, $brand-info);
    }

    &.has-success {
        @include checkbox-variant($brand-success, $brand-success, $brand-success);
    }

    &.has-warning {
        @include checkbox-variant($brand-warning, $brand-warning, $brand-warning);
    }
}

.c-form-checkboxes {
    > label {        
       
    }  

    &.has-error {
        @include checkbox-label-variant($brand-danger);
    }

    &.has-info {
        @include checkbox-label-variant($brand-info);
    }

    &.has-success {
        @include checkbox-label-variant($brand-success);
    }

    &.has-warning {
        @include checkbox-label-variant($brand-warning);
    }
}

.c-checkbox-list {
  margin: 10px 0;

  .form-horizontal & {
    margin-top: 0px;    
  }   

  .c-checkbox {
    display: block;
    margin-bottom: 10px;
  }
}  

.c-checkbox-inline {
  margin: 10px 0;

  .form-horizontal & {
    margin-top: 8px;    
  }

  .c-checkbox {
    display: inline-block;
    margin-right: 20px;

    &:last-child {
      margin-right: 0;
    }
  }
}
     
/* bubble animation */

@-webkit-keyframes growCircle {
  0%, 100%   { -webkit-transform:scale(0); opacity: 1}
  70%        { background:#eee; -webkit-transform:scale(1.25); }
}
@-moz-keyframes growCircle {
  0%, 100%   { -moz-transform:scale(0); opacity: 1}
  70%        { background:#eee; -moz-transform:scale(1.25); }
}
@keyframes growCircle {
  0%, 100%   { transform:scale(0); opacity: 1}
  70%        { background:#eee; transform:scale(1.25); }
}