components/data-selector/_shared.scss

0001 // Styles shared by the data selector host and its tabs: `@use './shared'`
0002 // in each component's scss. Values follow the toolbar drop-down panels
0003 // (see open-event.component.scss) so the control looks the same in the
0004 // display panel and on the config page.
0005
0006 @mixin tab-block {
0007   display: flex;
0008   flex-direction: column;
0009   gap: 12px;
0010   font-size: 0.85rem;
0011 }
0012
0013 @mixin section-label {
0014   font-weight: 500;
0015   font-size: 0.85rem;
0016   opacity: 0.9;
0017 }
0018
0019 @mixin chip-row {
0020   display: flex;
0021   flex-wrap: wrap;
0022   gap: 6px 8px;
0023 }
0024
0025 // A selectable chip; `.selected` marks the choice, `.unavailable` dims a
0026 // choice that leads to no dataset with the other selections (still clickable)
0027 @mixin chip {
0028   padding: 4px 12px;
0029   border: 1px solid var(--mat-sys-outline, rgba(128, 128, 128, 0.6));
0030   border-radius: 14px;
0031   background: transparent;
0032   color: inherit;
0033   font: inherit;
0034   font-size: 0.8rem;
0035   cursor: pointer;
0036   white-space: nowrap;
0037
0038   &:hover {
0039     background: color-mix(in srgb, var(--mat-sys-primary, #4bac84) 12%, transparent);
0040   }
0041
0042   &.selected {
0043     border-color: var(--mat-sys-primary, #4bac84);
0044     background: color-mix(in srgb, var(--mat-sys-primary, #4bac84) 25%, transparent);
0045     font-weight: 500;
0046   }
0047
0048   &.unavailable {
0049     opacity: 0.45;
0050   }
0051 }
0052
0053 @mixin text-input {
0054   padding: 6px 8px;
0055   border: 1px solid var(--mat-sys-outline, rgba(128, 128, 128, 0.6));
0056   border-radius: 6px;
0057   background: transparent;
0058   font: inherit;
0059   font-size: 0.8rem;
0060   color: inherit;
0061   outline: none;
0062 }
0063
0064 @mixin status {
0065   display: flex;
0066   align-items: flex-start;
0067   gap: 8px;
0068   font-size: 0.78rem;
0069   line-height: 1.35;
0070
0071   mat-icon {
0072     font-size: 18px;
0073     width: 18px;
0074     height: 18px;
0075     flex: none;
0076   }
0077
0078   &.error {
0079     color: var(--mat-sys-error, #d32f2f);
0080   }
0081
0082   &.note,
0083   &.warning,
0084   &.ok {
0085     opacity: 0.85;
0086   }
0087 }
0088
0089 @mixin description {
0090   font-size: 0.78rem;
0091   line-height: 1.4;
0092   opacity: 0.85;
0093
0094   a {
0095     color: var(--mat-sys-primary, #4bac84);
0096   }
0097 }