EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4458 design: Apply typography

main
Pau Ferrer Ocaña 2024-03-14 10:15:47 +01:00
parent cd05350e50
commit 59280ca81c
43 changed files with 337 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/addons/block/activityresults/components/activityresults/activityresults.scss
View File

@ -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);
}
}
}

2
src/addons/block/blogtags/components/blogtags/blogtags.scss
View File

@ -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;

4
src/addons/block/myoverview/components/myoverview/myoverview.scss
View File

@ -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);
}
}

2
src/addons/block/tags/components/tags/tags.scss
View File

@ -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;

6
src/addons/block/timeline/components/timeline/timeline.scss
View File

@ -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 {

2
src/addons/calendar/components/filter/filter.scss
View File

@ -8,7 +8,7 @@
> ion-icon {
padding: 4px;
font-size: 20px;
font-size: var(--mdl-typography-icon-fontSize-md);
}
}
}

2
src/addons/mod/resource/components/index/index.scss
View File

@ -5,7 +5,7 @@
@include padding(4px, 0px, 0px, 0px);
ion-icon {
font-size: 24px;
font-size: var(--mdl-typography-icon-fontSize-lg);
}
}

4
src/addons/mod/survey/components/index/index.scss
View File

@ -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;
}
}

4
src/addons/notifications/notifications.scss
View File

@ -16,7 +16,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 +39,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);
}

4
src/core/components/button-with-spinner/button-with-spinner.scss
View File

@ -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;
> * {

8
src/core/components/combobox/combobox.scss
View File

@ -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);
}

4
src/core/components/download-refresh/download-refresh.scss
View File

@ -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;
> * {

2
src/core/components/empty-box/empty-box.scss
View File

@ -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);
}
}

4
src/core/components/message/message.scss
View File

@ -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);

2
src/core/components/mod-icon/mod-icon.scss
View File

@ -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;

4
src/core/components/send-message-form/send-message-form.scss
View File

@ -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);

2
src/core/components/tabs/tabs.scss
View File

@ -40,7 +40,7 @@
height: var(--height);
--border-radius: 0;
ion-icon {
font-size: 16px;
font-size: var(--mdl-typography-icon-fontSize-sm);
}
}

2
src/core/components/timer/timer.scss
View File

@ -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 {

2
src/core/features/block/components/block/block.scss
View File

@ -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 {

2
src/core/features/course/components/module-info/course-module-info.scss
View File

@ -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;

8
src/core/features/course/components/module/module.scss
View File

@ -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;

6
src/core/features/course/pages/course-summary/course-summary.scss
View File

@ -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%;

2
src/core/features/course/pages/module-preview/module-preview.scss
View File

@ -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 {

2
src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
View File

@ -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;

2
src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss
View File

@ -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);
}
}

2
src/core/features/grades/pages/course/course.scss
View File

@ -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;
}
}

2
src/core/features/mainmenu/pages/menu/menu.scss
View File

@ -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 {

2
src/core/features/question/question.scss
View File

@ -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 {

2
src/core/features/reportbuilder/components/report-summary/report-summary.scss
View File

@ -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;

18
src/core/features/search/components/global-search-result/global-search-result.scss
View File

@ -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;
}

6
src/core/features/search/components/search-box/search-box.scss
View File

@ -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);

2
src/core/features/sitehome/pages/index/index.scss
View File

@ -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);

2
src/theme/components/collapsible-item.scss
View File

@ -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;

2
src/theme/components/discussion.scss
View File

@ -1,5 +1,3 @@
@use "theme/globals" as *;
:host-context(.ios) {
ion-footer .toolbar:last-child {
padding-bottom: 4px;

43
src/theme/components/error-accordion.scss
View File

@ -4,18 +4,25 @@
--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%
--state-color-keyboard-focus: var(--a11y-focus-color);
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 +37,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 +55,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 +74,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);
}

20
src/theme/components/format-text.scss
View File

@ -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; }

16
src/theme/helpers/custom.mixins.scss
View File

