Skip to content

Commit c1653b3

Browse files
FrancescoMolinaroFrancescoMolinaro
committed
[DSC-1864] align scss variables
1 parent a984e84 commit c1653b3

7 files changed

Lines changed: 140 additions & 142 deletions

File tree

‎src/app/shared/menu/menu-item/link-menu-item.component.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
<a class="ds-menu-item" role="menuitem"
1+
2+
<a class="nav-item nav-link"
23
[ngClass]="{ 'disabled': !hasLink || item.disabled }"
34
[attr.aria-disabled]="!hasLink || item.disabled"
45
[attr.data-test]="'link-menu-item.'+item.text"

‎src/themes/dspace/app/header/header.component.html‎

Lines changed: 18 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,25 @@
1-
<header id="main-site-header">
2-
<div class="container h-100 d-flex flex-row flex-wrap align-items-center justify-content-between gapx-3 gapy-2" id="main-site-header-container">
3-
<!-- Logo and navbar wrapper -->
4-
<div id="header-left"
5-
[attr.role]="(isMobile$ | async) ? 'navigation' : 'presentation'"
6-
[attr.aria-label]="(isMobile$ | async) ? ('nav.main.description' | translate) : null"
7-
class="h-100 flex-fill d-flex flex-row flex-nowrap justify-content-start align-items-center gapx-3">
8-
<a class="d-block my-2 my-md-0" routerLink="/home" [attr.aria-label]="'home.title' | translate">
9-
<img id="header-logo" src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
1+
<header class="header">
2+
<nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="container navbar navbar-expand-md px-0">
3+
<div class="d-flex flex-grow-1">
4+
<a class="navbar-brand m-2" routerLink="/home">
5+
<img src="assets/images/dspace-cris-logo.png" [attr.alt]="'menu.header.image.logo' | translate"/>
106
</a>
11-
<nav *ngIf="!(isMobile$ | async)" class="navbar navbar-expand p-0 align-items-stretch align-self-stretch" id="desktop-navbar" [attr.aria-label]="'nav.main.description' | translate">
12-
<ds-themed-navbar></ds-themed-navbar>
13-
</nav>
147
</div>
15-
<!-- Search bar and other menus -->
16-
<div id="header-right" class="h-100 d-flex flex-row flex-nowrap justify-content-end align-items-center gapx-1 ml-auto">
8+
<div class="navbar-buttons d-flex flex-grow-1 ml-auto justify-content-end align-items-center gapx-1">
179
<ds-themed-search-navbar></ds-themed-search-navbar>
18-
<div role="menubar" class="h-100 d-flex flex-row flex-nowrap align-items-center gapx-1">
19-
<ds-themed-lang-switch></ds-themed-lang-switch>
20-
<ds-context-help-toggle></ds-context-help-toggle>
21-
<ds-impersonate-navbar></ds-impersonate-navbar>
22-
<ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
23-
</div>
24-
25-
<div id="mobile-navbar-toggler" class="d-block d-lg-none ml-3" *ngIf="(isMobile$ | async)">
26-
<button id="navbar-toggler" class="btn" type="button" (click)="toggleNavbar()"
27-
[attr.aria-label]="'nav.toggle' | translate" aria-controls="collapsible-mobile-navbar" [attr.aria-expanded]="!(isNavBarCollapsed$ | async)">
28-
<span class="fas fa-bars fa-fw fa-xl toggler-icon" aria-hidden="true"></span>
10+
<ds-themed-lang-switch></ds-themed-lang-switch>
11+
<ds-context-help-toggle></ds-context-help-toggle>
12+
<ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
13+
<ds-impersonate-navbar></ds-impersonate-navbar>
14+
<div class="pl-2">
15+
<button class="navbar-toggler" type="button" (click)="toggleNavbar()"
16+
aria-controls="collapsingNav"
17+
aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
18+
<span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
2919
</button>
3020
</div>
31-
3221
</div>
33-
</div>
22+
</nav>
23+
<ds-themed-navbar></ds-themed-navbar>
24+
3425
</header>

