Skip to content

style: update search modal filter button styling #436

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

Merged
memurats merged 6 commits into from
Jan 23, 2026
Merged

style: update search modal filter button styling #436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
03088c9
style: update search modal filter button styling
suet-kei-chan Jan 14, 2026
b1b4f22
fix: adjust unified search modal header layout
suet-kei-chan Jan 15, 2026
35247e7
style: improve search input field interactions
suet-kei-chan Jan 15, 2026
374e8b6
style: update search modal design with new colors and typography
suet-kei-chan Jan 15, 2026
0a4aeef
style: improve search modal input styling and spacing
suet-kei-chan Jan 16, 2026
85138fc
style: improve search input label positioning and transitions
suet-kei-chan Jan 16, 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
12 changes: 8 additions & 4 deletions css/components/ncfields.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
#body-settings .input-field,
#body-public .input-field,
#body-login .input-field {
border-radius: var(-border-radius);
border-radius: var(--border-radius-container);
margin-block-start: 0;

&__main-wrapper {
Expand All @@ -20,7 +20,7 @@

&__input {
padding: 0 0.75rem;
border: 1px solid var(--color-border);
border: 1px solid var(--color-main-text);
height: 44px !important;

&:active:disabled,
Expand All @@ -34,16 +34,20 @@
&:active:not([disabled]) {
color: var(--color-text-lighter);
border-color: var(--color-border-dark);

background-color: var(--color-background-hover);
}

&:hover:not([disabled]) {
cursor: text;
border-color: var(--color-border-dark);
background-color: var(--color-background-hover);
}

&:focus:not([disabled]) {
border: 1px solid var(--color-element-info);
border: 1px solid var(--color-border-dark);
background-color: var(--color-background-hover);
outline: 2px solid var(--color-main-text);
outline-offset: 3px;
}

&--leading-icon {
Expand Down
178 changes: 144 additions & 34 deletions css/components/search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import '../_variables.scss';
@import '../_mixins.scss';

// styling for search popover from header
Expand Down Expand Up @@ -35,7 +36,7 @@
.unified-search__form {
& #unified-search__input {
border: 2px solid var(--color-border);
border-radius: 5px;
border-radius: var(--border-radius-container);
padding-top: 1.5rem;
padding-bottom: 1.5rem;
padding-left: 1rem;
Expand Down Expand Up @@ -66,6 +67,16 @@
}
}

#unified-search {
.modal-container__content {
align-items: flex-start;
}

.dialog__name {
margin-left: 6px;
}
}

#unified-search .unified-search-modal {
padding-block: 1rem 0;

Expand All @@ -74,9 +85,34 @@
}

&__header {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0 6px;

.input-field {
label.input-field__label {
display: none;
display: block;
top: 50%;
transform: translateY(-50%);
font-size: var(--default-font-size);
}

&:hover label.input-field__label,
&:focus-within label.input-field__label {
top: 18%;
left: -1%;
transform: translateY(-50%);
background-color: transparent;
font-size: var(--font-size-small);
}

.input-field__input {
&:hover,
&:focus,
&:active {
background-color: var(--background-input-hover-focus);
}
}
}

Expand All @@ -90,53 +126,95 @@
}

