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

MOBILE-649 ux: Adapt more RTL styles

main
Pau Ferrer Ocaña 2018-08-29 16:42:12 +02:00
parent a3d2ad77ad
commit 4f6d323f6f
40 changed files with 120 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/addon/messages/pages/discussion/discussion.scss
View File

@ -58,12 +58,12 @@ page-addon-messages-discussion {
align-self: flex-end; align-self: flex-end;
color: $item-message-note-text; color: $item-message-note-text;
font-size: $item-message-note-font-size; font-size: $item-message-note-font-size;
margin-left: 10px; @include margin(null, null, null, 10px);
} }
.addon-messages-delete-button { .addon-messages-delete-button {
min-height: initial; min-height: initial;
line-height: initial; line-height: initial;
margin: 0 0 0 10px; @include margin(0, 0, 0, 10px);
height: auto; height: auto;
-webkit-align-self: flex-end; -webkit-align-self: flex-end;
-ms-flex-item-align: end; -ms-flex-item-align: end;
@ -88,11 +88,8 @@ page-addon-messages-discussion {
} }
.spinner { .spinner {
float: right; @include float(end);
margin-left: 5px; @include margin(2px, -3px, -2px, 5px);
margin-right: -3px;
margin-top: 2px;
margin-bottom: -2px;
svg { svg {
width: 16px; width: 16px;

2
src/addon/mod/book/components/toc-popover/addon-mod-assign-submission-toc-popover.html
View File

@ -1,5 +1,5 @@
<ion-list> <ion-list>
<a ion-item text-wrap *ngFor="let chapter of chapters" (click)="loadChapter(chapter.id)" detail-none> <a ion-item text-wrap *ngFor="let chapter of chapters" (click)="loadChapter(chapter.id)" detail-none>
<p [attr.padding-left]="chapter.level == 1 ? true : null">{{chapter.title}}</p> <p [attr.padding-start]="chapter.level == 1 ? true : null">{{chapter.title}}</p>
</a> </a>
</ion-list> </ion-list>

2
src/addon/mod/chat/pages/chat/chat.html
View File

@ -42,7 +42,7 @@
<img [src]="message.userprofileimageurl" onError="this.src='assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: message.userfullname}" role="presentation"> <img [src]="message.userprofileimageurl" onError="this.src='assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: message.userfullname}" role="presentation">
</ion-avatar> </ion-avatar>
<h2> <h2>
<p float-right>{{ message.timestamp * 1000 | coreFormatDate:"dftimedate" }}</p> <p float-end>{{ message.timestamp * 1000 | coreFormatDate:"dftimedate" }}</p>
<core-format-text [text]="message.userfullname"></core-format-text> <core-format-text [text]="message.userfullname"></core-format-text>
</h2> </h2>
<core-format-text [text]="message.message" (afterRender)="last && scrollToBottom()"></core-format-text> <core-format-text [text]="message.message" (afterRender)="last && scrollToBottom()"></core-format-text>

8
src/addon/mod/data/data.scss
View File

@ -50,11 +50,11 @@ page-addon-mod-data-edit {
} }
.core-mark-required { .core-mark-required {
float: right; @include float(end);
+ ion-input, + ion-input,
+ ion-select { + ion-select {
padding-right: 20px; @include padding(null, 20px, null, null);
} }
} }
@ -91,12 +91,12 @@ page-addon-mod-data-edit {
ion-select { ion-select {
width: 100%; width: 100%;
left: 0; @include position(null, null, null, 0);
max-width: none; max-width: none;
} }
.core-item-has-rich-text-editor { .core-item-has-rich-text-editor {
margin-right: 1px; @include margin(null, 1px, null, null);
} }
} }
} }

4
src/addon/mod/forum/components/index/addon-mod-forum-index.html
View File

@ -32,7 +32,7 @@
</ion-avatar> </ion-avatar>
<h2><core-format-text [text]="discussion.subject"></core-format-text></h2> <h2><core-format-text [text]="discussion.subject"></core-format-text></h2>
<p *ngIf="discussion.userfullname"> <p *ngIf="discussion.userfullname">
<ion-note float-right padding-left><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note> <ion-note float-end padding-start><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
{{discussion.userfullname}} {{discussion.userfullname}}
</p> </p>
</ion-item> </ion-item>
@ -50,7 +50,7 @@
</ion-avatar> </ion-avatar>
<h2><ion-icon name="pin" *ngIf="discussion.pinned"></ion-icon> <core-format-text [text]="discussion.subject"></core-format-text></h2> <h2><ion-icon name="pin" *ngIf="discussion.pinned"></ion-icon> <core-format-text [text]="discussion.subject"></core-format-text></h2>
<p> <p>
<ion-note float-right padding-left> <ion-note float-end padding-start>
{{discussion.created | coreDateDayOrTime}} {{discussion.created | coreDateDayOrTime}}
<div *ngIf="discussion.numunread"><ion-icon name="record"></ion-icon> {{ 'addon.mod_forum.unreadpostsnumber' | translate:{ '$a' : discussion.numunread} }}</div> <div *ngIf="discussion.numunread"><ion-icon name="record"></ion-icon> {{ 'addon.mod_forum.unreadpostsnumber' | translate:{ '$a' : discussion.numunread} }}</div>
</ion-note> </ion-note>

4
src/addon/mod/forum/components/post/addon-mod-forum-post.html
View File

@ -4,8 +4,8 @@
</ion-avatar> </ion-avatar>
<h2><span [class.core-bold]="post.parent == 0"><core-format-text [text]="post.subject"></core-format-text></span></h2> <h2><span [class.core-bold]="post.parent == 0"><core-format-text [text]="post.subject"></core-format-text></span></h2>
<p> <p>
<ion-note float-right padding-left *ngIf="!post.modified"><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note> <ion-note float-end padding-start *ngIf="!post.modified"><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
<ion-note float-right padding-left *ngIf="post.modified"> <ion-note float-end padding-start *ngIf="post.modified">
{{post.modified | coreDateDayOrTime}} {{post.modified | coreDateDayOrTime}}
<div *ngIf="unread"><ion-icon name="record"></ion-icon> {{ 'addon.mod_forum.unread' | translate }}</div> <div *ngIf="unread"><ion-icon name="record"></ion-icon> {{ 'addon.mod_forum.unread' | translate }}</div>
</ion-note> </ion-note>

2
src/addon/mod/forum/pages/discussion/discussion.html
View File

@ -51,7 +51,7 @@
<ion-card> <ion-card>
<addon-mod-forum-post [post]="post" [courseId]="courseId" [discussionId]="discussionId" [component]="component" [componentId]="cmId" [replyData]="replyData" [originalData]="originalData" [defaultSubject]="defaultSubject" [forum]="forum" [trackPosts]="trackPosts" (onPostChange)="postListChanged()"></addon-mod-forum-post> <addon-mod-forum-post [post]="post" [courseId]="courseId" [discussionId]="discussionId" [component]="component" [componentId]="cmId" [replyData]="replyData" [originalData]="originalData" [defaultSubject]="defaultSubject" [forum]="forum" [trackPosts]="trackPosts" (onPostChange)="postListChanged()"></addon-mod-forum-post>
</ion-card> </ion-card>
<div padding-left *ngIf="post.children.length && post.children[0].subject"> <div padding-start *ngIf="post.children.length && post.children[0].subject">
<ng-container *ngFor="let child of post.children"> <ng-container *ngFor="let child of post.children">
<ng-container *ngTemplateOutlet="nestedPosts; context: {post: child}"></ng-container> <ng-container *ngTemplateOutlet="nestedPosts; context: {post: child}"></ng-container>
</ng-container> </ng-container>

2
src/addon/mod/imscp/components/toc-popover/addon-mod-imscp-toc-popover.html
View File

@ -1,5 +1,5 @@
<ion-list> <ion-list>
<a ion-item *ngFor="let item of items" (click)="loadItem(item.href)" detail-none [class.core-bold]="!item.href"> <a ion-item *ngFor="let item of items" (click)="loadItem(item.href)" detail-none [class.core-bold]="!item.href">
<span padding-left *ngFor="let i of getNumberForPadding(item.level)"></span>{{item.title}} <span padding-start *ngFor="let i of getNumberForPadding(item.level)"></span>{{item.title}}
</a> </a>
</ion-list> </ion-list>

2
src/addon/mod/lesson/pages/player/player.html
View File

@ -50,7 +50,7 @@
<!-- Short answer. --> <!-- Short answer. -->
<ng-container *ngSwitchCase="'shortanswer'"> <ng-container *ngSwitchCase="'shortanswer'">
<ion-input padding-left [type]="question.input.type" placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}" [id]="question.input.id" [formControlName]="question.input.name" autocorrect="off" [maxlength]="question.input.maxlength"> <ion-input padding-start [type]="question.input.type" placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}" [id]="question.input.id" [formControlName]="question.input.name" autocorrect="off" [maxlength]="question.input.maxlength">
</ion-input> </ion-input>
</ng-container> </ng-container>

