Change modal box shadow

[Posandu]

Please can you change the box shadow of the modal component to this

.modal-content {
    border-radius: 2px;
    background-color: #ffffff;
    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),0px 24px 38px 3px rgba(0, 0, 0, 0.14),0px 9px 46px 8px rgba(0,0,0,.12);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    outline: 0;
    pointer-events: auto;
    position: relative;
    vertical-align: baseline;
    width: 100%;
}

Before

After adding the code

The 2nd one is the material design modal. See it https://material.io/inline-tools/dialog/

[djibe]

Hi, as stated in _dialog.scss, shadows come from Material Components for the web: https://material-components.github.io/material-components-web-catalog/#/component/elevation

[Posandu]

Can you add the box shadow that is officially in material design ?

[djibe]

OK I will. Can you provide me links to material.io components to check all Components shadows ?

[Posandu]

Thanks for responding , You can see all the components Here

[djibe]

Thx I know :D

[Posandu]

Did you try adding this to your search ? Created by Google https://programmablesearchengine.google.com/cse/create/new

[Posandu]

closing the issue thanks !

[djibe]

Hi, you can keep it open. I will change the shadows tonight. Then I'll work on bringing back the search menu.

[djibe]

Well, didn't find any diffrence between my modals and Google's ones.

.modal-content {
    box-shadow: 0 24px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 12%), 0 11px 15px -7px rgb(0 0 0 / 20%);
}

and

.mdc-dialog__surface {
    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0,0,0,.12);
}