UNPKG

@lovebowls/leagueelements

Version:

League Elements package for LoveBowls

10 lines • 24 kB
1
2
3
4
5
6
7
8
9
10
export const dropdownStyles: "\n .dropdown-shared {\n position: relative;\n display: inline-block;\n }\n \n .dropdown-select-shared {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n background-color: var(--le-background-color-panel, #fff);\n border: 1px solid var(--le-border-color-medium, #ddd);\n border-radius: var(--le-border-radius-small, 3px);\n padding: var(--le-padding-xs, 0.25rem) var(--le-padding-m, 0.75rem);\n padding-right: calc(var(--le-padding-m, 0.75rem) * 2);\n font-size: var(--le-font-size-base, 1em);\n color: var(--le-text-color-primary, #333);\n cursor: pointer;\n line-height: 1.4;\n max-width: 100%;\n width: auto;\n background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");\n background-repeat: no-repeat;\n background-position: right 0.5em center;\n background-size: 1em;\n }\n \n .dropdown-select-shared:hover {\n border-color: var(--le-border-color-dark, #ccc);\n }\n \n .dropdown-select-shared:focus {\n outline: none;\n border-color: var(--le-text-color-accent, #2196f3);\n box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);\n }\n \n /* Mobile-specific adjustments */\n @media (max-width: 480px) {\n .dropdown-select-shared {\n font-size: 1.1em;\n padding: 0.3rem 2rem 0.3rem 0.5rem;\n background-size: 0.8em;\n }\n }\n \n /* For dropdown containers that need to be right-aligned */\n .dropdown-container-right {\n display: flex;\n justify-content: flex-end;\n }\n \n /* For dropdowns within flexbox layouts */\n .dropdown-container-flex {\n display: flex;\n align-items: center;\n gap: var(--le-padding-s, 0.5rem);\n }\n\n /* Dropdown Menu Styles (for button-triggered dropdowns like export menu) */\n .dropdown-menu-shared {\n position: relative;\n display: inline-block;\n }\n \n .dropdown-menu-button-shared {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n background-color: var(--le-background-color-panel, #fff);\n border: 1px solid var(--le-border-color-medium, #ddd);\n border-radius: var(--le-border-radius-small, 3px);\n padding: var(--le-padding-xs, 0.25rem) var(--le-padding-m, 0.75rem);\n padding-right: calc(var(--le-padding-m, 0.75rem) * 2);\n font-size: var(--le-font-size-base, 1em);\n color: var(--le-text-color-primary, #333);\n cursor: pointer;\n line-height: 1.4;\n max-width: 100%;\n width: auto;\n min-width: auto;\n background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");\n background-repeat: no-repeat;\n background-position: right 0.5em center;\n background-size: 1em;\n }\n \n .dropdown-menu-button-shared:hover {\n border-color: var(--le-border-color-dark, #ccc);\n background-color: var(--le-background-color-hover, #f1f1f1);\n }\n \n .dropdown-menu-button-shared:focus {\n outline: none;\n border-color: var(--le-text-color-accent, #2196f3);\n box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);\n }\n \n .dropdown-menu-list-shared {\n display: none;\n position: absolute;\n right: 0;\n top: 100%;\n background-color: var(--le-background-color-panel, #fff);\n min-width: 160px;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n z-index: 1000;\n border-radius: var(--le-border-radius-small, 3px);\n border: 1px solid var(--le-border-color-medium, #ddd);\n overflow: hidden;\n }\n \n .dropdown-menu-list-shared.show {\n display: block;\n }\n \n .dropdown-menu-item-shared {\n color: var(--le-text-color-primary, #333);\n padding: var(--le-padding-s, 0.5rem) var(--le-padding-m, 1rem);\n text-decoration: none;\n display: block;\n text-align: left;\n width: 100%;\n background: none;\n border: none;\n cursor: pointer;\n font-size: var(--le-font-size-base, 1em);\n box-sizing: border-box;\n margin: 0;\n min-height: 2.5em;\n line-height: 1.5;\n }\n \n .dropdown-menu-item-shared:hover {\n background-color: var(--le-background-color-hover, #f1f1f1);\n }\n \n .dropdown-menu-item-shared:active {\n background-color: var(--le-background-color-active, #e1e1e1);\n }\n\n /* Mobile-specific adjustments for dropdown menus */\n @media (max-width: 480px) {\n .dropdown-menu-button-shared {\n font-size: 1.1em;\n padding: 0.3rem 2rem 0.3rem 0.5rem;\n background-size: 0.8em;\n }\n \n .dropdown-menu-shared.mobile-full-width {\n width: 100%;\n }\n \n .dropdown-menu-shared.mobile-full-width .dropdown-menu-button-shared {\n width: 100%;\n }\n }\n"; export const panelStyles: "\n .panel-header-shared {\n padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\n border-bottom: 1px solid var(--le-border-color-medium, #eee);\n font-weight: bold;\n color: var(--le-text-color-primary, #333);\n background-color: var(--le-background-color-header, #f9f9f9);\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .panel-content-shared {\n padding: var(--le-padding-m, 1.25em);\n background-color: var(--le-background-color-panel, #fff);\n /* Common border for content area if needed\n border: 1px solid var(--le-border-color-light, #f0f0f0);\n */\n }\n"; export const buttonStyles: "\n .button-shared {\n padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\n border: 1px solid var(--le-border-color-medium, #ccc);\n background-color: var(--le-background-color-button, #f0f0f0);\n color: var(--le-text-color-primary, #333); /* Ensure text color contrasts with button background */\n cursor: pointer;\n border-radius: var(--le-border-radius-standard, 4px);\n font-size: var(--le-font-size-medium, 1.15em); /* Increased font size */\n text-decoration: none;\n display: inline-block;\n text-align: center;\n line-height: normal; /* Ensure consistent line height */\n white-space: nowrap; /* Prevent text wrapping */\n vertical-align: middle; /* Align nicely if next to text/icons */\n user-select: none; /* Prevent text selection on click */\n transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Smooth transitions */\n }\n\n .button-shared:hover:not(:disabled) {\n background-color: var(--le-background-color-button-hover, #e0e0e0);\n border-color: var(--le-border-color-dark, #bbb); /* Slightly darker border on hover */\n /* color: var(--le-text-color-accent-hover, inherit); Optional: change text color on hover */\n }\n\n .button-shared:active:not(:disabled) {\n /* Optional: style for active (pressed) state */\n /* background-color: var(--le-background-color-button-active, #d0d0d0); */\n }\n\n .button-shared:disabled,\n .button-shared.disabled { /* Allow class-based disabling too */\n background-color: var(--le-background-color-button-disabled, #eee);\n color: var(--le-text-color-secondary, #aaa);\n border-color: var(--le-border-color-medium, #ccc); /* Use medium border for disabled state */\n cursor: not-allowed;\n opacity: 0.7; /* Visually indicate disabled state */\n }\n\n /* Small button variant */\n .button-shared.button-sm {\n padding: var(--le-padding-xs, 0.4rem) var(--le-padding-s, 0.75rem); /* Increased padding */\n font-size: var(--le-font-size-small, 1em); /* Increased small font size */\n /* line-height can be tighter if needed for small buttons */\n /* line-height: 1.2; */\n }\n\n /* Variations */\n .button-shared.button-primary {\n background-color: var(--le-color-primary, #007bff);\n color: var(--le-text-color-on-primary, #fff);\n border-color: var(--le-color-primary, #007bff);\n }\n .button-shared.button-primary:hover:not(:disabled) {\n background-color: var(--le-color-primary-hover, #0056b3);\n border-color: var(--le-color-primary-hover, #0056b3);\n }\n\n .button-shared.button-secondary-light {\n background-color: var(--le-background-color-button-secondary-light, #f8f9fa);\n color: var(--le-text-color-secondary-light-text, #212529);\n border-color: var(--le-border-color-secondary-light, #ced4da);\n }\n .button-shared.button-secondary-light:hover:not(:disabled) {\n background-color: var(--le-background-color-button-secondary-light-hover, #e2e6ea);\n border-color: var(--le-border-color-secondary-light-hover, #dae0e5);\n color: var(--le-text-color-secondary-light-text-hover, #212529);\n }\n\n /* Example for a darker secondary button if needed elsewhere \n .button-shared.button-secondary {\n background-color: var(--le-color-secondary, #6c757d); \n color: var(--le-text-color-on-secondary, #fff);\n border-color: var(--le-color-secondary, #6c757d);\n }\n .button-shared.button-secondary:hover:not(:disabled) {\n background-color: var(--le-color-secondary-hover, #5a6268);\n border-color: var(--le-color-secondary-hover, #5a6268);\n }\n */\n"; export const modalStyles: "\n .modal-shared-overlay {\n display: none; /* Hidden by default */\n position: fixed;\n z-index: var(--le-z-index-modal-overlay, 1000); /* Ensure it's on top */\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: var(--le-background-color-modal-overlay, rgba(0,0,0,0.4));\n }\n\n .modal-shared-content {\n background-color: var(--le-background-color-panel, #fff);\n margin: var(--le-modal-margin-top, 10%) auto; /* Default to 10% from top, centered */\n padding: 0; /* Remove padding, header/body/footer will handle it */\n border: 1px solid var(--le-border-color-dark, #ccc);\n width: var(--le-modal-width, 90%); /* Increased width for mobile */\n max-width: var(--le-modal-max-width, 600px);\n border-radius: var(--le-border-radius-large, 8px);\n box-shadow: var(--le-shadow-modal, 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19));\n display: flex;\n flex-direction: column;\n }\n\n /* Specific styles for mobile-view class, used by leagueMatch.js */\n .modal-shared-content.mobile-view {\n margin: 5% auto; /* Less margin from top on mobile */\n width: var(--le-modal-width-mobile, 95%); /* Even wider on mobile */\n max-width: var(--le-modal-max-width-mobile, 650px); /* Increased max-width for mobile */\n }\n\n .modal-shared-header {\n /* Utilizes .panel-header-shared for base styling if desired, or define fully here */\n /* This example assumes it might be combined with .panel-header-shared or similar */\n padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\n border-bottom: 1px solid var(--le-border-color-medium, #eee);\n font-weight: bold;\n color: var(--le-text-color-primary, #333);\n background-color: var(--le-background-color-header, #f9f9f9); /* Modal header distinct background */\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: var(--le-font-size-large, 1.4em); /* Increased large font size */\n border-top-left-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n border-top-right-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n }\n\n .modal-shared-header .close-button-shared { /* Specific styling for a close button if needed */\n color: var(--le-text-color-secondary, #aaa);\n font-size: 1.75em; /* Increased size */\n font-weight: bold;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .modal-shared-header .close-button-shared:hover,\n .modal-shared-header .close-button-shared:focus {\n color: var(--le-text-color-primary, #000);\n text-decoration: none;\n }\n \n .modal-shared-body {\n padding: var(--le-padding-m, 1.25em); /* Increased padding */\n overflow-y: auto; /* Allow body to scroll if content is too long */\n flex-grow: 1; /* Allows body to take up available space if modal has fixed height */\n }\n\n .modal-shared-footer {\n padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\n text-align: right;\n border-top: 1px solid var(--le-border-color-medium, #eee);\n background-color: var(--le-background-color-header, #f9f9f9); /* Optional: footer background */\n border-bottom-left-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n border-bottom-right-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n }\n\n .modal-shared-footer .button-shared + .button-shared { /* Spacing between buttons in footer */\n margin-left: var(--le-padding-s, 0.75em); /* Increased margin */\n }\n"; export const formStyles: "\n .form-group-shared {\n margin-bottom: var(--le-padding-m, 1.25em); /* Increased margin */\n }\n\n .form-label-shared {\n display: block;\n margin-bottom: var(--le-padding-xs, 0.4em); /* Increased margin */\n font-weight: bold;\n color: var(--le-text-color-primary, #333);\n font-size: var(--le-font-size-medium, 1.15em); /* Increased font size */\n }\n\n .form-input-shared,\n .form-textarea-shared,\n .form-select-shared {\n width: 100%;\n padding: var(--le-padding-s, 0.75em); /* Increased padding */\n border: 1px solid var(--le-border-color-dark, #ccc);\n border-radius: var(--le-border-radius-standard, 4px);\n box-sizing: border-box;\n font-size: var(--le-font-size-medium, 1.15em); /* Increased font size */\n color: var(--le-text-color-primary, #333);\n background-color: var(--le-background-color-panel, #fff);\n }\n\n .form-input-shared:focus,\n .form-textarea-shared:focus,\n .form-select-shared:focus {\n border-color: var(--le-border-color-accent, #2196f3);\n outline: none; /* Or a custom focus ring */\n box-shadow: 0 0 0 2px var(--le-focus-ring-color, rgba(33, 150, 243, 0.3));\n }\n \n /* Specific styling for checkbox groups if needed */\n .form-checkbox-label-shared {\n display: flex; /* Changed to flex for better alignment */\n align-items: center;\n font-weight: normal; /* Typically labels for checkboxes are not bold by default */\n font-size: var(--le-font-size-medium, 1.15em); /* Increased font size */\n color: var(--le-text-color-primary, #333);\n }\n\n .form-checkbox-label-shared input[type=\"checkbox\"] {\n margin-right: var(--le-padding-s, 0.75em); /* Increased margin */\n /* Consider custom styling for checkboxes if desired, or rely on browser defaults */\n /* For consistent appearance across browsers, custom checkbox styling can be complex */\n /* For now, using default with adjusted margin */\n width: auto; /* Override width: 100% from .form-input-shared if a generic class was applied */\n vertical-align: middle; /* Align checkbox with text */\n }\n\n /* Styling for a container of multiple checkboxes or radio buttons */\n .form-options-group-shared {\n /* Styles for a group of checkboxes/radios, e.g., display: flex; flex-direction: column; gap: ... */\n }\n\n /* Styling for individual option within a group */\n .form-option-item-shared {\n /* Styles for each checkbox/radio item within a group */\n }\n"; export const listItemStyles: "\n .list-item-shared {\n padding: var(--le-padding-s, 0.75em) var(--le-padding-xs, 0.4em); /* Increased padding */\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n display: flex;\n align-items: center;\n justify-content: space-between; /* Common for items with actions on the right */\n gap: var(--le-padding-s, 0.75em); /* Increased gap */\n }\n\n .list-item-shared:last-child {\n border-bottom: none;\n }\n\n /* Example of a text part within a list item that should grow */\n .list-item-shared .list-item-text-primary {\n flex-grow: 1;\n font-size: var(--le-font-size-small, 1.0em); /* Added explicit font size */\n /* Potentially add text overflow properties if needed */\n /* white-space: nowrap; */\n /* overflow: hidden; */\n /* text-overflow: ellipsis; */\n }\n\n /* Example of an actions container part within a list item */\n .list-item-shared .list-item-actions {\n flex-shrink: 0; /* Prevent actions from shrinking */\n display: flex;\n gap: var(--le-padding-xs, 0.4em); /* Increased gap */\n }\n"; export const mobileStyles: "\n /* Mobile-specific styling that can be added to host elements */\n \n /* Increased font sizes for better readability on mobile */\n --le-font-size-base: 1.4em;\n --le-font-size-small: 1.2em;\n --le-font-size-medium: 1.6em;\n --le-font-size-large: 1.8em;\n --le-font-size-xlarge: 2em;\n \n /* Adjust padding for better touch targets */\n --le-padding-s: 0.6rem;\n --le-padding-m: 1rem;\n \n /* Other mobile optimizations */\n font-size: var(--le-font-size-base);\n line-height: 1.4;\n"; export const sweetAlertMobileOverrides: "\n /* Injected SweetAlert2 Mobile Styles - Production v1 */\n .swal2-popup.lae-swal-popup-mobile {\n width: 90vw !important;\n max-width: 480px !important;\n padding: 1rem !important; /* Increased padding for better touch spacing */\n font-size: 1rem !important; /* Base font size for content */\n }\n\n .lae-swal-popup-mobile .swal2-title,\n .lae-swal-title-mobile {\n font-size: 1.4rem !important; /* Readable title size for mobile */\n padding: 0.5rem 0.5rem 0.75rem !important; /* Adjusted padding */\n margin-bottom: 0 !important; /* Remove default bottom margin if any, handled by container */\n line-height: 1.3 !important;\n }\n\n .lae-swal-popup-mobile .swal2-html-container,\n .lae-swal-html-container-mobile {\n font-size: 0.95rem !important; /* Slightly smaller for body text */\n margin: 0.75rem 0.5rem !important; /* Vertical and horizontal margin */\n line-height: 1.5 !important;\n text-align: center !important;\n }\n\n .lae-swal-popup-mobile .swal2-actions,\n .lae-swal-actions-mobile {\n width: 100% !important;\n margin-top: 1rem !important;\n gap: 0.65rem !important; /* Space between stacked buttons */\n flex-direction: column-reverse !important; /* Stack buttons, confirm on top */\n }\n\n .lae-swal-popup-mobile .swal2-styled,\n .lae-swal-styled-mobile {\n width: 100% !important; /* Full width buttons */\n padding: 0.85rem !important; /* Generous padding for touch targets */\n font-size: 1rem !important;\n margin: 0 !important; /* Remove individual margins, gap handles spacing */\n border-radius: 0.3rem !important;\n }\n\n /* Optional: If you want to ensure default button colors are explicitly set or overridden for mobile */\n /* .lae-swal-popup-mobile .swal2-confirm.lae-swal-styled-mobile {\n background-color: #3085d6 !important; /* Example: Default confirm blue */\n /* }\n .lae-swal-popup-mobile .swal2-cancel.lae-swal-styled-mobile {\n background-color: #d33 !important; /* Example: Default cancel red */\n /* } */\n"; export const sweetAlertGlobalStyles: "\n /* SweetAlert2 Global Styles */\n .swal2-popup {\n font-family: var(--le-font-family-base, sans-serif); /* Assuming you have a base font family variable */\n background-color: var(--le-background-color-panel, #fff) !important;\n border-radius: var(--le-border-radius-large, 8px) !important;\n border: 1px solid var(--le-border-color-dark, #ccc) !important;\n color: var(--le-text-color-primary, #333) !important;\n }\n\n .swal2-title {\n color: var(--le-text-color-primary, #333) !important;\n font-size: var(--le-font-size-large, 1.4em) !important; /* Match modal header */\n font-weight: bold !important;\n }\n\n .swal2-html-container {\n color: var(--le-text-color-primary, #333) !important;\n font-size: var(--le-font-size-base, 1em) !important;\n margin: var(--le-padding-m, 1.25em) !important; /* Add some margin */\n }\n\n .swal2-actions {\n margin-top: var(--le-padding-m, 1.25em) !important;\n }\n \n .swal2-styled { /* Base for swal buttons */\n padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em) !important;\n border-radius: var(--le-border-radius-standard, 4px) !important;\n font-size: var(--le-font-size-medium, 1.15em) !important;\n text-decoration: none !important;\n /* display: inline-block !important; */ /* Removed to allow SweetAlert2 to control visibility */\n text-align: center !important;\n line-height: normal !important;\n white-space: nowrap !important;\n vertical-align: middle !important;\n user-select: none !important;\n transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out !important;\n border: 1px solid transparent !important; /* Start with transparent border, colors will override */\n }\n\n .swal2-styled:focus {\n outline: none !important;\n box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important; /* Example focus, adjust as needed */\n }\n\n .swal2-styled:hover:not(:disabled) {\n /* General hover, specific button types might override */\n filter: brightness(90%);\n }\n\n .swal2-confirm {\n background-color: var(--le-color-confirm, #28a745) !important; /* Define --le-color-confirm or use existing */\n color: var(--le-text-color-on-primary, #fff) !important;\n border-color: var(--le-color-confirm, #28a745) !important;\n }\n .swal2-confirm:hover:not(:disabled) {\n background-color: var(--le-color-confirm-hover, #218838) !important; /* Define --le-color-confirm-hover */\n border-color: var(--le-color-confirm-hover, #218838) !important;\n }\n\n .swal2-cancel {\n background-color: var(--le-color-cancel, #dc3545) !important; /* Define --le-color-cancel or use existing */\n color: var(--le-text-color-on-primary, #fff) !important;\n border-color: var(--le-color-cancel, #dc3545) !important;\n }\n .swal2-cancel:hover:not(:disabled) {\n background-color: var(--le-color-cancel-hover, #c82333) !important; /* Define --le-color-cancel-hover */\n border-color: var(--le-color-cancel-hover, #c82333) !important;\n }\n \n /* If you use a deny button */\n .swal2-deny {\n background-color: var(--le-color-deny, #6c757d) !important; /* Define --le-color-deny */\n color: var(--le-text-color-on-primary, #fff) !important;\n border-color: var(--le-color-deny, #6c757d) !important;\n }\n .swal2-deny:hover:not(:disabled) {\n background-color: var(--le-color-deny-hover, #5a6268) !important; /* Define --le-color-deny-hover */\n border-color: var(--le-color-deny-hover, #5a6268) !important;\n }\n\n /* Icon styling - optional, if you want to color default icons */\n .swal2-icon.swal2-warning {\n color: var(--le-text-color-warning, #ffc107) !important; /* Define --le-text-color-warning */\n border-color: var(--le-text-color-warning, #ffc107) !important;\n }\n .swal2-icon.swal2-error {\n color: var(--le-text-color-error, #dc3545) !important; /* Define --le-text-color-error */\n border-color: var(--le-text-color-error, #dc3545) !important;\n }\n .swal2-icon.swal2-success {\n color: var(--le-text-color-success, #28a745) !important; /* Define --le-text-color-success */\n border-color: var(--le-text-color-success, #28a745) !important;\n }\n .swal2-icon.swal2-info {\n color: var(--le-text-color-info, #17a2b8) !important; /* Define --le-text-color-info */\n border-color: var(--le-text-color-info, #17a2b8) !important;\n }\n"; //# sourceMappingURL=shared-styles.d.ts.map