cl01/wp-content/themes/hester/inc/customizer/controls/toggle/toggle.css
2025-02-24 12:39:24 +08:00

104 lines
2.3 KiB
CSS
Executable File

/*****************************************/
/* Customizer control toggle style
/*****************************************/
/**
* Import configuration file with variables.
*/
.hester-toggle-wrapper {
-js-display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.hester-toggle-wrapper .hester-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;
}
.hester-toggle-wrapper .customize-control-title {
margin-bottom: 0;
}
.hester-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;
}
.hester-toggle input[type="checkbox"] {
display: none;
}
.hester-toggle input[type="checkbox"]:checked + label .hester-toggle-switch {
background-color: #0085ba !important;
}
.hester-toggle input[type="checkbox"]:checked + label .hester-toggle-switch:after {
-webkit-transform: translateX(14px);
-ms-transform: translateX(14px);
transform: translateX(14px);
}
.hester-toggle .hester-toggle-switch {
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #96b0c3;
border-radius: 9px;
padding: 2px;
-webkit-transition: all .2s;
transition: all .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;
}
.hester-toggle .hester-toggle-switch:after {
position: relative;
display: block;
content: '';
width: 14px;
height: 14px;
left: 0;
border-radius: 50%;
background: #ffffff;
-webkit-transition: all .15s ease;
transition: all .15s ease;
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.hester-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: #232323;
}
.hester-toggle label:hover .hester-toggle-switch {
background-color: #7698b1;
}