@hotelcard/ui 0.0.16 → 0.0.17

package/dist/index.css

@@ -3472,4 +3472,506 @@
 .clearAllBtn {
   margin-left: var(--size-rem-0-5, 8px);
 }
+
+/* src/components/Filters/FilterPanel.module.css */
+.filterPanel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: var(--background-general-primary);
+}
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+}
+.filterSection {
+  padding: 24px 0;
+  border-bottom: 1px solid var(--border-general-divider);
+}
+.filterTitle {
+  font-family: var(--font-primary);
+  font-size: var(--text-label-large-font-size);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--text-label-large-line-height);
+  color: var(--content-general-secondary);
+  margin: 0 0 16px 0;
+}
+.priceRangeWrapper {
+  position: relative;
+  padding: 0 16px;
+}
+.histogram {
+  display: flex;
+  align-items: flex-end;
+  height: 45px;
+  width: 100%;
+}
+.histogramBar {
+  flex: 1;
+  min-width: 1px;
+  background-color: var(--border-general-divider);
+  border-right: 1px solid var(--background-general-primary);
+  transition: background-color 0.15s ease;
+}
+.histogramBar:last-child {
+  border-right: none;
+}
+.histogramBarActive {
+  background-color: var(--content-action-highlight-idle);
+}
+.sliderContainer {
+  position: relative;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  user-select: none;
+}
+.sliderTrack {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background-color: var(--border-general-divider);
+  border-radius: 2px;
+}
+.sliderActiveTrack {
+  position: absolute;
+  height: 4px;
+  background-color: var(--content-action-highlight-idle);
+  border-radius: 2px;
+  pointer-events: none;
+}
+.sliderHandle {
+  position: absolute;
+  width: 26px;
+  height: 26px;
+  background-color: var(--background-general-primary);
+  border-radius: 50%;
+  box-shadow: 0px 0.5px 4px 0px rgba(0, 0, 0, 0.12), 0px 6px 13px 0px rgba(0, 0, 0, 0.12);
+  cursor: grab;
+  transform: translateX(-50%);
+  z-index: 2;
+  transition: box-shadow 0.15s ease;
+}
+.sliderHandle:hover {
+  box-shadow: 0px 0.5px 4px 0px rgba(0, 0, 0, 0.16), 0px 6px 16px 0px rgba(0, 0, 0, 0.16);
+}
+.sliderHandleActive {
+  cursor: grabbing;
+  box-shadow: 0px 0.5px 4px 0px rgba(0, 0, 0, 0.2), 0px 8px 18px 0px rgba(0, 0, 0, 0.2);
+}
+.sliderHandle:focus {
+  outline: none;
+  box-shadow:
+    0px 0.5px 4px 0px rgba(0, 0, 0, 0.12),
+    0px 6px 13px 0px rgba(0, 0, 0, 0.12),
+    0 0 0 2px var(--content-action-highlight-idle);
+}
+.priceInputs {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-top: 16px;
+}
+.priceInputWrapper {
+  flex: 1;
+}
+.priceInput {
+  width: 100%;
+  height: 45px;
+  padding: 12px;
+  background-color: var(--background-general-primary);
+  border: 1px solid var(--content-general-tertiary);
+  border-radius: 4px;
+  font-family: var(--font-primary);
+  font-size: var(--text-paragraph-base-font-size);
+  font-weight: var(--font-weight-regular);
+  line-height: 1.4;
+  color: var(--content-general-primary);
+  box-sizing: border-box;
+}
+.priceInput:hover {
+  border-radius: var(--size-rem-0-5);
+  border: 1px solid var(--border-action-secondary-hover);
+  background: var(--background-general-primary);
+  color: var(--content-general-secondary);
+  font-family: var(--text-paragraph-base-font-family) !important;
+  font-size: var(--text-paragraph-base-font-size) !important;
+  font-style: normal;
+  font-weight: var(--text-paragraph-base-font-weight) !important;
+  line-height: var(--text-paragraph-base-line-height) !important;
+}
+.priceInput:focus {
+  outline: none;
+  border-radius: var(--size-rem-0-5);
+  border: 1px solid var(--misc-focus);
+  background: var(--background-general-primary);
+  box-shadow: 0 0 0 2px var(--misc-focus), 0 0 16px 4px var(--misc-focus);
+  color: var(--content-general-primary) !important;
+  font-family: var(--text-paragraph-base-font-family) !important;
+  font-size: var(--text-paragraph-base-font-size) !important;
+  font-style: normal;
+  font-weight: var(--text-paragraph-base-font-weight) !important;
+  line-height: var(--text-paragraph-base-line-height) !important;
+}
+.priceInputDivider {
+  width: 12px;
+  height: 1px;
+  background-color: var(--content-general-primary);
+  flex-shrink: 0;
+}
+.discountList {
+  display: flex;
+  flex-direction: column;
+  padding: var(--size-rem-0-75) var(--size-rem-0-875) var(--size-rem-0-75);
+}
+.discountRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+}
+.discountCheckboxLabel {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+.checkboxButton {
+  width: 24px;
+  height: 24px;
+  position: relative;
+  overflow: hidden;
+}
+.checkbox {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.checkboxBox {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  background-color: var(--background-general-primary);
+  border: 1px solid var(--border-general-divider);
+  border-radius: 2px;
+  transition: all 0.15s ease;
+}
+.checkbox:checked + .checkboxBox {
+  background-color: var(--background-action-highlight-idle);
+}
+.checkbox:focus + .checkboxBox {
+  box-shadow: none !important;
+}
+.discountCheckboxLabel:hover .checkboxBox {
+  border-color: var(--content-action-highlight-idle);
+}
+.checkIcon {
+  width: 12px;
+  height: 10px;
+  color: var(--background-general-primary);
+}
+.discountLabel {
+  color: var(--content-general-primary);
+  font-family: var(--text-label-medium-font-family);
+  font-size: var(--text-label-medium-font-size);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--text-label-medium-line-height);
+}
+.discountCount {
+  color: var(--content-general-tertiary);
+  font-family: var(--text-label-medium-font-family);
+  font-size: var(--text-label-medium-font-size);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--text-label-medium-line-height);
+}
+.discountRowDisabled {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.discountRowDisabled .discountCheckboxLabel {
+  cursor: not-allowed;
+}
+.discountRowDisabled .checkboxBox {
+  background-color: var(--background-general-secondary);
+}
+.categoryChips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.categoryChip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 8px 8px 16px;
+  background-color: var(--background-general-primary);
+  border: 2px solid var(--border-general-divider);
+  border-radius: 9999px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+}
+.categoryChip:hover {
+  border-color: var(--content-action-highlight-idle);
+}
+.categoryChipSelected {
+  background-color: var(--background-action-secondary-idle);
+  border-color: var(--content-action-highlight-idle);
+}
+.categoryStars {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+.categoryStar {
+  width: 16px;
+  height: 16px;
+  color: var(--content-general-tertiary);
+}
+.categoryChipSelected .categoryStar {
+  color: var(--content-action-highlight-idle);
+}
+.categoryLabel {
+  font-family: var(--font-primary);
+  font-size: var(--text-paragraph-base-font-size);
+  font-weight: var(--font-weight-medium);
+  line-height: 24px;
+  color: var(--content-general-primary);
+  white-space: nowrap;
+}
+.categoryCount {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  min-width: 28px;
+  height: 28px;
+  background-color: var(--background-general-secondary);
+  border-radius: 9999px;
+  font-family: var(--font-primary);
+  font-size: var(--text-label-large-font-size);
+  font-weight: var(--font-weight-medium);
+  line-height: 28px;
+  color: var(--content-general-primary);
+}
+.categoryFooter {
+  margin-top: 16px;
+}
+.categoryFooterText {
+  font-family: var(--font-primary);
+  font-size: var(--text-label-small-font-size);
+  font-weight: var(--font-weight-medium);
+  line-height: 16px;
+  color: var(--content-general-tertiary);
+}
+.categoryFooterLink {
+  color: var(--content-action-link-idle);
+  text-decoration: underline;
+}
+.categoryFooterLink:hover {
+  color: var(--content-action-link-hover);
+}
+.clearSection {
+  padding: 24px 0;
+}
+.clearAllLink {
+  font-family: var(--font-primary);
+  font-size: var(--text-paragraph-base-font-size);
+  font-weight: var(--font-weight-medium);
+  line-height: 24px;
+  color: var(--content-action-link-idle);
+  text-decoration: underline;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+.clearAllLink:hover {
+  color: var(--content-action-link-hover);
+}
+.hidden {
+  display: none;
+}
+@media (min-width: 1024px) {
+  .filterPanel {
+    display: flex;
+    width: 100%;
+    flex-shrink: 0;
+  }
+}
+
+/* src/components/Filters/FilterModal.module.css */
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  height: 100dvh;
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--size-rem-4, 64px);
+  box-sizing: border-box;
+  animation: fadeIn 0.2s ease-out;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.modal {
+  position: relative;
+  width: 100%;
+  max-width: 560px;
+  height: 100%;
+  max-height: calc(100vh - var(--size-rem-8, 128px));
+  background-color: var(--background-general-primary);
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--radius-xl, 16px);
+  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.25);
+  animation: slideUp 0.3s ease-out;
+  overflow: hidden;
+}
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@media (max-width: 767px) {
+  .overlay {
+    background-color: var(--background-general-primary);
+    padding: 0;
+  }
+  .modal {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    border-radius: 0;
+    box-shadow: none;
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--size-rem-1, 16px);
+  height: 76px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border-general-divider);
+  background-color: var(--background-general-primary);
+}
+.selectedFilters {
+  padding: var(--size-rem-0, 0) var(--size-rem-3, 48px) var(--size-rem-1-5, 24px) var(--size-rem-3, 48px);
+  background-color: var(--background-general-primary);
+  flex-shrink: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+@media (max-width: 1023px) {
+  .selectedFilters {
+    border-bottom: unset !important;
+    padding: var(--size-rem-0, 0) var(--size-rem-1, 16px);
+  }
+}
+.title {
+  flex: 1;
+  margin: 0;
+  color: var(--content-general-primary);
+  text-align: center;
+  font-family: var(--text-heading-small-font-family, inherit);
+  font-size: var(--text-heading-small-font-size, 18px);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--text-heading-small-line-height, 1.33);
+  letter-spacing: -0.6px;
+}
+@media (max-width: 1023px) {
+  .title {
+    text-align: left;
+  }
+}
+.content {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.filterPanel {
+  padding: var(--size-rem-0, 0) var(--size-rem-3, 48px) var(--size-rem-1-5, 24px) var(--size-rem-3, 48px);
+  margin: 0;
+  width: 100% !important;
+  display: flex !important;
+}
+@media (max-width: 1023px) {
+  .filterPanel {
+    padding: var(--size-rem-0, 0) var(--size-rem-1, 16px);
+  }
+}
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--size-rem-1-5, 24px) var(--size-rem-3, 48px) var(--size-rem-1-5, 24px) var(--size-rem-3, 48px);
+  height: 92px;
+  flex-shrink: 0;
+  border-top: 1px solid var(--border-general-divider);
+  background-color: var(--background-general-primary);
+}
+@media (max-width: 1023px) {
+  .footer {
+    padding: var(--size-rem-1-5, 24px) var(--size-rem-1, 16px);
+  }
+}
+.footerLink {
+  transition: color 0.15s ease;
+  color: var(--content-action-link-idle);
+  font-family: var(--text-label-large-font-family, inherit);
+  font-size: var(--text-label-large-font-size, 16px);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--text-label-large-line-height, 1.55);
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
+  cursor: pointer;
+}
+.footerLink:focus {
+  outline: none;
+  box-shadow: none;
+}
+.footerLink:disabled {
+  color: var(--content-action-disabled-idle);
+  cursor: not-allowed;
+}
 /*# sourceMappingURL=index.css.map */