diff --git a/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.html index 8c10efcb42e..d2b977ff842 100644 --- a/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.html +++ b/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.html @@ -1,3 +1,9 @@ -
- +
+ + +
+ +
diff --git a/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.scss index 1daf4ebdbc3..444d3a97220 100644 --- a/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.scss +++ b/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.scss @@ -1,7 +1,81 @@ :host { - // The header-navbar-wrapper should not have a z-index, otherwise it would cover the media viewer despite its higher z-index - position: relative; + --ds-header-navbar-border-bottom-style: solid var(--ds-header-navbar-border-bottom-height) var(--ds-header-navbar-border-bottom-color); + --ds-expandable-navbar-border-top-style: solid var(--ds-expandable-navbar-border-top-height) var(--ds-expandable-navbar-border-top-color); + --ds-expandable-navbar-height: calc(100vh - var(--ds-header-height)); + div#header-navbar-wrapper { - border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid; + // The header-navbar-wrapper should not have a z-index, otherwise it would cover the media viewer despite its higher z-index + position: relative; // required by the mobile collapsible navbar + border-bottom: var(--ds-header-navbar-border-bottom-style); // gets covered by mobile navbar wrapper, when open + + div#mobile-navbar-wrapper { + width: 100%; + background-color: var(--ds-expandable-navbar-bg); + position: absolute; + z-index: var(--ds-nav-z-index); + overflow: hidden; + + nav#collapsible-mobile-navbar { + // Following parameters are changed by slideMobileNav animation + min-height: var(--ds-expandable-navbar-height); + height: auto; + border-bottom: var(--ds-header-navbar-border-bottom-style); + } + } + } + + /* MENU ITEMS */ + + ::ng-deep { + .ds-menu-item, .ds-menu-toggler-wrapper { + white-space: nowrap; + text-decoration: none; + } + + nav#desktop-navbar { // in header component + #main-site-navigation { + /* Desktop menu */ + + .ds-menu-item-wrapper, .ds-menu-item, .ds-menu-toggler-wrapper { + // fill navbar height (required by dropdown menus) and center content + display: flex; + align-items: center; + height: 100%; + } + .ds-menu-item { + // define here the style for top-level navbar menu items + padding: var(--ds-navbar-item-vertical-padding) var(--ds-navbar-item-horizontal-padding); + } + .ds-menu-item, .ds-menu-toggler-wrapper { + color: var(--ds-navbar-link-color) !important; + &:hover, &:focus { + color: var(--ds-navbar-link-color-hover) !important; + } + } + + /* desktop submenu */ + + .dropdown-menu { + .ds-menu-item { + // define here the style for second-level navbar menu items + padding: var(--ds-navbar-dropdown-item-vertical-padding) var(--ds-navbar-dropdown-item-horizontal-padding); + } + } + + } + } + + nav#collapsible-mobile-navbar { // in header-navbar-wrapper component + + border-top: var(--ds-expandable-navbar-border-top-style); + padding-top: var(--ds-expandable-navbar-padding-top); + + #main-site-navigation { + .ds-menu-item { + padding: var(--ds-expandable-navbar-item-vertical-padding) 0; + } + } + + } } } diff --git a/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.ts index 36e23e174af..cc9a3d727e8 100644 --- a/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.ts +++ b/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.ts @@ -1,13 +1,26 @@ +import { + AsyncPipe, + NgClass, + NgIf, +} from '@angular/common'; import { Component } from '@angular/core'; +import { TranslateModule } from '@ngx-translate/core'; + +import { ThemedHeaderComponent } from '../../../../app/header/themed-header.component'; import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component'; +import { ThemedNavbarComponent } from '../../../../app/navbar/themed-navbar.component'; +import { slideMobileNav } from '../../../../app/shared/animations/slide'; /** * This component represents a wrapper for the horizontal navbar and the header */ @Component({ - selector: 'ds-header-navbar-wrapper', + selector: 'ds-themed-header-navbar-wrapper', styleUrls: ['header-navbar-wrapper.component.scss'], templateUrl: 'header-navbar-wrapper.component.html', + standalone: true, + imports: [NgClass, ThemedHeaderComponent, ThemedNavbarComponent, AsyncPipe, TranslateModule, NgIf], + animations: [slideMobileNav], }) export class HeaderNavbarWrapperComponent extends BaseComponent { } diff --git a/src/themes/cottagelabs/app/header/header.component.html b/src/themes/cottagelabs/app/header/header.component.html index 9ede52e8e6c..236a785ac1a 100644 --- a/src/themes/cottagelabs/app/header/header.component.html +++ b/src/themes/cottagelabs/app/header/header.component.html @@ -1,26 +1,37 @@ -
- - +
+ diff --git a/src/themes/cottagelabs/app/header/header.component.scss b/src/themes/cottagelabs/app/header/header.component.scss index 2fc857826f9..960c055562a 100644 --- a/src/themes/cottagelabs/app/header/header.component.scss +++ b/src/themes/cottagelabs/app/header/header.component.scss @@ -1,26 +1,32 @@ -@media screen and (min-width: map-get($grid-breakpoints, md)) { - nav.navbar { - display: none; - } - .header { +:host { + #main-site-header { + min-height: var(--ds-header-height); + + @include media-breakpoint-up(md) { + height: var(--ds-header-height); + } + background-color: var(--ds-header-bg); + + &-container { + min-height: var(--ds-header-height); + } } -} -.navbar-brand img { - @media screen and (max-width: map-get($grid-breakpoints, md)) { - height: var(--ds-header-logo-height-xs); + img#header-logo { + height: var(--ds-header-logo-height); } -} -.navbar-toggler .navbar-toggler-icon { - background-image: none !important; - line-height: 1.5; -} -.navbar-toggler { - color: var(--ds-header-icon-color); + img#or-logo { + height: var(--ds-header-logo-height); + } - &:hover, &:focus { - color: var(--ds-header-icon-color-hover); + button#navbar-toggler { + color: var(--ds-header-icon-color); + + &:hover, &:focus { + color: var(--ds-header-icon-color-hover); + } } + } diff --git a/src/themes/cottagelabs/app/header/header.component.ts b/src/themes/cottagelabs/app/header/header.component.ts index 6da89b47d57..19318389231 100644 --- a/src/themes/cottagelabs/app/header/header.component.ts +++ b/src/themes/cottagelabs/app/header/header.component.ts @@ -1,13 +1,39 @@ -import { Component } from '@angular/core'; +import { + AsyncPipe, + NgIf, +} from '@angular/common'; +import { + Component, + OnInit, +} from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; +import { TranslateModule } from '@ngx-translate/core'; +import { Observable } from 'rxjs'; +import { ThemedLangSwitchComponent } from 'src/app/shared/lang-switch/themed-lang-switch.component'; + +import { ContextHelpToggleComponent } from '../../../../app/header/context-help-toggle/context-help-toggle.component'; import { HeaderComponent as BaseComponent } from '../../../../app/header/header.component'; +import { ThemedNavbarComponent } from '../../../../app/navbar/themed-navbar.component'; +import { ThemedSearchNavbarComponent } from '../../../../app/search-navbar/themed-search-navbar.component'; +import { ThemedAuthNavMenuComponent } from '../../../../app/shared/auth-nav-menu/themed-auth-nav-menu.component'; +import { ImpersonateNavbarComponent } from '../../../../app/shared/impersonate-navbar/impersonate-navbar.component'; /** * Represents the header with the logo and simple navigation */ @Component({ - selector: 'ds-header', + selector: 'ds-themed-header', styleUrls: ['header.component.scss'], templateUrl: 'header.component.html', + standalone: true, + imports: [NgbDropdownModule, ThemedLangSwitchComponent, RouterLink, ThemedSearchNavbarComponent, ContextHelpToggleComponent, ThemedAuthNavMenuComponent, ImpersonateNavbarComponent, ThemedNavbarComponent, TranslateModule, AsyncPipe, NgIf], }) -export class HeaderComponent extends BaseComponent { +export class HeaderComponent extends BaseComponent implements OnInit { + public isNavBarCollapsed$: Observable; + + ngOnInit() { + super.ngOnInit(); + this.isNavBarCollapsed$ = this.menuService.isMenuCollapsed(this.menuID); + } } diff --git a/src/themes/cottagelabs/app/home-page/home-news/home-news.component.html b/src/themes/cottagelabs/app/home-page/home-news/home-news.component.html index 0660c81d7ce..4f99e13ef74 100644 --- a/src/themes/cottagelabs/app/home-page/home-news/home-news.component.html +++ b/src/themes/cottagelabs/app/home-page/home-news/home-news.component.html @@ -4,7 +4,7 @@

Comparing three institutional repository software platforms at OR2024

-

DSpace 7.6.1

+

DSpace 8.x

@@ -36,5 +36,5 @@

DISCOVERABILITY

- Photo by @inspiredimages + Photo by @inspiredimages
diff --git a/src/themes/cottagelabs/app/home-page/home-news/home-news.component.ts b/src/themes/cottagelabs/app/home-page/home-news/home-news.component.ts index d4032011dc3..cebea38ee89 100644 --- a/src/themes/cottagelabs/app/home-page/home-news/home-news.component.ts +++ b/src/themes/cottagelabs/app/home-page/home-news/home-news.component.ts @@ -1,10 +1,12 @@ import { Component } from '@angular/core'; + import { HomeNewsComponent as BaseComponent } from '../../../../../app/home-page/home-news/home-news.component'; @Component({ - selector: 'ds-home-news', + selector: 'ds-themed-home-news', styleUrls: ['./home-news.component.scss'], - templateUrl: './home-news.component.html' + templateUrl: './home-news.component.html', + standalone: true, }) /** diff --git a/src/themes/cottagelabs/app/navbar/navbar.component.html b/src/themes/cottagelabs/app/navbar/navbar.component.html index 8fa5abe577a..d828206e7ae 100644 --- a/src/themes/cottagelabs/app/navbar/navbar.component.html +++ b/src/themes/cottagelabs/app/navbar/navbar.component.html @@ -1,31 +1,9 @@ - + + + + diff --git a/src/themes/cottagelabs/app/navbar/navbar.component.scss b/src/themes/cottagelabs/app/navbar/navbar.component.scss index 28ead2f1def..32c65c8c978 100644 --- a/src/themes/cottagelabs/app/navbar/navbar.component.scss +++ b/src/themes/cottagelabs/app/navbar/navbar.component.scss @@ -1,65 +1,3 @@ -nav.navbar { - align-items: baseline; +:host { - .navbar-inner-container { - border-top: 1px var(--ds-header-navbar-border-top-color) solid; - } -} - -.navbar-nav { - background-color: var(--ds-navbar-bg); -} - -/** Mobile menu styling **/ -@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) { - .navbar { - width: 100vw; - background-color: var(--bs-white); - position: absolute; - overflow: hidden; - height: 0; - z-index: var(--ds-nav-z-index); - &.open { - height: 100vh; //doesn't matter because wrapper is sticky - border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border - } - } -} - -@media screen and (min-width: map-get($grid-breakpoints, md)) { - .reset-padding-md { - margin-left: calc(var(--bs-spacer) / -2); - margin-right: calc(var(--bs-spacer) / -2); - } -} - -/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */ -.navbar-expand-md.navbar-container { - @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) { - > .navbar-inner-container { - padding: 0 var(--bs-spacer); - a.navbar-brand { - display: none; - } - .navbar-collapsed { - display: none; - } - } - padding: 0; - } - height: 80px; -} - -a.navbar-brand img { - max-height: var(--ds-header-logo-height); -} - -.navbar-nav { - ::ng-deep a.nav-link { - color: var(--ds-navbar-link-color); - - &:hover, &:focus { - color: var(--ds-navbar-link-color-hover); - } - } } diff --git a/src/themes/cottagelabs/app/navbar/navbar.component.ts b/src/themes/cottagelabs/app/navbar/navbar.component.ts index 321351a933c..5713a161e18 100644 --- a/src/themes/cottagelabs/app/navbar/navbar.component.ts +++ b/src/themes/cottagelabs/app/navbar/navbar.component.ts @@ -1,15 +1,34 @@ +import { + AsyncPipe, + NgClass, + NgComponentOutlet, + NgFor, + NgIf, +} from '@angular/common'; import { Component } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; +import { TranslateModule } from '@ngx-translate/core'; +import { ThemedSearchNavbarComponent } from 'src/app/search-navbar/themed-search-navbar.component'; +import { ThemedLangSwitchComponent } from 'src/app/shared/lang-switch/themed-lang-switch.component'; + +import { ContextHelpToggleComponent } from '../../../../app/header/context-help-toggle/context-help-toggle.component'; import { NavbarComponent as BaseComponent } from '../../../../app/navbar/navbar.component'; import { slideMobileNav } from '../../../../app/shared/animations/slide'; +import { ThemedAuthNavMenuComponent } from '../../../../app/shared/auth-nav-menu/themed-auth-nav-menu.component'; +import { ThemedUserMenuComponent } from '../../../../app/shared/auth-nav-menu/user-menu/themed-user-menu.component'; +import { ImpersonateNavbarComponent } from '../../../../app/shared/impersonate-navbar/impersonate-navbar.component'; /** * Component representing the public navbar */ @Component({ - selector: 'ds-navbar', + selector: 'ds-themed-navbar', styleUrls: ['./navbar.component.scss'], templateUrl: './navbar.component.html', - animations: [slideMobileNav] + animations: [slideMobileNav], + standalone: true, + imports: [NgbDropdownModule, ThemedLangSwitchComponent, ThemedSearchNavbarComponent, NgClass, RouterLink, NgIf, NgFor, NgComponentOutlet, ContextHelpToggleComponent, ThemedAuthNavMenuComponent, ImpersonateNavbarComponent, AsyncPipe, TranslateModule, ThemedUserMenuComponent], }) export class NavbarComponent extends BaseComponent { } diff --git a/src/themes/cottagelabs/assets/images/clarion_hotel_cropped.jpg b/src/themes/cottagelabs/assets/images/clarion_hotel_cropped.jpg deleted file mode 100644 index 35249ff5be9..00000000000 Binary files a/src/themes/cottagelabs/assets/images/clarion_hotel_cropped.jpg and /dev/null differ diff --git a/src/themes/cottagelabs/assets/images/or20xx-2.jpg b/src/themes/cottagelabs/assets/images/or20xx-2.jpg deleted file mode 100644 index 08a4f3314fc..00000000000 Binary files a/src/themes/cottagelabs/assets/images/or20xx-2.jpg and /dev/null differ diff --git a/src/themes/cottagelabs/eager-theme.module.ts b/src/themes/cottagelabs/eager-theme.module.ts index 63dff9da317..233b08c62ce 100644 --- a/src/themes/cottagelabs/eager-theme.module.ts +++ b/src/themes/cottagelabs/eager-theme.module.ts @@ -1,14 +1,11 @@ -import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { SharedModule } from '../../app/shared/shared.module'; -import { HomeNewsComponent } from './app/home-page/home-news/home-news.component'; -import { NavbarComponent } from './app/navbar/navbar.component'; +import { NgModule } from '@angular/core'; + +import { RootModule } from '../../app/root.module'; import { HeaderComponent } from './app/header/header.component'; import { HeaderNavbarWrapperComponent } from './app/header-nav-wrapper/header-navbar-wrapper.component'; -import { RootModule } from '../../app/root.module'; -import { NavbarModule } from '../../app/navbar/navbar.module'; -import { SharedBrowseByModule } from '../../app/shared/browse-by/shared-browse-by.module'; -import { ResultsBackButtonModule } from '../../app/shared/results-back-button/results-back-button.module'; +import { HomeNewsComponent } from './app/home-page/home-news/home-news.component'; +import { NavbarComponent } from './app/navbar/navbar.component'; /** * Add components that use a custom decorator to ENTRY_COMPONENTS as well as DECLARATIONS. @@ -27,15 +24,11 @@ const DECLARATIONS = [ @NgModule({ imports: [ CommonModule, - SharedModule, - SharedBrowseByModule, - ResultsBackButtonModule, RootModule, - NavbarModule, + ...DECLARATIONS, ], - declarations: DECLARATIONS, providers: [ - ...ENTRY_COMPONENTS.map((component) => ({provide: component})) + ...ENTRY_COMPONENTS.map((component) => ({ provide: component })), ], }) /** diff --git a/src/themes/cottagelabs/lazy-theme.module.ts b/src/themes/cottagelabs/lazy-theme.module.ts index cdaae815ada..9d26b195362 100644 --- a/src/themes/cottagelabs/lazy-theme.module.ts +++ b/src/themes/cottagelabs/lazy-theme.module.ts @@ -1,122 +1,34 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { AdminRegistriesModule } from '../../app/admin/admin-registries/admin-registries.module'; -import { AdminSearchModule } from '../../app/admin/admin-search-page/admin-search.module'; -import { - AdminWorkflowModuleModule -} from '../../app/admin/admin-workflow-page/admin-workflow.module'; -import { - BitstreamFormatsModule -} from '../../app/admin/admin-registries/bitstream-formats/bitstream-formats.module'; -import { BrowseByModule } from '../../app/browse-by/browse-by.module'; -import { - CollectionFormModule -} from '../../app/collection-page/collection-form/collection-form.module'; -import { CommunityFormModule } from '../../app/community-page/community-form/community-form.module'; -import { CoreModule } from '../../app/core/core.module'; import { DragDropModule } from '@angular/cdk/drag-drop'; -import { EditItemPageModule } from '../../app/item-page/edit-item-page/edit-item-page.module'; -import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; -import { IdlePreloadModule } from 'angular-idle-preload'; -import { - JournalEntitiesModule -} from '../../app/entity-groups/journal-entities/journal-entities.module'; -import { MyDspaceSearchModule } from '../../app/my-dspace-page/my-dspace-search.module'; -import { MenuModule } from '../../app/shared/menu/menu.module'; -import { NavbarModule } from '../../app/navbar/navbar.module'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { RouterModule } from '@angular/router'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; -import { ProfilePageModule } from '../../app/profile-page/profile-page.module'; -import { RegisterEmailFormModule } from '../../app/register-email-form/register-email-form.module'; -import { - ResearchEntitiesModule -} from '../../app/entity-groups/research-entities/research-entities.module'; -import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to'; -import { SearchPageModule } from '../../app/search-page/search-page.module'; -import { SharedModule } from '../../app/shared/shared.module'; -import { StatisticsModule } from '../../app/statistics/statistics.module'; -import { StoreModule } from '@ngrx/store'; import { StoreRouterConnectingModule } from '@ngrx/router-store'; +import { StoreModule } from '@ngrx/store'; import { TranslateModule } from '@ngx-translate/core'; -import { HomePageModule } from '../../app/home-page/home-page.module'; -import { AppModule } from '../../app/app.module'; -import { ItemPageModule } from '../../app/item-page/item-page.module'; -import { RouterModule } from '@angular/router'; -import { CommunityListPageModule } from '../../app/community-list-page/community-list-page.module'; -import { InfoModule } from '../../app/info/info.module'; -import { StatisticsPageModule } from '../../app/statistics-page/statistics-page.module'; -import { CommunityPageModule } from '../../app/community-page/community-page.module'; -import { CollectionPageModule } from '../../app/collection-page/collection-page.module'; -import { SubmissionModule } from '../../app/submission/submission.module'; -import { MyDSpacePageModule } from '../../app/my-dspace-page/my-dspace-page.module'; -import { SearchModule } from '../../app/shared/search/search.module'; -import { - ResourcePoliciesModule -} from '../../app/shared/resource-policies/resource-policies.module'; -import { ComcolModule } from '../../app/shared/comcol/comcol.module'; +import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to'; + import { RootModule } from '../../app/root.module'; -import { BrowseByPageModule } from '../../app/browse-by/browse-by-page.module'; -import { ResultsBackButtonModule } from '../../app/shared/results-back-button/results-back-button.module'; -import { SharedBrowseByModule } from '../../app/shared/browse-by/shared-browse-by.module'; -import { ItemVersionsModule } from '../../app/item-page/versions/item-versions.module'; -import { ItemSharedModule } from 'src/app/item-page/item-shared.module'; const DECLARATIONS = [ ]; @NgModule({ imports: [ - AdminRegistriesModule, - AdminSearchModule, - AdminWorkflowModuleModule, - AppModule, RootModule, - BitstreamFormatsModule, - BrowseByModule, - BrowseByPageModule, - ResultsBackButtonModule, - CollectionFormModule, - CollectionPageModule, CommonModule, - CommunityFormModule, - CommunityListPageModule, - CommunityPageModule, - CoreModule, DragDropModule, - ItemSharedModule, - ItemPageModule, - EditItemPageModule, - ItemVersionsModule, FormsModule, - HomePageModule, HttpClientModule, - IdlePreloadModule, - InfoModule, - JournalEntitiesModule, - MenuModule, - MyDspaceSearchModule, - NavbarModule, NgbModule, - ProfilePageModule, - RegisterEmailFormModule, - ResearchEntitiesModule, RouterModule, ScrollToModule, - SearchPageModule, - SharedModule, - SharedBrowseByModule, - StatisticsModule, - StatisticsPageModule, StoreModule, StoreRouterConnectingModule, TranslateModule, - SubmissionModule, - MyDSpacePageModule, - MyDspaceSearchModule, - SearchModule, FormsModule, - ResourcePoliciesModule, - ComcolModule, ], declarations: DECLARATIONS, }) diff --git a/src/themes/cottagelabs/styles/_global-styles.scss b/src/themes/cottagelabs/styles/_global-styles.scss index 5bd4c19bc04..d2258193269 100644 --- a/src/themes/cottagelabs/styles/_global-styles.scss +++ b/src/themes/cottagelabs/styles/_global-styles.scss @@ -3,7 +3,7 @@ // imports the base global style @import '../../../styles/_global-styles.scss'; -.facet-filter, .setting-option { +.facet-filter, .setting-option, .advanced-search { background-color: var(--bs-light); border-radius: var(--bs-border-radius); @@ -17,7 +17,7 @@ background-color: var(--bs-primary); } - h4 { + h4, .h4 { font-size: 1.1rem } } diff --git a/src/themes/cottagelabs/styles/_theme_css_variable_overrides.scss b/src/themes/cottagelabs/styles/_theme_css_variable_overrides.scss index 516eff9f7e9..63a5535d958 100644 --- a/src/themes/cottagelabs/styles/_theme_css_variable_overrides.scss +++ b/src/themes/cottagelabs/styles/_theme_css_variable_overrides.scss @@ -1,11 +1,28 @@ // Override or add CSS variables for your theme here :root { - --ds-header-logo-height: 40px; + + @include media-breakpoint-up(md) { + --ds-header-logo-height: 40px; + --ds-header-height: 80px; + } + @include media-breakpoint-down(sm) { + --ds-header-logo-height: 50px; + --ds-header-height: 90px; + } + --ds-banner-text-background: rgba(0, 0, 0, 0.45); --ds-banner-background-gradient-width: 300px; - --ds-home-news-link-color: #{$green}; - --ds-home-news-link-hover-color: #{darken($green, 15%)}; - --ds-header-navbar-border-bottom-color: #{$green}; + + --ds-header-navbar-border-bottom-height: 5px; + + /* set the next two properties as `--ds-header-navbar-border-bottom-*` + in order to keep the bottom border of the header when navbar is expanded */ + --ds-expandable-navbar-border-top-color: #{$white}; + --ds-expandable-navbar-border-top-height: 0; + --ds-expandable-navbar-padding-top: 0; + + --ds-item-page-img-field-default-inline-height: 24px; + --ds-item-page-img-field-ror-inline-height: var(--ds-item-page-img-field-default-inline-height); } diff --git a/src/themes/cottagelabs/styles/_theme_sass_variable_overrides.scss b/src/themes/cottagelabs/styles/_theme_sass_variable_overrides.scss index b5799c97496..a9231d37e52 100644 --- a/src/themes/cottagelabs/styles/_theme_sass_variable_overrides.scss +++ b/src/themes/cottagelabs/styles/_theme_sass_variable_overrides.scss @@ -1,41 +1,90 @@ // DSpace works with CSS variables for its own components, and has a mapping of all bootstrap Sass // variables to CSS equivalents (see src/styles/_bootstrap_variables_mapping.scss). However Bootstrap -// still uses Sass variables internally. So if you want to override bootstrap (or other sass -// variables) you can do so here. Their CSS counterparts will include the changes you make here +// still uses Sass variables internally. So if you want to override Bootstrap (or other sass +// variables) you can do so here. Their CSS counterparts will include the changes you make here. + +// When this file is going to be compiled, internal Bootstrap variables won't have been declared yet, +// therefore if you want to use any Bootstrap variable you also need to declare it here. + +// All SASS variables from the base theme are also included here. Do not use the '!default' flag +// here if you want to override them. + + +/*** FONT FAMILIES ***/ @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600;1,700;1,800&display=swap'); $font-family-sans-serif: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -$navbar-dark-color: #FFFFFF; -/* Reassign color vars to semantic color scheme */ -$blue: #2b4e72 !default; -$green: #92C642 !default; -$cyan: #207698 !default; -$yellow: #ec9433 !default; -$red: #CF4444 !default; -$dark: #43515f !default; +/*** SEMANTIC COLOR SCHEME ***/ -$gray-800: #343a40 !default; -$gray-700: #495057 !default; -$gray-400: #ced4da !default; -$gray-100: #f8f9fa !default; +// Gray scale (uncomment the variables that you want to override or that you need to use in this file) +//$white: #fff; +//$gray-100: #f8f9fa; +//$gray-200: #e9ecef; +//$gray-300: #dee2e6; +//$gray-400: #ced4da; +//$gray-500: #adb5bd; +//$gray-600: #6c757d; +//$gray-700: #495057; +//$gray-800: #343a40; +//$gray-900: #212529; +//$black: #000; -$body-color: $gray-800 !default; // Bootstrap $gray-800 +// Other colors (uncomment the variables that you want to override or that you need to use in this file) +//$blue: #007bff !default; +//$indigo: #6610f2 !default; +//$purple: #6f42c1 !default; +//$pink: #e83e8c !default; +//$red: #dc3545 !default; +//$orange: #fd7e14 !default; +//$yellow: #ffc107 !default; +//$green: #28a745 !default; +//$teal: #20c997 !default; +//$cyan: #17a2b8 !default; -$table-accent-bg: $gray-100 !default; // Bootstrap $gray-100 -$table-hover-bg: $gray-400 !default; // Bootstrap $gray-400 +// Define or override other colors here +// ... -$yiq-contrasted-threshold: 170 !default; +// Override semantic colors here +$primary: #43515f; // Gray +$secondary: #495057; // As Bootstrap $gray-700 +$success: #92c642; // Lime +$info: #1e6f90; // Light blue +$warning: #ec9433; // Orange +$danger: #cf4444; // Red +$light: #f8f9fa; // As Bootstrap $gray-100 +$dark: #43515f; // Gray +// Add new semantic colors here (you don't need to add existing semantic colors) $theme-colors: ( - primary: $dark, - secondary: $gray-700, - success: $green, - info: $cyan, - warning: $yellow, - danger: $red, - light: $gray-100, - dark: $dark -) !default; + // ... +); + + +/*** OTHER BOOTSTRAP VARIABLES ***/ + +// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. +$yiq-contrasted-threshold: 170; + +$body-color: #343a40; // As Bootstrap $gray-800 + +$link-color: #1e6f90; // Blue green, as DSpace $info +$link-decoration: none; +$link-hover-color: darken($link-color, 15%); +$link-hover-decoration: underline; + +$table-accent-bg: #f8f9fa; // As Bootstrap $gray-100 +$table-hover-bg: #ced4da; // As Bootstrap $gray-400 + +$navbar-dark-color: #fff; + + +/*** CUSTOM DSPACE VARIABLES ***/ + +$ds-home-news-link-color: #92c642; +$ds-header-navbar-border-bottom-color: #92c642; + +$ds-breadcrumb-link-color: #154E66 !default; +$ds-breadcrumb-link-active-color: #040D11 !default;