1
0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-03-15 12:29:16 +01:00

Override React-select styles

This commit is contained in:
vincent 2022-04-05 19:09:59 +02:00 committed by Sylvain
parent c2a245ce08
commit 6ee7335a4d
4 changed files with 48 additions and 97 deletions

View File

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

View File

@ -1,74 +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 input addon";
grid-template-columns: min-content 1fr min-content;
border: 1px solid var(--gray-soft-dark);
border-radius: 4px;
overflow: hidden;
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: input;
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;
}
.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);
}
}

View File

@ -1,5 +1,4 @@
.form-select,
.form-multi-select {
.form-input {
width: 100%;
margin-bottom: 1.6rem;
@ -9,10 +8,7 @@
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.8rem;
p {
@include text-sm;
margin: 0;
}
p { margin: 0; }
}
&.is-required &-header p::after {
content: "*";
@ -23,11 +19,10 @@
&-field {
height: 4rem;
display: grid;
grid-template-areas: "icon input addon";
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);
overflow: hidden;
transition: border-color ease-in-out 0.15s;
.icon,
@ -43,17 +38,49 @@
grid-area: icon;
border-right: 1px solid var(--gray-soft-dark);
}
&-input {
grid-area: input;
& > input {
grid-area: field;
border: none;
border-radius: var(--border-radius);
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);

View File

@ -19,8 +19,8 @@ ActiveRecord::Schema.define(version: 2022_03_28_145017) do
enable_extension "unaccent"
create_table "abuses", id: :serial, force: :cascade do |t|
t.integer "signaled_id"
t.string "signaled_type"
t.integer "signaled_id"
t.string "first_name"
t.string "last_name"
t.string "email"
@ -49,8 +49,8 @@ ActiveRecord::Schema.define(version: 2022_03_28_145017) do
t.string "locality"
t.string "country"
t.string "postal_code"
t.integer "placeable_id"
t.string "placeable_type"
t.integer "placeable_id"
t.datetime "created_at"
t.datetime "updated_at"
end
@ -64,8 +64,8 @@ ActiveRecord::Schema.define(version: 2022_03_28_145017) do
end
create_table "assets", id: :serial, force: :cascade do |t|
t.integer "viewable_id"
t.string "viewable_type"
t.integer "viewable_id"
t.string "attachment"
t.string "type"
t.datetime "created_at"
@ -146,8 +146,8 @@ ActiveRecord::Schema.define(version: 2022_03_28_145017) do
end
create_table "credits", id: :serial, force: :cascade do |t|
t.integer "creditable_id"
t.string "creditable_type"
t.integer "creditable_id"
t.integer "plan_id"
t.integer "hours"
t.datetime "created_at"
@ -369,15 +369,15 @@ ActiveRecord::Schema.define(version: 2022_03_28_145017) do
create_table "notifications", id: :serial, force: :cascade do |t|
t.integer "receiver_id"
t.integer "attached_object_id"
t.string "attached_object_type"
t.integer "attached_object_id"
t.integer "notification_type_id"
t.boolean "is_read", default: false
t.datetime "created_at"
t.datetime "updated_at"
t.string "receiver_type"
t.boolean "is_send", default: false
t.jsonb "meta_data", default: {}
t.jsonb "meta_data", default: "{}"
t.index ["notification_type_id"], name: "index_notifications_on_notification_type_id"
t.index ["receiver_id"], name: "index_notifications_on_receiver_id"
end
@ -570,8 +570,8 @@ ActiveRecord::Schema.define(version: 2022_03_28_145017) do
create_table "prices", id: :serial, force: :cascade do |t|
t.integer "group_id"
t.integer "plan_id"
t.integer "priceable_id"
t.string "priceable_type"
t.integer "priceable_id"
t.integer "amount"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
@ -681,8 +681,8 @@ ActiveRecord::Schema.define(version: 2022_03_28_145017) do
t.text "message"
t.datetime "created_at"
t.datetime "updated_at"
t.integer "reservable_id"
t.string "reservable_type"
t.integer "reservable_id"
t.integer "nb_reserve_places"
t.integer "statistic_profile_id"
t.index ["reservable_type", "reservable_id"], name: "index_reservations_on_reservable_type_and_reservable_id"
@ -691,8 +691,8 @@ ActiveRecord::Schema.define(version: 2022_03_28_145017) do
create_table "roles", id: :serial, force: :cascade do |t|
t.string "name"
t.integer "resource_id"
t.string "resource_type"
t.integer "resource_id"
t.datetime "created_at"
t.datetime "updated_at"
t.index ["name", "resource_type", "resource_id"], name: "index_roles_on_name_and_resource_type_and_resource_id"