← All changes
|
assets/css/shortcodes/trip-search-shortcode.css
+211
-14
3.0.2.9
→
3.0.16
View file →
| @@ -9,10 +9,10 @@ | ||
| 9 | 9 | /* ------------------------------------------------------------------------- |
| 10 | 10 | Scope: high specificity (body + block class). box-sizing for predictable layout. |
| 11 | 11 | ------------------------------------------------------------------------- */ |
| 12 | 12 | body .yatra-trip-search-shortcode { |
| 13 | - --yatra-ts-accent: #2563eb; | |
| 14 | - --yatra-ts-accent-hover: #1d4ed8; | |
| 13 | + --yatra-ts-accent: var(--yatra-primary-dark, #2563eb); | |
| 14 | + --yatra-ts-accent-hover: var(--yatra-primary-darker, #1d4ed8); | |
| 15 | 15 | --yatra-ts-surface: #ffffff; |
| 16 | 16 | --yatra-ts-text: #0f172a; |
| 17 | 17 | --yatra-ts-muted: #64748b; |
| 18 | 18 | --yatra-ts-border: #e2e8f0; |
| @@ -237,8 +237,16 @@ | ||
| 237 | 237 | Dropdown columns |
| 238 | 238 | ------------------------------------------------------------------------- */ |
| 239 | 239 | body .yatra-trip-search-shortcode .yatra-search-dropdown { |
| 240 | 240 | position: relative !important; |
| 241 | + /* display:flex + align-items:stretch makes the trigger fill the full bar | |
| 242 | + height (same mechanism as the keyword segment), so the trigger's own | |
| 243 | + align-items:center can vertically centre the icon + label/value within | |
| 244 | + the bar. As a plain block the trigger sat at the top, leaving the labels | |
| 245 | + higher than the Search field. The absolutely-positioned menu is out of | |
| 246 | + flow, so it's unaffected. */ | |
| 247 | + display: flex !important; | |
| 248 | + align-items: stretch !important; | |
| 241 | 249 | flex: 1 1 auto !important; |
| 242 | 250 | min-width: 180px !important; |
| 243 | 251 | margin: 0 !important; |
| 244 | 252 | padding: 0 !important; |
| @@ -244,8 +252,19 @@ | ||
| 244 | 252 | padding: 0 !important; |
| 245 | 253 | isolation: isolate; |
| 246 | 254 | } |
| 247 | 255 | |
| 256 | +/* When a dropdown is open, lift its whole (isolated) stacking context above the | |
| 257 | + sibling dropdowns that follow it in the DOM. `isolation: isolate` above makes | |
| 258 | + each dropdown its own stacking context, so without this the open dropdown's | |
| 259 | + absolutely-positioned menu is painted UNDER later siblings. Most visible on | |
| 260 | + mobile, where the bar stacks vertically and the open Destination menu | |
| 261 | + overlaps the Activity / Duration / Budget rows below it (their labels bled | |
| 262 | + through). Applies on every viewport, so it also hardens desktop. */ | |
| 263 | +body .yatra-trip-search-shortcode .yatra-search-dropdown.open { | |
| 264 | + z-index: var(--yatra-ts-z-dropdown) !important; | |
| 265 | +} | |
| 266 | + | |
| 248 | 267 | body .yatra-trip-search-shortcode .yatra-dropdown-trigger { |
| 249 | 268 | display: flex !important; |
| 250 | 269 | flex-direction: row !important; |
| 251 | 270 | align-items: center !important; |
| @@ -383,9 +402,9 @@ | ||
| 383 | 402 | } |
| 384 | 403 | |
| 385 | 404 | body .yatra-trip-search-shortcode .yatra-dropdown-filter-input:focus { |
| 386 | 405 | outline: none !important; |
| 387 | - border-color: #3b82f6 !important; | |
| 406 | + border-color: var(--yatra-primary, #3b82f6) !important; | |
| 388 | 407 | background: #ffffff !important; |
| 389 | 408 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important; |
| 390 | 409 | } |
| 391 | 410 | |
| @@ -468,9 +487,9 @@ | ||
| 468 | 487 | } |
| 469 | 488 | |
| 470 | 489 | body .yatra-trip-search-shortcode .yatra-dropdown-option.selected { |
| 471 | 490 | background: #eff6ff !important; |
| 472 | - color: #1d4ed8 !important; | |
| 491 | + color: var(--yatra-primary-darker, #1d4ed8) !important; | |
| 473 | 492 | font-weight: 600 !important; |
| 474 | 493 | padding-right: 26px !important; |
| 475 | 494 | } |
| 476 | 495 | |
| @@ -537,9 +556,9 @@ | ||
| 537 | 556 | font-weight: 600 !important; |
| 538 | 557 | color: #1f2937 !important; |
| 539 | 558 | padding: 4px 8px !important; |
| 540 | 559 | background: #ffffff !important; |
| 541 | - border: 1px solid #3b82f6 !important; | |
| 560 | + border: 1px solid var(--yatra-primary, #3b82f6) !important; | |
| 542 | 561 | border-radius: 4px !important; |
| 543 | 562 | } |
| 544 | 563 | |
| 545 | 564 | /* Same horizontal inset as .yatra-duration-badges (padding 8px 10px) so the track matches the badge row */ |
| @@ -570,26 +589,50 @@ | ||
| 570 | 589 | position: absolute !important; |
| 571 | 590 | height: 6px !important; |
| 572 | 591 | top: 50% !important; |
| 573 | 592 | transform: translateY(-50%) !important; |
| 574 | - background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%) !important; | |
| 593 | + background: linear-gradient(90deg, var(--yatra-primary, #3b82f6) 0%, var(--yatra-primary-dark, #2563eb) 100%) !important; | |
| 575 | 594 | border-radius: 3px !important; |
| 576 | 595 | box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3) !important; |
| 577 | 596 | } |
| 578 | 597 | |
| 598 | +/* Range inputs centred on the track (top:50%), matching the Price Range | |
| 599 | + filter slider. The previous top:37% left the thumbs floating above the | |
| 600 | + track. Inputs are click-through; only their thumbs capture pointer events. */ | |
| 579 | 601 | body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range'] { |
| 580 | 602 | position: absolute !important; |
| 603 | + left: 0 !important; | |
| 581 | 604 | width: 100% !important; |
| 582 | 605 | height: 6px !important; |
| 583 | - top: 37% !important; | |
| 606 | + top: 50% !important; | |
| 607 | + transform: translateY(-50%) !important; | |
| 584 | 608 | margin: 0 !important; |
| 585 | 609 | padding: 0 !important; |
| 610 | + border: 0 !important; | |
| 586 | 611 | background: transparent !important; |
| 587 | 612 | -webkit-appearance: none !important; |
| 588 | 613 | appearance: none !important; |
| 589 | - pointer-events: none; | |
| 614 | + pointer-events: none !important; | |
| 615 | + box-sizing: border-box !important; | |
| 616 | + cursor: pointer !important; | |
| 590 | 617 | } |
| 591 | 618 | |
| 619 | +/* Max thumb above min so an overlapping max handle stays grabbable (same as | |
| 620 | + the price slider). z-index intentionally NOT !important. */ | |
| 621 | +body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range'].yatra-range-min { | |
| 622 | + z-index: 3; | |
| 623 | +} | |
| 624 | + | |
| 625 | +body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range'].yatra-range-max { | |
| 626 | + z-index: 4; | |
| 627 | +} | |
| 628 | + | |
| 629 | +body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-webkit-slider-runnable-track { | |
| 630 | + height: 6px !important; | |
| 631 | + background: transparent !important; | |
| 632 | + border-radius: 3px !important; | |
| 633 | +} | |
| 634 | + | |
| 592 | 635 | body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-webkit-slider-thumb { |
| 593 | 636 | -webkit-appearance: none !important; |
| 594 | 637 | appearance: none !important; |
| 595 | 638 | width: 20px !important; |
| @@ -595,27 +638,45 @@ | ||
| 595 | 638 | width: 20px !important; |
| 596 | 639 | height: 20px !important; |
| 597 | 640 | border-radius: 50% !important; |
| 598 | 641 | background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important; |
| 599 | - border: 3px solid #3b82f6 !important; | |
| 600 | - cursor: pointer !important; | |
| 642 | + border: 3px solid var(--yatra-primary, #3b82f6) !important; | |
| 643 | + cursor: grab !important; | |
| 601 | 644 | pointer-events: all !important; |
| 602 | - z-index: 3 !important; | |
| 603 | 645 | box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1) !important; |
| 646 | + margin-top: -7px !important; | |
| 604 | 647 | } |
| 605 | 648 | |
| 649 | +body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-webkit-slider-thumb:hover { | |
| 650 | + transform: scale(1.06) !important; | |
| 651 | + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35) !important; | |
| 652 | +} | |
| 653 | + | |
| 654 | +body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-webkit-slider-thumb:active { | |
| 655 | + cursor: grabbing !important; | |
| 656 | +} | |
| 657 | + | |
| 658 | +body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-moz-range-track { | |
| 659 | + height: 6px !important; | |
| 660 | + background: transparent !important; | |
| 661 | + border-radius: 3px !important; | |
| 662 | +} | |
| 663 | + | |
| 606 | 664 | body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-moz-range-thumb { |
| 607 | 665 | width: 20px !important; |
| 608 | 666 | height: 20px !important; |
| 609 | 667 | border-radius: 50% !important; |
| 610 | 668 | background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important; |
| 611 | - border: 3px solid #3b82f6 !important; | |
| 612 | - cursor: pointer !important; | |
| 669 | + border: 3px solid var(--yatra-primary, #3b82f6) !important; | |
| 670 | + cursor: grab !important; | |
| 613 | 671 | pointer-events: all !important; |
| 614 | - z-index: 3 !important; | |
| 615 | 672 | box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1) !important; |
| 616 | 673 | } |
| 617 | 674 | |
| 675 | +body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-moz-range-thumb:hover { | |
| 676 | + transform: scale(1.06) !important; | |
| 677 | +} | |
| 678 | + | |
| 618 | 679 | /* ------------------------------------------------------------------------- |
| 619 | 680 | Submit button |
| 620 | 681 | ------------------------------------------------------------------------- */ |
| 621 | 682 | body .yatra-trip-search-shortcode .yatra-search-button-container { |
| @@ -742,5 +803,141 @@ | ||
| 742 | 803 | |
| 743 | 804 | body .yatra-trip-search-shortcode .yatra-duration-menu { |
| 744 | 805 | min-width: 100% !important; |
| 745 | 806 | } |
| 807 | +} | |
| 808 | + | |
| 809 | +/* --------------------------------------------------------------------------- | |
| 810 | + Date field (optional, opt-in via Settings → Search & Listing → Date). | |
| 811 | + Mirrors the keyword segment so it sits inline with the other search fields. | |
| 812 | + Uses a native <input type="date"> for zero-dependency, mobile-friendly UX. | |
| 813 | +--------------------------------------------------------------------------- */ | |
| 814 | +body .yatra-trip-search-shortcode .yatra-search-date-segment { | |
| 815 | + display: flex !important; | |
| 816 | + flex: 1; | |
| 817 | + align-items: stretch !important; | |
| 818 | + min-width: 150px; | |
| 819 | + max-width: 240px; | |
| 820 | + margin: 0 !important; | |
| 821 | + padding: 0 !important; | |
| 822 | +} | |
| 823 | + | |
| 824 | +body .yatra-trip-search-shortcode .yatra-search-date-inner { | |
| 825 | + display: flex !important; | |
| 826 | + flex-direction: row; | |
| 827 | + align-items: center !important; | |
| 828 | + gap: 10px !important; | |
| 829 | + width: 100% !important; | |
| 830 | + min-height: var(--yatra-ts-row) !important; | |
| 831 | + padding: 8px 12px !important; | |
| 832 | + margin: 0 !important; | |
| 833 | + border: 1px solid transparent !important; | |
| 834 | + border-radius: calc(var(--yatra-ts-radius) - 6px) !important; | |
| 835 | + background: transparent !important; | |
| 836 | + box-shadow: none !important; | |
| 837 | + transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; | |
| 838 | +} | |
| 839 | + | |
| 840 | +body .yatra-trip-search-shortcode .yatra-search-date-inner:hover { | |
| 841 | + background: #f8fafc !important; | |
| 842 | +} | |
| 843 | + | |
| 844 | +body .yatra-trip-search-shortcode .yatra-search-date-inner:focus-within { | |
| 845 | + background: #fafafa !important; | |
| 846 | + border-color: rgba(37, 99, 235, 0.28) !important; | |
| 847 | + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; | |
| 848 | + outline: none !important; | |
| 849 | +} | |
| 850 | + | |
| 851 | +body .yatra-trip-search-shortcode .yatra-search-date-leading { | |
| 852 | + display: flex !important; | |
| 853 | + flex-shrink: 0 !important; | |
| 854 | + align-items: center !important; | |
| 855 | + justify-content: center !important; | |
| 856 | + width: 20px !important; | |
| 857 | + height: 20px !important; | |
| 858 | + margin: 0 !important; | |
| 859 | + padding: 0 !important; | |
| 860 | + border: none !important; | |
| 861 | + background: transparent !important; | |
| 862 | + color: #64748b !important; | |
| 863 | +} | |
| 864 | + | |
| 865 | +body .yatra-trip-search-shortcode .yatra-search-date-leading svg { | |
| 866 | + display: block !important; | |
| 867 | + width: 20px !important; | |
| 868 | + height: 20px !important; | |
| 869 | + max-width: none !important; | |
| 870 | + fill: none !important; | |
| 871 | + stroke: currentColor !important; | |
| 872 | + vertical-align: middle !important; | |
| 873 | +} | |
| 874 | + | |
| 875 | +body .yatra-trip-search-shortcode .yatra-search-date-inner:focus-within .yatra-search-date-leading { | |
| 876 | + color: #2563eb !important; | |
| 877 | +} | |
| 878 | + | |
| 879 | +body .yatra-trip-search-shortcode .yatra-search-date-stack { | |
| 880 | + display: flex !important; | |
| 881 | + flex-direction: column !important; | |
| 882 | + align-items: flex-start !important; | |
| 883 | + justify-content: center !important; | |
| 884 | + gap: 4px !important; | |
| 885 | + flex: 1 1 auto !important; | |
| 886 | + min-width: 0 !important; | |
| 887 | + margin: 0 !important; | |
| 888 | + padding: 0 !important; | |
| 889 | +} | |
| 890 | + | |
| 891 | +body .yatra-trip-search-shortcode .yatra-search-date-stack .yatra-dropdown-label { | |
| 892 | + margin: 0 !important; | |
| 893 | + padding: 0 !important; | |
| 894 | +} | |
| 895 | + | |
| 896 | +body .yatra-trip-search-shortcode .yatra-search-date-input { | |
| 897 | + display: block !important; | |
| 898 | + width: 100% !important; | |
| 899 | + min-width: 0 !important; | |
| 900 | + margin: 0 !important; | |
| 901 | + padding: 0 !important; | |
| 902 | + border: none !important; | |
| 903 | + border-radius: 0 !important; | |
| 904 | + background: transparent !important; | |
| 905 | + background-color: transparent !important; | |
| 906 | + box-shadow: none !important; | |
| 907 | + font-size: 15px !important; | |
| 908 | + font-weight: 600 !important; | |
| 909 | + line-height: 1.3 !important; | |
| 910 | + color: var(--yatra-ts-text) !important; | |
| 911 | + font-family: inherit !important; | |
| 912 | +} | |
| 913 | + | |
| 914 | +body .yatra-trip-search-shortcode .yatra-search-date-input:focus { | |
| 915 | + outline: none !important; | |
| 916 | + box-shadow: none !important; | |
| 917 | +} | |
| 918 | + | |
| 919 | +body .yatra-trip-search-shortcode .yatra-search-date-input::-webkit-calendar-picker-indicator { | |
| 920 | + cursor: pointer; | |
| 921 | + opacity: 0.55; | |
| 922 | + margin: 0; | |
| 923 | +} | |
| 924 | + | |
| 925 | +body .yatra-trip-search-shortcode .yatra-search-date-input::-webkit-calendar-picker-indicator:hover { | |
| 926 | + opacity: 0.9; | |
| 927 | +} | |
| 928 | + | |
| 929 | +/* When flatpickr upgrades the native date input it becomes a read-only text | |
| 930 | + field opened by click; show a pointer cursor and keep the caret hidden. */ | |
| 931 | +body .yatra-trip-search-shortcode .yatra-search-date-input.flatpickr-input { | |
| 932 | + cursor: pointer !important; | |
| 933 | + caret-color: transparent !important; | |
| 934 | +} | |
| 935 | + | |
| 936 | +/* Placeholder ("Any date") shown when no date is selected. Native type="date" | |
| 937 | + ignores placeholder, but flatpickr converts the field to a text input where | |
| 938 | + it renders — matching the muted placeholder styling of the keyword field. */ | |
| 939 | +body .yatra-trip-search-shortcode .yatra-search-date-input::placeholder { | |
| 940 | + color: #94a3b8 !important; | |
| 941 | + font-weight: 500 !important; | |
| 942 | + opacity: 1 !important; | |
| 746 | 943 | } |