diff --git a/src/core/components/progress-bar/progress-bar.scss b/src/core/components/progress-bar/progress-bar.scss index 11b6a5f70..d50a1f078 100644 --- a/src/core/components/progress-bar/progress-bar.scss +++ b/src/core/components/progress-bar/progress-bar.scss @@ -2,8 +2,11 @@ display: flex; width: 100%; + --line-height: 40px; + --bar-margin: 16px 0; + .core-progress-text { - line-height: 40px; + line-height: var(--line-height); font-size: 1rem; color: var(--text-color); width: 55px; @@ -14,7 +17,7 @@ -webkit-appearance: none; appearance: none; height: var(--height); - margin: 16px 0; + margin: var(--bar-margin); padding: 0; display: block; width: 100%; diff --git a/src/core/features/course/components/format/format.scss b/src/core/features/course/components/format/format.scss index 0d3002196..f5a535adb 100644 --- a/src/core/features/course/components/format/format.scss +++ b/src/core/features/course/components/format/format.scss @@ -17,13 +17,14 @@ .core-course-thumb { display: none; - height: 150px; + height: #{$core-courseimage-on-course-height}; width: 100%; overflow: hidden; cursor: pointer; pointer-events: auto; position: relative; background: var(--ion-item-background); + border-bottom: 1px solid var(--gray); img { position: absolute; @@ -34,6 +35,19 @@ } } + @if ($core-show-courseimage-on-course) { + .core-course-thumb { + display: block; + } + } + + @if ($core-hide-progress-on-course) { + .core-course-progress { + display: none; + } + } + + .core-button-selector-row { display: flex; core-combobox { diff --git a/src/core/features/course/components/section-selector/section-selector.scss b/src/core/features/course/components/section-selector/section-selector.scss index 429076451..828f42727 100644 --- a/src/core/features/course/components/section-selector/section-selector.scss +++ b/src/core/features/course/components/section-selector/section-selector.scss @@ -1,17 +1,15 @@ -:host { - core-progress-bar { - .core-progress-text { - line-height: 24px; - position: absolute; - top: -8px; - right: 10px; - } - progress { - margin: 8px 0 4px 0; - } - } +@import '~theme/globals.scss'; +core-progress-bar { + --bar-margin: 8px 0 4px 0; + --line-height: 20px; +} - ion-badge { - text-align: start; +@if ($core-hide-progress-on-section-selector) { + core-progress-bar { + display: none; } -} \ No newline at end of file +} + +ion-badge { + text-align: start; +} diff --git a/src/core/features/course/components/section-selector/section-selector.ts b/src/core/features/course/components/section-selector/section-selector.ts index 06b74987d..c2fdc2069 100644 --- a/src/core/features/course/components/section-selector/section-selector.ts +++ b/src/core/features/course/components/section-selector/section-selector.ts @@ -26,6 +26,7 @@ import { ModalController } from '@singletons'; @Component({ selector: 'core-course-section-selector', templateUrl: 'section-selector.html', + styleUrls: ['section-selector.scss'], }) export class CoreCourseSectionSelectorComponent implements OnInit { diff --git a/src/core/features/courses/components/course-progress/core-courses-course-progress.html b/src/core/features/courses/components/course-progress/core-courses-course-progress.html index 9b5b972ce..a1d1b2571 100644 --- a/src/core/features/courses/components/course-progress/core-courses-course-progress.html +++ b/src/core/features/courses/components/course-progress/core-courses-course-progress.html @@ -55,7 +55,8 @@ - + diff --git a/src/core/features/courses/components/course-progress/course-progress.scss b/src/core/features/courses/components/course-progress/course-progress.scss index f460d17b7..4fee81ed6 100644 --- a/src/core/features/courses/components/course-progress/course-progress.scss +++ b/src/core/features/courses/components/course-progress/course-progress.scss @@ -41,6 +41,18 @@ } } + @if ($core-course-hide-thumb-on-cards) { + .core-course-thumb { + display: none; + } + } + + @if ($core-course-thumb-on-cards-background) { + .core-course-thumb { + background: $core-course-thumb-on-cards-background !important; + } + } + .core-course-additional-info { margin-bottom: 8px; } @@ -86,6 +98,12 @@ width: 50px; } } + + @if ($core-course-hide-progress-on-cards) { + .core-course-progress { + display: none; + } + } } button { diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss index 1f999bfed..ba7239f84 100644 --- a/src/theme/globals.variables.scss +++ b/src/theme/globals.variables.scss @@ -324,12 +324,13 @@ $core-side-blocks-max-width: 30% !default; $core-side-blocks-min-width: 280px !default; $core-combobox-color: $black !default; +$core-combobox-background: $ion-item-background !default; $core-combobox-color-dark: $white !default; +$core-combobox-background-dark: $ion-item-background-dark !default; $core-combobox-border-color: $primary !default; $core-combobox-border-color-dark: $primary-dark !default; $core-combobox-border-width: 3px !default; - $core-selected-item-color: $primary !default; $core-selected-item-color-dark: $primary-dark !default; $core-selected-item-border-width: 5px !default; @@ -358,6 +359,25 @@ $core-avatar-size: 44px !default; $core-send-message-input-background: $gray !default; $core-send-message-input-color: $black !default; +$core-more-icon-color: null !default; +$core-more-item-border: null !default; +$core-more-hide-siteinfo: false !default; +$core-more-hide-sitename: false !default; +$core-more-hide-siteurl: false !default; + +$core-fixed-url: false !default; +$core-dashboard-logo: false !default; +$core-always-show-main-menu: false !default; + +$core-show-courseimage-on-course: false !default; +$core-hide-progress-on-course: false !default; +$core-courseimage-on-course-height: 150px !default; +$core-hide-progress-on-section-selector: false !default; + +$core-course-hide-thumb-on-cards: false !default; +$core-course-thumb-on-cards-background: null !default; +$core-course-hide-progress-on-cards: false !default; + $addon-calendar-event-category-color: $purple !default; $addon-calendar-event-course-color: $red !default; $addon-calendar-event-group-color: $yellow !default; @@ -392,13 +412,3 @@ $addon-forum-highlight-color: $gray-lighter !default; $addon-forum-border-color-dark: $gray-dark !default; $addon-forum-highlight-color-dark: $gray-darker !default; - -$core-more-icon-color: null !default; -$core-more-item-border: null !default; -$core-more-hide-siteinfo: false !default; -$core-more-hide-sitename: false !default; -$core-more-hide-siteurl: false !default; - -$core-fixed-url: false !default; -$core-dashboard-logo: false !default; -$core-always-show-main-menu: false !default; diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index f742c41d6..bdf7d264a 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -462,7 +462,7 @@ img.large-avatar, margin-bottom: 10px; border-radius : 50%; padding: 4px; - border: 1px solid #ddd; + border: 1px solid var(--gray); background-color: transparent; } diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index 73405f465..12a09ee44 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -97,7 +97,7 @@ --item-divider-color: #{$ion-item-divider-color-dark}; --spacer-background: #{$core-spacer-background-dark}; - --core-combobox-background: var(--ion-item-background); + --core-combobox-background: #{$core-combobox-background-dark}; --core-combobox-color: #{$core-combobox-color-dark}; --selected-item-color: #{$core-selected-item-color-dark}; diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index accf9e936..c3595b37c 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -222,6 +222,7 @@ --core-combobox-background: var(--ion-item-background); --core-combobox-color: #{$core-combobox-color}; + --core-combobox-background: #{$core-combobox-background}; --core-combobox-border-color: #{$core-combobox-border-color}; --core-combobox-border-width: #{$core-combobox-border-width};