lostecho/mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

demo前端模版添加

Browse Source
This commit is contained in:
zhh
2018-04-17 09:03:32 +08:00
parent 109a95d3de
commit 5dca3a75df
211 changed files with 47407 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
mall-demo/src/main/resources/static/plugins/checkbix/css/checkbix.css Normal file
View File

@@ -0,0 +1,233 @@
input[type='checkbox'].checkbix {
position: absolute;
opacity: 0;
z-index: -1;
}
input[type='checkbox'].checkbix + label {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: inherit;
-webkit-transition: all 250ms cubic-bezier(.4,.0,.23,1);
transition: all 250ms cubic-bezier(.4,.0,.23,1);
margin-bottom: .15rem;
}
input[type='checkbox'].checkbix + label > span {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-right: .5em;
width: 16px;
height: 16px;
background: transparent;
border: .1rem solid #333;
border-radius: 1px;
cursor: pointer;
-webkit-transition: all 250ms cubic-bezier(.4,.0,.23,1);
transition: all 250ms cubic-bezier(.4,.0,.23,1);
position: relative;
}
input[type='checkbox'].checkbix:focus + label > span {
outline: 0;
border-color: rgb(0,20,20);
box-shadow: 0 0 0 1px rgba(0,20,20,.5);
}
input[type='checkbox'].checkbix:checked + label > span {
background: #5ECD62;
border: .1rem solid transparent;
-webkit-animation: reveal 200ms cubic-bezier(.4,.0,.5,1);
animation: reveal 200ms cubic-bezier(.4,.0,.5,1);
}
input[type='checkbox'].checkbix:checked + label > span:before {
content: "";
position: absolute;
top: 0;
left: 22%;
margin-left: auto;
margin-right: auto;
border-right: 2px solid transparent;
border-bottom: 2px solid transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-animation: checkboxcheck 125ms 50ms cubic-bezier(.1,.0,.1,1) forwards;
animation: checkboxcheck 125ms 50ms cubic-bezier(.1,.0,.1,1) forwards;
}
@-webkit-keyframes reveal{
0%{
-webkit-transform: scale(1);
transform: scale(1);
}
33%{
-webkit-transform: scale(.5);
transform: scale(.5);
}
100%{
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes reveal{
0%{
-webkit-transform: scale(1);
transform: scale(1);
}
33%{
-webkit-transform: scale(.5);
transform: scale(.5);
}
100%{
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes checkboxcheck {
0%{
width: 0;
height: 0;
border-color: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
33%{
width: .2em;
height: .3em;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
100%{
width: .2em;
height: .4em;
border-color: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
@keyframes checkboxcheck {
0%{
width: 0;
height: 0;
border-color: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
33%{
width: .2em;
height: .3em;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
100%{
width: .2em;
height: .4em;
border-color: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
/* Size */
input[type='checkbox'].checkbix[data-size='large'] + label > span {
width: 24px;
height: 24px;
}
input[type='checkbox'].checkbix[data-size='large'] + label > span:before {
-webkit-animation: checkboxchecklarge 125ms 50ms cubic-bezier(.1,.0,.1,1) forwards;
animation: checkboxchecklarge 125ms 50ms cubic-bezier(.1,.0,.1,1) forwards;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
}
@-webkit-keyframes checkboxchecklarge {
0%{
width: 0;
height: 0;
border-color: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
33%{
width: .3em;
height: .6em;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
100%{
width: .3em;
height: .6em;
border-color: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
@keyframes checkboxchecklarge {
0%{
width: 0;
height: 0;
border-color: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
33%{
width: .3em;
height: .6em;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
100%{
width: .3em;
height: .6em;
border-color: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
/* Shape */
input[type='checkbox'].checkbix[data-shape='circled'] + label > span {
border-radius: 100%;
}
/* Colors */
input[type='checkbox'].checkbix[data-color='black']:checked + label > span {
background: #111;
}
input[type='checkbox'].checkbix[data-color='blue']:checked + label > span {
background: #0074D9;
}
input[type='checkbox'].checkbix[data-color='red']:checked + label > span {
background: #FF4136;
}
input[type='checkbox'].checkbix[data-color='gray']:checked + label > span {
background: #AAAAAA;
}
input[type='checkbox'].checkbix[data-color='orange']:checked + label > span {
background: #FF851B;
}