@khanacademy/wonder-blocks-button 3.0.7 → 3.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/es/index.js +14 -2
- package/dist/index.js +21 -6
- package/package.json +1 -1
- package/src/__tests__/__snapshots__/custom-snapshot.test.js.snap +152 -26
- package/src/components/button-core.js +19 -2
package/CHANGELOG.md
CHANGED
package/dist/es/index.js
CHANGED
|
@@ -274,14 +274,26 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
|
|
|
274
274
|
height: 2,
|
|
275
275
|
width: `calc(100% - ${iconWidth}px)`,
|
|
276
276
|
right: 0,
|
|
277
|
-
bottom:
|
|
277
|
+
bottom: -1,
|
|
278
278
|
background: light ? fadedColor : activeColor,
|
|
279
279
|
borderRadius: 2
|
|
280
280
|
}
|
|
281
281
|
},
|
|
282
282
|
disabled: {
|
|
283
283
|
color: light ? fadedColor : offBlack32,
|
|
284
|
-
cursor: "default"
|
|
284
|
+
cursor: "default",
|
|
285
|
+
":focus": {
|
|
286
|
+
":after": {
|
|
287
|
+
content: "''",
|
|
288
|
+
position: "absolute",
|
|
289
|
+
height: 2,
|
|
290
|
+
width: `calc(100% - ${iconWidth}px)`,
|
|
291
|
+
right: 0,
|
|
292
|
+
bottom: `calc(50% - 11px)`,
|
|
293
|
+
background: light ? white : offBlack32,
|
|
294
|
+
borderRadius: 2
|
|
295
|
+
}
|
|
296
|
+
}
|
|
285
297
|
}
|
|
286
298
|
};
|
|
287
299
|
} else {
|
package/dist/index.js
CHANGED
|
@@ -105,19 +105,16 @@ function _extends() {
|
|
|
105
105
|
module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
106
106
|
for (var i = 1; i < arguments.length; i++) {
|
|
107
107
|
var source = arguments[i];
|
|
108
|
-
|
|
109
108
|
for (var key in source) {
|
|
110
109
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
111
110
|
target[key] = source[key];
|
|
112
111
|
}
|
|
113
112
|
}
|
|
114
113
|
}
|
|
115
|
-
|
|
116
114
|
return target;
|
|
117
115
|
}, module.exports.__esModule = true, module.exports["default"] = module.exports;
|
|
118
116
|
return _extends.apply(this, arguments);
|
|
119
117
|
}
|
|
120
|
-
|
|
121
118
|
module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
|
|
122
119
|
|
|
123
120
|
/***/ }),
|
|
@@ -568,7 +565,6 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
|
|
|
568
565
|
}
|
|
569
566
|
};
|
|
570
567
|
} else if (kind === "tertiary") {
|
|
571
|
-
// TODO(FEI-4229): Make tertiary buttons focusable
|
|
572
568
|
newStyles = {
|
|
573
569
|
default: {
|
|
574
570
|
background: "none",
|
|
@@ -596,14 +592,33 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
|
|
|
596
592
|
height: 2,
|
|
597
593
|
width: `calc(100% - ${iconWidth}px)`,
|
|
598
594
|
right: 0,
|
|
599
|
-
bottom:
|
|
595
|
+
bottom: -1,
|
|
600
596
|
background: light ? fadedColor : activeColor,
|
|
601
597
|
borderRadius: 2
|
|
602
598
|
}
|
|
603
599
|
},
|
|
604
600
|
disabled: {
|
|
605
601
|
color: light ? fadedColor : offBlack32,
|
|
606
|
-
cursor: "default"
|
|
602
|
+
cursor: "default",
|
|
603
|
+
":focus": {
|
|
604
|
+
":after": {
|
|
605
|
+
content: "''",
|
|
606
|
+
position: "absolute",
|
|
607
|
+
height: 2,
|
|
608
|
+
width: `calc(100% - ${iconWidth}px)`,
|
|
609
|
+
right: 0,
|
|
610
|
+
|
|
611
|
+
/**
|
|
612
|
+
* For tertiary buttons, underline is applied to the
|
|
613
|
+
* internal `span` element, So we need to calculate the
|
|
614
|
+
* offset to center the line in the button (right after
|
|
615
|
+
* the span).
|
|
616
|
+
*/
|
|
617
|
+
bottom: `calc(50% - 11px)`,
|
|
618
|
+
background: light ? white : offBlack32,
|
|
619
|
+
borderRadius: 2
|
|
620
|
+
}
|
|
621
|
+
}
|
|
607
622
|
}
|
|
608
623
|
};
|
|
609
624
|
} else {
|
package/package.json
CHANGED
|
@@ -8298,7 +8298,16 @@ exports[`ButtonCore kind:tertiary color:default size:large light:false disabled
|
|
|
8298
8298
|
"border": 0,
|
|
8299
8299
|
},
|
|
8300
8300
|
":focus": {
|
|
8301
|
-
"
|
|
8301
|
+
":after": {
|
|
8302
|
+
"background": "rgba(33,36,44,0.32)",
|
|
8303
|
+
"borderRadius": 2,
|
|
8304
|
+
"bottom": "calc(50% - 11px)",
|
|
8305
|
+
"content": "''",
|
|
8306
|
+
"height": 2,
|
|
8307
|
+
"position": "absolute",
|
|
8308
|
+
"right": 0,
|
|
8309
|
+
"width": "calc(100% - 0px)",
|
|
8310
|
+
},
|
|
8302
8311
|
},
|
|
8303
8312
|
"alignItems": "center",
|
|
8304
8313
|
"background": "none",
|
|
@@ -8583,7 +8592,7 @@ exports[`ButtonCore kind:tertiary color:default size:large light:false pressed 1
|
|
|
8583
8592
|
":after": {
|
|
8584
8593
|
"background": "#1b50b3",
|
|
8585
8594
|
"borderRadius": 2,
|
|
8586
|
-
"bottom":
|
|
8595
|
+
"bottom": -1,
|
|
8587
8596
|
"content": "''",
|
|
8588
8597
|
"height": 2,
|
|
8589
8598
|
"position": "absolute",
|
|
@@ -8637,7 +8646,16 @@ exports[`ButtonCore kind:tertiary color:default size:large light:true disabled 1
|
|
|
8637
8646
|
"border": 0,
|
|
8638
8647
|
},
|
|
8639
8648
|
":focus": {
|
|
8640
|
-
"
|
|
8649
|
+
":after": {
|
|
8650
|
+
"background": "#ffffff",
|
|
8651
|
+
"borderRadius": 2,
|
|
8652
|
+
"bottom": "calc(50% - 11px)",
|
|
8653
|
+
"content": "''",
|
|
8654
|
+
"height": 2,
|
|
8655
|
+
"position": "absolute",
|
|
8656
|
+
"right": 0,
|
|
8657
|
+
"width": "calc(100% - 0px)",
|
|
8658
|
+
},
|
|
8641
8659
|
},
|
|
8642
8660
|
"alignItems": "center",
|
|
8643
8661
|
"background": "none",
|
|
@@ -8922,7 +8940,7 @@ exports[`ButtonCore kind:tertiary color:default size:large light:true pressed 1`
|
|
|
8922
8940
|
":after": {
|
|
8923
8941
|
"background": "#b5cefb",
|
|
8924
8942
|
"borderRadius": 2,
|
|
8925
|
-
"bottom":
|
|
8943
|
+
"bottom": -1,
|
|
8926
8944
|
"content": "''",
|
|
8927
8945
|
"height": 2,
|
|
8928
8946
|
"position": "absolute",
|
|
@@ -8976,7 +8994,16 @@ exports[`ButtonCore kind:tertiary color:default size:medium light:false disabled
|
|
|
8976
8994
|
"border": 0,
|
|
8977
8995
|
},
|
|
8978
8996
|
":focus": {
|
|
8979
|
-
"
|
|
8997
|
+
":after": {
|
|
8998
|
+
"background": "rgba(33,36,44,0.32)",
|
|
8999
|
+
"borderRadius": 2,
|
|
9000
|
+
"bottom": "calc(50% - 11px)",
|
|
9001
|
+
"content": "''",
|
|
9002
|
+
"height": 2,
|
|
9003
|
+
"position": "absolute",
|
|
9004
|
+
"right": 0,
|
|
9005
|
+
"width": "calc(100% - 0px)",
|
|
9006
|
+
},
|
|
8980
9007
|
},
|
|
8981
9008
|
"alignItems": "center",
|
|
8982
9009
|
"background": "none",
|
|
@@ -9261,7 +9288,7 @@ exports[`ButtonCore kind:tertiary color:default size:medium light:false pressed
|
|
|
9261
9288
|
":after": {
|
|
9262
9289
|
"background": "#1b50b3",
|
|
9263
9290
|
"borderRadius": 2,
|
|
9264
|
-
"bottom":
|
|
9291
|
+
"bottom": -1,
|
|
9265
9292
|
"content": "''",
|
|
9266
9293
|
"height": 2,
|
|
9267
9294
|
"position": "absolute",
|
|
@@ -9315,7 +9342,16 @@ exports[`ButtonCore kind:tertiary color:default size:medium light:true disabled
|
|
|
9315
9342
|
"border": 0,
|
|
9316
9343
|
},
|
|
9317
9344
|
":focus": {
|
|
9318
|
-
"
|
|
9345
|
+
":after": {
|
|
9346
|
+
"background": "#ffffff",
|
|
9347
|
+
"borderRadius": 2,
|
|
9348
|
+
"bottom": "calc(50% - 11px)",
|
|
9349
|
+
"content": "''",
|
|
9350
|
+
"height": 2,
|
|
9351
|
+
"position": "absolute",
|
|
9352
|
+
"right": 0,
|
|
9353
|
+
"width": "calc(100% - 0px)",
|
|
9354
|
+
},
|
|
9319
9355
|
},
|
|
9320
9356
|
"alignItems": "center",
|
|
9321
9357
|
"background": "none",
|
|
@@ -9600,7 +9636,7 @@ exports[`ButtonCore kind:tertiary color:default size:medium light:true pressed 1
|
|
|
9600
9636
|
":after": {
|
|
9601
9637
|
"background": "#b5cefb",
|
|
9602
9638
|
"borderRadius": 2,
|
|
9603
|
-
"bottom":
|
|
9639
|
+
"bottom": -1,
|
|
9604
9640
|
"content": "''",
|
|
9605
9641
|
"height": 2,
|
|
9606
9642
|
"position": "absolute",
|
|
@@ -9654,7 +9690,16 @@ exports[`ButtonCore kind:tertiary color:default size:small light:false disabled
|
|
|
9654
9690
|
"border": 0,
|
|
9655
9691
|
},
|
|
9656
9692
|
":focus": {
|
|
9657
|
-
"
|
|
9693
|
+
":after": {
|
|
9694
|
+
"background": "rgba(33,36,44,0.32)",
|
|
9695
|
+
"borderRadius": 2,
|
|
9696
|
+
"bottom": "calc(50% - 11px)",
|
|
9697
|
+
"content": "''",
|
|
9698
|
+
"height": 2,
|
|
9699
|
+
"position": "absolute",
|
|
9700
|
+
"right": 0,
|
|
9701
|
+
"width": "calc(100% - 0px)",
|
|
9702
|
+
},
|
|
9658
9703
|
},
|
|
9659
9704
|
"alignItems": "center",
|
|
9660
9705
|
"background": "none",
|
|
@@ -9939,7 +9984,7 @@ exports[`ButtonCore kind:tertiary color:default size:small light:false pressed 1
|
|
|
9939
9984
|
":after": {
|
|
9940
9985
|
"background": "#1b50b3",
|
|
9941
9986
|
"borderRadius": 2,
|
|
9942
|
-
"bottom":
|
|
9987
|
+
"bottom": -1,
|
|
9943
9988
|
"content": "''",
|
|
9944
9989
|
"height": 2,
|
|
9945
9990
|
"position": "absolute",
|
|
@@ -9993,7 +10038,16 @@ exports[`ButtonCore kind:tertiary color:default size:small light:true disabled 1
|
|
|
9993
10038
|
"border": 0,
|
|
9994
10039
|
},
|
|
9995
10040
|
":focus": {
|
|
9996
|
-
"
|
|
10041
|
+
":after": {
|
|
10042
|
+
"background": "#ffffff",
|
|
10043
|
+
"borderRadius": 2,
|
|
10044
|
+
"bottom": "calc(50% - 11px)",
|
|
10045
|
+
"content": "''",
|
|
10046
|
+
"height": 2,
|
|
10047
|
+
"position": "absolute",
|
|
10048
|
+
"right": 0,
|
|
10049
|
+
"width": "calc(100% - 0px)",
|
|
10050
|
+
},
|
|
9997
10051
|
},
|
|
9998
10052
|
"alignItems": "center",
|
|
9999
10053
|
"background": "none",
|
|
@@ -10278,7 +10332,7 @@ exports[`ButtonCore kind:tertiary color:default size:small light:true pressed 1`
|
|
|
10278
10332
|
":after": {
|
|
10279
10333
|
"background": "#b5cefb",
|
|
10280
10334
|
"borderRadius": 2,
|
|
10281
|
-
"bottom":
|
|
10335
|
+
"bottom": -1,
|
|
10282
10336
|
"content": "''",
|
|
10283
10337
|
"height": 2,
|
|
10284
10338
|
"position": "absolute",
|
|
@@ -10332,7 +10386,16 @@ exports[`ButtonCore kind:tertiary color:destructive size:large light:false disab
|
|
|
10332
10386
|
"border": 0,
|
|
10333
10387
|
},
|
|
10334
10388
|
":focus": {
|
|
10335
|
-
"
|
|
10389
|
+
":after": {
|
|
10390
|
+
"background": "rgba(33,36,44,0.32)",
|
|
10391
|
+
"borderRadius": 2,
|
|
10392
|
+
"bottom": "calc(50% - 11px)",
|
|
10393
|
+
"content": "''",
|
|
10394
|
+
"height": 2,
|
|
10395
|
+
"position": "absolute",
|
|
10396
|
+
"right": 0,
|
|
10397
|
+
"width": "calc(100% - 0px)",
|
|
10398
|
+
},
|
|
10336
10399
|
},
|
|
10337
10400
|
"alignItems": "center",
|
|
10338
10401
|
"background": "none",
|
|
@@ -10617,7 +10680,7 @@ exports[`ButtonCore kind:tertiary color:destructive size:large light:false press
|
|
|
10617
10680
|
":after": {
|
|
10618
10681
|
"background": "#9e271d",
|
|
10619
10682
|
"borderRadius": 2,
|
|
10620
|
-
"bottom":
|
|
10683
|
+
"bottom": -1,
|
|
10621
10684
|
"content": "''",
|
|
10622
10685
|
"height": 2,
|
|
10623
10686
|
"position": "absolute",
|
|
@@ -10671,7 +10734,16 @@ exports[`ButtonCore kind:tertiary color:destructive size:large light:true disabl
|
|
|
10671
10734
|
"border": 0,
|
|
10672
10735
|
},
|
|
10673
10736
|
":focus": {
|
|
10674
|
-
"
|
|
10737
|
+
":after": {
|
|
10738
|
+
"background": "#ffffff",
|
|
10739
|
+
"borderRadius": 2,
|
|
10740
|
+
"bottom": "calc(50% - 11px)",
|
|
10741
|
+
"content": "''",
|
|
10742
|
+
"height": 2,
|
|
10743
|
+
"position": "absolute",
|
|
10744
|
+
"right": 0,
|
|
10745
|
+
"width": "calc(100% - 0px)",
|
|
10746
|
+
},
|
|
10675
10747
|
},
|
|
10676
10748
|
"alignItems": "center",
|
|
10677
10749
|
"background": "none",
|
|
@@ -10956,7 +11028,7 @@ exports[`ButtonCore kind:tertiary color:destructive size:large light:true presse
|
|
|
10956
11028
|
":after": {
|
|
10957
11029
|
"background": "#f3bbb4",
|
|
10958
11030
|
"borderRadius": 2,
|
|
10959
|
-
"bottom":
|
|
11031
|
+
"bottom": -1,
|
|
10960
11032
|
"content": "''",
|
|
10961
11033
|
"height": 2,
|
|
10962
11034
|
"position": "absolute",
|
|
@@ -11010,7 +11082,16 @@ exports[`ButtonCore kind:tertiary color:destructive size:medium light:false disa
|
|
|
11010
11082
|
"border": 0,
|
|
11011
11083
|
},
|
|
11012
11084
|
":focus": {
|
|
11013
|
-
"
|
|
11085
|
+
":after": {
|
|
11086
|
+
"background": "rgba(33,36,44,0.32)",
|
|
11087
|
+
"borderRadius": 2,
|
|
11088
|
+
"bottom": "calc(50% - 11px)",
|
|
11089
|
+
"content": "''",
|
|
11090
|
+
"height": 2,
|
|
11091
|
+
"position": "absolute",
|
|
11092
|
+
"right": 0,
|
|
11093
|
+
"width": "calc(100% - 0px)",
|
|
11094
|
+
},
|
|
11014
11095
|
},
|
|
11015
11096
|
"alignItems": "center",
|
|
11016
11097
|
"background": "none",
|
|
@@ -11295,7 +11376,7 @@ exports[`ButtonCore kind:tertiary color:destructive size:medium light:false pres
|
|
|
11295
11376
|
":after": {
|
|
11296
11377
|
"background": "#9e271d",
|
|
11297
11378
|
"borderRadius": 2,
|
|
11298
|
-
"bottom":
|
|
11379
|
+
"bottom": -1,
|
|
11299
11380
|
"content": "''",
|
|
11300
11381
|
"height": 2,
|
|
11301
11382
|
"position": "absolute",
|
|
@@ -11349,7 +11430,16 @@ exports[`ButtonCore kind:tertiary color:destructive size:medium light:true disab
|
|
|
11349
11430
|
"border": 0,
|
|
11350
11431
|
},
|
|
11351
11432
|
":focus": {
|
|
11352
|
-
"
|
|
11433
|
+
":after": {
|
|
11434
|
+
"background": "#ffffff",
|
|
11435
|
+
"borderRadius": 2,
|
|
11436
|
+
"bottom": "calc(50% - 11px)",
|
|
11437
|
+
"content": "''",
|
|
11438
|
+
"height": 2,
|
|
11439
|
+
"position": "absolute",
|
|
11440
|
+
"right": 0,
|
|
11441
|
+
"width": "calc(100% - 0px)",
|
|
11442
|
+
},
|
|
11353
11443
|
},
|
|
11354
11444
|
"alignItems": "center",
|
|
11355
11445
|
"background": "none",
|
|
@@ -11634,7 +11724,7 @@ exports[`ButtonCore kind:tertiary color:destructive size:medium light:true press
|
|
|
11634
11724
|
":after": {
|
|
11635
11725
|
"background": "#f3bbb4",
|
|
11636
11726
|
"borderRadius": 2,
|
|
11637
|
-
"bottom":
|
|
11727
|
+
"bottom": -1,
|
|
11638
11728
|
"content": "''",
|
|
11639
11729
|
"height": 2,
|
|
11640
11730
|
"position": "absolute",
|
|
@@ -11688,7 +11778,16 @@ exports[`ButtonCore kind:tertiary color:destructive size:small light:false disab
|
|
|
11688
11778
|
"border": 0,
|
|
11689
11779
|
},
|
|
11690
11780
|
":focus": {
|
|
11691
|
-
"
|
|
11781
|
+
":after": {
|
|
11782
|
+
"background": "rgba(33,36,44,0.32)",
|
|
11783
|
+
"borderRadius": 2,
|
|
11784
|
+
"bottom": "calc(50% - 11px)",
|
|
11785
|
+
"content": "''",
|
|
11786
|
+
"height": 2,
|
|
11787
|
+
"position": "absolute",
|
|
11788
|
+
"right": 0,
|
|
11789
|
+
"width": "calc(100% - 0px)",
|
|
11790
|
+
},
|
|
11692
11791
|
},
|
|
11693
11792
|
"alignItems": "center",
|
|
11694
11793
|
"background": "none",
|
|
@@ -11973,7 +12072,7 @@ exports[`ButtonCore kind:tertiary color:destructive size:small light:false press
|
|
|
11973
12072
|
":after": {
|
|
11974
12073
|
"background": "#9e271d",
|
|
11975
12074
|
"borderRadius": 2,
|
|
11976
|
-
"bottom":
|
|
12075
|
+
"bottom": -1,
|
|
11977
12076
|
"content": "''",
|
|
11978
12077
|
"height": 2,
|
|
11979
12078
|
"position": "absolute",
|
|
@@ -12027,7 +12126,16 @@ exports[`ButtonCore kind:tertiary color:destructive size:small light:true disabl
|
|
|
12027
12126
|
"border": 0,
|
|
12028
12127
|
},
|
|
12029
12128
|
":focus": {
|
|
12030
|
-
"
|
|
12129
|
+
":after": {
|
|
12130
|
+
"background": "#ffffff",
|
|
12131
|
+
"borderRadius": 2,
|
|
12132
|
+
"bottom": "calc(50% - 11px)",
|
|
12133
|
+
"content": "''",
|
|
12134
|
+
"height": 2,
|
|
12135
|
+
"position": "absolute",
|
|
12136
|
+
"right": 0,
|
|
12137
|
+
"width": "calc(100% - 0px)",
|
|
12138
|
+
},
|
|
12031
12139
|
},
|
|
12032
12140
|
"alignItems": "center",
|
|
12033
12141
|
"background": "none",
|
|
@@ -12312,7 +12420,7 @@ exports[`ButtonCore kind:tertiary color:destructive size:small light:true presse
|
|
|
12312
12420
|
":after": {
|
|
12313
12421
|
"background": "#f3bbb4",
|
|
12314
12422
|
"borderRadius": 2,
|
|
12315
|
-
"bottom":
|
|
12423
|
+
"bottom": -1,
|
|
12316
12424
|
"content": "''",
|
|
12317
12425
|
"height": 2,
|
|
12318
12426
|
"position": "absolute",
|
|
@@ -12366,7 +12474,16 @@ exports[`ButtonCore kind:tertiary size:medium spinner:true 1`] = `
|
|
|
12366
12474
|
"border": 0,
|
|
12367
12475
|
},
|
|
12368
12476
|
":focus": {
|
|
12369
|
-
"
|
|
12477
|
+
":after": {
|
|
12478
|
+
"background": "rgba(33,36,44,0.32)",
|
|
12479
|
+
"borderRadius": 2,
|
|
12480
|
+
"bottom": "calc(50% - 11px)",
|
|
12481
|
+
"content": "''",
|
|
12482
|
+
"height": 2,
|
|
12483
|
+
"position": "absolute",
|
|
12484
|
+
"right": 0,
|
|
12485
|
+
"width": "calc(100% - 0px)",
|
|
12486
|
+
},
|
|
12370
12487
|
},
|
|
12371
12488
|
"alignItems": "center",
|
|
12372
12489
|
"background": "none",
|
|
@@ -12498,7 +12615,16 @@ exports[`ButtonCore kind:tertiary size:small spinner:true 1`] = `
|
|
|
12498
12615
|
"border": 0,
|
|
12499
12616
|
},
|
|
12500
12617
|
":focus": {
|
|
12501
|
-
"
|
|
12618
|
+
":after": {
|
|
12619
|
+
"background": "rgba(33,36,44,0.32)",
|
|
12620
|
+
"borderRadius": 2,
|
|
12621
|
+
"bottom": "calc(50% - 11px)",
|
|
12622
|
+
"content": "''",
|
|
12623
|
+
"height": 2,
|
|
12624
|
+
"position": "absolute",
|
|
12625
|
+
"right": 0,
|
|
12626
|
+
"width": "calc(100% - 0px)",
|
|
12627
|
+
},
|
|
12502
12628
|
},
|
|
12503
12629
|
"alignItems": "center",
|
|
12504
12630
|
"background": "none",
|
|
@@ -353,7 +353,6 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
|
|
|
353
353
|
},
|
|
354
354
|
};
|
|
355
355
|
} else if (kind === "tertiary") {
|
|
356
|
-
// TODO(FEI-4229): Make tertiary buttons focusable
|
|
357
356
|
newStyles = {
|
|
358
357
|
default: {
|
|
359
358
|
background: "none",
|
|
@@ -381,7 +380,7 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
|
|
|
381
380
|
height: 2,
|
|
382
381
|
width: `calc(100% - ${iconWidth}px)`,
|
|
383
382
|
right: 0,
|
|
384
|
-
bottom:
|
|
383
|
+
bottom: -1,
|
|
385
384
|
background: light ? fadedColor : activeColor,
|
|
386
385
|
borderRadius: 2,
|
|
387
386
|
},
|
|
@@ -389,6 +388,24 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
|
|
|
389
388
|
disabled: {
|
|
390
389
|
color: light ? fadedColor : offBlack32,
|
|
391
390
|
cursor: "default",
|
|
391
|
+
":focus": {
|
|
392
|
+
":after": {
|
|
393
|
+
content: "''",
|
|
394
|
+
position: "absolute",
|
|
395
|
+
height: 2,
|
|
396
|
+
width: `calc(100% - ${iconWidth}px)`,
|
|
397
|
+
right: 0,
|
|
398
|
+
/**
|
|
399
|
+
* For tertiary buttons, underline is applied to the
|
|
400
|
+
* internal `span` element, So we need to calculate the
|
|
401
|
+
* offset to center the line in the button (right after
|
|
402
|
+
* the span).
|
|
403
|
+
*/
|
|
404
|
+
bottom: `calc(50% - 11px)`,
|
|
405
|
+
background: light ? white : offBlack32,
|
|
406
|
+
borderRadius: 2,
|
|
407
|
+
},
|
|
408
|
+
},
|
|
392
409
|
},
|
|
393
410
|
};
|
|
394
411
|
} else {
|