tutorialkit/docs/tutorialkit.dev/src/components/Buttons/Button/Button.module.scss at main · stackblitz/tutorialkit · 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
@import '../../../styles/variables.scss';

.link {
  --outline-color-hsl: 0, 0%, 100%;
  --outline-opacity: 0.08;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 1px 40px 0;
  border-radius: 26px;
  color: var(--custom-color-text-strong);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px hsla(var(--outline-color-hsl), var(--outline-opacity));
  background-color: hsla(224, 32%, 28%, 0.24);
  backdrop-filter: blur(8px);
  transition: var(--transition-fast);
  transition-property: background-color, box-shadow, color;

  [data-theme='light'] & {
    --outline-color-hsl: 0, 0%, 0%;
    background-color: hsla(224, 32%, 28%, 0.08);
  }

  &:hover {
    --outline-opacity: 0.1;
    color: var(--custom-color-text-strong) !important; // !important for starlight override only
    background-color: hsla(224, 32%, 28%, 0.54);
    [data-theme='light'] & {
      --outline-opacity: 0.16;
      background-color: hsla(224, 32%, 28%, 0.04);
    }
  }

  &.accent {
    color: #fff !important; // !important for starlight override only
    box-shadow: inset 0 1px 0 1px rgba(255, 255, 255, 0.16);
    background-color: #1488fc;

    &:hover {
      background-color: #2793ff;
    }
  }
}