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

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

@ -55,6 +55,10 @@
justify-content: center;
}
h1 {
margin-top: 0px;
}
}
: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] {
box-shadow: var(--drop-shadow-top, none);
clip-path: inset(-8px 0px 0px 0px); // Only show shadow at top.
}
[collapsible-footer] {
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-top: 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-rgb: #{$text-color-rgb};