/*****************************************/
/* Customizer control toggle style
/*****************************************/
/**
* Import configuration file with variables.
*/
.sinatra-toggle-wrapper {
-js-display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.sinatra-toggle-wrapper .sinatra-toggle {
margin-left: auto;
padding-left: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.sinatra-toggle-wrapper .customize-control-title {
margin-bottom: 0;
}
.sinatra-toggle {
-js-display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: auto;
}
.sinatra-toggle input[type=checkbox] {
display: none;
}
.sinatra-toggle input[type=checkbox]:checked + label .sinatra-toggle-switch {
background-color: #0085ba !important;
}
.sinatra-toggle input[type=checkbox]:checked + label .sinatra-toggle-switch:after {
-webkit-transform: translateX(14px);
-ms-transform: translateX(14px);
transform: translateX(14px);
}
.sinatra-toggle .sinatra-toggle-switch {
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #96b0c3;
border-radius: 9px;
padding: 2px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
outline: 0;
display: block;
width: 32px;
height: 18px;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 0;
}
.sinatra-toggle .sinatra-toggle-switch:after {
position: relative;
display: block;
content: "";
width: 14px;
height: 14px;
left: 0;
border-radius: 50%;
background: #ffffff;
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.sinatra-toggle label {
-js-display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #23282d;
}
.sinatra-toggle label:hover .sinatra-toggle-switch {
background-color: #7698b1;
} |