rex-web/src/app/components/Dropdown.css at 5342d05880dee7d69d2d23685ec68a808e509262 · openstax/rex-web · 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
/* Dropdown component styles */

/* Keyframe animation for dropdown fade-in */
@keyframes dropdown-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* DropdownToggle styles */
.dropdown-toggle {
  cursor: pointer;
}

/* TabHiddenDropDown menu styles - applies to children that are not the toggle */
.dropdown-menu {
  animation: 100ms dropdown-fade-in ease-out;
  position: absolute;
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
  border: 1px solid var(--dropdown-form-border, #d5d5d5); /* theme.color.neutral.formBorder */
  top: calc(100% + 0.4rem);
  left: 0;
}

/* DropdownFocusWrapper styles */
.dropdown-focus-wrapper {
  overflow: visible;
}

/* DropdownList styles */
.dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0.6rem 0;
  background: var(--dropdown-form-background, #f5f5f5); /* theme.color.neutral.formBackground */
  z-index: 1;
}

.dropdown-list li {
  padding: 0.2rem;
}

.dropdown-list li button,
.dropdown-list li a {
  white-space: nowrap;
  text-decoration: none;
  display: flex;
  align-items: center;
  text-align: left;
  cursor: pointer;
  outline: none;
  border: none;
  padding-left: 0.8rem;
  margin: 0;
  height: 3rem;
  background: none;
  min-width: 7rem;

  /* textStyle from Typography - using CSS variables */
  font-family: var(--text-font-family, Helvetica, Arial, sans-serif);
  font-weight: var(--text-font-weight, normal);
  color: var(--dropdown-text-color, #424242); /* theme.color.text.default */
  font-size: 1.4rem;
  line-height: 2rem;
}

.dropdown-list li button:focus,
.dropdown-list li a:focus {
  background: var(--dropdown-form-border, #d5d5d5); /* theme.color.neutral.formBorder */
  outline: 0.2rem auto Highlight;
  outline: 0.2rem auto -webkit-focus-ring-color;
}

/* TabTransparentDropdown focus-within behavior */

/* Hide the second toggle by default */
.dropdown-transparent .dropdown-toggle-second {
  height: 0;
  width: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* Show the second toggle when focus is within the wrapper */
.dropdown-transparent .dropdown-focus-wrapper.focus-within + .dropdown-toggle-second,
.dropdown-transparent .dropdown-focus-wrapper:focus-within + .dropdown-toggle-second {
  height: unset;
  width: unset;
  clip: unset;
  overflow: visible;
}

/* Show the first toggle by default */
.dropdown-transparent .dropdown-focus-wrapper > .dropdown-toggle {
  height: unset;
  width: unset;
  clip: unset;
  overflow: visible;
}

/* Hide the first toggle when focus is within the wrapper */
.dropdown-transparent .dropdown-focus-wrapper.focus-within > .dropdown-toggle,
.dropdown-transparent .dropdown-focus-wrapper:focus-within > .dropdown-toggle {
  height: 0;
  width: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* Menu positioning and animation for TabTransparentDropdown */
.dropdown-transparent .dropdown-focus-wrapper > .dropdown-menu {
  animation: 100ms dropdown-fade-in ease-out;
  position: absolute;
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
  border: 1px solid var(--dropdown-form-border, #d5d5d5); /* theme.color.neutral.formBorder */
  top: calc(100% + 0.4rem);
  left: 0;
}

/* Hide the menu by default */
:where(.dropdown-transparent .dropdown-focus-wrapper > .dropdown-menu) {
  height: 0;
  width: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* Show the menu when focus is within the wrapper */
.dropdown-transparent .dropdown-focus-wrapper.focus-within > .dropdown-menu,
.dropdown-transparent .dropdown-focus-wrapper:focus-within > .dropdown-menu {
  height: unset;
  width: unset;
  clip: unset;
  overflow: visible;
}

/* TextResizerMenu customization for dropdown-menu */
.dropdown-menu.text-resizer-menu {
  background: #fff;
  right: 0;
  left: auto;
  top: calc(100% - 1px);
}

/* ContextMenu customization for dropdown-menu */
.dropdown-menu.context-menu {
  z-index: 2;
  border: 1px solid var(--dropdown-form-border, #d5d5d5); /* theme.color.neutral.formBorder */
  background-color: var(--dropdown-form-background, #f5f5f5); /* theme.color.neutral.formBackground */
  margin-bottom: 1rem; /* for last context menu to show with more space */

  menu {
    padding: 0;
  }
}

/* DisplayNote menu customization for dropdown-menu */
.dropdown-menu.display-note-menu {
  left: -4rem;
}