angular-ui-kit/src/prime-preset/components/css/button.ts at fff519b1ba7339e1fcf9190a6fdf6f65dfa044ef · cdek-it/angular-ui-kit · GitHub

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
const css = ({ dt }: any) => `
.p-button.p-component .p-button-label {
  font-family: ${dt('fonts.fontFamily.heading')};
}

.p-component.p-button:focus-visible {
  outline: none;
  box-shadow: ${dt('focusRing.shadow')};
}

.p-button .p-button-icon {
  font-size: ${dt('fonts.fontSize.xl')};
}

.p-button.p-button-lg .p-button-icon {
  font-size: ${dt('fonts.fontSize.2xl')};
}

.p-component.p-button-secondary:disabled {
  color: ${dt('button.extend.disabledColor')};
  background: ${dt('button.extend.disabledBackground')};
  mix-blend-mode: unset;
  opacity: 1;
}

.p-button-link.p-button {
  padding: ${dt('button.extend.extLink.paddingY')} ${dt('button.extend.extLink.paddingX')};
}

.p-button.p-button-link:not(:disabled):hover {
  color: ${dt('button.extend.extLink.colorHover')};
}

.p-button.p-button-link:not(:disabled):hover .p-button-label {
  text-decoration: none;
}

.p-button-lg.p-button-icon-only.p-button-link {
  width: ${dt('button.extend.extLink.lg.iconOnlyWidth')};
  height: ${dt('button.extend.extLink.lg.iconOnlyWidth')};
}

.p-button-link.p-button-icon-only.p-button {
  width: ${dt('button.extend.extLink.base.iconOnlyWidth')};
  height: ${dt('button.extend.extLink.base.iconOnlyWidth')};
}

.p-button-link.p-button-icon-only.p-button-sm {
  width: ${dt('button.extend.extLink.sm.iconOnlyWidth')};
  height: ${dt('button.extend.extLink.sm.iconOnlyWidth')};
}

.p-button-lg.p-button-icon-only {
  height: ${dt('button.root.lg.iconOnlyWidth')};
}

.p-button-icon-only {
  height: ${dt('button.root.iconOnlyWidth')};
}

.p-button-sm.p-button-icon-only {
  height: ${dt('button.root.sm.iconOnlyWidth')};
}
`;

export default css;