deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-17 13:15:28 +02:00
Code Issues Projects Releases Wiki Activity

Switch components - stylelint fix 3 :)

Browse source
This commit is contained in:
Phreshhh 2019-01-31 20:32:01 +01:00 committed by Rhyne Vlaservich
parent 06ce202265
commit 262db03fe0
1 changed files with 15 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/components/_forms.scss
View file

@ -143,8 +143,8 @@ select {
input { input {
height: 0; height: 0;
width: 0;
opacity: 0; opacity: 0;
width: 0;
&:checked + .paper-switch-slider { &:checked + .paper-switch-slider {
background-color: #d0dbc2; background-color: #d0dbc2;
@ -162,21 +162,21 @@ select {
.paper-switch-slider { .paper-switch-slider {
cursor: pointer; cursor: pointer;
left: 0;
bottom: 0; bottom: 0;
top: 0; top: 0;
right: 0; left: 0;
position: absolute;
border: 2px solid $primary; border: 2px solid $primary;
border-top-left-radius: 255px 15px;
position: absolute;
right: 0;
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-right-radius: 15px 225px; border-top-right-radius: 15px 225px;
transition: 0.4s; transition: 0.4s;
&::before { &::before {
content: '';
background: $secondary; background: $secondary;
content: '';
left: 4px; left: 4px;
position: absolute; position: absolute;
border-bottom-left-radius: 15px 255px; border-bottom-left-radius: 15px 255px;
@ -257,28 +257,27 @@ select {
} }
.paper-switch-tile { .paper-switch-tile {
float: left;
display: block; display: block;
margin: 40px 0 0 40px; float: left;
height: 80px; height: 80px;
width: 80px; margin: 40px 0 0 40px;
perspective: 1000px; perspective: 1000px;
transform-style: preserve-3d; width: 80px;
cursor: pointer; cursor: pointer;
transform-style: preserve-3d;
position: relative; 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, 0.2); box-shadow: 2px 8px 4px -5px rgba(0, 0, 0, 0.2);
-webkit-transform: rotateX(30deg);
transform: rotateX(30deg); transform: rotateX(30deg);
} }
&:checked + .paper-switch-tile-card { &:checked + .paper-switch-tile-card {
background-color: transparent; background-color: transparent;
transform: rotateX(150deg);
box-shadow: 0 10px 15px -15px rgba(0, 0, 0, 0.9); box-shadow: 0 10px 15px -15px rgba(0, 0, 0, 0.9);
transform: rotateX(150deg);
} }
} }
@ -298,23 +297,22 @@ select {
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
height: 100%; height: 100%;
width: 100%;
position: relative; position: relative;
width: 100%;
transform-style: preserve-3d; transform-style: preserve-3d;
transition: all 600ms; transition: all 600ms;
div { div {
backface-visibility: hidden; backface-visibility: hidden;
line-height: 70px; line-height: 70px;
text-align: center;
height: 100%; height: 100%;
width: 100%; text-align: center;
box-shadow: 2px 8px 8px -5px rgba(0, 0, 0, 0.3);
position: absolute; position: absolute;
box-shadow: 2px 8px 8px -5px rgba(0, 0 ,0, 0.3); width: 100%;
} }
.paper-switch-tile-card-back { .paper-switch-tile-card-back {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg); transform: rotateX(180deg);
} }