0.0.147 add switch

This commit is contained in:
2023-09-21 11:52:46 +03:00
parent c322053b02
commit 0f9ce1abd6
2 changed files with 46 additions and 116 deletions

View File

@@ -2017,102 +2017,22 @@ button#send_feedback_form{
margin-bottom: 20px;
}
.wrapper_switch{
display: flex;
justify-content: center;
padding-bottom: 20px;
}
.search_form_main {
padding-top: 40px;
}
/*end_static_pages*/
/*Switcher*/
.checkbox-green {
display: block;
height: 28px;
line-height: 28px;
vertical-align: middle;
font-size: 14px;
user-select: none;
margin: auto;
text-align: center;
}
.checkbox-green .checkbox-green-switch {
display: inline-block;
height: 28px;
width: 90px;
box-sizing: border-box;
position: relative;
border-radius: 2px;
background: #848484;
transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
}
.checkbox-green .checkbox-green-switch:before {
content: attr(data-label-on);
display: inline-block;
box-sizing: border-box;
width: 45px;
padding: 0 12px;
position: absolute;
top: 0;
left: 45px;
text-transform: uppercase;
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
line-height: 28px;
}
.checkbox-green .checkbox-green-switch:after {
content: attr(data-label-off);
display: inline-block;
box-sizing: border-box;
width: 44px;
border-radius: 1px;
position: absolute;
top: 1px;
left: 1px;
z-index: 5;
text-transform: uppercase;
text-align: center;
background: white;
line-height: 26px;
font-size: 10px;
color: #777;
transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
}
.checkbox-green input[type="checkbox"] {
display: block;
width: 0;
height: 0;
position: absolute;
z-index: -1;
opacity: 0;
}
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch {
background-color: #70c767;
}
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch:before {
content: attr(data-label-off);
left: 0;
}
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch:after {
content: attr(data-label-on);
color: #4fb743;
transform: translate3d(44px, 0, 0);
}
/* Hover */
.checkbox-green input[type="checkbox"]:not(:disabled) + .checkbox-green-switch:hover {
cursor: pointer;
}
.checkbox-green input[type="checkbox"]:not(:disabled) + .checkbox-green-switch:hover:after {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}
/* Disabled */
.checkbox-green input[type=checkbox]:disabled + .checkbox-green-switch {
opacity: 0.6;
filter: grayscale(50%);
}
/*END Switcher*/
/*user_articles*/
/*Confidential_ policy*/
.wrapper_name_art {
font-size: 44px;
font-style: normal;
@@ -2133,7 +2053,7 @@ button#send_feedback_form{
line-height: 22px;
}
/*END_Confidential_ policy*/
/*END_user_articles*/