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

TDS Portal SIF Module CSS Updates #173

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

TDS Portal SIF Module CSS Updates #173

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
141785b
TDS Portal SIF Assessment Updates
ChrispinP Jan 15, 2025
d8c5469
Validation Message Update
ChrispinP Jan 16, 2025
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
96 changes: 63 additions & 33 deletions code/transportation-development-services/tds.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
.my-test {
color: "#163f6e"
}
/***************************************/
/******* Form Validation Styling *******/
/***************************************/
.kn-notification { background-color: #2acee3 !important; font-size: 1.25em; color: black;}
.is-confirmation { background-color: #caf4bc !important; font-size: 1.25em; color: black;}
.is-warning { background-color: #ffe09a !important; font-size: 1.25em; color: black;}
.is-alert { background-color: #ff9b9c !important; font-size: 1.25em; color: black;}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check .is-alert

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Susanne, I have addressed this with my second commit so the styling is not overridden. I also simplified the lines.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Example of update:
image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CSS properties for font-weight, line-height, border-radius, and border are still on the kn-notification.is-alert form message styling looking at the screenshot above.
image

The line-height for the alert reminder makes the text slightly higher than than the other notification styling. The font-weight is set to 600 for the alert which might give the user the impression that the whole message is bolded instead of just the Reminder: text. You can try font-weight: normal !important; for line 4 (all notifications) or line 8 (just the alert).

The border and border-radius is fine as-is as Knack probably puts that styling for emphasis, but it does make the alert notification bigger than the other notifications as a result since they do not have borders.

I do like the line simplification, looks easier to read and maintain!


/***************************************/
/********* FA Icon Positioning *********/
Expand All @@ -24,8 +28,8 @@
/*Close Modal 'X' Button*/
.delete { border: #adb5bd .2em !important; background-color: #adb5bd !important;}
.close-modal {border: #495057 !important; background-color: #495057 !important;}
.delete:before { background-color: white !important; width: 66% !important; left: 44% !important; height: 3px !important; border-radius: 2px !important;}
.delete:after { background-color: white !important; width: 66% !important; left: 44% !important; height: 3px !important; border-radius: 2px !important;}
.delete:before { background-color: white !important; width: 66% !important; left: 42% !important; height: 3px !important; border-radius: 2px !important;}
.delete:after { background-color: white !important; width: 66% !important; left: 42% !important; height: 3px !important; border-radius: 2px !important;}

/***************************************/
/************* Big Buttons *************/
Expand Down Expand Up @@ -340,6 +344,11 @@ a.ang-link:link {text-decoration: none;}
box-shadow: 0px 0px 0px 0px gray; font-size: 1.1em; background-color: #ebebeb; color: #163f6e; text-align: center; }
#kn-scene_302 .kn-back-link:hover { opacity: 0.9; cursor: pointer; border-color: gray; }

/*Memo Attachments Search Page*/
#kn-scene_729 .kn-back-link { padding: 5px 10px; border-style: solid; border-width: 1px; border-color: #dddddd; border-radius: 4px;
box-shadow: 0px 0px 0px 0px gray; font-size: 1.1em; background-color: #ebebeb; color: #163f6e; text-align: center; }
#kn-scene_729 .kn-back-link:hover { opacity: 0.9; cursor: pointer; border-color: gray; }

/*TIA Submission Cycle Search Page*/
#kn-scene_303 .kn-back-link { padding: 5px 10px; border-style: solid; border-width: 1px; border-color: #dddddd; border-radius: 4px;
box-shadow: 0px 0px 0px 0px gray; font-size: 1.1em; background-color: #ebebeb; color: #163f6e; text-align: center; }
Expand Down Expand Up @@ -433,10 +442,15 @@ a.ang-link:link {text-decoration: none;}
#kn-scene_622 .kn-back-link:hover { opacity: 0.9; cursor: pointer; border-color: gray; }

/*SIF Worksheet */
/*SIF Worksheet Assessment Details Page*/
#kn-scene_747 .kn-back-link { padding: 5px 10px; border-style: solid; border-width: 1px; border-color: #dddddd; border-radius: 4px;
box-shadow: 0px 0px 0px 0px gray; font-size: 1.1em; background-color: #ebebeb; color: #163f6e; text-align: center; }
#kn-scene_747 .kn-back-link:hover { opacity: 0.9; cursor: pointer; border-color: gray; }

/*SIF Worksheet Review Details Page*/
#kn-scene_518 .kn-back-link { padding: 5px 10px; border-style: solid; border-width: 1px; border-color: #dddddd; border-radius: 4px;
#kn-scene_757 .kn-back-link { padding: 5px 10px; border-style: solid; border-width: 1px; border-color: #dddddd; border-radius: 4px;
box-shadow: 0px 0px 0px 0px gray; font-size: 1.1em; background-color: #ebebeb; color: #163f6e; text-align: center; }
#kn-scene_518 .kn-back-link:hover { opacity: 0.9; cursor: pointer; border-color: gray; }
#kn-scene_757 .kn-back-link:hover { opacity: 0.9; cursor: pointer; border-color: gray; }

/*App Admin */
/*TDS Contacts Page*/
Expand Down Expand Up @@ -597,6 +611,10 @@ a.ang-link:link {text-decoration: none;}
#kn-scene_587 .kn-back-link {
display: none;
}
/*TPW Waiver Service Page*/
#kn-scene_831 .kn-back-link {
display: none;
}

/*********************************************/
/** Remove Back Links for TIA Determination **/
Expand Down Expand Up @@ -786,31 +804,43 @@ a.ang-link:link {text-decoration: none;}
display: none;
}

/*****************************************/
/** Remove Back Links for SIF Worksheet **/
/*****************************************/
/******************************************/
/** Remove Back Links for SIF Assessment **/
/******************************************/
/*SIF Worksheet Submittal Page*/
#kn-scene_500 .kn-back-link {
#kn-scene_818 .kn-back-link {
display: none;
}
/*SIF Worksheet Submittal Information Page*/
#kn-scene_505 .kn-back-link {
/*SIF Worksheet Submittal Documents Page*/
#kn-scene_819 .kn-back-link {
display: none;
}
/*Review SIF Worksheet Submittal Page*/
#kn-scene_506 .kn-back-link {
#kn-scene_820 .kn-back-link {
display: none;
}
/*Edit Information Page*/
#kn-scene_823 .kn-back-link {
display: none;
}
/*Edit SIF Worksheet Submittal Page*/
#kn-scene_507 .kn-back-link {
/*Edit Attachments Page*/
#kn-scene_824 .kn-back-link {
display: none;
}
/*SIF Worksheet Submittal Confirmation Page*/
#kn-scene_512 .kn-back-link {
#kn-scene_821 .kn-back-link {
display: none;
}
/*SIF Worksheet Submittal Completed Documents Page*/
#kn-scene_822 .kn-back-link {
display: none;
}
/*SIF Worksheet Submittal Document Page*/
#kn-scene_647 .kn-back-link {

