Drawer styling: Adjust height, shadow, speed

[ninetteadhikari]

What is the Purpose?

Adjust styling for Drawer component:

• Lower drawer height
• Change box shadow to a lighter shade
• Increase animation speed to make the drawer appear slower

What was the approach?

Scoped CSS change

Are there any concerns to addressed further before or after merging this PR?

Still trying to figure out how to lighten the mask shadow layer behind the drawer. It is still too dark

Mentions?

@andrewtpham @michaelbukachi

Issue(s) affected?

None

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more). To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/hikaya/vue-ui-components/6lyq564xa ✅ Preview: https://vue-ui-components-git-drawer-styling.hikaya.now.sh

[Tanvir-rahman]

I was looking at the changes. Might be we can reduce some lines in style section using scss format. Well that's obviously in improvement part... 😄

[ninetteadhikari]

Hey. I was thinking along the lines of a dynamic prop for controlling the height.

hmm there is no Attribute for this in Element-UI so not sure how to expose the height 🤔 @Tanvir-rahman do you know how to do this? and if you recommendation to clean up css please let me know. Always happy to learn 🙂

[lupyana]

@ninetteadhikari

• to lighten the shadow for the drawer overide the .el-drawer class in css

  .el-drawer {
  -webkit-box-shadow: 0 8px 10px -5px rgba(0,0,0,0.2), 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgb(255, 255, 255);
  
  box-shadow: 0 8px 10px -5px rgba(0,0,0,0.2), 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12); */
  overflow: hidden;
  }

• To adjus the drawer background overide the background of the el-drawer__wrapper class in css. something like

  .el-drawer__wrapper {
  background: rgba(255,255,255, 0.4);

use the rgba values to dial in the shade you would like;

[Tanvir-rahman]

Hi @ninetteadhikari. Yeah we always are learning from each another. 😃 I think @lupyana introduced some. Also whenever we will write scss we can follow format like...

.a {
  prop: value;
  &:.c {
    prop: value
  }
 .b {
    prop: value;
 }
}

instead of .a { prop: value} .a.c { prop:value } .a .b { prop: value }

These are just some formatting. Nothing else..... 👍