_switch.scss — SEO SIMPLE PACK 2.2.3

seo-simple-pack / src / scss / inc / _switch.scss

seo-simple-pack / src / scss / inc Last commit date

_switch.scss

61 lines

1
2	/* ------------------------------
3	* Switch button
4	* ------------------------------ */
5
6	/* The switch - the box around the slider */
7	.ssp_switch_box {
8	position: relative;
9	display: inline-block;
10	width: 64px;
11	height: 28px;
12	margin: 0 8px;
13	}
14
15	/* Hide default HTML checkbox */
16	.ssp_switch_box input {
17	display: none;
18	}
19
20	/* The slider */
21	.ssp_switch_box__slider {
22	position: absolute;
23	top: 0;
24	right: 0;
25	bottom: 0;
26	left: 0;
27	background-color: #ccc;
28	cursor: pointer;
29	-webkit-transition: 0.4s;
30	transition: 0.4s;
31	}
32
33	.ssp_switch_box__slider::before {
34	position: absolute;
35	right: 4px;
36	bottom: 4px;
37	width: 20px;
38	height: 20px;
39	background-color: white;
40	-webkit-transition: 0.4s;
41	transition: 0.4s;
42	content: "";
43	}
44
45	input:checked + .ssp_switch_box__slider {
46	background-color: #2196f3;
47	}
48
49	input:checked + .ssp_switch_box__slider::before {
50	right: 40px;
51	}
52
53	/* Rounded sliders */
54	.ssp_switch_box__slider.-round {
55	border-radius: 34px;
56	}
57
58	.ssp_switch_box__slider.-round::before {
59	border-radius: 50%;
60	}
61