-
Notifications
You must be signed in to change notification settings - Fork 819
/
_index.scss
43 lines (39 loc) · 1.49 KB
/
_index.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
/**
* The stateful button requires the `.slds-button--icon-border` class in addition to the `.slds-button` class.
*
* The stateful inverse button works just like the stateful button. It requires the `.slds-button--icon-border-inverse` class in addition to the `.slds-button` class.
*
* Stateful icons can be toggled on and off and retain their state. JavaScript is used to add the `.slds-is-selected` class to the button when activated.
*
* #### Accessibility
*
* For accessibility, implement the [ARIA Toggle Button](http://w3c.github.io/aria-practices/#button) concept.
* - Similar to a mute button, the button represents a pressed or unpressed state.
* - Button text doesn't change per state
* - `aria-pressed` is set to `true` or `false`, depending its state
*
* @summary Stateful Button Icon
* @name stateful
* @selector .slds-is-selected
* @restrict .slds-button_icon
* @variant
*/
.slds-button_icon-container.slds-is-selected,
.slds-button--icon-container.slds-is-selected,
.slds-button_icon-border.slds-is-selected,
.slds-button--icon-border.slds-is-selected,
.slds-button_icon-border-filled.slds-is-selected,
.slds-button_icon-border-inverse.slds-is-selected {
@include button-brand;
.slds-button__icon {
fill: $color-text-button-brand;
}
&:hover,
&:focus {
.slds-button__icon {
fill: $color-text-button-brand;
}
}
}