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

MOBILE-3814 style: Use border radius to match prototype

main
Pau Ferrer Ocaña 2022-01-27 23:13:21 +01:00
parent 265698c5b7
commit 5c29cd3a05
13 changed files with 68 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/block/blogtags/components/blogtags/blogtags.scss
View File

@ -24,7 +24,7 @@
contain: content;
vertical-align: baseline;
text-decoration: none;
border-radius: 4px;
border-radius: var(--small-radius);
}
.s20 {
font-size: 1.5em;

2
src/addons/block/tags/components/tags/tags.scss
View File

@ -26,7 +26,7 @@
contain: content;
vertical-align: baseline;
text-decoration: none;
border-radius: 4px;
border-radius: var(--small-radius);
}
.s20 {
font-size: 2.7em;

2
src/addons/calendar/components/calendar/calendar.scss
View File

@ -56,7 +56,7 @@
&.today .addon-calendar-day-number span {
border: 2px solid var(--addon-calendar-today-border-color);
line-height: 20px;;
line-height: 20px;
border-radius: 50%;
}
&.dayblank {

12
src/core/components/combobox/combobox.scss
View File

@ -21,14 +21,14 @@
--border-color: var(--core-combobox-border-color);
--border-style: solid;
--border-width: var(--core-combobox-border-all-width);
--border-width: var(--core-combobox-border-width);
--box-shadow: var(--core-combobox-box-shadow);
--padding-top: 10px;
--padding-end: 10px;
--padding-bottom: 10px;
--padding-start: 16px;
--padding-top: 8px;
--padding-end: 8px;
--padding-bottom: 8px;
--padding-start: 8px;
&.md {
--background-activated-opacity: 0;
@ -105,7 +105,7 @@ ion-button {
font-weight: 400;
font-size: 16px;
line-height: 20px;
border-radius: 0;
border-radius: var(--core-combobox-radius);
}
.select-text {

2
src/core/components/mod-icon/mod-icon.scss
View File

@ -10,7 +10,7 @@
margin-bottom: var(--margin-vertical);
@include margin-horizontal(null, var(--margin-end));
border-radius: 4px;
border-radius: var(--small-radius);
padding: 0.7rem;
background-color: $gray-100;
line-height: var(--size);

4
src/core/features/course/components/module/core-course-module.html
View File

@ -1,4 +1,4 @@
<ng-container *ngIf="module.handlerData && module.visibleoncoursepage !== 0">
<ion-card *ngIf="module.handlerData && module.visibleoncoursepage !== 0">
<ng-container *ngIf="!module.handlerData.loading">
<ion-item id="core-course-module-{{module.id}}"
class="ion-text-wrap core-course-module-handler core-module-main-item {{module.handlerData.class}}"
@ -91,4 +91,4 @@
<ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
</ion-label>
</ion-item>
</ng-container>
</ion-card>

61
src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
View File

@ -1,33 +1,34 @@
<ion-item class="ion-text-wrap core-course-list-item" (click)="openCourse()" [class.item-disabled]="course.visible == 0"
[class.item-dimmed]="course.hidden" [attr.aria-label]="course.displayname || course.fullname" detail="true" button
*ngIf="layout == 'list' || layout == 'listwithenrol'">
<ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" slot="start" class="course-icon core-course-thumb"
[attr.course-color]="course.color ? null : course.colorNumber" [style.color]="course.color">
</ion-icon>
<ion-avatar *ngIf="course.courseImage" slot="start" class="core-course-thumb">
<img [src]="course.courseImage" core-external-content alt="" />
</ion-avatar>
<ion-label>
<ion-row>
<ion-col class="ion-align-self-center">
<ng-container *ngTemplateOutlet="mainInfo"></ng-container>
</ion-col>
<ion-col size="auto" class="ion-align-self-center">
<ng-container *ngIf="!isEnrolled">
<ion-icon *ngFor="let icon of enrolmentIcons" color="dark" size="small" [name]="icon.icon"
[title]="icon.label | translate" [attr.aria-label]="icon.label | translate">
</ion-icon>
</ng-container>
<ng-container *ngIf="isEnrolled">
<ng-container *ngTemplateOutlet="download"></ng-container>
</ng-container>
</ion-col>
</ion-row>
<p *ngIf="isEnrolled && progress! >= 0 && completionUserTracked !== false">
<core-progress-bar [progress]="progress" a11yText="core.courses.aria:courseprogress"></core-progress-bar>
</p>
</ion-label>
</ion-item>
<ion-card class="core-course-list-item" *ngIf="layout == 'list' || layout == 'listwithenrol'" [class.item-dimmed]="course.hidden">
<ion-item class="ion-text-wrap" (click)="openCourse()" [class.item-disabled]="course.visible == 0"
[attr.aria-label]="course.displayname || course.fullname" button>
<ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" slot="start" class="course-icon core-course-thumb"
[attr.course-color]="course.color ? null : course.colorNumber" [style.color]="course.color">
</ion-icon>
<ion-avatar *ngIf="course.courseImage" slot="start" class="core-course-thumb">
<img [src]="course.courseImage" core-external-content alt="" />
</ion-avatar>
<ion-label>
<ion-row>
<ion-col class="ion-align-self-center">
<ng-container *ngTemplateOutlet="mainInfo"></ng-container>
</ion-col>
<ion-col size="auto" class="ion-align-self-center">
<ng-container *ngIf="!isEnrolled">
<ion-icon *ngFor="let icon of enrolmentIcons" color="dark" size="small" [name]="icon.icon"
[title]="icon.label | translate" [attr.aria-label]="icon.label | translate">
</ion-icon>
</ng-container>
<ng-container *ngIf="isEnrolled">
<ng-container *ngTemplateOutlet="download"></ng-container>
</ng-container>
</ion-col>
</ion-row>
<p *ngIf="isEnrolled && progress! >= 0 && completionUserTracked !== false">
<core-progress-bar [progress]="progress" a11yText="core.courses.aria:courseprogress"></core-progress-bar>
</p>
</ion-label>
</ion-item>
</ion-card>
<ion-card [attr.course-color]="course.color ? null : course.colorNumber" *ngIf="layout == 'card' || layout == 'summarycard'"
class="core-course-list-card" [class.item-dimmed]="course.hidden">

7
src/core/features/courses/components/course-list-item/course-list-item.scss
View File

@ -1,6 +1,7 @@
@import "~theme/globals";
.core-course-list-item {
ion-card.core-course-list-item {
.course-icon {
color: white;
background: var(--gray-200);
@ -37,7 +38,7 @@
color: var(--core-star-color);
}
ion-card {
ion-card.core-course-list-card {
--vertical-margin: 12px;
--border-radius: 16px;
display: flex;
@ -162,7 +163,7 @@ button {
:host-context(.core-horizontal-scroll) {
@include horizontal_scroll_item(80%, 250px, 300px);
ion-card {
ion-card.core-course-list-card {
.core-course-thumb {
padding-top: 30%;
}

2
src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
View File

@ -126,7 +126,7 @@
margin: 0 auto;
font-size: 18px;
background-color: var(--toobar-background);
border-radius: 4px;
border-radius: var(--small-radius);
@include core-transition(background-color, 200ms);
color: var(--button-color);
cursor: pointer;

8
src/core/features/sitehome/pages/index/index.scss
View File

@ -2,10 +2,16 @@
ion-item ion-icon {
display: inline-block;
border-radius: 4px;
border-radius: var(--small-radius);
padding: 0.7rem;
background-color: $gray-100;
line-height: var(--size);
--margin-end: 1rem;
@include margin-horizontal(null, var(--margin-end));
}
core-course-module.core-sitehome-news ::ng-deep ion-card {
--border-width: 0;
margin: 0;
padding: 0;
}

2
src/theme/components/discussion.scss
View File

@ -24,7 +24,7 @@
// Message item.
ion-item.addon-message {
border: 0;
border-radius: 4px;
border-radius: var(--small-radius);
padding: 0 8px 0 8px;
margin: 10px 8px 0 8px;
--background: var(--addon-messages-message-bg);

2
src/theme/components/format-text.scss
View File

@ -374,7 +374,7 @@ core-rich-text-editor .core-rte-editor {
border: 1px solid var(--gray-500);
background: var(--contrast-background);
padding: 6px 8px;
border-radius: 4px;
border-radius: var(--small-radius);
margin-left: 2px;
margin-right: 2px;
margin-bottom: 10px;

17
src/theme/theme.light.scss
View File

@ -104,13 +104,16 @@
--ion-text-color-rgb: #{$text-color-rgb};
--subdued-text-color: #595959;
--small-radius: 4px;
--big-radius: 8px;
--ion-card-color: var(--text-color);
ion-card {
--border-width: 1px;
--border-style: solid;
--border-color: var(--stroke);
--box-shadow: none;
--border-radius: 8px;
--border-radius: var(--big-radius);
}
--text-hightlight-background-color: #{$core-text-hightlight-background-color};
@ -176,6 +179,9 @@
--background: var(--ion-item-background);
.searchbar-input {
height: var(--a11y-min-target-size);
border: 1px solid var(--stroke);
box-shadow: none;
border-radius: var(--big-radius);
}
}
@ -274,11 +280,10 @@
--core-combobox-background: var(--ion-item-background);
--core-combobox-color: var(--gray-900);
--core-combobox-border-color: var(--primary);
--core-combobox-border-width: 3px;
--core-combobox-border-all-width: 0 0 var(--core-combobox-border-width) 0;
--core-combobox-radius: 0px;
--core-combobox-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
--core-combobox-border-color: var(--stroke);
--core-combobox-border-width: 1px;
--core-combobox-radius: var(--big-radius);
--core-combobox-box-shadow: none;
--selected-item-color: var(--primary);
--selected-item-border-width: 5px;