GuzhavinAleksey/Vmeda.Online
1
0
Fork 0
forked from CIT/Vmeda.Online
Code Pull Requests Activity

MOBILE-2449 styles: Adapt styles to make BMMA life easier

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2018-07-02 11:10:03 +02:00
parent e52318e5ef
commit 3656f6b838
10 changed files with 204 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/addon/mod/data/components/index/addon-mod-data-index.html
View File

@ -84,11 +84,6 @@
</ion-grid>
<core-empty-box *ngIf="isEmpty && !search.searching" icon="archive" [message]="'addon.mod_data.norecords' | translate">
<div padding-top *ngIf="canAdd">
<button block (click)="gotoAddEntries($event)">
{{ 'addon.mod_data.addentries' | translate }}
</button>
</div>
</core-empty-box>
<core-empty-box *ngIf="isEmpty && search.searching" icon="archive" [message]="'addon.mod_data.nomatch' | translate">

2
src/addon/mod/forum/components/index/index.scss
View File

@ -1,5 +1,5 @@
addon-mod-forum-index {
.addon-forum-discussion-selected {
border-top: 5px solid $core-color-light;
border-top: 5px solid $core-splitview-selected;
}
}

6
src/addon/mod/wiki/components/subwiki-picker/subwiki-picker.scss
View File

