-
Notifications
You must be signed in to change notification settings - Fork 438
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[DURACOM-195] [DURACOM-210] Reorder SCSS and CSS theme variables
- Loading branch information
1 parent
2165581
commit b8ec74a
Showing
5 changed files
with
187 additions
and
119 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
100 changes: 73 additions & 27 deletions
100
src/themes/dspace/styles/_theme_sass_variable_overrides.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,87 @@ | ||
| // 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 | ||
| // Override semantic colors here | ||
| $primary: #43515f; // Gray | ||
| $secondary: #495057; // As Bootstrap $gray-700 | ||
| $success: #92c642; // Lime | ||
| $info: #207698; // Light blue | ||
| $warning: #ec9433; // Orange | ||
| $danger: #cf4444; // Red | ||
| $light: #f8f9fa; // As Bootstrap $gray-100 | ||
| $dark: #43515f; // Dark blue | ||
|
|
||
| $yiq-contrasted-threshold: 170 !default; | ||
| // Define or override other colors here | ||
| // ... | ||
|
|
||
| // 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: #207698; // 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; |