scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-01-28 02:27:57 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add text input fields

Browse source
This commit is contained in:
aignatov-bio 2019-12-01 18:42:43 +01:00
parent 443ab8645f
commit 3f38b1e6a1
2 changed files with 165 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

134
app/assets/stylesheets/shared_styles/elements/input_fields.scss Normal file
View file

@ -0,0 +1,134 @@
.sci-input-container {
display: inline-block;
position: relative;
label {
@include font-small;
display: inline-block;
font-weight: bold;
margin-bottom: 5px;
}
.sci-input-field {
@include font-button;
animation-timing-function: $timing-function-sharp;
border: $border-default;
border-radius: $border-radius-default;
height: 36px;
outline: 0;
padding: 0 0 0 10px;
transition: .3s;
width: 100%;
&:focus {
border: $border-focus;
}
&:disabled {
background: transparent;
}
}
.fas {
line-height: 36px;
position: absolute;
text-align: center;
bottom: 0;
width: 25px;
}
&.left-icon {
.sci-input-field {
padding: 0 0 0 30px;
}
.fas {
left: 5px;
}
}
&.right-icon {
.sci-input-field {
padding: 0 30px 0 10px;
}
.fas {
right: 5px;
}
}
&.success,
&.error {
.sci-input-field {
padding: 0 30px 0 10px;
}
&::after {
font-family: "Font Awesome 5 Free";
font-weight: 501;
line-height: 36px;
position: absolute;
right: 5px;
text-align: center;
bottom: 0;
width: 25px;
}
&.right-icon {
.sci-input-field {
padding: 0 60px 0 10px;
}
&::after {
right: 35px;
}
}
}
&.success {
&::after {
color: $brand-success;
content: "\f00c";
}
}
&.error {
.sci-input-field {
border: $border-danger;
}
&::after {
color: $brand-danger;
content: "\f071";
}
&::before {
@include font-small;
color: $brand-danger;
content: attr(data-error-text);
left: 0;
line-height: 15px;
position: absolute;
bottom: -15px;
width: 100%;
}
}
&.disabled {
label {
color: $color-alto;
}
.sci-input-field {
border: $border-tertiary;
color: $color-alto;
&::placeholder {
color: inherit;
}
}
}
}

31
app/views/projects/index.html.erb
View file

@ -239,4 +239,35 @@
<input type="radio" name="test1" class="sci-toggle-item">
<span class="sci-toggle-item-label"><i class="fas fa-th"></i></span>
</div>
<hr>
<div class="sci-input-container" style="width: 300px">
<input type="text" class="sci-input-field" placeholder="Placeholder"></input>
</div>
<hr>
<div class="sci-input-container left-icon" style="width: 300px">
<input type="text" class="sci-input-field" placeholder="Placeholder"></input>
<i class="fas fa-search"></i>
</div>
<hr>
<div class="sci-input-container right-icon" style="width: 300px">
<label>Right icon</label>
<input type="text" class="sci-input-field" placeholder="Placeholder"></input>
<i class="fas fa-search"></i>
</div>
<hr>
<div class="sci-input-container right-icon success" style="width: 300px">
<label>Success and icon</label>
<input type="text" class="sci-input-field" placeholder="Placeholder"></input>
<i class="fas fa-search"></i>
</div>
<hr>
<div class="sci-input-container error" data-error-text="Error text" style="width: 300px">
<label>Error</label>
<input type="text" class="sci-input-field" placeholder="Placeholder"></input>
</div>
<hr>
<div class="sci-input-container disabled" style="width: 300px">
<label>Disabled</label>
<input type="text" class="sci-input-field" placeholder="Placeholder" disabled></input>
</div>
</div>