Gitiles
Code Review Sign In
gerrit.openbmc.org / openbmc / phosphor-webui / 2ac4eda38aff10e8647ded62569f102290f3331a / . / app / common / styles / elements / toggle-switch.scss
blob: 814da91afb08e29e7fa55f88e4d227679f03fc91 [file] [log] [blame]
Michael Davis5a752b22017-03-09 09:41:08 -0600[diff] [blame]1@mixin marginTransition {
Dixsie Wolmersc652ed12019-07-19 13:03:28 -0500[diff] [blame]2 transition: margin $duration--moderate-01, background $duration--moderate-01;
Michael Davis5a752b22017-03-09 09:41:08 -0600[diff] [blame]3}
4
5@mixin borderRadius {
6 -webkit-border-radius: 60px;
7 -moz-border-radius: 60px;
Michael Davis5a752b22017-03-09 09:41:08 -0600[diff] [blame]8 border-radius: 60px;
9}
10
Dixsie Wolmersc652ed12019-07-19 13:03:28 -0500[diff] [blame]11.toggle-container {
12 display: flex;
13}
14
Michael Davis5a752b22017-03-09 09:41:08 -0600[diff] [blame]15.toggle-switch {
16 position: absolute;
Dixsie Wolmersc652ed12019-07-19 13:03:28 -0500[diff] [blame]17 top: 0;
Michael Davis9e00ce92017-03-09 18:31:02 -0600[diff] [blame]18 opacity: 0;
Michael Davis5a752b22017-03-09 09:41:08 -0600[diff] [blame]19}
Michael Davisc5626182017-03-10 15:48:05 -0600[diff] [blame]20
Michael Davis5a752b22017-03-09 09:41:08 -0600[diff] [blame]21.toggle-switch + label {
22 display: block;
23 position: relative;
24 cursor: pointer;
25 outline: none;
26 -webkit-user-select: none;
27 -moz-user-select: none;
28 -ms-user-select: none;
29 user-select: none;
30}
31
Michael Davisc5626182017-03-10 15:48:05 -0600[diff] [blame]32.toggle label {
33 text-indent: -9999px;
Dixsie Wolmersc652ed12019-07-19 13:03:28 -0500[diff] [blame]34 margin-right: 0.3rem;
35}
36
37input.toggle-switch__round-flat:focus + label {
38 outline: 1px solid $primary-accent;
39 outline-offset: 3px;
Michael Davisc5626182017-03-10 15:48:05 -0600[diff] [blame]40}
41
Michael Davis5a752b22017-03-09 09:41:08 -0600[diff] [blame]42input.toggle-switch__round-flat + label {
43 padding: 2px;
Dixsie Wolmersc652ed12019-07-19 13:03:28 -0500[diff] [blame]44 width: 43px;
45 height: 22px;
Yoshie Muranaka6f7ec802019-06-24 14:35:41 -0500[diff] [blame]46 background-color: $border-color-02;
Michael Davis5a752b22017-03-09 09:41:08 -0600[diff] [blame]47 @include borderRadius;
48 @include marginTransition;
49}
Michael Davis9e00ce92017-03-09 18:31:02 -0600[diff] [blame]50
Dixsie Wolmersc652ed12019-07-19 13:03:28 -0500[diff] [blame]51input.toggle-switch__round-flat + label:before,
52input.toggle-switch__round-flat + label:after {
Michael Davis5a752b22017-03-09 09:41:08 -0600[diff] [blame]53 display: block;
54 position: absolute;
55 content: "";
56}
57input.toggle-switch__round-flat + label:before {
58 top: 2px;
59 left: 2px;
60 bottom: 2px;
61 right: 2px;
Yoshie Muranaka6f7ec802019-06-24 14:35:41 -0500[diff] [blame]62 background-color: $primary-light;
Michael Davis5a752b22017-03-09 09:41:08 -0600[diff] [blame]63 @include borderRadius;
64 @include marginTransition;
65}
66input.toggle-switch__round-flat + label:after {
67 top: 4px;
68 left: 4px;
69 bottom: 4px;
Dixsie Wolmersc652ed12019-07-19 13:03:28 -0500[diff] [blame]70 width: 15px;
Yoshie Muranaka6f7ec802019-06-24 14:35:41 -0500[diff] [blame]71 background-color: $border-color-02;
Michael Davis5a752b22017-03-09 09:41:08 -0600[diff] [blame]72 -webkit-border-radius: 52px;
73 -moz-border-radius: 52px;
Michael Davis5a752b22017-03-09 09:41:08 -0600[diff] [blame]74 border-radius: 52px;
75 @include marginTransition;
76}
77input.toggle-switch__round-flat:checked + label {
Yoshie Muranaka6f7ec802019-06-24 14:35:41 -0500[diff] [blame]78 background-color: $primary-accent;
Michael Davis5a752b22017-03-09 09:41:08 -0600[diff] [blame]79}
80input.toggle-switch__round-flat:checked + label:before {
Dixsie Wolmersc652ed12019-07-19 13:03:28 -0500[diff] [blame]81 background-color: $primary-accent;
Michael Davis5a752b22017-03-09 09:41:08 -0600[diff] [blame]82}
83input.toggle-switch__round-flat:checked + label:after {
84 margin-left: 20px;
Dixsie Wolmersc652ed12019-07-19 13:03:28 -0500[diff] [blame]85 background-color: $primary-light;
86}