harukin/theme
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

オンオフボタンのマテリアル化

Browse Source
This commit is contained in:
harukin 2018-11-08 23:45:54 +09:00
parent 3d9d2fa992
commit 00a3dc0031
1 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
plusfuture/css/style.css
View File

@ -1600,7 +1600,7 @@ dl.bb-dl > dd > li {
/* Turn checkboxes into switches */ /* Turn checkboxes into switches */
.form-group.checkbox > div { .form-group.checkbox > div {
position: relative; width: 60px; position: relative; width: 40px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
display:inline-block; display:inline-block;
} }
@ -1610,13 +1610,16 @@ dl.bb-dl > dd > li {
} }
.form-group.checkbox > div label { .form-group.checkbox > div label {
/*カスタマイズ*/
display: block; overflow: hidden; cursor: pointer; display: block; overflow: hidden; cursor: pointer;
border: 1px solid #ccc; /*border: 1px solid #ccc;*/
border-radius: 12px; border-radius: 12px;
margin:0px; margin:0px;
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
height: 12px;
width: 35px;
} }
.form-group.checkbox:hover label { .form-group.checkbox:hover label {
@ -1634,14 +1637,16 @@ dl.bb-dl > dd > li {
} }
.onoffswitch-inner:before, .onoffswitch-inner:after { .onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 20px; padding: 0; line-height:20px; /*カスタマイズ*/
display: none; float: left; width: 50%; height: 20px; padding: 0; line-height:20px;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
} }
.onoffswitch-inner:before { .onoffswitch-inner:before {
/*カスタマイズ*/
content: attr(data-on); content: attr(data-on);
padding-right: 21px; padding-right: 21px;
background-color: $item_colour; background-color: #A4AFFF;
color: $font_colour; color: $font_colour;
text-align: right; text-align: right;
} }
@ -1649,17 +1654,19 @@ dl.bb-dl > dd > li {
.onoffswitch-inner:after { .onoffswitch-inner:after {
content: attr(data-off); content: attr(data-off);
padding-left: 21px; padding-left: 21px;
background-color: $item_colour; color: #ccc; background-color: #FFF; color: #ccc;
text-align: left; text-align: left;
} }
.onoffswitch-switch { .onoffswitch-switch {
display: block; width: 15px; margin:4px; /*カスタマイズ*/
display: block; width: 20px; height: 20px;margin:4px;
background: #ccc; background: #ccc;
border-radius: 10px; border-radius: 50%;
position: absolute; top: 0; bottom: 0; right: 36px; position: absolute; top: -6px; bottom: 0; right: 18px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; -webkit-transition: all 0.2s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; -o-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s;
filter: drop-shadow(0px 0px 2px rgba(42, 42, 42, 0.94));
} }
.form-group.checkbox > div > input:checked + label .onoffswitch-inner { .form-group.checkbox > div > input:checked + label .onoffswitch-inner {