diff --git a/src/addons/block/activityresults/components/activityresults/activityresults.scss b/src/addons/block/activityresults/components/activityresults/activityresults.scss index b1442e17c..fe70c46a4 100644 --- a/src/addons/block/activityresults/components/activityresults/activityresults.scss +++ b/src/addons/block/activityresults/components/activityresults/activityresults.scss @@ -22,8 +22,7 @@ padding-top: .75rem; padding-bottom: .75rem; color: var(--medium); - font-weight: bold; - font-size: 18px; + font: var(--mdl-typography-subtitle-font-md); } } } diff --git a/src/addons/block/blogtags/components/blogtags/blogtags.scss b/src/addons/block/blogtags/components/blogtags/blogtags.scss index 85844a8fd..e4e8eadf8 100644 --- a/src/addons/block/blogtags/components/blogtags/blogtags.scss +++ b/src/addons/block/blogtags/components/blogtags/blogtags.scss @@ -22,7 +22,7 @@ contain: content; vertical-align: baseline; text-decoration: none; - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); } .s20 { font-size: 1.5em; diff --git a/src/addons/block/myoverview/components/myoverview/myoverview.scss b/src/addons/block/myoverview/components/myoverview/myoverview.scss index 563fadfbd..ace9c44e0 100644 --- a/src/addons/block/myoverview/components/myoverview/myoverview.scss +++ b/src/addons/block/myoverview/components/myoverview/myoverview.scss @@ -11,7 +11,7 @@ ion-button, core-combobox ::ng-deep ion-select { - --a11y-min-target-size: 40px; + --a11y-sizing-minTargetSize: 40px; margin: 0; } @@ -19,7 +19,7 @@ --border-width: 0; ion-icon { - font-size: 20px; + font-size: var(--mdl-typography-icon-fontSize-md); } } diff --git a/src/addons/block/tags/components/tags/tags.scss b/src/addons/block/tags/components/tags/tags.scss index fcdc93511..2282396da 100644 --- a/src/addons/block/tags/components/tags/tags.scss +++ b/src/addons/block/tags/components/tags/tags.scss @@ -30,7 +30,7 @@ contain: content; vertical-align: baseline; text-decoration: none; - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); } .s20 { font-size: 2.7em; diff --git a/src/addons/block/timeline/components/timeline/timeline.scss b/src/addons/block/timeline/components/timeline/timeline.scss index aab42b195..82f7b079b 100644 --- a/src/addons/block/timeline/components/timeline/timeline.scss +++ b/src/addons/block/timeline/components/timeline/timeline.scss @@ -12,20 +12,20 @@ ion-button, core-combobox ::ng-deep ion-button { --border-width: 0; - --a11y-min-target-size: 40px; + --a11y-sizing-minTargetSize: 40px; margin: 0; .select-icon { display: none; } ion-icon { - font-size: 20px; + font-size: var(--mdl-typography-icon-fontSize-md); } } core-combobox ::ng-deep ion-select { margin: 0; - --a11y-min-target-size: 40px; + --a11y-sizing-minTargetSize: 40px; } core-search-box { diff --git a/src/addons/calendar/components/filter/filter.scss b/src/addons/calendar/components/filter/filter.scss index dd51360a8..2023335f6 100644 --- a/src/addons/calendar/components/filter/filter.scss +++ b/src/addons/calendar/components/filter/filter.scss @@ -8,7 +8,7 @@ > ion-icon { padding: 4px; - font-size: 20px; + font-size: var(--mdl-typography-icon-fontSize-md); } } } diff --git a/src/addons/mod/resource/components/index/index.scss b/src/addons/mod/resource/components/index/index.scss index 88b63eec0..89f14980c 100644 --- a/src/addons/mod/resource/components/index/index.scss +++ b/src/addons/mod/resource/components/index/index.scss @@ -5,7 +5,7 @@ @include padding(4px, 0px, 0px, 0px); ion-icon { - font-size: 24px; + font-size: var(--mdl-typography-icon-fontSize-lg); } } diff --git a/src/addons/mod/survey/components/index/index.scss b/src/addons/mod/survey/components/index/index.scss index bb262ac5b..42e6f410c 100644 --- a/src/addons/mod/survey/components/index/index.scss +++ b/src/addons/mod/survey/components/index/index.scss @@ -19,8 +19,8 @@ } ion-radio { - height: var(--a11y-min-target-size); - width: var(--a11y-min-target-size); + height: var(--a11y-sizing-minTargetSize); + width: var(--a11y-sizing-minTargetSize); padding: 12px; } } diff --git a/src/addons/notifications/notifications.scss b/src/addons/notifications/notifications.scss index 120128ebe..305269884 100644 --- a/src/addons/notifications/notifications.scss +++ b/src/addons/notifications/notifications.scss @@ -2,10 +2,11 @@ :host { --icon-size: 32px; - --core-avatar-size: var(--icon-size); --extra-icon-size: 12px; - ::ng-deep core-user-avatar { + ion-item ::ng-deep core-user-avatar { + --core-avatar-size: var(--icon-size); + .core-avatar-extra-img { margin: 0 !important; position: absolute; @@ -16,7 +17,7 @@ .core-avatar-extra-img { background: var(--background-color); - border-radius: var(--radius-sm); + border-radius: var(--mdl-shape-borderRadius-sm); img { max-width: var(--extra-icon-size); max-height: var(--extra-icon-size); @@ -39,7 +40,7 @@ } padding: 0px; background: var(--background-color); - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); @include margin(6px, 8px, 6px, 0px); } diff --git a/src/core/components/button-with-spinner/button-with-spinner.scss b/src/core/components/button-with-spinner/button-with-spinner.scss index 5c9d86ae3..40859f652 100644 --- a/src/core/components/button-with-spinner/button-with-spinner.scss +++ b/src/core/components/button-with-spinner/button-with-spinner.scss @@ -5,8 +5,8 @@ align-items: center; justify-content: space-around; align-content: center; - min-height: var(--a11y-min-target-size); - min-width: var(--a11y-min-target-size); + min-height: var(--a11y-sizing-minTargetSize); + min-width: var(--a11y-sizing-minTargetSize); position: relative; > * { diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss index dc5ac89b0..c4964c9e7 100644 --- a/src/core/components/combobox/combobox.scss +++ b/src/core/components/combobox/combobox.scss @@ -21,7 +21,7 @@ ion-icon { margin: var(--icon-margin); - font-size: 20px; + font-size: var(--mdl-typography-icon-fontSize-md); } } } @@ -49,7 +49,7 @@ color: var(--color); text-overflow: ellipsis; white-space: nowrap; - min-height: var(--a11y-min-target-size); + min-height: var(--a11y-sizing-minTargetSize); overflow: hidden; box-shadow: var(--box-shadow); @@ -110,9 +110,7 @@ flex: 1; &::part(native) { - font-weight: var(--label-font-weight); - font-size: var(--label-lg-font-size); - line-height: var(--label-lg-line-height); + font: var(--mdl-typography-label-font-lg); border-radius: var(--core-combobox-radius); } diff --git a/src/core/components/download-refresh/download-refresh.scss b/src/core/components/download-refresh/download-refresh.scss index 5c9d86ae3..40859f652 100644 --- a/src/core/components/download-refresh/download-refresh.scss +++ b/src/core/components/download-refresh/download-refresh.scss @@ -5,8 +5,8 @@ align-items: center; justify-content: space-around; align-content: center; - min-height: var(--a11y-min-target-size); - min-width: var(--a11y-min-target-size); + min-height: var(--a11y-sizing-minTargetSize); + min-width: var(--a11y-sizing-minTargetSize); position: relative; > * { diff --git a/src/core/components/empty-box/empty-box.scss b/src/core/components/empty-box/empty-box.scss index 4c2566770..b79b0305d 100644 --- a/src/core/components/empty-box/empty-box.scss +++ b/src/core/components/empty-box/empty-box.scss @@ -33,7 +33,7 @@ p, ::ng-deep p { - font-size: var(--heading-6-font-size); + font-size: var(--mdl-typography-heading6-fontSize); color: var(--text-color); } } diff --git a/src/core/components/message/message.scss b/src/core/components/message/message.scss index af5c1e2fe..b5e1c10dc 100644 --- a/src/core/components/message/message.scss +++ b/src/core/components/message/message.scss @@ -11,14 +11,14 @@ .message-box { --background: var(--message-background); - --min-height: var(--a11y-min-target-size); + --min-height: var(--a11y-sizing-minTargetSize); display: flex; flex-direction: row; position: relative; border: 0; - border-radius: var(--radius-sm); + border-radius: var(--mdl-shape-borderRadius-sm); margin: 8px; width: 90%; max-width: var(--list-item-max-width); diff --git a/src/core/components/mod-icon/mod-icon.scss b/src/core/components/mod-icon/mod-icon.scss index a7ba181c6..332416b56 100644 --- a/src/core/components/mod-icon/mod-icon.scss +++ b/src/core/components/mod-icon/mod-icon.scss @@ -7,7 +7,7 @@ --padding-top: var(--module-icon-padding, 4px); --padding-end: var(--module-icon-padding, 4px); --padding-bottom: var(--module-icon-padding, 4px); - --icon-radius: var(--module-icon-radius, var(--radius-xs)); + --icon-radius: var(--module-icon-radius, var(--mdl-shape-borderRadius-xs)); --margin-end: 0px; --margin-vertical: 0px; diff --git a/src/core/components/send-message-form/send-message-form.scss b/src/core/components/send-message-form/send-message-form.scss index 0d36c6c6f..e826dc118 100644 --- a/src/core/components/send-message-form/send-message-form.scss +++ b/src/core/components/send-message-form/send-message-form.scss @@ -7,7 +7,7 @@ --textarea-color: var(--core-input-text); --textarea-border-width: var(--core-input-border-width); --textarea-border-color: var(--core-input-stroke); - --textarea-radius: var(--radius-xl); + --textarea-radius: var(--mdl-shape-borderRadius-xl); form { display: flex; @@ -27,7 +27,7 @@ border: var(--textarea-border-width) solid var(--textarea-border-color); border-radius: var(--textarea-radius); - min-height: var(--a11y-min-target-size); + min-height: var(--a11y-sizing-minTargetSize); line-height: 20px; padding: 10px; @include margin(4px, 0px, 4px, 8px); diff --git a/src/core/components/tabs/tabs.scss b/src/core/components/tabs/tabs.scss index 8784d0e4a..4b3fc3e71 100644 --- a/src/core/components/tabs/tabs.scss +++ b/src/core/components/tabs/tabs.scss @@ -40,7 +40,7 @@ height: var(--height); --border-radius: 0; ion-icon { - font-size: 16px; + font-size: var(--mdl-typography-icon-fontSize-sm); } } diff --git a/src/core/components/timer/timer.scss b/src/core/components/timer/timer.scss index 0a7bf56da..843c8ae2b 100644 --- a/src/core/components/timer/timer.scss +++ b/src/core/components/timer/timer.scss @@ -20,7 +20,7 @@ div.core-timer { background: var(--timer-background); color: var(--timer-text-color, var(--text-color)); - border-radius: var(--radius-lg); + border-radius: var(--mdl-shape-borderRadius-lg); } button { diff --git a/src/core/features/block/components/block/block.scss b/src/core/features/block/components/block/block.scss index 40f49613c..f76efbb45 100644 --- a/src/core/features/block/components/block/block.scss +++ b/src/core/features/block/components/block/block.scss @@ -5,7 +5,7 @@ background: var(--background); ion-card { - --border-radius: var(--radius-sm); + --border-radius: var(--mdl-shape-borderRadius-sm); } ::ng-deep ion-item-divider { diff --git a/src/core/features/block/components/side-blocks-button/side-blocks-button.scss b/src/core/features/block/components/side-blocks-button/side-blocks-button.scss index 162d5f1f1..8e6daeb2e 100644 --- a/src/core/features/block/components/side-blocks-button/side-blocks-button.scss +++ b/src/core/features/block/components/side-blocks-button/side-blocks-button.scss @@ -10,7 +10,7 @@ margin: 0; --padding-start: 0.5em; --padding-end: 0; - --border-radius: 2em 0 0 2em; + --core-input-radius: 2em 0 0 2em; height: 56px; --box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%); @@ -27,6 +27,6 @@ :host-context([dir=rtl]) { ion-button { - --border-radius: 0 2em 2em 0; + --core-input-radius: 0 2em 2em 0; } } diff --git a/src/core/features/course/components/module-info/course-module-info.scss b/src/core/features/course/components/module-info/course-module-info.scss index 246932f5c..2c87a2cd0 100644 --- a/src/core/features/course/components/module-info/course-module-info.scss +++ b/src/core/features/course/components/module-info/course-module-info.scss @@ -30,7 +30,7 @@ .core-module-info-box { background: var(--light); - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); margin: 8px; padding: 8px; diff --git a/src/core/features/course/components/module/module.scss b/src/core/features/course/components/module/module.scss index 7385c019c..d46bf5a78 100644 --- a/src/core/features/course/components/module/module.scss +++ b/src/core/features/course/components/module/module.scss @@ -35,7 +35,7 @@ margin-bottom: 0px; --module-icon-padding: 0px; --module-legacy-icon-padding: 4px; - --module-icon-radius: var(--radius-xs); + --module-icon-radius: var(--mdl-shape-borderRadius-xs); @include margin-horizontal(null, 8px); align-self: self-start; @@ -75,7 +75,7 @@ --padding-start: 0px; --padding-end: 0px; ion-icon { - font-size: 20px; + font-size: var(--mdl-typography-icon-fontSize-md); } } @@ -101,7 +101,7 @@ .core-module-description ::ng-deep img, .activity-title .item-heading core-format-text ::ng-deep img { - border-radius: var(--radius-lg); + border-radius: var(--mdl-shape-borderRadius-lg); } core-course-module-completion { @@ -132,7 +132,7 @@ .activity-description-availabilityinfo { .core-module-availabilityinfo { background: var(--gray-300); - border-radius: var(--radius-sm); + border-radius: var(--mdl-shape-borderRadius-sm); margin-top: 8px; padding: 8px; font-size: 14px; diff --git a/src/core/features/course/pages/course-summary/course-summary.scss b/src/core/features/course/pages/course-summary/course-summary.scss index b26938458..65aa299b5 100644 --- a/src/core/features/course/pages/course-summary/course-summary.scss +++ b/src/core/features/course/pages/course-summary/course-summary.scss @@ -43,8 +43,8 @@ .course-container { position: relative; - top: calc(var(--thumb-height) - var(--radius-lg)); - border-radius: var(--radius-lg) var(--radius-lg) 0 0; + top: calc(var(--thumb-height) - var(--mdl-shape-borderRadius-lg)); + border-radius: var(--mdl-shape-borderRadius-lg) var(--mdl-shape-borderRadius-lg) 0 0; background-color: var(--ion-background-color); box-shadow: var(--drop-shadow-top); clip-path: inset(-5px 0px 0px 0px); @@ -68,7 +68,7 @@ .core-course-dates { background: var(--light); - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); padding: 8px; width: 100%; diff --git a/src/core/features/course/pages/module-preview/module-preview.scss b/src/core/features/course/pages/module-preview/module-preview.scss index 5e34beb75..f5bb28309 100644 --- a/src/core/features/course/pages/module-preview/module-preview.scss +++ b/src/core/features/course/pages/module-preview/module-preview.scss @@ -2,7 +2,7 @@ .core-module-availabilityinfo { background: var(--light); - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); padding: 8px; font-size: 90%; ::ng-deep ul { diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss index f75d17f41..6fee72f44 100644 --- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss +++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss @@ -125,7 +125,7 @@ margin: 0 auto; font-size: 18px; background-color: var(--toobar-background); - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); @include core-transition(background-color, 200ms); color: var(--button-color); cursor: pointer; diff --git a/src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss b/src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss index 6bd83cef0..f1cfe35d2 100644 --- a/src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss +++ b/src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss @@ -20,7 +20,7 @@ --icon-size: 1.8em; // Offset padding for visual alignment. - margin: calc((var(--icon-size) - var(--a11y-min-target-size)) / 2); + margin: calc((var(--icon-size) - var(--a11y-sizing-minTargetSize)) / 2); } } diff --git a/src/core/features/grades/pages/course/course.scss b/src/core/features/grades/pages/course/course.scss index ef6808d2b..a6bc87e94 100644 --- a/src/core/features/grades/pages/course/course.scss +++ b/src/core/features/grades/pages/course/course.scss @@ -97,7 +97,7 @@ table.core-table.core-grades-table { } th, td { - height: var(--a11y-min-target-size); + height: var(--a11y-sizing-minTargetSize); vertical-align: middle; } } diff --git a/src/core/features/mainmenu/pages/menu/menu.scss b/src/core/features/mainmenu/pages/menu/menu.scss index d72dfe76c..768a558a9 100644 --- a/src/core/features/mainmenu/pages/menu/menu.scss +++ b/src/core/features/mainmenu/pages/menu/menu.scss @@ -58,7 +58,7 @@ ion-tab-bar { text-overflow: unset; overflow: visible; text-align: center; - font-size: 24px; + font-size: var(--mdl-typography-icon-fontSize-lg); } ion-badge.core-tab-badge { diff --git a/src/core/features/question/question.scss b/src/core/features/question/question.scss index 80559f66e..c36dbfaca 100644 --- a/src/core/features/question/question.scss +++ b/src/core/features/question/question.scss @@ -74,7 +74,7 @@ .questioncorrectnessicon, .fa.icon.questioncorrectnessicon { - font-size: 20px; + font-size: var(--mdl-typography-icon-fontSize-md); } .item.item-interactive.item-interactive-disabled ::ng-deep { diff --git a/src/core/features/reportbuilder/components/report-summary/report-summary.scss b/src/core/features/reportbuilder/components/report-summary/report-summary.scss index 1512f8e33..d4e91a4e3 100644 --- a/src/core/features/reportbuilder/components/report-summary/report-summary.scss +++ b/src/core/features/reportbuilder/components/report-summary/report-summary.scss @@ -6,7 +6,7 @@ ion-footer { ion-icon { - font-size: 16px; + font-size: var(--mdl-typography-icon-fontSize-sm); color: $blue; margin-right: .3rem; vertical-align: middle; diff --git a/src/core/features/search/components/global-search-result/global-search-result.scss b/src/core/features/search/components/global-search-result/global-search-result.scss index 8e25e101c..bc5ac4ee8 100644 --- a/src/core/features/search/components/global-search-result/global-search-result.scss +++ b/src/core/features/search/components/global-search-result/global-search-result.scss @@ -17,7 +17,7 @@ --module-icon-size: var(--core-global-search-result-icon-size); --module-legacy-icon-size: var(--core-global-search-result-icon-size); - margin-inline-end: var(--spacing-2); + margin-inline-end: var(--mdl-spacing-2); margin-top: 0px; margin-bottom: 0px; flex-shrink: 0; @@ -27,7 +27,7 @@ width: var(--core-global-search-result-icon-size); height: var(--core-global-search-result-icon-size); - margin-inline-end: var(--spacing-2); + margin-inline-end: var(--mdl-spacing-2); flex-shrink: 0; } @@ -36,15 +36,15 @@ core-user-avatar { --core-avatar-size: var(--core-global-search-result-image-size); - margin-top: var(--spacing-3); - margin-bottom: var(--spacing-3); + margin-top: var(--mdl-spacing-3); + margin-bottom: var(--mdl-spacing-3); } core-course-image { --core-image-size: var(--core-global-search-result-image-size); - margin-top: var(--spacing-3); - margin-bottom: var(--spacing-3); + margin-top: var(--mdl-spacing-3); + margin-bottom: var(--mdl-spacing-3); } ion-label { @@ -72,12 +72,12 @@ justify-items: center; align-items: center; color: var(--core-global-search-result-context-color); - margin-top: var(--spacing-2); - margin-inline-end: var(--spacing-4); + margin-top: var(--mdl-spacing-2); + margin-inline-end: var(--mdl-spacing-4); font-size: 12px; ion-icon { - margin-inline-end: var(--spacing-1); + margin-inline-end: var(--mdl-spacing-1); flex-shrink: 0; } diff --git a/src/core/features/search/components/search-box/search-box.scss b/src/core/features/search/components/search-box/search-box.scss index 1ca07ae02..8afdc8c3d 100644 --- a/src/core/features/search/components/search-box/search-box.scss +++ b/src/core/features/search/components/search-box/search-box.scss @@ -1,5 +1,5 @@ :host { - --height: var(--a11y-min-target-size); + --height: var(--a11y-sizing-minTargetSize); --search-height: calc(var(--height) - 2px); min-height: var(--height); display: block; @@ -28,7 +28,7 @@ ion-button.button { margin: 0; - --a11y-min-target-size: var(--search-height); + --a11y-sizing-minTargetSize: var(--search-height); --padding-start: 0px; --padding-end: 0px; font-size: 12px; @@ -50,7 +50,7 @@ } ion-item { - --min-height: var(--a11y-min-target-size); + --min-height: var(--a11y-sizing-minTargetSize); --border-width: 0px; --background: var(--core-search-box-background); diff --git a/src/core/features/sitehome/pages/index/index.scss b/src/core/features/sitehome/pages/index/index.scss index 9c849123b..3d9bc3163 100644 --- a/src/core/features/sitehome/pages/index/index.scss +++ b/src/core/features/sitehome/pages/index/index.scss @@ -2,7 +2,7 @@ ion-item ion-icon { display: inline-block; - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); padding: 4px; background-color: var(--gray-100); color: var(--gray-900); diff --git a/src/theme/components/collapsible-item.scss b/src/theme/components/collapsible-item.scss index 679cb75c6..998a055d5 100644 --- a/src/theme/components/collapsible-item.scss +++ b/src/theme/components/collapsible-item.scss @@ -38,7 +38,7 @@ min-width: var(--toggle-size); height: var(--toggle-size); width: var(--toggle-size); - --border-radius: var(--radius-xl); + --border-radius: var(--mdl-shape-borderRadius-xl); border-radius: var(--border-radius); --padding-start: 0px; --padding-end: 0px; diff --git a/src/theme/components/discussion.scss b/src/theme/components/discussion.scss index c2cc72133..c1b40616e 100644 --- a/src/theme/components/discussion.scss +++ b/src/theme/components/discussion.scss @@ -1,5 +1,3 @@ -@use "theme/globals" as *; - :host-context(.ios) { ion-footer .toolbar:last-child { padding-bottom: 4px; diff --git a/src/theme/components/error-accordion.scss b/src/theme/components/error-accordion.scss index 4bc7f20af..e99653bf6 100644 --- a/src/theme/components/error-accordion.scss +++ b/src/theme/components/error-accordion.scss @@ -4,18 +4,24 @@ --background-color: var(--gray-300); --toggle-icon-size: 16px; + --text-color-secondary: var(--gray-800); + + --state-color-hover: rgb(40 40 40, 4%); // --gray-900 4% + --state-color-pressed: rgb(40 40 40, 12%); // --gray-900 12% + --state-color-focused: rgb(40 40 40, 12%); // --gray-900 12% + background: var(--background-color); - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); .core-error-accordion--code { margin: 0; text-align: start; - color: var(--text-color-main); - font: var(--subtitle-md-font); - padding-top: var(--spacing-2); - padding-bottom: var(--spacing-2); - padding-inline-start: var(--spacing-3); - padding-inline-end: var(--spacing-3); + color: var(--text-color); + font: var(--mdl-typography-subtitle-font-md); + padding-top: var(--mdl-spacing-2); + padding-bottom: var(--mdl-spacing-2); + padding-inline-start: var(--mdl-spacing-3); + padding-inline-end: var(--mdl-spacing-3); } .core-error-accordion--details { @@ -30,12 +36,12 @@ p { margin: 0; - padding-top: var(--spacing-2); - padding-bottom: var(--spacing-2); - padding-inline-start: var(--spacing-3); - padding-inline-end: var(--spacing-3); + padding-top: var(--mdl-spacing-2); + padding-bottom: var(--mdl-spacing-2); + padding-inline-start: var(--mdl-spacing-3); + padding-inline-end: var(--mdl-spacing-3); text-align: start; - font: var(--body-md-font); + font: var(--mdl-typography-body-font-md); color: var(--text-color-secondary); } @@ -48,11 +54,11 @@ background: transparent; justify-content: space-between; color: var(--text-color-secondary); - font: var(--label-lg-font); - padding-top: var(--spacing-2); - padding-bottom: var(--spacing-2); - padding-inline-start: var(--spacing-3); - padding-inline-end: var(--spacing-3); + font: var(--mdl-typography-label-font-lg); + padding-top: var(--mdl-spacing-2); + padding-bottom: var(--mdl-spacing-2); + padding-inline-start: var(--mdl-spacing-3); + padding-inline-end: var(--mdl-spacing-3); .core-error-accordion--toggle-text { display: flex; @@ -67,7 +73,7 @@ ion-icon { width: var(--toggle-icon-size); - margin-inline-start: var(--spacing-4); + margin-inline-start: var(--mdl-spacing-4); transition: transform var(--toggle-icon-animation-duration) var(--toggle-icon-animation-function); transform: rotate(0); } @@ -82,8 +88,7 @@ } &:focus-visible { - box-shadow: none; - outline: 2px solid var(--state-color-keyboard-focus); + @include core-focus-style(); } &:active { diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss index 073ad9e58..d33aa6793 100644 --- a/src/theme/components/format-text.scss +++ b/src/theme/components/format-text.scss @@ -75,14 +75,14 @@ core-format-text { position: absolute; @include position(null, 10px, 10px, null); color: var(--ion-text-color); - border-radius: var(--radius-xl); + border-radius: var(--mdl-shape-borderRadius-xl); background-color: var(--core-format-text-viewer-icon-background); display: flex; - width: var(--a11y-min-target-size); - height: var(--a11y-min-target-size); - max-width: var(--a11y-min-target-size); - font-size: 24px; + width: var(--a11y-sizing-minTargetSize); + height: var(--a11y-sizing-minTargetSize); + max-width: var(--a11y-sizing-minTargetSize); + font-size: var(--mdl-typography-icon-fontSize-lg); ion-icon { flex: 1; @@ -266,9 +266,9 @@ core-rich-text-editor .core-rte-editor { } img.icon { - font-size: 16px; - width: 16px; - height: 16px; + font-size: var(--mdl-typography-icon-fontSize-sm); + width: var(--mdl-typography-icon-fontSize-sm); + height: var(--mdl-typography-icon-fontSize-sm); margin: 0; padding: 0; -webkit-box-sizing: content-box; @@ -285,7 +285,7 @@ core-rich-text-editor .core-rte-editor { border: 1px solid var(--gray-500); background: var(--contrast-background); padding: 6px 8px; - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); margin-left: 2px; margin-right: 2px; margin-bottom: 10px; @@ -615,7 +615,7 @@ core-rich-text-editor .core-rte-editor { } // utilities/_text.scss - .text-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } + .text-monospace { font-family: var(--mdl-typography-monospace-font) !important; } .text-justify { text-align: justify !important; } .text-wrap { white-space: normal !important; } .text-nowrap { white-space: nowrap !important; } diff --git a/src/theme/components/ion-action-sheet.scss b/src/theme/components/ion-action-sheet.scss new file mode 100644 index 000000000..c76df351e --- /dev/null +++ b/src/theme/components/ion-action-sheet.scss @@ -0,0 +1,37 @@ +ion-action-sheet { + --button-color: var(--ion-text-color); + --button-color-selected: var(--ion-text-color); + + .action-sheet-title { + --color: var(--ion-text-color); + font-weight: bold; + } + + @media (min-height: 500px) { + --max-height: 50%; + --height: 100%; + } + + .action-sheet-cancel { + --button-color: var(--danger); + } + + &.md { + .action-sheet-title { + @include padding(4px, null, 4px, 16px); + font-size: 12px; + min-height: auto; + color: var(--medium); + line-height: 2em; + font-weight: normal; + } + + .action-sheet-group:first-child { + border-radius: var(--mdl-shape-borderRadius-lg) var(--mdl-shape-borderRadius-lg) 0 0; + } + + .action-sheet-group-cancel { + box-shadow: var(--drop-shadow-top, none); + } + } +} diff --git a/src/theme/components/ion-back-button.scss b/src/theme/components/ion-back-button.scss new file mode 100644 index 000000000..003168ef4 --- /dev/null +++ b/src/theme/components/ion-back-button.scss @@ -0,0 +1,8 @@ +ion-back-button { + --min-height: var(--a11y-sizing-minTargetSize); + --min-width: var(--a11y-sizing-minTargetSize); + + &.md::part(text) { + display: none; + } +} diff --git a/src/theme/components/ion-button.scss b/src/theme/components/ion-button.scss new file mode 100644 index 000000000..0ff8ee7fa --- /dev/null +++ b/src/theme/components/ion-button.scss @@ -0,0 +1,107 @@ + +ion-button { + margin: 4px 8px; + + ion-spinner[slot=start], + img[slot=start] { + @include margin-horizontal(-0.3em, 0.3em); + } + + ion-spinner[slot=end], + img[slot=end] { + @include margin-horizontal(-0.3em, 0.3em); + } + + ion-spinner[slot] { + width: 20px; + color: inherit; + } + + &.button-outline { + --border-width: var(--core-input-border-width); + --border-color: var(--core-input-stroke); + --background: var(--core-input-background); + --color: var(--core-input-text); + --ion-color-primary: var(--core-input-text); + &.ios { + --color-activated: var(--contrast-background); + } + } + + &.button-solid { + --box-shadow: none; + } + + core-format-text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + line-height: 1.2; + } + + > * { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &.ion-text-wrap { + white-space: normal; + core-format-text { + white-space: normal; + display: contents; + } + + & > * { + white-space: normal; + } + } + + ion-spinner { + --color: inherit !important; + } + + &.button-has-icon-only { + margin: 2px; + } + + &:not(.button-has-icon-only):not(.button-small) > ion-icon { + min-width: 20px; + } + + &.button.button-clear.button-has-icon-only { + --border-radius: var(--mdl-shape-borderRadius-xl); + } + + &.button.button-clear { + --color: var(--core-input-text); + --ion-color-primary: var(--core-input-text); + } + + &.button.button-solid, + &.button.button-outline { + --border-radius: var(--core-input-radius); + } + + .select-icon { + margin: var(--icon-margin); + width: 19px; + height: 19px; + position: relative; + + .select-icon-inner { + left: 5px; + top: 50%; + margin-top: -2px; + position: absolute; + width: 0px; + height: 0px; + color: currentcolor; + pointer-events: none; + border-top: 5px solid; + border-right: 5px solid transparent; + border-left: 5px solid transparent; + } + } +} diff --git a/src/theme/components/ion-card.scss b/src/theme/components/ion-card.scss new file mode 100644 index 000000000..af6075e72 --- /dev/null +++ b/src/theme/components/ion-card.scss @@ -0,0 +1,43 @@ +ion-card { + --border-width: var(--ion-card-border-width); + --border-style: solid; + --border-color: var(--ion-card-border-color); + --box-shadow: none; + --border-radius: var(--ion-card-radius); + + box-shadow: var(--box-shadow); + margin: var(--ion-card-vertical-margin) var(--ion-card-horizontal-margin); + border-width: var(--border-width); + border-style: var(--border-style); + border-color: var(--border-color); + border-radius: var(--border-radius); + + &::part(native) { + --border-width: 0; + } + + ion-item:only-child { + --inner-border-width: 0px; + } + + ion-card-title { + font-size: 20px; + } + + &.core-card-with-buttons .item ion-label { + margin-bottom: 0; + } + + .core-card-buttons { + display: flex; + flex-direction: row; + justify-content: flex-end; + margin: 0px 8px 8px 8px; + + ion-button { + &[fill="outline"] { + --background: transparent; + } + } + } +} diff --git a/src/theme/components/ion-chip.scss b/src/theme/components/ion-chip.scss new file mode 100644 index 000000000..cb92de73f --- /dev/null +++ b/src/theme/components/ion-chip.scss @@ -0,0 +1,80 @@ + +ion-chip { + padding: 4px 8px; + height: auto; + + // Chips are not currently clickable, only if specified explicitly. + &.ion-activatable:not(.clickable) { + cursor: auto; + pointer-events: none; + } + &.clickable { + cursor: pointer; + pointer-events: auto; + } + + &.fab-chip { + padding: 8px 12px; + box-shadow: 0 2px 4px rgb(0 0 0 / 40%); + } + + &.ion-color { + background: var(--ion-color-tint); + &.chip-outline { + background-color: transparent; + border-color: var(--ion-color-base); + color: var(--ion-color-base); + } + &.fab-chip { + background: var(--ion-color); + color: var(--ion-color-contrast); + } + + &.ion-color-light, + &.ion-color-medium, + &.ion-color-dark, + &.ion-color-secondary { + color: var(--gray-900); + &.chip-outline { + color: var(--text-color); + } + } + } + + &:not(.ion-color) ion-icon { + color: var(--text-color); + } +} + +ion-chip, +ion-button.button.chip { + line-height: 1.1; + font-size: 12px; + min-height: 24px; + margin: 4px; + font-weight: normal; + + ion-icon { + font-size: var(--mdl-typography-icon-fontSize-sm); + min-width: var(--mdl-typography-icon-fontSize-sm); + @include margin(0, 8px, 0, 0); + } + + ion-label { + white-space: normal !important; + } +} + +ion-button.button.chip { + --border-radius: var(--mdl-shape-borderRadius-md); + min-height: 32px; + font-size: 14px; + + ion-icon[slot=start] { + @include margin(0, 8px, 0, 0); + } + + ion-icon[slot=end] { + @include margin(0, 0, 0, 8px); + } +} diff --git a/src/theme/components/ion-content.scss b/src/theme/components/ion-content.scss new file mode 100644 index 000000000..4b25d4035 --- /dev/null +++ b/src/theme/components/ion-content.scss @@ -0,0 +1,4 @@ +ion-content { + --background: var(--ion-background-color); + --background-alternative: var(--gray-200); +} diff --git a/src/theme/components/ion-header.scss b/src/theme/components/ion-header.scss new file mode 100644 index 000000000..e006f8e80 --- /dev/null +++ b/src/theme/components/ion-header.scss @@ -0,0 +1,140 @@ +ion-header, +ion-header.header-md { + z-index: 12; // To hide swiper-container on scroll. + + box-shadow: var(--core-header-shadow, none); + transition: box-shadow 0.5s; + + ion-toolbar { + --color: var(--core-header-toolbar-color); + --background: var(--core-header-toolbar-background); + --border-width: 0 0 var(--core-header-toolbar-border-width) 0; + --border-color: var(--core-header-toolbar-border-color); + + ion-button { + --ion-toolbar-color: var(--core-header-toolbar-color); + --color: var(--core-header-toolbar-color); + } + + ion-spinner { + --ion-color-base: var(--core-header-toolbar-color); + --color: var(--core-header-toolbar-color); + margin: 10px; + } + + ion-back-button, + .in-toolbar.button-clear, + .in-toolbar.button-solid, + .button.button-clear, + .button.button-solid { + --color: var(--core-header-buttons-color); + --background: var(--core-header-buttons-background); + --ion-toolbar-color: var(--core-header-buttons-color); + --border-radius: var(--mdl-shape-borderRadius-xl); + --primary: var(--core-header-buttons-color); + } + + ion-back-button::part(text) { + display: none; + } + + // Style fake back button like the original ones. + ion-button.ion-back-button { + width: 48px !important; + } + + .button.button-clear.button-has-icon-only, + .button.button-solid.button-has-icon-only { + width: var(--a11y-sizing-minTargetSize); + height: var(--a11y-sizing-minTargetSize); + ion-icon { + font-size: var(--mdl-typography-icon-fontSize-lg); + } + } + + .core-navbar-button-hidden { + display: none !important; + } + } + + ion-title { + @include padding(0, 16px); + + h1, h2, .subheading { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + margin: 0; + } + + .filter_mathjaxloader_equation div { + display: inline !important; + } + + h1 { + .core-header-logo { + max-height: var(--core-mainpage-headerlogo-maxheight); + display: var( --core-mainpage-headerlogo-display); + } + + .core-header-sitename { + display: var(--core-mainpage-sitename-display); + } + } + + h1, h2, .subheading { + font-size: var(--mdl-typography-label-lineHeight-lg); + font-weight: 500; + letter-spacing: .0125em; + text-align: start; + padding: 0; + } + + h1 + h2, + h1 + .subheading { + font-size: var(--text-size); + font-weight: 400; + } + + &.ios { + position: static; + width: auto; + height: auto; + left: auto; + right: auto; + top: auto; + text-align: start; + + h1, h2, .subheading { + font-size: var(--mdl-typography-label-lineHeight-md); + font-weight: 600; + } + + h1 + h2, + h1 + .subheading { + font-size: var(--text-size); + font-weight: 400; + } + } + } + + &.core-header-shadow { + --core-header-shadow: var(--drop-shadow-bottom, none); + } + + &::after { + display: none; + } + + &.header-ios ion-toolbar:last-of-type { + --border-width: 0 0 var(--core-header-toolbar-border-width) 0; + } + + &.no-title { + --core-header-toolbar-border-width: 0; + --core-header-toolbar-background: transparent; + --core-header-shadow: none !important; + --core-header-buttons-background: var(--ion-background-color); + --core-header-buttons-color: var(--text-color); + } +} diff --git a/src/theme/components/ion-item-divider.scss b/src/theme/components/ion-item-divider.scss new file mode 100644 index 000000000..d4bb6f37b --- /dev/null +++ b/src/theme/components/ion-item-divider.scss @@ -0,0 +1,21 @@ +ion-item-divider.item, +ion-item.item.divider { + --background: var(--item-divider-background); + --color: var(--item-divider-color); + --min-height: var(--item-divider-min-height); + + min-height: var(--min-height); + border-bottom-width: var(--item-divider-border-width); + --border-width: var(--item-divider-border-width); + --inner-border-width: 0 0 var(--item-divider-border-width) 0; + + ion-label h2, + ion-label p.item-heading { + font-size: var(--item-divider-font-size); + font-weight: 500; + line-height: 1.5; + } + ion-label h2.big { + font-size: var(--item-divider-font-size-big); + } +} diff --git a/src/theme/components/ion-item.scss b/src/theme/components/ion-item.scss new file mode 100644 index 000000000..4febd0a8e --- /dev/null +++ b/src/theme/components/ion-item.scss @@ -0,0 +1,127 @@ +ion-item { + --detail-icon-color: var(--ion-item-detail-icon-color); + --detail-icon-font-size: var(--ion-item-detail-icon-font-size); + --detail-icon-opacity: var(--ion-item-detail-icon-opacity); + + > ion-icon[slot] { + color: var(--ion-item-icon-color); + } + + &.item-lines-default { + --inner-border-width: 0px; + --border-width: 0px; + } + + &.ion-valid, + &.ion-invalid { + --inner-border-width: 0 0 1px 0; + + &.ion-touched { + &.ion-invalid { + --ion-item-border-color: var(--highlight-color-invalid); + --highlight-background: var(--ion-item-border-color); + --border-color: var(--ion-item-border-color); + } + &.ion-valid { + --ion-item-border-color: var(--highlight-color-valid); + --highlight-background: var(--ion-item-border-color); + --border-color: var(--ion-item-border-color); + } + } + } + + // Hide details on items to align badges. + &.hide-detail { + --detail-icon-opacity: 0; + } +} +// Fake item. +div.fake-ion-item { + position: relative; + align-items: center; + justify-content: space-between; + outline: none; + color: var(--ion-text-color); + background: var(--ion-item-background); + text-align: initial; + text-decoration: none; + overflow: hidden; + box-sizing: border-box; +} + +.md div.fake-ion-item { + font-size: 16px; + font-weight: normal; + text-transform: none; + @include padding(null, 16px, null, 16px); + @include margin(11px, null, 10px, null); + + h1 { + @include margin(0, 0, 2px); + font-size: 24px; + font-weight: normal; + } + + h2 { + @include margin(2px, 0); + font-size: 16px; + font-weight: normal; + } + + h3, + h4, + h5, + h6 { + @include margin(2px, 0); + + font-size: var(--text-size); + font-weight: normal; + + line-height: normal; + } + + p { + @include margin(0, 0, 2px); + font-size: var(--text-size); + line-height: 20px; + text-overflow: inherit; + overflow: inherit; + } +} + +.ios div.fake-ion-item { + font-size: var(--text-size); + @include padding(null, 10px, null, 20px); + @include margin(10px, 8px, 10px, null); + + h1 { + @include margin(3px, 0, 2px); + font-size: 22px; + font-weight: normal; + } + + h2 { + @include margin(0, 0, 2px); + font-size: 17px; + font-weight: normal; + } + + h3, + h4, + h5, + h6 { + @include margin(0, 0, 3px); + font-size: var(--text-size); + font-weight: normal; + line-height: normal; + } + + p { + @include margin(0, 0, 2px 0); + font-size: var(--text-size); + line-height: normal; + text-overflow: inherit; + overflow: inherit; + } + +} diff --git a/src/theme/components/ion-loading.scss b/src/theme/components/ion-loading.scss new file mode 100644 index 000000000..1316c2906 --- /dev/null +++ b/src/theme/components/ion-loading.scss @@ -0,0 +1,8 @@ +ion-loading { + --spinner-color: var(--core-loading-spinner); + --border-radius: var(--modal-radius); + + .loading-wrapper { + border-radius: var(--border-radius) !important; + } +} diff --git a/src/theme/components/ion-note.scss b/src/theme/components/ion-note.scss new file mode 100644 index 000000000..3cdbcdd35 --- /dev/null +++ b/src/theme/components/ion-note.scss @@ -0,0 +1,3 @@ +ion-note { + --color: var(--subdued-text-color); +} diff --git a/src/theme/components/ion-popover.scss b/src/theme/components/ion-popover.scss new file mode 100644 index 000000000..8f4b4651e --- /dev/null +++ b/src/theme/components/ion-popover.scss @@ -0,0 +1,19 @@ +ion-popover { + &::part(content) { + border-radius: var(--modal-radius); + } + &.md { + margin-top: 2px; + margin-bottom: 2px; + + // Never show backdrop on popovers on Android + // @todo Apply box shadow on ios and make it transparent too. The main problem is the box arrow. + &::part(backdrop) { + background: transparent; + } + } + + &.ios { + --min-width: 250px; + } +} diff --git a/src/theme/components/ion-searchbar.scss b/src/theme/components/ion-searchbar.scss new file mode 100644 index 000000000..328b5efd6 --- /dev/null +++ b/src/theme/components/ion-searchbar.scss @@ -0,0 +1,35 @@ +ion-searchbar, +.ios ion-searchbar { + --background: var(--ion-searchbar-background); + --border-color: var(--ion-searchbar-border-color); + --color: var(--ion-searchbar-color); + --border-radius: var(--mdl-shape-borderRadius-xs); + --icon-color: var(--ion-searchbar-icon-color); + --height: var(--ion-searchbar-height); + + height: var(--height) !important; + + .searchbar-input-container { + color: var(--color) !important; + height: var(--height) !important; + } + + .searchbar-input { + --border-radius: var(--mdl-shape-borderRadius-xs); + + height: var(--height) !important; + border: 1px solid var(--border-color) !important; + box-shadow: none !important; + border-radius: var(--border-radius) !important; + background: var(--background) !important; + @include padding-horizontal(var(--height) !important); + } + + .searchbar-search-icon { + @include position(null, null, null, calc(var(--height) / 4) !important); + } + + button { + @include position(null, 0px !important, null, null); + } +} diff --git a/src/theme/components/ion-spinner.scss b/src/theme/components/ion-spinner.scss new file mode 100644 index 000000000..f3b667b6f --- /dev/null +++ b/src/theme/components/ion-spinner.scss @@ -0,0 +1,6 @@ +ion-spinner, +ion-refresher { + --ion-color-base: var(--core-loading-spinner); + --ion-color-primary: var(--core-loading-spinner); + --color: var(--core-loading-spinner); +} diff --git a/src/theme/components/ion-tab-bar.scss b/src/theme/components/ion-tab-bar.scss new file mode 100644 index 000000000..81864b57b --- /dev/null +++ b/src/theme/components/ion-tab-bar.scss @@ -0,0 +1,6 @@ +ion-tab-bar.mainmenu-tabs { + --background: var(--core-bottom-tabs-background); + --color: var(--core-bottom-tabs-color); + --color-selected: var(--core-bottom-tabs-color-selected); + --background-selected: var(--core-bottom-tabs-background-selected); +} diff --git a/src/theme/components/ion-toast.scss b/src/theme/components/ion-toast.scss new file mode 100644 index 000000000..e14be047a --- /dev/null +++ b/src/theme/components/ion-toast.scss @@ -0,0 +1,21 @@ +@import "../globals.scss"; + +ion-toast { + --color: var(--ion-color-step-50); + --button-color: var(--primary); + --background: var(--ion-color-step-800); + + @include media-breakpoint-down(sm) { + &::part(container) { + flex-direction: column; + } + } + + @each $color-name, $unused in $colors { + &.core-#{$color-name}-toast { + --background: var(--ion-color-#{$color-name}-tint); + --color: var(--ion-color-#{$color-name}-shade); + --button-color: var(--ion-color-#{$color-name}-shade); + } + } +} diff --git a/src/theme/helpers/custom.mixins.scss b/src/theme/helpers/custom.mixins.scss index f62bd6116..ae8f6e920 100644 --- a/src/theme/helpers/custom.mixins.scss +++ b/src/theme/helpers/custom.mixins.scss @@ -69,8 +69,9 @@ @mixin core-focus() { outline: none; position: relative; + &::after { - @include position(0, 0, 0, 0); + @include position(0px, 0px, 0px, 0px); position: absolute; content: ""; opacity: 1; @@ -80,10 +81,10 @@ } @mixin core-focus-style() { - box-shadow: inset 0 0 var(--a11y-focus-width) 1px var(--a11y-focus-color); + box-shadow: var(--a11y-shadow-focus-boxShadow); border-radius: var(--border-radius); // Thicker option: - // border: var(--a11y-focus-width) solid var(--a11y-focus-color); + // outline: var(--a11y-shadow-focus-outline); } @mixin core-transition($properties: all, $duration: 500ms, $timing-function: ease-in-out) { @@ -198,22 +199,22 @@ @mixin core-headings() { h1 { - font: var(--heading-1-font); + font: var(--mdl-typography-heading1-font); } h2, .item-heading { - font: var(--heading-2-font); + font: var(--mdl-typography-heading2-font); } h3 { - font: var(--heading-3-font); + font: var(--mdl-typography-heading3-font); } h4 { - font: var(--heading-4-font); + font: var(--mdl-typography-heading4-font); } h5 { - font: var(--heading-5-font); + font: var(--mdl-typography-heading5-font); } h6 { - font: var(--heading-6-font); + font: var(--mdl-typography-heading6-font); } } diff --git a/src/theme/helpers/helpers.scss b/src/theme/helpers/helpers.scss index 03d86944d..21efb5344 100644 --- a/src/theme/helpers/helpers.scss +++ b/src/theme/helpers/helpers.scss @@ -5,6 +5,9 @@ // Global Color Functions @import "./ionic.functions.color"; +// Global Font Functions +@import "./ionic.functions.font"; + // Global Mixins @import "./ionic.mixins"; diff --git a/src/theme/helpers/ionic.functions.font.scss b/src/theme/helpers/ionic.functions.font.scss new file mode 100644 index 000000000..4c329f4ff --- /dev/null +++ b/src/theme/helpers/ionic.functions.font.scss @@ -0,0 +1,70 @@ +/** + * Imported ionic color functions for SCSS + * ---------------------------------------------------------------------------- + * Extracted from + * https://github.com/ionic-team/ionic-framework/blob/main/core/src/themes/ionic.functions.font.scss + */ + +@use "sass:math"; + +$baselineSize: 16px !default; +$baselineUnit: 1rem !default; + +/** + * Convert a font size to a dynamic font size. + * Fonts that participate in Dynamic Type should use + * dynamic font sizes. + * @param size - The initial font size including the unit (i.e. px or pt) + * @param unit (optional) - The unit to convert to. Use this if you want to + * convert to a unit other than $baselineUnit. + */ +@function dynamic-font($size, $unit: $baselineUnit) { + @return (math.div($size, $baselineSize)) * $unit; +} + +/** + * Convert a font size to a dynamic font size but impose + * a maximum font size. + * @param size - The initial font size including the unit (i.e. px or pt) + * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale). + * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to + * convert to a unit other than $baselineUnit. + */ +@function dynamic-font-max($size, $maxScale, $unit: $baselineUnit) { + $baseScale: dynamic-font($size, $unit); + $maxScale: $size * $maxScale; + + @return min($baseScale, $maxScale); +} + +/** + * Convert a font size to a dynamic font size but impose + * a minimum font size. + * @param size - The initial font size including the unit (i.e. px or pt) + * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale). + * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to + * convert to a unit other than $baselineUnit. + */ +@function dynamic-font-min($minScale, $size, $unit: $baselineUnit) { + $baseScale: dynamic-font($size, $unit); + $minScale: $size * $minScale; + + @return max($minScale, $baseScale); +} + +/** + * Convert a font size to a dynamic font size but impose + * maximum and minimum font sizes. + * @param size - The initial font size including the unit (i.e. px or pt) + * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale). + * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale). + * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to + * convert to a unit other than $baselineUnit. + */ +@function dynamic-font-clamp($minScale, $baseSize, $maxScale, $unit: $baselineUnit) { + $baseScale: dynamic-font($baseSize, $unit); + $maxScale: $baseSize * $maxScale; + $minScale: $baseSize * $minScale; + + @return clamp($minScale, $baseScale, $maxScale); +} diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index c674fc16a..30367a9f8 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -9,6 +9,7 @@ html.force-safe-area-margins { // @todo MOBILE-3790 non-standard property, doesn't work everywhere. html { + --zoom-level: 100%; zoom: var(--zoom-level); } @@ -16,6 +17,15 @@ body { -webkit-text-size-adjust: var(--zoom-level); } +a { + color: var(--core-link-color); + cursor: pointer; +} + +html[dir=rtl] { + --rotate-expandable: rotate(-90deg); +} + // Common styles. .text-left { text-align: left; } .text-right { text-align: right; } @@ -144,117 +154,13 @@ ion-toolbar { --min-height: var(--core-header-toolbar-height); } -// Header. -ion-header { - z-index: 12; // To hide swiper-container on scroll. - - ion-toolbar { - ion-spinner { - margin: 10px; - } - - ion-back-button, - .in-toolbar.button-clear, - .in-toolbar.button-solid, - .button.button-clear, - .button.button-solid { - --color: var(--core-header-buttons-color); - --background: var(--core-header-buttons-background); - --ion-toolbar-color: var(--core-header-buttons-color); - --border-radius: var(--radius-xl); - --primary: var(--core-header-buttons-color); - } - ion-back-button::part(text) { - display: none; - } - - // Style fake back button like the original ones. - ion-button.ion-back-button { - width: 48px !important; - } - - .button.button-clear.button-has-icon-only, - .button.button-solid.button-has-icon-only { - width: var(--a11y-min-target-size); - height: var(--a11y-min-target-size); - ion-icon { - font-size: 24px; - } - } - - .core-navbar-button-hidden { - display: none !important; - } - } - - ion-title { - @include padding(0, 16px); - - h1, h2, .subheading { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - margin: 0; - } - - .filter_mathjaxloader_equation div { - display: inline !important; - } - - h1 { - .core-header-logo { - max-height: var(--core-mainpage-headerlogo-maxheight); - display: var( --core-mainpage-headerlogo-display); - } - - .core-header-sitename { - display: var(--core-mainpage-sitename-display); - } - } - - h1, h2, .subheading { - font-size: 20px; - font-weight: 500; - letter-spacing: .0125em; - text-align: start; - padding: 0; - } - - h1 + h2, - h1 + .subheading { - font-size: var(--text-size); - font-weight: 400; - } - - &.ios { - position: static; - width: auto; - height: auto; - left: auto; - right: auto; - top: auto; - text-align: start; - - h1, h2, .subheading { - font-size: 17px; - font-weight: 600; - } - - h1 + h2, - h1 + .subheading { - font-size: var(--text-size); - font-weight: 400; - } - } - } -} - ion-tabs.hide-header ion-header { display: none; } ion-footer { background-color: var(--contrast-background); + > ion-toolbar:only-child { top: 1px; } @@ -266,8 +172,8 @@ ion-fab-button, button, [role="button"] { text-transform: none; - min-height: var(--a11y-min-target-size); - min-width: var(--a11y-min-target-size); + min-height: var(--a11y-sizing-minTargetSize); + min-width: var(--a11y-sizing-minTargetSize); &.button-large { min-height: 2.8em; @@ -279,113 +185,6 @@ ion-fab-button { --box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%); } -ion-button { - margin: 4px 8px; - - ion-spinner[slot=start], - img[slot=start] { - @include margin-horizontal(-0.3em, 0.3em); - } - - ion-spinner[slot=end], - img[slot=end] { - @include margin-horizontal(-0.3em, 0.3em); - } - - ion-spinner[slot] { - width: 20px; - color: inherit; - } -} - -ion-button.button-outline { - --border-width: var(--core-input-border-width); - --border-color: var(--core-input-stroke); - --background: var(--core-input-background); - --color: var(--core-input-text); - --ion-color-primary: var(--core-input-text); - &.ios { - --color-activated: var(--contrast-background); - } -} - -ion-button.button-solid { - --box-shadow: none; -} - -ion-button core-format-text { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: block; - line-height: 1.2; -} - -ion-button > * { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -ion-button.ion-text-wrap { - white-space: normal; - core-format-text { - white-space: normal; - display: contents; - } - - & > * { - white-space: normal; - } -} - -ion-button ion-spinner { - --color: inherit !important; -} - -ion-button.button-has-icon-only { - margin: 2px; -} - -ion-button:not(.button-has-icon-only):not(.button-small) > ion-icon { - min-width: 20px; -} - -ion-button.button.button-clear.button-has-icon-only { - --border-radius: var(--radius-xl); -} - -ion-button.button.button-clear { - --color: var(--core-input-text); - --ion-color-primary: var(--core-input-text); -} - -ion-button.button.button-solid, -ion-button.button.button-outline { - --border-radius: var(--core-input-radius); -} - -ion-button .select-icon { - margin: var(--icon-margin); - width: 19px; - height: 19px; - position: relative; - - .select-icon-inner { - left: 5px; - top: 50%; - margin-top: -2px; - position: absolute; - width: 0px; - height: 0px; - color: currentcolor; - pointer-events: none; - border-top: 5px solid; - border-right: 5px solid transparent; - border-left: 5px solid transparent; - } -} - [role="button"], .clickable { cursor: pointer; @@ -525,31 +324,6 @@ ion-alert { } } -ion-loading { - --border-radius: var(--modal-radius); - - .loading-wrapper { - border-radius: var(--border-radius) !important; - } -} - -// Toasts. -ion-toast { - @include media-breakpoint-down(sm) { - &::part(container) { - flex-direction: column; - } - } -} - -@each $color-name, $unused in $colors { - ion-toast.core-#{$color-name}-toast { - --background: var(--ion-color-#{$color-name}-tint); - --color: var(--ion-color-#{$color-name}-shade); - --button-color: var(--ion-color-#{$color-name}-shade); - } -} - // Ionic list. ion-list { padding: 0 !important; @@ -582,6 +356,17 @@ ion-tabs.placement-bottom .tabs-inner { --ion-safe-area-bottom: 0px; } +core-tabs, core-tabs-outlet { + swiper-slide { + --background: var(--core-tab-background); + --color: var(--core-tab-color); + --border-color: var(--core-tab-border-color); + --color-active: var(--core-tab-color-active); + --border-color-active: var(--core-tab-border-color-active); + --color-selected: var(--border-color-active); + --font-weight-active: var(--core-tab-font-weight-active); + } +} core-split-view.menu-and-content { .menu { @@ -736,7 +521,7 @@ body.core-iframe-fullscreen ion-router-outlet { } .core-password-modal { - --border-radius: var(--radius-sm); + --border-radius: var(--mdl-shape-borderRadius-sm); --min-width: auto; --min-height: 300px; --width: 384px; @@ -800,7 +585,7 @@ body.core-iframe-fullscreen ion-router-outlet { } ion-button { - --a11y-min-target-size: 40px; + --a11y-sizing-minTargetSize: 40px; } &.item-directory ion-icon { @@ -835,7 +620,7 @@ body.core-iframe-fullscreen ion-router-outlet { --border-width: 0; --border-color: var(--color-tint); - --border-radius: var(--radius-sm); + --border-radius: var(--mdl-shape-borderRadius-sm); --background: var(--color-tint); --color: var(--color-shade); @@ -914,50 +699,12 @@ img[core-external-content]:not([src]) { visibility: hidden; } -ion-card { - box-shadow: var(--box-shadow); - margin: var(--ion-card-vertical-margin) var(--ion-card-horizontal-margin); - border-width: var(--border-width); - border-style: var(--border-style); - border-color: var(--border-color); - border-radius: var(--border-radius); - - &::part(native) { - --border-width: 0; - } - - ion-item:only-child { - --inner-border-width: 0px; - } - - ion-card-title { - font-size: 20px; - } - - &.core-card-with-buttons .item ion-label { - margin-bottom: 0; - } - - .core-card-buttons { - display: flex; - flex-direction: row; - justify-content: flex-end; - margin: 0px 8px 8px 8px; - - ion-button { - &[fill="outline"] { - --background: transparent; - } - } - } -} - .core-course-module-handler:not(.addon-mod-label-handler) .item-heading .filter_mathjaxloader_equation div { display: inline !important; } .section-summary core-format-text img { - border-radius: var(--radius-lg); + border-radius: var(--mdl-shape-borderRadius-lg); } ion-list.core-course-module-list-wrapper, @@ -996,26 +743,6 @@ ion-toolbar h1 .core-bar-button-image img { display: block; } -// Action sheet. -ion-action-sheet.md { - .action-sheet-title { - @include padding(4px, null, 4px, 16px); - font-size: 12px; - min-height: auto; - color: var(--medium); - line-height: 2em; - font-weight: normal; - } - - .action-sheet-group:first-child { - border-radius: var(--radius-lg) var(--radius-lg) 0 0; - } - - .action-sheet-group-cancel { - box-shadow: var(--drop-shadow-top, none); - } -} - // Radio. ion-radio, input[type=radio], @@ -1173,116 +900,7 @@ ion-select-popover { ion-badge { line-height: 1.1; padding: 2px 8px; - border-radius: var(--radius-lg); -} - -ion-chip, -ion-button.button.chip { - line-height: 1.1; - font-size: 12px; - min-height: 24px; - margin: 4px; - font-weight: normal; - - ion-icon { - font-size: 16px; - min-width: 16px; - @include margin(0, 8px, 0, 0); - } - - ion-label { - white-space: normal !important; - } -} - -ion-button.button.chip { - --border-radius: var(--radius-md); - min-height: 32px; - font-size: 14px; - - ion-icon[slot=start] { - @include margin(0, 8px, 0, 0); - } - - ion-icon[slot=end] { - @include margin(0, 0, 0, 8px); - } -} - -ion-chip { - padding: 4px 8px; - height: auto; - - // Chips are not currently clickable, only if specified explicitly. - &.ion-activatable:not(.clickable) { - cursor: auto; - pointer-events: none; - } - &.clickable { - cursor: pointer; - pointer-events: auto; - } - - &.fab-chip { - padding: 8px 12px; - box-shadow: 0 2px 4px rgb(0 0 0 / 40%); - } - - &.ion-color { - background: var(--ion-color-tint); - &.chip-outline { - background-color: transparent; - border-color: var(--ion-color-base); - color: var(--ion-color-base); - } - &.fab-chip { - background: var(--ion-color); - color: var(--ion-color-contrast); - } - - &.ion-color-light, - &.ion-color-medium, - &.ion-color-dark, - &.ion-color-secondary { - color: var(--gray-900); - &.chip-outline { - color: var(--text-color); - } - } - } - - &:not(.ion-color) ion-icon { - color: var(--text-color); - } -} - -ion-searchbar { - height: var(--height) !important; - --border-radius: var(--radius-xs); - - .searchbar-input-container { - color: var(--color) !important; - height: var(--height) !important; - } - - .searchbar-input { - --border-radius: var(--radius-xs); - - height: var(--height) !important; - border: 1px solid var(--border-color) !important; - box-shadow: none !important; - border-radius: var(--border-radius) !important; - background: var(--background) !important; - @include padding-horizontal(var(--height) !important); - } - - .searchbar-search-icon { - @include position(null, null, null, calc(var(--height) / 4) !important); - } - - button { - @include position(null, 0 !important, null, null); - } + border-radius: var(--mdl-shape-borderRadius-lg); } // File uploader. @@ -1334,7 +952,7 @@ mark, .matchtext { // Monospaced font. .core-monospaced { - font-family: Andale Mono,Monaco,Courier New,DejaVu Sans Mono,monospace; + font-family: var(--mdl-typography-monospace-font); } .core-iframe-offline-disabled { @@ -1370,17 +988,13 @@ details summary { } textarea { - min-height: var(--a11y-min-target-size); + min-height: var(--a11y-sizing-minTargetSize); } textarea:not([core-auto-rows]) { height: 200px; } -ion-back-button.md::part(text) { - display: none; -} - // Hide close button because when present is read on voice over. ion-fab[core-fab] { ion-fab-button::part(close-icon) { @@ -1424,120 +1038,6 @@ audio.core-media-adapt-width { width: 100%; } -ion-item.item-lines-default { - --inner-border-width: 0px; - --border-width: 0px; -} - -ion-item.ion-valid, -ion-item.ion-invalid { - --inner-border-width: 0 0 1px 0; - - &.ion-touched { - &.ion-invalid { - --ion-item-border-color: var(--highlight-color-invalid); - --highlight-background: var(--ion-item-border-color); - --border-color: var(--ion-item-border-color); - } - &.ion-valid { - --ion-item-border-color: var(--highlight-color-valid); - --highlight-background: var(--ion-item-border-color); - --border-color: var(--ion-item-border-color); - } - } -} - -// Fake item. -div.fake-ion-item { - position: relative; - align-items: center; - justify-content: space-between; - outline: none; - color: var(--ion-text-color); - background: var(--ion-item-background); - text-align: initial; - text-decoration: none; - overflow: hidden; - box-sizing: border-box; -} - -html.md div.fake-ion-item { - font-size: 16px; - font-weight: normal; - text-transform: none; - @include padding(null, 16px, null, 16px); - @include margin(11px, null, 10px, null); - - h1 { - @include margin(0, 0, 2px); - font-size: 24px; - font-weight: normal; - } - - h2 { - @include margin(2px, 0); - font-size: 16px; - font-weight: normal; - } - - h3, - h4, - h5, - h6 { - @include margin(2px, 0); - - font-size: var(--text-size); - font-weight: normal; - - line-height: normal; - } - - p { - @include margin(0, 0, 2px); - font-size: var(--text-size); - line-height: 20px; - text-overflow: inherit; - overflow: inherit; - } -} - -html.ios div.fake-ion-item { - font-size: var(--text-size); - @include padding(null, 10px, null, 20px); - @include margin(10px, 8px, 10px, null); - - h1 { - @include margin(3px, 0, 2px); - font-size: 22px; - font-weight: normal; - } - - h2 { - @include margin(0, 0, 2px); - font-size: 17px; - font-weight: normal; - } - - h3, - h4, - h5, - h6 { - @include margin(0, 0, 3px); - font-size: var(--text-size); - font-weight: normal; - line-height: normal; - } - - p { - @include margin(0, 0, 2px 0); - font-size: var(--text-size); - line-height: normal; - text-overflow: inherit; - overflow: inherit; - } - -} - // Disabled items. ion-item.item-disabled, ion-button.button-disabled, @@ -1546,11 +1046,6 @@ ion-datetime.datetime-disabled { opacity: .65 !important; } -// Hide details on items to align badges. -ion-item.hide-detail { - --detail-icon-opacity: 0; -} - // Make links clickable when inside radio or checkbox items. Style part. @media (hover: hover) { ion-item.item-multiple-inputs:not(.item-rte):hover::part(native) { @@ -1600,10 +1095,6 @@ ion-item.item-multiple-inputs.only-links { } } -a { - cursor: pointer; -} - // Case with ion-input + ion-select inside. ion-item.item-input.item-multiple-inputs { .flex-row { @@ -1614,24 +1105,6 @@ ion-item.item-input.item-multiple-inputs { } } -ion-item-divider.item, -ion-item.item.divider { - min-height: var(--min-height); - border-bottom-width: var(--item-divider-border-width); - --border-width: var(--item-divider-border-width); - --inner-border-width: 0 0 var(--item-divider-border-width) 0; - - ion-label h2, - ion-label p.item-heading { - font-size: var(--item-divider-font-size); - font-weight: 500; - line-height: 1.5; - } - ion-label h2.big { - font-size: var(--item-divider-font-size-big); - } -} - ion-item-divider.item, ion-item.item, td { @@ -1821,14 +1294,6 @@ ion-grid.core-no-grid > ion-row { } } -ion-header.no-title { - --core-header-toolbar-border-width: 0; - --core-header-toolbar-background: transparent; - --core-header-shadow: none !important; - --core-header-buttons-background: var(--ion-background-color); - --core-header-buttons-color: var(--text-color); -} - // To make core-swipe-slides fill the remaining height. .core-swipe-slides-container { display: flex; @@ -1978,21 +1443,6 @@ ion-modal { } } -ion-popover { - &::part(content) { - border-radius: var(--modal-radius); - } - &.md { - margin-top: 2px; - margin-bottom: 2px; - - // Never show backdrop on popovers on Android - // @todo Apply box shadow on ios and make it transparent too. The main problem is the box arrow. - &::part(backdrop) { - background: transparent; - } - } -} /* * This is to solve popver issue in chrome 114 diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index c59f05ec1..66ad41d56 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -47,8 +47,8 @@ html.dark { --loader-shine: 90 90 90; - --drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 1); - --drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 1); + --drop-shadow-top: 0px 2px 5px rgb(var(--mdl-shadow-boxShadowColor) / 1); + --drop-shadow-bottom: 0px -2px 5px rgb(var(--mdl-shadow-boxShadowColor) / 1); --ion-card-color: var(--text-color); --ion-card-background: var(--ion-item-background); diff --git a/src/theme/theme.design-system.scss b/src/theme/theme.design-system.scss index 3ef11bc87..ef9a41c88 100644 --- a/src/theme/theme.design-system.scss +++ b/src/theme/theme.design-system.scss @@ -1,146 +1,250 @@ +@import "./globals.scss"; +@import "theme.light.scss"; +@import "theme.dark.scss"; + html { - // Spacing + // Variables in the design system should be named using the following pattern: + // SYSTEM-CATEGORY-CONCEPT-PROPERTY-VARIANT (where the only required part is SYSTEM) + // SYSTEM: The name of the design system (e.g. ion, mdl, app, etc.) + // CATEGORY: The category of the component (e.g. color, typography, spacing, etc.) + // CONCEPT: The concept of the category (e.g. component name) + // PROPERTY: The property of the concept in camel case (e.g. color, fontSize, spacing, etc.) + // VARIANT: The variant of the property (e.g. primary, size[sm, md, lg], dark/light, state etc.) + // + // Some guide: https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676 + + // ***** SPACING category ***** // @for $i from 0 to 6 { - --spacing-#{$i}: #{$i*4}px; + --mdl-spacing-#{$i}: #{$i*4}px; } - // Typography - --font-size-sm: 12px; - --font-size-md: 14px; - --font-size-lg: 16px; + // ***** TYPOGRAPHY category ***** // + // Sintaxis:[ || || ]? [ / ]? + --mdl-typography-fontSize-sm: #{dynamic-font(12px)}; // 0.75rem + --mdl-typography-fontSize-md: #{dynamic-font(14px)}; // 0.875rem + --mdl-typography-fontSize-lg: #{dynamic-font(16px)}; // 1rem - --font-weight-normal: 400; - --font-weight-medium: 500; + --mdl-typography-fontWeight-normal: 400; + --mdl-typography-fontWeight-medium: 500; - // Typography - Body - --body-font-size-sm: var(--font-size-sm); - --body-font-size-md: var(--font-size-md); - --body-font-size-lg: var(--font-size-lg); - --body-font-weight: var(--font-weight-normal); - --body-line-height: 150%; + --mdl-typography-monospace-font: Andale Mono,Monaco,Courier New,DejaVu Sans Mono,monospace; - --body-sm-font: normal normal var(--body-font-weight) var(--body-font-size-sm)/var(--body-line-height) var(--ion-font-family); - --body-md-font: normal normal var(--body-font-weight) var(--body-font-size-md)/var(--body-line-height) var(--ion-font-family); - --body-lg-font: normal normal var(--body-font-weight) var(--body-font-size-lg)/var(--body-line-height) var(--ion-font-family); + // Body font size + --mdl-typography-body-fontSize-sm: var(--mdl-typography-fontSize-sm); + --mdl-typography-body-fontSize-md: var(--mdl-typography-fontSize-md); + --mdl-typography-body-fontSize-lg: var(--mdl-typography-fontSize-lg); - // Typography - Links - --link-sm-font-size: var(--font-size-sm); - --link-md-font-size: var(--font-size-md); - --link-lg-font-size: var(--font-size-lg); - --link-font-weight: var(--font-weight-normal); - --link-line-height: 150%; + --mdl-typography-body-fontWeight: var(--mdl-typography-fontWeight-normal); + --mdl-typography-body-lineHeight: 150%; + --mdl-typography-body-letterSpacing: 0.5px; + --mdl-typography-body-paragraphSpacing: 150%; - --link-sm-font: normal normal var(--link-font-weight) var(--link-sm-font-size)/var(--link-line-height) var(--ion-font-family); - --link-md-font: normal normal var(--link-font-weight) var(--link-md-font-size)/var(--link-line-height) var(--ion-font-family); - --link-lg-font: normal normal var(--link-font-weight) var(--link-lg-font-size)/var(--link-line-height) var(--ion-font-family); + --mdl-typography-body-font-sm: normal normal var(--mdl-typography-body-fontWeight) var(--mdl-typography-body-fontSize-sm)/var(--mdl-typography-body-lineHeight) var(--ion-font-family); + --mdl-typography-body-font-md: normal normal var(--mdl-typography-body-fontWeight) var(--mdl-typography-body-fontSize-md)/var(--mdl-typography-body-lineHeight) var(--ion-font-family); + --mdl-typography-body-font-lg: normal normal var(--mdl-typography-body-fontWeight) var(--mdl-typography-body-fontSize-lg)/var(--mdl-typography-body-lineHeight) var(--ion-font-family); - // Typography - Labels - --label-sm-font-size: 10px; - --label-md-font-size: 12px; - --label-lg-font-size: 14px; - --label-font-weight: var(--font-weight-medium); + // Links + --mdl-typography-link-fontSize-sm: var(--mdl-typography-fontSize-sm); + --mdl-typography-link-fontSize-md: var(--mdl-typography-fontSize-md); + --mdl-typography-link-fontSize-lg: var(--mdl-typography-fontSize-lg); - --label-sm-line-height: 16px; - --label-md-line-height: 16px; - --label-lg-line-height: 20px; + --mdl-typography-link-fontWeight: var(--mdl-typography-fontWeight-normal); + --mdl-typography-link-lineHeight: 150%; + --mdl-typography-link-letterSpacing: 0.5px; + --mdl-typography-link-paragraphSpacing: 150%; - --label-sm-font: normal normal var(--label-font-weight) var(--label-sm-font-size)/var(--label-sm-line-height) var(--ion-font-family); - --label-md-font: normal normal var(--label-font-weight) var(--label-md-font-size)/var(--label-md-line-height) var(--ion-font-family); - --label-lg-font: normal normal var(--label-font-weight) var(--label-lg-font-size)/var(--label-lg-line-height) var(--ion-font-family); + --mdl-typography-link-font-sm: normal normal var(--mdl-typography-link-fontWeight) var(--mdl-typography-link-fontSize-sm)/var(--mdl-typography-link-lineHeight) var(--ion-font-family); + --mdl-typography-link-font-md: normal normal var(--mdl-typography-link-fontWeight) var(--mdl-typography-link-fontSize-md)/var(--mdl-typography-link-lineHeight) var(--ion-font-family); + --mdl-typography-link-font-lg: normal normal var(--mdl-typography-link-fontWeight) var(--mdl-typography-link-fontSize-lg)/var(--mdl-typography-link-lineHeight) var(--ion-font-family); - // Typography - Subtitles - --subtitle-sm-font-size: 14px; - --subtitle-md-font-size: 16px; - --subtitle-lg-font-size: 20px; + // Labels + --mdl-typography-label-fontSize-sm: #{dynamic-font(10px)}; // 0.625rem + --mdl-typography-label-fontSize-md: #{dynamic-font(12px)}; + --mdl-typography-label-fontSize-lg: #{dynamic-font(14px)}; - --subtitle-font-weight: var(--font-weight-medium); - --subtitle-line-height: 150%; + --mdl-typography-label-fontWeight: var(--mdl-typography-fontWeight-medium); - --subtitle-sm-font: normal normal var(--subtitle-font-weight) var(--subtitle-sm-font-size)/var(--subtitle-line-height) var(--ion-font-family); - --subtitle-md-font: normal normal var(--subtitle-font-weight) var(--subtitle-md-font-size)/var(--subtitle-line-height) var(--ion-font-family); - --subtitle-lg-font: normal normal var(--subtitle-font-weight) var(--subtitle-lg-font-size)/var(--subtitle-line-height) var(--ion-font-family); + --mdl-typography-label-lineHeight-sm: #{dynamic-font(16px)}; + --mdl-typography-label-lineHeight-md: #{dynamic-font(16px)}; + --mdl-typography-label-lineHeight-lg: #{dynamic-font(20px)}; - // Typography - Headings - --heading-1-font-size: 28px; - --heading-2-font-size: 24px; - --heading-3-font-size: 22px; - --heading-4-font-size: 20px; - --heading-5-font-size: 18px; - --heading-6-font-size: 16px; + --mdl-typography-label-letterSpacing: 0.1px; - --heading-1-font-weight: var(--font-weight-normal); - --heading-2-font-weight: var(--font-weight-normal); - --heading-3-font-weight: var(--font-weight-normal); - --heading-4-font-weight: var(--font-weight-medium); - --heading-5-font-weight: var(--font-weight-medium); - --heading-6-font-weight: var(--font-weight-medium); + --mdl-typography-label-font-sm: normal normal var(--mdl-typography-label-fontWeight) var(--mdl-typography-label-fontSize-sm)/var(--mdl-typography-label-lineHeight-sm) var(--ion-font-family); + --mdl-typography-label-font-md: normal normal var(--mdl-typography-label-fontWeight) var(--mdl-typography-label-fontSize-md)/var(--mdl-typography-label-lineHeight-md) var(--ion-font-family); + --mdl-typography-label-font-lg: normal normal var(--mdl-typography-label-fontWeight) var(--mdl-typography-label-fontSize-lg)/var(--mdl-typography-label-lineHeight-lg) var(--ion-font-family); - --heading-line-height: 130%; + // Subtitles + --mdl-typography-subtitle-fontSize-sm: #{dynamic-font(14px)}; + --mdl-typography-subtitle-fontSize-md: #{dynamic-font(16px)}; + --mdl-typography-subtitle-fontSize-lg: #{dynamic-font(20px)}; - --heading-1-font: normal normal var(--heading-1-font-weight) var(--heading-1-font-size)/var(--heading-line-height) var(--ion-font-family); - --heading-2-font: normal normal var(--heading-2-font-weight) var(--heading-2-font-size)/var(--heading-line-height) var(--ion-font-family); - --heading-3-font: normal normal var(--heading-3-font-weight) var(--heading-3-font-size)/var(--heading-line-height) var(--ion-font-family); - --heading-4-font: normal normal var(--heading-4-font-weight) var(--heading-4-font-size)/var(--heading-line-height) var(--ion-font-family); - --heading-5-font: normal normal var(--heading-5-font-weight) var(--heading-5-font-size)/var(--heading-line-height) var(--ion-font-family); - --heading-6-font: normal normal var(--heading-6-font-weight) var(--heading-6-font-size)/var(--heading-line-height) var(--ion-font-family); + --mdl-typography-subtitle-fontWeight: var(--mdl-typography-fontWeight-medium); + --mdl-typography-subtitle-lineHeight: 150%; + --mdl-typography-subtitle-letterSpacing: 0.1px; - // Radiuses - --radius-none: 0px; - --radius-xs: 4px; - --radius-sm: 8px; - --radius-md: 12px; - --radius-lg: 16px; - --radius-xl: 24px; - --radius-round: 50%; + --mdl-typography-subtitle-font-sm: normal normal var(--mdl-typography-subtitle-fontWeight) var(--mdl-typography-subtitle-fontSize-sm)/var(--mdl-typography-subtitle-lineHeight) var(--ion-font-family); + --mdl-typography-subtitle-font-md: normal normal var(--mdl-typography-subtitle-fontWeight) var(--mdl-typography-subtitle-fontSize-md)/var(--mdl-typography-subtitle-lineHeight) var(--ion-font-family); + --mdl-typography-subtitle-font-lg: normal normal var(--mdl-typography-subtitle-fontWeight) var(--mdl-typography-subtitle-fontSize-lg)/var(--mdl-typography-subtitle-lineHeight) var(--ion-font-family); - // Shadows / Elevation - --drop-shadow-color: 40 40 40; //#282828; - --drop-shadow-00: 0px 0px 0px 0px rgb(var(--drop-shadow-color) / 20%); - --drop-shadow-outline: 0px 0px 0px 2px rgb(var(--drop-shadow-color) / 15%), 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 2%); - --drop-shadow-01dp: 0px 1px 3px 0px rgb(var(--drop-shadow-color) / 20%), 0px 2px 1px 0px rgb(var(--drop-shadow-color) / 12%), 0px 1px 1px 0px rgb(var(--drop-shadow-color) / 14%); - --drop-shadow-02dp: 0px 1px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 1px 0px rgb(var(--drop-shadow-color) / 12%), 0px 2px 2px 0px rgb(var(--drop-shadow-color) / 14%); - --drop-shadow-03dp: 0px 1px 8px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 3px 0px rgb(var(--drop-shadow-color) / 12%), 0px 3px 4px 0px rgb(var(--drop-shadow-color) / 14%); - --drop-shadow-04dp: 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 20%), 0px 1px 10px 0px rgb(var(--drop-shadow-color) / 12%), 0px 4px 5px 0px rgb(var(--drop-shadow-color) / 14%); - --drop-shadow-06dp: 0px 3px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 1px 18px 0px rgb(var(--drop-shadow-color) / 12%), 0px 6px 10px 0px rgb(var(--drop-shadow-color) / 14%); - --drop-shadow-08dp: 0px 5px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 14px 0px rgb(var(--drop-shadow-color) / 12%), 0px 8px 10px 0px rgb(var(--drop-shadow-color) / 14%); - --drop-shadow-12dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 20%),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 12%),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 14%); - --drop-shadow-16dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 20%),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 12%),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 14%); - --drop-shadow-24dp: 0px 11px 15px 0px rgb(var(--drop-shadow-color) / 20%), 0px 9px 46px 0px rgb(var(--drop-shadow-color) / 12%), 0px 24px 38px 0px rgb(var(--drop-shadow-color) / 14%); + // Headings + --mdl-typography-heading1-fontSize: #{dynamic-font(28px)}; // 1.75rem + --mdl-typography-heading2-fontSize: #{dynamic-font(24px)}; // 1.5rem + --mdl-typography-heading3-fontSize: #{dynamic-font(22px)}; // 1.375rem + --mdl-typography-heading4-fontSize: #{dynamic-font(20px)}; // 1.25rem + --mdl-typography-heading5-fontSize: #{dynamic-font(18px)}; // 1.125rem + --mdl-typography-heading6-fontSize: #{dynamic-font(16px)}; // 1rem - // A11y - --a11y-min-target-size: 44px; + --mdl-typography-heading1-fontWeight: var(--mdl-typography-fontWeight-normal); + --mdl-typography-heading2-fontWeight: var(--mdl-typography-fontWeight-normal); + --mdl-typography-heading3-fontWeight: var(--mdl-typography-fontWeight-normal); + --mdl-typography-heading4-fontWeight: var(--mdl-typography-fontWeight-medium); + --mdl-typography-heading5-fontWeight: var(--mdl-typography-fontWeight-medium); + --mdl-typography-heading6-fontWeight: var(--mdl-typography-fontWeight-medium); - // Colors - --blue: #0f6cbf; + --mdl-typography-heading-lineHeight: 130%; - --text-color-main: var(--gray-900); - --text-color-secondary: var(--gray-800); + --mdl-typography-heading1-font: normal normal var(--mdl-typography-heading1-fontWeight) var(--mdl-typography-heading1-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family); + --mdl-typography-heading2-font: normal normal var(--mdl-typography-heading2-fontWeight) var(--mdl-typography-heading2-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family); + --mdl-typography-heading3-font: normal normal var(--mdl-typography-heading3-fontWeight) var(--mdl-typography-heading3-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family); + --mdl-typography-heading4-font: normal normal var(--mdl-typography-heading4-fontWeight) var(--mdl-typography-heading4-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family); + --mdl-typography-heading5-font: normal normal var(--mdl-typography-heading5-fontWeight) var(--mdl-typography-heading5-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family); + --mdl-typography-heading6-font: normal normal var(--mdl-typography-heading6-fontWeight) var(--mdl-typography-heading6-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family); - --state-color-hover: rgb(40 40 40, 4%); // --gray-900 4% - --state-color-pressed: rgb(40 40 40, 12%); // --gray-900 12% - --state-color-focused: rgb(40 40 40, 12%); // --gray-900 12% - --state-color-keyboard-focus: var(--blue); + // Icons + --mdl-typography-icon-fontSize-sm: #{dynamic-font(16px)}; + --mdl-typography-icon-fontSize-md: #{dynamic-font(20px)}; + --mdl-typography-icon-fontSize-lg: #{dynamic-font(24px)}; -} + // ***** SHAPE category ***** // + --mdl-shape-borderRadius-none: 0px; + --mdl-shape-borderRadius-xs: 4px; + --mdl-shape-borderRadius-sm: 8px; + --mdl-shape-borderRadius-md: 12px; + --mdl-shape-borderRadius-lg: 16px; + --mdl-shape-borderRadius-xl: 24px; + --mdl-shape-borderRadius-round: 50%; -html.dark { + // ***** SHADOW category ***** // + --mdl-shadow-boxShadowColor: 40 40 40; //#282828; + --mdl-shadow-boxShadow-00: 0px 0px 0px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%); + --mdl-shadow-boxShadow-outline: 0px 0px 0px 2px rgb(var(--mdl-shadow-boxShadowColor) / 15%), 0px 2px 4px 0px rgb(var(--mdl-shadow-boxShadowColor) / 2%); + --mdl-shadow-boxShadow-01: 0px 1px 3px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 2px 1px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 1px 1px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); + --mdl-shadow-boxShadow-02: 0px 1px 5px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 3px 1px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 2px 2px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); + --mdl-shadow-boxShadow-03: 0px 1px 8px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 3px 3px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 3px 4px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); + --mdl-shadow-boxShadow-04: 0px 2px 4px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 1px 10px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 4px 5px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); + --mdl-shadow-boxShadow-06: 0px 3px 5px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 1px 18px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 6px 10px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); + --mdl-shadow-boxShadow-08: 0px 5px 5px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 3px 14px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 8px 10px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); + --mdl-shadow-boxShadow-12: 0px 7px 8px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%),0px 5px 22px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%),0px 12px 17px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); + --mdl-shadow-boxShadow-16: 0px 7px 8px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%),0px 5px 22px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%),0px 12px 17px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); + --mdl-shadow-boxShadow-24: 0px 11px 15px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 9px 46px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 24px 38px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); - // Colors - --text-color-main: var(--gray-200); - --text-color-secondary: var(--gray-300); + // ***** ACCESSIBILITY ***** // + --a11y-sizing-minTargetSize: 44px; + --a11y-shadow-focus-borderWidth: 2px; + --a11y-shadow-focus-boxShadow: inset 0 0 var(--a11y-shadow-focus-borderWidth) 1px var(--a11y-focus-color); + --a11y-shadow-focus-outline: var(--a11y-shadow-focus-borderWidth) solid var(--a11y-focus-color); + // @TODO ***** VARIABLES TO BE REVIEWED, RENAMED AND TIDIED ***** // + --text-size: var(--mdl-typography-body-fontSize-md); + + --core-input-radius: var(--mdl-shape-borderRadius-xs); + --core-input-border-width: 1px; + + --list-item-max-width: 768px; + + --modal-radius: var(--mdl-shape-borderRadius-md); + --modal-lateral-max-width: 320px; + --modal-lateral-margin: 56px; + + --loader-radius: var(--mdl-shape-borderRadius-xs); + --loader-display: block; + + --drop-shadow-top: 0px 2px 5px rgb(var(--mdl-shadow-boxShadowColor) / 50%); + --drop-shadow-bottom: 0px -2px 5px rgb(var(--mdl-shadow-boxShadowColor) / 50%); + --drop-shadow-end: -2px 0px 5px rgb(var(--mdl-shadow-boxShadowColor) / 50%); + --drop-shadow-start: 2px 0px 5px rgb(var(--mdl-shadow-boxShadowColor) / 50%); + + --ion-card-vertical-margin: 12px; + --ion-card-horizontal-margin: 12px; + --ion-card-radius: var(--mdl-shape-borderRadius-lg); + --ion-card-border-width: 1px; + + --bottom-tabs-size: 48px; + --side-tabs-size: 56px; + + --core-header-toolbar-button-image-size: var(--a11y-sizing-minTargetSize); + --core-header-toolbar-border-width: 0px; + --core-header-toolbar-height: 48px; + --core-header-shadow: none; + + --ion-searchbar-height: var(--a11y-sizing-minTargetSize); + --ion-searchbar-border-radius: var(--core-input-radius); + + --core-search-box-border-radius: var(--core-input-radius); + + --core-combobox-radius: var(--core-input-radius); + --core-combobox-border-width: var(--core-input-border-width); + --core-combobox-box-shadow: none; + + --core-tab-font-weight-active: normal; + --core-tabs-height: 48px; + + --core-progressbar-height: 8px; + + --ion-item-detail-icon-font-size: var(--mdl-typography-icon-fontSize-md); + --ion-item-detail-icon-opacity: 1; + + --item-divider-min-height: calc(var(--a11y-sizing-minTargetSize) + 8px); + --item-divider-border-width: 0px; + --item-divider-font-size: 16px; + --item-divider-font-size-big: 20px; + + --spacer-vertical: 8px; + + --selected-item-border-width: 5px; + + --core-large-avatar-size: 80px; + --core-avatar-size: var(--a11y-sizing-minTargetSize); + --core-avatar-radius: 50%; + + --core-courseimage-on-course-size: 72px; + --core-courseimage-radius: var(--mdl-shape-borderRadius-sm); + + --core-user-menu-site-logo-max-height: 32px; + + --core-messages-message-note-font-size: 75%; + --core-messages-avatar-size: 30px; + + --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-500); + --core-dd-question-radius: 10px; + + --rotate-expandable: rotate(90deg); + + --core-mainpage-sitename-display: none; + --core-mainpage-headerlogo-display: none; + --core-mainpage-headerlogo-maxheight: calc(var(--core-header-toolbar-height) - 16px); + + @if ($core-dashboard-logo) { + --core-mainpage-headerlogo-display: inline; + } @else { + --core-mainpage-sitename-display: inline; + } } /** @deprecated since 4.3 **/ html { - --small-radius: var(--radius-xs); - --medium-radius: var(--radius-sm); - --big-radius: var(--radius-lg); - --huge-radius: var(--radius-xl); + --small-radius: var(--mdl-shape-borderRadius-xs); + --medium-radius: var(--mdl-shape-borderRadius-sm); + --big-radius: var(--mdl-shape-borderRadius-lg); + --huge-radius: var(--mdl-shape-borderRadius-xl); } /** @deprecated since 4.4 **/ html { - --font-size-normal: var(--font-size-md); + --font-size-normal: var(--mdl-typography-fontSize-md); + --a11y-min-target-size: var(--a11y-sizing-minTargetSize); + --a11y-focus-width: var(--a11y-shadow-focus-boxShadowSpread); + --a11y-focus-color: var(--a11y-shadow-focus-boxShadowColor); } diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index b45b05b10..3a6c57f84 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -48,12 +48,9 @@ html { } // Accessibility vars. - --a11y-focus-color: var(--primary); - --a11y-focus-width: 2px; - --zoom-level: 100%; + --a11y-shadow-focus-boxShadowColor: var(--primary); --text-color: #{$text-color}; - --text-size: var(--body-font-size-md); --background-color: #{$background-color}; --stroke: var(--gray-300); @@ -67,175 +64,50 @@ html { --core-input-stroke: var(--gray-500); --core-input-text: var(--dark); --core-input-background: var(--ion-background-color); - --core-input-radius: var(--radius-xs); - --core-input-border-width: 1px; - - --list-item-max-width: 768px; - - --modal-radius: var(--radius-md); - --modal-lateral-max-width: 320px; - --modal-lateral-margin: 56px; --contrast-background: white; --loader-background-color: rgb(0 0 0 / 10%); --loader-shine: 251 251 251; - --loader-radius: var(--radius-xs); - --loader-display: block; - - --drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 50%); - --drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 50%); - --drop-shadow-end: -2px 0px 5px rgb(var(--drop-shadow-color) / 50%); - --drop-shadow-start: 2px 0px 5px rgb(var(--drop-shadow-color) / 50%); --ion-text-color: var(--text-color); --ion-text-color-rgb: #{$text-color-rgb}; --subdued-text-color: var(--medium); --ion-card-color: var(--text-color); - --ion-card-vertical-margin: 12px; - --ion-card-horizontal-margin: 12px; - --ion-card-radius: var(--radius-lg); - --ion-card-border-width: 1px; --ion-card-border-color: var(--stroke); - ion-card { - --border-width: var(--ion-card-border-width); - --border-style: solid; - --border-color: var(--ion-card-border-color); - --box-shadow: none; - --border-radius: var(--ion-card-radius); - } --text-hightlight-background-color: #{$core-text-hightlight-background-color}; --ion-placeholder-color: var(--subdued-text-color); - ion-content { - --background: var(--ion-background-color); - --background-alternative: var(--gray-200); - } - --core-bottom-tabs-background: var(--white); --core-bottom-tabs-color: var(--dark); --core-bottom-tabs-color-selected: var(--primary); --core-bottom-tabs-background-selected: transparent; --core-bottom-tabs-badge-color: var(--primary); --core-bottom-tabs-badge-text-color: var(--primary-contrast); - --bottom-tabs-size: 48px; - --side-tabs-size: 56px; - ion-tab-bar.mainmenu-tabs { - --background: var(--core-bottom-tabs-background); - --color: var(--core-bottom-tabs-color); - --color-selected: var(--core-bottom-tabs-color-selected); - --background-selected: var(--core-bottom-tabs-background-selected); - } --core-link-color: var(--info); - a { - color: var(--core-link-color); - } - --core-header-toolbar-button-image-size: var(--a11y-min-target-size); --core-header-toolbar-background: var(--white); - --core-header-toolbar-border-width: 0px; --core-header-toolbar-border-color: var(--stroke); --core-header-toolbar-color: var(--text-color); - --core-header-toolbar-height: 48px; - --core-header-shadow: none; --core-header-buttons-background: var(--core-header-toolbar-background); --core-header-buttons-color: var(--core-header-toolbar-color); - ion-header, ion-header.header-md { - box-shadow: var(--core-header-shadow, none); - transition: box-shadow 0.5s; - - ion-toolbar { - --color: var(--core-header-toolbar-color); - --background: var(--core-header-toolbar-background); - --border-width: 0 0 var(--core-header-toolbar-border-width) 0; - --border-color: var(--core-header-toolbar-border-color); - - ion-button { - --ion-toolbar-color: var(--core-header-toolbar-color); - --color: var(--core-header-toolbar-color); - } - - ion-spinner { - --ion-color-base: var(--core-header-toolbar-color); - --color: var(--core-header-toolbar-color); - } - } - } - - - ion-header.core-header-shadow { - --core-header-shadow: var(--drop-shadow-bottom, none); - } - - ion-header::after { - display: none; - } - - ion-header.header-ios ion-toolbar:last-of-type { - --border-width: 0 0 var(--core-header-toolbar-border-width) 0; - } - --ion-searchbar-background: var(--ion-background-color); --ion-searchbar-border-color: var(--core-input-stroke); - --ion-searchbar-border-radius: var(--core-input-radius); - --ion-searchbar-height: var(--a11y-min-target-size); --ion-searchbar-color: var(--text-color); --ion-searchbar-icon-color: var(--core-input-stroke); - ion-searchbar, - .ios ion-searchbar { - --background: var(--ion-searchbar-background); - --border-color: var(--ion-searchbar-border-color); - --color: var(--ion-searchbar-color); - --border-radius: var(--ion-searchbar-border-radius); - --icon-color: var(--ion-searchbar-icon-color); - --height: var(--ion-searchbar-height); - } --core-search-box-background: var(--ion-background-color); --core-search-box-border-color: var(--core-input-stroke); - --core-search-box-border-radius: var(--core-input-radius); --core-search-box-color: var(--core-input-text); --core-combobox-background: var(--core-input-background); --core-combobox-color: var(--core-input-text); --core-combobox-border-color: var(--core-input-stroke); - --core-combobox-border-width: var(--core-input-border-width); - --core-combobox-radius: var(--core-input-radius); - --core-combobox-box-shadow: none; - - ion-action-sheet { - --button-color: var(--ion-text-color); - --button-color-selected: var(--ion-text-color); - - .action-sheet-title { - --color: var(--ion-text-color); - font-weight: bold; - } - - @media (min-height: 500px) { - --max-height: 50%; - --height: 100%; - } - - .action-sheet-cancel { - --button-color: var(--danger); - } - } - - ion-popover.ios { - --min-width: 250px; - } - - ion-toast { - --color: var(--ion-color-step-50); - --button-color: var(--primary); - --background: var(--ion-color-step-800); - } --core-tabs-background: var(--white); --core-tab-background: var(--core-tabs-background); @@ -243,31 +115,9 @@ html { --core-tab-border-color: var(--stroke); --core-tab-color-active: var(--dark); --core-tab-border-color-active: var(--primary); - --core-tab-font-weight-active: normal; - --core-tabs-height: 48px; - core-tabs, core-tabs-outlet { - swiper-slide { - --background: var(--core-tab-background); - --color: var(--core-tab-color); - --border-color: var(--core-tab-border-color); - --color-active: var(--core-tab-color-active); - --border-color-active: var(--core-tab-border-color-active); - --color-selected: var(--border-color-active); - --font-weight-active: var(--core-tab-font-weight-active); - } - } --core-loading-spinner: var(--primary); - ion-loading { - --spinner-color: var(--core-loading-spinner); - } - ion-spinner, ion-refresher { - --ion-color-base: var(--core-loading-spinner); - --ion-color-primary: var(--core-loading-spinner); - --color: var(--core-loading-spinner); - } - --core-progressbar-height: 8px; --core-progressbar-color: var(--primary); --core-progressbar-text-color: var(--medium); --core-progressbar-background: var(--primary-tint); @@ -277,45 +127,14 @@ html { --ion-item-background: #{$ion-item-background}; --ion-item-icon-color: var(--medium); --ion-item-detail-icon-color: var(--dark); - --ion-item-detail-icon-font-size: 20px; - --ion-item-detail-icon-opacity: 1; --core-more-icon: var(--ion-item-icon-color); - ion-item { - --detail-icon-color: var(--ion-item-detail-icon-color); - --detail-icon-font-size: var(--ion-item-detail-icon-font-size); - --detail-icon-opacity: var(--ion-item-detail-icon-opacity); - > ion-icon[slot] { - color: var(--ion-item-icon-color); - } - } - - --item-divider-min-height: calc(var(--a11y-min-target-size) + 8px); --item-divider-background: var(--ion-item-background); --item-divider-color: var(--text-color); - --item-divider-border-width: 0px; - --item-divider-font-size: 16px; - --item-divider-font-size-big: 20px; - ion-item-divider, ion-item.divider { - --background: var(--item-divider-background); - --color: var(--item-divider-color); - --min-height: var(--item-divider-min-height); - } - --spacer-vertical: 8px; --spacer-color: var(--gray-300); - ion-note { - --color: var(--subdued-text-color); - } - - ion-back-button { - --min-height: var(--a11y-min-target-size); - --min-width: var(--a11y-min-target-size); - } - --selected-item-color: var(--primary); - --selected-item-border-width: 5px; --collapsible-toggle-background: transparent; --collapsible-toggle-text: var(--medium); @@ -329,29 +148,18 @@ html { --core-star-color: var(--primary); - --core-large-avatar-size: 80px; - --core-avatar-size: var(--a11y-min-target-size); - --core-avatar-radius: 50%; - - --core-courseimage-on-course-size: 72px; - --core-courseimage-radius: var(--radius-sm); - --core-navigation-background: var(--contrast-background); --core-collapsible-footer-background: var(--contrast-background); - --core-user-menu-site-logo-max-height: 32px; - --addon-calendar-today-border-color: var(--primary); --addon-calendar-border-color: var(--stroke); --core-messages-message-bg: var(--white); --core-messages-message-activated-bg: var(--gray-200); --core-messages-message-note-text: var(--gray-500); - --core-messages-message-note-font-size: 75%; --core-messages-message-mine-bg: var(--gray-300); --core-messages-message-mine-activated-bg: var(--gray-400); - --core-messages-avatar-size: 30px; --core-messages-discussion-badge: var(--primary); --core-messages-discussion-badge-text: var(--white); @@ -376,8 +184,7 @@ html { --core-question-feedback-color: var(--warning-shade); --core-question-feedback-background-color: var(--warning-tint); - --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-500); - --core-dd-question-radius: 10px; + --core-dd-question-border: var(--medium); --core-table-header-background: var(--white); @@ -387,11 +194,6 @@ html { --core-table-even-cell-hover: var(--light); --core-table-border-color: var(--stroke); - --rotate-expandable: rotate(90deg); - &[dir=rtl] { - --rotate-expandable: rotate(-90deg); - } - @for $i from 0 to length($core-course-image-background) { --core-course-color-#{$i}: #{nth($core-course-image-background, $i + 1)}; --core-course-color-#{$i}-tint: #{get-color-tint-percent(nth($core-course-image-background, $i + 1))}; @@ -412,15 +214,5 @@ html { --activity-40-#{$type}: #{$value}; } - --core-mainpage-sitename-display: none; - --core-mainpage-headerlogo-display: none; - --core-mainpage-headerlogo-maxheight: calc(var(--core-header-toolbar-height) - 16px); - - @if ($core-dashboard-logo) { - --core-mainpage-headerlogo-display: inline; - } @else { - --core-mainpage-sitename-display: inline; - } - --rte-editor-background: var(--core-input-background); } diff --git a/src/theme/theme.scss b/src/theme/theme.scss index 322b5840a..e177f74a0 100644 --- a/src/theme/theme.scss +++ b/src/theme/theme.scss @@ -13,10 +13,8 @@ @import "globals.scss"; /* Application styles */ -@import "theme.light.scss"; -@import "theme.dark.scss"; -@import "theme.custom.scss"; @import "theme.design-system.scss"; +@import "theme.custom.scss"; @import "theme.base.scss"; /* Components */ @@ -24,11 +22,31 @@ @import "components/collapsible-item.scss"; @import "components/error-accordion.scss"; @import "components/format-text.scss"; -@import "components/ion-icon.scss"; @import "components/mod-label.scss"; @import "components/rubrics.scss"; @import "components/videojs.scss"; +/* Ionic components overrides */ +html { + @import "components/ion-action-sheet.scss"; + @import "components/ion-back-button.scss"; + @import "components/ion-button.scss"; + @import "components/ion-card.scss"; + @import "components/ion-chip.scss"; + @import "components/ion-content.scss"; + @import "components/ion-header.scss"; + @import "components/ion-icon.scss"; + @import "components/ion-item.scss"; + @import "components/ion-item-divider.scss"; + @import "components/ion-loading.scss"; + @import "components/ion-note.scss"; + @import "components/ion-popover.scss"; + @import "components/ion-searchbar.scss"; + @import "components/ion-spinner.scss"; + @import "components/ion-tab-bar.scss"; + @import "components/ion-toast.scss"; +} + /* Some styles from 3rd party libraries. */ @import "bootstrap.scss";