/******************************************/
/** Remove Back Links for SWF Assessment **/
/******************************************/
/*SWF Assessment Documents Page*/
#kn-scene_788 .kn-back-link {
display: none;
}

Expand Down Expand Up @@ -907,20 +937,6 @@ a.ang-link:link {text-decoration: none;}
#kn-scene_656 .kn-detail-label { background-color: transparent; min-width: 0% !important; }
#kn-scene_657 .kn-detail-label { background-color: transparent; min-width: 0% !important; }

/*************************************/
/*** Styles the Reviewer Dashboard ***/
/*************************************/
/*Min Width & Transparent for "Hello/Welcome" Details Label*/
#kn-scene_249 .kn-detail-label { background-color: transparent; min-width: 0% !important; }
#kn-scene_329 .kn-detail-label { background-color: transparent; min-width: 0% !important; }

/****************************************/
/*** Styles the Vision Team Dashboard ***/
/****************************************/
/*Min Width & Transparent for "Hello/Welcome" Details Label*/
#kn-scene_14 .kn-detail-label { background-color: transparent; min-width: 0% !important; }
#kn-scene_347 .kn-detail-label { background-color: transparent; min-width: 0% !important; }

/**********************************/
/*** Styles the Contact Us Page ***/
/**********************************/
Expand Down Expand Up @@ -1157,3 +1173,17 @@ a.ang-link:link {text-decoration: none;}
#kn-report-view_2194-1 div.highcharts-container svg g.highcharts-series-group g.highcharts-series rect:nth-child(3){fill: #90ed7d;}
#kn-report-view_2194-1 div.highcharts-container svg g.highcharts-series-group g.highcharts-series rect:nth-child(4){fill: #f7a35c;}
#kn-report-view_2194-1 div.highcharts-container svg g.highcharts-series-group g.highcharts-series rect:nth-child(5){fill: #8085e9;}

/***************************************/
/** Hide Placeholder Text & Input Box **/
/***************************************/
/*Username field - Add/Edit Account & Profile*/
#kn-input-field_6 input::placeholder { color: transparent; background-color: transparent; }
#kn-input-field_6 input#last.input:placeholder-shown { display: none;}

/**********************************/
/**** Application Progress Bar ****/
/**********************************/
progress { width: 200px; height: 30px; }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

interesting


.colored-progress { accent-color: green; }