button.button-vue {
all: unset !important;

&[title="Dateien"], &[title="Files"], &[data-cy-unified-search-filter="current-view"] {
display: none !important;
}

.button-vue__text {
color: var(--color-primary);
}
// Style for filter dropdown buttons (Date, Filter, etc.)
&.action-item__menutoggle {
background-color: var(--nmc-ods-blue-primary);
color: var(--nmc-color-text-and-icon-black);
border-radius: var(--border-radius-element);
border: none;
height: 28px;
min-height: 28px;
padding: 0 12px;
font-weight: bold;
display: flex;
align-items: center;
box-sizing: border-box;
margin-top: 4px;
margin-left: 0px;

&:hover {
background-color: var(--nmc-ods-blue-hover);
}

.button-vue__icon {
&:active {
background-color: var(--nmc-ods-blue-pressed);
}

&[aria-expanded="true"] {
background-color: var(--nmc-ods-blue-active);
}

.material-design-icon {
background-repeat: no-repeat;
background-position: center;
background-size: 24px;
width: 26px;
height: 26px;
filter: var(--nmc-color-icon);
// Hide the left icon
.button-vue__icon {
display: none;
}

.filter-icon {
background-image: var(--icon-filter-dark);
.button-vue__text {
color: var(--nmc-color-text-and-icon-black);
font-size: 0;
display: inline-flex;
align-items: center;

&::before {
content: 'Modified';
font-size: var(--default-font-size);
line-height: 1;
}
}

.calendar-range-icon {
background-image: var(--icon-calendar-dark);
// Add down arrow icon after the wrapper
.button-vue__wrapper {
display: flex;
align-items: center;
gap: 8px;

&::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-left: 1.5px solid var(--nmc-color-text-and-icon-black);
border-bottom: 1.5px solid var(--nmc-color-text-and-icon-black);
transform: rotate(-45deg);
margin-top: -2px;
transition: transform 0.2s ease;
}
}

svg {
display: none;
// Rotate arrow when dropdown is open
&[aria-expanded="true"] .button-vue__wrapper::after {
transform: rotate(135deg);
margin-top: 2px;
}
}
svg {
color: var(--color-primary);
}
}
}

.unified-search-modal__filters-applied {
display: flex;
align-items: center;

.chip {
.icon {
display: none;
}

background: var(--color-background-darker);
border-radius: 2px;
border-radius: var(--border-radius-element);
border: 1px solid transparent;
}
}
Expand All @@ -147,7 +225,11 @@
&__results {
.result {
&-title {
padding-bottom: 8px;
color: var(--nmc-color-text-primary);
font-size: var(--font-size-title-large);
margin-top: 1rem;
margin-bottom: 0px;

span {
color: var(--color-primary-text);
}
Expand Down Expand Up @@ -180,10 +262,29 @@
}
}

&-item__icon {
&.icon-folder,
&--no-preview {
width: 42px;
height: 42px;
background-image: var(--icon-mime-folder-blue) !important;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}

&-footer {
// 'Load more results' button
button {
color: var(--color-primary);
background-color: var(--nmc-ods-blue-primary);
color: var(--nmc-color-text-and-icon-black);
margin-left: 6px;

&:hover {
background-color: var(--colours-shades-accent-shades-accent-subtle);
}

.button-vue__icon {
display: none;
}
Expand All @@ -195,16 +296,24 @@
&__no-content {

.empty-content__icon {
height: 128px;
width: 128px;
height: 318px;
width: 411px;
max-width: 100%;
opacity: 1;

@media screen and (max-width: $breakpoint-mobile-small) {
height: 200px;
width: 258px;
}

.magnify-icon {
background-image: var(--icon-search-dark);
background-size: 128px;
height: 128px;
width: 128px;

background-image: url('../img/decorative_images/cautious-dog-pana.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100%;
width: 100%;

svg {
display: none;
}
Expand All @@ -214,6 +323,7 @@

.empty-content__name {
font-weight: 400;
font-size: var(--default-font-size);
}
}
}
6 changes: 5 additions & 1 deletion css/layouts/modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,11 @@
#body-user .dialog__modal {

.modal-wrapper .modal-container {
padding-block: 8px;
padding: 1.5rem;
}

&#unified-search .modal-container .dialog__name {
margin-block: 0 !important;
}
}

Expand Down
4 changes: 4 additions & 0 deletions css/nmcdefault.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@
--default-font-style-bold: 700 1rem/1 TeleNeoWeb, sans-serif;
--default-font--style-small-bold: 700 0.75rem/1.35 TeleNeoWeb, sans-serif;
--font-size-small: var(--microcopy-regular-font-size);
--font-size-title-large: var(--body-l-font-size);

--animation-quick: 100ms;
--animation-slow: 300ms;
Expand Down Expand Up @@ -148,6 +149,7 @@

--border-width-input: var(--strokes-1);
--border-width-input-focused: var(--strokes-2);
--background-input-hover-focus: var(--mode-shades-neutral-shades-200);

--nmc-color-regular: var(--mode-shades-neutral-shades-500);
--nmc-color-strong: var(--mode-shades-neutral-shades-700);
Expand All @@ -156,6 +158,8 @@
--nmc-color-text-and-icon-link: var(--colours-basic-text-link);
--nmc-color-text-and-icon-black: #000;
--nmc-color-text-and-icon-white: #FFF;
--nmc-color-text-primary: var(--mode-basic-text); //light mode: dark; dark mode: white
--nmc-color-text-on-accent: var(--mode-basic-text-on-accent);//light mode: white; dark mode: dark
--nmc-color-icon: invert(17%) sepia(87%) saturate(5418%) hue-rotate(319deg) brightness(85%) contrast(110%);
--nmc-color-icon-hovered: brightness(0) saturate(100%) invert(11%) sepia(93%) saturate(6579%) hue-rotate(321deg) brightness(71%) contrast(107%);
--nmc-color-sceme: light;
Expand Down
Loading
Loading