_switch.scss 3.96 KB
Newer Older
1
2
$transition: 0.1s ease-in 0s;
$height: 28px;
3
4
5
$indicator-horizontal-margin : 9px;
$indicator-size: 10px;
$label-font-size: 14px;
6

7
$indicator-total-width: $indicator-size + ($indicator-horizontal-margin * 2);
8
9
10
11

.switchbox.form-group {
    > label {
        vertical-align: bottom;
12
        line-height: $height;
13
14
15
16
17
18
19
20
21
22
23
24
    }
}


.form-switch {
    display: inline-block;
    .switch {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        position: relative;
25
26
        overflow: hidden;
        width: 60px; // Overridden with inline styles
27
28
29
30
31
        input {
            @extend .sr-only;

            &:focus {
                + .switch-label {
32
33
                   @include tab-focus;
                   outline-color: theme-color("info");
34
                   .switch-inner:before,
35
                   .switch-inner:after {
36
                       background-color: scale-color(theme-color("secondary"), $lightness: -5.5%);
37
38
39
40
41
42
43
                   }
                }
            }
        }
    }

    .switch-label {
44
        border-radius: $border-radius;
45
46
        display: block;
        overflow: hidden;
47
48
49
50
51
52
        cursor: pointer;
        padding: 0;
        min-width: 0;
        margin: 0;

        &:hover {
53
            .switch-inner:before,
54
            .switch-inner:after {
55
                background-color: scale-color(theme-color("secondary"), $lightness: -5.5%);
56
57
58
           }
        }
    }
59

60
61
62
63
64
65
66
    input:disabled + .switch-label {
        opacity: 0.6;
        cursor: default;

        &:hover {
            .switch-inner:before,
            .switch-inner:after {
67
                background-color: theme-color("secondary");
68
69
70
71
           }
        }
    }

72
73
    .switch-inner {
        @include transition(margin $transition);
74
75
        display: block;
        width: 200%;
76
77
        margin-left: -100%;

78
        &:before,
79
        &:after {
80
            @include box-sizing(border-box);
81
            @include box-shadow(none);
82
            content: '';
83
            background-color: $gray-100;
84
            border: 1px solid $btn-secondary-border;
85
86
87
88
89
            display: block;
            float: left;
            width: 50%;
            height: $height;
            padding: 0;
90
91
92
93
94
95
96
        }
    }

    input:checked + .switch-label .switch-inner {
        margin-left: 0;
    }

97

98
99
    .switch-indicator {
        @include transition(all $transition);
100
        border-radius: 50%;
101
        display: block;
102
103
104
105
        width: $indicator-size;
        height: $indicator-size;
        margin: -($indicator-size / 2) $indicator-horizontal-margin 0;
        margin-right: $indicator-horizontal-margin + $indicator-total-width;
106
107
        background: rgba(theme-color("danger"), 0.8);
        border: 1px solid rgba(scale-color(theme-color("danger"), $lightness: -8.5%), 0.8);
108
        position: absolute;
109
110
111
112
        top: 50%;
        left: 0;
        right: 100%;
        transform: none;
113
114
115
    }

    input:checked + .switch-label .switch-indicator {
116
117
118
        left: 100%;
        right: 0;
        transform: translateX(#{-$indicator-total-width});
119
120
        background-color: rgba(theme-color("success"), 0.8);
        border: 1px solid rgba(scale-color(theme-color("success"), $lightness: -25%), 0.8);
121
122

        ~ .off {
123
            transform: translateX(#{-$indicator-total-width}) translateX(100%);
124
125
126
        }

        ~ .on {
127
            transform: none;
128
129
130
131
132
        }
    }

    .state-label {
        @include transition(all $transition);
133
134
135
136
137
        white-space: nowrap;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
138
        height: $height;
139
140
141
142
143
        width: 100%;
        padding: 0 $indicator-horizontal-margin;
        font-size: $label-font-size;
        line-height: $height;
        backface-visibility: hidden;
144
        &.off {
145
146
            padding-left: $indicator-total-width;
            transform: none;
147
148
149
        }

        &.on {
150
151
            padding-right: $indicator-total-width;
            transform: translateX(#{$indicator-total-width}) translateX(-100%);
152
153
        }
    }
154
}