ashpie/swaf-boilerplate
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add optional input field illustration feather icon

Browse Source
This commit is contained in:
Alice Gaudon 2020-09-10 15:19:31 +02:00
parent c68d5819b1
commit f70112e956
2 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/sass/_vars.scss
View File

@ -9,6 +9,7 @@ $defaultTextColor: #ffffff;
$headerBackground: darken($primary, 7.5%); $headerBackground: darken($primary, 7.5%);
$footerBackground: lighten($headerBackground, 1%); $footerBackground: lighten($headerBackground, 1%);
$panelBackground: lighten($headerBackground, 1%); $panelBackground: lighten($headerBackground, 1%);
$inputBackground: darken($panelBackground, 4%);
$info: #4499ff; $info: #4499ff;
$infoText: darken($info, 42%); $infoText: darken($info, 42%);

27
assets/sass/layout.scss
View File

@ -353,6 +353,20 @@ form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 16px auto; margin: 16px auto;
background: $inputBackground;
border-radius: 5px;
overflow: hidden;
> .feather.icon {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
z-index: 0;
--icon-size: 24px;
opacity: 0.75;
}
label { label {
position: absolute; position: absolute;
@ -379,10 +393,10 @@ form {
} }
input, select, textarea, .input-group { input, select, textarea, .input-group {
z-index: 1;
border: 0; border: 0;
color: $defaultTextColor; color: $defaultTextColor;
background: lighten($panelBackground, 4%); background: transparent;
border-radius: 5px;
font-size: 16px; font-size: 16px;
&:focus, &:not([value=""]), &[type="file"] { &:focus, &:not([value=""]), &[type="file"] {
@ -435,17 +449,22 @@ form {
&.inline { &.inline {
flex-direction: row; flex-direction: row;
align-items: center;
input[type=checkbox] { input[type=checkbox] {
text-align: left;
width: min-content; width: min-content;
height: min-content; height: min-content;
margin: 8px;
text-align: left;
& ~ label { & ~ label {
position: static; position: static;
flex-grow: 1;
display: inline; display: inline;
padding-left: 8px; padding: 8px;
font-size: 16px; font-size: 16px;
text-align: left;
} }
} }
} }