@ -1,15 +1,17 @@
addon-mod-wiki-subwiki-picker {
$core-subwiki-selected: $core-color !default;
.item-divider, .item-divider .label {
font-weight: bold;
}
.item.addon-mod_wiki-subwiki-selected {
background-color: $gray-light;
color: $core-color;
color: $core-subwiki-selected;
.icon {
color: $core-color;
color: $core-subwiki-selected;
font-size: 24px;
}
}

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

@ -34,7 +34,7 @@ core-progress-bar {
.progress-bar-fallback span,
&[value]::-webkit-progress-value {
background-color: $core-color-light;
background-color: $core-progressbar-color;
border-radius: 2px;
}

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

@ -24,7 +24,7 @@ core-split-view {
.split-pane-side .core-split-item-selected {
background-color: $gray-lighter;
border-left: 5px solid $core-color-light;
border-left: 5px solid $core-splitview-selected;
&.item-md {
padding-left: $item-md-padding-start - 5px;
}

26
src/core/login/pages/credentials/credentials.scss
View File

@ -1,7 +1,6 @@
page-core-login-credentials {
.content {
background: -webkit-radial-gradient(white, $gray-light);
background: radial-gradient(white, $gray-light);
.scroll-content {
background: $core-login-page-background-color;
}
img {
@ -16,14 +15,31 @@ page-core-login-credentials {
.box {
padding: 16px;
margin: 8px;
background: $white;
border: 1px solid $gray;
background: $core-login-box-background-color;
border: 1px solid $core-login-box-background-border;
color: $core-login-box-text-color;
}
.core-sitename, .core-siteurl {
@if $core-fixed-url { display: none; }
}
@if $core-login-button-outline {
.button-md.button-default-md {
@extend .button-md-light;
}
}
@if $core-login-loading-color {
.core-loading-container {
color: $core-login-loading-color;
.spinner circle, .spinner line {
stroke: $core-login-loading-color;
}
}
}
.item-input {
margin-bottom: 20px;
}

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

@ -1,7 +1,6 @@
page-core-login-reconnect {
.content {
background: -webkit-radial-gradient(white, $gray-light);
background: radial-gradient(white, $gray-light);
.scroll-content {
background: $core-login-page-background-color;
}
img {
@ -16,14 +15,31 @@ page-core-login-reconnect {
.box {
padding: 16px;
margin: 8px;
background: $white;
border: 1px solid $gray;
background: $core-login-box-background-color;
border: 1px solid $core-login-box-background-border;
color: $core-login-box-text-color;
}
.core-sitename, .core-siteurl {
@if $core-fixed-url { display: none; }
}
@if $core-login-button-outline {
.button-md.button-default-md {
@extend .button-md-light;
}
}
@if $core-login-loading-color {
.core-loading-container {
color: $core-login-loading-color;
.spinner circle, .spinner line {
stroke: $core-login-loading-color;
}
}
}
.list .core-username {
&.item-md {
@include padding-horizontal($item-md-padding-left, $content-padding);

29
src/core/login/pages/site/site.scss
View File

@ -1,7 +1,6 @@
page-core-login-site {
.content {
background: -webkit-radial-gradient(white, $gray-light);
background: radial-gradient(white, $gray-light);
.scroll-content {
background: $core-login-page-background-color;
}
img.login-logo {
@ -12,11 +11,29 @@ page-core-login-site {
.box {
padding: 16px;
margin: 8px;
background: $white;
border: 1px solid $gray;
background: $core-login-box-background-color;
border: 1px solid $core-login-box-background-border;
color: $core-login-box-text-color;
}
@if $core-login-button-outline {
.button-md.button-default-md {
@extend .button-md-light;
}
}
@if $core-login-loading-color {
.core-loading-container {
color: $core-login-loading-color;
.spinner circle, .spinner line {
stroke: $core-login-loading-color;
}
}
}
.item-input:last-child {
margin-bottom: 20px;
}
}
}

61
src/core/mainmenu/pages/more/more.scss
View File

@ -1,3 +1,64 @@
page-core-mainmenu-more {
$core-more-icon: $gray-darker !default;
$core-more-background-ios: $list-ios-background-color !default;
$core-more-background-md: $list-md-background-color !default;
$core-more-background-wp: $item-wp-body-background-color !default;
$core-more-divider-ios: $item-ios-divider-background !default;
$core-more-divider-md: $item-md-divider-background !default;
$core-more-divider-wp: $item-wp-divider-background !default;
$core-more-border-ios: $list-ios-border-color !default;
$core-more-border-md: $list-md-border-color !default;
$core-more-border-wp: $list-wp-border-color !default;
$core-more-color-ios: $list-ios-text-color!default;
$core-more-color-md: $list-md-text-color !default;
$core-more-color-wp: $item-wp-body-text-color !default;
.item-block {
&.item-ios, &.item-ios p {
background-color: $core-more-background-ios;
color: $core-more-color-ios;
.item-inner {
border-bottom: $hairlines-width solid $core-more-border-ios;
}
}
&.item-md, &.item-md p {
background-color: $core-more-background-md;
color: $core-more-color-md;
.item-inner {
border-bottom: 1px solid $core-more-border-md;
}
}
&.item-wp, &.item-wp p {
background-color: $core-more-background-wp;
color: $core-more-color-wp;
.item-inner {
border-bottom: 1px solid $core-more-border-wp;
}
}
}
ion-icon {
color: $core-more-icon;
}
.item-divider {
&.item-ios {
background-color: $core-more-divider-ios;
}
&.item-md {
background-color: $core-more-divider-md;
border-bottom: $core-more-border-md;
}
&.item-wp {
background-color: $core-more-divider-wp;
}
}
}

133
src/theme/variables.scss
View File

@ -23,33 +23,39 @@ $gray-lighter: #f5f5f5;
$white: #ffffff; // Background, reversed text.
$blue: #0064d2; // Link, background.
$blue-light: mix($blue, white, 20%); // Background.
$blue-dark: darken($blue, 10%);
$turquoise: #007982; // Accent.
$turquoise-light: mix($turquoise, white, 20%); // Background.
$turquoise-dark: darken($turquoise, 10%);
$green: #5e8100; // Accent.
$green-light: mix($green, white, 20%);
$green-dark: darken($green, 10%);
$red: #cb3d4d;
$red-light: mix($red, white, 20%);
$red-dark: darken($red, 10%);
$orange: #f98012; // Accent (never text).
$orange-light: lighten($orange, 10%);
$yellow: #fbad1a; // Accent (never text).
$yellow-light: mix($yellow, white, 20%);
$yellow-dark: mix($yellow, black, 40%);
$core-color: $orange;
$core-color: $orange;
$core-color-light: lighten($core-color, 10%);
$core-color-dark: darken($core-color, 10%);
// Branded apps customization
// --------------------------------------------------
@import "bmma";
$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7;
$blue-light: mix($blue, white, 20%) !default; // Background.
$blue-dark: darken($blue, 10%) !default;
$turquoise-light: mix($turquoise, white, 20%) !default; // Background.
$turquoise-dark: darken($turquoise, 10%) !default;
$green-light: mix($green, white, 20%) !default;
$green-dark: darken($green, 10%) !default;
$red-light: mix($red, white, 20%) !default;
$red-dark: darken($red, 10%) !default;
$orange-light: lighten($orange, 10%) !default;
$yellow-light: mix($yellow, white, 20%) !default;
$yellow-dark: mix($yellow, black, 40%) !default;
$core-color-light: lighten($core-color, 10%) !default;
$core-color-dark: darken($core-color, 10%) !default;
$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default;
// Shared Variables
// --------------------------------------------------
@ -58,11 +64,9 @@ $core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #098
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/theming/overriding-ionic-variables/
$toolbar-background: $core-color;
$toolbar-background: $core-color !default;
$content-padding: 10px;
// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
@ -83,52 +87,54 @@ $colors: (
info: $blue
);
$text-color: $black;
$link-color: $blue;
$background-color: $gray-light;
$subdued-text-color: $gray-darker;
$text-color: $black !default;
$link-color: $blue !default;
$background-color: $gray-light !default;
$subdued-text-color: $gray-darker !default;
$core-warning-color: colors($colors, warning) !default; // yellow.
$core-success-color: colors($colors, success) !default; // green.
$core-info-color: colors($colors, info) !default; // / blue.
$core-error-color: colors($colors, alert) !default; // Red.
$list-background-color: $white;
$list-background-color: $white !default;
$tabs-background: $gray-darker;
$tabs-background: $gray-darker !default;
$tabs-border-color: #b2b2b2 !default;
$tabs-tab-color-active: $core-color;
$tabs-tab-color-inactive: $white;
$tabs-tab-color-active: $core-color !default;
$tabs-tab-color-inactive: $white !default;
$text-input-highlight-color-valid: $green;
$text-input-highlight-color-invalid: $red;
$text-input-highlight-color-valid: $green !default;
$text-input-highlight-color-invalid: $red !default;
$button-md-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) ;
$refresher-icon-color: $core-color;
$refresher-icon-color: $core-color !default;
// Moodle Mobile variables
// --------------------------------------------------
// Variables copied from Ionic 1.
$item-icon-accessory-color: #ccc !default;
$item-icon-accessory-font-size: 16px !default;
// Init screen.
$core-color-init-screen: #ff5c00;
$core-color-init-screen-alt: #ff7600;
$core-init-screen-spinner-color: $white;
$core-init-screen-logo-width: 60%;
$core-init-screen-logo-max-width: 300px;
$core-color-init-screen: #ff5c00 !default;
$core-color-init-screen-alt: #ff7600 !default;
$core-init-screen-spinner-color: $white !default;
$core-init-screen-logo-width: 60% !default;
$core-init-screen-logo-max-width: 300px !default;
$core-fixed-url: false;
$core-fixed-url: false !default;
$core-loading-spinner-color: $core-color !default;
$core-spinner-color: $core-color !default;
$core-button-outline-background-color: $white !default;
// Branded apps customization
// --------------------------------------------------
@import "bmma";
// Login.
$core-login-page-background-color: radial-gradient(white, $gray-light) !default;
$core-login-box-background-color: $white !default;
$core-login-box-background-border: $gray !default;
$core-login-box-text-color: $text-color !default;
$core-login-button-outline: false !default;
$core-login-loading-color: false !default;
// App iOS Variables
// --------------------------------------------------
@ -137,10 +143,10 @@ $core-fixed-url: false;
$text-input-ios-show-focus-highlight: false;
$core-text-input-ios-show-highlight: false;
$item-ios-avatar-size: 54px;
$loading-ios-spinner-color: $core-color;
$spinner-ios-ios-color: $core-color;
$loading-ios-spinner-color: $core-loading-spinner-color;
$spinner-ios-ios-color: $core-spinner-color;
$tabs-ios-tab-color-inactive: $tabs-tab-color-inactive;
$button-ios-outline-background-color: $white;
$button-ios-outline-background-color: $core-button-outline-background-color;
$toolbar-ios-height: 44px + 15;
// App Material Design Variables
@ -151,10 +157,10 @@ $text-input-md-show-focus-highlight: false;
$core-text-input-md-show-highlight: true;
$item-md-detail-push-show: true;
$item-md-avatar-size: 54px;
$loading-md-spinner-color: $core-color;
$spinner-md-crescent-color: $core-color;
$loading-md-spinner-color: $core-loading-spinner-color;
$spinner-md-crescent-color: $core-spinner-color;
$tabs-md-tab-color-inactive: $tabs-tab-color-inactive;
$button-md-outline-background-color: $white;
$button-md-outline-background-color: $core-button-outline-background-color;
// App Windows Variables
@ -164,10 +170,10 @@ $button-md-outline-background-color: $white;
$text-input-wp-show-focus-highlight: true;
$item-wp-detail-push-show: true;
$item-wp-avatar-size: 54px;
$loading-wp-spinner-color: $core-color;
$spinner-wp-circles-color: $core-color;
$loading-wp-spinner-color: $core-loading-spinner-color;
$spinner-wp-circles-color: $core-spinner-color;
$tabs-wp-tab-color-inactive: $tabs-tab-color-inactive;
$button-wp-outline-background-color: $white;
$button-wp-outline-background-color: $core-button-outline-background-color;
// App Theme
@ -201,12 +207,15 @@ $button-wp-outline-background-color: $white;
$item-media-width: 32px !default;
$item-media-height: 32px !default;
$core-top-tabs-background: $white;
$core-top-tabs-color: $gray-dark;
$core-top-tabs-border: $gray;
$core-top-tabs-color-active: $core-color;
$core-top-tabs-background: $white !default;
$core-top-tabs-color: $gray-dark !default;
$core-top-tabs-border: $gray !default;
$core-top-tabs-color-active: $core-color !default;
$core-user-profile-communication-icons-color: $core-color;
$core-splitview-selected: $core-color-light !default;
$core-progressbar-color: $core-color-light !default;
$core-user-profile-communication-icons-color: $core-color !default;
$core-rte-min-height: 80px;