v2 feature: More ability to change select popup colours via scss

[alexbainbridge]

Short description of the problem:

In a select popup, the selected item text takes the PRIMARY colour.
(SO does the tick, and the text on OK and Cancel)

Would be great to be able via scss to adjust this more accurately, without resorting to CSS

What behavior are you expecting?

Works as expected. This is a feature request.

Run ionic info from terminal/cmd prompt: (paste output below)

Beta 6

[brandyscarney]

Hey, thanks for the issue! Do you mean you want to be able to style the select alert different than the standard alert or are you looking for a way to change the style for all alerts?

[alexbainbridge]

Ended up changing to using a list in a modal - as that gave me more control.

The original issue is that it seems that everything in a select (text, tick, ok, cancel) is the same colour. Would be nice to differentiate a little with different variables, simply, without resorting to CSS.

Having said that, because I ended up using a different approach, I haven't played with this for a couple of weeks.

Close with no action if you don't see this as major.

Thanks Brandy, great progress on everything else.

[brandyscarney]

So since the select component is really just using an alert, it could be styled using the alert variables such as (for ios):

$alert-ios-button-text-color, $alert-ios-radio-icon-border-color, etc. where the defaults are this:

$alert-ios-button-text-color:                   color($colors-ios, primary) !default;
$alert-ios-radio-icon-border-color:             $alert-ios-button-text-color !default;

So by changing just the $alert-ios-button-text-color value to the secondary color it would change the button color and the radio/checkbox colors:

Or you could set each of these to be different colors:

$alert-ios-button-text-color:                   color($colors, secondary);
$alert-ios-radio-icon-border-color:             color($colors, danger);

However, I can see that the text doesn't have its own variable so I will add this. Do you think that would solve your issue or do you see a use case where you would want to have an alert & a select styled differently?

Thank you for the feedback! 😄

[alexbainbridge]

Yes - this would solve it thank you Brandy.

Two other comments

a) Would be great to have some component "screenshots" with arrows pointing to aspects that different scss values control. With a number of elements taking scss from different components, this would make it easier to know what controls what. i.e. pretty much what you have done above.

b) What I really needed was a v2 version of https://market.ionic.io/plugins/ionic-modal-select ;) [Not asking for this, just commenting that that is the effect I was looking to achieve]

Thanks!

[brandyscarney]

That's a great idea. I created an issue to discuss how we could improve this: ionic-team/ionic-site#613

Understood! I'm going to add some variables to alert to further customize the colors and we'll discuss ways to improve the theming documentation on that issue. Thanks again!

[alexbainbridge]

Thank you Brandy

[Just noticed this is twice I have asked you something, twice you have said its actually already possible without going to CSS - so the more that scss and theming is documented, the less questions will come up!]

[brandyscarney]

I completely agree, it's just hard to document it when we're still changing things. I have an issue open to add more variables and rename existing ones to be more consistent (#5651) so many will be renamed. We definitely need a way to make it easier though. There is this table in the theming docs that lists all of the available variables but it could use some more info: http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/

I was thinking of doing something like Foundation's Customize With Sass sections where it lists the variables related and what they do. I'm actually going to add this idea to that issue. 😁

[alexbainbridge]

At some point, you could perhaps ask for everyone building early apps on v2 for their CSS overrides (app.core.scss) - that would probably show you where developers are either not realising that scss could have been used (documentation issue), or whether the core defaults were not quite right....... I have certainly made quite a few, predominantly margin / padding, especially on form components, input labels and responsive grids.

[brandyscarney]

That's a good idea. Maybe I'll make a forum post to get some feedback on how people are theming and how we could improve. Thanks for the feedback again. 😄

[alexbainbridge]

Dont let me sidetrack you! Keep up the great work! ;)

[brandyscarney]

The following variables have been added for more customization of alert labels:

$alert-ios-radio-label-text-color-checked
$alert-ios-checkbox-label-text-color-checked

$alert-md-radio-label-text-color-checked
$alert-md-checkbox-label-text-color-checked

$alert-wp-radio-label-text-color-checked
$alert-wp-checkbox-label-text-color-checked