narvey/productivity-nkh
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(colors): improve inline edit elevation everywhere

Browse Source
This commit is contained in:
Johannes Millan 2019-08-23 20:19:52 +02:00
parent 528f3bf535
commit c9a83e725a
5 changed files with 28 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/features/tasks/task/task.component.scss
View File

@ -355,17 +355,11 @@ $z-time-btn-svg-wrapper: 5555;
bottom: 0;
left: 0;
content: '';
box-shadow: $shadow-edit-on-click;
opacity: 0;
z-index: -1;
pointer-events: none;
border-radius: $card-border-radius;
background: #fff;
@include darkTheme() {
background: $dark-theme-bg-lightest;
box-shadow: 0 0 4px 0 $dark-theme-bg-lightest, $whiteframe-shadow-13dp;
}
@include inlineEditElevation();
}

17
src/app/ui/inline-input/inline-input.component.scss
View File

@ -39,27 +39,26 @@ input {
transform: translate(-50%, -50%) scaleX(0);
opacity: 0;
//transition: $transition-fast;
box-shadow: $shadow-edit-on-click;
background: #fff;
color: $light-theme-text-color;
padding: $s/2 $s/2;
border: 1px solid black;
text-align: center;
font-size: 14px;
min-height: 100%;
@include inlineEditElevation();
//@include darkTheme() {
// background: $dark-theme-bg-lighter;
// border: 1px solid #ffffff;
// box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.8), $whiteframe-shadow-13dp;
//}
&.duration-input {
width: 100%;
min-width: 70px;
}
@include darkTheme() {
color: #fff;
background: $dark-theme-bg-lighter;
border: 1px solid #ffffff;
box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.8), $whiteframe-shadow-13dp;
}
:host:hover &,
&:focus {
opacity: 1;

1
src/styles/config/_shadows.scss
View File

@ -32,4 +32,3 @@ $header-inset-shadow: inset 0 -4px 4px rgba(0, 0, 0, $shadow-key-umbra-opacity);
$shadow-card-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
$shadow-bottom: 0 10px 6px -6px rgba(0, 0, 0, .3);
$shadow-bottom-boxed: #{$shadow-bottom}, 0 0 1px rgba(0, 0, 0, .3);
$shadow-edit-on-click: 0 0 4px 0 rgba(0, 0, 0, 0.8), $whiteframe-shadow-13dp;

18
src/styles/mixins/_inline-edit-elevation.scss Normal file
View File

@ -0,0 +1,18 @@
//$shadow-edit-on-click-light: 0 0 4px 0 rgba(0, 0, 0, 0.8), $whiteframe-shadow-14dp;
//$shadow-edit-on-click-dark: 0 0 4px 0 $dark-theme-bg-lightest, $whiteframe-shadow-14dp;
$shadow-edit-on-click-dark: $whiteframe-shadow-15dp;
$shadow-edit-on-click-light: $whiteframe-shadow-15dp;
@mixin inlineEditElevation {
border-radius: $card-border-radius;
background: #fff;
box-shadow: $shadow-edit-on-click-light;
border: none;
color: $light-theme-text-color-most-intense;
@include darkTheme() {
background: $dark-theme-bg-lightest;
box-shadow: $shadow-edit-on-click-dark;
color: $dark-theme-text-color-most-intense;
}
}

1
src/styles/mixins/_mixins.scss
View File

@ -5,6 +5,7 @@
@import "hardware";
@import "pseudo";
@import "scroll";
@import "inline-edit-elevation";
@import "is-touch-device";
@import "responsive-ratio";
@import "media-queries";