Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Add unique IDs to input fields in consumer roles docs #4006

Merged
merged 10 commits into from
Jul 19, 2024
Merged

refactor: Add unique IDs to input fields in consumer roles docs #4006

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
786ba05
upgrade to bs4 base
scaustin34 Feb 28, 2024
b1a94d5
revert temp changes for design review to trunk
scaustin34 Feb 28, 2024
9e87545
registration process
kristinmerbach Mar 29, 2024
fb60d80
more work on consumer flow
kristinmerbach Apr 8, 2024
fcd3e30
fix fonts, more ridp work started
kristinmerbach Apr 23, 2024
6223e3f
start moving FAA to use bootstrap 4 (#3855)
kristinmerbach May 24, 2024
532cf54
bs4 plan shopping family info & choose cov for HH pages (#3821)
scaustin34 Jun 3, 2024
047393a
bs4 income adjustments (#3954)
charlienparker Jun 26, 2024
1f22337
uplift job income page to bs4 (#3974)
ATBull81 Jul 1, 2024
50506d8
refactor: Add unique IDs to input fields in consumer roles docs share…
bbodine1 Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions app/javascript/css/alerts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
}

.alert {
padding: .25em;
padding: 0.25em;
border-radius: 12px;
border-width: 1px;
border-style: solid;
Expand Down Expand Up @@ -71,14 +71,14 @@

&.alert-sm {
height: 36px;
padding-left: $spacer * .75;
padding-left: $spacer * 0.75;
padding-right: $spacer;
}
}

//notice is just an alert without a border
.notice {
padding: .25em;
padding: 0.25em;
border-radius: 6px;

&.notice-error {
Expand Down Expand Up @@ -111,7 +111,7 @@
.notice .icon,
.modal .icon {
width: 1em;
margin-right: .25em;
margin-right: 0.25em;
height: 24px;
width: 24px;
color: transparent !important;
Expand Down
142 changes: 70 additions & 72 deletions app/javascript/css/colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,38 +34,37 @@
// May be unique colors, but used by all clients
--bright-green: hsl(65, 100%, 42%);
--orange: hsl(359, 80%, 54%);

}

[data-theme="me"] {
[data-theme='me'] {
--default-font-color: #323130;
--text-secondary: hsla(30, 2%, 37%, 1);

//palette
--primary-color: #3D5D6F;
--primary-color-dark: #314A59;
--primary-color: #3d5d6f;
--primary-color-dark: #314a59;
--primary-color-darker: #253843;
--default-font-color: #323130;
--placeholder-color: #676767;
--placeholder-font-weight: 400;
--floatlabel-color: #767676;
--floatlabel-onclick-color:#676767;
--floatlabel-onclick-color: #676767;
--input-text-color: #454545;
--form-element-text-color: #454545;
--default-font-color: #323130;
--placeholder-color: #676767;
--floatlabel-color: #767676;
--floatlabel-onclick-color:#676767;
--floatlabel-onclick-color: #676767;
--input-text-color: #454545;
--form-element-text-color: #454545;

--secondary-color: #3B6B90;
--secondary-color-dark: #2E5470;
--secondary-color-darker: #213C50;
--secondary-color: #3b6b90;
--secondary-color-dark: #2e5470;
--secondary-color-darker: #213c50;

--tertiary-color: #5A7334;
--tertiary-color: #5a7334;
--tertiary-color-dark: #465929;
--tertiary-color-darker: #32401D;
--tertiary-color-darker: #32401d;

//fundamentals
--primary-hover-color: var(--primary-color-dark);
Expand All @@ -85,134 +84,133 @@
--placeholder-color: #676767;
--placeholder-font-weight: 400;
--floatlabel-color: #767676;
--floatlabel-onclick-color:#676767;
--floatlabel-onclick-color: #676767;
--input-text-color: #454545;
--form-element-text-color: #454545;

--button-default-color: var(--primary-color);
--button-default-hover-color: var(--primary-hover-color);
--button-default-active-color: var(--primary-color-darker);

--enrollment-status-red: #A21E1F;
--enrollment-status-red: #a21e1f;
--enrollment-status-green: #027314;
--enrollment-status-yellow: #E5A900;
--enrollment-status-yellow: #e5a900;
--enrollment-status-blue: #003260;
--enrollment-status-grey: #3B3A39;
--enrollment-status-grey: #3b3a39;

--button-primary-color: #3D5D6F;
--button-primary-hover-color: #314A59;
--button-primary-color: #3d5d6f;
--button-primary-hover-color: #314a59;
--button-primary-active-color: #253843;

--button-secondary-color: #3B6B90;
--button-secondary-hover-color: #345F80;
--button-secondary-color: #3b6b90;
--button-secondary-hover-color: #345f80;
--button-secondary-active-color: #274760;

--button-tertiary-color: #647F3A;
--button-tertiary-hover-color: #50662E;
--button-tertiary-active-color: #3C4C23;
--button-tertiary-color: #647f3a;
--button-tertiary-hover-color: #50662e;
--button-tertiary-active-color: #3c4c23;

--button-error-color: var(--status-red);
--button-error-hover-color: var(--status-red-hover);
--button-error-active-color: var(--status-red-active);
}

[data-theme="dc"] {
[data-theme='dc'] {
--default-font-color: #323130;

--body-color: #FAFAFA;
--body-color: #fafafa;

--placeholder-color: #676767;
--floatlabel-color: #767676;
--floatlabel-onclick-color:#676767;
--floatlabel-onclick-color: #676767;
--input-text-color: #454545;
--form-element-text-color: #454545;

--button-default-color: #4A7EA6;
--button-default-hover-color: #345F80;
--button-default-color: #4a7ea6;
--button-default-hover-color: #345f80;
--button-default-active-color: #274760;

--enrollment-status-red: #A21E1F;
--enrollment-status-red: #a21e1f;
--enrollment-status-green: #027314;
--enrollment-status-yellow: #E5A900;
--enrollment-status-yellow: #e5a900;
--enrollment-status-blue: #003260;
--enrollment-status-grey: #3B3A39;
--enrollment-status-grey: #3b3a39;

//buttons
--button-primary-color: #007BC4;
--button-primary-hover-color: #00629D;
--button-primary-active-color: #004A76;
--button-primary-color: #007bc4;
--button-primary-hover-color: #00629d;
--button-primary-active-color: #004a76;

--button-secondary-color: #003260;
--button-secondary-hover-color: #00284D;
--button-secondary-active-color: #001E3A;
--button-secondary-hover-color: #00284d;
--button-secondary-active-color: #001e3a;

--button-tertiary-color: #9D6E00;
--button-tertiary-hover-color: #7E5800;
--button-tertiary-active-color: #5E4200;
--button-tertiary-color: #9d6e00;
--button-tertiary-hover-color: #7e5800;
--button-tertiary-active-color: #5e4200;

--button-error-color: #A21E1F;
--button-error-hover-color: #85191A;
--button-error-color: #a21e1f;
--button-error-hover-color: #85191a;
--button-error-active-color: #671314;
}


[data-contrast="true"] {
--secondary-font-color: #676C72; //secondary text gray
[data-contrast='true'] {
--secondary-font-color: #676c72; //secondary text gray
--bold-font-color: #323130; //bold text
--theme-primary-blue: #3B6B90; //primary blue
--theme-secondary: #425C6E; //secondary dark blue
--primary-red: #D42537; //primary red
--background-light-red: #F9F1F1; //error notice background color
--primary-green: #5A7334; //green continue buttons
--secondary-green: #738C4A; //green for continue button hover
--success-green-background: #E3F9E6; //green for success pill

--primary-yellow: #FFD600;
--soft-yellow: #FFFADF;
--theme-primary-blue: #3b6b90; //primary blue
--theme-secondary: #425c6e; //secondary dark blue
--primary-red: #d42537; //primary red
--background-light-red: #f9f1f1; //error notice background color
--primary-green: #5a7334; //green continue buttons
--secondary-green: #738c4a; //green for continue button hover
--success-green-background: #e3f9e6; //green for success pill

--primary-yellow: #ffd600;
--soft-yellow: #fffadf;
--primary-white: #ffffff;
--primary-black: #000000;
--alert-notice-green: #62703E; //success notice green
--soft-blue: #D6EBFF; //home page right nav text color
--alert-notice-green: #62703e; //success notice green
--soft-blue: #d6ebff; //home page right nav text color

--status-red: #A21E1F; //status danger
--status-red-hover: #85191A; //status danger
--status-red: #a21e1f; //status danger
--status-red-hover: #85191a; //status danger
--status-red-active: #671314; //status danger
--status-blue: #003260; //status pending
--status-yellow: #E5A900; //status needs info
--status-yellow: #e5a900; //status needs info
--status-green: #027314; //status complete
--light-gray: #A19F9D;
--light-gray: #a19f9d;

--default-font-color: #323130;

--placeholder-color: #676767;
--floatlabel-color: #767676;
--floatlabel-onclick-color:#676767;
--floatlabel-onclick-color: #676767;
--input-text-color: #454545;
--form-element-text-color: #454545;

--button-default-color: #3D5D6F;
--button-default-hover-color: #314A59;
--button-default-color: #3d5d6f;
--button-default-hover-color: #314a59;
--button-default-active-color: #253843;

--button-primary-color: #3D5D6F;
--button-primary-hover-color: #314A59;
--button-primary-color: #3d5d6f;
--button-primary-hover-color: #314a59;
--button-primary-active-color: #253843;

--button-secondary-color: #3B6B90;
--button-secondary-hover-color: #345F80;
--button-secondary-color: #3b6b90;
--button-secondary-hover-color: #345f80;
--button-secondary-active-color: #274760;

--button-tertiary-color: #647F3A;
--button-tertiary-hover-color: #50662E;
--button-tertiary-active-color: #3C4C23;
--button-tertiary-color: #647f3a;
--button-tertiary-hover-color: #50662e;
--button-tertiary-active-color: #3c4c23;

--button-error-color: var(--status-red);
--button-error-hover-color: var(--status-red-hover);
--button-error-active-color: var(--status-red-active);

--enrollment-status-red: #A21E1F;
--enrollment-status-red: #a21e1f;
--enrollment-status-green: #027314;
--enrollment-status-yellow: #E5A900;
--enrollment-status-yellow: #e5a900;
--enrollment-status-blue: #003260;
--enrollment-status-grey: #3B3A39;
--enrollment-status-grey: #3b3a39;
}
48 changes: 24 additions & 24 deletions app/javascript/css/contrast_level_aa.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// all contents of this file must be nested within the data-contrast="true" selector to make sure they don't leak to other themes.
// These will only be applied if the contrast level is set to true in the layout.
[data-contrast="true"] {
[data-contrast='true'] {
--font: Barlow, sans-serif;
--placeholder-font-weight: 400;

Expand All @@ -9,59 +9,59 @@
border-radius: 18px;
border: 1px;
background-color: var(--status-yellow);
}
}

.success-notice {
.success-notice {
padding: 8px 14px 8px 14px;
border-radius: 18px;
border: 1px solid ;
border: 1px solid;
background-color: var(--success-green-background);
}
}

.warning-status-hide {
.warning-status-hide {
display: none !important;
}
}

.success-status-hide {
.success-status-hide {
display: none !important;
}
}

.icon {
.icon {
width: 1em;
}
}

// use these in case we want to improve the icons used for "info needed" statuses on the FAA application workflow
.warning-icon-small {
// use these in case we want to improve the icons used for "info needed" statuses on the FAA application workflow
.warning-icon-small {
background-image: url('../../assets/images/warning-icon-small.svg');
background-repeat: no-repeat;
background-position: center;
color: transparent !important;
padding: 1px;
margin-right: 5px !important;
}
.warning-icon {
}
.warning-icon {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49845 2.29672C10.5292 0.234426 13.4708 0.234426 14.5016 2.29672L22.9501 19.2003C23.8802 21.0612 22.5273 23.25 20.4485 23.25H3.55146C1.47273 23.25 0.11977 21.0612 1.0499 19.2003L9.49845 2.29672Z' fill='%23FFD600' stroke='%233B3A39' stroke-width='1.5'/%3E%3Cpath d='M13.0089 15.8215H11.0074L10.589 7.80707H13.4273L13.0089 15.8215ZM10.5562 18.627C10.5562 18.1676 10.6793 17.8203 10.9254 17.5852C11.1714 17.35 11.5297 17.2325 12 17.2325C12.4539 17.2325 12.8039 17.3528 13.05 17.5934C13.3015 17.834 13.4273 18.1786 13.4273 18.627C13.4273 19.059 13.3015 19.4008 13.05 19.6524C12.7984 19.8985 12.4484 20.0215 12 20.0215C11.5406 20.0215 11.1851 19.9012 10.9336 19.6606C10.682 19.4145 10.5562 19.07 10.5562 18.627Z' fill='%233B3A39'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
color: transparent !important;
font-size: 27px !important;
}
}

.ready-4-review .note.purple::before {
.ready-4-review .note.purple::before {
display: none;
}
}

.note.purple {
.note.purple {
display: none;
}
}

.complete-icon-text{
.complete-icon-text {
font-weight: normal !important;
}
}

#account-detail .popover {
#account-detail .popover {
.arrow:after {
border-right-color: transparent;
}
}
}
}
2 changes: 1 addition & 1 deletion app/javascript/css/dc.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// all contents of this file must be nested within the data-theme="dc" selector to make sure they don't leak to other clients.
[data-theme="dc"] {
[data-theme='dc'] {
--font: 'Open Sans', sans-serif;
--placeholder-font-weight: 400;
}
Loading
Loading