]> git.proxmox.com Git - pve-eslint.git/blame - eslint/docs/src/assets/scss/components/buttons.scss
import 8.41.0 source
[pve-eslint.git] / eslint / docs / src / assets / scss / components / buttons.scss
CommitLineData
8f9d1d4d
DC
1button {
2 border: none;
3 background: none;
4 font: inherit;
5 cursor: pointer;
6 line-height: inherit;
7 display: inline-flex;
8 align-items: center;
9 justify-content: center;
10}
11
12.c-btn {
13 background: none;
14 border: none;
15 font: inherit;
16 font-family: var(--text-font);
17 cursor: pointer;
18 line-height: inherit;
19 font-weight: 500;
20 font-size: var(--step-0);
21 display: inline-flex;
22 padding: .75em 1.125em;
23 align-items: center;
24 justify-content: center;
25 border-radius: var(--border-radius);
f2a92ac6 26 transition: background-color .2s linear, border-color .2s linear;
8f9d1d4d
DC
27
28 svg {
29 color: inherit;
30 }
31}
32
33.c-btn--large {
34 font-size: 1.125rem;
35 padding: .88em 1.5em;
36}
37
38.c-btn--block {
39 display: flex;
40 width: 100%;
41}
42
43a.c-btn {
44 text-decoration: none;
45 display: inline-flex;
46 flex-wrap: wrap;
47 gap: .5rem;
48 align-items: center;
49}
50
51.c-btn--primary {
52 background-color: var(--primary-button-background-color);
53 color: var(--primary-button-text-color);
54
55 &:hover {
56 background-color: var(--primary-button-hover-color);
57 }
58}
59
60.c-btn--secondary {
61 background-color: var(--secondary-button-background-color);
62 color: var(--secondary-button-text-color);
63 box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
64
65 &:hover {
66 background-color: var(--secondary-button-hover-color);
67 }
68}
69
70.c-btn--ghost {
71 color: var(--body-text-color);
72 border: 1px solid var(--border-color);
73
74 &:hover {
75 border-color: var(--link-color);
76 }
77}