Topic: why .z-depth-1 is activated on all components

JPS Disseny free asked 5 years ago

Hello, I think there is an error in the mdb.css file: all  elements have a default ".z-depth-1" shadow. I think, by default it must be .z-depth-0. Look the code bellow:
.z-depth-0, .hoverable, .modal-dialog.cascading-modal.modal-avatar .modal-header {
 box-shadow: none; }

.z-depth-1, .jumbotron, .btn, .btn.disabled:active, .btn.disabled:focus, .btn.disabled:hover, .btn:disabled:active, .btn:disabled:focus, .btn:disabled:hover, .card, .navbar, .pagination .page-link, .badge, .modal-dialog.cascading-modal .modal-c-tabs .nav-tabs, .modal-dialog.modal-notify .modal-header, .md-form input[type=text].input-alternate,
.md-form input[type=password].input-alternate,
.md-form input[type=email].input-alternate,
.md-form input[type=url].input-alternate,
.md-form input[type=time].input-alternate,
.md-form input[type=date].input-alternate,
.md-form input[type=datetime-local].input-alternate,
.md-form input[type=tel].input-alternate,
.md-form input[type=number].input-alternate,
.md-form input[type=search-md].input-alternate,
.md-form input[type=search].input-alternate,
.md-form, .media .media-left img {
 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

Jakub Strebeyko staff answered 5 years ago

Hi there,

Thanks for contributing to our support board! The shadow as default is no mistake - it is a feature of material design that aligns with an idea, that User Interface elements should resemble real-life objects, including their 3D-ness. Adding it as default was necessary for allowing consistent overwriting of the values.

With Best Regards,

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No