@justeattakeaway/pie-icon-button 0.24.3 → 0.25.0
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/README.md +5 -118
- package/dist/index.js +17 -17
- package/package.json +2 -2
- package/src/iconButton.scss +9 -8
package/README.md
CHANGED
|
@@ -8,20 +8,6 @@
|
|
|
8
8
|
</a>
|
|
9
9
|
</p>
|
|
10
10
|
|
|
11
|
-
# Table of Contents
|
|
12
|
-
|
|
13
|
-
1. [Introduction](#pie-icon-button)
|
|
14
|
-
2. [Installation](#installation)
|
|
15
|
-
3. [Importing the component](#importing-the-component)
|
|
16
|
-
4. [Peer Dependencies](#peer-dependencies)
|
|
17
|
-
5. [Props](#props)
|
|
18
|
-
6. [Events](#events)
|
|
19
|
-
- [HTML example](#html)
|
|
20
|
-
- [Vue example (using Nuxt 3)](#vue-templates-using-nuxt-3)
|
|
21
|
-
- [React example (using Next 13)](#react-templates-using-next-13)
|
|
22
|
-
7. [Contributing](#contributing)
|
|
23
|
-
|
|
24
|
-
|
|
25
11
|
## `pie-icon-button`
|
|
26
12
|
|
|
27
13
|
`pie-icon-button` is a Web Component built using the Lit library. It offers a simple and accessible icon button component for web applications.
|
|
@@ -41,113 +27,14 @@ $ npm i @justeattakeaway/pie-icon-button
|
|
|
41
27
|
$ yarn add @justeattakeaway/pie-icon-button
|
|
42
28
|
```
|
|
43
29
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
### Importing the component
|
|
48
|
-
|
|
49
|
-
#### JavaScript
|
|
50
|
-
```js
|
|
51
|
-
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
|
|
52
|
-
import { PieIconButton } from '@justeattakeaway/pie-icon-button';
|
|
53
|
-
|
|
54
|
-
// If you don't need to reference the imported object, you can simply
|
|
55
|
-
// import the module which registers the component as a custom element.
|
|
56
|
-
import '@justeattakeaway/pie-icon-button';
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
#### React
|
|
60
|
-
```js
|
|
61
|
-
// React
|
|
62
|
-
// For React, you will need to import our React-specific component build
|
|
63
|
-
// which wraps the web component using @lit/react
|
|
64
|
-
import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react';
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
> [!NOTE]
|
|
68
|
-
> When using the React version of the component, please make sure to also
|
|
69
|
-
> include React as a [peer dependency](#peer-dependencies) in your project.
|
|
30
|
+
## Documentation
|
|
70
31
|
|
|
32
|
+
Visit [Icon Button | PIE Design System](https://pie.design/components/icon-button/overview) to view more information on this component.
|
|
71
33
|
|
|
72
|
-
##
|
|
73
|
-
|
|
74
|
-
> [!IMPORTANT]
|
|
75
|
-
> When using `pie-icon-button`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
|
|
76
|
-
|
|
77
|
-
## Importing Icons
|
|
78
|
-
|
|
79
|
-
We recommend using the `pie-icon-button` component alongside the `pie-icons-webc` package. This package contains all of the PIE icons as importable web components and are built to work alongside our other PIE components.
|
|
80
|
-
|
|
81
|
-
`pie-icon-button` provides a slot into which you can pass your chosen icon, and it will automatically size it to the correct dimensions depending on the `size` of the `pie-icon-button` component.
|
|
82
|
-
|
|
83
|
-
### Importing an icon with `pie-icons-webc`
|
|
84
|
-
|
|
85
|
-
To import an icon using `pie-icons-webc`, you should import the icon that you would like to use alongside the `pie-icon-button` component:
|
|
86
|
-
|
|
87
|
-
```js
|
|
88
|
-
import { PieIconButton } from '@justeattakeaway/pie-icon-button';
|
|
89
|
-
import '@justeattakeaway/pie-icons-webc/IconClose';
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
Then, in your markup, you would implement the component like this:
|
|
93
|
-
|
|
94
|
-
```html
|
|
95
|
-
<pie-icon-button><icon-close></icon-close></pie-icon-button>
|
|
96
|
-
```
|
|
34
|
+
## Questions
|
|
97
35
|
|
|
98
|
-
|
|
99
|
-
> Usually, icons imported from `pie-icons-webc` can be resized by specifying the `size` prop (such as `<icon-close size="xl"></icon-close>`).
|
|
100
|
-
> These size props will have no effect when used alongside the `pie-icon-button` component, as the icon is resized with respect to the size of the `pie-icon-button`.
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
## Props
|
|
104
|
-
|
|
105
|
-
| Property | Type | Default | Description |
|
|
106
|
-
|-------------|-----------|-----------------|----------------------------------------------------------------------|
|
|
107
|
-
| size | `String` | `medium` | Size of the Icon Button, one of `sizes` – `xsmall`, `small`, `medium`, `large` |
|
|
108
|
-
| variant | `String` | `primary` | Variant of the button, one of `variants` – `primary`, `secondary`, `outline`, `ghost`, `ghost-secondary` |
|
|
109
|
-
| disabled | `Boolean` | `false`| If `true`, disables the button.|
|
|
110
|
-
| isLoading | `Boolean` | `false` | If `true`, displays a loading indicator inside the icon button. |
|
|
111
|
-
|
|
112
|
-
In your HTML markup or JSX, you can then use these to set the properties for the `pie-icon-button` component, like so:
|
|
113
|
-
|
|
114
|
-
```html
|
|
115
|
-
<!-- Native HTML -->
|
|
116
|
-
<pie-icon-button size='small' type='button' variant='secondary'><icon-close></icon-close></pie-icon-button>
|
|
117
|
-
|
|
118
|
-
<!-- JSX -->
|
|
119
|
-
<PieIconButton size='small' type='button' variant='secondary'><icon-close></icon-close></PieIconButton>
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
## Events
|
|
123
|
-
|
|
124
|
-
This component does not use any custom event handlers. In order to add event listening to this component, you can treat it like a native HTML element in your application.
|
|
125
|
-
|
|
126
|
-
For example, to add a click handler in various templates:
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
### HTML
|
|
130
|
-
|
|
131
|
-
```html
|
|
132
|
-
<!-- Other attributes omitted for clarity -->
|
|
133
|
-
<pie-icon-button onclick="e => console.log(e)"><icon-close></icon-close></pie-icon-button>
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
### Vue templates (using Nuxt 3)
|
|
137
|
-
|
|
138
|
-
```html
|
|
139
|
-
<!-- Other attributes omitted for clarity -->
|
|
140
|
-
<pie-icon-button @click="handleClick"><icon-close></icon-close></pie-icon-button>
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
### React templates (using Next 13)
|
|
144
|
-
|
|
145
|
-
```html
|
|
146
|
-
<!-- Other attributes omitted for clarity -->
|
|
147
|
-
<PieIconButton onClick={handleClick}><icon-close></icon-close></PieIconButton>
|
|
148
|
-
|
|
149
|
-
```
|
|
36
|
+
Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
|
|
150
37
|
|
|
151
38
|
## Contributing
|
|
152
39
|
|
|
153
|
-
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
|
|
40
|
+
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { unsafeCSS as h, LitElement as m, html as
|
|
1
|
+
import { unsafeCSS as h, LitElement as m, html as v } from "lit";
|
|
2
2
|
import { property as n } from "lit/decorators.js";
|
|
3
3
|
import { validPropertyValues as b, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
|
|
4
4
|
import "@justeattakeaway/pie-spinner";
|
|
5
|
-
const g = `:host{--btn-dimension: 48px;--
|
|
5
|
+
const g = `:host{--btn-dimension-default: 48px;--icon-size-override: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);--icon-display-override: block;block-size:var(--btn-dimension, var(--btn-dimension-default));inline-size:var(--btn-dimension, var(--btn-dimension-default));border-color:var(--btn-border-color);border-radius:var(--btn-border-radius);background-color:var(--btn-bg-color);color:var(--btn-icon-fill);cursor:pointer;user-select:none;outline:none;border:none;display:flex;align-items:center;justify-content:center}.o-iconBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-iconBtn svg{height:var(--icon-size-override);width:var(--icon-size-override)}.o-iconBtn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-iconBtn[variant=primary]:active:not(:disabled),.o-iconBtn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-iconBtn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-iconBtn[variant=secondary]:active:not(:disabled),.o-iconBtn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-iconBtn[variant=outline]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand);border:1px solid var(--dt-color-border-strong)}.o-iconBtn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=outline]:active:not(:disabled),.o-iconBtn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost]:active:not(:disabled),.o-iconBtn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost-secondary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=ghost-secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-secondary]:active:not(:disabled),.o-iconBtn[variant=ghost-secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-iconBtn[variant=inverse]:active:not(:disabled),.o-iconBtn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-iconBtn[variant=ghost-inverse]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-inverse)}.o-iconBtn[variant=ghost-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-inverse]:active:not(:disabled),.o-iconBtn[variant=ghost-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-iconBtn[disabled]{--btn-icon-fill: var(--dt-color-content-disabled);cursor:not-allowed}.o-iconBtn[disabled]:not([variant=ghost],[variant=ghost-secondary],[variant=ghost-inverse]){--btn-bg-color: var(--dt-color-disabled-01)}.o-iconBtn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)}.o-iconBtn[size=xsmall]{--btn-dimension: 32px;--icon-size-override: 20px}.o-iconBtn[size=small]{--btn-dimension: 40px}.o-iconBtn[size=large]{--btn-dimension: 56px;--icon-size-override: 28px}
|
|
6
6
|
`, p = ["xsmall", "small", "medium", "large"], u = [
|
|
7
7
|
"primary",
|
|
8
8
|
"secondary",
|
|
@@ -13,12 +13,12 @@ const g = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-bo
|
|
|
13
13
|
"ghost-inverse"
|
|
14
14
|
];
|
|
15
15
|
var y = Object.defineProperty, B = Object.getOwnPropertyDescriptor, c = (l, o, i, t) => {
|
|
16
|
-
for (var r = t > 1 ? void 0 : t ? B(o, i) : o,
|
|
17
|
-
(
|
|
16
|
+
for (var r = t > 1 ? void 0 : t ? B(o, i) : o, e = l.length - 1, d; e >= 0; e--)
|
|
17
|
+
(d = l[e]) && (r = (t ? d(o, i, r) : d(r)) || r);
|
|
18
18
|
return t && r && y(o, i, r), r;
|
|
19
19
|
};
|
|
20
20
|
const s = "pie-icon-button";
|
|
21
|
-
class
|
|
21
|
+
class a extends m {
|
|
22
22
|
constructor() {
|
|
23
23
|
super(...arguments), this.size = "medium", this.variant = "primary", this.disabled = !1, this.isLoading = !1;
|
|
24
24
|
}
|
|
@@ -29,11 +29,11 @@ class e extends m {
|
|
|
29
29
|
*/
|
|
30
30
|
renderSpinner() {
|
|
31
31
|
const { variant: o, size: i, disabled: t } = this, r = i === "xsmall" ? "small" : "medium";
|
|
32
|
-
let
|
|
33
|
-
return o != null && o.includes("secondary") && (
|
|
32
|
+
let e = "brand";
|
|
33
|
+
return o != null && o.includes("secondary") && (e = "secondary"), (o === "primary" && !t || o === "ghost-inverse") && (e = "inverse"), v`
|
|
34
34
|
<pie-spinner
|
|
35
35
|
size="${r}"
|
|
36
|
-
variant="${
|
|
36
|
+
variant="${e}"
|
|
37
37
|
</pie-spinner>`;
|
|
38
38
|
}
|
|
39
39
|
render() {
|
|
@@ -43,35 +43,35 @@ class e extends m {
|
|
|
43
43
|
variant: t,
|
|
44
44
|
isLoading: r
|
|
45
45
|
} = this;
|
|
46
|
-
return
|
|
46
|
+
return v`
|
|
47
47
|
<button
|
|
48
48
|
class="o-iconBtn"
|
|
49
49
|
size="${i}"
|
|
50
50
|
variant="${t}"
|
|
51
51
|
?disabled="${o}"
|
|
52
52
|
?isLoading="${r}">
|
|
53
|
-
${r ? this.renderSpinner() :
|
|
53
|
+
${r ? this.renderSpinner() : v`<slot></slot>`}
|
|
54
54
|
</button>`;
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
|
-
|
|
57
|
+
a.styles = h(g);
|
|
58
58
|
c([
|
|
59
59
|
n(),
|
|
60
60
|
b(s, p, "medium")
|
|
61
|
-
],
|
|
61
|
+
], a.prototype, "size", 2);
|
|
62
62
|
c([
|
|
63
63
|
n(),
|
|
64
64
|
b(s, u, "primary")
|
|
65
|
-
],
|
|
65
|
+
], a.prototype, "variant", 2);
|
|
66
66
|
c([
|
|
67
67
|
n({ type: Boolean })
|
|
68
|
-
],
|
|
68
|
+
], a.prototype, "disabled", 2);
|
|
69
69
|
c([
|
|
70
70
|
n({ type: Boolean })
|
|
71
|
-
],
|
|
72
|
-
f(s,
|
|
71
|
+
], a.prototype, "isLoading", 2);
|
|
72
|
+
f(s, a);
|
|
73
73
|
export {
|
|
74
|
-
|
|
74
|
+
a as PieIconButton,
|
|
75
75
|
p as sizes,
|
|
76
76
|
u as variants
|
|
77
77
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.25.0",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"author": "Just Eat Takeaway.com - Design System Team",
|
|
27
27
|
"license": "Apache-2.0",
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@justeattakeaway/pie-icons-webc": "0.
|
|
29
|
+
"@justeattakeaway/pie-icons-webc": "0.16.0",
|
|
30
30
|
"@justeattakeaway/pie-spinner": "0.3.1",
|
|
31
31
|
"@justeattakeaway/pie-webc-core": "0.13.0"
|
|
32
32
|
},
|
package/src/iconButton.scss
CHANGED
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
// Normally we don't expect consumers to override these, but there are situations where it may be necessary
|
|
4
4
|
:host {
|
|
5
5
|
// The base values are set to the size default, which is for the medium button size
|
|
6
|
-
--btn-dimension: 48px;
|
|
6
|
+
--btn-dimension-default: 48px;
|
|
7
7
|
|
|
8
8
|
// Sizing is set to Medium button icon size, as that is the default
|
|
9
|
-
--
|
|
9
|
+
--icon-size-override: 24px;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
// Base button styles
|
|
@@ -14,9 +14,10 @@
|
|
|
14
14
|
--btn-border-radius: var(--dt-radius-rounded-e);
|
|
15
15
|
--btn-bg-color: var(--dt-color-interactive-brand);
|
|
16
16
|
--btn-icon-fill: var(--dt-color-content-interactive-primary);
|
|
17
|
+
--icon-display-override: block;
|
|
17
18
|
|
|
18
|
-
block-size: var(--btn-dimension);
|
|
19
|
-
inline-size: var(--btn-dimension);
|
|
19
|
+
block-size: var(--btn-dimension, var(--btn-dimension-default));
|
|
20
|
+
inline-size: var(--btn-dimension, var(--btn-dimension-default));
|
|
20
21
|
|
|
21
22
|
border-color: var(--btn-border-color);
|
|
22
23
|
border-radius: var(--btn-border-radius);
|
|
@@ -36,8 +37,8 @@
|
|
|
36
37
|
}
|
|
37
38
|
|
|
38
39
|
svg {
|
|
39
|
-
height: var(--
|
|
40
|
-
width: var(--
|
|
40
|
+
height: var(--icon-size-override);
|
|
41
|
+
width: var(--icon-size-override);
|
|
41
42
|
}
|
|
42
43
|
|
|
43
44
|
&[variant='primary'] {
|
|
@@ -108,7 +109,7 @@
|
|
|
108
109
|
|
|
109
110
|
&[size='xsmall'] {
|
|
110
111
|
--btn-dimension: 32px;
|
|
111
|
-
--
|
|
112
|
+
--icon-size-override: 20px;
|
|
112
113
|
}
|
|
113
114
|
|
|
114
115
|
&[size='small'] {
|
|
@@ -121,7 +122,7 @@
|
|
|
121
122
|
|
|
122
123
|
&[size='large'] {
|
|
123
124
|
--btn-dimension: 56px;
|
|
124
|
-
--
|
|
125
|
+
--icon-size-override: 28px;
|
|
125
126
|
}
|
|
126
127
|
}
|
|
127
128
|
|