archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-04 13:15:24 +00:00
Code Issues Projects Releases Wiki Activity

created form input components

Browse source
This commit is contained in:
Bram Wiepjes 2019-02-16 19:03:43 +01:00
parent fa4a9ce1d4
commit de6be7d75c
3 changed files with 74 additions and 0 deletions
web-frontend
public
index.html
src/scss
components
_form.scss
default.scss

33
web-frontend/public/index.html
View file

@ -18,6 +18,39 @@
<p>
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent lobortis feugiat erat, nec volutpat nulla tincidunt vel. In hac habitasse platea dictumst. Aenean fringilla lacus nunc, non pharetra mauris pulvinar lacinia. Aenean ut sem lacinia, sagittis quam sed, pellentesque orci. Aenean non consequat mi. Nunc laoreet ligula a nunc eleifend, nec accumsan felis euismod.
</p>
<form style="margin-bottom: 20px;">
<div class="control">
<label class="control-label">Small text field</label>
<div class="control-elements">
<input type="text" class="input" />
</div>
</div>
<div class="control">
<label class="control-label">Small with error</label>
<div class="control-elements">
<input type="text" class="input input-error" />
<div class="error">Please do something different</div>
</div>
</div>
<div class="control">
<label class="control-label">Small text field</label>
<div class="control-elements">
<input type="text" class="input" placeholder="Voer hier iets in" />
</div>
</div>
<div class="control">
<label class="control-label">Large text field</label>
<div class="control-elements">
<input type="text" class="input input-large" placeholder="Voer hier iets in" />
</div>
</div>
<div class="control">
<label class="control-label">Large password field</label>
<div class="control-elements">
<input type="password" class="input input-large" placeholder="Please enter your password" />
</div>
</div>
</form>
<div style="margin-bottom: 20px;">
<div class="alert alert-has-icon">
<div class="alert-icon">

40
web-frontend/src/scss/components/_form.scss Normal file
View file

@ -0,0 +1,40 @@
.control {
margin-bottom: 20px;
}
.control-label {
display: block;
font-size: 14px;
font-weight: 700;
margin-bottom: 16px;
}
.control-elements {
}
.input {
display: block;
width: 100%;
border: 1px solid $color-neutral-400;
border-radius: 3px;
padding: 8px 12px;
&:active,
&:focus {
border-color: $color-primary-500;
}
&.input-large {
padding: 12px 12px;
}
&.input-error {
border-color: $color-error-500;
}
}
.error {
margin-top: 6px;
color: $color-error-500;
}

1
web-frontend/src/scss/default.scss
View file

@ -8,3 +8,4 @@
@import "components/button";
@import "components/alert";
@import "components/form";