sookie/blog-web
1
0
Fork 0
Code Issues 12 Pull Requests Projects Releases Wiki Activity

开关按钮

Browse Source
This commit is contained in:
结发受长生 2018-06-07 17:42:59 +08:00
parent 5abf999657
commit e7c6945df4
2 changed files with 231 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
themes/yilia/layout/_partial/tools.ejs
View File

@ -30,13 +30,15 @@
</div>
<div class="widget tagcloud search-tag">
<div>
<label class="search-tag-wording">标签:</label>
<label class="search-switch">
<input type="checkbox" @click="showTags=!showTags" >
<span >标签:</span>
<label class="bui-switch-label bui-switch-animbg">
<input type="checkbox" name="s" @click="showTags=!showTags"/>
<i class="bui-switch"></i>
</label>
<label class="search-tag-wording">分类:</label>
<label class="search-switch">
<input type="checkbox" @click="showCategories=!showCategories" >
<span style="margin-left: 50px;">分类:</span>
<label class="bui-switch-label bui-switch-animbg">
<input type="checkbox" @click="showCategories=!showCategories"/>
<i class="bui-switch"></i>
</label>
</div>
<ul class="article-tag-list" v-show="showTags">

99
themes/yilia/source-src/css/tools.scss
View File

@ -62,10 +62,6 @@
.search-tag.tagcloud {
text-align: center;
position: relative;
.search-tag-wording {
font-size: 12px;
margin: 4px 75px 0 0;
}
.article-tag-list {
@extend %trans;
margin: 15px 10px 0;
@ -141,3 +137,98 @@
text-shadow: 1px 1px rgba(77, 77, 77, 0.45);
}
}
// 按钮开关
@mixin borderRadius($radius:20px) {
border-radius: $radius;
border-top-left-radius: $radius;
border-top-right-radius: $radius;
border-bottom-left-radius: $radius;
border-bottom-right-radius: $radius;
}
$duration: .4s;
$checkedColor: #64bd63;
label.bui-switch-label {
input {
position: absolute;
opacity: 0;
visibility: hidden;
}
input:checked {
border-color: $checkedColor;
box-shadow: $checkedColor 0 0 0 16px inset;
background-color: $checkedColor;
&:before {
left: 27px;
}
}
input:disabled + .bui-switch {
background-color: #e8e8e8;
border: solid 1px #dfdfdf;
&:before {
background-color: #c1c1c1;
}
}
input:disabled:checked + .bui-switch {
background-color: #e8e8e8;
box-shadow: #e8e8e8 0 0 0 16px inset;
border: solid 1px #dfdfdf;
&:before {
background-color: #c1c1c1;
}
}
.bui-switch {
width: 50px;
height: 20px;
position: relative;
top: 5px;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
box-shadow: #dfdfdf 0 0 0 0 inset;
@include borderRadius();
background-clip: content-box;
display: inline-block;
-webkit-appearance: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
&:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
left: 1px;
@include borderRadius();
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
}
input:checked + .bui-switch {
border-color: $checkedColor;
box-shadow: $checkedColor 0 0 0 16px inset;
background-color: $checkedColor;
&:before {
left: 30px;
}
}
&.bui-switch-animbg {
-webkit-transition: background-color ease $duration;
transition: background-color ease $duration;
.bui-switch:before {
-webkit-transition: left 0.3s;
transition: left 0.3s;
}
input:checked + .bui-switch {
box-shadow: #dfdfdf 0 0 0 0 inset;
background-color: $checkedColor;
-webkit-transition: border-color $duration, background-color ease $duration;
transition: border-color $duration, background-color ease $duration;
&:before {
-webkit-transition: left 0.3s;
transition: left 0.3s;
}
}
}
}