Warning, /firebird/firebird-ng/src/app/components/event-selector/event-selector.component.scss is written in an unsupported language. File is not indexed.
0001 @use '@angular/material' as mat;
0002
0003 .eventSelector {
0004 display: inline-flex;
0005 position: relative;
0006
0007 select {
0008 min-width: 9rem;
0009 padding: 8px 32px 8px 12px; // Increased padding for better touch area
0010 font-size: 0.875rem; // ~14px
0011 border: 1px solid var(--sys-color-outline);
0012 background-color: var(--mat-sys-surface-container-low);
0013 color: var(--sys-color-on-surface-variant);
0014 border-radius: 4px;
0015 appearance: none;
0016 cursor: pointer;
0017 box-shadow: var(--mat-sys-level2);
0018 margin-left: 3px;
0019 margin-right: 3px;
0020 transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
0021
0022 /* Add arrow for dropdown */
0023 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' 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");
0024 background-repeat: no-repeat;
0025 background-position: right 8px center;
0026 background-size: 16px;
0027
0028 /* Focus and hover styles */
0029 &:focus {
0030 outline: 2px solid var(--sys-color-primary);
0031 outline-offset: 2px;
0032 }
0033
0034 &:hover {
0035 box-shadow: var(--mat-sys-level3);
0036 background-color: var(--mat-sys-surface-container);
0037 }
0038 }
0039
0040 /* Style for the select when dropdown is open */
0041 select:active {
0042 box-shadow: var(--mat-sys-level1);
0043 }
0044 }
0045
0046 /* Add the following class if you want to use this component in your header/toolbar */
0047 .header-event-selector {
0048 align-self: center;
0049 margin: 0 6px;
0050 }
