Topic: why .z-depth-1 is activated on all components
.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-item.active .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 textarea.md-textarea.input-alternate, .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);
}
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,
Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No