/
button.base.scss
52 lines (43 loc) · 1.08 KB
/
button.base.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
44
45
46
47
48
49
50
51
52
@use 'styles/common/component';
@use 'styles/utilities' as *;
:host {
--gap: #{sizable(rem(4px), rem(8px), rem(12px))};
display: inline-flex;
vertical-align: middle;
::slotted(*) {
display: inline-flex;
align-items: center;
// Important is needed to override material icons styles
font-size: inherit !important;
}
::slotted(igc-icon) {
--component-size: var(--ig-size-small) !important;
}
}
[part~='base'] {
@include type-style(button);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1;
border: none;
user-select: none;
outline-style: none;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
white-space: nowrap;
text-decoration: none;
z-index: 0;
padding: 0 pad(8px, 12px, 16px);
gap: var(--gap);
min-width: rem(88px);
}
:host(:not([disabled])) [part~='base']:hover,
:host(:not(:disabled)) [part~='base']:hover {
cursor: pointer;
}
:host(:disabled),
:host([disabled]) {
pointer-events: none;
}