Styling x-tabbar-tab about brick

[ldoubleuz]

Tabbar tabs actually have a default background gradient, so you'll also need to add background-image: none to your x-tabbar-tab rules.

x-tabbar-tab {
    color: #fff;
    background-color: #7cc4e7;
    background-image: none;
}

does not make any difference!

Maybe I'm doing something wrong in the first place. Here is how I'm using Brick

<x-layout>
    <header>
        <div id="header"></div>
    </header>
    <section>
        <x-flipbox>
            <div id="map-canvas">
                <button id="fullscreen">Fullscreen Mode</button>
            </div>
            <video id="video" autoplay></video>
        </x-flipbox>
    </section>
    <footer>
        <x-tabbar>
            <x-tabbar-tab target-selector="x-flipbox > *:first-child">
                <x-iconbutton>Map</x-iconbutton>
            </x-tabbar-tab>
            <x-tabbar-tab target-selector="x-flipbox > *:last-child">
                <x-iconbutton>Live</x-iconbutton>
            </x-tabbar-tab>
        </x-tabbar>
    </footer>
</x-layout>

[ldoubleuz]

Ah, I think I see the issue. Styling the tabbar tab only styles the tab element, not the contents of the tab. Since you have an iconbutton in the tab, that means you'll need to apply styling to the iconbutton, as it has a similar default gradient background.

I have tried that already and it did not work either. Even if I just add

<div>Map</div>

to x-tabbar-tab I still get the default background..

[potch]

Could you send along the markup of the page you're seeing this issue on, to . Feel free to remove any sensitive markup that's not relevant to the issue.

I have posted all the relevant markup already here, please see the 4th post.

[ldoubleuz]

Are you quite sure this is the only markup you're using? I've taken the markup you've given me and am able to change the styles of the tabbar.

My markup: http://pastebin.com/YpnRuTTd

My results:

Does not work either.

Here is a link for the demo app

It is meant for smartphones but should work on your laptop too. Since it utilizes getUserMedia you need Android 4.x and FF Aurora or Nightly, same on your laptop. On the laptop it works also with Chrome Beta, but has an issue on Android, probably also related to Brick.

I downloaded a custom Brick .css and .js as you can see in the page source, maybe there is the issue.

[ldoubleuz]

I'm not really sure what you're trying, as I'm able to edit the CSS of x-iconbutton fine.

For example, in the Chrome developer tools, add background:red to the bottom of the x-iconbutton declaration, and you should see the tabs turn red. Are you completely unable to see this in all browsers, or just specific ones?

My bad, my custom .css got loaded first so this was the issue, sorry about that.