5
src/addon/mod/lesson/pages/player/player.scss
View File

@ -10,6 +10,11 @@ page-addon-mod-lesson-player {
padding-left: 0; padding-left: 0;
} }
ion-input[padding-start] input[padding-start] {
// Applying padding-start to the ion-input applies it twice since it's replicated in the inner input.
@include padding(null, null, null, 0);
}
.addon-mod_lesson-pagebuttons .button-block { .addon-mod_lesson-pagebuttons .button-block {
contain: content; contain: content;
height: 100%; height: 100%;

4
src/addon/mod/quiz/components/index/index.scss
View File

@ -7,11 +7,11 @@ addon-mod-quiz-index {
} }
.item-inner ion-label { .item-inner ion-label {
margin-right: 0; @include margin(null, 0, null, null);
} }
.item { .item {
padding-left: 0; @include padding(null, null, null, 0);
} }
.label { .label {

8
src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss
View File

@ -1,16 +1,16 @@
page-addon-mod-quiz-navigation-modal { page-addon-mod-quiz-navigation-modal {
.addon-mod_quiz-selected, .item.addon-mod_quiz-selected { .addon-mod_quiz-selected, .item.addon-mod_quiz-selected {
border-left: 5px solid $core-splitview-selected; @include border-start(5px, solid, $core-splitview-selected);
font-weight: bold; font-weight: bold;
&.item-md { &.item-md {
padding-left: $item-md-padding-start - 5px; @include padding(null, null, null, $item-md-padding-start - 5px);
} }
&.item-ios { &.item-ios {
padding-left: $item-ios-padding-start - 5px; @include padding(null, null, null, $item-ios-padding-start - 5px);
} }
&.item-wp { &.item-wp {
padding-left: $item-wp-padding-start - 5px; @include padding(null, null, null, $item-wp-padding-start - 5px);
} }
} }

4
src/addon/mod/wiki/components/index/index.scss
View File

@ -32,11 +32,11 @@ addon-mod-wiki-index {
} }
.wiki-toc-section-2 { .wiki-toc-section-2 {
padding-left: $addon-mod-wiki-toc-level-padding; @include padding(null, null, null, $addon-mod-wiki-toc-level-padding);
} }
.wiki-toc-section-3 { .wiki-toc-section-3 {
padding-left: $addon-mod-wiki-toc-level-padding * 2; @include padding(null, null, null, $addon-mod-wiki-toc-level-padding * 2);
} }
.wiki_newentry { .wiki_newentry {

9
src/addon/mod/workshop/pages/phase/phase.scss
View File

@ -1,14 +1,7 @@
page-addon-mod-workshop-phase-info { page-addon-mod-workshop-phase-info {
.core-workshop-phase-selected { .core-workshop-phase-selected {
background-color: $white; background-color: $white;
@include ltr() { @include border-start(5px, solid, $core-splitview-selected);
border-left: 5px solid $core-splitview-selected;
}
@include rtl() {
border-right: 5px solid $core-splitview-selected;
}
&.item-md { &.item-md {
@include padding(null, null, null, $item-md-padding-start - 5px); @include padding(null, null, null, $item-md-padding-start - 5px);
} }

2
src/addon/qtype/calculated/component/addon-qtype-calculated.html
View File

@ -18,7 +18,7 @@
<!-- Input to enter the answer. --> <!-- Input to enter the answer. -->
<ion-col> <ion-col>
<ion-input padding-left type="text" placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.input.name" [value]="question.input.value" [disabled]="question.input.readOnly" [ngClass]="[question.input.correctClass]" autocorrect="off"> <ion-input padding-start type="text" placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.input.name" [value]="question.input.value" [disabled]="question.input.readOnly" [ngClass]="[question.input.correctClass]" autocorrect="off">
</ion-input> </ion-input>
</ion-col> </ion-col>

3
src/addon/qtype/multianswer/component/multianswer.scss
View File

@ -37,7 +37,6 @@ addon-qtype-multianswer {
} }
input[type="radio"], input[type="checkbox"] { input[type="radio"], input[type="checkbox"] {
margin-top: -4px; @include margin(-4px, 7px, null, null);
margin-right: 7px;
} }
} }

2
src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html
View File

@ -2,6 +2,6 @@
<ion-item text-wrap> <ion-item text-wrap>
<p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text></p> <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text></p>
</ion-item> </ion-item>
<ion-input padding-left type="text" placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.input.name" [value]="question.input.value" autocorrect="off" [disabled]="question.input.readOnly" [ngClass]="[question.input.correctClass]"> <ion-input padding-start type="text" placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.input.name" [value]="question.input.value" autocorrect="off" [disabled]="question.input.readOnly" [ngClass]="[question.input.correctClass]">
</ion-input> </ion-input>
</section> </section>

6
src/app/app.ios.scss
View File

@ -27,10 +27,10 @@
@extend .card-content-ios; @extend .card-content-ios;
&[icon-start] { &[icon-start] {
padding-left: $card-ios-padding-left * 2 + 20; @include padding(null, null, null, $card-ios-padding-left * 2 + 20);
ion-icon { ion-icon {
left: $card-ios-padding-left; @include position(null, null, null, $card-ios-padding-left);
} }
} }
} }
@ -121,7 +121,7 @@
// Different levels of padding. // Different levels of padding.
@for $i from 0 through 15 { @for $i from 0 through 15 {
.ios .core-padding-#{$i} { .ios .core-padding-#{$i} {
padding-left: 15px * $i + $item-ios-padding-start; @include padding(null, null, null, 15px * $i + $item-ios-padding-start);
} }
} }

6
src/app/app.md.scss
View File

@ -27,10 +27,10 @@
@extend .card-content-md; @extend .card-content-md;
&[icon-start] { &[icon-start] {
padding-left: $card-md-padding-left * 2 + 20; @include padding(null, null, null, $card-md-padding-left * 2 + 20);
ion-icon { ion-icon {
left: $card-md-padding-left; @include position(null, null, null, $card-md-padding-left);
} }
} }
} }
@ -109,7 +109,7 @@
// Different levels of padding. // Different levels of padding.
@for $i from 0 through 15 { @for $i from 0 through 15 {
.md .core-padding-#{$i} { .md .core-padding-#{$i} {
padding-left: 15px * $i + $item-md-padding-start; @include padding(null, null, null, 15px * $i + $item-md-padding-start);
} }
} }

