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
Sylvain
parent
c2a245ce08
commit
6ee7335a4d
@ -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";
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
18
db/schema.rb
18
db/schema.rb
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user