ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / lab2454c / vaultchip.com / platform / core / base / resources / assets / sass / base / global / components

@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;
    }
}

.md-checkbox {
    position: relative;

// Inline checkbox

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

.form-inline &.md-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: #ffffff;
        left: -20px;
        top: -20px;
        height: 60px;
        width: 60px;
        opacity: 0;
        border-radius: 50% !important;
        -moz-border-radius: 50% !important;
        -webkit-border-radius: 50% !important;
    }

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

label > .check {
        top: -4px;
        left: 6px;
        width: 10px;
        height: 20px;
        border: 2px solid $input-md-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-md-checkbox-disabled-opacity);
    }

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

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

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

.has-error .md-checkbox,
.has-error.md-checkbox {
    @include checkbox-variant($state-danger-text, $state-danger-text, $state-danger-text);
}

.has-success .md-checkbox,
.has-success.md-checkbox {
    @include checkbox-variant($state-success-text, $state-success-text, $state-success-text);
}

.has-warning .md-checkbox,
.has-warning.md-checkbox {
    @include checkbox-variant($state-warning-text, $state-warning-text, $state-warning-text);
}

.has-info .md-checkbox,
.has-info.md-checkbox {
    @include checkbox-variant($state-info-text, $state-info-text, $state-info-text);
}

.form-md-checkboxes {
    padding-top: 5px;

> label {
        font-size: $input-md-label-font-size;
        color: $input-md-label-color;
        @include opacity($input-md-label-opacity);
    }

&.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);
    }
}

.md-checkbox-list {
    margin: 5px 0 5px 0;

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

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

&:last-child {
            margin-bottom: 0;
        }
    }
}

.md-checkbox-inline {
    margin: 5px 0 5px 0;

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

.md-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: #eeeeee;
        -webkit-transform: scale(1.25);
    }
}

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

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

[-] _overlay.scss [edit]
[-] _popovers.scss [edit]
[-] _tabs.scss [edit]
[-] _labels.scss [edit]
[-] _utils.scss [edit]
[-] _mixins.scss [edit]
[-] _modal.scss [edit]
[-] _other.scss [edit]
[-] _headings.scss [edit]
[-] _md-base.scss [edit]
[-] _inputs.scss [edit]
[+] ..
[-] _md-radios.scss [edit]
[-] _buttons.scss [edit]
[-] _list-groups.scss [edit]
[-] _table.scss [edit]
[-] _md-checkboxes.scss [edit]
[-] _social-icons.scss [edit]
[-] _icon-buttons.scss [edit]
[-] _md.scss [edit]
[-] _portlets.scss [edit]
[-] _progress-bars.scss [edit]
[-] _close.scss [edit]
[-] _input-icons.scss [edit]
[-] _md-inputs.scss [edit]
[-] _typography.scss [edit]
[-] _dropdowns.scss [edit]
[-] _badges.scss [edit]
[-] _panels.scss [edit]
[-] _notes.scss [edit]
[-] _form-layouts.scss [edit]
[-] _colors.scss [edit]
[-] _font-icons.scss [edit]
[-] _loaders.scss [edit]
[-] _grid.scss [edit]
[-] _card.scss [edit]
[-] _widget.scss [edit]
[-] _sidebar.scss [edit]
[-] _reset-general.scss [edit]