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

MOBILE-3636 core: Improvements on some theme styles

main
Pau Ferrer Ocaña 2021-02-23 08:53:24 +01:00
parent f57abbd102
commit d8009dac99
10 changed files with 263 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,5 @@
@import "~theme/globals";
:host {
.course-icon {
color: white;
@ -10,35 +12,10 @@
transition: all 50ms ease-in-out;
}
ion-icon[course-color="0"] {
color: var(--core-course-color-0);
}
ion-icon[course-color="1"] {
color: var(--core-course-color-1);
}
ion-icon[course-color="2"] {
color: var(--core-course-color-2);
}
ion-icon[course-color="3"] {
color: var(--core-course-color-3);
}
ion-icon[course-color="4"] {
color: var(--core-course-color-4);
}
ion-icon[course-color="5"] {
color: var(--core-course-color-5);
}
ion-icon[course-color="6"] {
color: var(--core-course-color-6);
}
ion-icon[course-color="7"] {
color: var(--core-course-color-7);
}
ion-icon[course-color="8"] {
color: var(--core-course-color-8);
}
ion-icon[course-color="9"] {
color: var(--core-course-color-9);
@for $i from 0 to length($core-course-image-background) {
ion-icon[course-color="#{$i}"] {
color: nth($core-course-image-background, $i + 1);
}
}
ion-avatar {

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

@ -7,35 +7,10 @@
align-self: stretch;
height: calc(100% - 20px);
&[course-color="0"] .core-course-thumb {
background: var(--core-course-color-0);
}
&[course-color="1"] .core-course-thumb {
background: var(--core-course-color-1);
}
&[course-color="2"] .core-course-thumb {
background: var(--core-course-color-2);
}
&[course-color="3"] .core-course-thumb {
background: var(--core-course-color-3);
}
&[course-color="4"] .core-course-thumb {
background: var(--core-course-color-4);
}
&[course-color="5"] .core-course-thumb {
background: var(--core-course-color-5);
}
&[course-color="6"] .core-course-thumb {
background: var(--core-course-color-6);
}
&[course-color="7"] .core-course-thumb {
background: var(--core-course-color-7);
}
&[course-color="8"] .core-course-thumb {
background: var(--core-course-color-8);
}
&[course-color="9"] .core-course-thumb {
background: var(--core-course-color-9);
@for $i from 0 to length($core-course-image-background) {
&[course-color="#{$i}"] .core-course-thumb {
background: nth($core-course-image-background, $i + 1);
}
}
.core-course-thumb {

0
src/theme/format-text.scss → src/theme/components/format-text.scss
View File

92
src/theme/globals.mixins.ionic.scss
View File

@ -6,6 +6,98 @@
* https://github.com/ionic-team/ionic-framework/blob/master/core/src/themes/ionic.mixins.scss
*/
// Gets the active color's css variable from a variation. Alpha is optional.
// --------------------------------------------------------------------------------------------
// Example usage:
// current-color(base) => var(--ion-color-base)
// current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
// --------------------------------------------------------------------------------------------
@function current-color($variation, $alpha: null) {
@if $alpha == null {
@return var(--ion-color-#{$variation});
} @else {
@return rgba(var(--ion-color-#{$variation}-rgb), #{$alpha});
}
}
// Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
// --------------------------------------------------------------------------------------------
// Example usage:
// ion-color(primary, base) => var(--ion-color-primary, #3880ff)
// ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
// ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
// --------------------------------------------------------------------------------------------
@function ion-color($name, $variation, $alpha: null, $rgb: null) {
$values: map-get($colors, $name);
$value: map-get($values, $variation);
$variable: --ion-color-#{$name}-#{$variation};
@if ($variation == base) {
$variable: --ion-color-#{$name};
}
@if ($alpha) {
$value: color-to-rgb-list($value);
@return rgba(var(#{$variable}-rgb, $value), $alpha);
}
@if ($rgb) {
$value: color-to-rgb-list($value);
$variable: #{$variable}-rgb;
}
@return var(#{$variable}, $value);
}
// Mixes a color with black to create its shade.
// --------------------------------------------------------------------------------------------
@function get-color-shade($color) {
@return mix(#000, $color, 12%);
}
// Mixes a color with white to create its tint.
// --------------------------------------------------------------------------------------------
@function get-color-tint($color) {
@return mix(#fff, $color, 10%);
}
// Converts a color to a comma separated rgb.
// --------------------------------------------------------------------------------------------
@function color-to-rgb-list($color) {
@return #{red($color)},#{green($color)},#{blue($color)};
}
// Ionic Colors
// --------------------------------------------------
// Generates the color classes and variables based on the
// colors map
@mixin generate-color($color-name) {
$value: map-get($colors, $color-name);
$base: map-get($value, base);
$contrast: map-get($value, contrast);
$shade: map-get($value, shade);
$tint: map-get($value, tint);
--ion-color-#{$color-name}: #{$base};
--ion-color-#{$color-name}-rgb: #{color-to-rgb-list($base)};
--ion-color-#{$color-name}-contrast: #{$contrast};
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)};
--ion-color-#{$color-name}-shade: #{$shade};
--ion-color-#{$color-name}-tint: #{$tint};
.ion-color-#{$color-name} {
--ion-color: #{$base};
--ion-color-rgb: #{color-to-rgb-list($base)};
--ion-color-contrast: #{$contrast};
--ion-color-contrast-rgb: #{color-to-rgb-list($contrast)};
--ion-color-shade: #{$shade};
--ion-color-tint: #{$tint};
}
}
@mixin input-cover() {
@include position(0, null, null, 0);
@include margin(0);

4
src/theme/globals.scss
View File

@ -4,7 +4,7 @@
* Place here the different files you should import to use global variables.
*/
@import "./globals.custom.scss";
@import "./globals.variables.scss";
@import "./globals.mixins.scss";
@import "./globals.mixins.ionic.scss";
@import "./globals.custom.scss";
@import "./globals.variables.scss";

90
src/theme/globals.variables.scss
View File

@ -51,6 +51,96 @@ $subdued-text-color: $gray-darker !default;
$core-online-color: #5cb85c !default;
$primary: $core-color !default;
$secondary: $blue !default;
$tertiary: $turquoise !default;
$danger: $red !default;
$warning: $yellow !default;
$success: $green !default;
$info: $blue !default;
$light: $gray-lighter !default;
$medium: $gray-light !default;
$dark: $black !default;
$colors: (
primary: (
base: $primary,
contrast: #fff,
shade: get-color-shade($primary),
tint: get-color-tint($primary)
),
secondary: (
base: $secondary,
contrast: #fff,
shade: get-color-shade($secondary),
tint: get-color-tint($secondary)
),
tertiary: (
base: $tertiary,
contrast: #fff,
shade: get-color-shade($tertiary),
tint: get-color-tint($tertiary)
),
success: (
base: $success,
contrast: #fff,
shade: get-color-shade($success),
tint: get-color-tint($success)
),
warning: (
base: $warning,
contrast: #000,
shade: get-color-shade($warning),
tint: get-color-tint($warning)
),
danger: (
base: $danger,
contrast: #fff,
shade: get-color-shade($danger),
tint: get-color-tint($danger)
),
info: (
base: $info,
contrast: #fff,
shade: get-color-shade($info),
tint: get-color-tint($info)
),
light: (
base: $light,
contrast: #000,
shade: get-color-shade($light),
tint: get-color-tint($light)
),
medium: (
base: $medium,
contrast: #fff,
shade: get-color-shade($medium),
tint: get-color-tint($medium)
),
dark: (
base: $dark,
contrast: #fff,
shade: get-color-shade($dark),
tint: get-color-tint($dark)
)
) !default;
// Just swipe light and dark.
$colors-dark: (
primary: map-get($colors, primary),
secondary: map-get($colors, secondary),
tertiary: map-get($colors, tertiary),
success: map-get($colors, success),
warning: map-get($colors, warning),
danger: map-get($colors, danger),
info: map-get($colors, info),
light: map-get($colors, dark),
medium: map-get($colors, medium),
dark: map-get($colors, light),
) !default;
$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default;
/*
* Layout Breakpoints
*

111
src/theme/theme.base.scss
View File

@ -204,34 +204,6 @@ ion-toolbar {
}
}
.item.core-primary-item,
.item.core-info-item,
.item.core-secondary-item,
.item.core-tertiary-item,
.item.core-success-item,
.item.core-warning-item,
.item.core-danger-item {
--inner-border-width: 0 0 3px 0;
}
.item.core-primary-item {
--border-color: var(--ion-color-primary);
}
.item.core-info-item,
.item.core-secondary-item {
--border-color: var(--ion-color-secondary);
}
.item.core-tertiary-item {
--border-color: var(--ion-color-tertiary);
}
.item.core-success-item {
--border-color: var(--ion-color-success);
}
.item.core-warning-item {
--border-color: var(--ion-color-warning);
}
.item.core-danger-item {
--border-color: var(--ion-color-danger);
}
.item-dimmed {
opacity: 0.7;
--background: var(--gray-lighter);
@ -243,58 +215,36 @@ ion-toolbar {
}
// Card styles
@each $color-name, $value in $colors {
$value: map-get($colors, $color-name);
// Message cards.
ion-card.core-primary-card,
ion-card.core-info-card,
ion-card.core-secondary-card,
ion-card.core-tertiary-card,
ion-card.core-success-card,
ion-card.core-warning-card,
ion-card.core-danger-card {
border-bottom: 3px solid transparent;
ion-item::part(native) {
--inner-border-width: 0;
$base: map-get($value, base);
$contrast: map-get($value, contrast);
$shade: map-get($value, shade);
$tint: map-get($value, tint);
// Message cards.
ion-card.core-#{$color-name}-card {
border-bottom: 3px solid $base;
ion-item::part(native) {
--inner-border-width: 0;
}
ion-label {
white-space: normal !important;
}
ion-icon {
color: $base;
}
}
ion-label {
white-space: normal !important;
}
}
ion-card.core-primary-card {
border-bottom-color: var(--ion-color-primary);
ion-icon {
color: var(--ion-color-primary);
}
}
ion-card.core-info-card,
ion-card.core-secondary-card {
border-bottom-color: var(--ion-color-secondary);
ion-icon {
color: var(--ion-color-secondary);
}
}
ion-card.core-tertiary-card {
border-bottom-color: var(--ion-color-tertiary);
ion-icon {
color: var(--ion-color-tertiary);
}
}
ion-card.core-success-card {
border-bottom-color: var(--ion-color-success);
ion-icon {
color: var(--ion-color-success);
}
}
ion-card.core-warning-card {
border-bottom-color: var(--ion-color-warning);
ion-icon {
color: var(--ion-color-warning);
}
}
ion-card.core-danger-card {
border-bottom-color: var(--ion-color-danger);
ion-icon {
color: var(--ion-color-danger);
.item.core-#{$color-name}-item {
--inner-border-width: 0 0 3px 0;
--border-width: 0;
border-bottom: 3px solid $base !important;
ion-icon {
color: $base;
}
}
}
@ -338,9 +288,10 @@ img[alt] {
// Activity modules
.core-module-icon {
--size: 24px;
width: auto;
max-width: 24px;
max-height: 24px;
max-width: var(--size);
max-height: var(--size);
}
ion-item img.core-module-icon[slot="start"] {

16
src/theme/theme.dark.scss
View File

@ -37,19 +37,9 @@
--light: var(--black);
--dark: var(--gray-lighter);
--ion-color-light: var(--light);
--ion-color-light-rgb: 58,58,58;
--ion-color-light-contrast: #ffffff;
--ion-color-light-contrast-rgb: 255,255,255;
--ion-color-light-shade: #333333;
--ion-color-light-tint: #4e4e4e;
--ion-color-dark: var(--dark);
--ion-color-dark-rgb: 245,245,245;
--ion-color-dark-contrast: #000000;
--ion-color-dark-contrast-rgb: 0,0,0;
--ion-color-dark-shade: #d8d8d8;
--ion-color-dark-tint: #f6f6f6;
@each $color-name, $value in $colors-dark {
@include generate-color($color-name);
}
--ion-tab-bar-background: #1f1f1f;

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

@ -17,95 +17,53 @@
--white: #{$white};
--blue: #{$blue};
--blue-dark: #{$blue-dark};
--blue-light: #{$blue-light};
--blue-dark: #{$blue-dark};
--turquoise: #{$turquoise};
--turquoise-light: #{$turquoise-light};
--turquoise-dark: #{$turquoise-dark};
--green: #{$green};
--green-light: #{$green-light};
--green-dark: #{$green-dark};
--red: #{$red};
--red-light: #{$red-light};
--red-dark: #{$red-dark};
--orange: #{$orange};
--orange-light: #{$orange-light};
--yellow: #{$yellow};
--yellow-light: #{$yellow-light};
--yellow-dark: #{$yellow-dark};
--purple: #{$purple};
--core-color: #{$core-color};
--core-color: #{$core-color};
--core-color-light: #{$core-color-light};
--core-color-dark: #{$core-color-dark};
--core-online-color: #{$core-online-color};
// Named Color Variables
--primary: var(--core-color);
--secondary: var(--blue);
--tertiary: var(--turquoise);
--success: var(--green);
--danger: var(--red);
--warning: var(--yellow);
--primary: var(--primary);
--secondary: var(--secondary);
--tertiary: var(--tertiary);
--success: var(--success);
--danger: var(--danger);
--warning: var(--warning);
--info: var(--info);
--light: var(--gray-lighter);
--dark: var(--black);
--medium: var(--gray-light);
--light: var(--gray-lighter);
--primary: var(--core-color);
--ion-color-primary: var(--primary);
--ion-color-primary-rgb: 249,128,18;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #db7110;
--ion-color-primary-tint: #fa8d2a;
@each $color-name, $value in $colors {
@include generate-color($color-name);
}
--ion-color-secondary: var(--secondary);
--ion-color-secondary-rgb: 0,100,210;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-shade: #0058b9;
--ion-color-secondary-tint: #1a74d7;
--ion-color-tertiary: var(--tertiary);
--ion-color-tertiary-rgb: 0,121,130;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255,255,255;
--ion-color-tertiary-shade: #006a72;
--ion-color-tertiary-tint: #1a868f;
--ion-color-success: var(--success);
--ion-color-success-rgb: 94,129,0;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast-rgb: 255,255,255;
--ion-color-success-shade: #537200;
--ion-color-success-tint: #6e8e1a;
--ion-color-warning: var(--warning);
--ion-color-warning-rgb: 251,173,26;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0,0,0;
--ion-color-warning-shade: #dd9817;
--ion-color-warning-tint: #fbb531;
--ion-color-danger: var(--danger);
--ion-color-danger-rgb: 203,61,77;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-shade: #b33644;
--ion-color-danger-tint: #d0505f;
--ion-color-dark: var(--dark);
--ion-color-dark-rgb: 58,58,58;
--ion-color-dark-contrast: #ffffff;
--ion-color-dark-contrast-rgb: 255,255,255;
--ion-color-dark-shade: #333333;
--ion-color-dark-tint: #4e4e4e;
--ion-color-medium: var(--medium);
--ion-color-medium-rgb: 158,158,158;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0,0,0;
--ion-color-medium-shade: #8b8b8b;
--ion-color-medium-tint: #a8a8a8;
--ion-color-light: var(--light);
--ion-color-light-rgb: 245,245,245;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0,0,0;
--ion-color-light-shade: #d8d8d8;
--ion-color-light-tint: #f6f6f6;
--ion-text-color: var($text-color);
--ion-text-color: #{$text-color};
--ion-text-color-rgb: 58,58,58;
--ion-card-color: var(--ion-text-color);
@ -129,6 +87,7 @@
--background: var(--ion-statusbar-background);
ion-button {
--ion-toolbar-color: transparent;
--color: var(--custom-toolbar-color, var(--ion-color-primary-contrast));
}
ion-spinner {
@ -198,16 +157,6 @@
--core-login-background: var(--custom-login-background, var(--white));
--core-login-text-color: var(--custom-login-text-color, var(--black));
--core-course-color-0: var(--custom-course-color-0, #81ecec);
--core-course-color-1: var(--custom-course-color-1, #74b9ff);
--core-course-color-2: var(--custom-course-color-2, #a29bfe);
--core-course-color-3: var(--custom-course-color-3, #dfe6e9);
--core-course-color-4: var(--custom-course-color-4, #00b894);
--core-course-color-5: var(--custom-course-color-5, #0984e3);
--core-course-color-6: var(--custom-course-color-6, #b2bec3);
--core-course-color-7: var(--custom-course-color-7, #fdcb6e);
--core-course-color-8: var(--custom-course-color-9, #fd79a8);
--core-course-color-9: var(--custom-course-color-90, #6c5ce7);
--core-star-color: var(--custom-star-color, var(--core-color));
--core-large-avatar-size: var(--custom-large-avatar-size, 90px);

4
src/theme/theme.scss
View File

@ -17,7 +17,9 @@
@import "./theme.dark.scss";
@import "./theme.custom.scss";
@import "./theme.base.scss";
@import "./format-text.scss";
/* Components */
@import "./components/format-text.scss";
/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";