‎src/themes/dspace/app/header/header.component.scss‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
1-
:host {
2-
#main-site-header {
3-
min-height: var(--ds-header-height);
4-
5-
@include media-breakpoint-up(md) {
6-
height: var(--ds-header-height);
7-
}
8-
1+
@media screen and (min-width: map-get($grid-breakpoints, md)) {
2+
nav.navbar {
3+
display: none;
4+
}
5+
.header {
96
background-color: var(--ds-header-bg);
10-
11-
&-container {
12-
min-height: var(--ds-header-height);
13-
}
147
}
8+
}
159

16-
img#header-logo {
17-
height: var(--ds-header-logo-height);
10+
.navbar-brand img {
11+
@media screen and (max-width: map-get($grid-breakpoints, md)) {
12+
height: var(--ds-header-logo-height-xs);
1813
}
14+
}
15+
.navbar-toggler .navbar-toggler-icon {
16+
background-image: none !important;
17+
line-height: 1.5;
18+
}
1919

20-
button#navbar-toggler {
21-
color: var(--ds-header-icon-color);
20+
.navbar-toggler {
21+
color: var(--ds-header-icon-color);
2222

23-
&:hover, &:focus {
24-
color: var(--ds-header-icon-color-hover);
25-
}
23+
&:hover, &:focus {
24+
color: var(--ds-header-icon-color-hover);
2625
}
27-
2826
}

‎src/themes/dspace/app/navbar/navbar.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</a>
77

88
<div id="collapsingNav" class="w-100 h-100">
9-
<ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100">
9+
<ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100 align-items-center">
1010
<li *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
1111
<ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
1212
</li>

‎src/themes/dspace/app/navbar/navbar.component.scss‎

Lines changed: 69 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,71 @@
1-
:host {
1+
nav.navbar {
2+
align-items: baseline;
23

4+
.navbar-inner-container {
5+
border-top: 1px var(--ds-header-navbar-border-top-color) solid;
6+
}
37
}
8+
9+
.navbar-nav {
10+
background-color: var(--ds-navbar-bg);
11+
}
12+
13+
/** Mobile menu styling **/
14+
@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
15+
.navbar {
16+
width: 100vw;
17+
background-color: var(--bs-white);
18+
position: absolute;
19+
overflow: hidden;
20+
height: 0;
21+
z-index: var(--ds-nav-z-index);
22+
&.open {
23+
height: 100vh; //doesn't matter because wrapper is sticky
24+
border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
25+
}
26+
}
27+
}
28+
29+
@media screen and (min-width: map-get($grid-breakpoints, md)) {
30+
.reset-padding-md {
31+
margin-left: calc(var(--bs-spacer) / -2);
32+
margin-right: calc(var(--bs-spacer) / -2);
33+
}
34+
35+
.navbar-nav .nav-link {
36+
padding-right: .5rem;
37+
padding-left: .5rem
38+
}
39+
}
40+
41+
/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
42+
.navbar-expand-md.navbar-container {
43+
@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
44+
> .navbar-inner-container {
45+
padding: 0 var(--bs-spacer);
46+
a.navbar-brand {
47+
display: none;
48+
}
49+
.navbar-collapsed {
50+
display: none;
51+
}
52+
}
53+
padding: 0;
54+
}
55+
height: 80px;
56+
}
57+
58+
a.navbar-brand img {
59+
max-height: var(--ds-header-logo-height);
60+
}
61+
62+
.navbar-nav {
63+
::ng-deep a.nav-link {
64+
color: var(--ds-navbar-link-color);
65+
66+
&:hover, &:focus {
67+
color: var(--ds-navbar-link-color-hover);
68+
}
69+
}
70+
}
71+

‎src/themes/dspace/styles/_theme_css_variable_overrides.scss‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,13 @@
11
// Override or add CSS variables for your theme here
22

33
:root {
4-
5-
@include media-breakpoint-up(md) {
6-
--ds-header-logo-height: 40px;
7-
--ds-header-height: 80px;
8-
}
9-
@include media-breakpoint-down(sm) {
10-
--ds-header-logo-height: 50px;
11-
--ds-header-height: 90px;
12-
}
13-
4+
--ds-header-logo-height: 40px;
145
--ds-banner-text-background: rgba(0, 0, 0, 0.45);
156
--ds-banner-background-gradient-width: 300px;
16-
7+
--ds-home-news-link-color: #{$green};
8+
--ds-home-news-link-hover-color: #{darken($green, 15%)};
9+
--ds-header-navbar-border-bottom-color: #{$green};
1710
--ds-header-navbar-border-bottom-height: 5px;
1811

19-
/* set the next two properties as `--ds-header-navbar-border-bottom-*`
20-
in order to keep the bottom border of the header when navbar is expanded */
21-
--ds-expandable-navbar-border-top-color: #{$white};
22-
--ds-expandable-navbar-border-top-height: 0;
23-
--ds-expandable-navbar-padding-top: 0;
2412
}
13+

‎src/themes/dspace/styles/_theme_sass_variable_overrides.scss‎

