diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss index 3aee370434..f17900e95a 100644 --- a/app/assets/stylesheets/base/variables.scss +++ b/app/assets/stylesheets/base/variables.scss @@ -7,7 +7,20 @@ $sidebar-active: #365CF5; $sidebar-dark: #1A2142; :root { - --dark: #262d3f; + --casa-red: #D50100; + --casa-primary-blue: #4A6CF7; + + --gunmetal: #262D3F; + --dark-gunmetal: #212529; + --dark: #262d3f; + --dark-electric-blue: #5D657B; --gray: #5d657b; + --dark-gray: #AAAAAA; + --gray-80: #CCCCCC; --silver: #D9D9D9; + + --inactive: #9AA4CA; + + --input-placeholder-text: var(--gray); + --input-border-color: var(--gray-80); } diff --git a/app/assets/stylesheets/pages/case_contacts.scss b/app/assets/stylesheets/pages/case_contacts.scss index b30659d726..67a1a4fc71 100644 --- a/app/assets/stylesheets/pages/case_contacts.scss +++ b/app/assets/stylesheets/pages/case_contacts.scss @@ -1,16 +1,7 @@ - -fieldset { - border: 1px double #CCC; -} - .slide-container { padding: 0rem 1rem; } -legend { - font-size: small; -} - .slider { display: inline; } @@ -90,7 +81,7 @@ legend { } } } - + .other-expenses li { margin-bottom: .2rem; } @@ -118,7 +109,7 @@ legend { display: flex; align-items: center; } - + .dollar-sign .other-expense-amount { position: relative; padding-left: 32px; @@ -135,7 +126,7 @@ legend { left: 28px; z-index: 100; } - + .pr-7 { padding-right: 1.5rem !important; padding-left: 2.5rem !important; diff --git a/app/assets/stylesheets/pages/case_contacts_form.scss b/app/assets/stylesheets/pages/case_contacts_form.scss index 6007418ba6..5f0121391d 100644 --- a/app/assets/stylesheets/pages/case_contacts_form.scss +++ b/app/assets/stylesheets/pages/case_contacts_form.scss @@ -1,31 +1,151 @@ @use "../base/breakpoints.scss" as screen-sizes; -.case-contacts-form { - &-buttons { - display: flex; - justify-content: flex-end; - gap: 10px; +#case-contact-form { + color: var(--gunmetal); - @media only screen and (max-width: screen-sizes.$mobile) { - & > a, & > button { - flex-grow: 1; + & section { + background: var(--white, #FFFFFF); + border: 1px solid var(--form-element-stroke, #E5E5E5); + border-radius: 10px; + box-shadow: 0px 0px 5px 0px #1A252F0D; + margin-bottom: 30px; + padding: 30px 20px; + } + + & h2 { + font-size: 28px; + margin-bottom: 24px; + } + + & h3 { + font-size: 16px; + } + + & legend { + font-size: 16px; + font-weight: 400; + line-height: 19px; + color: var(--dark-electric-blue); + } + + & label { + font-size: 16px; + font-weight: 500; + line-height: 19px; + } + + & input, + textarea, + select { + border: 1px solid var(--input-border-color); + + &::placeholder { + color: var(--input-placeholder-text); + opacity: 1; + } + } + + & input[type="text"], + input[type="date"], + input[type="number"], + textarea, + select { + padding: 16px; + } + + & .form-check { + margin-left: 0px; + padding-left: 0px; + + & input { + width: 20px; + height: 20px; + margin-left: 0px; + margin-right: 3px; + float: none; + + &:checked { + background-color: var(--casa-primary-blue); + border-color: var(--casa-primary-blue); + } + + &[type="checkbox"] + label { + padding-top: 5px; + font-weight: 300; } + + &[type="radio"] + label { + padding-top: 1px; + font-size: 16px; + font-weight: 300; + line-height: 25px; + color: var(--dark-electric-blue) + } + } + + label { + font-size: 16px; + font-weight: 600; } } - &-checkbox { - border-color: #757575; + & button { + --bs-link-color: var(--casa-primary-blue); + + &.btn-link { + text-decoration: none; + padding: 0px; + } } - &-title { - @media only screen and (max-width: screen-sizes.$mobile) { - font-size: 28px; - } + & .row { + --bs-gutter-x: .5rem; + } + + & #contact-form-types { + --group-width: 250px; + + columns: var(--group-width); + + & fieldset { + display: inline-block; + width: var(--group-width); + margin-bottom: .25rem; + + & .form-check { + & label { + display: inline; + color: var(--dark); + font-weight: 400; + color: var(--dark-gunmetal); + } + + & small { + display: block; + margin-left: 28px; + font-style: italic; + font-weight: 300; + color: var(--dark-electric-blue); + } + } + } + } + + & .input-group-text { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } - &-subtitle { + & #contact-form-action-buttons { + display: flex; + justify-content: flex-end; + gap: 10px; + @media only screen and (max-width: screen-sizes.$mobile) { - font-size: 24px; - } + & > a, & > button { + flex-grow: 1; + } + } } -} \ No newline at end of file +} + diff --git a/app/assets/stylesheets/shared/form.scss b/app/assets/stylesheets/shared/form.scss index e5d7fd8fb7..35f3aae004 100644 --- a/app/assets/stylesheets/shared/form.scss +++ b/app/assets/stylesheets/shared/form.scss @@ -33,9 +33,3 @@ form { display: initial; } -.details__topics-label { - span { - display: initial; - } - -} diff --git a/app/components/form/hour_minute_duration_component.html.erb b/app/components/form/hour_minute_duration_component.html.erb index 7a0ba75ba4..146096ed98 100644 --- a/app/components/form/hour_minute_duration_component.html.erb +++ b/app/components/form/hour_minute_duration_component.html.erb @@ -1,20 +1,18 @@ -
-
+
+
<%= @form.label :duration_hours, "Hour(s)" %> <%= @form.number_field :duration_hours, min: 0, class: "form-control", - size: "10", style: "background:white", value: @hour_value, required: true %>
-
+
<%= @form.label :duration_minutes, "Minute(s)" %> <%= @form.number_field :duration_minutes, min: 0, class: "form-control", - size: "10", style: "background:white", value: @minute_value, required: true %> diff --git a/app/components/form/multiple_select_component.html.erb b/app/components/form/multiple_select_component.html.erb index dbccceb530..58bb6f3098 100644 --- a/app/components/form/multiple_select_component.html.erb +++ b/app/components/form/multiple_select_component.html.erb @@ -2,6 +2,7 @@ data-controller="multiple-select" data-multiple-select-options-value="<%= @options %>" data-multiple-select-selected-items-value="<%= @selected_items %>" + data-multiple-select-placeholder-term-value="<%= @placeholder_term %>" data-multiple-select-with-options-value="true">