Dani Palou
GitHub
commit
84a7ed034d
@ -1,3 +1,5 @@
|
||||
@use "theme/globals" as *;
|
||||
|
||||
:host {
|
||||
ion-row.addon-block-myoverview-filter {
|
||||
margin: 8px;
|
||||
@ -39,4 +41,14 @@
|
||||
color: var(--subdued-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
ion-item-divider .core-button-spinner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include margin-horizontal(10px);
|
||||
|
||||
ion-badge.core-course-download-courses-progress {
|
||||
@include margin(null, 12px, null, null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -141,12 +141,12 @@
|
||||
</ion-item-divider>
|
||||
<ion-item>
|
||||
<ion-radio [value]="0">
|
||||
<p>{{ 'addon.calendar.durationnone' | translate }}</p>
|
||||
{{ 'addon.calendar.durationnone' | translate }}
|
||||
</ion-radio>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-radio [value]="1">
|
||||
<p><label for="timedurationuntil-button">{{ 'addon.calendar.durationuntil' | translate }}</label></p>
|
||||
<label for="timedurationuntil-button">{{ 'addon.calendar.durationuntil' | translate }}</label>
|
||||
</ion-radio>
|
||||
</ion-item>
|
||||
<ion-item *ngIf="form.controls.duration.value === 1">
|
||||
@ -163,7 +163,7 @@
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-radio [value]="2">
|
||||
<p><label for="timedurationminutes">{{ 'addon.calendar.durationminutes' | translate }}</label></p>
|
||||
<label for="timedurationminutes">{{ 'addon.calendar.durationminutes' | translate }}</label>
|
||||
</ion-radio>
|
||||
</ion-item>
|
||||
<ion-item *ngIf="form.controls.duration.value === 2">
|
||||
@ -194,14 +194,14 @@
|
||||
<p class="item-heading">{{ 'addon.calendar.repeatedevents' | translate }}</p>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item>
|
||||
<ion-radio value="1">
|
||||
<p>{{ 'addon.calendar.repeateditall' | translate:{$a: otherEventsCount} }}</p>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-radio [value]="1">
|
||||
{{ 'addon.calendar.repeateditall' | translate:{$a: otherEventsCount} }}
|
||||
</ion-radio>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-radio value="0">
|
||||
<p>{{ 'addon.calendar.repeateditthis' | translate }}</p>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-radio [value]="0">
|
||||
{{ 'addon.calendar.repeateditthis' | translate }}
|
||||
</ion-radio>
|
||||
</ion-item>
|
||||
</ion-radio-group>
|
||||
|
||||
@ -118,7 +118,7 @@ export class AddonCalendarEditEventPage implements OnInit, OnDestroy, CanLeave {
|
||||
this.form.addControl('duration', this.fb.control(0));
|
||||
this.form.addControl('timedurationminutes', this.fb.control(''));
|
||||
this.form.addControl('repeat', this.fb.control(false));
|
||||
this.form.addControl('repeats', this.fb.control('1'));
|
||||
this.form.addControl('repeats', this.fb.control({ value: '1', disabled: true }));
|
||||
this.form.addControl('repeateditall', this.fb.control(1));
|
||||
|
||||
this.maxDate = CoreTimeUtils.getDatetimeDefaultMax();
|
||||
|
||||
@ -49,7 +49,7 @@ $grid-column-paddings: (
|
||||
position: relative;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
width: 100% !important;
|
||||
max-width: 100%;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
@ -876,7 +876,7 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec
|
||||
if (iframe.contentDocument) {
|
||||
const css = document.createElement('style');
|
||||
css.setAttribute('type', 'text/css');
|
||||
css.innerHTML = 'iframe {width: 100%;height: 100%;}';
|
||||
css.innerHTML = 'iframe {width: 100%;height: 100%;position:absolute;top:0; left:0;}';
|
||||
iframe.contentDocument.head.appendChild(css);
|
||||
}
|
||||
});
|
||||
|
||||
@ -344,7 +344,8 @@ export class CoreIframeUtilsProvider {
|
||||
|
||||
element.classList.add('core-loading');
|
||||
|
||||
const treatElement = (sendResizeEvent: boolean = false) => {
|
||||
const treatElement = (sendResizeEvent = false) => {
|
||||
|
||||
this.checkOnlineFrameInOffline(element, isSubframe);
|
||||
|
||||
const { window, document } = this.getContentWindowAndDocument(element);
|
||||
@ -361,11 +362,13 @@ export class CoreIframeUtilsProvider {
|
||||
|
||||
// Iframe content has been loaded.
|
||||
// Send a resize events to the iframe so it calculates the right size if needed.
|
||||
if (window && sendResizeEvent) {
|
||||
if (sendResizeEvent) {
|
||||
element.classList.remove('core-loading');
|
||||
|
||||
if (window) {
|
||||
setTimeout(() => window.dispatchEvent && window.dispatchEvent(new Event('resize')), 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
treatElement();
|
||||
|
||||
@ -33,7 +33,6 @@ body:not(.core-iframe-fullscreen) .collapsible-header-page {
|
||||
|
||||
&:not(.collapsible-header-page-is-collapsed) .collapsible-header-collapsed {
|
||||
--core-header-toolbar-border-width: 0;
|
||||
--core-header-buttons-background: var(--ion-background-color);
|
||||
--core-header-buttons-color: var(--text-color);
|
||||
ion-toolbar {
|
||||
--background: transparent;
|
||||
|
||||
@ -70,7 +70,7 @@ core-format-text {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
|
||||
.core-image-viewer-icon {
|
||||
button.core-image-viewer-icon {
|
||||
position: absolute;
|
||||
@include position(null, 10px, 10px, null);
|
||||
color: var(--ion-text-color);
|
||||
|
||||
94
src/theme/components/iframe.scss
Normal file
94
src/theme/components/iframe.scss
Normal file
@ -0,0 +1,94 @@
|
||||
iframe {
|
||||
flex-grow: 1;
|
||||
border: 0;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
background-color: var(--ion-background-color);
|
||||
}
|
||||
|
||||
.core-iframe-offline-disabled {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Iframe fullscreen manage.
|
||||
body.core-iframe-fullscreen {
|
||||
|
||||
// Using router outlet to avoid changing styles on modals.
|
||||
ion-router-outlet {
|
||||
.core-course-header,
|
||||
ion-tab-bar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
ion-tab-bar.mainmenu-tabs {
|
||||
display: none;
|
||||
|
||||
// Restore original safe area.
|
||||
.tabs-inner {
|
||||
@supports (padding-left: constant(safe-area-inset-left)) {
|
||||
--ion-safe-area-left: constant(safe-area-inset-left);
|
||||
}
|
||||
|
||||
@supports (padding-left: env(safe-area-inset-left)) {
|
||||
--ion-safe-area-left: env(safe-area-inset-left);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ion-page ion-header {
|
||||
--core-header-toolbar-height: 48px;
|
||||
--core-header-toolbar-color: white;
|
||||
--core-header-toolbar-background: black;
|
||||
--core-header-buttons-color: var(--core-header-toolbar-color);
|
||||
--core-header-toolbar-border-width: 0px;
|
||||
|
||||
ion-toolbar {
|
||||
h1, ion-back-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
// Place ion-header on the side and hide text
|
||||
.ion-page {
|
||||
flex-direction: row-reverse;
|
||||
ion-header {
|
||||
width: calc(var(--core-header-toolbar-height) + var(--ion-safe-area-right));
|
||||
@include safe-area-padding-horizontal(null, 0px);
|
||||
background: var(--core-header-toolbar-background);
|
||||
|
||||
ion-toolbar {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
--padding-start: 0px;
|
||||
--padding-end: 0px;
|
||||
}
|
||||
|
||||
ion-buttons {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
core-tabs-outlet {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide cards and items with colors on fullscreen iframes.
|
||||
@each $color-name, $unused in $colors {
|
||||
ion-card.core-#{$color-name}-card,
|
||||
.item.core-#{$color-name}-item {
|
||||
opacity: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide collapsible footer on fullscreen iframes.
|
||||
[collapsible-footer] {
|
||||
opacity: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
}
|
||||
27
src/theme/components/ion-avatar.scss
Normal file
27
src/theme/components/ion-avatar.scss
Normal file
@ -0,0 +1,27 @@
|
||||
|
||||
// Avatar
|
||||
// -------------------------
|
||||
// Large centered avatar
|
||||
img.large-avatar,
|
||||
.large-avatar img {
|
||||
display: block;
|
||||
margin: 8px auto;
|
||||
width: var(--core-large-avatar-size);
|
||||
height: var(--core-large-avatar-size);
|
||||
max-width: var(--core-large-avatar-size);
|
||||
max-height: var(--core-large-avatar-size);
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
ion-avatar {
|
||||
&.large-avatar {
|
||||
width: var(--core-large-avatar-size);
|
||||
height: var(--core-large-avatar-size);
|
||||
}
|
||||
|
||||
img {
|
||||
text-indent: -99999px;
|
||||
background-color: var(--gray-200);
|
||||
}
|
||||
}
|
||||
5
src/theme/components/ion-badge.scss
Normal file
5
src/theme/components/ion-badge.scss
Normal file
@ -0,0 +1,5 @@
|
||||
ion-badge {
|
||||
line-height: 1.1;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--mdl-shape-borderRadius-lg);
|
||||
}
|
||||
@ -36,10 +36,49 @@ ion-card {
|
||||
justify-content: flex-end;
|
||||
margin: 0px 8px 8px 8px;
|
||||
|
||||
ion-button {
|
||||
&[fill="outline"] {
|
||||
ion-button.button {
|
||||
--color: var(--gray-900);
|
||||
|
||||
&.button-outline {
|
||||
--background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Coloured cards.
|
||||
@each $color-name, $unused in $colors {
|
||||
&.core-#{$color-name}-card {
|
||||
--color-tint: var(--ion-color-#{$color-name}-tint);
|
||||
--color-shade: var(--ion-color-#{$color-name}-shade);
|
||||
--border-width: 0;
|
||||
|
||||
--border-color: var(--color-tint);
|
||||
--border-radius: var(--mdl-shape-borderRadius-sm);
|
||||
--background: var(--color-tint);
|
||||
--color: var(--color-shade);
|
||||
|
||||
ion-item.item {
|
||||
--background: var(--color-tint);
|
||||
--color: var(--color-shade);
|
||||
--inner-border-width: 0px;
|
||||
--border-width: 0px;
|
||||
font-size: var(--text-size);
|
||||
|
||||
&.item-label > ion-label,
|
||||
&.item-label > ion-label > p {
|
||||
--color: var(--color-shade);
|
||||
}
|
||||
|
||||
> ion-icon[slot] {
|
||||
color: var(--color-shade);
|
||||
@include margin-horizontal(null, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
ion-label {
|
||||
white-space: normal !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -15,6 +15,10 @@ input[type=checkbox] {
|
||||
}
|
||||
}
|
||||
|
||||
ion-checkbox::part(label) {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
ion-checkbox {
|
||||
&.checkbox-disabled {
|
||||
@include pointer-events-on-buttons();
|
||||
|
||||
@ -132,7 +132,6 @@ ion-header.header-md {
|
||||
--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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,6 +19,14 @@ ion-icon {
|
||||
-webkit-transform: scale(-1, 1);
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
// Coloured icons.
|
||||
@each $color-name, $unused in $colors {
|
||||
&.ion-color-#{$color-name} {
|
||||
--ion-color-base: var(--ion-color-#{$color-name});
|
||||
color: var(--ion-color-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The following code is part of the Fontawesome css file that can be found
|
||||
|
||||
@ -232,3 +232,21 @@ ion-item.item.item-file {
|
||||
--background: var(--light);
|
||||
}
|
||||
}
|
||||
|
||||
// Coloured items.
|
||||
@each $color-name, $unused in $colors {
|
||||
|
||||
ion-item.item.core-#{$color-name}-item,
|
||||
.item.core-#{$color-name}-item {
|
||||
--color-base: var(--ion-color-#{$color-name});
|
||||
--color-shade: var(--ion-color-#{$color-name}-shade);
|
||||
|
||||
--border-width: 0 0 3px 0;
|
||||
--border-color: var(--color-base);
|
||||
--inner-border-width: 0px;
|
||||
|
||||
> ion-icon[slot] {
|
||||
color: var(--color-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,6 +22,10 @@ input[type=radio],
|
||||
--outer-border-width: 1px;
|
||||
}
|
||||
|
||||
ion-radio::part(label) {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.ios ion-radio {
|
||||
&::part(container) {
|
||||
width: var(--size);
|
||||
|
||||
82
src/theme/components/table.scss
Normal file
82
src/theme/components/table.scss
Normal file
@ -0,0 +1,82 @@
|
||||
|
||||
// Table App styles
|
||||
table.core-table {
|
||||
border-collapse: collapse;
|
||||
line-height: 20px;
|
||||
width: 98%;
|
||||
margin: 1em auto;
|
||||
color: var(--text-color);
|
||||
|
||||
thead th {
|
||||
vertical-align: bottom;
|
||||
font-weight: bold;
|
||||
font-size: var(--mdl-typography-body-fontSize-md);
|
||||
background-color: var(--core-table-header-background);
|
||||
}
|
||||
|
||||
tbody {
|
||||
th {
|
||||
font-weight: normal;
|
||||
}
|
||||
td {
|
||||
font-size: var(--mdl-typography-body-fontSize-lg);
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 8px;
|
||||
white-space: normal;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid var(--core-table-border-color);
|
||||
}
|
||||
|
||||
.odd {
|
||||
--cell-background: var(--core-table-odd-cell-background);
|
||||
--cell-hover: var(--core-table-odd-cell-hover);
|
||||
}
|
||||
|
||||
.even {
|
||||
--cell-background: var(--core-table-even-cell-background);
|
||||
--cell-hover: var(--core-table-even-cell-hover);
|
||||
}
|
||||
|
||||
.odd, .even {
|
||||
td, th, th[aria-current="page"] {
|
||||
background-color: var(--cell-background);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--cell-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody.auto-striped {
|
||||
tr:nth-child(odd) {
|
||||
background-color: var(--core-table-odd-cell-background);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--core-table-even-odd-hover);
|
||||
}
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: var(--core-table-even-cell-background);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--core-table-even-cell-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ion-no-border {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.dimmed_text,
|
||||
.hidden {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
@ -161,73 +161,6 @@ core-split-view.menu-and-content {
|
||||
}
|
||||
}
|
||||
|
||||
// Iframe fullscreen manage.
|
||||
// Using router outlet to avoid changing styles on modals.
|
||||
body.core-iframe-fullscreen ion-router-outlet {
|
||||
|
||||
.core-course-header,
|
||||
ion-tab-bar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
ion-tab-bar.mainmenu-tabs {
|
||||
display: none;
|
||||
|
||||
// Restore original safe area.
|
||||
.tabs-inner {
|
||||
@supports (padding-left: constant(safe-area-inset-left)) {
|
||||
--ion-safe-area-left: constant(safe-area-inset-left);
|
||||
}
|
||||
|
||||
@supports (padding-left: env(safe-area-inset-left)) {
|
||||
--ion-safe-area-left: env(safe-area-inset-left);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ion-page ion-header {
|
||||
--core-header-toolbar-height: 48px;
|
||||
--core-header-toolbar-color: white;
|
||||
--core-header-toolbar-background: black;
|
||||
--core-header-buttons-background: var(--core-header-toolbar-background);
|
||||
--core-header-buttons-color: var(--core-header-toolbar-color);
|
||||
--core-header-toolbar-border-width: 0px;
|
||||
|
||||
ion-toolbar {
|
||||
h1, ion-back-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
// Place ion-header on the side and hide text
|
||||
.ion-page {
|
||||
flex-direction: row-reverse;
|
||||
ion-header {
|
||||
width: calc(var(--core-header-toolbar-height) + var(--ion-safe-area-right));
|
||||
@include safe-area-padding-horizontal(null, 0px);
|
||||
background: var(--core-header-toolbar-background);
|
||||
|
||||
ion-toolbar {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
--padding-start: 0px;
|
||||
--padding-end: 0px;
|
||||
}
|
||||
|
||||
ion-buttons {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
core-tabs-outlet {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hidden submit button.
|
||||
.core-submit-hidden-enter {
|
||||
position: absolute;
|
||||
@ -262,105 +195,6 @@ body.core-iframe-fullscreen ion-router-outlet {
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
||||
// Card styles
|
||||
@each $color-name, $unused in $colors {
|
||||
|
||||
// Message cards.
|
||||
ion-card.core-#{$color-name}-card {
|
||||
--color-tint: var(--ion-color-#{$color-name}-tint);
|
||||
--color-shade: var(--ion-color-#{$color-name}-shade);
|
||||
--border-width: 0;
|
||||
|
||||
--border-color: var(--color-tint);
|
||||
--border-radius: var(--mdl-shape-borderRadius-sm);
|
||||
--background: var(--color-tint);
|
||||
--color: var(--color-shade);
|
||||
|
||||
ion-item.item {
|
||||
--background: var(--color-tint);
|
||||
--color: var(--color-shade);
|
||||
--inner-border-width: 0px;
|
||||
--border-width: 0px;
|
||||
font-size: var(--text-size);
|
||||
|
||||
&.item-label > ion-label,
|
||||
&.item-label > ion-label > p {
|
||||
--color: var(--color-shade);
|
||||
}
|
||||
|
||||
> ion-icon[slot] {
|
||||
color: var(--color-shade);
|
||||
@include margin-horizontal(null, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
ion-label {
|
||||
white-space: normal !important;
|
||||
}
|
||||
}
|
||||
|
||||
ion-item.item.core-#{$color-name}-item {
|
||||
--color-base: var(--ion-color-#{$color-name});
|
||||
--color-shade: var(--ion-color-#{$color-name}-shade);
|
||||
|
||||
--border-width: 0 0 3px 0;
|
||||
--border-color: var(--color-base);
|
||||
--inner-border-width: 0px;
|
||||
|
||||
> ion-icon[slot] {
|
||||
color: var(--color-base);
|
||||
}
|
||||
}
|
||||
|
||||
.item.core-#{$color-name}-item {
|
||||
--color-base: var(--ion-color-#{$color-name});
|
||||
--color-shade: var(--ion-color-#{$color-name}-shade);
|
||||
|
||||
--border-width: 0 0 3px 0;
|
||||
--border-color: var(--color-base);
|
||||
--inner-border-width: 0px;
|
||||
> ion-icon[slot] {
|
||||
color: var(--color-base);
|
||||
}
|
||||
}
|
||||
|
||||
.core-iframe-fullscreen ion-card.core-#{$color-name}-card,
|
||||
.core-iframe-fullscreen .item.core-#{$color-name}-item {
|
||||
opacity: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
ion-icon.ion-color-#{$color-name} {
|
||||
--ion-color-base: var(--ion-color-#{$color-name});
|
||||
color: var(--ion-color-base);
|
||||
}
|
||||
}
|
||||
|
||||
// Avatar
|
||||
// -------------------------
|
||||
// Large centered avatar
|
||||
img.large-avatar,
|
||||
.large-avatar img {
|
||||
display: block;
|
||||
margin: 8px auto;
|
||||
width: var(--core-large-avatar-size);
|
||||
height: var(--core-large-avatar-size);
|
||||
max-width: var(--core-large-avatar-size);
|
||||
max-height: var(--core-large-avatar-size);
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
ion-avatar.large-avatar {
|
||||
width: var(--core-large-avatar-size);
|
||||
height: var(--core-large-avatar-size);
|
||||
}
|
||||
|
||||
ion-avatar ion-img, ion-avatar img {
|
||||
text-indent: -99999px;
|
||||
background-color: var(--gray-200);
|
||||
}
|
||||
|
||||
// Wait to load before showing the image.
|
||||
img[core-external-content]:not([src]) {
|
||||
visibility: hidden;
|
||||
@ -398,27 +232,12 @@ ion-content.limited-width > :not([slot]) {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
ion-badge {
|
||||
line-height: 1.1;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--mdl-shape-borderRadius-lg);
|
||||
}
|
||||
|
||||
.core-anchor, core-format-text a {
|
||||
color: var(--core-link-color);
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
core-block ion-item-divider .core-button-spinner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include margin-horizontal(10px);
|
||||
|
||||
ion-badge.core-course-download-courses-progress {
|
||||
@include margin(null, 12px, null, null);
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal scrolling elements
|
||||
.core-horizontal-scroll {
|
||||
@ -443,10 +262,6 @@ mark, .matchtext {
|
||||
font-family: var(--mdl-typography-monospace-font);
|
||||
}
|
||||
|
||||
.core-iframe-offline-disabled {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.core-scanning-qr {
|
||||
.ion-page, ion-modal::part(content) {
|
||||
background-color: transparent !important;
|
||||
@ -538,14 +353,6 @@ ion-content.disable-scroll-y::part(scroll) {
|
||||
will-change: auto;
|
||||
}
|
||||
|
||||
iframe {
|
||||
flex-grow: 1;
|
||||
border: 0;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
background-color: var(--ion-background-color);
|
||||
}
|
||||
|
||||
@if ($core-login-hide-need-help) {
|
||||
.core-login-need-help {
|
||||
display: none !important;
|
||||
@ -556,17 +363,11 @@ ion-grid.core-no-grid > ion-row {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.core-underheader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.core-footer-shadow [collapsible-footer] {
|
||||
box-shadow: var(--drop-shadow-top, none);
|
||||
clip-path: inset(-8px 0px 0px 0px); // Only show shadow at top.
|
||||
}
|
||||
|
||||
[collapsible-footer] {
|
||||
transition: box-shadow 0.5s;
|
||||
width: 100%;
|
||||
@ -611,11 +412,6 @@ ion-grid.core-no-grid > ion-row {
|
||||
}
|
||||
}
|
||||
|
||||
.core-iframe-fullscreen [collapsible-footer] {
|
||||
opacity: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.adaptable-buttons-row,
|
||||
.adaptable-buttons-row-reverse {
|
||||
@ -701,85 +497,3 @@ video::-webkit-media-text-track-display {
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Table App styles
|
||||
table.core-table {
|
||||
border-collapse: collapse;
|
||||
line-height: 20px;
|
||||
width: 98%;
|
||||
margin: 1em auto;
|
||||
color: var(--text-color);
|
||||
|
||||
thead th {
|
||||
vertical-align: bottom;
|
||||
font-weight: bold;
|
||||
font-size: var(--mdl-typography-body-fontSize-md);
|
||||
background-color: var(--core-table-header-background);
|
||||
}
|
||||
|
||||
tbody {
|
||||
th {
|
||||
font-weight: normal;
|
||||
}
|
||||
td {
|
||||
font-size: var(--mdl-typography-body-fontSize-lg);
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 8px;
|
||||
white-space: normal;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid var(--core-table-border-color);
|
||||
}
|
||||
|
||||
.odd {
|
||||
--cell-background: var(--core-table-odd-cell-background);
|
||||
--cell-hover: var(--core-table-odd-cell-hover);
|
||||
}
|
||||
|
||||
.even {
|
||||
--cell-background: var(--core-table-even-cell-background);
|
||||
--cell-hover: var(--core-table-even-cell-hover);
|
||||
}
|
||||
|
||||
.odd, .even {
|
||||
td, th, th[aria-current="page"] {
|
||||
background-color: var(--cell-background);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--cell-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody.auto-striped {
|
||||
tr:nth-child(odd) {
|
||||
background-color: var(--core-table-odd-cell-background);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--core-table-even-odd-hover);
|
||||
}
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: var(--core-table-even-cell-background);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--core-table-even-cell-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ion-no-border {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.dimmed_text,
|
||||
.hidden {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
@ -93,7 +93,7 @@ html {
|
||||
--core-header-toolbar-background: var(--white);
|
||||
--core-header-toolbar-border-color: var(--stroke);
|
||||
--core-header-toolbar-color: var(--text-color);
|
||||
--core-header-buttons-background: var(--core-header-toolbar-background);
|
||||
--core-header-buttons-background: transparent;
|
||||
--core-header-buttons-color: var(--core-header-toolbar-color);
|
||||
|
||||
--ion-searchbar-background: var(--ion-background-color);
|
||||
|
||||
@ -22,8 +22,10 @@
|
||||
@import "components/collapsible-item.scss";
|
||||
@import "components/error-accordion.scss";
|
||||
@import "components/format-text.scss";
|
||||
@import "components/iframe.scss";
|
||||
@import "components/mod-label.scss";
|
||||
@import "components/rubrics.scss";
|
||||
@import "components/table.scss";
|
||||
@import "components/videojs.scss";
|
||||
|
||||
/* Ionic components overrides */
|
||||
@ -31,7 +33,9 @@ html {
|
||||
@import "components/ion-accordion.scss";
|
||||
@import "components/ion-action-sheet.scss";
|
||||
@import "components/ion-alert.scss";
|
||||
@import "components/ion-avatar.scss";
|
||||
@import "components/ion-back-button.scss";
|
||||
@import "components/ion-badge.scss";
|
||||
@import "components/ion-button.scss";
|
||||
@import "components/ion-card.scss";
|
||||
@import "components/ion-checkbox.scss";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user