Dani Palou
GitHub
commit
4843fdc619
|
|
@ -22,8 +22,7 @@
|
||||||
padding-top: .75rem;
|
padding-top: .75rem;
|
||||||
padding-bottom: .75rem;
|
padding-bottom: .75rem;
|
||||||
color: var(--medium);
|
color: var(--medium);
|
||||||
font-weight: bold;
|
font: var(--mdl-typography-subtitle-font-md);
|
||||||
font-size: 18px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
contain: content;
|
contain: content;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-radius: var(--radius-xs);
|
border-radius: var(--mdl-shape-borderRadius-xs);
|
||||||
}
|
}
|
||||||
.s20 {
|
.s20 {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
|
|
||||||
ion-button,
|
ion-button,
|
||||||
core-combobox ::ng-deep ion-select {
|
core-combobox ::ng-deep ion-select {
|
||||||
--a11y-min-target-size: 40px;
|
--a11y-sizing-minTargetSize: 40px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
--border-width: 0;
|
--border-width: 0;
|
||||||
|
|
||||||
ion-icon {
|
ion-icon {
|
||||||
font-size: 20px;
|
font-size: var(--mdl-typography-icon-fontSize-md);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
contain: content;
|
contain: content;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-radius: var(--radius-xs);
|
border-radius: var(--mdl-shape-borderRadius-xs);
|
||||||
}
|
}
|
||||||
.s20 {
|
.s20 {
|
||||||
font-size: 2.7em;
|
font-size: 2.7em;
|
||||||
|
|
|
||||||
|
|
@ -12,20 +12,20 @@
|
||||||
ion-button,
|
ion-button,
|
||||||
core-combobox ::ng-deep ion-button {
|
core-combobox ::ng-deep ion-button {
|
||||||
--border-width: 0;
|
--border-width: 0;
|
||||||
--a11y-min-target-size: 40px;
|
--a11y-sizing-minTargetSize: 40px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
.select-icon {
|
.select-icon {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
ion-icon {
|
ion-icon {
|
||||||
font-size: 20px;
|
font-size: var(--mdl-typography-icon-fontSize-md);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
core-combobox ::ng-deep ion-select {
|
core-combobox ::ng-deep ion-select {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
--a11y-min-target-size: 40px;
|
--a11y-sizing-minTargetSize: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
core-search-box {
|
core-search-box {
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
|
|
||||||
> ion-icon {
|
> ion-icon {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
font-size: 20px;
|
font-size: var(--mdl-typography-icon-fontSize-md);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
@include padding(4px, 0px, 0px, 0px);
|
@include padding(4px, 0px, 0px, 0px);
|
||||||
|
|
||||||
ion-icon {
|
ion-icon {
|
||||||
font-size: 24px;
|
font-size: var(--mdl-typography-icon-fontSize-lg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -19,8 +19,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-radio {
|
ion-radio {
|
||||||
height: var(--a11y-min-target-size);
|
height: var(--a11y-sizing-minTargetSize);
|
||||||
width: var(--a11y-min-target-size);
|
width: var(--a11y-sizing-minTargetSize);
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,11 @@
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
--icon-size: 32px;
|
--icon-size: 32px;
|
||||||
--core-avatar-size: var(--icon-size);
|
|
||||||
--extra-icon-size: 12px;
|
--extra-icon-size: 12px;
|
||||||
|
|
||||||
::ng-deep core-user-avatar {
|
ion-item ::ng-deep core-user-avatar {
|
||||||
|
--core-avatar-size: var(--icon-size);
|
||||||
|
|
||||||
.core-avatar-extra-img {
|
.core-avatar-extra-img {
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -16,7 +17,7 @@
|
||||||
|
|
||||||
.core-avatar-extra-img {
|
.core-avatar-extra-img {
|
||||||
background: var(--background-color);
|
background: var(--background-color);
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--mdl-shape-borderRadius-sm);
|
||||||
img {
|
img {
|
||||||
max-width: var(--extra-icon-size);
|
max-width: var(--extra-icon-size);
|
||||||
max-height: var(--extra-icon-size);
|
max-height: var(--extra-icon-size);
|
||||||
|
|
@ -39,7 +40,7 @@
|
||||||
}
|
}
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
background: var(--background-color);
|
background: var(--background-color);
|
||||||
border-radius: var(--radius-xs);
|
border-radius: var(--mdl-shape-borderRadius-xs);
|
||||||
@include margin(6px, 8px, 6px, 0px);
|
@include margin(6px, 8px, 6px, 0px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
min-height: var(--a11y-min-target-size);
|
min-height: var(--a11y-sizing-minTargetSize);
|
||||||
min-width: var(--a11y-min-target-size);
|
min-width: var(--a11y-sizing-minTargetSize);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
|
|
||||||
ion-icon {
|
ion-icon {
|
||||||
margin: var(--icon-margin);
|
margin: var(--icon-margin);
|
||||||
font-size: 20px;
|
font-size: var(--mdl-typography-icon-fontSize-md);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
min-height: var(--a11y-min-target-size);
|
min-height: var(--a11y-sizing-minTargetSize);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
|
|
||||||
|
|
@ -110,9 +110,7 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
&::part(native) {
|
&::part(native) {
|
||||||
font-weight: var(--label-font-weight);
|
font: var(--mdl-typography-label-font-lg);
|
||||||
font-size: var(--label-lg-font-size);
|
|
||||||
line-height: var(--label-lg-line-height);
|
|
||||||
border-radius: var(--core-combobox-radius);
|
border-radius: var(--core-combobox-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
min-height: var(--a11y-min-target-size);
|
min-height: var(--a11y-sizing-minTargetSize);
|
||||||
min-width: var(--a11y-min-target-size);
|
min-width: var(--a11y-sizing-minTargetSize);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
|
|
||||||
p,
|
p,
|
||||||
::ng-deep p {
|
::ng-deep p {
|
||||||
font-size: var(--heading-6-font-size);
|
font-size: var(--mdl-typography-heading6-fontSize);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,14 +11,14 @@
|
||||||
|
|
||||||
.message-box {
|
.message-box {
|
||||||
--background: var(--message-background);
|
--background: var(--message-background);
|
||||||
--min-height: var(--a11y-min-target-size);
|
--min-height: var(--a11y-sizing-minTargetSize);
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--mdl-shape-borderRadius-sm);
|
||||||
margin: 8px;
|
margin: 8px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
max-width: var(--list-item-max-width);
|
max-width: var(--list-item-max-width);
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
--padding-top: var(--module-icon-padding, 4px);
|
--padding-top: var(--module-icon-padding, 4px);
|
||||||
--padding-end: var(--module-icon-padding, 4px);
|
--padding-end: var(--module-icon-padding, 4px);
|
||||||
--padding-bottom: var(--module-icon-padding, 4px);
|
--padding-bottom: var(--module-icon-padding, 4px);
|
||||||
--icon-radius: var(--module-icon-radius, var(--radius-xs));
|
--icon-radius: var(--module-icon-radius, var(--mdl-shape-borderRadius-xs));
|
||||||
--margin-end: 0px;
|
--margin-end: 0px;
|
||||||
--margin-vertical: 0px;
|
--margin-vertical: 0px;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
--textarea-color: var(--core-input-text);
|
--textarea-color: var(--core-input-text);
|
||||||
--textarea-border-width: var(--core-input-border-width);
|
--textarea-border-width: var(--core-input-border-width);
|
||||||
--textarea-border-color: var(--core-input-stroke);
|
--textarea-border-color: var(--core-input-stroke);
|
||||||
--textarea-radius: var(--radius-xl);
|
--textarea-radius: var(--mdl-shape-borderRadius-xl);
|
||||||
|
|
||||||
form {
|
form {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
border: var(--textarea-border-width) solid var(--textarea-border-color);
|
border: var(--textarea-border-width) solid var(--textarea-border-color);
|
||||||
border-radius: var(--textarea-radius);
|
border-radius: var(--textarea-radius);
|
||||||
|
|
||||||
min-height: var(--a11y-min-target-size);
|
min-height: var(--a11y-sizing-minTargetSize);
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@include margin(4px, 0px, 4px, 8px);
|
@include margin(4px, 0px, 4px, 8px);
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
height: var(--height);
|
height: var(--height);
|
||||||
--border-radius: 0;
|
--border-radius: 0;
|
||||||
ion-icon {
|
ion-icon {
|
||||||
font-size: 16px;
|
font-size: var(--mdl-typography-icon-fontSize-sm);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
div.core-timer {
|
div.core-timer {
|
||||||
background: var(--timer-background);
|
background: var(--timer-background);
|
||||||
color: var(--timer-text-color, var(--text-color));
|
color: var(--timer-text-color, var(--text-color));
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--mdl-shape-borderRadius-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
|
|
||||||
ion-card {
|
ion-card {
|
||||||
--border-radius: var(--radius-sm);
|
--border-radius: var(--mdl-shape-borderRadius-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep ion-item-divider {
|
::ng-deep ion-item-divider {
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
--padding-start: 0.5em;
|
--padding-start: 0.5em;
|
||||||
--padding-end: 0;
|
--padding-end: 0;
|
||||||
--border-radius: 2em 0 0 2em;
|
--core-input-radius: 2em 0 0 2em;
|
||||||
height: 56px;
|
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%);
|
--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]) {
|
:host-context([dir=rtl]) {
|
||||||
ion-button {
|
ion-button {
|
||||||
--border-radius: 0 2em 2em 0;
|
--core-input-radius: 0 2em 2em 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
|
|
||||||
.core-module-info-box {
|
.core-module-info-box {
|
||||||
background: var(--light);
|
background: var(--light);
|
||||||
border-radius: var(--radius-xs);
|
border-radius: var(--mdl-shape-borderRadius-xs);
|
||||||
margin: 8px;
|
margin: 8px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
--module-icon-padding: 0px;
|
--module-icon-padding: 0px;
|
||||||
--module-legacy-icon-padding: 4px;
|
--module-legacy-icon-padding: 4px;
|
||||||
--module-icon-radius: var(--radius-xs);
|
--module-icon-radius: var(--mdl-shape-borderRadius-xs);
|
||||||
|
|
||||||
@include margin-horizontal(null, 8px);
|
@include margin-horizontal(null, 8px);
|
||||||
align-self: self-start;
|
align-self: self-start;
|
||||||
|
|
@ -75,7 +75,7 @@
|
||||||
--padding-start: 0px;
|
--padding-start: 0px;
|
||||||
--padding-end: 0px;
|
--padding-end: 0px;
|
||||||
ion-icon {
|
ion-icon {
|
||||||
font-size: 20px;
|
font-size: var(--mdl-typography-icon-fontSize-md);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -101,7 +101,7 @@
|
||||||
|
|
||||||
.core-module-description ::ng-deep img,
|
.core-module-description ::ng-deep img,
|
||||||
.activity-title .item-heading core-format-text ::ng-deep img {
|
.activity-title .item-heading core-format-text ::ng-deep img {
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--mdl-shape-borderRadius-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
core-course-module-completion {
|
core-course-module-completion {
|
||||||
|
|
@ -132,7 +132,7 @@
|
||||||
.activity-description-availabilityinfo {
|
.activity-description-availabilityinfo {
|
||||||
.core-module-availabilityinfo {
|
.core-module-availabilityinfo {
|
||||||
background: var(--gray-300);
|
background: var(--gray-300);
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--mdl-shape-borderRadius-sm);
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
|
||||||
|
|
@ -43,8 +43,8 @@
|
||||||
|
|
||||||
.course-container {
|
.course-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: calc(var(--thumb-height) - var(--radius-lg));
|
top: calc(var(--thumb-height) - var(--mdl-shape-borderRadius-lg));
|
||||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
border-radius: var(--mdl-shape-borderRadius-lg) var(--mdl-shape-borderRadius-lg) 0 0;
|
||||||
background-color: var(--ion-background-color);
|
background-color: var(--ion-background-color);
|
||||||
box-shadow: var(--drop-shadow-top);
|
box-shadow: var(--drop-shadow-top);
|
||||||
clip-path: inset(-5px 0px 0px 0px);
|
clip-path: inset(-5px 0px 0px 0px);
|
||||||
|
|
@ -68,7 +68,7 @@
|
||||||
|
|
||||||
.core-course-dates {
|
.core-course-dates {
|
||||||
background: var(--light);
|
background: var(--light);
|
||||||
border-radius: var(--radius-xs);
|
border-radius: var(--mdl-shape-borderRadius-xs);
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
.core-module-availabilityinfo {
|
.core-module-availabilityinfo {
|
||||||
background: var(--light);
|
background: var(--light);
|
||||||
border-radius: var(--radius-xs);
|
border-radius: var(--mdl-shape-borderRadius-xs);
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
::ng-deep ul {
|
::ng-deep ul {
|
||||||
|
|
|
||||||
|
|
@ -125,7 +125,7 @@
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
background-color: var(--toobar-background);
|
background-color: var(--toobar-background);
|
||||||
border-radius: var(--radius-xs);
|
border-radius: var(--mdl-shape-borderRadius-xs);
|
||||||
@include core-transition(background-color, 200ms);
|
@include core-transition(background-color, 200ms);
|
||||||
color: var(--button-color);
|
color: var(--button-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
--icon-size: 1.8em;
|
--icon-size: 1.8em;
|
||||||
|
|
||||||
// Offset padding for visual alignment.
|
// Offset padding for visual alignment.
|
||||||
margin: calc((var(--icon-size) - var(--a11y-min-target-size)) / 2);
|
margin: calc((var(--icon-size) - var(--a11y-sizing-minTargetSize)) / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -97,7 +97,7 @@ table.core-table.core-grades-table {
|
||||||
}
|
}
|
||||||
|
|
||||||
th, td {
|
th, td {
|
||||||
height: var(--a11y-min-target-size);
|
height: var(--a11y-sizing-minTargetSize);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -58,7 +58,7 @@ ion-tab-bar {
|
||||||
text-overflow: unset;
|
text-overflow: unset;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 24px;
|
font-size: var(--mdl-typography-icon-fontSize-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-badge.core-tab-badge {
|
ion-badge.core-tab-badge {
|
||||||
|
|
|
||||||
|
|
@ -74,7 +74,7 @@
|
||||||
|
|
||||||
.questioncorrectnessicon,
|
.questioncorrectnessicon,
|
||||||
.fa.icon.questioncorrectnessicon {
|
.fa.icon.questioncorrectnessicon {
|
||||||
font-size: 20px;
|
font-size: var(--mdl-typography-icon-fontSize-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
.item.item-interactive.item-interactive-disabled ::ng-deep {
|
.item.item-interactive.item-interactive-disabled ::ng-deep {
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
ion-footer {
|
ion-footer {
|
||||||
ion-icon {
|
ion-icon {
|
||||||
font-size: 16px;
|
font-size: var(--mdl-typography-icon-fontSize-sm);
|
||||||
color: $blue;
|
color: $blue;
|
||||||
margin-right: .3rem;
|
margin-right: .3rem;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
--module-icon-size: var(--core-global-search-result-icon-size);
|
--module-icon-size: var(--core-global-search-result-icon-size);
|
||||||
--module-legacy-icon-size: var(--core-global-search-result-icon-size);
|
--module-legacy-icon-size: var(--core-global-search-result-icon-size);
|
||||||
|
|
||||||
margin-inline-end: var(--spacing-2);
|
margin-inline-end: var(--mdl-spacing-2);
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
width: var(--core-global-search-result-icon-size);
|
width: var(--core-global-search-result-icon-size);
|
||||||
height: var(--core-global-search-result-icon-size);
|
height: var(--core-global-search-result-icon-size);
|
||||||
|
|
||||||
margin-inline-end: var(--spacing-2);
|
margin-inline-end: var(--mdl-spacing-2);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -36,15 +36,15 @@
|
||||||
core-user-avatar {
|
core-user-avatar {
|
||||||
--core-avatar-size: var(--core-global-search-result-image-size);
|
--core-avatar-size: var(--core-global-search-result-image-size);
|
||||||
|
|
||||||
margin-top: var(--spacing-3);
|
margin-top: var(--mdl-spacing-3);
|
||||||
margin-bottom: var(--spacing-3);
|
margin-bottom: var(--mdl-spacing-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
core-course-image {
|
core-course-image {
|
||||||
--core-image-size: var(--core-global-search-result-image-size);
|
--core-image-size: var(--core-global-search-result-image-size);
|
||||||
|
|
||||||
margin-top: var(--spacing-3);
|
margin-top: var(--mdl-spacing-3);
|
||||||
margin-bottom: var(--spacing-3);
|
margin-bottom: var(--mdl-spacing-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-label {
|
ion-label {
|
||||||
|
|
@ -72,12 +72,12 @@
|
||||||
justify-items: center;
|
justify-items: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: var(--core-global-search-result-context-color);
|
color: var(--core-global-search-result-context-color);
|
||||||
margin-top: var(--spacing-2);
|
margin-top: var(--mdl-spacing-2);
|
||||||
margin-inline-end: var(--spacing-4);
|
margin-inline-end: var(--mdl-spacing-4);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
||||||
ion-icon {
|
ion-icon {
|
||||||
margin-inline-end: var(--spacing-1);
|
margin-inline-end: var(--mdl-spacing-1);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
:host {
|
:host {
|
||||||
--height: var(--a11y-min-target-size);
|
--height: var(--a11y-sizing-minTargetSize);
|
||||||
--search-height: calc(var(--height) - 2px);
|
--search-height: calc(var(--height) - 2px);
|
||||||
min-height: var(--height);
|
min-height: var(--height);
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
|
|
||||||
ion-button.button {
|
ion-button.button {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
--a11y-min-target-size: var(--search-height);
|
--a11y-sizing-minTargetSize: var(--search-height);
|
||||||
--padding-start: 0px;
|
--padding-start: 0px;
|
||||||
--padding-end: 0px;
|
--padding-end: 0px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
@ -50,7 +50,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-item {
|
ion-item {
|
||||||
--min-height: var(--a11y-min-target-size);
|
--min-height: var(--a11y-sizing-minTargetSize);
|
||||||
--border-width: 0px;
|
--border-width: 0px;
|
||||||
--background: var(--core-search-box-background);
|
--background: var(--core-search-box-background);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
ion-item ion-icon {
|
ion-item ion-icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border-radius: var(--radius-xs);
|
border-radius: var(--mdl-shape-borderRadius-xs);
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
background-color: var(--gray-100);
|
background-color: var(--gray-100);
|
||||||
color: var(--gray-900);
|
color: var(--gray-900);
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,7 @@
|
||||||
min-width: var(--toggle-size);
|
min-width: var(--toggle-size);
|
||||||
height: var(--toggle-size);
|
height: var(--toggle-size);
|
||||||
width: var(--toggle-size);
|
width: var(--toggle-size);
|
||||||
--border-radius: var(--radius-xl);
|
--border-radius: var(--mdl-shape-borderRadius-xl);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
--padding-start: 0px;
|
--padding-start: 0px;
|
||||||
--padding-end: 0px;
|
--padding-end: 0px;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
@use "theme/globals" as *;
|
|
||||||
|
|
||||||
:host-context(.ios) {
|
:host-context(.ios) {
|
||||||
ion-footer .toolbar:last-child {
|
ion-footer .toolbar:last-child {
|
||||||
padding-bottom: 4px;
|
padding-bottom: 4px;
|
||||||
|
|
|
||||||
|
|
@ -4,18 +4,24 @@
|
||||||
--background-color: var(--gray-300);
|
--background-color: var(--gray-300);
|
||||||
--toggle-icon-size: 16px;
|
--toggle-icon-size: 16px;
|
||||||
|
|
||||||
|
--text-color-secondary: var(--gray-800);
|
||||||
|
|
||||||
|
--state-color-hover: rgb(40 40 40, 4%); // --gray-900 4%
|
||||||
|
--state-color-pressed: rgb(40 40 40, 12%); // --gray-900 12%
|
||||||
|
--state-color-focused: rgb(40 40 40, 12%); // --gray-900 12%
|
||||||
|
|
||||||
background: var(--background-color);
|
background: var(--background-color);
|
||||||
border-radius: var(--radius-xs);
|
border-radius: var(--mdl-shape-borderRadius-xs);
|
||||||
|
|
||||||
.core-error-accordion--code {
|
.core-error-accordion--code {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
color: var(--text-color-main);
|
color: var(--text-color);
|
||||||
font: var(--subtitle-md-font);
|
font: var(--mdl-typography-subtitle-font-md);
|
||||||
padding-top: var(--spacing-2);
|
padding-top: var(--mdl-spacing-2);
|
||||||
padding-bottom: var(--spacing-2);
|
padding-bottom: var(--mdl-spacing-2);
|
||||||
padding-inline-start: var(--spacing-3);
|
padding-inline-start: var(--mdl-spacing-3);
|
||||||
padding-inline-end: var(--spacing-3);
|
padding-inline-end: var(--mdl-spacing-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.core-error-accordion--details {
|
.core-error-accordion--details {
|
||||||
|
|
@ -30,12 +36,12 @@
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-top: var(--spacing-2);
|
padding-top: var(--mdl-spacing-2);
|
||||||
padding-bottom: var(--spacing-2);
|
padding-bottom: var(--mdl-spacing-2);
|
||||||
padding-inline-start: var(--spacing-3);
|
padding-inline-start: var(--mdl-spacing-3);
|
||||||
padding-inline-end: var(--spacing-3);
|
padding-inline-end: var(--mdl-spacing-3);
|
||||||
text-align: start;
|
text-align: start;
|
||||||
font: var(--body-md-font);
|
font: var(--mdl-typography-body-font-md);
|
||||||
color: var(--text-color-secondary);
|
color: var(--text-color-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -48,11 +54,11 @@
|
||||||
background: transparent;
|
background: transparent;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
color: var(--text-color-secondary);
|
color: var(--text-color-secondary);
|
||||||
font: var(--label-lg-font);
|
font: var(--mdl-typography-label-font-lg);
|
||||||
padding-top: var(--spacing-2);
|
padding-top: var(--mdl-spacing-2);
|
||||||
padding-bottom: var(--spacing-2);
|
padding-bottom: var(--mdl-spacing-2);
|
||||||
padding-inline-start: var(--spacing-3);
|
padding-inline-start: var(--mdl-spacing-3);
|
||||||
padding-inline-end: var(--spacing-3);
|
padding-inline-end: var(--mdl-spacing-3);
|
||||||
|
|
||||||
.core-error-accordion--toggle-text {
|
.core-error-accordion--toggle-text {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -67,7 +73,7 @@
|
||||||
|
|
||||||
ion-icon {
|
ion-icon {
|
||||||
width: var(--toggle-icon-size);
|
width: var(--toggle-icon-size);
|
||||||
margin-inline-start: var(--spacing-4);
|
margin-inline-start: var(--mdl-spacing-4);
|
||||||
transition: transform var(--toggle-icon-animation-duration) var(--toggle-icon-animation-function);
|
transition: transform var(--toggle-icon-animation-duration) var(--toggle-icon-animation-function);
|
||||||
transform: rotate(0);
|
transform: rotate(0);
|
||||||
}
|
}
|
||||||
|
|
@ -82,8 +88,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
box-shadow: none;
|
@include core-focus-style();
|
||||||
outline: 2px solid var(--state-color-keyboard-focus);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
|
|
|
||||||
|
|
@ -75,14 +75,14 @@ core-format-text {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@include position(null, 10px, 10px, null);
|
@include position(null, 10px, 10px, null);
|
||||||
color: var(--ion-text-color);
|
color: var(--ion-text-color);
|
||||||
border-radius: var(--radius-xl);
|
border-radius: var(--mdl-shape-borderRadius-xl);
|
||||||
background-color: var(--core-format-text-viewer-icon-background);
|
background-color: var(--core-format-text-viewer-icon-background);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
width: var(--a11y-min-target-size);
|
width: var(--a11y-sizing-minTargetSize);
|
||||||
height: var(--a11y-min-target-size);
|
height: var(--a11y-sizing-minTargetSize);
|
||||||
max-width: var(--a11y-min-target-size);
|
max-width: var(--a11y-sizing-minTargetSize);
|
||||||
font-size: 24px;
|
font-size: var(--mdl-typography-icon-fontSize-lg);
|
||||||
|
|
||||||
ion-icon {
|
ion-icon {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
@ -266,9 +266,9 @@ core-rich-text-editor .core-rte-editor {
|
||||||
}
|
}
|
||||||
|
|
||||||
img.icon {
|
img.icon {
|
||||||
font-size: 16px;
|
font-size: var(--mdl-typography-icon-fontSize-sm);
|
||||||
width: 16px;
|
width: var(--mdl-typography-icon-fontSize-sm);
|
||||||
height: 16px;
|
height: var(--mdl-typography-icon-fontSize-sm);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
-webkit-box-sizing: content-box;
|
-webkit-box-sizing: content-box;
|
||||||
|
|
@ -285,7 +285,7 @@ core-rich-text-editor .core-rte-editor {
|
||||||
border: 1px solid var(--gray-500);
|
border: 1px solid var(--gray-500);
|
||||||
background: var(--contrast-background);
|
background: var(--contrast-background);
|
||||||
padding: 6px 8px;
|
padding: 6px 8px;
|
||||||
border-radius: var(--radius-xs);
|
border-radius: var(--mdl-shape-borderRadius-xs);
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
@ -615,7 +615,7 @@ core-rich-text-editor .core-rte-editor {
|
||||||
}
|
}
|
||||||
|
|
||||||
// utilities/_text.scss
|
// utilities/_text.scss
|
||||||
.text-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; }
|
.text-monospace { font-family: var(--mdl-typography-monospace-font) !important; }
|
||||||
.text-justify { text-align: justify !important; }
|
.text-justify { text-align: justify !important; }
|
||||||
.text-wrap { white-space: normal !important; }
|
.text-wrap { white-space: normal !important; }
|
||||||
.text-nowrap { white-space: nowrap !important; }
|
.text-nowrap { white-space: nowrap !important; }
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -69,8 +69,9 @@
|
||||||
@mixin core-focus() {
|
@mixin core-focus() {
|
||||||
outline: none;
|
outline: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
@include position(0, 0, 0, 0);
|
@include position(0px, 0px, 0px, 0px);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: "";
|
content: "";
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
@ -80,10 +81,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin core-focus-style() {
|
@mixin core-focus-style() {
|
||||||
box-shadow: inset 0 0 var(--a11y-focus-width) 1px var(--a11y-focus-color);
|
box-shadow: var(--a11y-shadow-focus-boxShadow);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
// Thicker option:
|
// Thicker option:
|
||||||
// border: var(--a11y-focus-width) solid var(--a11y-focus-color);
|
// outline: var(--a11y-shadow-focus-outline);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin core-transition($properties: all, $duration: 500ms, $timing-function: ease-in-out) {
|
@mixin core-transition($properties: all, $duration: 500ms, $timing-function: ease-in-out) {
|
||||||
|
|
@ -198,22 +199,22 @@
|
||||||
|
|
||||||
@mixin core-headings() {
|
@mixin core-headings() {
|
||||||
h1 {
|
h1 {
|
||||||
font: var(--heading-1-font);
|
font: var(--mdl-typography-heading1-font);
|
||||||
}
|
}
|
||||||
h2, .item-heading {
|
h2, .item-heading {
|
||||||
font: var(--heading-2-font);
|
font: var(--mdl-typography-heading2-font);
|
||||||
}
|
}
|
||||||
h3 {
|
h3 {
|
||||||
font: var(--heading-3-font);
|
font: var(--mdl-typography-heading3-font);
|
||||||
}
|
}
|
||||||
h4 {
|
h4 {
|
||||||
font: var(--heading-4-font);
|
font: var(--mdl-typography-heading4-font);
|
||||||
}
|
}
|
||||||
h5 {
|
h5 {
|
||||||
font: var(--heading-5-font);
|
font: var(--mdl-typography-heading5-font);
|
||||||
}
|
}
|
||||||
h6 {
|
h6 {
|
||||||
font: var(--heading-6-font);
|
font: var(--mdl-typography-heading6-font);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,9 @@
|
||||||
// Global Color Functions
|
// Global Color Functions
|
||||||
@import "./ionic.functions.color";
|
@import "./ionic.functions.color";
|
||||||
|
|
||||||
|
// Global Font Functions
|
||||||
|
@import "./ionic.functions.font";
|
||||||
|
|
||||||
// Global Mixins
|
// Global Mixins
|
||||||
@import "./ionic.mixins";
|
@import "./ionic.mixins";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
/**
|
||||||
|
* Imported ionic color functions for SCSS
|
||||||
|
* ----------------------------------------------------------------------------
|
||||||
|
* Extracted from
|
||||||
|
* https://github.com/ionic-team/ionic-framework/blob/main/core/src/themes/ionic.functions.font.scss
|
||||||
|
*/
|
||||||
|
|
||||||
|
@use "sass:math";
|
||||||
|
|
||||||
|
$baselineSize: 16px !default;
|
||||||
|
$baselineUnit: 1rem !default;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert a font size to a dynamic font size.
|
||||||
|
* Fonts that participate in Dynamic Type should use
|
||||||
|
* dynamic font sizes.
|
||||||
|
* @param size - The initial font size including the unit (i.e. px or pt)
|
||||||
|
* @param unit (optional) - The unit to convert to. Use this if you want to
|
||||||
|
* convert to a unit other than $baselineUnit.
|
||||||
|
*/
|
||||||
|
@function dynamic-font($size, $unit: $baselineUnit) {
|
||||||
|
@return (math.div($size, $baselineSize)) * $unit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert a font size to a dynamic font size but impose
|
||||||
|
* a maximum font size.
|
||||||
|
* @param size - The initial font size including the unit (i.e. px or pt)
|
||||||
|
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
||||||
|
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
||||||
|
* convert to a unit other than $baselineUnit.
|
||||||
|
*/
|
||||||
|
@function dynamic-font-max($size, $maxScale, $unit: $baselineUnit) {
|
||||||
|
$baseScale: dynamic-font($size, $unit);
|
||||||
|
$maxScale: $size * $maxScale;
|
||||||
|
|
||||||
|
@return min($baseScale, $maxScale);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert a font size to a dynamic font size but impose
|
||||||
|
* a minimum font size.
|
||||||
|
* @param size - The initial font size including the unit (i.e. px or pt)
|
||||||
|
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
||||||
|
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
||||||
|
* convert to a unit other than $baselineUnit.
|
||||||
|
*/
|
||||||
|
@function dynamic-font-min($minScale, $size, $unit: $baselineUnit) {
|
||||||
|
$baseScale: dynamic-font($size, $unit);
|
||||||
|
$minScale: $size * $minScale;
|
||||||
|
|
||||||
|
@return max($minScale, $baseScale);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert a font size to a dynamic font size but impose
|
||||||
|
* maximum and minimum font sizes.
|
||||||
|
* @param size - The initial font size including the unit (i.e. px or pt)
|
||||||
|
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
||||||
|
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
||||||
|
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
||||||
|
* convert to a unit other than $baselineUnit.
|
||||||
|
*/
|
||||||
|
@function dynamic-font-clamp($minScale, $baseSize, $maxScale, $unit: $baselineUnit) {
|
||||||
|
$baseScale: dynamic-font($baseSize, $unit);
|
||||||
|
$maxScale: $baseSize * $maxScale;
|
||||||
|
$minScale: $baseSize * $minScale;
|
||||||
|
|
||||||
|
@return clamp($minScale, $baseScale, $maxScale);
|
||||||
|
}
|
||||||
|
|
@ -9,6 +9,7 @@ html.force-safe-area-margins {
|
||||||
|
|
||||||
// @todo MOBILE-3790 non-standard property, doesn't work everywhere.
|
// @todo MOBILE-3790 non-standard property, doesn't work everywhere.
|
||||||
html {
|
html {
|
||||||
|
--zoom-level: 100%;
|
||||||
zoom: var(--zoom-level);
|
zoom: var(--zoom-level);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -16,6 +17,15 @@ body {
|
||||||
-webkit-text-size-adjust: var(--zoom-level);
|
-webkit-text-size-adjust: var(--zoom-level);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--core-link-color);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[dir=rtl] {
|
||||||
|
--rotate-expandable: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
// Common styles.
|
// Common styles.
|
||||||
.text-left { text-align: left; }
|
.text-left { text-align: left; }
|
||||||
.text-right { text-align: right; }
|
.text-right { text-align: right; }
|
||||||
|
|
@ -144,117 +154,13 @@ ion-toolbar {
|
||||||
--min-height: var(--core-header-toolbar-height);
|
--min-height: var(--core-header-toolbar-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Header.
|
|
||||||
ion-header {
|
|
||||||
z-index: 12; // To hide swiper-container on scroll.
|
|
||||||
|
|
||||||
ion-toolbar {
|
|
||||||
ion-spinner {
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-back-button,
|
|
||||||
.in-toolbar.button-clear,
|
|
||||||
.in-toolbar.button-solid,
|
|
||||||
.button.button-clear,
|
|
||||||
.button.button-solid {
|
|
||||||
--color: var(--core-header-buttons-color);
|
|
||||||
--background: var(--core-header-buttons-background);
|
|
||||||
--ion-toolbar-color: var(--core-header-buttons-color);
|
|
||||||
--border-radius: var(--radius-xl);
|
|
||||||
--primary: var(--core-header-buttons-color);
|
|
||||||
}
|
|
||||||
ion-back-button::part(text) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Style fake back button like the original ones.
|
|
||||||
ion-button.ion-back-button {
|
|
||||||
width: 48px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.button-clear.button-has-icon-only,
|
|
||||||
.button.button-solid.button-has-icon-only {
|
|
||||||
width: var(--a11y-min-target-size);
|
|
||||||
height: var(--a11y-min-target-size);
|
|
||||||
ion-icon {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.core-navbar-button-hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-title {
|
|
||||||
@include padding(0, 16px);
|
|
||||||
|
|
||||||
h1, h2, .subheading {
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter_mathjaxloader_equation div {
|
|
||||||
display: inline !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
.core-header-logo {
|
|
||||||
max-height: var(--core-mainpage-headerlogo-maxheight);
|
|
||||||
display: var( --core-mainpage-headerlogo-display);
|
|
||||||
}
|
|
||||||
|
|
||||||
.core-header-sitename {
|
|
||||||
display: var(--core-mainpage-sitename-display);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, .subheading {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 500;
|
|
||||||
letter-spacing: .0125em;
|
|
||||||
text-align: start;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 + h2,
|
|
||||||
h1 + .subheading {
|
|
||||||
font-size: var(--text-size);
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.ios {
|
|
||||||
position: static;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
left: auto;
|
|
||||||
right: auto;
|
|
||||||
top: auto;
|
|
||||||
text-align: start;
|
|
||||||
|
|
||||||
h1, h2, .subheading {
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 + h2,
|
|
||||||
h1 + .subheading {
|
|
||||||
font-size: var(--text-size);
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-tabs.hide-header ion-header {
|
ion-tabs.hide-header ion-header {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-footer {
|
ion-footer {
|
||||||
background-color: var(--contrast-background);
|
background-color: var(--contrast-background);
|
||||||
|
|
||||||
> ion-toolbar:only-child {
|
> ion-toolbar:only-child {
|
||||||
top: 1px;
|
top: 1px;
|
||||||
}
|
}
|
||||||
|
|
@ -266,8 +172,8 @@ ion-fab-button,
|
||||||
button,
|
button,
|
||||||
[role="button"] {
|
[role="button"] {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
min-height: var(--a11y-min-target-size);
|
min-height: var(--a11y-sizing-minTargetSize);
|
||||||
min-width: var(--a11y-min-target-size);
|
min-width: var(--a11y-sizing-minTargetSize);
|
||||||
|
|
||||||
&.button-large {
|
&.button-large {
|
||||||
min-height: 2.8em;
|
min-height: 2.8em;
|
||||||
|
|
@ -279,113 +185,6 @@ ion-fab-button {
|
||||||
--box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
|
--box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-button {
|
|
||||||
margin: 4px 8px;
|
|
||||||
|
|
||||||
ion-spinner[slot=start],
|
|
||||||
img[slot=start] {
|
|
||||||
@include margin-horizontal(-0.3em, 0.3em);
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-spinner[slot=end],
|
|
||||||
img[slot=end] {
|
|
||||||
@include margin-horizontal(-0.3em, 0.3em);
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-spinner[slot] {
|
|
||||||
width: 20px;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-button.button-outline {
|
|
||||||
--border-width: var(--core-input-border-width);
|
|
||||||
--border-color: var(--core-input-stroke);
|
|
||||||
--background: var(--core-input-background);
|
|
||||||
--color: var(--core-input-text);
|
|
||||||
--ion-color-primary: var(--core-input-text);
|
|
||||||
&.ios {
|
|
||||||
--color-activated: var(--contrast-background);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-button.button-solid {
|
|
||||||
--box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-button core-format-text {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: block;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-button > * {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-button.ion-text-wrap {
|
|
||||||
white-space: normal;
|
|
||||||
core-format-text {
|
|
||||||
white-space: normal;
|
|
||||||
display: contents;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > * {
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-button ion-spinner {
|
|
||||||
--color: inherit !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-button.button-has-icon-only {
|
|
||||||
margin: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-button:not(.button-has-icon-only):not(.button-small) > ion-icon {
|
|
||||||
min-width: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-button.button.button-clear.button-has-icon-only {
|
|
||||||
--border-radius: var(--radius-xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-button.button.button-clear {
|
|
||||||
--color: var(--core-input-text);
|
|
||||||
--ion-color-primary: var(--core-input-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-button.button.button-solid,
|
|
||||||
ion-button.button.button-outline {
|
|
||||||
--border-radius: var(--core-input-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-button .select-icon {
|
|
||||||
margin: var(--icon-margin);
|
|
||||||
width: 19px;
|
|
||||||
height: 19px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.select-icon-inner {
|
|
||||||
left: 5px;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -2px;
|
|
||||||
position: absolute;
|
|
||||||
width: 0px;
|
|
||||||
height: 0px;
|
|
||||||
color: currentcolor;
|
|
||||||
pointer-events: none;
|
|
||||||
border-top: 5px solid;
|
|
||||||
border-right: 5px solid transparent;
|
|
||||||
border-left: 5px solid transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[role="button"],
|
[role="button"],
|
||||||
.clickable {
|
.clickable {
|
||||||
cursor: pointer;
|
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.
|
// Ionic list.
|
||||||
ion-list {
|
ion-list {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
|
@ -582,6 +356,17 @@ ion-tabs.placement-bottom .tabs-inner {
|
||||||
--ion-safe-area-bottom: 0px;
|
--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 {
|
core-split-view.menu-and-content {
|
||||||
.menu {
|
.menu {
|
||||||
|
|
@ -736,7 +521,7 @@ body.core-iframe-fullscreen ion-router-outlet {
|
||||||
}
|
}
|
||||||
|
|
||||||
.core-password-modal {
|
.core-password-modal {
|
||||||
--border-radius: var(--radius-sm);
|
--border-radius: var(--mdl-shape-borderRadius-sm);
|
||||||
--min-width: auto;
|
--min-width: auto;
|
||||||
--min-height: 300px;
|
--min-height: 300px;
|
||||||
--width: 384px;
|
--width: 384px;
|
||||||
|
|
@ -800,7 +585,7 @@ body.core-iframe-fullscreen ion-router-outlet {
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-button {
|
ion-button {
|
||||||
--a11y-min-target-size: 40px;
|
--a11y-sizing-minTargetSize: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.item-directory ion-icon {
|
&.item-directory ion-icon {
|
||||||
|
|
@ -835,7 +620,7 @@ body.core-iframe-fullscreen ion-router-outlet {
|
||||||
--border-width: 0;
|
--border-width: 0;
|
||||||
|
|
||||||
--border-color: var(--color-tint);
|
--border-color: var(--color-tint);
|
||||||
--border-radius: var(--radius-sm);
|
--border-radius: var(--mdl-shape-borderRadius-sm);
|
||||||
--background: var(--color-tint);
|
--background: var(--color-tint);
|
||||||
--color: var(--color-shade);
|
--color: var(--color-shade);
|
||||||
|
|
||||||
|
|
@ -914,50 +699,12 @@ img[core-external-content]:not([src]) {
|
||||||
visibility: hidden;
|
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 {
|
.core-course-module-handler:not(.addon-mod-label-handler) .item-heading .filter_mathjaxloader_equation div {
|
||||||
display: inline !important;
|
display: inline !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-summary core-format-text img {
|
.section-summary core-format-text img {
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--mdl-shape-borderRadius-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-list.core-course-module-list-wrapper,
|
ion-list.core-course-module-list-wrapper,
|
||||||
|
|
@ -996,26 +743,6 @@ ion-toolbar h1 .core-bar-button-image img {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Action sheet.
|
|
||||||
ion-action-sheet.md {
|
|
||||||
.action-sheet-title {
|
|
||||||
@include padding(4px, null, 4px, 16px);
|
|
||||||
font-size: 12px;
|
|
||||||
min-height: auto;
|
|
||||||
color: var(--medium);
|
|
||||||
line-height: 2em;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-sheet-group:first-child {
|
|
||||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-sheet-group-cancel {
|
|
||||||
box-shadow: var(--drop-shadow-top, none);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Radio.
|
// Radio.
|
||||||
ion-radio,
|
ion-radio,
|
||||||
input[type=radio],
|
input[type=radio],
|
||||||
|
|
@ -1173,116 +900,7 @@ ion-select-popover {
|
||||||
ion-badge {
|
ion-badge {
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
padding: 2px 8px;
|
padding: 2px 8px;
|
||||||
border-radius: var(--radius-lg);
|
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: 16px;
|
|
||||||
min-width: 16px;
|
|
||||||
@include margin(0, 8px, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-label {
|
|
||||||
white-space: normal !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-button.button.chip {
|
|
||||||
--border-radius: var(--radius-md);
|
|
||||||
min-height: 32px;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
ion-icon[slot=start] {
|
|
||||||
@include margin(0, 8px, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-icon[slot=end] {
|
|
||||||
@include margin(0, 0, 0, 8px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-chip {
|
|
||||||
padding: 4px 8px;
|
|
||||||
height: auto;
|
|
||||||
|
|
||||||
// Chips are not currently clickable, only if specified explicitly.
|
|
||||||
&.ion-activatable:not(.clickable) {
|
|
||||||
cursor: auto;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
&.clickable {
|
|
||||||
cursor: pointer;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.fab-chip {
|
|
||||||
padding: 8px 12px;
|
|
||||||
box-shadow: 0 2px 4px rgb(0 0 0 / 40%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.ion-color {
|
|
||||||
background: var(--ion-color-tint);
|
|
||||||
&.chip-outline {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: var(--ion-color-base);
|
|
||||||
color: var(--ion-color-base);
|
|
||||||
}
|
|
||||||
&.fab-chip {
|
|
||||||
background: var(--ion-color);
|
|
||||||
color: var(--ion-color-contrast);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.ion-color-light,
|
|
||||||
&.ion-color-medium,
|
|
||||||
&.ion-color-dark,
|
|
||||||
&.ion-color-secondary {
|
|
||||||
color: var(--gray-900);
|
|
||||||
&.chip-outline {
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.ion-color) ion-icon {
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-searchbar {
|
|
||||||
height: var(--height) !important;
|
|
||||||
--border-radius: var(--radius-xs);
|
|
||||||
|
|
||||||
.searchbar-input-container {
|
|
||||||
color: var(--color) !important;
|
|
||||||
height: var(--height) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.searchbar-input {
|
|
||||||
--border-radius: var(--radius-xs);
|
|
||||||
|
|
||||||
height: var(--height) !important;
|
|
||||||
border: 1px solid var(--border-color) !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
border-radius: var(--border-radius) !important;
|
|
||||||
background: var(--background) !important;
|
|
||||||
@include padding-horizontal(var(--height) !important);
|
|
||||||
}
|
|
||||||
|
|
||||||
.searchbar-search-icon {
|
|
||||||
@include position(null, null, null, calc(var(--height) / 4) !important);
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
@include position(null, 0 !important, null, null);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// File uploader.
|
// File uploader.
|
||||||
|
|
@ -1334,7 +952,7 @@ mark, .matchtext {
|
||||||
|
|
||||||
// Monospaced font.
|
// Monospaced font.
|
||||||
.core-monospaced {
|
.core-monospaced {
|
||||||
font-family: Andale Mono,Monaco,Courier New,DejaVu Sans Mono,monospace;
|
font-family: var(--mdl-typography-monospace-font);
|
||||||
}
|
}
|
||||||
|
|
||||||
.core-iframe-offline-disabled {
|
.core-iframe-offline-disabled {
|
||||||
|
|
@ -1370,17 +988,13 @@ details summary {
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
min-height: var(--a11y-min-target-size);
|
min-height: var(--a11y-sizing-minTargetSize);
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea:not([core-auto-rows]) {
|
textarea:not([core-auto-rows]) {
|
||||||
height: 200px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-back-button.md::part(text) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hide close button because when present is read on voice over.
|
// Hide close button because when present is read on voice over.
|
||||||
ion-fab[core-fab] {
|
ion-fab[core-fab] {
|
||||||
ion-fab-button::part(close-icon) {
|
ion-fab-button::part(close-icon) {
|
||||||
|
|
@ -1424,120 +1038,6 @@ audio.core-media-adapt-width {
|
||||||
width: 100%;
|
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.
|
// Disabled items.
|
||||||
ion-item.item-disabled,
|
ion-item.item-disabled,
|
||||||
ion-button.button-disabled,
|
ion-button.button-disabled,
|
||||||
|
|
@ -1546,11 +1046,6 @@ ion-datetime.datetime-disabled {
|
||||||
opacity: .65 !important;
|
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.
|
// Make links clickable when inside radio or checkbox items. Style part.
|
||||||
@media (hover: hover) {
|
@media (hover: hover) {
|
||||||
ion-item.item-multiple-inputs:not(.item-rte):hover::part(native) {
|
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.
|
// Case with ion-input + ion-select inside.
|
||||||
ion-item.item-input.item-multiple-inputs {
|
ion-item.item-input.item-multiple-inputs {
|
||||||
.flex-row {
|
.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-divider.item,
|
||||||
ion-item.item,
|
ion-item.item,
|
||||||
td {
|
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.
|
// To make core-swipe-slides fill the remaining height.
|
||||||
.core-swipe-slides-container {
|
.core-swipe-slides-container {
|
||||||
display: flex;
|
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
|
* This is to solve popver issue in chrome 114
|
||||||
|
|
|
||||||
|
|
@ -47,8 +47,8 @@ html.dark {
|
||||||
|
|
||||||
--loader-shine: 90 90 90;
|
--loader-shine: 90 90 90;
|
||||||
|
|
||||||
--drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 1);
|
--drop-shadow-top: 0px 2px 5px rgb(var(--mdl-shadow-boxShadowColor) / 1);
|
||||||
--drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 1);
|
--drop-shadow-bottom: 0px -2px 5px rgb(var(--mdl-shadow-boxShadowColor) / 1);
|
||||||
|
|
||||||
--ion-card-color: var(--text-color);
|
--ion-card-color: var(--text-color);
|
||||||
--ion-card-background: var(--ion-item-background);
|
--ion-card-background: var(--ion-item-background);
|
||||||
|
|
|
||||||
|
|
@ -1,146 +1,250 @@
|
||||||
|
@import "./globals.scss";
|
||||||
|
@import "theme.light.scss";
|
||||||
|
@import "theme.dark.scss";
|
||||||
|
|
||||||
html {
|
html {
|
||||||
|
|
||||||
// Spacing
|
// Variables in the design system should be named using the following pattern:
|
||||||
|
// SYSTEM-CATEGORY-CONCEPT-PROPERTY-VARIANT (where the only required part is SYSTEM)
|
||||||
|
// SYSTEM: The name of the design system (e.g. ion, mdl, app, etc.)
|
||||||
|
// CATEGORY: The category of the component (e.g. color, typography, spacing, etc.)
|
||||||
|
// CONCEPT: The concept of the category (e.g. component name)
|
||||||
|
// PROPERTY: The property of the concept in camel case (e.g. color, fontSize, spacing, etc.)
|
||||||
|
// VARIANT: The variant of the property (e.g. primary, size[sm, md, lg], dark/light, state etc.)
|
||||||
|
//
|
||||||
|
// Some guide: https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676
|
||||||
|
|
||||||
|
// ***** SPACING category ***** //
|
||||||
@for $i from 0 to 6 {
|
@for $i from 0 to 6 {
|
||||||
--spacing-#{$i}: #{$i*4}px;
|
--mdl-spacing-#{$i}: #{$i*4}px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Typography
|
// ***** TYPOGRAPHY category ***** //
|
||||||
--font-size-sm: 12px;
|
// Sintaxis:[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
|
||||||
--font-size-md: 14px;
|
--mdl-typography-fontSize-sm: #{dynamic-font(12px)}; // 0.75rem
|
||||||
--font-size-lg: 16px;
|
--mdl-typography-fontSize-md: #{dynamic-font(14px)}; // 0.875rem
|
||||||
|
--mdl-typography-fontSize-lg: #{dynamic-font(16px)}; // 1rem
|
||||||
|
|
||||||
--font-weight-normal: 400;
|
--mdl-typography-fontWeight-normal: 400;
|
||||||
--font-weight-medium: 500;
|
--mdl-typography-fontWeight-medium: 500;
|
||||||
|
|
||||||
// Typography - Body
|
--mdl-typography-monospace-font: Andale Mono,Monaco,Courier New,DejaVu Sans Mono,monospace;
|
||||||
--body-font-size-sm: var(--font-size-sm);
|
|
||||||
--body-font-size-md: var(--font-size-md);
|
|
||||||
--body-font-size-lg: var(--font-size-lg);
|
|
||||||
--body-font-weight: var(--font-weight-normal);
|
|
||||||
--body-line-height: 150%;
|
|
||||||
|
|
||||||
--body-sm-font: normal normal var(--body-font-weight) var(--body-font-size-sm)/var(--body-line-height) var(--ion-font-family);
|
// Body font size
|
||||||
--body-md-font: normal normal var(--body-font-weight) var(--body-font-size-md)/var(--body-line-height) var(--ion-font-family);
|
--mdl-typography-body-fontSize-sm: var(--mdl-typography-fontSize-sm);
|
||||||
--body-lg-font: normal normal var(--body-font-weight) var(--body-font-size-lg)/var(--body-line-height) var(--ion-font-family);
|
--mdl-typography-body-fontSize-md: var(--mdl-typography-fontSize-md);
|
||||||
|
--mdl-typography-body-fontSize-lg: var(--mdl-typography-fontSize-lg);
|
||||||
|
|
||||||
// Typography - Links
|
--mdl-typography-body-fontWeight: var(--mdl-typography-fontWeight-normal);
|
||||||
--link-sm-font-size: var(--font-size-sm);
|
--mdl-typography-body-lineHeight: 150%;
|
||||||
--link-md-font-size: var(--font-size-md);
|
--mdl-typography-body-letterSpacing: 0.5px;
|
||||||
--link-lg-font-size: var(--font-size-lg);
|
--mdl-typography-body-paragraphSpacing: 150%;
|
||||||
--link-font-weight: var(--font-weight-normal);
|
|
||||||
--link-line-height: 150%;
|
|
||||||
|
|
||||||
--link-sm-font: normal normal var(--link-font-weight) var(--link-sm-font-size)/var(--link-line-height) var(--ion-font-family);
|
--mdl-typography-body-font-sm: normal normal var(--mdl-typography-body-fontWeight) var(--mdl-typography-body-fontSize-sm)/var(--mdl-typography-body-lineHeight) var(--ion-font-family);
|
||||||
--link-md-font: normal normal var(--link-font-weight) var(--link-md-font-size)/var(--link-line-height) var(--ion-font-family);
|
--mdl-typography-body-font-md: normal normal var(--mdl-typography-body-fontWeight) var(--mdl-typography-body-fontSize-md)/var(--mdl-typography-body-lineHeight) var(--ion-font-family);
|
||||||
--link-lg-font: normal normal var(--link-font-weight) var(--link-lg-font-size)/var(--link-line-height) var(--ion-font-family);
|
--mdl-typography-body-font-lg: normal normal var(--mdl-typography-body-fontWeight) var(--mdl-typography-body-fontSize-lg)/var(--mdl-typography-body-lineHeight) var(--ion-font-family);
|
||||||
|
|
||||||
// Typography - Labels
|
// Links
|
||||||
--label-sm-font-size: 10px;
|
--mdl-typography-link-fontSize-sm: var(--mdl-typography-fontSize-sm);
|
||||||
--label-md-font-size: 12px;
|
--mdl-typography-link-fontSize-md: var(--mdl-typography-fontSize-md);
|
||||||
--label-lg-font-size: 14px;
|
--mdl-typography-link-fontSize-lg: var(--mdl-typography-fontSize-lg);
|
||||||
--label-font-weight: var(--font-weight-medium);
|
|
||||||
|
|
||||||
--label-sm-line-height: 16px;
|
--mdl-typography-link-fontWeight: var(--mdl-typography-fontWeight-normal);
|
||||||
--label-md-line-height: 16px;
|
--mdl-typography-link-lineHeight: 150%;
|
||||||
--label-lg-line-height: 20px;
|
--mdl-typography-link-letterSpacing: 0.5px;
|
||||||
|
--mdl-typography-link-paragraphSpacing: 150%;
|
||||||
|
|
||||||
--label-sm-font: normal normal var(--label-font-weight) var(--label-sm-font-size)/var(--label-sm-line-height) var(--ion-font-family);
|
--mdl-typography-link-font-sm: normal normal var(--mdl-typography-link-fontWeight) var(--mdl-typography-link-fontSize-sm)/var(--mdl-typography-link-lineHeight) var(--ion-font-family);
|
||||||
--label-md-font: normal normal var(--label-font-weight) var(--label-md-font-size)/var(--label-md-line-height) var(--ion-font-family);
|
--mdl-typography-link-font-md: normal normal var(--mdl-typography-link-fontWeight) var(--mdl-typography-link-fontSize-md)/var(--mdl-typography-link-lineHeight) var(--ion-font-family);
|
||||||
--label-lg-font: normal normal var(--label-font-weight) var(--label-lg-font-size)/var(--label-lg-line-height) var(--ion-font-family);
|
--mdl-typography-link-font-lg: normal normal var(--mdl-typography-link-fontWeight) var(--mdl-typography-link-fontSize-lg)/var(--mdl-typography-link-lineHeight) var(--ion-font-family);
|
||||||
|
|
||||||
// Typography - Subtitles
|
// Labels
|
||||||
--subtitle-sm-font-size: 14px;
|
--mdl-typography-label-fontSize-sm: #{dynamic-font(10px)}; // 0.625rem
|
||||||
--subtitle-md-font-size: 16px;
|
--mdl-typography-label-fontSize-md: #{dynamic-font(12px)};
|
||||||
--subtitle-lg-font-size: 20px;
|
--mdl-typography-label-fontSize-lg: #{dynamic-font(14px)};
|
||||||
|
|
||||||
--subtitle-font-weight: var(--font-weight-medium);
|
--mdl-typography-label-fontWeight: var(--mdl-typography-fontWeight-medium);
|
||||||
--subtitle-line-height: 150%;
|
|
||||||
|
|
||||||
--subtitle-sm-font: normal normal var(--subtitle-font-weight) var(--subtitle-sm-font-size)/var(--subtitle-line-height) var(--ion-font-family);
|
--mdl-typography-label-lineHeight-sm: #{dynamic-font(16px)};
|
||||||
--subtitle-md-font: normal normal var(--subtitle-font-weight) var(--subtitle-md-font-size)/var(--subtitle-line-height) var(--ion-font-family);
|
--mdl-typography-label-lineHeight-md: #{dynamic-font(16px)};
|
||||||
--subtitle-lg-font: normal normal var(--subtitle-font-weight) var(--subtitle-lg-font-size)/var(--subtitle-line-height) var(--ion-font-family);
|
--mdl-typography-label-lineHeight-lg: #{dynamic-font(20px)};
|
||||||
|
|
||||||
// Typography - Headings
|
--mdl-typography-label-letterSpacing: 0.1px;
|
||||||
--heading-1-font-size: 28px;
|
|
||||||
--heading-2-font-size: 24px;
|
|
||||||
--heading-3-font-size: 22px;
|
|
||||||
--heading-4-font-size: 20px;
|
|
||||||
--heading-5-font-size: 18px;
|
|
||||||
--heading-6-font-size: 16px;
|
|
||||||
|
|
||||||
--heading-1-font-weight: var(--font-weight-normal);
|
--mdl-typography-label-font-sm: normal normal var(--mdl-typography-label-fontWeight) var(--mdl-typography-label-fontSize-sm)/var(--mdl-typography-label-lineHeight-sm) var(--ion-font-family);
|
||||||
--heading-2-font-weight: var(--font-weight-normal);
|
--mdl-typography-label-font-md: normal normal var(--mdl-typography-label-fontWeight) var(--mdl-typography-label-fontSize-md)/var(--mdl-typography-label-lineHeight-md) var(--ion-font-family);
|
||||||
--heading-3-font-weight: var(--font-weight-normal);
|
--mdl-typography-label-font-lg: normal normal var(--mdl-typography-label-fontWeight) var(--mdl-typography-label-fontSize-lg)/var(--mdl-typography-label-lineHeight-lg) var(--ion-font-family);
|
||||||
--heading-4-font-weight: var(--font-weight-medium);
|
|
||||||
--heading-5-font-weight: var(--font-weight-medium);
|
|
||||||
--heading-6-font-weight: var(--font-weight-medium);
|
|
||||||
|
|
||||||
--heading-line-height: 130%;
|
// Subtitles
|
||||||
|
--mdl-typography-subtitle-fontSize-sm: #{dynamic-font(14px)};
|
||||||
|
--mdl-typography-subtitle-fontSize-md: #{dynamic-font(16px)};
|
||||||
|
--mdl-typography-subtitle-fontSize-lg: #{dynamic-font(20px)};
|
||||||
|
|
||||||
--heading-1-font: normal normal var(--heading-1-font-weight) var(--heading-1-font-size)/var(--heading-line-height) var(--ion-font-family);
|
--mdl-typography-subtitle-fontWeight: var(--mdl-typography-fontWeight-medium);
|
||||||
--heading-2-font: normal normal var(--heading-2-font-weight) var(--heading-2-font-size)/var(--heading-line-height) var(--ion-font-family);
|
--mdl-typography-subtitle-lineHeight: 150%;
|
||||||
--heading-3-font: normal normal var(--heading-3-font-weight) var(--heading-3-font-size)/var(--heading-line-height) var(--ion-font-family);
|
--mdl-typography-subtitle-letterSpacing: 0.1px;
|
||||||
--heading-4-font: normal normal var(--heading-4-font-weight) var(--heading-4-font-size)/var(--heading-line-height) var(--ion-font-family);
|
|
||||||
--heading-5-font: normal normal var(--heading-5-font-weight) var(--heading-5-font-size)/var(--heading-line-height) var(--ion-font-family);
|
|
||||||
--heading-6-font: normal normal var(--heading-6-font-weight) var(--heading-6-font-size)/var(--heading-line-height) var(--ion-font-family);
|
|
||||||
|
|
||||||
// Radiuses
|
--mdl-typography-subtitle-font-sm: normal normal var(--mdl-typography-subtitle-fontWeight) var(--mdl-typography-subtitle-fontSize-sm)/var(--mdl-typography-subtitle-lineHeight) var(--ion-font-family);
|
||||||
--radius-none: 0px;
|
--mdl-typography-subtitle-font-md: normal normal var(--mdl-typography-subtitle-fontWeight) var(--mdl-typography-subtitle-fontSize-md)/var(--mdl-typography-subtitle-lineHeight) var(--ion-font-family);
|
||||||
--radius-xs: 4px;
|
--mdl-typography-subtitle-font-lg: normal normal var(--mdl-typography-subtitle-fontWeight) var(--mdl-typography-subtitle-fontSize-lg)/var(--mdl-typography-subtitle-lineHeight) var(--ion-font-family);
|
||||||
--radius-sm: 8px;
|
|
||||||
--radius-md: 12px;
|
|
||||||
--radius-lg: 16px;
|
|
||||||
--radius-xl: 24px;
|
|
||||||
--radius-round: 50%;
|
|
||||||
|
|
||||||
// Shadows / Elevation
|
// Headings
|
||||||
--drop-shadow-color: 40 40 40; //#282828;
|
--mdl-typography-heading1-fontSize: #{dynamic-font(28px)}; // 1.75rem
|
||||||
--drop-shadow-00: 0px 0px 0px 0px rgb(var(--drop-shadow-color) / 20%);
|
--mdl-typography-heading2-fontSize: #{dynamic-font(24px)}; // 1.5rem
|
||||||
--drop-shadow-outline: 0px 0px 0px 2px rgb(var(--drop-shadow-color) / 15%), 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 2%);
|
--mdl-typography-heading3-fontSize: #{dynamic-font(22px)}; // 1.375rem
|
||||||
--drop-shadow-01dp: 0px 1px 3px 0px rgb(var(--drop-shadow-color) / 20%), 0px 2px 1px 0px rgb(var(--drop-shadow-color) / 12%), 0px 1px 1px 0px rgb(var(--drop-shadow-color) / 14%);
|
--mdl-typography-heading4-fontSize: #{dynamic-font(20px)}; // 1.25rem
|
||||||
--drop-shadow-02dp: 0px 1px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 1px 0px rgb(var(--drop-shadow-color) / 12%), 0px 2px 2px 0px rgb(var(--drop-shadow-color) / 14%);
|
--mdl-typography-heading5-fontSize: #{dynamic-font(18px)}; // 1.125rem
|
||||||
--drop-shadow-03dp: 0px 1px 8px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 3px 0px rgb(var(--drop-shadow-color) / 12%), 0px 3px 4px 0px rgb(var(--drop-shadow-color) / 14%);
|
--mdl-typography-heading6-fontSize: #{dynamic-font(16px)}; // 1rem
|
||||||
--drop-shadow-04dp: 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 20%), 0px 1px 10px 0px rgb(var(--drop-shadow-color) / 12%), 0px 4px 5px 0px rgb(var(--drop-shadow-color) / 14%);
|
|
||||||
--drop-shadow-06dp: 0px 3px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 1px 18px 0px rgb(var(--drop-shadow-color) / 12%), 0px 6px 10px 0px rgb(var(--drop-shadow-color) / 14%);
|
|
||||||
--drop-shadow-08dp: 0px 5px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 14px 0px rgb(var(--drop-shadow-color) / 12%), 0px 8px 10px 0px rgb(var(--drop-shadow-color) / 14%);
|
|
||||||
--drop-shadow-12dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 20%),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 12%),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 14%);
|
|
||||||
--drop-shadow-16dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 20%),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 12%),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 14%);
|
|
||||||
--drop-shadow-24dp: 0px 11px 15px 0px rgb(var(--drop-shadow-color) / 20%), 0px 9px 46px 0px rgb(var(--drop-shadow-color) / 12%), 0px 24px 38px 0px rgb(var(--drop-shadow-color) / 14%);
|
|
||||||
|
|
||||||
// A11y
|
--mdl-typography-heading1-fontWeight: var(--mdl-typography-fontWeight-normal);
|
||||||
--a11y-min-target-size: 44px;
|
--mdl-typography-heading2-fontWeight: var(--mdl-typography-fontWeight-normal);
|
||||||
|
--mdl-typography-heading3-fontWeight: var(--mdl-typography-fontWeight-normal);
|
||||||
|
--mdl-typography-heading4-fontWeight: var(--mdl-typography-fontWeight-medium);
|
||||||
|
--mdl-typography-heading5-fontWeight: var(--mdl-typography-fontWeight-medium);
|
||||||
|
--mdl-typography-heading6-fontWeight: var(--mdl-typography-fontWeight-medium);
|
||||||
|
|
||||||
// Colors
|
--mdl-typography-heading-lineHeight: 130%;
|
||||||
--blue: #0f6cbf;
|
|
||||||
|
|
||||||
--text-color-main: var(--gray-900);
|
--mdl-typography-heading1-font: normal normal var(--mdl-typography-heading1-fontWeight) var(--mdl-typography-heading1-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family);
|
||||||
--text-color-secondary: var(--gray-800);
|
--mdl-typography-heading2-font: normal normal var(--mdl-typography-heading2-fontWeight) var(--mdl-typography-heading2-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family);
|
||||||
|
--mdl-typography-heading3-font: normal normal var(--mdl-typography-heading3-fontWeight) var(--mdl-typography-heading3-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family);
|
||||||
|
--mdl-typography-heading4-font: normal normal var(--mdl-typography-heading4-fontWeight) var(--mdl-typography-heading4-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family);
|
||||||
|
--mdl-typography-heading5-font: normal normal var(--mdl-typography-heading5-fontWeight) var(--mdl-typography-heading5-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family);
|
||||||
|
--mdl-typography-heading6-font: normal normal var(--mdl-typography-heading6-fontWeight) var(--mdl-typography-heading6-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family);
|
||||||
|
|
||||||
--state-color-hover: rgb(40 40 40, 4%); // --gray-900 4%
|
// Icons
|
||||||
--state-color-pressed: rgb(40 40 40, 12%); // --gray-900 12%
|
--mdl-typography-icon-fontSize-sm: #{dynamic-font(16px)};
|
||||||
--state-color-focused: rgb(40 40 40, 12%); // --gray-900 12%
|
--mdl-typography-icon-fontSize-md: #{dynamic-font(20px)};
|
||||||
--state-color-keyboard-focus: var(--blue);
|
--mdl-typography-icon-fontSize-lg: #{dynamic-font(24px)};
|
||||||
|
|
||||||
}
|
// ***** SHAPE category ***** //
|
||||||
|
--mdl-shape-borderRadius-none: 0px;
|
||||||
|
--mdl-shape-borderRadius-xs: 4px;
|
||||||
|
--mdl-shape-borderRadius-sm: 8px;
|
||||||
|
--mdl-shape-borderRadius-md: 12px;
|
||||||
|
--mdl-shape-borderRadius-lg: 16px;
|
||||||
|
--mdl-shape-borderRadius-xl: 24px;
|
||||||
|
--mdl-shape-borderRadius-round: 50%;
|
||||||
|
|
||||||
html.dark {
|
// ***** SHADOW category ***** //
|
||||||
|
--mdl-shadow-boxShadowColor: 40 40 40; //#282828;
|
||||||
|
--mdl-shadow-boxShadow-00: 0px 0px 0px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%);
|
||||||
|
--mdl-shadow-boxShadow-outline: 0px 0px 0px 2px rgb(var(--mdl-shadow-boxShadowColor) / 15%), 0px 2px 4px 0px rgb(var(--mdl-shadow-boxShadowColor) / 2%);
|
||||||
|
--mdl-shadow-boxShadow-01: 0px 1px 3px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 2px 1px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 1px 1px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%);
|
||||||
|
--mdl-shadow-boxShadow-02: 0px 1px 5px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 3px 1px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 2px 2px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%);
|
||||||
|
--mdl-shadow-boxShadow-03: 0px 1px 8px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 3px 3px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 3px 4px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%);
|
||||||
|
--mdl-shadow-boxShadow-04: 0px 2px 4px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 1px 10px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 4px 5px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%);
|
||||||
|
--mdl-shadow-boxShadow-06: 0px 3px 5px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 1px 18px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 6px 10px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%);
|
||||||
|
--mdl-shadow-boxShadow-08: 0px 5px 5px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 3px 14px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 8px 10px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%);
|
||||||
|
--mdl-shadow-boxShadow-12: 0px 7px 8px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%),0px 5px 22px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%),0px 12px 17px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%);
|
||||||
|
--mdl-shadow-boxShadow-16: 0px 7px 8px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%),0px 5px 22px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%),0px 12px 17px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%);
|
||||||
|
--mdl-shadow-boxShadow-24: 0px 11px 15px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 9px 46px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 24px 38px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%);
|
||||||
|
|
||||||
// Colors
|
// ***** ACCESSIBILITY ***** //
|
||||||
--text-color-main: var(--gray-200);
|
--a11y-sizing-minTargetSize: 44px;
|
||||||
--text-color-secondary: var(--gray-300);
|
--a11y-shadow-focus-borderWidth: 2px;
|
||||||
|
--a11y-shadow-focus-boxShadow: inset 0 0 var(--a11y-shadow-focus-borderWidth) 1px var(--a11y-focus-color);
|
||||||
|
--a11y-shadow-focus-outline: var(--a11y-shadow-focus-borderWidth) solid var(--a11y-focus-color);
|
||||||
|
|
||||||
|
// @TODO ***** VARIABLES TO BE REVIEWED, RENAMED AND TIDIED ***** //
|
||||||
|
--text-size: var(--mdl-typography-body-fontSize-md);
|
||||||
|
|
||||||
|
--core-input-radius: var(--mdl-shape-borderRadius-xs);
|
||||||
|
--core-input-border-width: 1px;
|
||||||
|
|
||||||
|
--list-item-max-width: 768px;
|
||||||
|
|
||||||
|
--modal-radius: var(--mdl-shape-borderRadius-md);
|
||||||
|
--modal-lateral-max-width: 320px;
|
||||||
|
--modal-lateral-margin: 56px;
|
||||||
|
|
||||||
|
--loader-radius: var(--mdl-shape-borderRadius-xs);
|
||||||
|
--loader-display: block;
|
||||||
|
|
||||||
|
--drop-shadow-top: 0px 2px 5px rgb(var(--mdl-shadow-boxShadowColor) / 50%);
|
||||||
|
--drop-shadow-bottom: 0px -2px 5px rgb(var(--mdl-shadow-boxShadowColor) / 50%);
|
||||||
|
--drop-shadow-end: -2px 0px 5px rgb(var(--mdl-shadow-boxShadowColor) / 50%);
|
||||||
|
--drop-shadow-start: 2px 0px 5px rgb(var(--mdl-shadow-boxShadowColor) / 50%);
|
||||||
|
|
||||||
|
--ion-card-vertical-margin: 12px;
|
||||||
|
--ion-card-horizontal-margin: 12px;
|
||||||
|
--ion-card-radius: var(--mdl-shape-borderRadius-lg);
|
||||||
|
--ion-card-border-width: 1px;
|
||||||
|
|
||||||
|
--bottom-tabs-size: 48px;
|
||||||
|
--side-tabs-size: 56px;
|
||||||
|
|
||||||
|
--core-header-toolbar-button-image-size: var(--a11y-sizing-minTargetSize);
|
||||||
|
--core-header-toolbar-border-width: 0px;
|
||||||
|
--core-header-toolbar-height: 48px;
|
||||||
|
--core-header-shadow: none;
|
||||||
|
|
||||||
|
--ion-searchbar-height: var(--a11y-sizing-minTargetSize);
|
||||||
|
--ion-searchbar-border-radius: var(--core-input-radius);
|
||||||
|
|
||||||
|
--core-search-box-border-radius: var(--core-input-radius);
|
||||||
|
|
||||||
|
--core-combobox-radius: var(--core-input-radius);
|
||||||
|
--core-combobox-border-width: var(--core-input-border-width);
|
||||||
|
--core-combobox-box-shadow: none;
|
||||||
|
|
||||||
|
--core-tab-font-weight-active: normal;
|
||||||
|
--core-tabs-height: 48px;
|
||||||
|
|
||||||
|
--core-progressbar-height: 8px;
|
||||||
|
|
||||||
|
--ion-item-detail-icon-font-size: var(--mdl-typography-icon-fontSize-md);
|
||||||
|
--ion-item-detail-icon-opacity: 1;
|
||||||
|
|
||||||
|
--item-divider-min-height: calc(var(--a11y-sizing-minTargetSize) + 8px);
|
||||||
|
--item-divider-border-width: 0px;
|
||||||
|
--item-divider-font-size: 16px;
|
||||||
|
--item-divider-font-size-big: 20px;
|
||||||
|
|
||||||
|
--spacer-vertical: 8px;
|
||||||
|
|
||||||
|
--selected-item-border-width: 5px;
|
||||||
|
|
||||||
|
--core-large-avatar-size: 80px;
|
||||||
|
--core-avatar-size: var(--a11y-sizing-minTargetSize);
|
||||||
|
--core-avatar-radius: 50%;
|
||||||
|
|
||||||
|
--core-courseimage-on-course-size: 72px;
|
||||||
|
--core-courseimage-radius: var(--mdl-shape-borderRadius-sm);
|
||||||
|
|
||||||
|
--core-user-menu-site-logo-max-height: 32px;
|
||||||
|
|
||||||
|
--core-messages-message-note-font-size: 75%;
|
||||||
|
--core-messages-avatar-size: 30px;
|
||||||
|
|
||||||
|
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-500);
|
||||||
|
--core-dd-question-radius: 10px;
|
||||||
|
|
||||||
|
--rotate-expandable: rotate(90deg);
|
||||||
|
|
||||||
|
--core-mainpage-sitename-display: none;
|
||||||
|
--core-mainpage-headerlogo-display: none;
|
||||||
|
--core-mainpage-headerlogo-maxheight: calc(var(--core-header-toolbar-height) - 16px);
|
||||||
|
|
||||||
|
@if ($core-dashboard-logo) {
|
||||||
|
--core-mainpage-headerlogo-display: inline;
|
||||||
|
} @else {
|
||||||
|
--core-mainpage-sitename-display: inline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @deprecated since 4.3 **/
|
/** @deprecated since 4.3 **/
|
||||||
html {
|
html {
|
||||||
--small-radius: var(--radius-xs);
|
--small-radius: var(--mdl-shape-borderRadius-xs);
|
||||||
--medium-radius: var(--radius-sm);
|
--medium-radius: var(--mdl-shape-borderRadius-sm);
|
||||||
--big-radius: var(--radius-lg);
|
--big-radius: var(--mdl-shape-borderRadius-lg);
|
||||||
--huge-radius: var(--radius-xl);
|
--huge-radius: var(--mdl-shape-borderRadius-xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @deprecated since 4.4 **/
|
/** @deprecated since 4.4 **/
|
||||||
html {
|
html {
|
||||||
--font-size-normal: var(--font-size-md);
|
--font-size-normal: var(--mdl-typography-fontSize-md);
|
||||||
|
--a11y-min-target-size: var(--a11y-sizing-minTargetSize);
|
||||||
|
--a11y-focus-width: var(--a11y-shadow-focus-boxShadowSpread);
|
||||||
|
--a11y-focus-color: var(--a11y-shadow-focus-boxShadowColor);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -48,12 +48,9 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Accessibility vars.
|
// Accessibility vars.
|
||||||
--a11y-focus-color: var(--primary);
|
--a11y-shadow-focus-boxShadowColor: var(--primary);
|
||||||
--a11y-focus-width: 2px;
|
|
||||||
--zoom-level: 100%;
|
|
||||||
|
|
||||||
--text-color: #{$text-color};
|
--text-color: #{$text-color};
|
||||||
--text-size: var(--body-font-size-md);
|
|
||||||
--background-color: #{$background-color};
|
--background-color: #{$background-color};
|
||||||
--stroke: var(--gray-300);
|
--stroke: var(--gray-300);
|
||||||
|
|
||||||
|
|
@ -67,175 +64,50 @@ html {
|
||||||
--core-input-stroke: var(--gray-500);
|
--core-input-stroke: var(--gray-500);
|
||||||
--core-input-text: var(--dark);
|
--core-input-text: var(--dark);
|
||||||
--core-input-background: var(--ion-background-color);
|
--core-input-background: var(--ion-background-color);
|
||||||
--core-input-radius: var(--radius-xs);
|
|
||||||
--core-input-border-width: 1px;
|
|
||||||
|
|
||||||
--list-item-max-width: 768px;
|
|
||||||
|
|
||||||
--modal-radius: var(--radius-md);
|
|
||||||
--modal-lateral-max-width: 320px;
|
|
||||||
--modal-lateral-margin: 56px;
|
|
||||||
|
|
||||||
--contrast-background: white;
|
--contrast-background: white;
|
||||||
|
|
||||||
--loader-background-color: rgb(0 0 0 / 10%);
|
--loader-background-color: rgb(0 0 0 / 10%);
|
||||||
--loader-shine: 251 251 251;
|
--loader-shine: 251 251 251;
|
||||||
--loader-radius: var(--radius-xs);
|
|
||||||
--loader-display: block;
|
|
||||||
|
|
||||||
--drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 50%);
|
|
||||||
--drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 50%);
|
|
||||||
--drop-shadow-end: -2px 0px 5px rgb(var(--drop-shadow-color) / 50%);
|
|
||||||
--drop-shadow-start: 2px 0px 5px rgb(var(--drop-shadow-color) / 50%);
|
|
||||||
|
|
||||||
--ion-text-color: var(--text-color);
|
--ion-text-color: var(--text-color);
|
||||||
--ion-text-color-rgb: #{$text-color-rgb};
|
--ion-text-color-rgb: #{$text-color-rgb};
|
||||||
--subdued-text-color: var(--medium);
|
--subdued-text-color: var(--medium);
|
||||||
|
|
||||||
--ion-card-color: var(--text-color);
|
--ion-card-color: var(--text-color);
|
||||||
--ion-card-vertical-margin: 12px;
|
|
||||||
--ion-card-horizontal-margin: 12px;
|
|
||||||
--ion-card-radius: var(--radius-lg);
|
|
||||||
--ion-card-border-width: 1px;
|
|
||||||
--ion-card-border-color: var(--stroke);
|
--ion-card-border-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};
|
--text-hightlight-background-color: #{$core-text-hightlight-background-color};
|
||||||
|
|
||||||
--ion-placeholder-color: var(--subdued-text-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-background: var(--white);
|
||||||
--core-bottom-tabs-color: var(--dark);
|
--core-bottom-tabs-color: var(--dark);
|
||||||
--core-bottom-tabs-color-selected: var(--primary);
|
--core-bottom-tabs-color-selected: var(--primary);
|
||||||
--core-bottom-tabs-background-selected: transparent;
|
--core-bottom-tabs-background-selected: transparent;
|
||||||
--core-bottom-tabs-badge-color: var(--primary);
|
--core-bottom-tabs-badge-color: var(--primary);
|
||||||
--core-bottom-tabs-badge-text-color: var(--primary-contrast);
|
--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);
|
--core-link-color: var(--info);
|
||||||
a {
|
|
||||||
color: var(--core-link-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
--core-header-toolbar-button-image-size: var(--a11y-min-target-size);
|
|
||||||
--core-header-toolbar-background: var(--white);
|
--core-header-toolbar-background: var(--white);
|
||||||
--core-header-toolbar-border-width: 0px;
|
|
||||||
--core-header-toolbar-border-color: var(--stroke);
|
--core-header-toolbar-border-color: var(--stroke);
|
||||||
--core-header-toolbar-color: var(--text-color);
|
--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-background: var(--core-header-toolbar-background);
|
||||||
--core-header-buttons-color: var(--core-header-toolbar-color);
|
--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-background: var(--ion-background-color);
|
||||||
--ion-searchbar-border-color: var(--core-input-stroke);
|
--ion-searchbar-border-color: var(--core-input-stroke);
|
||||||
--ion-searchbar-border-radius: var(--core-input-radius);
|
|
||||||
--ion-searchbar-height: var(--a11y-min-target-size);
|
|
||||||
--ion-searchbar-color: var(--text-color);
|
--ion-searchbar-color: var(--text-color);
|
||||||
--ion-searchbar-icon-color: var(--core-input-stroke);
|
--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-background: var(--ion-background-color);
|
||||||
--core-search-box-border-color: var(--core-input-stroke);
|
--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-search-box-color: var(--core-input-text);
|
||||||
|
|
||||||
--core-combobox-background: var(--core-input-background);
|
--core-combobox-background: var(--core-input-background);
|
||||||
--core-combobox-color: var(--core-input-text);
|
--core-combobox-color: var(--core-input-text);
|
||||||
--core-combobox-border-color: var(--core-input-stroke);
|
--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-tabs-background: var(--white);
|
||||||
--core-tab-background: var(--core-tabs-background);
|
--core-tab-background: var(--core-tabs-background);
|
||||||
|
|
@ -243,31 +115,9 @@ html {
|
||||||
--core-tab-border-color: var(--stroke);
|
--core-tab-border-color: var(--stroke);
|
||||||
--core-tab-color-active: var(--dark);
|
--core-tab-color-active: var(--dark);
|
||||||
--core-tab-border-color-active: var(--primary);
|
--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);
|
--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-color: var(--primary);
|
||||||
--core-progressbar-text-color: var(--medium);
|
--core-progressbar-text-color: var(--medium);
|
||||||
--core-progressbar-background: var(--primary-tint);
|
--core-progressbar-background: var(--primary-tint);
|
||||||
|
|
@ -277,45 +127,14 @@ html {
|
||||||
--ion-item-background: #{$ion-item-background};
|
--ion-item-background: #{$ion-item-background};
|
||||||
--ion-item-icon-color: var(--medium);
|
--ion-item-icon-color: var(--medium);
|
||||||
--ion-item-detail-icon-color: var(--dark);
|
--ion-item-detail-icon-color: var(--dark);
|
||||||
--ion-item-detail-icon-font-size: 20px;
|
|
||||||
--ion-item-detail-icon-opacity: 1;
|
|
||||||
--core-more-icon: var(--ion-item-icon-color);
|
--core-more-icon: var(--ion-item-icon-color);
|
||||||
ion-item {
|
|
||||||
--detail-icon-color: var(--ion-item-detail-icon-color);
|
|
||||||
--detail-icon-font-size: var(--ion-item-detail-icon-font-size);
|
|
||||||
--detail-icon-opacity: var(--ion-item-detail-icon-opacity);
|
|
||||||
|
|
||||||
> ion-icon[slot] {
|
|
||||||
color: var(--ion-item-icon-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
--item-divider-min-height: calc(var(--a11y-min-target-size) + 8px);
|
|
||||||
--item-divider-background: var(--ion-item-background);
|
--item-divider-background: var(--ion-item-background);
|
||||||
--item-divider-color: var(--text-color);
|
--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);
|
--spacer-color: var(--gray-300);
|
||||||
|
|
||||||
ion-note {
|
|
||||||
--color: var(--subdued-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-back-button {
|
|
||||||
--min-height: var(--a11y-min-target-size);
|
|
||||||
--min-width: var(--a11y-min-target-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
--selected-item-color: var(--primary);
|
--selected-item-color: var(--primary);
|
||||||
--selected-item-border-width: 5px;
|
|
||||||
|
|
||||||
--collapsible-toggle-background: transparent;
|
--collapsible-toggle-background: transparent;
|
||||||
--collapsible-toggle-text: var(--medium);
|
--collapsible-toggle-text: var(--medium);
|
||||||
|
|
@ -329,29 +148,18 @@ html {
|
||||||
|
|
||||||
--core-star-color: var(--primary);
|
--core-star-color: var(--primary);
|
||||||
|
|
||||||
--core-large-avatar-size: 80px;
|
|
||||||
--core-avatar-size: var(--a11y-min-target-size);
|
|
||||||
--core-avatar-radius: 50%;
|
|
||||||
|
|
||||||
--core-courseimage-on-course-size: 72px;
|
|
||||||
--core-courseimage-radius: var(--radius-sm);
|
|
||||||
|
|
||||||
--core-navigation-background: var(--contrast-background);
|
--core-navigation-background: var(--contrast-background);
|
||||||
|
|
||||||
--core-collapsible-footer-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-today-border-color: var(--primary);
|
||||||
--addon-calendar-border-color: var(--stroke);
|
--addon-calendar-border-color: var(--stroke);
|
||||||
|
|
||||||
--core-messages-message-bg: var(--white);
|
--core-messages-message-bg: var(--white);
|
||||||
--core-messages-message-activated-bg: var(--gray-200);
|
--core-messages-message-activated-bg: var(--gray-200);
|
||||||
--core-messages-message-note-text: var(--gray-500);
|
--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-bg: var(--gray-300);
|
||||||
--core-messages-message-mine-activated-bg: var(--gray-400);
|
--core-messages-message-mine-activated-bg: var(--gray-400);
|
||||||
--core-messages-avatar-size: 30px;
|
|
||||||
--core-messages-discussion-badge: var(--primary);
|
--core-messages-discussion-badge: var(--primary);
|
||||||
--core-messages-discussion-badge-text: var(--white);
|
--core-messages-discussion-badge-text: var(--white);
|
||||||
|
|
||||||
|
|
@ -376,8 +184,7 @@ html {
|
||||||
--core-question-feedback-color: var(--warning-shade);
|
--core-question-feedback-color: var(--warning-shade);
|
||||||
--core-question-feedback-background-color: var(--warning-tint);
|
--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-dd-question-border: var(--medium);
|
||||||
|
|
||||||
--core-table-header-background: var(--white);
|
--core-table-header-background: var(--white);
|
||||||
|
|
@ -387,11 +194,6 @@ html {
|
||||||
--core-table-even-cell-hover: var(--light);
|
--core-table-even-cell-hover: var(--light);
|
||||||
--core-table-border-color: var(--stroke);
|
--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) {
|
@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}: #{nth($core-course-image-background, $i + 1)};
|
||||||
--core-course-color-#{$i}-tint: #{get-color-tint-percent(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};
|
--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);
|
--rte-editor-background: var(--core-input-background);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,10 +13,8 @@
|
||||||
@import "globals.scss";
|
@import "globals.scss";
|
||||||
|
|
||||||
/* Application styles */
|
/* Application styles */
|
||||||
@import "theme.light.scss";
|
|
||||||
@import "theme.dark.scss";
|
|
||||||
@import "theme.custom.scss";
|
|
||||||
@import "theme.design-system.scss";
|
@import "theme.design-system.scss";
|
||||||
|
@import "theme.custom.scss";
|
||||||
@import "theme.base.scss";
|
@import "theme.base.scss";
|
||||||
|
|
||||||
/* Components */
|
/* Components */
|
||||||
|
|
@ -24,11 +22,31 @@
|
||||||
@import "components/collapsible-item.scss";
|
@import "components/collapsible-item.scss";
|
||||||
@import "components/error-accordion.scss";
|
@import "components/error-accordion.scss";
|
||||||
@import "components/format-text.scss";
|
@import "components/format-text.scss";
|
||||||
@import "components/ion-icon.scss";
|
|
||||||
@import "components/mod-label.scss";
|
@import "components/mod-label.scss";
|
||||||
@import "components/rubrics.scss";
|
@import "components/rubrics.scss";
|
||||||
@import "components/videojs.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. */
|
/* Some styles from 3rd party libraries. */
|
||||||
@import "bootstrap.scss";
|
@import "bootstrap.scss";
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue