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

MOBILE-3814 style: Sort some gray colors

main
Pau Ferrer Ocaña 2022-03-04 13:01:57 +01:00
parent d0b59ce92b
commit d6006ac5c3
6 changed files with 49 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/core/components/send-message-form/send-message-form.scss
View File

@ -1,4 +1,10 @@
:host {
--textarea-background: var(--core-input-background);
--textarea-color: var(--core-input-text);
--textarea-border-width: var(--core-input-border-width);
--textarea-border-color: var(--core-input-stroke);
--textarea-radius: var(--huge-radius);
form {
position: relative;
display: flex;
@ -11,14 +17,17 @@
appearance: none;
display: block;
width: 100%;
border: 0;
font-family: inherit;
background: var(--core-send-message-input-background);
color: var(--core-send-message-input-color);
border-radius: 21px;
background: var(--textarea-background);
color: var(--textarea-color);
border: var(--textarea-border-width) solid var(--textarea-border-color);
border-radius: var(--textarea-radius);
min-height: var(--a11y-min-target-size);
line-height: 20px;
padding: 9px 12px 11px;
margin: 5px 10px;
padding: 10px;
margin: 4px 8px;
resize: vertical;
}

10
src/core/features/mainmenu/pages/more/more.scss
View File

@ -1,13 +1,7 @@
ion-item {
--border-color: var(--core-more-item-border, var(--ion-border-color));
ion-icon {
color: var(--core-more-icon, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54));
}
}
:host-context(ion-app.ios) {
ion-item ion-icon {
color: var(--core-more-icon, inherit);
> ion-icon[slot] {
color: var(--core-more-icon) !important;
}
}

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

@ -9,7 +9,7 @@ $gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default; // Stroke
$gray-400: #ced4da !default;
$gray-500: #8f959e !default;
$gray-500: #8f959e !default; // Stroke on inputs
$gray-600: #6a737b !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
@ -46,8 +46,8 @@ $warning: $yellow !default;
$success: $green !default;
$info: $blue !default;
$light: $gray-100 !default;
$medium: $gray-600 !default;
$dark: $gray-800 !default;
$medium: $gray-700 !default;
$dark: $gray-900 !default;
$colors: (
primary: (light: $primary, dark: $primary),

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

@ -321,7 +321,8 @@ ion-button.button-outline {
--border-width: var(--core-input-border-width);
--border-color: var(--core-input-stroke);
--background: var(--core-input-background);
--color: var(--text-color);
--color: var(--core-input-text);
--ion-color-primary: var(--core-input-text);
}
ion-button.button-solid {
@ -371,7 +372,8 @@ ion-button.button.button-clear.button-has-icon-only {
}
ion-button.button.button-clear {
--color: var(--dark);
--color: var(--core-input-text);
--ion-color-primary: var(--core-input-text);
}
ion-button.button.button-solid,

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

@ -36,18 +36,20 @@
--text-color: #{$text-color-dark};
--ion-text-color: var(--text-color);
--ion-text-color-rgb: #{$text-color-dark-rgb};
--subdued-text-color: var(--gray-400);
--subdued-text-color: var(--medium);
--stroke: var(--gray-700);
--contrast-background: black;
--ion-card-color: var(--text-color);
--ion-card-background: var(--ion-item-background);
--ion-card-border-color: var(--stroke);
--ion-border-color: var(--stroke);
--ion-item-border-color: var(--stroke);
--core-input-stroke: var(--gray-700);
--core-input-stroke: var(--gray-600);
--core-input-text: var(--dark);
--core-input-background: var(--gray-900);
ion-content {
@ -68,7 +70,7 @@
--core-link-color: var(--info-tint);
--core-header-toolbar-background: var(--gray-900);
--core-header-toolbar-color: var(--white);
--core-header-toolbar-color: var(--text-color);
--core-header-toolbar-border-color: var(--stroke);
--core-tabs-background: var(--gray-800);
@ -80,10 +82,15 @@
--core-progressbar-text-color: var(--gray-100);
--ion-item-background: #{$ion-item-background-dark};
--ion-item-icon-color: var(--medium);
--ion-item-detail-icon-color: var(--dark);
--core-more-icon: var(--ion-item-icon-color);
--item-divider-background: var(--ion-item-background);
--item-divider-color: var(--text-color);
--spacer-background: var(--gray-700);
--ion-searchbar-background: var(--ion-background-color);
--ion-searchbar-border-color: var(--core-input-stroke);
--ion-searchbar-color: var(--text-color);
@ -91,7 +98,7 @@
--core-search-box-background: var(--ion-background-color);
--core-search-box-border-color: var(--core-input-stroke);
--core-search-box-color: var(--text-color);
--core-search-box-color: var(--core-input-text);
--core-combobox-background: var(--core-input-background);
--core-combobox-color: var(--text-color);

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

@ -69,7 +69,8 @@
--ion-background-color-rgb: #{$background-color-rgb};
--ion-border-color: var(--stroke);
--core-input-stroke: var(--gray-400);
--core-input-stroke: var(--gray-500);
--core-input-text: var(--dark);
--core-input-background: var(--ion-background-color);
--core-input-radius: var(--small-radius);
--core-input-border-width: 1px;
@ -86,7 +87,7 @@
--ion-text-color: var(--text-color);
--ion-text-color-rgb: #{$text-color-rgb};
--subdued-text-color: var(--gray-700);
--subdued-text-color: var(--medium);
--ion-card-color: var(--text-color);
--ion-card-vertical-margin: 10px;
@ -112,7 +113,7 @@
}
--core-bottom-tabs-background: var(--white);
--core-bottom-tabs-color: var(--gray-700);
--core-bottom-tabs-color: var(--dark);
--core-bottom-tabs-color-selected: var(--primary);
--core-bottom-tabs-background-selected: transparent;
--core-bottom-tabs-badge-color: var(--primary);
@ -135,7 +136,7 @@
--core-header-toolbar-background: var(--white);
--core-header-toolbar-border-width: 0px;
--core-header-toolbar-border-color: var(--stroke);
--core-header-toolbar-color: var(--gray-900);
--core-header-toolbar-color: var(--text-color);
--core-header-toolbar-height: 48px;
html.ios {
--core-header-toolbar-height: 48px;
@ -191,10 +192,10 @@
--core-search-box-background: var(--ion-background-color);
--core-search-box-border-color: var(--core-input-stroke);
--core-search-box-border-radius: var(--core-input-radius);
--core-search-box-color: var(--text-color);
--core-search-box-color: var(--core-input-text);
--core-combobox-background: var(--core-input-background);
--core-combobox-color: var(--text-color);
--core-combobox-color: var(--core-input-text);
--core-combobox-border-color: var(--core-input-stroke);
--core-combobox-border-width: var(--core-input-border-width);
--core-combobox-radius: var(--core-input-radius);
@ -255,13 +256,19 @@
--core-progressbar-background: var(--primary-tint);
--ion-item-background: #{$ion-item-background};
--ion-item-detail-icon-color: var(--medium);
--ion-item-icon-color: var(--medium);
--ion-item-detail-icon-color: var(--dark);
--ion-item-detail-icon-font-size: 20px;
--ion-item-detail-icon-opacity: 1;
--core-more-icon: var(--ion-item-icon-color);
ion-item {
--detail-icon-color: var(--ion-item-detail-icon-color);
--detail-icon-font-size: var(--ion-item-detail-icon-font-size);
--detail-icon-opacity: var(--ion-item-detail-icon-opacity);
> ion-icon[slot] {
color: var(--ion-item-icon-color);
}
}
--item-divider-min-height: calc(var(--a11y-min-target-size) + 8px);
@ -309,9 +316,6 @@
--core-large-avatar-size: 90px;
--core-avatar-size: var(--a11y-min-target-size);
--core-send-message-input-background: var(--gray-200);
--core-send-message-input-color: var(--gray-900);
--core-courseimage-on-course-size: 72px;
--core-courseimage-radius: var(--medium-radius);