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

MOBILE-3947 styles: Improve drop shadows

main
Pau Ferrer Ocaña 2023-11-14 11:56:13 +01:00
parent feb8a78ecc
commit 258d12f4d0
5 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,10 +3,8 @@
:host { :host {
--menu-min-width: 270px; --menu-min-width: 270px;
--menu-max-width: 28%; --menu-max-width: 28%;
--menu-box-shadow: var(--core-menu-box-shadow-end); --menu-box-shadow: var(--drop-shadow-end);
--menu-z: 2; --menu-z: 2;
--menu-border-width: 1px;
--menu-border-color: var(--stroke);
--menu-display: flex; --menu-display: flex;
--content-display: block; --content-display: block;
--content-outlet-display: none; --content-outlet-display: none;
@ -35,16 +33,17 @@
} }
.menu { .menu {
box-shadow: var(--menu-box-shadow);
z-index: var(--menu-z); z-index: var(--menu-z);
display: var(--menu-display); display: var(--menu-display);
flex-shrink: 0; flex-shrink: 0;
order: -1; order: -1;
width: 100%; width: 100%;
@include border-start(0);
@include border-end(var(--menu-border-width), solid, var(--menu-border-color));
min-width: var(--menu-min-width); min-width: var(--menu-min-width);
max-width: var(--menu-max-width); max-width: var(--menu-max-width);
&::part(scroll) {
box-shadow: var(--menu-box-shadow);
}
} }
.content-outlet { .content-outlet {
@ -71,7 +70,6 @@
--menu-max-width: 100%; --menu-max-width: 100%;
--content-display: none; --content-display: none;
--content-placeholder-display: none; --content-placeholder-display: none;
--menu-border-width: 0px;
--menu-box-shadow: none; --menu-box-shadow: none;
--menu-z: 0px; --menu-z: 0px;
--selected-item-border-width: 0px; --selected-item-border-width: 0px;
@ -80,7 +78,6 @@
:host(.content-only) { :host(.content-only) {
--menu-display: none; --menu-display: none;
--menu-border-width: 0px;
} }
:host(.outlet-activated) { :host(.outlet-activated) {

4
src/core/features/usertours/components/user-tour/user-tour.scss
View File

@ -55,6 +55,10 @@
justify-content: center; justify-content: center;
} }
h1 {
margin-top: 0px;
}
} }
:host-context(html.dark) { :host-context(html.dark) {

BIN
src/tests/behat/snapshots/it-navigates-properly-in-pages-with-a-split-view-component-navigate-in-grades-tab-on-tablet_14.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 33 KiB

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

@ -1720,6 +1720,7 @@ ion-grid.core-no-grid > ion-row {
.core-footer-shadow [collapsible-footer] { .core-footer-shadow [collapsible-footer] {
box-shadow: var(--drop-shadow-top, none); box-shadow: var(--drop-shadow-top, none);
clip-path: inset(-8px 0px 0px 0px); // Only show shadow at top.
} }
[collapsible-footer] { [collapsible-footer] {
transition: box-shadow 0.5s; transition: box-shadow 0.5s;

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

@ -86,6 +86,8 @@ html {
--drop-shadow-color: 0, 0, 0, 0.5; --drop-shadow-color: 0, 0, 0, 0.5;
--drop-shadow-top: 0px 2px 5px rgba(var(--drop-shadow-color)); --drop-shadow-top: 0px 2px 5px rgba(var(--drop-shadow-color));
--drop-shadow-bottom: 0px -2px 5px rgba(var(--drop-shadow-color)); --drop-shadow-bottom: 0px -2px 5px rgba(var(--drop-shadow-color));
--drop-shadow-end: -2px 0px 5px rgba(var(--drop-shadow-color));
--drop-shadow-start: 2px 0px 5px rgba(var(--drop-shadow-color));
--ion-text-color: var(--text-color); --ion-text-color: var(--text-color);
--ion-text-color-rgb: #{$text-color-rgb}; --ion-text-color-rgb: #{$text-color-rgb};