rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-01-18 07:52:23 +01:00
Code Issues Releases Activity

renamed form.scss to form-item.scss to match naming convention

Browse Source
This commit is contained in:
Sylvain 2022-04-06 12:39:05 +02:00
parent 6ee7335a4d
commit 9fe48d8bf5
2 changed files with 1 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/frontend/src/stylesheets/application.scss
View File

@ -29,7 +29,7 @@
@import "modules/base/fab-text-editor";
@import "modules/base/labelled-input";
@import "modules/calendar/calendar";
@import "modules/form/form";
@import "modules/form/form-item";
@import "modules/machines/machine-card";
@import "modules/machines/machines-filters";
@import "modules/machines/machines-list";

106
app/frontend/src/stylesheets/modules/form/form.scss
View File

@ -1,106 +0,0 @@
.form-input {
width: 100%;
margin-bottom: 1.6rem;
&-header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.8rem;
p { margin: 0; }
}
&.is-required &-header p::after {
content: "*";
margin-left: 0.5ch;
color: var(--error);
}
&-field {
height: 4rem;
display: grid;
grid-template-areas: "icon field addon";
grid-template-columns: min-content 1fr min-content;
border: 1px solid var(--gray-soft-dark);
border-radius: var(--border-radius);
transition: border-color ease-in-out 0.15s;
.icon,
.addon {
width: 4rem;
display: flex;
justify-content: center;
align-items: center;
color: var(--gray-hard-light);
background-color: var(--gray-soft);
}
.icon {
grid-area: icon;
border-right: 1px solid var(--gray-soft-dark);
}
& > input {
grid-area: field;
border: none;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .08);
padding: 0 0.8rem;
color: var(--gray-hard-darkest);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:focus {
outline: none;
box-shadow: 0 0 0 2px var(--information);
}
}
// override React-select component's style
.rs {
grid-area: field;
&__control {
border: none;
border-radius: var(--border-radius);
&--is-focused {
box-shadow: 0 0 0 2px var(--information);
}
}
&__menu {
margin-top: 1px;
border: 1px solid var(--gray-soft-dark);
box-shadow: var(--shadow);
}
&__option {
color: #000000;
&:hover {
background-color: var(--information-lightest);
}
&--is-selected,
&--is-selected:hover {
background-color: var(--information-light);
}
}
}
.addon {
grid-area: addon;
border-left: 1px solid var(--gray-soft-dark);
}
}
&.is-incorrect &-field {
border-color: var(--error);
.icon {
color: var(--error);
border-color: var(--error);
background-color: var(--error-lightest);
}
}
&.is-disabled &-field input,
&.is-readOnly &-field input {
background-color: var(--gray-soft-light);
}
&-error {
margin-top: 0.4rem;
color: var(--error);
}
}