feat: more css variables for button styling

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

Currently (due to shadow dom) I don’t see a way to overwrite the cursors for buttons. Not even if I give them a custom class since it will be overwritten by .button-native. All of that does make sense to me and for default use cases (and consistency!). However I am doing something a bit more playful and would like to know if or how I could overwrite the cursors?

Describe Preferred Solution

Ideally I would be able to set the css variable --cursor to be able to change it. 😄

Describe Alternatives

I tried to find other ways of doing shadow piercing in angular, however the option of setting ViewEncapsulation.None does not make sense if it is an application wide style effect, that I want to have.

Related Code

In any ionic button there is a class: .button-native

.button-native {
    ...
    cursor: pointer;
    ...
}

I think the change might be as simple as making the cursor a css variable as it has been done with width and some other properties. Example: https://github.com/ionic-team/ionic/commit/bac49ca71bc3da60b1b349b7130025e2906a6ead#diff-7c58c82ca091ee01c6244994d0362292

Additional Context

   Ionic CLI                     : 6.10.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.900.6
   @angular-devkit/schematics    : 9.0.6
   @angular/cli                  : 9.0.6

[liamdebeasi]

Thanks for the feature request. With the launch of Ionic Framework v5.1.0 we introduced CSS Shadow Part support for our components. This lets you target internal pieces of components without knowing the actual structure of the component.

We are in the process of getting more examples out, but you would do something like this in your CSS:

ion-button::part(native) {
  cursor: grab;
}

Components that support shadow parts have the parts listed in our documentation: https://ionicframework.com/docs/api/button#css-shadow-parts.

[Eraldo]

Awesome! Great move! I’ll try it tomorrow and close the issue. 😃

On Tue, Jun 23, 2020, 00:16 Liam DeBeasi [e-mail] wrote:

Thanks for the feature request. With the launch of Ionic Framework v5.1.0 we introduced CSS Shadow Part support for our components. This lets you target internal pieces of components without knowing the actual structure of the component.

We are in the process of getting more examples out, but you would do something like this in your CSS:

ion-button::part(native) { cursor: grab; }

Components that support shadow parts have the parts listed in our documentation: https://ionicframework.com/docs/api/button#css-shadow-parts .

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic/issues/21610#issuecomment-647815667, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAR5IXNPWVXPAVWSYJJZRTRX7Q6PANCNFSM4OFDIV7A .