Skip to content

Commit

Permalink
input.scss
Browse files Browse the repository at this point in the history
  • Loading branch information
@furknyavuz
furknyavuz committed Sep 10, 2021
1 parent 7d40230 commit 5ffc7c8
Showing 1 changed file with 186 additions and 122 deletions.
308 changes: 186 additions & 122 deletions src/styles/input/input.scss
View file
Original file line number Diff line number Diff line change
@@ -1,187 +1,251 @@
@use '../util/util';

.section, .section-submit {
display: flex;
flex-direction: column;
margin-top: 1.5em;
@include util.flex-layout-column;
margin: {
top: 1.5em;
}
}

.section-submit {
align-items: center;
}

.section-submit hr {
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
border-bottom: 0;
}
& hr {
margin: {
top: 10px;
bottom: 10px;
}

.section-submit p {
margin-top: 7px;
}
border: {
bottom: 0;
}

width: 100%;
}

& p {
margin: {
top: 7px;
}
}

.section-header > * {
margin: 0.4em;
& > * {
margin: 0.4em;
}
}

.section-output {
margin: 0.7rem 0.4em;
}

textarea, textarea::-webkit-input-placeholder, input, input::-webkit-input-placeholder {
font-size: 16px;
font-weight: 300;
@mixin default-input-font-config {
font: {
size: 16px;
weight: 300;
}
}

textarea, input {
@include default-input-font-config;

&::-webkit-input-placeholder {
@include default-input-font-config;
}
}

textarea, input {
color: var(--color);
background: transparent;
border: 0;
width: 100%;
border-bottom: 1px solid var(--contrast);
border-radius: 0;

border: {
radius: 0;

bottom: {
width: 1px;
style: solid;
color: var(--contrast);
};
}

box-sizing: border-box;

transition: {
property: border-bottom-color;
duration: 400ms;
timing-function: ease-out;
};

outline: none;
padding: 8px;
box-sizing: border-box;
transition: border-bottom-color 400ms ease-out;
}

.input-with-icon textarea {
height: 57px;
}
&::-webkit-input-placeholder {
color: var(--contrast);
}

.input-with-icon.with-svg input {
height: 38px;
}
&:focus {
border: {
color: var(--color);

textarea::-webkit-input-placeholder, input::-webkit-input-placeholder {
color: var(--contrast);
bottom: {
width: 2px;
};
}
}
}

textarea:focus, input:focus {
border-color: var(--color);
border-bottom-width: 2px;
.input-with-icon {

& textarea {
height: 57px;
}

&.with-svg input {
height: 38px;
}
}

input[type=checkbox] {
display: none;
}

input[type=checkbox] + label {
display: block;
cursor: pointer;
width: fit-content;
}
& + label {
display: block;
cursor: pointer;
width: fit-content;

input[type=checkbox] + label:before {
content: "\2714";

border-radius: 3px;
border: 2px solid var(--contrast);

display: inline-block;
width: 1em;
height: 1em;
padding-left: 0.2em;
padding-bottom: 0.2em;
margin-right: 0.2em;
vertical-align: center;
color: transparent;
transition: 200ms;
}
&:before {
content: "\2714";

border: {
radius: 3px;
width: 2px;
style: solid;
color: var(--contrast);
}

display: inline-block;
width: 1em;
height: 1em;

padding: {
left: 0.2em;
bottom: 0.2em;
}

margin: {
right: 0.2em;
}

vertical-align: center;
color: transparent;
transition: 200ms;
}
}

input[type=checkbox]:checked + label:before {
color: var(--contrast);
background-color: var(--color);
border-color: var(--color);
&:checked + label:before {
color: var(--contrast);
background-color: var(--color);
border-color: var(--color);
}
}

.input-with-icon, .input-checkbox {
width: 100%;
position: relative;
margin-top: 0.5em;
margin-bottom: 0.5em;

margin: {
top: 0.5em;
bottom: 0.5em;
}
}

.input-with-icon {
display: flex;
@include util.flex-layout-row-reverse;
justify-content: flex-start;
flex-direction: row-reverse;
align-items: center;
}

.input-with-icon textarea:focus + i, .input-with-icon input:focus + i {
color: var(--color);
}
& textarea:focus + i, & input:focus + i {
color: var(--color);
}

.input-with-icon input:focus + svg {
fill: var(--color);
}
& input:focus + svg {
fill: var(--color);
}

.input-with-icon i, .input-with-icon img {
padding: 11px 8px;
color: var(--contrast);
border-radius: 3px 0 0 3px;
transition: 200ms;
}
& i, & img {
padding: 11px 8px;
color: var(--contrast);
border-radius: 3px 0 0 3px;
transition: 200ms;
}

.input-with-icon svg {
fill: var(--contrast);
border-radius: 3px 0 0 3px;
transition: 200ms;
margin-left: 5px;
margin-right: 5px;
width: 32px;
height: 32px;
& svg {
fill: var(--contrast);
border-radius: 3px 0 0 3px;
transition: 200ms;
width: 32px;
height: 32px;

margin: {
left: 5px;
right: 5px;
}
}
}

.input-checkbox-label {
display: flex;
@include util.flex-layout-row;
justify-content: flex-start;
flex-direction: row;
align-items: center;
position: relative;
cursor: pointer;
padding: 7px;
}

.input-checkbox-label span {
height: 24px;
width: 24px;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid var(--contrast);
margin-left: 1px;
transition: 200ms;
}
& span {
height: 24px;
width: 24px;
box-sizing: border-box;
box-shadow: 0 0 6px -1px inset var(--shadow);

.input-checkbox-label p {
font-size: 16px;
font-weight: 300;
margin-left: 17px;
}
border: {
radius: 3px;
width: 1px;
style: solid;
color: var(--contrast);
}
margin-left: 1px;
transition: 200ms;

.input-checkbox-label input:checked ~ span {
border-color: var(--color);
background-color: var(--color);
}
&:after {
@include util.prefix(transform, rotate(45deg), webkit ms);

.input-checkbox-label input:checked ~ span:after {
display: block;
}
content: "";
position: absolute;
display: none;
left: 16px;
top: 11px;
width: 6px;
height: 11px;
border: solid var(--contrast);
border-width: 0 2px 2px 0;
}
}

.input-checkbox-label span:after {
content: "";
position: absolute;
display: none;
left: 16px;
top: 11px;
width: 6px;
height: 11px;
border: solid var(--contrast);
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
& p {
font-size: 16px;
font-weight: 300;
margin-left: 17px;
}

& input:checked ~ span {
border-color: var(--color);
background-color: var(--color);

&:after {
display: block;
}
}
}

.tooltip {
Expand Down

0 comments on commit 5ffc7c8

Please sign in to comment.