23
src/app/app.scss
View File

@ -122,7 +122,7 @@
max-width: 32px; max-width: 32px;
} }
.label { .label {
margin-left: 5px; @include margin(null, null, null, 5px);
color: $gray-darker; color: $gray-darker;
} }
} }
@ -153,7 +153,7 @@
&.item-complex .item-content { &.item-complex .item-content {
text-align: center; text-align: center;
padding-left: 49px; @include padding(null, null, null, 49px);
} }
> img:first-child, > img:first-child,
@ -256,9 +256,7 @@ core-format-text[ng-reflect-max-height] {
content: ''; content: '';
height: 100%; height: 100%;
position: absolute; position: absolute;
left: 0; @include position(null, 0, 0, 0);
right: 0;
bottom: 0;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px)); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(255, 255, 255, 0)), color-stop(calc(100% - 15px), white)); background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(255, 255, 255, 0)), color-stop(calc(100% - 15px), white));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px)); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
@ -405,7 +403,7 @@ ion-select {
} }
ion-col ion-select { ion-col ion-select {
float: right; @include float(end);
max-width: none; max-width: none;
width: 100%; width: 100%;
.select-text { .select-text {
@ -587,8 +585,7 @@ ion-col ion-select {
} }
.atto_image_size input[type=checkbox] { .atto_image_size input[type=checkbox] {
margin-left: 1em; @include margin(null, 1em, null, 1em);
margin-right: 1em;
} }
.atto_image_size input[type=text] { .atto_image_size input[type=text] {
@ -624,13 +621,13 @@ ion-col ion-select {
/*rtl:begin:ignore*/ /*rtl:begin:ignore*/
.atto_image_button_left { .atto_image_button_left {
float: left; @include float(start);
@include margin(0, 0.5em, 0, 0); @include margin(0, 0.5em, 0, 0);
max-width: calc(100% - 1em); max-width: calc(100% - 1em);
} }
.atto_image_button_right { .atto_image_button_right {
float: right; @include float(end);
@include margin(0, 0, 0, 0.5em); @include margin(0, 0, 0, 0.5em);
max-width: calc(100% - 1em); max-width: calc(100% - 1em);
} }
@ -692,7 +689,7 @@ textarea {
border-bottom: 3px solid $color-base; border-bottom: 3px solid $color-base;
&[icon-start] { &[icon-start] {
padding-left: 52px; @include padding(null, null, null, 52px);
position: relative; position: relative;
ion-icon { ion-icon {
@ -730,7 +727,7 @@ textarea {
.accesshide { .accesshide {
position: absolute; position: absolute;
left: -10000px; @include position(null, null, null, -10000px);
font-weight: normal; font-weight: normal;
font-size: 1em; font-size: 1em;
} }
@ -883,8 +880,6 @@ ion-alert.core-inapp-notification {
height: auto; height: auto;
margin: 0; margin: 0;
position: absolute; position: absolute;
top: -18px;
right: -8px;
@include position(-18px, -8px, null, null); @include position(-18px, -8px, null, null);
color: red; color: red;
font-size: 16px; font-size: 16px;

6
src/app/app.wp.scss
View File

@ -27,10 +27,10 @@
@extend .card-content-wp; @extend .card-content-wp;
&[icon-start] { &[icon-start] {
padding-left: $card-wp-padding-left * 2 + 20; @include padding(null, null, null, $card-wp-padding-left * 2 + 20);
ion-icon { ion-icon {
left: $card-wp-padding-left; @include position(null, null, null, $card-wp-padding-left);
} }
} }
} }
@ -44,7 +44,7 @@
// Different levels of padding. // Different levels of padding.
@for $i from 0 through 15 { @for $i from 0 through 15 {
.wp .core-padding-#{$i} { .wp .core-padding-#{$i} {
padding-left: 15px * $i + $item-wp-padding-start; @include padding(null, null, null, 15px * $i + $item-wp-padding-start);
} }
} }

9
src/components/empty-box/empty-box.scss
View File

@ -1,10 +1,7 @@
core-empty-box { core-empty-box {
.core-empty-box { .core-empty-box {
position: absolute; position: absolute;
top: 0; @include position(0, 0, 0, 0);
bottom: 0;
left: 0;
right: 0;
display: table; display: table;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -25,10 +22,8 @@ core-empty-box {
&.core-empty-box-inline { &.core-empty-box-inline {
position: relative; position: relative;
top: initial;
left: initial;
right: initial;
z-index: initial; z-index: initial;
@include position(initial, initial, null, initial);
height: auto; height: auto;
} }

5
src/components/iframe/iframe.scss
View File

@ -9,10 +9,7 @@ core-iframe {
.core-loading-container { .core-loading-container {
position: absolute; position: absolute;
top: 0; @include position(0, 0, 0, 0);
bottom: 0;
left: 0;
right: 0;
display: table; display: table;
height: 100%; height: 100%;
width: 100%; width: 100%;

5
src/components/loading/loading.scss
View File

@ -32,10 +32,7 @@ core-loading.core-loading-loaded {
> .core-loading-container { > .core-loading-container {
position: absolute; position: absolute;
top: 0; @include position(0, 0, 0, 0);
bottom: 0;
left: 0;
right: 0;
display: table; display: table;
height: 100%; height: 100%;
width: 100%; width: 100%;

2
src/components/mark-required/mark-required.scss
View File

@ -1,7 +1,7 @@
.core-input-required-asterisk, .icon.core-input-required-asterisk { .core-input-required-asterisk, .icon.core-input-required-asterisk {
color: $red !important; color: $red !important;
font-size: 8px; font-size: 8px;
padding-left: 4px; @include padding(null, null, null, 4px);
line-height: 100%; line-height: 100%;
vertical-align: top; vertical-align: top;
} }

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

@ -1,18 +1,17 @@
$core-progress-bar-height: 5px !default; $core-progress-bar-height: 5px !default;
core-progress-bar { core-progress-bar {
padding-right: 55px; @include padding(null, 55px, null, null);
position: relative; position: relative;
display: block; display: block;
@extend .clearfix; @extend .clearfix;
.core-progress-text { .core-progress-text {
margin-left: 10px; @include margin(null, null, null, 10px);
line-height: normal; line-height: normal;
font-size: 1.4rem; font-size: 1.4rem;
color: $gray-darker; color: $gray-darker;
right: 0; @include position(-6px, 0, null, null);
top: -6px;
position: absolute; position: absolute;
} }

12
src/components/rich-text-editor/rich-text-editor.scss
View File

@ -33,7 +33,7 @@ core-rich-text-editor {
overflow-y: auto; overflow-y: auto;
cursor: text; cursor: text;
img { img {
padding-left: 2px; @include padding(null, null, null, 2px);
max-width: 95%; max-width: 95%;
} }
&:empty:before { &:empty:before {
@ -66,7 +66,7 @@ core-rich-text-editor {
} }
ul, ol { ul, ol {
list-style-position: inside; list-style-position: inside;
margin-left: 15px; @include margin(null, null, null, 15px);
} }
} }
} }
@ -89,7 +89,7 @@ core-rich-text-editor {
div.core-rte-toolbar { div.core-rte-toolbar {
background: $gray-darker; background: $gray-darker;
margin: 0px 1px 15px 1px; @include margin(0px, 1px, 15px, 1px);
text-align: center; text-align: center;
flex-grow: 0; flex-grow: 0;
width: 100%; width: 100%;
@ -108,10 +108,10 @@ core-rich-text-editor {
font-size: 1.1em; font-size: 1.1em;
height: 35px; height: 35px;
min-width: 30px; min-width: 30px;
padding-left: 3px; @include padding(null, 3px, null, 3px);
padding-right: 3px; @include border-end(qpx, solid, $gray-dark);
border-right: 1px solid $gray-dark;
border-bottom: 1px solid $gray-dark; border-bottom: 1px solid $gray-dark;
@include position(-6px, 0, null, null);
flex-grow: 1; flex-grow: 1;
margin: 0; margin: 0;
} }

2
src/components/show-password/show-password.scss
View File

@ -4,7 +4,7 @@ core-show-password {
position: relative; position: relative;
ion-input input.text-input { ion-input input.text-input {
padding-right: 47px; @include padding(null, 47px, null, null);
} }
.button[icon-only] { .button[icon-only] {

13
src/components/split-view/split-view.scss
View File

@ -3,10 +3,7 @@ core-split-view {
display: block; display: block;
.menu-inner { .menu-inner {
left: 0; @include position(0, 0, 0, 0);
right: 0;
top: 0;
bottom: 0;
-webkit-transform: initial; -webkit-transform: initial;
transform: initial; transform: initial;
width: 100%; width: 100%;
@ -24,15 +21,15 @@ core-split-view {
.split-pane-side .core-split-item-selected { .split-pane-side .core-split-item-selected {
background-color: $gray-lighter; background-color: $gray-lighter;
border-left: 5px solid $core-splitview-selected; @include border-start(5px, solid, $core-splitview-selected);
&.item-md { &.item-md {
padding-left: $item-md-padding-start - 5px; @include padding(null, null, null, $item-md-padding-start - 5px);
} }
&.item-ios { &.item-ios {
padding-left: $item-ios-padding-start - 5px; @include padding(null, null, null, $item-ios-padding-start - 5px);
} }
&.item-wp { &.item-wp {
padding-left: $item-wp-padding-start - 5px; @include padding(null, null, null, $item-wp-padding-start - 5px);
} }
} }
} }

2
src/components/tabs/tabs.scss
View File

@ -1,5 +1,5 @@
.core-tabs-bar { .core-tabs-bar {
left: 0; @include position(null, null, null, 0);
position: relative; position: relative;
z-index: $z-index-toolbar; z-index: $z-index-toolbar;
display: flex; display: flex;

5
src/core/course/components/format/format.scss
View File

@ -1,8 +1,7 @@
ion-badge.core-course-download-section-progress { ion-badge.core-course-download-section-progress {
display: block; display: block;
float: left; @include float(start);
margin-top: 12px; @include margin(12px, 12px, null, null);
margin-right: 12px;
} }
core-course-format { core-course-format {

18
src/core/course/components/module/module.scss
View File

@ -7,12 +7,10 @@ core-course-module {
min-height: 52px; min-height: 52px;
&.item .item-inner { &.item .item-inner {
padding-right: 0; @include padding(null, 0, null, null);
} }
.label { .label {
margin-top: 0; @include margin(0, 0, 0, null);
margin-right: 0;
margin-bottom: 0;
} }
.core-module-icon { .core-module-icon {
align-items: flex-start; align-items: flex-start;
@ -55,11 +53,11 @@ core-course-module {
.md core-course-module { .md core-course-module {
.core-module-description { .core-module-description {
padding-right: $label-md-margin-end; @include padding(null, $label-md-margin-end, null, null);
margin-bottom: $label-md-margin-bottom; margin-bottom: $label-md-margin-bottom;
.core-show-more { .core-show-more {
padding-right: $label-md-margin-end; @include padding(null, $label-md-margin-end, null, null);
} }
} }
@ -85,11 +83,11 @@ core-course-module {
.ios core-course-module { .ios core-course-module {
.core-module-description { .core-module-description {
padding-right: $label-ios-margin-end; @include padding(null, $label-ios-margin-end, null, null);
margin-bottom: $label-md-margin-bottom; margin-bottom: $label-md-margin-bottom;
.core-show-more { .core-show-more {
padding-right: $label-ios-margin-end; @include padding(null, $label-ios-margin-end, null, null);
} }
} }
@ -110,11 +108,11 @@ core-course-module {
.wp core-course-module { .wp core-course-module {
.core-module-description { .core-module-description {
padding-right: ($item-wp-padding-end / 2); @include padding(null, $item-wp-padding-end / 2, null, null);
margin-bottom: $label-md-margin-bottom; margin-bottom: $label-md-margin-bottom;
.core-show-more { .core-show-more {
padding-right: ($item-wp-padding-end / 2); @include padding(null, $item-wp-padding-end / 2, null, null);
} }
} }

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

@ -33,7 +33,7 @@ core-courses-course-progress {
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
.item-inner { .item-inner {
padding-right: 0; @include padding(null, 0, null, null);
} }
.label { .label {
display: flex; display: flex;
@ -46,9 +46,7 @@ core-courses-course-progress {
} }
} }
.label { .label {
margin-top: 0; @include margin(0, 0, 0, null);
margin-right: 0;
margin-bottom: 0;
} }
} }

2
src/core/courses/components/overview-events/core-courses-overview-events.html
View File

@ -5,7 +5,7 @@
<p>{{event.timesort * 1000 | coreFormatDate:"dfmediumdate" }} <core-format-text *ngIf="showCourse" [text]="event.course.fullnamedisplay"></core-format-text></p> <p>{{event.timesort * 1000 | coreFormatDate:"dfmediumdate" }} <core-format-text *ngIf="showCourse" [text]="event.course.fullnamedisplay"></core-format-text></p>
<button ion-button clear item-end class="hidden-phone" (click)="action($event, event.action.url)" [title]="event.action.name" [disabled]="!event.action.actionable" *ngIf="event.action"> <button ion-button clear item-end class="hidden-phone" (click)="action($event, event.action.url)" [title]="event.action.name" [disabled]="!event.action.actionable" *ngIf="event.action">
{{event.action.name}} {{event.action.name}}
<ion-badge item-end margin-left *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge> <ion-badge item-end margin-end *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge>
</button> </button>
<ion-badge class="hidden-tablet" item-end *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge> <ion-badge class="hidden-tablet" item-end *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge>
</a> </a>

5
src/core/emulator/pages/capture-media/capture-media.scss
View File

@ -2,10 +2,7 @@ page-core-emulator-capture-media {
ion-content { ion-content {
.core-av-wrapper { .core-av-wrapper {
position: absolute; position: absolute;
top: 0; @include position(0, 0, 0, 0);
bottom: 0;
left: 0;
right: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
clear: both; clear: both;

12
src/core/grades/components/course/course.scss
View File

@ -10,9 +10,7 @@ core-grades-course {
border-bottom: 1px solid $list-border-color; border-bottom: 1px solid $list-border-color;
} }
th, td { th, td {
padding-top: 10px; @include padding(10px, 10px, 10px, null);
padding-bottom: 10px;
padding-right: 10px;
vertical-align: top; vertical-align: top;
white-space: normal; white-space: normal;
text-align: left; text-align: left;
@ -26,15 +24,15 @@ core-grades-course {
font-weight: normal; font-weight: normal;
} }
#gradeitem { #gradeitem {
padding-left: 5px; @include padding(null, null, null, 5px);
} }
.core-grades-table-gradeitem { .core-grades-table-gradeitem {
padding-left: 5px; @include padding(null, null, null, 5px);
font-weight: bold; font-weight: bold;
&.column-itemname { &.column-itemname {
padding-left: 0; @include padding(null, null, null, 0);
} }
img { img {
@ -46,7 +44,7 @@ core-grades-course {
} }
} }
.core-grades-table-feedback { .core-grades-table-feedback {
padding-left: 5px; @include padding(null, null, null, 5px);
.no-overflow { .no-overflow {
overflow: auto; overflow: auto;
} }

5
src/core/login/pages/init/init.scss
View File

@ -8,10 +8,7 @@ page-core-login-init {
} }
.core-bglogo { .core-bglogo {
position: absolute; position: absolute;
top: 0; @include position(0, 0, 0, 0);
bottom: 0;
left: 0;
right: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
display: table; display: table;

8
src/core/login/pages/reconnect/reconnect.scss
View File

@ -42,17 +42,17 @@ page-core-login-reconnect {
.list .core-username { .list .core-username {
&.item-md { &.item-md {
@include padding-horizontal($item-md-padding-left, $content-padding); @include padding-horizontal($item-md-padding-start, $content-padding);
} }
&.item-ios { &.item-ios {
@include padding-horizontal($item-ios-padding-left, $content-padding); @include padding-horizontal($item-ios-padding-start, $content-padding);
} }
&.item-wp { &.item-wp {
@include padding-horizontal($item-wp-padding-left, $content-padding); @include padding-horizontal($item-wp-padding-start, $content-padding);
} }
.item-inner { .item-inner {
padding-left: 8px; @include padding(null, null, null, 8px);
} }
} }

5
src/core/user/pages/profile/profile.scss
View File

@ -1,8 +1,7 @@
page-core-user-profile { page-core-user-profile {
.core-icon-foreground { .core-icon-foreground {
position: relative; position: relative;
left: 60px; @include position(null, null, 30px, 60px);
bottom: 30px;
font-size: 24px; font-size: 24px;
} }
.core-user-communication-handlers { .core-user-communication-handlers {
@ -34,7 +33,7 @@ page-core-user-profile {
.core-user-profile-handler { .core-user-profile-handler {
ion-spinner { ion-spinner {
margin-left: 0.3em; @include margin(null, null, null, 0.3em);
} }
} }
} }

21
src/theme/variables.scss
View File

@ -254,6 +254,27 @@ $core-question-state-incorrect-color: $red-light !default;
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$color}'/></svg>") !important; background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$color}'/></svg>") !important;
} }
@mixin border-start($px, $type, $color) {
@include ltr() {
border-left: $px $type $color;
}
@include rtl() {
border-right: $px $type $color;
}
}
@mixin border-end($px, $type, $color) {
@include ltr() {
border-right: $px $type $color;
}
@include rtl() {
border-left: $px $type $color;
}
}
// Font Awesome // Font Awesome
$fa-font-path: $font-path; $fa-font-path: $font-path;
@import "font-awesome"; @import "font-awesome";