mirror of
https://github.com/papercss/papercss
synced 2024-05-17 21:26:42 +02:00
444 lines
14 KiB
SCSS
444 lines
14 KiB
SCSS
input,
|
|
select,
|
|
textarea {
|
|
@include color('color', 'primary');
|
|
@include color('border-color', 'primary');
|
|
background: transparent;
|
|
border-bottom-left-radius: 15px 255px;
|
|
border-bottom-right-radius: 225px 15px;
|
|
border-style: solid;
|
|
border-top-left-radius: 255px 15px;
|
|
border-top-right-radius: 15px 225px;
|
|
border-width: 2px;
|
|
display: block;
|
|
font-size: 1rem;
|
|
outline: none;
|
|
padding: 0.5rem;
|
|
|
|
&:focus {
|
|
@include color('border-color', 'secondary');
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
}
|
|
|
|
&.disabled,
|
|
&[disabled] {
|
|
@extend .disabled;
|
|
}
|
|
}
|
|
|
|
select {
|
|
height: 2.35rem;
|
|
}
|
|
|
|
.disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
|
|
> label,
|
|
legend {
|
|
display: inline-block;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.input-block {
|
|
width: 100%;
|
|
}
|
|
|
|
textarea {
|
|
max-height: 90vh;
|
|
max-width: 100%;
|
|
}
|
|
|
|
textarea.no-resize {
|
|
resize: none;
|
|
}
|
|
|
|
// TODO: make these classes implicit. We can find out what class to apply based on its type
|
|
.paper-radio,
|
|
.paper-check {
|
|
cursor: pointer;
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
|
|
/* the basic, unchecked style */
|
|
input {
|
|
border: 0;
|
|
height: 1px;
|
|
margin: -1px;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
width: 1px;
|
|
|
|
& + span {
|
|
display: block;
|
|
|
|
&::before {
|
|
@include color('border-color', 'primary');
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
content: '';
|
|
display: inline-block;
|
|
height: 1rem;
|
|
margin-right: 0.75em;
|
|
position: relative;
|
|
vertical-align: -0.25em;
|
|
width: 1rem;
|
|
}
|
|
}
|
|
|
|
/* radio styles */
|
|
&[type='radio'] {
|
|
& + span::before {
|
|
border-bottom-left-radius: 0.7rem 1rem;
|
|
border-bottom-right-radius: 1rem 0.9rem;
|
|
border-top-left-radius: 1rem 1rem;
|
|
border-top-right-radius: 1rem 0.6rem;
|
|
}
|
|
|
|
&:checked + span::before {
|
|
$radio-fill: "data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20fill%3D'#{$secondary}'%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";
|
|
background: url('#{str-replace($radio-fill, "#", "%23")}') left center no-repeat;
|
|
}
|
|
}
|
|
|
|
/* checkbox styles */
|
|
&[type='checkbox'] {
|
|
& + span::before {
|
|
border-bottom-left-radius: 15px 255px;
|
|
border-bottom-right-radius: 225px 15px;
|
|
border-top-left-radius: 255px 15px;
|
|
border-top-right-radius: 15px 225px;
|
|
}
|
|
|
|
/* checked */
|
|
&:checked + span::before {
|
|
$check-fill: "data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20stroke%3D'#{$secondary}'%20fill-opacity%3D'0'%20stroke-width%3D'16'%20d%3D'm13,62c0.61067,1.6%201.3045,2.3045%201.75717,2.75716c0.72683,0.72684%201.24283,1.24284%202.07617,2.07617c0.54133,0.54133%201.04116,1.06035%201.82833,1.82383c0.5781,0.5607%201.00502,0.96983%202.02633,1.74417c0.55877,0.42365%201.191,0.84034%201.884,1.284c1.16491,0.74577%201.59777,1.00147%202.5,1.55067c0.4692,0.28561%201.43689,0.86868%201.93067,1.16534c0.99711,0.59904%201.99667,1.19755%202.49283,1.49866c0.98501,0.59779%201.47073,0.89648%201.94733,1.2c1.3971,0.88972%201.83738,1.19736%202.7,1.7955c0.42201,0.29262%201.24022,0.87785%202.05583,1.41917c0.79531,0.52785%201.59376,1.0075%202.38,1.43867c0.74477,0.40842%201.45167,0.75802%202.37817,1.22517c0.76133,0.38387%201.54947,0.82848%202.40717,1.41084c0.7312,0.49647%201.49563,1.08231%202.27884,1.258c0.35564,0.07978%200.14721,-0.95518%200.35733,-1.86867c0.18092,-0.78651%200.98183,-1.2141%200.99983,-2.07867c0.02073,-0.99529%200.07916,-1.79945%200.42533,-2.56133c0.43607,-0.95973%200.53956,-1.66774%200.79617,-2.68183c0.18888,-0.74645%200.39764,-1.31168%200.7785,-2.6235c0.20865,-0.71867%200.41483,-1.48614%200.708,-2.28c0.15452,-0.41843%200.77356,-1.73138%201.348,-2.64133c0.30581,-0.48443%200.65045,-0.97043%201.0065,-1.4745c0.74776,-1.05863%201.1531,-1.60163%201.9375,-2.77084c0.40621,-0.60548%200.80272,-1.23513%201.2045,-1.8765c0.40757,-0.65062%200.81464,-1.31206%201.2315,-1.9755c0.41946,-0.66757%200.83374,-1.34258%201.73067,-2.648c0.44696,-0.65053%200.91436,-1.28356%201.386,-1.9095c0.46972,-0.6234%200.94725,-1.2364%201.422,-1.8465c0.94116,-1.20947%201.86168,-2.40844%202.30367,-3.0105c0.438,-0.59664%200.86246,-1.19396%201.27501,-1.7895c0.40743,-0.58816%200.80352,-1.17234%201.185,-1.7535c1.10526,-1.68381%201.44079,-2.23511%201.77633,-2.7705c0.32878,-0.52461%200.96306,-1.5459%201.27467,-2.04c0.60654,-0.96177%201.20782,-1.88193%201.51051,-2.325c0.59013,-0.86381%201.17888,-1.68032%201.46416,-2.075c0.5498,-0.76063%201.31747,-1.8231%201.77883,-2.4895c0.43918,-0.63437%200.85266,-1.25267%201.45717,-2.15717c0.59549,-0.891%200.96531,-1.46814%201.51466,-2.22933c0.58413,-0.80936%201.12566,-1.40253%201.83801,-2.12333c0.61304,-0.62031%200.45171,-1.48306%200.7045,-2.34733c0.25668,-0.87762%200.75447,-1.62502%201,-2.40983c0.25128,-0.8032%200.7633,-1.39453%201.33217,-2.25417c0.54528,-0.82398%200.73415,-1.6714%201.31516,-2.336c0.55639,-0.63644%201.38658,-1.22588%201.8595,-1.9c0.5082,-0.72441%200.78867,-1.4%201.60266,-1.56667l0.71184,-0.4905'%3E%3C/path%3E%3C/svg%3E";
|
|
background: url('#{str-replace($check-fill, "#", "%23")}') left center no-repeat;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.paper-switch-label,
|
|
.paper-switch-2-label {
|
|
cursor: pointer;
|
|
float: left;
|
|
}
|
|
|
|
.paper-switch-label {
|
|
margin: -6px 10px 0 0;
|
|
}
|
|
|
|
.paper-switch-2-label {
|
|
margin: 0 10px 0 0;
|
|
}
|
|
|
|
.paper-switch,
|
|
.paper-switch-2 {
|
|
display: block;
|
|
float: left;
|
|
margin: 0 10px 0 0;
|
|
position: relative;
|
|
|
|
input {
|
|
height: 0;
|
|
opacity: 0;
|
|
width: 0;
|
|
|
|
&:checked + .paper-switch-slider {
|
|
@include color('background-color', 'success-light');
|
|
}
|
|
|
|
&:checked + .paper-switch-slider::before {
|
|
transform: translateX(26px);
|
|
}
|
|
|
|
&:focus + .paper-switch-slider {
|
|
box-shadow: 0 0 3px $secondary;
|
|
}
|
|
|
|
}
|
|
|
|
.paper-switch-slider {
|
|
@include color('border-color', 'primary');
|
|
border-bottom-left-radius: 15px 255px;
|
|
border-bottom-right-radius: 225px 15px;
|
|
border-style: solid;
|
|
border-top-left-radius: 255px 15px;
|
|
border-top-right-radius: 15px 225px;
|
|
border-width: 2px;
|
|
bottom: 0;
|
|
cursor: pointer;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
transition: 0.4s;
|
|
|
|
&::before {
|
|
@include color('background', 'secondary');
|
|
border-bottom-left-radius: 15px 255px;
|
|
border-bottom-right-radius: 225px 15px;
|
|
border-top-left-radius: 255px 15px;
|
|
border-top-right-radius: 15px 225px;
|
|
content: '';
|
|
left: 4px;
|
|
position: absolute;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
}
|
|
|
|
.paper-switch-slider.round {
|
|
@include color('border-color', 'primary');
|
|
border-bottom-left-radius: 0.7rem 1rem;
|
|
border-bottom-right-radius: 1rem 0.9rem;
|
|
border-style: solid;
|
|
border-top-left-radius: 1rem 1rem;
|
|
border-top-right-radius: 1rem 0.6rem;
|
|
border-width: 2px;
|
|
|
|
&::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;
|
|
border-bottom-left-radius: 0.7rem 1rem;
|
|
border-bottom-right-radius: 1rem 0.9rem;
|
|
border-top-left-radius: 1rem 1rem;
|
|
border-top-right-radius: 1rem 0.6rem;
|
|
left: 4px;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.paper-switch {
|
|
height: 12px;
|
|
width: 60px;
|
|
|
|
.paper-switch-slider {
|
|
&::before {
|
|
bottom: -6px;
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
|
|
}
|
|
|
|
.paper-switch-slider.round {
|
|
&::before {
|
|
bottom: -7px;
|
|
height: 23px;
|
|
width: 23px;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.paper-switch-2 {
|
|
height: 22px;
|
|
width: 50px;
|
|
|
|
.paper-switch-slider {
|
|
&::before {
|
|
bottom: 2px;
|
|
height: 14px;
|
|
width: 14px;
|
|
}
|
|
|
|
}
|
|
|
|
.paper-switch-slider.round {
|
|
&::before {
|
|
bottom: 2px;
|
|
height: 14px;
|
|
width: 14px;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.paper-switch-tile {
|
|
cursor: pointer;
|
|
display: block;
|
|
float: left;
|
|
height: 80px;
|
|
margin: 40px 0 0 40px;
|
|
perspective: 1000px;
|
|
position: relative;
|
|
transform: translate(-50%, -50%);
|
|
transform-style: preserve-3d;
|
|
width: 80px;
|
|
|
|
&:hover {
|
|
.paper-switch-tile-card {
|
|
box-shadow: 2px 8px 4px -5px rgba(0, 0, 0, 0.2);
|
|
transform: rotateX(30deg);
|
|
}
|
|
|
|
&:checked + .paper-switch-tile-card {
|
|
background-color: transparent;
|
|
box-shadow: 0 10px 15px -15px rgba(0, 0, 0, 0.9);
|
|
transform: rotateX(150deg);
|
|
}
|
|
|
|
}
|
|
|
|
input {
|
|
display: none;
|
|
|
|
&:checked + .paper-switch-tile-card {
|
|
transform: rotateX(180deg);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.paper-switch-tile-card {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
height: 100%;
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
transition: all 600ms;
|
|
width: 100%;
|
|
|
|
div {
|
|
backface-visibility: hidden;
|
|
box-shadow: 2px 8px 8px -5px rgba(0, 0, 0, 0.3);
|
|
height: 100%;
|
|
line-height: 70px;
|
|
position: absolute;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.paper-switch-tile-card-back {
|
|
transform: rotateX(180deg);
|
|
}
|
|
|
|
}
|
|
|
|
input[type='range'] {
|
|
appearance: none;
|
|
border-width: 0;
|
|
padding: 0;
|
|
|
|
/* For Chromium */
|
|
&::-webkit-slider-runnable-track {
|
|
@include color('background', 'secondary');
|
|
@include color('border-color', 'primary');
|
|
|
|
border-radius: 18px;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
|
cursor: pointer;
|
|
height: 8px;
|
|
margin: 10px 0;
|
|
width: 100%;
|
|
}
|
|
|
|
&::-webkit-slider-thumb {
|
|
@include color('background', 'white');
|
|
@include color('border-color', 'primary');
|
|
|
|
appearance: none;
|
|
border-bottom-left-radius: 0.7rem 1rem;
|
|
border-bottom-right-radius: 1rem 0.9rem;
|
|
border-style: solid;
|
|
border-top-left-radius: 1rem 1rem;
|
|
border-top-right-radius: 1rem 0.6rem;
|
|
border-width: 1px;
|
|
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
|
cursor: pointer;
|
|
height: 36px;
|
|
margin-top: -14px;
|
|
width: 16px;
|
|
}
|
|
|
|
/* For Mozilla Firefox */
|
|
&::-moz-range-track {
|
|
@include color('background', 'secondary');
|
|
@include color('border-color', 'primary');
|
|
|
|
border-radius: 18px;
|
|
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
|
cursor: pointer;
|
|
height: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
&::-moz-range-thumb {
|
|
@include color('background', 'white');
|
|
@include color('border-color', 'primary');
|
|
|
|
border-bottom-left-radius: 0.7rem 1rem;
|
|
border-bottom-right-radius: 1rem 0.9rem;
|
|
border-style: solid;
|
|
border-top-left-radius: 1rem 1rem;
|
|
border-top-right-radius: 1rem 0.6rem;
|
|
border-width: 1px;
|
|
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
|
cursor: pointer;
|
|
height: 36px;
|
|
width: 16px;
|
|
}
|
|
|
|
/* For IE */
|
|
&::-ms-track {
|
|
background: transparent;
|
|
border-color: transparent;
|
|
border-width: 16px 0;
|
|
color: transparent;
|
|
cursor: pointer;
|
|
height: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
&::-ms-fill-lower,
|
|
&::-ms-fill-upper {
|
|
@include color('background', 'secondary');
|
|
@include color('border-color', 'primary');
|
|
|
|
border-radius: 18px;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
|
}
|
|
|
|
&::-ms-thumb {
|
|
@include color('background', 'white');
|
|
@include color('border-color', 'primary');
|
|
|
|
border: 1px solid $primary;
|
|
border-bottom-left-radius: 0.7rem 1rem;
|
|
border-bottom-right-radius: 1rem 0.9rem;
|
|
border-style: solid;
|
|
border-top-left-radius: 1rem 1rem;
|
|
border-top-right-radius: 1rem 0.6rem;
|
|
border-width: 1px;
|
|
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
|
cursor: pointer;
|
|
height: 36px;
|
|
width: 16px;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
fieldset.form-group {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|