`.bar.bar-positive` and `.tabs-positive>.tabs, .tabs.tabs-positive` always blue

[leocaseiro]

Hi, I've noticed you're using the Ionic system for Nativescript which is pretty useful, however, there's a border blue on some elements with the .positive class that don't look nice.

Some screenshots bellow:

[rdlauer]

Good catch - but I'm actually not able to replicate this locally. I've tried on FF/Chrome on Windows and Chrome on Mac and I never see that bottom border - before or after switching action bar colors. Can you describe the steps it took to see this and the exact browser maybe?

[leocaseiro]

Hi @rdlauer, thanks for getting back to me.

I've tried in Safari and Chrome, both on mac and iPhone as well.

My Mac versions are:

Chrome Version 56.0.2924.87 (64-bit) Safari: Version 10.0.3 (11602.4.8.0.1) Mac OSX: El Capitan 10.11.16

Try setting any color that is pretty light, like gray or even white only for the Action Bar and you'll see.

[leocaseiro]

Here's a screen GIF:

[rdlauer]

This is very bizarre. I've attached a gif for what I see (this is Chrome/Mac, same version as you). Safari also looks fine, although there are some other unrelated artifacts I'm seeing there.

@tjvantoll would you mind taking a quick look at this to get a 3rd pair of eyes?

[tjvantoll]

I’m unable to replicate that behavior as well @leocaseiro. I see the same thing Rob shows above on both Chrome and Safari on macOS.

What’s interesting is that I see the blue border for a half a second when the page loads, but then I see the border go away after some JavaScript runs. The blue border does not return for me as I switch Action Bar Colors either.

I love web development.

[leocaseiro]

Wow! That's pretty bizarre.

I had the same issue on my iPhone though.

I love web development (2)

[rdlauer]

I can actually see the issue on my iPhone. Not that we are too worried about mobile, but still, you aren't crazy :).

I'm happy to accept the PR, but can you clarify this class: .bar-positive--transparent. This isn't a familiar Ionic concept to me and I don't see any changes in the PR that reflect a new class being added?

[leocaseiro]

Hi @rdlauer. Thanks for the deep investigation.

I replaced the class bar-positive with the bar-positive--transparent because there're some jQuery methods to replace the colours within the bar-positive.

Eq:

$(".device-screen").contents().find(".bar-positive").removeClass("header-md");

Otherwise, I believe these jQuery methods would fail the app.

PS: That was only a suggestion.

[rdlauer]

Right, but is the bar-positive--transparent class something you came up with? Just wondering if I'm supposed to see it in the CSS somewhere.

[leocaseiro]

Yep! I made this up.

There's nothing about this selector actually.

[rdlauer]

So I'm just "resolving" this issue by setting the background-image: none - which I think is the easy way around this.