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/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/theme.base.scss b/src/theme/theme.base.scss index 60cd784a5..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(--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; - } - } - } -} - ion-tabs.hide-header ion-header { display: none; } ion-footer { background-color: var(--contrast-background); + > ion-toolbar:only-child { top: 1px; } @@ -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(--mdl-shape-borderRadius-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 { @@ -914,44 +699,6 @@ 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; } @@ -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(--mdl-shape-borderRadius-lg) var(--mdl-shape-borderRadius-lg) 0 0; - } - - .action-sheet-group-cancel { - box-shadow: var(--drop-shadow-top, none); - } -} - // Radio. ion-radio, input[type=radio], @@ -1176,115 +903,6 @@ ion-badge { border-radius: var(--mdl-shape-borderRadius-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: 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); - } -} - -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(--mdl-shape-borderRadius-xs); - - .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, 0 !important, null, null); - } -} - // File uploader. .action-sheet-button input.core-fileuploader-file-handler-input { position: absolute; @@ -1377,10 +995,6 @@ 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.design-system.scss b/src/theme/theme.design-system.scss index 7c8bd8195..ae93f8add 100644 --- a/src/theme/theme.design-system.scss +++ b/src/theme/theme.design-system.scss @@ -1,4 +1,6 @@ @import "./globals.scss"; +@import "theme.light.scss"; +@import "theme.dark.scss"; html { @@ -115,7 +117,6 @@ html { --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; @@ -143,6 +144,92 @@ html { --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); + + // @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 **/ @@ -157,4 +244,6 @@ html { html { --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 ba94d0d23..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(--mdl-typography-body-fontSize-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(--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; --contrast-background: white; --loader-background-color: rgb(0 0 0 / 10%); --loader-shine: 251 251 251; - --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-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(--mdl-shape-borderRadius-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-sizing-minTargetSize); --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-sizing-minTargetSize); --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: var(--mdl-typography-icon-fontSize-md); - --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-sizing-minTargetSize) + 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-sizing-minTargetSize); - --min-width: var(--a11y-sizing-minTargetSize); - } - --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-sizing-minTargetSize); - --core-avatar-radius: 50%; - - --core-courseimage-on-course-size: 72px; - --core-courseimage-radius: var(--mdl-shape-borderRadius-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";