@x-plat/design-system 0.5.10 → 0.5.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -99,11 +99,9 @@
99
99
  .lib-xplat-select .select-trigger .select-trigger-icon svg {
100
100
  font-size: 20px;
101
101
  }
102
- .lib-xplat-select .select-content {
103
- position: absolute;
104
- left: 0;
105
- right: 0;
106
- width: 100%;
102
+ .lib-xplat-select-content {
103
+ position: fixed;
104
+ z-index: 1000;
107
105
  padding: var(--spacing-space-1) 0;
108
106
  border-radius: var(--spacing-radius-md);
109
107
  background-color: var(--semantic-surface-neutral-default);
@@ -114,50 +112,42 @@
114
112
  opacity: 0;
115
113
  transition: transform 0.2s ease, opacity 0.2s ease;
116
114
  }
117
- .lib-xplat-select .select-content.bottom {
118
- top: 100%;
119
- margin-top: var(--spacing-space-1);
120
- margin-bottom: 0;
115
+ .lib-xplat-select-content.bottom {
121
116
  transform: translateY(-8px);
122
117
  }
123
- .lib-xplat-select .select-content.bottom.visible {
118
+ .lib-xplat-select-content.bottom.visible {
124
119
  opacity: 1;
125
120
  transform: translateY(0);
126
121
  }
127
- .lib-xplat-select .select-content.bottom.exit {
122
+ .lib-xplat-select-content.bottom.exit {
128
123
  opacity: 0;
129
124
  transform: translateY(-8px);
130
125
  }
131
- .lib-xplat-select .select-content {
132
- }
133
- .lib-xplat-select .select-content.top {
134
- bottom: 100%;
135
- margin-bottom: var(--spacing-space-1);
136
- margin-top: 0;
126
+ .lib-xplat-select-content.top {
137
127
  transform: translateY(8px);
138
128
  }
139
- .lib-xplat-select .select-content.top.visible {
129
+ .lib-xplat-select-content.top.visible {
140
130
  opacity: 1;
141
131
  transform: translateY(0);
142
132
  }
143
- .lib-xplat-select .select-content.top.exit {
133
+ .lib-xplat-select-content.top.exit {
144
134
  opacity: 0;
145
135
  transform: translateY(8px);
146
136
  }
147
- .lib-xplat-select .select-item {
137
+ .lib-xplat-select-content .select-item {
148
138
  padding: var(--spacing-space-2) var(--spacing-space-3);
149
139
  font-size: 14px;
150
140
  cursor: pointer;
151
141
  transition: background-color 0.15s ease;
152
142
  outline: none;
153
143
  }
154
- .lib-xplat-select .select-item:hover:not(.disabled) {
144
+ .lib-xplat-select-content .select-item:hover:not(.disabled) {
155
145
  background-color: var(--semantic-surface-neutral-subtle);
156
146
  }
157
- .lib-xplat-select .select-item:focus-visible:not(.disabled) {
147
+ .lib-xplat-select-content .select-item:focus-visible:not(.disabled) {
158
148
  background-color: var(--semantic-surface-neutral-subtle);
159
149
  }
160
- .lib-xplat-select .select-item.disabled {
150
+ .lib-xplat-select-content .select-item.disabled {
161
151
  cursor: not-allowed;
162
152
  color: var(--semantic-text-disabled);
163
153
  }