Harry/site-falcon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

begin add textarea

Browse Source
This commit is contained in:
Harry Stuart 2022-11-27 18:44:11 +11:00
parent fe5d0de374
commit 9ba6af7c1b
1 changed files with 36 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
implementation.html
View File

@ -179,16 +179,18 @@
position: relative; position: relative;
} }
#input-name { .md-input {
height: 48px;
width: 100%; width: 100%;
border: 1px solid #c0c0c0; border: 1px solid #c0c0c0;
border-radius: 4px; border-radius: 4px;
box-sizing: border-box;
padding: 16px; padding: 16px;
} }
#label-input-name { #input-name {
height: 48px;
}
.label-md-input {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -198,23 +200,23 @@
pointer-events: none; pointer-events: none;
} }
#input-name, #label-input-name > div { .md-input, .label-md-input > div {
font-family: Alexandria, sans-serif; font-family: Alexandria, sans-serif;
font-weight: 300; font-weight: 300;
font-size: 16px; font-size: 16px;
} }
#label-input-name > div { .label-md-input > div {
transition: all 0.15s ease-out, visibility 0s; transition: all 0.15s ease-out, visibility 0s;
color: grey; color: grey;
} }
#input-name:focus { .md-input:focus {
outline: none; outline: none;
border: 2px solid var(--site-falcon-purple); border: 2px solid var(--site-falcon-purple);
} }
#input-name:focus + #label-input-name > div, :not(#input-name[value=""]) + #label-input-name > div { .md-input:focus + .label-md-input > div, :not(.md-input[value=""]) + .label-md-input > div {
font-size: 14px; font-size: 14px;
transform: translate(0, -150%); transform: translate(0, -150%);
background-color: white; background-color: white;
@ -222,7 +224,7 @@
padding-right: 4px; padding-right: 4px;
} }
#input-name:focus + #label-input-name > div { .md-input:focus + .label-md-input > div {
color: var(--site-falcon-purple); color: var(--site-falcon-purple);
} }
@ -261,6 +263,16 @@
#select-severity-container :last-child { #select-severity-container :last-child {
border-radius: 0px 10px 10px 0px; border-radius: 0px 10px 10px 0px;
} }
#input-comment-container {
width: 100%;
margin-top: 48px;
position: relative;
}
#input-comment {
height: 150px;
}
</style> </style>
<div id="icon"> <div id="icon">
@ -278,11 +290,12 @@
<input <input
type="text" type="text"
id="input-name" id="input-name"
class="md-input"
name="name" name="name"
value="" value=""
aria-labelledby="label-input-name" aria-labelledby="label-input-name"
/> />
<label for="name" id="label-input-name"> <label for="name" class="label-md-input">
<div>Name</div> <div>Name</div>
</label> </label>
</div> </div>
@ -317,6 +330,19 @@
</span> --> </span> -->
</div> </div>
</div> </div>
<div id="input-comment-container">
<textarea
type="text"
id="input-comment"
class="md-input"
name="comment"
value=""
aria-labelledby="label-input-comment"
></textarea>
<label for="comment" class="label-md-input">
<div>Comment</div>
</label>
</div>
</div> </div>
</div> </div>
</template> </template>