Skip to content

NDE-64 / NDE-65: Button/link styling updates #33

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

Open
djanelle-mit wants to merge 3 commits into
base: mit-main
Choose a base branch
from
Open

NDE-64 / NDE-65: Button/link styling updates #33

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e08a8c1
Secondary button styles to citation search forms
djanelle-mit Feb 23, 2026
6fc5058
Styles to override results page links and buttons to be more obviousl…
djanelle-mit Feb 23, 2026
4ebada0
Applying button to link style overrides to result page
djanelle-mit Feb 23, 2026
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
105 changes: 91 additions & 14 deletions src/app/styles/mit-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,52 @@ html {
}
}

@mixin secondaryButton {
background-color: $color-white !important;
border: 1px solid $color-blue-500 !important;
border-radius: 0 !important;
color: $color-text-primary !important;
font-weight: 500 !important;

&:hover {
background-color: $color-blue-25 !important;
color: $color-blue-500 !important;
}

&:focus-visible {
@include focusOutline;
}
}

// Mixin to further override links that should look like links
@mixin overrideLinksToLinks {
color: $color-text-primary !important;
@include underlinedLinks;

&:hover {
> .mat-mdc-button-persistent-ripple::before {opacity: 0 !important;}

color: $color-blue-500 !important;
}
}

// Mixin to overrde buttons that should appear like links
@mixin overrideButtonsToLinks {
color: $color-text-primary !important;
text-decoration: underline !important;
text-decoration-color: $color-blue-500 !important;
text-underline-offset: 0.25rem;

.mdc-button__label > span {
overflow: visible !important ;
}

&:hover {
> .mat-mdc-button-persistent-ripple::before {opacity: 0 !important;}

color: $color-blue-500 !important;
}
}

//===================
// MITL DS VARIABLES
Expand Down Expand Up @@ -514,19 +560,7 @@ nde-record-title {
nde-record-availability {

button:not(.available-at-button) {
border: 1px solid $color-blue-500 !important;
border-radius: 0 !important;
color: $color-text-primary !important;
font-weight: 500 !important;

&:hover {
background-color: $color-blue-25 !important;
color: $color-blue-500 !important;
}

&:focus-visible {
@include focusOutline;
}
@include secondaryButton;
}

span.ti-dropdown mat-select, button.mat-mdc-menu-trigger{
Expand Down Expand Up @@ -558,6 +592,49 @@ nde-record-availability {
}
}


// RESULT PAGE
// Updating buttons to DS styles
nde-request-card mat-card-actions{
button {
@include secondaryButton;
}

a.go-to-link-button {
@include overrideLinksToLinks;
}
}

nde-location-items-requests {
button {
@include overrideButtonsToLinks;
}
}

nde-location-item-service-button {
button {
@include overrideButtonsToLinks;
}
}

#item-level-request-msg {
button {
@include overrideButtonsToLinks;
}
}

// CITATION SEARCH PAGE
// Submit button
form .buttons-container-wrapper button[type="submit"] {
@include secondaryButton;

&.mat-mdc-button-disabled {
background-color: $color-white !important;
border-color: $color-gray-400 !important;
color: $color-gray-400 !important;
}
}

// MY LIBRARY ACTIVITY PAGE (under profile when logged in)

// Active link styling on left navigation
Expand All @@ -566,4 +643,4 @@ nde-record-availability {
background-color: $color-gray-200 !important;
border-radius: 0 1.25rem 1.25rem 0 !important;
color: $color-text-primary !important;
}
}