diff --git a/Gemfile b/Gemfile index efc51648f1..4845e2279e 100644 --- a/Gemfile +++ b/Gemfile @@ -245,7 +245,8 @@ group :development do gem 'faker' gem 'letter_opener' - gem 'livingstyleguide', '~> 2.1.0' + # Todo for task #33508 + #gem 'livingstyleguide', '~> 2.1.0' gem 'spring' gem 'spring-commands-rspec' diff --git a/app/assets/stylesheets/openproject.sass b/app/assets/stylesheets/openproject.sass index 9941b6b636..b93f7ccb22 100644 --- a/app/assets/stylesheets/openproject.sass +++ b/app/assets/stylesheets/openproject.sass @@ -26,7 +26,7 @@ * See docs/COPYRIGHT.rdoc for more details. ++ */ -// ToDo +// Todo for task #33508 // Enable asset pipeline for Bourbon mixins (e.g. +font-face) // @see http://bourbon.io/docs/#asset-pipeline diff --git a/app/assets/stylesheets/styleguide.html.lsg b/app/assets/stylesheets/styleguide.html.lsg index 61b3adbfc2..21d33cfb58 100644 --- a/app/assets/stylesheets/styleguide.html.lsg +++ b/app/assets/stylesheets/styleguide.html.lsg @@ -1,6 +1,6 @@ @require sassc -@sass ../../frontend/src/global_styles/openproject.sass +@sass ../../../frontend/src/global_styles/openproject.sass @title "Living Style Guide for OpenProject" @style base-font: Lato diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb index 81fa62c559..b6c887aac4 100644 --- a/app/views/layouts/base.html.erb +++ b/app/views/layouts/base.html.erb @@ -71,7 +71,6 @@ See docs/COPYRIGHT.rdoc for more details. <%= call_hook :view_layouts_base_html_meta %> <%= render 'common/favicons' %> - <%= stylesheet_link_tag 'openproject', media: "all" %> <%# Include CLI assets (development) or prod build assets %> <%= include_frontend_assets %> diff --git a/app/views/layouts/only_logo.html.erb b/app/views/layouts/only_logo.html.erb index cefbe2c3b5..010aba47ea 100644 --- a/app/views/layouts/only_logo.html.erb +++ b/app/views/layouts/only_logo.html.erb @@ -37,7 +37,6 @@ See docs/COPYRIGHT.rdoc for more details. <%= output_title_and_meta_tags %> <%= csrf_meta_tags %> <%= render 'common/favicons' %> - <%= stylesheet_link_tag 'openproject', media: "all" %>
diff --git a/frontend/src/global_styles/content/_accounts.sass b/frontend/src/global_styles/content/_accounts.sass index 77d0e4b5d4..e3493f03fd 100644 --- a/frontend/src/global_styles/content/_accounts.sass +++ b/frontend/src/global_styles/content/_accounts.sass @@ -96,7 +96,8 @@ padding: 0.5rem 0.5rem 0.5rem 2rem margin-left: 10px margin-bottom: 10px - background-image: image-url('auth_provider-developer.png') + // Todo for task #33508 + //background-image: image-url('auth_provider-developer.png') background-size: 20px 20px background-repeat: no-repeat background-position: 5px center diff --git a/frontend/src/global_styles/content/_ajax_indicator.sass b/frontend/src/global_styles/content/_ajax_indicator.sass index 860fb57517..34eb0a0b47 100644 --- a/frontend/src/global_styles/content/_ajax_indicator.sass +++ b/frontend/src/global_styles/content/_ajax_indicator.sass @@ -48,7 +48,8 @@ html > body #ajax-indicator #ajax-indicator span, .ajax-indicator background-position: 0% 40% background-repeat: no-repeat - background-image: image-url("loading.gif") + // Todo for task #33508 + //background-image: image-url("loading.gif") padding-left: 26px vertical-align: bottom diff --git a/frontend/src/global_styles/content/_preview.sass b/frontend/src/global_styles/content/_preview.sass index 1f9f303c28..2859681030 100644 --- a/frontend/src/global_styles/content/_preview.sass +++ b/frontend/src/global_styles/content/_preview.sass @@ -29,7 +29,8 @@ .preview @extend %form--fieldset-or-section padding: 1rem - background: image-url('draft.png') + // Todo for task #33508 + //background: image-url('draft.png') // Min-width has to be defined to avoid a content overflow // of the preview window. Since this class is also applied to the buttons // it should however not be too large. diff --git a/frontend/src/global_styles/fonts/_lato.sass b/frontend/src/global_styles/fonts/_lato.sass index 4651a9ea57..15cabd4a76 100644 --- a/frontend/src/global_styles/fonts/_lato.sass +++ b/frontend/src/global_styles/fonts/_lato.sass @@ -28,17 +28,17 @@ $lato-file-formats: ("woff" "woff2") -+font-face(LatoLight, 'lato/Lato-Light', $file-formats: $lato-file-formats) -+font-face(LatoLight, 'lato/Lato-LightItalic', $file-formats: $lato-file-formats) ++font-face(LatoLight, 'assets/fonts/lato/Lato-Light', $file-formats: $lato-file-formats) ++font-face(LatoLight, 'assets/fonts/lato/Lato-LightItalic', $file-formats: $lato-file-formats) font-style: italic -+font-face(Lato, 'lato/Lato-Regular', $file-formats: $lato-file-formats) -+font-face(Lato, 'lato/Lato-Italic', $file-formats: $lato-file-formats) ++font-face(Lato, 'assets/fonts/lato/Lato-Regular', $file-formats: $lato-file-formats) ++font-face(Lato, 'assets/fonts/lato/Lato-Italic', $file-formats: $lato-file-formats) font-style: italic -+font-face(Lato, 'lato/Lato-Bold', $file-formats: $lato-file-formats) ++font-face(Lato, 'assets/fonts/lato/Lato-Bold', $file-formats: $lato-file-formats) font-weight: bold -+font-face(Lato, 'lato/Lato-BoldItalic', $file-formats: $lato-file-formats) ++font-face(Lato, 'assets/fonts/lato/Lato-BoldItalic', $file-formats: $lato-file-formats) font-weight: bold font-style: italic diff --git a/frontend/src/global_styles/layout/_breadcrumb.sass b/frontend/src/global_styles/layout/_breadcrumb.sass index 42083613a8..160d8787c2 100644 --- a/frontend/src/global_styles/layout/_breadcrumb.sass +++ b/frontend/src/global_styles/layout/_breadcrumb.sass @@ -39,7 +39,6 @@ @include varprop(background-color, body-background) border: none width: auto - overflow: hidden position: relative &.nosidebar // 7px of the icon to align breadcrumb with content diff --git a/frontend/src/global_styles/openproject.sass b/frontend/src/global_styles/openproject.sass new file mode 100644 index 0000000000..dc3ddd966f --- /dev/null +++ b/frontend/src/global_styles/openproject.sass @@ -0,0 +1,5 @@ +@import "fonts/_index.sass" +@import "openproject/_index.sass" +@import "vendor/_index.sass" +@import "layout/_index.sass" +@import "content/_index.sass" \ No newline at end of file diff --git a/frontend/src/global_styles/openproject/_index.sass b/frontend/src/global_styles/openproject/_index.sass index 2bf3635505..832c75438b 100644 --- a/frontend/src/global_styles/openproject/_index.sass +++ b/frontend/src/global_styles/openproject/_index.sass @@ -10,5 +10,5 @@ @import scm // allow plugins to hook into global assets -// ToDo +// Todo for task #33508 // @import openproject/plugins diff --git a/frontend/src/global_styles/openproject/_variables.sass b/frontend/src/global_styles/openproject/_variables.sass deleted file mode 100644 index 63ffbec850..0000000000 --- a/frontend/src/global_styles/openproject/_variables.sass +++ /dev/null @@ -1,215 +0,0 @@ -/*-- copyright - * OpenProject is an open source project management software. - * Copyright (C) 2012-2020 the OpenProject GmbH - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU General Public License version 3. - * - * OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: - * Copyright (C) 2006-2013 Jean-Philippe Lang - * Copyright (C) 2010-2013 the ChiliProject Team - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU General Public License - * as published by the Free Software Foundation; either version 2 - * of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program; if not, write to the Free Software - * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. - * - * See docs/COPYRIGHT.rdoc for more details. ++ - */ - - -// use CSS4 + Sass variable fallback for the given property -// e.g., @include varprop(background-color, primary-color) -@mixin varprop($prop, $name) - #{$prop}: var(--#{$name}) - - -$primary-color: #1A67A3 -$primary-color-dark: #175A8E -$alternative-color: #35C53F -$body-font-family: "'Lato', 'Lucida Grande', Helvetica, Arial, sans-serif" -$gray: #EAEAEA -$gray-dark: #878787 -$gray-light: #F8F8F8 -$gray-lighter: #E9E9E9 -$light-gray: #CCCCCC -$body-background: #FFFFFF -$body-font-color: #333333 -$base-line-height: 1.5 -$secondary-color: #bfbfbf -$content-link-color: $primary-color-dark -$font-color-on-primary: #FFFFFF -$font-color-on-primary-dark: #FFFFFF -$font-color-on-secondary: #FFFFFF -$font-color-on-alternative: #FFFFFF -$h1-font-size: 2rem -$h1-font-color: $body-font-color -$h2-font-size: 1.5rem -$h2-font-color: $body-font-color -$h3-font-size: 1.125rem -$h3-font-color: $body-font-color -$h4-font-size: calc(#{h3-font-size} * 0.75) -$h4-font-color: $body-font-color -$list-side-margin: 40px -$list-nested-margin: 30px -$header-height: 55px -$header-height-mobile: 55px -$header-bg-color: #1A67A3 -$header-home-link-bg: "no-repeat 20px 0" -$header-border-bottom-color: $primary-color -$header-border-bottom-width: 0 -$header-item-font-size: 14px -$header-item-font-color: #FFFFFF -$header-item-font-hover-color: #FFFFFF -$header-item-bg-hover-color: #175A8E -$header-drop-down-bg-color: #FFFFFF -$header-drop-down-border-color: #DDDDDD -$header-drop-down-item-font-color: $body-font-color -$header-drop-down-item-font-hover-color: $primary-color -$header-drop-down-projects-search-font-color: $body-font-color -$header-drop-down-projects-search-bg-color: #E0E0E0 -$header-drop-down-projects-search-input-bg-color: #F5F5F5 -$header-drop-down-projects-search-input-border-color: #D9D9D9 -$header-search-field-bg-color: #FFFFFF -$header-search-field-font-color: #000000 -$header-search-field-border: 0 -$main-menu-width: 230px -$main-menu-folded-width: 0px -$main-menu-border-color: #EAEAEA -$main-menu-border-width: 0px -$main-menu-item-height: 40px -$main-menu-item-border-color: $primary-color -$main-menu-item-border-width: 1px -$main-menu-bg-color: #333739 -$main-menu-bg-selected-background: #175A8E -$main-menu-bg-hover-background: #124E7C -$main-menu-font-color: #FFFFFF -$main-menu-hover-font-color: $main-menu-font-color -$main-menu-resizer-color: $primary-color -$main-menu-selected-font-color: $main-menu-font-color -$main-menu-font-size: 14px -$main-menu-selected-indicator-color: #E0E0E0 -$main-menu-hover-indicator-color: $primary-color-dark -$main-menu-selected-hover-indicator-width: 4px -$main-menu-selected-hover-border-color: $main-menu-border-color -$main-menu-navigation-toggler-font-hover-color: $main-menu-resizer-color -$main-menu-sidebar-font-color: $main-menu-font-color -$main-menu-sidebar-h3-color: $main-menu-font-color -$main-menu-sidebar-link-color: $main-menu-font-color -$main-menu-sidebar-h3-font-size: 15px -$main-menu-fieldset-header-color: #B0B2B3 -$toolbar-title-color: #5F5F5F -$toolbar-item--bg-color: #F8F8F8 -$toolbar-item--bg-color-pressed: $gray-lighter -$toolbar-item--border-color: #DDD -$breadcrumb-height: 40px -$breadcrumb-bg-color: #F8F8F8 -$breadcrumb-border-color: #E7E7E7 -$breadcrumb-font-size: 12px -$breadcrumb-highlighted-font-size: 14px -$breadcrumb-font-color: $body-font-color -$content-default-border-color: #EAEAEA -$content-default-border-width: 1px -$content-link-hover-active-color: $primary-color-dark -$content-icon-link-color: #4b4b4b -$content-icon-link-hover-color: $primary-color-dark -$content-icon-link-pressed-color: #7A8995 -$content-icon-color: $content-link-color -$content-form-bg-color: #F8F8F8 -$content-form-border: 1px solid $content-default-border-color -$content-from-input-width: 300px -$content-form-input-border: 1px solid #CACACA -$content-form-input-hover-border: 1px solid #888888 -$content-form-error-color: #9E2A1C -$content-form-separator-color: #DDDDDD -$content-form-danger-zone-bg-color: #CA3F3F -$content-form-danger-zone-font-color: #FFFFFF -$my-page-edit-box-border-color: $primary-color-dark -$drop-down-unselected-font-color: $body-font-color -$drop-down-selected-font-color: $primary-color -$drop-down-hover-font-color: $drop-down-selected-font-color -$drop-down-selected-bg-color: #E7E7E7 -$drop-down-hover-bg-color: #EFEFEF -$context-menu-unselected-font-color: $drop-down-unselected-font-color -$context-menu-hover-font-color: $drop-down-hover-font-color -$action-menu-bg-color: #FFFFFF -$wiki-default-font-size: 1rem -$wiki-toc-header-font-size: calc(#{$wiki-default-font-size} * 0.6) -$wiki-toc-ul-font-size: $wiki-default-font-size -$journal-attribute-font-size: 11px -$repository-entry-filename-margin-left: 24px -$user-avatar-border-radius: 50% -$user-avatar-width: 36px -$user-avatar-height: 36px -$user-avatar-medium-border-radius: 50% -$user-avatar-medium-width: 28px -$user-avatar-medium-height: 28px -$user-avatar-mini-border-radius: 50% -$user-avatar-mini-width: 20px -$user-avatar-mini-height: 20px -$user-avatar-default-bg-color: #090952 -$select-element-padding: 3px, 24px, 3px, 3px -$widget-box-block-bg-color: $body-background -$widget-box-block-border-color: $content-default-border-color -$homescreen-footer-bg-color: $gray-light -$homescreen-footer-icon-color: #7B827B -$inplace-edit--border-color: #ddd -$inplace-edit--dark-background: $gray-light -$inplace-edit--color--very-dark: #cacaca -$inplace-edit--color-highlight: $primary-color -$inplace-edit--selected-date-border-color: $primary-color-dark -$inplace-edit--color--disabled: #4d4d4d -$inplace-edit--bg-color--disabled: #eee -$relations-save-button--disabled-color: $gray-dark -$table-row-border-color: #E7E7E7 -$table-row-highlighting-color: #CCE6F7 -$table-row-highlighting-outline-color: #00A6FF -$table-row-relations-row-background-color: rgba(220,235,244, 0.6) -$table-row-hierarchies-row-font-color: #6C7A89 -$table-header-border-color: #D7D7D7 -$table-header-shadow-color: #DDDDDD -$tabs-font-color-disabled: $gray-dark -$loading-indicator-bg-color: $body-background -$loading-indicator-bg-opacity: 0.8 -$loading-indicator-spinner-color: $primary-color -$button--font-color: #222222 -$button--background-color: $gray-light -$button--background-hover-color: #ededed -$button--border-color: #dddddd -$button--active-font-color: #bbbbbb -$button--active-background-color: #eeeeee -$button--active-border-color: #cacaca -$button--alt-highlight-background-color: $alternative-color -$button--alt-highlight-background-hover-color: #227d28 -$button--highlight-font-color: $font-color-on-primary -$button--highlight-background-color: $primary-color -$button--highlight-background-hover-color: $primary-color-dark -$button--alt-highlight-font-color: $font-color-on-alternative -$button--text-icon-spacing: 0.65em -$generic-table--font-size: 0.875rem -$generic-table--header-font-size: 0.875rem -$generic-table--header-height: 45px -$generic-table--footer-height: 34px -$timeline--header-border-color: #aaaaaa -$timeline--grid-color: #dddddd -$timeline--separator: 3px solid #E7E7E7 -$timeline--type-fallback-color: rgba(150, 150, 150, 0.8) -$table-timeline--row-height: 40px -$status-selector-bg-color: #F99601 -$status-selector-bg-hover-color: #E08600 -$card-font-size: 16px -$project-status-gray: #CCCCCC -$project-status-red: #E73E3D -$project-status-orange: #FFB030 -$project-status-green: #00D12D -$grid-background-color: #F3F6F8 -$work-package-details--tab-height: 40px diff --git a/frontend/src/global_styles/openproject/_variables.scss b/frontend/src/global_styles/openproject/_variables.scss new file mode 100644 index 0000000000..f2a885bedd --- /dev/null +++ b/frontend/src/global_styles/openproject/_variables.scss @@ -0,0 +1,224 @@ +/*-- copyright + * OpenProject is an open source project management software. + * Copyright (C) 2012-2020 the OpenProject GmbH + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU General Public License version 3. + * + * OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: + * Copyright (C) 2006-2013 Jean-Philippe Lang + * Copyright (C) 2010-2013 the ChiliProject Team + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU General Public License + * as published by the Free Software Foundation; either version 2 + * of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + * + * See docs/COPYRIGHT.rdoc for more details. ++ + */ + + +// use CSS4 + Sass variable fallback for the given property +// e.g., @include varprop(background-color, primary-color) +@mixin varprop($prop, $name) { + #{$prop}: var(--#{$name}) +} + +$variables:( + primary-color: #1A67A3, + primary-color-dark: #175A8E, + alternative-color: #35C53F, + body-font-family: "'Lato', 'Lucida Grande', Helvetica, Arial, sans-serif", + gray: #EAEAEA, + gray-dark: #878787, + gray-light: #F8F8F8, + gray-lighter: #E9E9E9, + light-gray: #CCCCCC, + body-background: #FFFFFF, + body-font-color: #333333, + base-line-height: 1.5, + secondary-color: #bfbfbf, + content-link-color: primary-color-dark, + font-color-on-primary: #FFFFFF, + font-color-on-primary-dark: #FFFFFF, + font-color-on-secondary: #FFFFFF, + font-color-on-alternative: #FFFFFF, + h1-font-size: 2rem, + h1-font-color: body-font-color, + h2-font-size: 1.5rem, + h2-font-color: body-font-color, + h3-font-size: 1.125rem, + h3-font-color: body-font-color, + h4-font-size: calc(#{h3-font-size} * 0.75), + h4-font-color: body-font-color, + list-side-margin: 40px, + list-nested-margin: 30px, + header-height: 55px, + header-height-mobile: 55px, + header-bg-color: #1A67A3, + header-home-link-bg: "no-repeat 20px 0", + header-border-bottom-color: primary-color, + header-border-bottom-width: 0, + header-item-font-size: 14px, + header-item-font-color: #FFFFFF, + header-item-font-hover-color: #FFFFFF, + header-item-bg-hover-color: #175A8E, + header-drop-down-bg-color: #FFFFFF, + header-drop-down-border-color: #DDDDDD, + header-drop-down-item-font-color: body-font-color, + header-drop-down-item-font-hover-color: primary-color, + header-drop-down-projects-search-font-color: body-font-color, + header-drop-down-projects-search-bg-color: #E0E0E0, + header-drop-down-projects-search-input-bg-color: #F5F5F5, + header-drop-down-projects-search-input-border-color: #D9D9D9, + header-search-field-bg-color: #FFFFFF, + header-search-field-font-color: #000000, + header-search-field-border: 0, + main-menu-width: 230px, + main-menu-folded-width: 0px, + main-menu-border-color: #EAEAEA, + main-menu-border-width: 0px, + main-menu-item-height: 40px, + main-menu-item-border-color: primary-color, + main-menu-item-border-width: 1px, + main-menu-bg-color: #333739, + main-menu-bg-selected-background: #175A8E, + main-menu-bg-hover-background: #124E7C, + main-menu-font-color: #FFFFFF, + main-menu-hover-font-color: main-menu-font-color, + main-menu-resizer-color: primary-color, + main-menu-selected-font-color: main-menu-font-color, + main-menu-font-size: 14px, + main-menu-selected-indicator-color: #E0E0E0, + main-menu-hover-indicator-color: primary-color-dark, + main-menu-selected-hover-indicator-width: 4px, + main-menu-selected-hover-border-color: main-menu-border-color, + main-menu-navigation-toggler-font-hover-color: main-menu-resizer-color, + main-menu-sidebar-font-color: main-menu-font-color, + main-menu-sidebar-h3-color: main-menu-font-color, + main-menu-sidebar-link-color: main-menu-font-color, + main-menu-sidebar-h3-font-size: 15px, + main-menu-fieldset-header-color: #B0B2B3, + toolbar-title-color: #5F5F5F, + toolbar-item--bg-color: #F8F8F8, + toolbar-item--bg-color-pressed: gray-lighter, + toolbar-item--border-color: #DDD, + breadcrumb-height: 40px, + breadcrumb-bg-color: #F8F8F8, + breadcrumb-border-color: #E7E7E7, + breadcrumb-font-size: 12px, + breadcrumb-highlighted-font-size: 14px, + breadcrumb-font-color: body-font-color, + content-default-border-color: #EAEAEA, + content-default-border-width: 1px, + content-link-hover-active-color: primary-color-dark, + content-icon-link-color: #4b4b4b, + content-icon-link-hover-color: primary-color-dark, + content-icon-link-pressed-color: #7A8995, + content-icon-color: content-link-color, + content-form-bg-color: #F8F8F8, + content-form-border: 1px solid content-default-border-color, + content-from-input-width: 300px, + content-form-input-border: 1px solid #CACACA, + content-form-input-hover-border: 1px solid #888888, + content-form-error-color: #9E2A1C, + content-form-separator-color: #DDDDDD, + content-form-danger-zone-bg-color: #CA3F3F, + content-form-danger-zone-font-color: #FFFFFF, + my-page-edit-box-border-color: primary-color-dark, + drop-down-unselected-font-color: body-font-color, + drop-down-selected-font-color: primary-color, + drop-down-hover-font-color: drop-down-selected-font-color, + drop-down-selected-bg-color: #E7E7E7, + drop-down-hover-bg-color: #EFEFEF, + context-menu-unselected-font-color: drop-down-unselected-font-color, + context-menu-hover-font-color: drop-down-hover-font-color, + action-menu-bg-color: #FFFFFF, + wiki-default-font-size: 1rem, + wiki-toc-header-font-size: calc(#{wiki-default-font-size} * 0.6), + wiki-toc-ul-font-size: wiki-default-font-size, + journal-attribute-font-size: 11px, + repository-entry-filename-margin-left: 24px, + user-avatar-border-radius: 50%, + user-avatar-width: 36px, + user-avatar-height: 36px, + user-avatar-medium-border-radius: 50%, + user-avatar-medium-width: 28px, + user-avatar-medium-height: 28px, + user-avatar-mini-border-radius: 50%, + user-avatar-mini-width: 20px, + user-avatar-mini-height: 20px, + user-avatar-default-bg-color: #090952, + select-element-padding: "3px, 24px, 3px, 3px", + widget-box-block-bg-color: body-background, + widget-box-block-border-color: content-default-border-color, + homescreen-footer-bg-color: gray-light, + homescreen-footer-icon-color: #7B827B, + inplace-edit--border-color: #ddd, + inplace-edit--dark-background: gray-light, + inplace-edit--color--very-dark: #cacaca, + inplace-edit--color-highlight: primary-color, + inplace-edit--selected-date-border-color: primary-color-dark, + inplace-edit--color--disabled: #4d4d4d, + inplace-edit--bg-color--disabled: #eee, + relations-save-button--disabled-color: gray-dark, + table-row-border-color: #E7E7E7, + table-row-highlighting-color: #CCE6F7, + table-row-highlighting-outline-color: #00A6FF, + table-row-relations-row-background-color: rgba(220,235,244, 0.6), + table-row-hierarchies-row-font-color: #6C7A89, + table-header-border-color: #D7D7D7, + table-header-shadow-color: #DDDDDD, + tabs-font-color-disabled: gray-dark, + loading-indicator-bg-color: body-background, + loading-indicator-bg-opacity: 0.8, + loading-indicator-spinner-color: primary-color, + button--font-color: #222222, + button--background-color: gray-light, + button--background-hover-color: #ededed, + button--border-color: #dddddd, + button--active-font-color: #bbbbbb, + button--active-background-color: #eeeeee, + button--active-border-color: #cacaca, + button--alt-highlight-background-color: alternative-color, + button--alt-highlight-background-hover-color: #227d28, + button--highlight-font-color: font-color-on-primary, + button--highlight-background-color: primary-color, + button--highlight-background-hover-color: primary-color-dark, + button--alt-highlight-font-color: font-color-on-alternative, + button--text-icon-spacing: 0.65em, + generic-table--font-size: 0.875rem, + generic-table--header-font-size: 0.875rem, + generic-table--header-height: 45px, + generic-table--footer-height: 34px, + timeline--header-border-color: #aaaaaa, + timeline--grid-color: #dddddd, + timeline--separator: 3px solid #E7E7E7, + timeline--type-fallback-color: rgba(150, 150, 150, 0.8), + table-timeline--row-height: 40px, + status-selector-bg-color: #F99601, + status-selector-bg-hover-color: #E08600, + card-font-size: 16px, + project-status-gray: #CCCCCC, + project-status-red: #E73E3D, + project-status-orange: #FFB030, + project-status-green: #00D12D, + grid-background-color: #F3F6F8, + work-package-details--tab-height: 40px, +); + + +:root { + @each $name, $value in $variables { + --#{$name}: #{$value}; + } +} \ No newline at end of file diff --git a/frontend/src/global_styles/openproject/_variables.scss.erb b/frontend/src/global_styles/openproject/_variables.scss.erb index 2d8e1dc96e..c9811a4dfe 100644 --- a/frontend/src/global_styles/openproject/_variables.scss.erb +++ b/frontend/src/global_styles/openproject/_variables.scss.erb @@ -3,7 +3,7 @@ Depend on the design file so that this is recompiled on core changes. Doesn't work for theme plugins, sorry :-/ just update the core design.rb as well to reload! %> <% depend_on Rails.root.join('lib', 'open_project', 'custom_styles', 'design.rb') %> -<%# ToDo: Replace %> +<%# Todo for task #33508: Replace %> <%# Set defaults for the following variables primary-color @@ -36,6 +36,3 @@ $variable-map: ( #{$prop}: map-get($variable-map, $name) unquote($suffix); #{$prop}: var(--#{$name}) unquote($suffix); } - -// Other variables -$work-package-details--tab-height: 40px; diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 5449cfacd0..7ff09f4cc0 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -2,7 +2,7 @@ @import "~@ng-select/ng-select/themes/default.theme.css"; // Variables -@import "global_styles/openproject/_variables.sass"; +@import "global_styles/openproject/_variables.scss"; // Foundation variables @import "global_styles/openproject/_settings.scss"; @@ -12,8 +12,4 @@ @import "~jquery-ui/themes/base/theme"; // Core styles -@import "global_styles/fonts/_index.sass"; -@import "global_styles/openproject/_index.sass"; -@import "global_styles/vendor/_index.sass"; -@import "global_styles/layout/_index.sass"; -@import "global_styles/content/_index.sass"; +@import "global_styles/openproject.sass"; diff --git a/modules/backlogs/app/assets/stylesheets/backlogs/taskboard.sass b/modules/backlogs/app/assets/stylesheets/backlogs/taskboard.sass index 082beffa78..c0ddbab1c5 100644 --- a/modules/backlogs/app/assets/stylesheets/backlogs/taskboard.sass +++ b/modules/backlogs/app/assets/stylesheets/backlogs/taskboard.sass @@ -26,8 +26,9 @@ * See docs/COPYRIGHT.rdoc for more details. ++ */ -@import openproject/variables -@import helpers/functions +// Todo for task #33508 +@import "../../../frontend/src/global_styles/openproject/variables" +@import "../../../frontend/src/global_styles/openproject/functions" @mixin story-header background-color: #FFFFFF diff --git a/modules/bim/app/assets/stylesheets/bim/ifc_viewer/context_menu.sass b/modules/bim/app/assets/stylesheets/bim/ifc_viewer/context_menu.sass index c87b93954c..f4001e4812 100644 --- a/modules/bim/app/assets/stylesheets/bim/ifc_viewer/context_menu.sass +++ b/modules/bim/app/assets/stylesheets/bim/ifc_viewer/context_menu.sass @@ -1,5 +1,5 @@ -@import "layout/colors" -@import "layout/drop_down" +@import "../../../frontend/src/global_styles/layout/colors" +@import "../../../frontend/src/global_styles/layout/drop_down" .xeokit-context-menu @extend .dropdown diff --git a/modules/bim/app/assets/stylesheets/bim/ifc_viewer/generic.sass b/modules/bim/app/assets/stylesheets/bim/ifc_viewer/generic.sass index aea45397a7..0430a0aecc 100644 --- a/modules/bim/app/assets/stylesheets/bim/ifc_viewer/generic.sass +++ b/modules/bim/app/assets/stylesheets/bim/ifc_viewer/generic.sass @@ -1,8 +1,8 @@ // -------------------------- GENERIC -------------------------- -@import "openproject/variables" -@import "openproject/mixins" -@import "fonts/openproject_icon_definitions" -@import "fonts/openproject_icon_font" +@import "../../../frontend/src/global_styles/openproject/variables" +@import "../../../frontend/src/global_styles/openproject/mixins" +@import "../../../frontend/src/global_styles/fonts/openproject_icon_definitions" +@import "../../../frontend/src/global_styles/fonts/openproject_icon_font" @import "tabs" @import "toolbar" diff --git a/modules/bim/app/assets/stylesheets/bim/ifc_viewer/tooltips.sass b/modules/bim/app/assets/stylesheets/bim/ifc_viewer/tooltips.sass index 834b462b5d..405e41a121 100644 --- a/modules/bim/app/assets/stylesheets/bim/ifc_viewer/tooltips.sass +++ b/modules/bim/app/assets/stylesheets/bim/ifc_viewer/tooltips.sass @@ -1,4 +1,4 @@ -@import "content/tooltips" +@import "../../../frontend/src/global_styles/content/tooltips" .xeokit-toolbar [data-tippy-content] @extend .tooltip--bottom diff --git a/modules/reporting/app/assets/stylesheets/reporting/_reporting.sass b/modules/reporting/app/assets/stylesheets/reporting/_reporting.sass index 0b5190e0a6..ee59a87919 100644 --- a/modules/reporting/app/assets/stylesheets/reporting/_reporting.sass +++ b/modules/reporting/app/assets/stylesheets/reporting/_reporting.sass @@ -1,4 +1,4 @@ -@import "fonts/openproject_icon_definitions" +@import "../../../frontend/src/global_styles/fonts/openproject_icon_definitions" @mixin sort-icons font-family: "openproject-icon-font" !important