Co-authored-by: sora-ext Co-authored-by: soraefir Reviewed-on: #160
This commit is contained in:
362
src/style/module/input.css
Normal file
362
src/style/module/input.css
Normal file
@@ -0,0 +1,362 @@
|
||||
input,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
input:-webkit-autofill {
|
||||
box-shadow: 0 0 0 1000px #eceff1 inset;
|
||||
}
|
||||
|
||||
.textarea,
|
||||
.input,
|
||||
.select {
|
||||
border: 1px solid var(--white);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: none;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.textarea :focus,
|
||||
.input :focus,
|
||||
.select :focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.textarea.has-error,
|
||||
.input.has-error,
|
||||
.select.has-error {
|
||||
background: #eceff1;
|
||||
border: 1px solid #e74c3c;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.select {
|
||||
background-color: #eceff1;
|
||||
display: inline-block;
|
||||
margin-right: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.select:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.select-fullWidth {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
color: #272727;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
margin: 0;
|
||||
padding: 8px 16px;
|
||||
padding-right: 30px;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select select:active,
|
||||
.select select:focus {
|
||||
background-color: #fbfbfc;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select::after,
|
||||
.select::before {
|
||||
background: #03a9f4;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 2px;
|
||||
margin-top: 2px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 50%;
|
||||
-webkit-transform-origin: 1px;
|
||||
transform-origin: 1px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.select::after {
|
||||
-webkit-transform: rotate(-135deg);
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
|
||||
.select::before {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
background-color: #eceff1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.textarea-fullWidth {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.textarea textarea {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: #272727;
|
||||
display: block;
|
||||
font-family: "Lato", sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
margin: 0;
|
||||
min-height: 120px;
|
||||
padding: 8px 16px;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.textarea textarea::-webkit-input-placeholder {
|
||||
color: #969da6;
|
||||
}
|
||||
|
||||
.textarea textarea::-ms-input-placeholder {
|
||||
color: #969da6;
|
||||
}
|
||||
|
||||
.textarea textarea::placeholder {
|
||||
color: #969da6;
|
||||
}
|
||||
|
||||
.textarea textarea:focus,
|
||||
.textarea textarea:active {
|
||||
background-color: #fbfbfc;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkbox input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox input[type="checkbox"]:checked+label::after {
|
||||
-webkit-animation: checkboxAndRadioAnimation 0.25s;
|
||||
animation: checkboxAndRadioAnimation 0.25s;
|
||||
content: "";
|
||||
-webkit-transform: scale(1) rotate(45deg);
|
||||
transform: scale(1) rotate(45deg);
|
||||
}
|
||||
|
||||
.checkbox input[type="checkbox"]+label {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding-left: 30px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.checkbox input[type="checkbox"]+label::before {
|
||||
background-color: #eceff1;
|
||||
border: 1px solid var(--white);
|
||||
border-radius: var(--border-radius);
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
left: 0;
|
||||
margin-top: -10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.checkbox input[type="checkbox"]+label::after {
|
||||
border-bottom: 3px solid #03a9f4;
|
||||
border-right: 3px solid #03a9f4;
|
||||
display: block;
|
||||
height: 12px;
|
||||
left: 11px;
|
||||
margin-left: -4px;
|
||||
margin-top: -7px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 7px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.radio {
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radio input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.radio input[type="radio"]:checked+label::after {
|
||||
-webkit-animation: checkboxAndRadioAnimation 0.25s;
|
||||
animation: checkboxAndRadioAnimation 0.25s;
|
||||
content: "";
|
||||
-webkit-transform: scale(1) rotate(45deg);
|
||||
transform: scale(1) rotate(45deg);
|
||||
}
|
||||
|
||||
.radio input[type="radio"]+label {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding-left: 30px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.radio input[type="radio"]+label::before {
|
||||
background-color: #eceff1;
|
||||
border: 1px solid var(--white);
|
||||
border-radius: 20px;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
left: 0;
|
||||
margin-top: -10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.radio input[type="radio"]+label::after {
|
||||
background-color: #03a9f4;
|
||||
border-radius: 20px;
|
||||
display: block;
|
||||
height: 10px;
|
||||
left: 11px;
|
||||
margin-left: -6px;
|
||||
margin-top: -6px;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
width: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@-webkit-keyframes checkboxAndRadioAnimation {
|
||||
0% {
|
||||
-webkit-transform: scale(0) rotate(45deg);
|
||||
transform: scale(0) rotate(45deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(1.5) rotate(45deg);
|
||||
transform: scale(1.5) rotate(45deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1) rotate(45deg);
|
||||
transform: scale(1) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkboxAndRadioAnimation {
|
||||
0% {
|
||||
-webkit-transform: scale(0) rotate(45deg);
|
||||
transform: scale(0) rotate(45deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(1.5) rotate(45deg);
|
||||
transform: scale(1.5) rotate(45deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1) rotate(45deg);
|
||||
transform: scale(1) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.input-invis {
|
||||
background-color: transparent !important;
|
||||
margin: auto !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.input {
|
||||
background-color: var(--white);
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input :focus,
|
||||
.input :active {
|
||||
background-color: var(--white);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.input input,
|
||||
.input textarea {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
color: #272727;
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
padding: 8px 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input input::-webkit-input-placeholder {
|
||||
color: #969da6;
|
||||
}
|
||||
|
||||
.input input::-ms-input-placeholder {
|
||||
color: #969da6;
|
||||
}
|
||||
|
||||
.input input::placeholder {
|
||||
color: #969da6;
|
||||
}
|
||||
|
||||
.input input.small {
|
||||
line-height: 1em;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.input-withIcon input {
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
fill: #969da6;
|
||||
height: 16px;
|
||||
margin-top: -8px;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
width: 16px;
|
||||
}
|
||||
Reference in New Issue
Block a user