MOBILE-4470 styles: Sort more styles into separate files
Pau Ferrer Ocaña
parent
7f3b2a6df1
commit
a34a3ac5c8
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,95 @@
|
|||
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-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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
ion-badge {
|
||||
line-height: 1.1;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--mdl-shape-borderRadius-lg);
|
||||
}
|
||||
|
|
@ -42,4 +42,41 @@ ion-card {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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…
Reference in New Issue