Lines changed: 27 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,41 @@
11
// DSpace works with CSS variables for its own components, and has a mapping of all bootstrap Sass
22
// variables to CSS equivalents (see src/styles/_bootstrap_variables_mapping.scss). However Bootstrap
3-
// still uses Sass variables internally. So if you want to override Bootstrap (or other sass
4-
// variables) you can do so here. Their CSS counterparts will include the changes you make here.
5-
6-
// When this file is going to be compiled, internal Bootstrap variables won't have been declared yet,
7-
// therefore if you want to use any Bootstrap variable you also need to declare it here.
8-
9-
// All SASS variables from the base theme are also included here. Do not use the '!default' flag
10-
// here if you want to override them.
11-
12-
13-
/*** FONT FAMILIES ***/
3+
// still uses Sass variables internally. So if you want to override bootstrap (or other sass
4+
// variables) you can do so here. Their CSS counterparts will include the changes you make here
145

156
@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');
167

178
$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";
189

10+
$navbar-dark-color: #FFFFFF;
1911

20-
/*** SEMANTIC COLOR SCHEME ***/
12+
/* Reassign color vars to semantic color scheme */
13+
$blue: #2b4e72 !default;
14+
$green: #92C642 !default;
15+
$cyan: #207698 !default;
16+
$yellow: #ec9433 !default;
17+
$red: #CF4444 !default;
18+
$dark: #43515f !default;
2119

22-
// Gray scale (uncomment the variables that you want to override or that you need to use in this file)
23-
//$white: #fff;
24-
//$gray-100: #f8f9fa;
25-
//$gray-200: #e9ecef;
26-
//$gray-300: #dee2e6;
27-
//$gray-400: #ced4da;
28-
//$gray-500: #adb5bd;
29-
//$gray-600: #6c757d;
30-
//$gray-700: #495057;
31-
//$gray-800: #343a40;
32-
//$gray-900: #212529;
33-
//$black: #000;
20+
$gray-800: #343a40 !default;
21+
$gray-700: #495057 !default;
22+
$gray-400: #ced4da !default;
23+
$gray-100: #f8f9fa !default;
3424

35-
// Other colors (uncomment the variables that you want to override or that you need to use in this file)
36-
//$blue: #007bff !default;
37-
//$indigo: #6610f2 !default;
38-
//$purple: #6f42c1 !default;
39-
//$pink: #e83e8c !default;
40-
//$red: #dc3545 !default;
41-
//$orange: #fd7e14 !default;
42-
//$yellow: #ffc107 !default;
43-
//$green: #28a745 !default;
44-
//$teal: #20c997 !default;
45-
//$cyan: #17a2b8 !default;
25+
$body-color: $gray-800 !default; // Bootstrap $gray-800
4626

47-
// Define or override other colors here
48-
// ...
27+
$table-accent-bg: $gray-100 !default; // Bootstrap $gray-100
28+
$table-hover-bg: $gray-400 !default; // Bootstrap $gray-400
4929

50-
// Override semantic colors here
51-
$primary: #43515f; // Gray
52-
$secondary: #495057; // As Bootstrap $gray-700
53-
$success: #92c642; // Lime
54-
$info: #207698; // Light blue
55-
$warning: #ec9433; // Orange
56-
$danger: #cf4444; // Red
57-
$light: #f8f9fa; // As Bootstrap $gray-100
58-
$dark: #43515f; // Gray
30+
$yiq-contrasted-threshold: 170 !default;
5931

60-
// Add new semantic colors here (you don't need to add existing semantic colors)
6132
$theme-colors: (
62-
// ...
63-
);
64-
65-
66-
/*** OTHER BOOTSTRAP VARIABLES ***/
67-
68-
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
69-
$yiq-contrasted-threshold: 170;
70-
71-
$body-color: #343a40; // As Bootstrap $gray-800
72-
73-
$link-color: #207698; // Blue green, as DSpace $info
74-
$link-decoration: none;
75-
$link-hover-color: darken($link-color, 15%);
76-
$link-hover-decoration: underline;
77-
78-
$table-accent-bg: #f8f9fa; // As Bootstrap $gray-100
79-
$table-hover-bg: #ced4da; // As Bootstrap $gray-400
80-
81-
$navbar-dark-color: #fff;
82-
83-
84-
/*** CUSTOM DSPACE VARIABLES ***/
85-
86-
$ds-home-news-link-color: #92c642;
87-
$ds-header-navbar-border-bottom-color: #92c642;
88-
89-
$ds-breadcrumb-link-color: #154E66 !default;
90-
$ds-breadcrumb-link-active-color: #040D11 !default;
33+
primary: $dark,
34+
secondary: $gray-700,
35+
success: $green,
36+
info: $cyan,
37+
warning: $yellow,
38+
danger: $red,
39+
light: $gray-100,
40+
dark: $dark
41+
) !default;

0 commit comments

Comments
 (0)