MOBILE-3320 course: Add customization css options
Pau Ferrer Ocaña
parent
5aeee61fbe
commit
7a4cd09f73
|
|
@ -2,8 +2,11 @@
|
|||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
--line-height: 40px;
|
||||
--bar-margin: 16px 0;
|
||||
|
||||
.core-progress-text {
|
||||
line-height: 40px;
|
||||
line-height: var(--line-height);
|
||||
font-size: 1rem;
|
||||
color: var(--text-color);
|
||||
width: 55px;
|
||||
|
|
@ -14,7 +17,7 @@
|
|||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: var(--height);
|
||||
margin: 16px 0;
|
||||
margin: var(--bar-margin);
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -17,13 +17,14 @@
|
|||
|
||||
.core-course-thumb {
|
||||
display: none;
|
||||
height: 150px;
|
||||
height: #{$core-courseimage-on-course-height};
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
position: relative;
|
||||
background: var(--ion-item-background);
|
||||
border-bottom: 1px solid var(--gray);
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
|
|
@ -34,6 +35,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
@if ($core-show-courseimage-on-course) {
|
||||
.core-course-thumb {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@if ($core-hide-progress-on-course) {
|
||||
.core-course-progress {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.core-button-selector-row {
|
||||
display: flex;
|
||||
core-combobox {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
:host {
|
||||
core-progress-bar {
|
||||
.core-progress-text {
|
||||
line-height: 24px;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 10px;
|
||||
}
|
||||
progress {
|
||||
margin: 8px 0 4px 0;
|
||||
}
|
||||
}
|
||||
@import '~theme/globals.scss';
|
||||
core-progress-bar {
|
||||
--bar-margin: 8px 0 4px 0;
|
||||
--line-height: 20px;
|
||||
}
|
||||
|
||||
ion-badge {
|
||||
text-align: start;
|
||||
@if ($core-hide-progress-on-section-selector) {
|
||||
core-progress-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-badge {
|
||||
text-align: start;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ import { ModalController } from '@singletons';
|
|||
@Component({
|
||||
selector: 'core-course-section-selector',
|
||||
templateUrl: 'section-selector.html',
|
||||
styleUrls: ['section-selector.scss'],
|
||||
})
|
||||
export class CoreCourseSectionSelectorComponent implements OnInit {
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,8 @@
|
|||
</ion-button>
|
||||
</div>
|
||||
</ion-item>
|
||||
<ion-item *ngIf="showAll && course.progress! >= 0 && course.completionusertracked !== false" lines="none">
|
||||
<ion-item *ngIf="showAll && course.progress! >= 0 && course.completionusertracked !== false" lines="none"
|
||||
class="core-course-progress">
|
||||
<ion-label>
|
||||
<core-progress-bar [progress]="course.progress" a11yText="core.courses.aria:courseprogress"></core-progress-bar>
|
||||
</ion-label>
|
||||
|
|
|
|||
|
|
@ -41,6 +41,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
@if ($core-course-hide-thumb-on-cards) {
|
||||
.core-course-thumb {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@if ($core-course-thumb-on-cards-background) {
|
||||
.core-course-thumb {
|
||||
background: $core-course-thumb-on-cards-background !important;
|
||||
}
|
||||
}
|
||||
|
||||
.core-course-additional-info {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
|
@ -86,6 +98,12 @@
|
|||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@if ($core-course-hide-progress-on-cards) {
|
||||
.core-course-progress {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
|
|||
|
|
@ -324,12 +324,13 @@ $core-side-blocks-max-width: 30% !default;
|
|||
$core-side-blocks-min-width: 280px !default;
|
||||
|
||||
$core-combobox-color: $black !default;
|
||||
$core-combobox-background: $ion-item-background !default;
|
||||
$core-combobox-color-dark: $white !default;
|
||||
$core-combobox-background-dark: $ion-item-background-dark !default;
|
||||
$core-combobox-border-color: $primary !default;
|
||||
$core-combobox-border-color-dark: $primary-dark !default;
|
||||
$core-combobox-border-width: 3px !default;
|
||||
|
||||
|
||||
$core-selected-item-color: $primary !default;
|
||||
$core-selected-item-color-dark: $primary-dark !default;
|
||||
$core-selected-item-border-width: 5px !default;
|
||||
|
|
@ -358,6 +359,25 @@ $core-avatar-size: 44px !default;
|
|||
$core-send-message-input-background: $gray !default;
|
||||
$core-send-message-input-color: $black !default;
|
||||
|
||||
$core-more-icon-color: null !default;
|
||||
$core-more-item-border: null !default;
|
||||
$core-more-hide-siteinfo: false !default;
|
||||
$core-more-hide-sitename: false !default;
|
||||
$core-more-hide-siteurl: false !default;
|
||||
|
||||
$core-fixed-url: false !default;
|
||||
$core-dashboard-logo: false !default;
|
||||
$core-always-show-main-menu: false !default;
|
||||
|
||||
$core-show-courseimage-on-course: false !default;
|
||||
$core-hide-progress-on-course: false !default;
|
||||
$core-courseimage-on-course-height: 150px !default;
|
||||
$core-hide-progress-on-section-selector: false !default;
|
||||
|
||||
$core-course-hide-thumb-on-cards: false !default;
|
||||
$core-course-thumb-on-cards-background: null !default;
|
||||
$core-course-hide-progress-on-cards: false !default;
|
||||
|
||||
$addon-calendar-event-category-color: $purple !default;
|
||||
$addon-calendar-event-course-color: $red !default;
|
||||
$addon-calendar-event-group-color: $yellow !default;
|
||||
|
|
@ -392,13 +412,3 @@ $addon-forum-highlight-color: $gray-lighter !default;
|
|||
|
||||
$addon-forum-border-color-dark: $gray-dark !default;
|
||||
$addon-forum-highlight-color-dark: $gray-darker !default;
|
||||
|
||||
$core-more-icon-color: null !default;
|
||||
$core-more-item-border: null !default;
|
||||
$core-more-hide-siteinfo: false !default;
|
||||
$core-more-hide-sitename: false !default;
|
||||
$core-more-hide-siteurl: false !default;
|
||||
|
||||
$core-fixed-url: false !default;
|
||||
$core-dashboard-logo: false !default;
|
||||
$core-always-show-main-menu: false !default;
|
||||
|
|
|
|||
|
|
@ -462,7 +462,7 @@ img.large-avatar,
|
|||
margin-bottom: 10px;
|
||||
border-radius : 50%;
|
||||
padding: 4px;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--gray);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
--item-divider-color: #{$ion-item-divider-color-dark};
|
||||
--spacer-background: #{$core-spacer-background-dark};
|
||||
|
||||
--core-combobox-background: var(--ion-item-background);
|
||||
--core-combobox-background: #{$core-combobox-background-dark};
|
||||
--core-combobox-color: #{$core-combobox-color-dark};
|
||||
|
||||
--selected-item-color: #{$core-selected-item-color-dark};
|
||||
|
|
|
|||
|
|
@ -222,6 +222,7 @@
|
|||
|
||||
--core-combobox-background: var(--ion-item-background);
|
||||
--core-combobox-color: #{$core-combobox-color};
|
||||
--core-combobox-background: #{$core-combobox-background};
|
||||
--core-combobox-border-color: #{$core-combobox-border-color};
|
||||
--core-combobox-border-width: #{$core-combobox-border-width};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue