Quasar: Can't remove toolbar shadow

[lhy1149]

in my template:

class="toolbar no-shadow"
or
class="toolbar shadow-0"

the toolbar still has shadow, change 'no-shadow' to 'inset-shadow' take effect

[lhy1149]

figure out:

shadow caused by q-layout, so add 'no-shadow' to q-layout class

[lhy1149]

adding no-shadow to q-layout has no effect, use this:

.layout-header {
box-shadow: none;
}

this maybe a bug, cause header slot is generated by quasar-framework

[lhy1149]

same problem on q-search:

<q-search :model.sync="search" class="primary no-shadow"></q-search> has no effect

.q-search-input { box-shadow: none; } works

[smolinari]

This is all new to me, but there are the Stylus variables you can also alter, AFAIK.

http://quasar-framework.org/api/css-stylus-variables.html

Search for "shadow".

For instance: $layout-header-shadow

Scott

[rstoenescu]

$layout-header-shadow and $layout-footer-shadow. Set them to none.

[Narmer23]

Sorry to necropost, but I'm experiencing the same problem with modal footers and headers. It is true that setting $layout-header/footer-shadow to none removes the shadow, but it removes it everywhere, while what it should be is to have the shadow everywhere BUT on desktop modals, as per Material Design specs.

For refererence cfr Confirmation Dialogs (which can be seen as desktop modals, no shadow) with Full Screen Dialog (for mobile, with shadows).

Neverthless everything can be achieved with some stylus/CSS, although a bit messy.

[rstoenescu]

Dropping a short note: v1 makes these kind of problems non-existent.

[Narmer23]

Dropping a short note: v1 makes these kind of problems non-existent.

Looking forward for v1.0 then!! Rumors say that the RC1 will be available this week... Seriously, the wait is thrilling me! :tada: :tada:

[tpoxa]

For v1 its $layout-shadow = "none"

[rstoenescu]

v1 layout has some header/footer props now (bordered, elevated).. no need to change CSS