MOBILE-4458 design: Move css from light/dark to DS and components
Pau Ferrer Ocaña
parent
59280ca81c
commit
2f9256725f
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
ion-back-button {
|
||||
--min-height: var(--a11y-sizing-minTargetSize);
|
||||
--min-width: var(--a11y-sizing-minTargetSize);
|
||||
|
||||
&.md::part(text) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
ion-content {
|
||||
--background: var(--ion-background-color);
|
||||
--background-alternative: var(--gray-200);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
ion-note {
|
||||
--color: var(--subdued-text-color);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue