File tree Expand file tree Collapse file tree 5 files changed +19
-12
lines changed Expand file tree Collapse file tree 5 files changed +19
-12
lines changed Original file line number Diff line number Diff line change 135
135
@include tools .button-color (flat , dark );
136
136
}
137
137
138
- .isRootPriorityFilled.isRootInButtonGroup :not (:first-child )::before ,
139
- .isRootPriorityFlat.isRootInButtonGroup :not (:first-child )::before {
138
+ .isRootInButtonGroup :not (:first-child )::before {
140
139
content : " " ;
141
140
position : absolute ;
142
141
top : calc (-1 * #{theme .$border-width } );
Original file line number Diff line number Diff line change 15
15
--rui-local-separator-color : #{theme .$filled-separator-color } ;
16
16
}
17
17
18
+ .isRootPriorityOutline {
19
+ --rui-local-gap : #{theme .$outline-gap } ;
20
+ --rui-local-separator-width : #{theme .$outline-separator-width } ;
21
+ --rui-local-separator-color : #{theme .$outline-separator-color } ;
22
+ }
23
+
18
24
.isRootPriorityFlat {
19
25
--rui-local-gap : #{theme .$flat-gap } ;
20
26
--rui-local-separator-width : #{theme .$flat-separator-width } ;
21
27
--rui-local-separator-color : #{theme .$flat-separator-color } ;
22
28
}
23
29
24
- .isRootPriorityOutline {
25
- --rui-local-gap : #{theme .$outline-gap } ;
26
- }
27
-
28
30
.isRootBlock {
29
31
display : flex ;
30
32
width : 100% ;
Original file line number Diff line number Diff line change @@ -270,10 +270,12 @@ its accessibility.
270
270
| ` --rui-ButtonGroup--filled__gap ` | Gap between ` filled ` buttons |
271
271
| ` --rui-ButtonGroup--filled__separator__width ` | Separator width for ` filled ` buttons |
272
272
| ` --rui-ButtonGroup--filled__separator__color ` | Separator color for ` filled ` buttons |
273
+ | ` --rui-ButtonGroup--outline__gap ` | Gap between ` outline ` buttons |
274
+ | ` --rui-ButtonGroup--outline__separator__width ` | Separator width for ` outline ` buttons |
275
+ | ` --rui-ButtonGroup--outline__separator__color ` | Separator color for ` outline ` buttons |
273
276
| ` --rui-ButtonGroup--flat__gap ` | Gap between ` flat ` buttons |
274
277
| ` --rui-ButtonGroup--flat__separator__width ` | Separator width for ` flat ` buttons |
275
278
| ` --rui-ButtonGroup--flat__separator__color ` | Separator color for ` flat ` buttons |
276
- | ` --rui-ButtonGroup--outline__gap ` | Gap between ` outline ` buttons |
277
279
278
280
[ React synthetic events ] : https://reactjs.org/docs/events.html
279
281
[ div ] : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
Original file line number Diff line number Diff line change @@ -4,8 +4,10 @@ $filled-gap: var(--rui-ButtonGroup--filled__gap);
4
4
$filled-separator-width : var (--rui-ButtonGroup--filled__separator__width );
5
5
$filled-separator-color : var (--rui-ButtonGroup--filled__separator__color );
6
6
7
+ $outline-gap : var (--rui-ButtonGroup--outline__gap );
8
+ $outline-separator-width : var (--rui-ButtonGroup--outline__separator__width );
9
+ $outline-separator-color : var (--rui-ButtonGroup--outline__separator__color );
10
+
7
11
$flat-gap : var (--rui-ButtonGroup--flat__gap );
8
12
$flat-separator-width : var (--rui-ButtonGroup--flat__separator__width );
9
13
$flat-separator-color : var (--rui-ButtonGroup--flat__separator__color );
10
-
11
- $outline-gap : var (--rui-ButtonGroup--outline__gap );
Original file line number Diff line number Diff line change 719
719
--rui-ButtonGroup--filled__separator__width : var (--rui-Button__border-width );
720
720
--rui-ButtonGroup--filled__separator__color : currentColor ;
721
721
722
+ // ButtonGroup: outline buttons
723
+ --rui-ButtonGroup--outline__gap : calc (-1 * var (--rui-Button__border-width ));
724
+ --rui-ButtonGroup--outline__separator__width : 0 ;
725
+ --rui-ButtonGroup--outline__separator__color : transparent ;
726
+
722
727
// ButtonGroup: flat buttons
723
728
--rui-ButtonGroup--flat__gap : var (--rui-Button__border-width );
724
729
--rui-ButtonGroup--flat__separator__width : var (--rui-ButtonGroup--flat__gap );
725
730
--rui-ButtonGroup--flat__separator__color : currentColor ;
726
731
727
- // ButtonGroup: outline buttons
728
- --rui-ButtonGroup--outline__gap : calc (-1 * var (--rui-Button__border-width ));
729
-
730
732
//
731
733
// Card
732
734
// ====
You can’t perform that action at this time.
0 commit comments