deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-10 09:52:37 +02:00
Code Issues Projects Releases Wiki Activity

Switch components - stylelint fix 2 :)

Browse source
This commit is contained in:
Phreshhh 2019-01-31 20:17:45 +01:00
parent df8e6b64d3
commit 8be95f87ba
1 changed files with 33 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/components/_forms.scss
View file

@ -136,22 +136,21 @@ select {
.paper-switch, .paper-switch,
.paper-switch-2 { .paper-switch-2 {
float: left;
display: block; display: block;
position: relative; float: left;
margin: 0 10px 0 0; margin: 0 10px 0 0;
position: relative;
input { input {
opacity: 0;
height: 0; height: 0;
width: 0; width: 0;
opacity: 0;
&:checked + .paper-switch-slider { &:checked + .paper-switch-slider {
background-color: #d0dbc2; background-color: #d0dbc2;
} }
&:checked + .paper-switch-slider::before { &:checked + .paper-switch-slider::before {
-webkit-transform: translateX(26px);
transform: translateX(26px); transform: translateX(26px);
} }
@ -163,46 +162,46 @@ select {
.paper-switch-slider { .paper-switch-slider {
cursor: pointer; cursor: pointer;
position: absolute;
left: 0; left: 0;
top: 0;
bottom: 0; bottom: 0;
top: 0;
right: 0; right: 0;
transition: .4s; position: absolute;
border: 2px solid $primary; border: 2px solid $primary;
border-bottom-left-radius: 15px 255px; border-bottom-left-radius: 15px 255px;
border-bottom-right-radius: 225px 15px; border-bottom-right-radius: 225px 15px;
border-top-left-radius: 255px 15px; border-top-left-radius: 255px 15px;
border-top-right-radius: 15px 225px; border-top-right-radius: 15px 225px;
transition: 0.4s;
&::before { &::before {
content: ''; content: '';
position: absolute;
left: 4px;
background: $secondary; background: $secondary;
left: 4px;
position: absolute;
border-bottom-left-radius: 15px 255px; border-bottom-left-radius: 15px 255px;
border-bottom-right-radius: 225px 15px; border-bottom-right-radius: 225px 15px;
border-top-left-radius: 255px 15px; border-top-left-radius: 255px 15px;
border-top-right-radius: 15px 225px; border-top-right-radius: 15px 225px;
transition: .4s; transition: 0.4s;
} }
} }
.paper-switch-slider.round { .paper-switch-slider.round {
border: 2px solid $primary; border: 2px solid $primary;
border-bottom-left-radius: .7rem 1rem; border-bottom-left-radius: 0.7rem 1rem;
border-bottom-right-radius: 1rem .9rem; border-bottom-right-radius: 1rem 0.9rem;
border-top-left-radius: 1rem 1rem; border-top-left-radius: 1rem 1rem;
border-top-right-radius: 1rem .6rem; border-top-right-radius: 1rem 0.6rem;
&::before { &::before {
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20fill%3D'%230071de'%20d%3D'M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89%20c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837%20c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079%20c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826%20c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371%20c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262%20c0.643,4.698,0.646,10.775-3.811,13.746'%3E%3C/path%3E%3C/svg%3E") left center no-repeat; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20fill%3D'%230071de'%20d%3D'M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89%20c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837%20c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079%20c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826%20c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371%20c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262%20c0.643,4.698,0.646,10.775-3.811,13.746'%3E%3C/path%3E%3C/svg%3E") left center no-repeat;
left: 4px; border-bottom-left-radius: 0.7rem 1rem;
border-bottom-left-radius: .7rem 1rem; border-bottom-right-radius: 1rem 0.9rem;
border-bottom-right-radius: 1rem .9rem;
border-top-left-radius: 1rem 1rem; border-top-left-radius: 1rem 1rem;
border-top-right-radius: 1rem .6rem; border-top-right-radius: 1rem 0.6rem;
left: 4px;
} }
} }
@ -215,9 +214,9 @@ select {
.paper-switch-slider { .paper-switch-slider {
&::before { &::before {
bottom: -6px;
height: 20px; height: 20px;
width: 20px; width: 20px;
bottom: -6px;
} }
} }
@ -259,30 +258,27 @@ select {
.paper-switch-tile { .paper-switch-tile {
float: left; float: left;
perspective: 1000px;
display: block; display: block;
transform-style: preserve-3d; margin: 40px 0 0 40px;
height: 80px; height: 80px;
width: 80px; width: 80px;
margin: 40px 0 0 40px; perspective: 1000px;
position: relative; transform-style: preserve-3d;
cursor: pointer; cursor: pointer;
-webkit-transform: translate(-50%, -50%); position: relative;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
&:hover { &:hover {
.paper-switch-tile-card { .paper-switch-tile-card {
box-shadow: 2px 8px 4px -5px rgba(0,0,0,.2); box-shadow: 2px 8px 4px -5px rgba(0, 0, 0, 0.2);
-webkit-transform: rotateX(30deg); -webkit-transform: rotateX(30deg);
transform: rotateX(30deg); transform: rotateX(30deg);
} }
/* & :checked + .paper-switch-tile-card */ &:checked + .paper-switch-tile-card {
&:checked + .paper-switch-tile-card {
-webkit-transform: rotateX(150deg);
transform: rotateX(150deg);
background-color: transparent; background-color: transparent;
box-shadow: 0px 10px 15px -15px rgba(0,0,0,.9); transform: rotateX(150deg);
box-shadow: 0 10px 15px -15px rgba(0, 0, 0, 0.9);
} }
} }
@ -291,7 +287,6 @@ select {
display: none; display: none;
&:checked + .paper-switch-tile-card { &:checked + .paper-switch-tile-card {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg); transform: rotateX(180deg);
} }
@ -300,25 +295,22 @@ select {
} }
.paper-switch-tile-card { .paper-switch-tile-card {
position: relative; background-color: transparent;
border-color: transparent;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: transparent; position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
transition: all 600ms; transition: all 600ms;
border-color: transparent;
div { div {
position: absolute; backface-visibility: hidden;
line-height: 70px;
text-align: center;
height: 100%; height: 100%;
width: 100%; width: 100%;
text-align: center; position: absolute;
line-height: 70px; box-shadow: 2px 8px 8px -5px rgba(0, 0 ,0, 0.3);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 2px 8px 8px -5px rgba(0,0,0,.3);
} }
.paper-switch-tile-card-back { .paper-switch-tile-card-back {