EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2613 myoverview: Change progress bar styles

main
Pau Ferrer Ocaña 2018-10-04 11:55:24 +02:00
parent 4b62407f87
commit ccb35ec784
4 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/progress-bar/progress-bar.scss
View File

@ -1,4 +1,4 @@
$core-progress-bar-height: 5px !default;
$core-progress-bar-height: 10px !default;
ion-app.app-root core-progress-bar {
@include padding(null, 55px, null, null);
@ -8,10 +8,10 @@ ion-app.app-root core-progress-bar {
.core-progress-text {
@include margin(null, null, null, 10px);
line-height: normal;
line-height: 40px;
font-size: 1.4rem;
color: $gray-darker;
@include position(-6px, 0, null, null);
@include position(-15px, 10px, null, null);
position: absolute;
}
@ -26,15 +26,16 @@ ion-app.app-root core-progress-bar {
.progress-bar-fallback,
&[value]::-webkit-progress-bar {
background-color: $gray-light;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
background-color: $gray-lighter;
border-radius: 999px;
border: 1px solid $gray-light;
box-shadow: none;
}
.progress-bar-fallback span,
&[value]::-webkit-progress-value {
background-color: $core-progressbar-color;
border-radius: 2px;
border-radius: 999px;
}
.progress-bar-fallback {

4
src/core/courses/components/course-progress/core-courses-course-progress.html
View File

@ -1,5 +1,5 @@
<ion-card>
<div (click)="openCourse(course)" class="core-course-thumb core-course-color-{{course.id % 10}}" [class.core-course-color-img]="course.imageThumb">
<ion-card [attr.course-color]="course.id % 10">
<div (click)="openCourse(course)" class="core-course-thumb" [class.core-course-color-img]="course.imageThumb">
<img *ngIf="course.imageThumb" [src]="course.imageThumb" core-external-content alt=""/>
</div>
<ion-item tappable text-wrap detail-none (click)="openCourse(course)" [title]="course.displayname || course.fullname" class="core-course-link" [class.item-disabled]="course.visible == 0">

19
src/core/courses/components/course-progress/course-progress.scss
View File

@ -3,6 +3,19 @@ ion-app.app-root core-courses-course-progress {
display: flex;
flex-direction: column;
@for $i from 0 to length($core-course-image-background) {
&[course-color="#{$i}"] {
.core-course-thumb {
background: nth($core-course-image-background, $i + 1);
}
progress .progress-bar-fallback span,
progress[value]::-webkit-progress-value {
background-color: nth($core-course-image-background, $i + 1);
}
}
}
.core-course-thumb {
height: 150px;
width: 100%;
@ -11,12 +24,6 @@ ion-app.app-root core-courses-course-progress {
pointer-events: auto;
position: relative;
@for $i from 0 to length($core-course-image-background) {
&.core-course-color-#{$i} {
background: nth($core-course-image-background, $i + 1);
}
}
&.core-course-color-img {
background: white;
}

2
src/theme/variables.scss
View File

@ -18,7 +18,7 @@ $black: #3a3a3a; // Headings, standard text.
$gray-darker: #626262; // Text (emphasis-detail), placeholder, background.
$gray-dark: #9e9e9e; // Borders (never text).
$gray: #dddddd;
$gray-light: #eeeeee; // Background.
$gray-light: #e9e9e9; // Background.
$gray-lighter: #f5f5f5;
$white: #ffffff; // Background, reversed text.