This repository has been archived on 2024-08-21. You can view files and clone it, but cannot push or open issues or pull requests.
sc-portal/app/src/styles/_forms.scss

106 lines
2.5 KiB
SCSS
Raw Normal View History

2021-04-27 21:22:22 +03:00
.form-check-label
{
text-transform: uppercase;
color: #0dcaf0;
font-family: "Varta", sans-serif;
font-size: 1.2rem;
vertical-align: middle;
}
.form-switch .form-check-input
{
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'-4%20-4%208%208'%3E%3Ccircle%20r%3D'3'%20fill%3D'%230dcaf0'%2F%3E%3C%2Fsvg%3E");
background-color: transparent;
border-color: #0dcaf0;
margin-top: 0;
transition: all .15s cubic-bezier(0, .8, .2, 1);
&:focus
{
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'-4%20-4%208%208'%3E%3Ccircle%20r%3D'3'%20fill%3D'%230dcaf0'%2F%3E%3C%2Fsvg%3E");
}
&:checked
{
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'-4%20-4%208%208'%3E%3Ccircle%20r%3D'3'%20fill%3D'%2310182b'%2F%3E%3C%2Fsvg%3E");
background-color: #0dcaf0;
box-shadow: 0 0 0 1px #10182b inset;
&:focus
{
box-shadow: 0 0 0 1px #10182b inset, 0 0 0 0.25rem rgba(13, 110, 253, .25);
}
}
}
.form-switch
{
min-height: auto;
}
:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus
{
-webkit-text-fill-color: #ff9c07 !important; // Hack because color cannot be overridden
-webkit-box-shadow: 0 0 0px 1000px #0f1626 inset; // Hack because background-color cannot be overridden
}
.form-control, .form-select
{
border-color: rgb(0 231 255 / 75%);
background-color: transparent;
color: #ff9c07;
border-radius: 3rem;
&:focus, &:active
{
background-color: transparent;
color: #ff9c07;
}
&:focus
{
border-color: #00e7ff;
box-shadow: 0 0 .75rem -.1rem #00e7ff, 0 0 0.25rem #00e7ff, 0 0 .5rem -.25rem #00e7ff inset;
}
&:disabled, &[readonly]
{
background-color: transparent;
color: rgba(255, 156, 7, .5);
border-color: rgba(0, 231, 255, .25);
}
&::placeholder
{
color: rgba(13, 202, 240, .35);
}
&:-ms-input-placeholder
{
color: rgba(13, 202, 240, .35);
}
&::-ms-input-placeholder
{
color: rgba(13, 202, 240, .35);
}
}
.form-select
{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230596b2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
option
{
background: #11182b;
}
}
.form-floating > label
{
padding: 1.25rem .75rem;
opacity: .65;
}