apsara/packages/raystack/components/accordion/accordion.module.css at e32e178dc00a555b2e8f86397404577b536a25e6 · raystack/apsara · 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
.accordion {
  width: 100%;
  color: var(--rs-color-foreground-base-primary);
}

.accordion-header {
  display: flex;
}

.accordion-trigger {
  display: flex;
  /* Todo: var does not exist for 36px */
  min-height: 36px;
  padding: 0 var(--rs-space-4);
  justify-content: space-between;
  align-items: center;
  gap: var(--rs-space-5);
  flex-shrink: 0;
  flex: 1;
  border: 0.5px solid var(--rs-color-border-base-primary);
  background: var(--rs-color-background-base-primary);
  cursor: pointer;
  text-align: left;
  outline: none;
  font-size: var(--rs-font-size-regular);
  line-height: var(--rs-line-height-regular);
  letter-spacing: var(--rs-letter-spacing-regular);
}

.accordion-item:not(:first-child) .accordion-trigger {
  border-top: none;
}

.accordion-trigger:hover,
.accordion-trigger:focus-visible {
  background-color: var(--rs-color-background-base-primary-hover);
}

.accordion-trigger:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.accordion-trigger[data-panel-open] .accordion-icon {
  transform: rotate(180deg);
}

.accordion-icon {
  color: var(--rs-color-foreground-base-secondary);
  pointer-events: none;
  flex-shrink: 0;
  width: var(--rs-space-4);
  height: var(--rs-space-4);
}

.accordion-content {
  height: var(--accordion-panel-height);
  overflow: hidden;
}

.accordion-content[data-starting-style],
.accordion-content[data-ending-style] {
  height: 0;
}

.accordion-content-inner {
  border: 0.5px solid var(--rs-color-border-base-primary);
  background: var(--rs-color-background-base-primary);
  box-shadow: var(--rs-shadow-inset);
  font-size: var(--rs-font-size-small);
  line-height: var(--rs-line-height-small);
  letter-spacing: var(--rs-letter-spacing-small);
  display: flex;
  align-items: center;
  gap: var(--rs-space-5);
  align-self: stretch;
  padding: var(--rs-space-5) var(--rs-space-4);
  border-top: 0px;
}

@media (prefers-reduced-motion: no-preference) {
  .accordion-icon {
    transition: transform 150ms ease-in-out;
  }

  .accordion-content {
    transition: height 150ms ease-out;
  }
}