mirror of
https://github.com/papercss/papercss
synced 2024-06-03 06:22:35 +02:00
Switch components - stylelint fix 1 :)
This commit is contained in:
parent
cf2deae2ea
commit
ea2635161d
|
@ -140,7 +140,7 @@ description: PaperCSS Forms
|
||||||
</label>
|
</label>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset class="form-group">
|
<fieldset class="form-group">
|
||||||
<p>Type3 - tile style (square & circle)</p>
|
<p>Type3 - Tile style</p>
|
||||||
<label for="paperSwitch1" class="paper-switch-tile">
|
<label for="paperSwitch1" class="paper-switch-tile">
|
||||||
<input id="paperSwitch1" name="paperSwitch1" type="checkbox" />
|
<input id="paperSwitch1" name="paperSwitch1" type="checkbox" />
|
||||||
<div class="paper-switch-tile-card border">
|
<div class="paper-switch-tile-card border">
|
||||||
|
@ -299,7 +299,7 @@ description: PaperCSS Forms
|
||||||
</label>
|
</label>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset class="form-group">
|
<fieldset class="form-group">
|
||||||
<p>Type3 - tile style (square & circle)</p>
|
<p>Type3 - Tile style</p>
|
||||||
<label for="paperSwitch1" class="paper-switch-tile">
|
<label for="paperSwitch1" class="paper-switch-tile">
|
||||||
<input id="paperSwitch1" name="paperSwitch1" type="checkbox" />
|
<input id="paperSwitch1" name="paperSwitch1" type="checkbox" />
|
||||||
<div class="paper-switch-tile-card border">
|
<div class="paper-switch-tile-card border">
|
||||||
|
|
|
@ -122,8 +122,8 @@ select {
|
||||||
|
|
||||||
.paper-switch-label,
|
.paper-switch-label,
|
||||||
.paper-switch-2-label {
|
.paper-switch-2-label {
|
||||||
float:left;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-switch-label {
|
.paper-switch-label {
|
||||||
|
@ -137,22 +137,21 @@ select {
|
||||||
.paper-switch,
|
.paper-switch,
|
||||||
.paper-switch-2 {
|
.paper-switch-2 {
|
||||||
float: left;
|
float: left;
|
||||||
position: relative;
|
|
||||||
display: block;
|
display: block;
|
||||||
|
position: relative;
|
||||||
margin: 0 10px 0 0;
|
margin: 0 10px 0 0;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
width: 0;
|
|
||||||
height: 0;
|
height: 0;
|
||||||
|
width: 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);
|
-webkit-transform: translateX(26px);
|
||||||
-ms-transform: translateX(26px);
|
|
||||||
transform: translateX(26px);
|
transform: translateX(26px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -163,13 +162,12 @@ select {
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-switch-slider {
|
.paper-switch-slider {
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
top: 0;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
-webkit-transition: .4s;
|
right: 0;
|
||||||
transition: .4s;
|
transition: .4s;
|
||||||
border: 2px solid $primary;
|
border: 2px solid $primary;
|
||||||
border-bottom-left-radius: 15px 255px;
|
border-bottom-left-radius: 15px 255px;
|
||||||
|
@ -178,16 +176,15 @@ select {
|
||||||
border-top-right-radius: 15px 225px;
|
border-top-right-radius: 15px 225px;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
position: absolute;
|
|
||||||
content: '';
|
content: '';
|
||||||
|
position: absolute;
|
||||||
left: 4px;
|
left: 4px;
|
||||||
-webkit-transition: .4s;
|
|
||||||
transition: .4s;
|
|
||||||
background: $secondary;
|
background: $secondary;
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -200,8 +197,8 @@ select {
|
||||||
border-top-right-radius: 1rem .6rem;
|
border-top-right-radius: 1rem .6rem;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
left: 4px;
|
|
||||||
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: .7rem 1rem;
|
border-bottom-left-radius: .7rem 1rem;
|
||||||
border-bottom-right-radius: 1rem .9rem;
|
border-bottom-right-radius: 1rem .9rem;
|
||||||
border-top-left-radius: 1rem 1rem;
|
border-top-left-radius: 1rem 1rem;
|
||||||
|
@ -213,11 +210,10 @@ select {
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-switch {
|
.paper-switch {
|
||||||
width: 60px;
|
|
||||||
height: 12px;
|
height: 12px;
|
||||||
|
width: 60px;
|
||||||
|
|
||||||
.paper-switch-slider {
|
.paper-switch-slider {
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
|
@ -227,11 +223,10 @@ select {
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-switch-slider.round {
|
.paper-switch-slider.round {
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
|
bottom: -7px;
|
||||||
height: 23px;
|
height: 23px;
|
||||||
width: 23px;
|
width: 23px;
|
||||||
bottom: -7px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -239,25 +234,23 @@ select {
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-switch-2 {
|
.paper-switch-2 {
|
||||||
width: 50px;
|
|
||||||
height: 22px;
|
height: 22px;
|
||||||
|
width: 50px;
|
||||||
|
|
||||||
.paper-switch-slider {
|
.paper-switch-slider {
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
|
bottom: 2px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
width: 14px;
|
width: 14px;
|
||||||
bottom: 2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-switch-slider.round {
|
.paper-switch-slider.round {
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
|
bottom: 2px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
width: 14px;
|
width: 14px;
|
||||||
bottom: 2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -266,31 +259,29 @@ select {
|
||||||
|
|
||||||
.paper-switch-tile {
|
.paper-switch-tile {
|
||||||
float: left;
|
float: left;
|
||||||
-webkit-perspective: 1000px;
|
|
||||||
perspective: 1000px;
|
perspective: 1000px;
|
||||||
-webkit-transform-style: preserve-3d;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
display: block;
|
display: block;
|
||||||
width: 80px;
|
transform-style: preserve-3d;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
position: relative;
|
width: 80px;
|
||||||
margin: 40px 0 0 40px;
|
margin: 40px 0 0 40px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
-webkit-transform: translate(-50%, -50%);
|
-webkit-transform: translate(-50%, -50%);
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
|
|
||||||
|
&:hover {
|
||||||
.paper-switch-tile-card {
|
.paper-switch-tile-card {
|
||||||
|
box-shadow: 2px 8px 4px -5px rgba(0,0,0,.2);
|
||||||
-webkit-transform: rotateX(30deg);
|
-webkit-transform: rotateX(30deg);
|
||||||
transform: rotateX(30deg);
|
transform: rotateX(30deg);
|
||||||
box-shadow: 2px 8px 4px -5px rgba(0,0,0,.2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& :checked + .paper-switch-tile-card {
|
/* & :checked + .paper-switch-tile-card */
|
||||||
transform: rotateX(150deg);
|
&:checked + .paper-switch-tile-card {
|
||||||
-webkit-transform: rotateX(150deg);
|
-webkit-transform: rotateX(150deg);
|
||||||
background-color:transparent;
|
transform: rotateX(150deg);
|
||||||
|
background-color: transparent;
|
||||||
box-shadow: 0px 10px 15px -15px rgba(0,0,0,.9);
|
box-shadow: 0px 10px 15px -15px rgba(0,0,0,.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -298,10 +289,10 @@ select {
|
||||||
|
|
||||||
input {
|
input {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
&:checked + .paper-switch-tile-card{
|
&:checked + .paper-switch-tile-card {
|
||||||
transform: rotateX(180deg);
|
|
||||||
-webkit-transform: rotateX(180deg);
|
-webkit-transform: rotateX(180deg);
|
||||||
|
transform: rotateX(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -312,12 +303,12 @@ select {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
background-color: transparent;
|
||||||
-webkit-transform-style: preserve-3d;
|
-webkit-transform-style: preserve-3d;
|
||||||
transform-style: preserve-3d;
|
transform-style: preserve-3d;
|
||||||
-webkit-transition: all 600ms;
|
|
||||||
transition: all 600ms;
|
transition: all 600ms;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
div {
|
div {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
Loading…
Reference in a new issue