@ -80,10 +80,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);
// border: var(--a11y-shadow-focus-boxShadowSpread) solid var(--a11y-shadow-focus-boxShadowColor);
}
@mixin core-transition($properties: all, $duration: 500ms, $timing-function: ease-in-out) {
@ -198,22 +198,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);
}
}

3
src/theme/helpers/helpers.scss
View File

@ -5,6 +5,9 @@
// Global Color Functions
@import "./ionic.functions.color";
// Global Font Functions
@import "./ionic.functions.font";
// Global Mixins
@import "./ionic.mixins";

70
src/theme/helpers/ionic.functions.font.scss 100644
View File

@ -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);
}

44
src/theme/theme.base.scss
View File

@ -161,7 +161,7 @@ ion-header {
--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);
--border-radius: var(--mdl-shape-borderRadius-xl);
--primary: var(--core-header-buttons-color);
}
ion-back-button::part(text) {
@ -175,10 +175,10 @@ ion-header {
.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);
width: var(--a11y-sizing-minTargetSize);
height: var(--a11y-sizing-minTargetSize);
ion-icon {
font-size: 24px;
font-size: var(--mdl-typography-icon-fontSize-lg);
}
}
@ -213,7 +213,7 @@ ion-header {
}
h1, h2, .subheading {
font-size: 20px;
font-size: var(--mdl-typography-label-lineHeight-lg);
font-weight: 500;
letter-spacing: .0125em;
text-align: start;
@ -236,7 +236,7 @@ ion-header {
text-align: start;
h1, h2, .subheading {
font-size: 17px;
font-size: var(--mdl-typography-label-lineHeight-md);
font-weight: 600;
}
@ -266,8 +266,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;
@ -352,7 +352,7 @@ ion-button:not(.button-has-icon-only):not(.button-small) > ion-icon {
}
ion-button.button.button-clear.button-has-icon-only {
--border-radius: var(--radius-xl);
--border-radius: var(--mdl-shape-borderRadius-xl);
}
ion-button.button.button-clear {
@ -736,7 +736,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 +800,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 +835,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);
@ -957,7 +957,7 @@ ion-card {
}
.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,
@ -1008,7 +1008,7 @@ ion-action-sheet.md {
}
.action-sheet-group:first-child {
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
border-radius: var(--mdl-shape-borderRadius-lg) var(--mdl-shape-borderRadius-lg) 0 0;
}
.action-sheet-group-cancel {
@ -1173,7 +1173,7 @@ ion-select-popover {
ion-badge {
line-height: 1.1;
padding: 2px 8px;
border-radius: var(--radius-lg);
border-radius: var(--mdl-shape-borderRadius-lg);
}
ion-chip,
@ -1185,8 +1185,8 @@ ion-button.button.chip {
font-weight: normal;
ion-icon {
font-size: 16px;
min-width: 16px;
font-size: var(--mdl-typography-icon-fontSize-sm);
min-width: var(--mdl-typography-icon-fontSize-sm);
@include margin(0, 8px, 0, 0);
}
@ -1196,7 +1196,7 @@ ion-button.button.chip {
}
ion-button.button.chip {
--border-radius: var(--radius-md);
--border-radius: var(--mdl-shape-borderRadius-md);
min-height: 32px;
font-size: 14px;
@ -1258,7 +1258,7 @@ ion-chip {
ion-searchbar {
height: var(--height) !important;
--border-radius: var(--radius-xs);
--border-radius: var(--mdl-shape-borderRadius-xs);
.searchbar-input-container {
color: var(--color) !important;
@ -1266,7 +1266,7 @@ ion-searchbar {
}
.searchbar-input {
--border-radius: var(--radius-xs);
--border-radius: var(--mdl-shape-borderRadius-xs);
height: var(--height) !important;
border: 1px solid var(--border-color) !important;
@ -1334,7 +1334,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,7 +1370,7 @@ details summary {
}
textarea {
min-height: var(--a11y-min-target-size);
min-height: var(--a11y-sizing-minTargetSize);
}
textarea:not([core-auto-rows]) {

4
src/theme/theme.dark.scss
View File

@ -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);

228
src/theme/theme.design-system.scss
View File

@ -1,146 +1,160 @@
@import "./globals.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:[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
--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)};
}
html.dark {
// ***** 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%;
// Colors
--text-color-main: var(--gray-200);
--text-color-secondary: var(--gray-300);
// ***** 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%);
// ***** ACCESSIBILITY ***** //
--a11y-sizing-minTargetSize: 44px;
--a11y-shadow-focus-boxShadowSpread: 2px;
--a11y-shadow-focus-boxShadow: inset 0 0 var(--a11y-shadow-focus-boxShadowSpread) 1px var(--a11y-focus-color);
}
/** @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);
}

34
src/theme/theme.light.scss
View File

@ -53,7 +53,7 @@ html {
--zoom-level: 100%;
--text-color: #{$text-color};
--text-size: var(--body-font-size-md);
--text-size: var(--mdl-typography-body-fontSize-md);
--background-color: #{$background-color};
--stroke: var(--gray-300);
@ -67,12 +67,12 @@ 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-radius: var(--mdl-shape-borderRadius-xs);
--core-input-border-width: 1px;
--list-item-max-width: 768px;
--modal-radius: var(--radius-md);
--modal-radius: var(--mdl-shape-borderRadius-md);
--modal-lateral-max-width: 320px;
--modal-lateral-margin: 56px;
@ -80,13 +80,13 @@ html {
--loader-background-color: rgb(0 0 0 / 10%);
--loader-shine: 251 251 251;
--loader-radius: var(--radius-xs);
--loader-radius: var(--mdl-shape-borderRadius-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%);
--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-text-color: var(--text-color);
--ion-text-color-rgb: #{$text-color-rgb};
@ -95,7 +95,7 @@ html {
--ion-card-color: var(--text-color);
--ion-card-vertical-margin: 12px;
--ion-card-horizontal-margin: 12px;
--ion-card-radius: var(--radius-lg);
--ion-card-radius: var(--mdl-shape-borderRadius-lg);
--ion-card-border-width: 1px;
--ion-card-border-color: var(--stroke);
ion-card {
@ -135,7 +135,7 @@ html {
color: var(--core-link-color);
}
--core-header-toolbar-button-image-size: var(--a11y-min-target-size);
--core-header-toolbar-button-image-size: var(--a11y-sizing-minTargetSize);
--core-header-toolbar-background: var(--white);
--core-header-toolbar-border-width: 0px;
--core-header-toolbar-border-color: var(--stroke);
@ -183,7 +183,7 @@ html {
--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-height: var(--a11y-sizing-minTargetSize);
--ion-searchbar-color: var(--text-color);
--ion-searchbar-icon-color: var(--core-input-stroke);
ion-searchbar,
@ -277,7 +277,7 @@ 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-font-size: var(--mdl-typography-icon-fontSize-md);
--ion-item-detail-icon-opacity: 1;
--core-more-icon: var(--ion-item-icon-color);
ion-item {
@ -290,7 +290,7 @@ html {
}
}
--item-divider-min-height: calc(var(--a11y-min-target-size) + 8px);
--item-divider-min-height: calc(var(--a11y-sizing-minTargetSize) + 8px);
--item-divider-background: var(--ion-item-background);
--item-divider-color: var(--text-color);
--item-divider-border-width: 0px;
@ -310,8 +310,8 @@ html {
}
ion-back-button {
--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);
}
--selected-item-color: var(--primary);
@ -330,11 +330,11 @@ html {
--core-star-color: var(--primary);
--core-large-avatar-size: 80px;
--core-avatar-size: var(--a11y-min-target-size);
--core-avatar-size: var(--a11y-sizing-minTargetSize);
--core-avatar-radius: 50%;
--core-courseimage-on-course-size: 72px;
--core-courseimage-radius: var(--radius-sm);
--core-courseimage-radius: var(--mdl-shape-borderRadius-sm);
--core-navigation-background: var(--contrast-background);