umd-styles-library
    Preparing search index...

    Variable conditionalsConst

    conditionals: {
        "--isMediaDesktop": boolean;
        "--isMediaDesktopMax": boolean;
        "--isMediaHighDef": boolean;
        "--isMediaLarge": boolean;
        "--isMediaLargeMax": boolean;
        "--isMediaMedium": boolean;
        "--isMediaMediumMax": boolean;
        "--isMediaSmall": boolean;
        "--isMediaSmallMax": boolean;
        "--isMediaTablet": boolean;
        "--isMediaTabletMax": boolean;
        [key: string]:
            | boolean
            | {
                "--isBreakpointLarge"?: undefined;
                "--isBreakpointLargeMax"?: undefined;
                "--isBreakpointMedium"?: undefined;
                "--isBreakpointMediumMax"?: undefined;
                "--isBreakpointSmall": boolean;
                "--isBreakpointSmallMax"?: undefined;
                "--isDesktop"?: undefined;
                "--isDesktopMax"?: undefined;
                "--isHighDef"?: undefined;
                "--isTablet"?: undefined;
                "--isTabletMax"?: undefined;
            }
            | {
                "--isBreakpointLarge"?: undefined;
                "--isBreakpointLargeMax"?: undefined;
                "--isBreakpointMedium"?: undefined;
                "--isBreakpointMediumMax"?: undefined;
                "--isBreakpointSmall"?: undefined;
                "--isBreakpointSmallMax": boolean;
                "--isDesktop"?: undefined;
                "--isDesktopMax"?: undefined;
                "--isHighDef"?: undefined;
                "--isTablet"?: undefined;
                "--isTabletMax"?: undefined;
            }
            | {
                "--isBreakpointLarge"?: undefined;
                "--isBreakpointLargeMax"?: undefined;
                "--isBreakpointMedium": boolean;
                "--isBreakpointMediumMax"?: undefined;
                "--isBreakpointSmall"?: undefined;
                "--isBreakpointSmallMax"?: undefined;
                "--isDesktop"?: undefined;
                "--isDesktopMax"?: undefined;
                "--isHighDef"?: undefined;
                "--isTablet"?: undefined;
                "--isTabletMax"?: undefined;
            }
            | {
                "--isBreakpointLarge"?: undefined;
                "--isBreakpointLargeMax"?: undefined;
                "--isBreakpointMedium"?: undefined;
                "--isBreakpointMediumMax": boolean;
                "--isBreakpointSmall"?: undefined;
                "--isBreakpointSmallMax"?: undefined;
                "--isDesktop"?: undefined;
                "--isDesktopMax"?: undefined;
                "--isHighDef"?: undefined;
                "--isTablet"?: undefined;
                "--isTabletMax"?: undefined;
            }
            | {
                "--isBreakpointLarge": boolean;
                "--isBreakpointLargeMax"?: undefined;
                "--isBreakpointMedium"?: undefined;
                "--isBreakpointMediumMax"?: undefined;
                "--isBreakpointSmall"?: undefined;
                "--isBreakpointSmallMax"?: undefined;
                "--isDesktop"?: undefined;
                "--isDesktopMax"?: undefined;
                "--isHighDef"?: undefined;
                "--isTablet"?: undefined;
                "--isTabletMax"?: undefined;
            }
            | {
                "--isBreakpointLarge"?: undefined;
                "--isBreakpointLargeMax": boolean;
                "--isBreakpointMedium"?: undefined;
                "--isBreakpointMediumMax"?: undefined;
                "--isBreakpointSmall"?: undefined;
                "--isBreakpointSmallMax"?: undefined;
                "--isDesktop"?: undefined;
                "--isDesktopMax"?: undefined;
                "--isHighDef"?: undefined;
                "--isTablet"?: undefined;
                "--isTabletMax"?: undefined;
            }
            | {
                "--isBreakpointLarge"?: undefined;
                "--isBreakpointLargeMax"?: undefined;
                "--isBreakpointMedium"?: undefined;
                "--isBreakpointMediumMax"?: undefined;
                "--isBreakpointSmall"?: undefined;
                "--isBreakpointSmallMax"?: undefined;
                "--isDesktop"?: undefined;
                "--isDesktopMax"?: undefined;
                "--isHighDef"?: undefined;
                "--isTablet": boolean;
                "--isTabletMax"?: undefined;
            }
            | {
                "--isBreakpointLarge"?: undefined;
                "--isBreakpointLargeMax"?: undefined;
                "--isBreakpointMedium"?: undefined;
                "--isBreakpointMediumMax"?: undefined;
                "--isBreakpointSmall"?: undefined;
                "--isBreakpointSmallMax"?: undefined;
                "--isDesktop"?: undefined;
                "--isDesktopMax"?: undefined;
                "--isHighDef"?: undefined;
                "--isTablet"?: undefined;
                "--isTabletMax": boolean;
            }
            | {
                "--isBreakpointLarge"?: undefined;
                "--isBreakpointLargeMax"?: undefined;
                "--isBreakpointMedium"?: undefined;
                "--isBreakpointMediumMax"?: undefined;
                "--isBreakpointSmall"?: undefined;
                "--isBreakpointSmallMax"?: undefined;
                "--isDesktop": boolean;
                "--isDesktopMax"?: undefined;
                "--isHighDef"?: undefined;
                "--isTablet"?: undefined;
                "--isTabletMax"?: undefined;
            }
            | {
                "--isBreakpointLarge"?: undefined;
                "--isBreakpointLargeMax"?: undefined;
                "--isBreakpointMedium"?: undefined;
                "--isBreakpointMediumMax"?: undefined;
                "--isBreakpointSmall"?: undefined;
                "--isBreakpointSmallMax"?: undefined;
                "--isDesktop"?: undefined;
                "--isDesktopMax": boolean;
                "--isHighDef"?: undefined;
                "--isTablet"?: undefined;
                "--isTabletMax"?: undefined;
            }
            | {
                "--isBreakpointLarge"?: undefined;
                "--isBreakpointLargeMax"?: undefined;
                "--isBreakpointMedium"?: undefined;
                "--isBreakpointMediumMax"?: undefined;
                "--isBreakpointSmall"?: undefined;
                "--isBreakpointSmallMax"?: undefined;
                "--isDesktop"?: undefined;
                "--isDesktopMax"?: undefined;
                "--isHighDef": boolean;
                "--isTablet"?: undefined;
                "--isTabletMax"?: undefined;
            };
    } = ...

    Conditional media query variables that set boolean flags for different breakpoints. These variables can be used in CSS to conditionally apply styles based on screen size. Each media query uses custom CSS properties (variables) that are set to true when the query matches.

    Type declaration

    • [key: string]:
          | boolean
          | {
              "--isBreakpointLarge"?: undefined;
              "--isBreakpointLargeMax"?: undefined;
              "--isBreakpointMedium"?: undefined;
              "--isBreakpointMediumMax"?: undefined;
              "--isBreakpointSmall": boolean;
              "--isBreakpointSmallMax"?: undefined;
              "--isDesktop"?: undefined;
              "--isDesktopMax"?: undefined;
              "--isHighDef"?: undefined;
              "--isTablet"?: undefined;
              "--isTabletMax"?: undefined;
          }
          | {
              "--isBreakpointLarge"?: undefined;
              "--isBreakpointLargeMax"?: undefined;
              "--isBreakpointMedium"?: undefined;
              "--isBreakpointMediumMax"?: undefined;
              "--isBreakpointSmall"?: undefined;
              "--isBreakpointSmallMax": boolean;
              "--isDesktop"?: undefined;
              "--isDesktopMax"?: undefined;
              "--isHighDef"?: undefined;
              "--isTablet"?: undefined;
              "--isTabletMax"?: undefined;
          }
          | {
              "--isBreakpointLarge"?: undefined;
              "--isBreakpointLargeMax"?: undefined;
              "--isBreakpointMedium": boolean;
              "--isBreakpointMediumMax"?: undefined;
              "--isBreakpointSmall"?: undefined;
              "--isBreakpointSmallMax"?: undefined;
              "--isDesktop"?: undefined;
              "--isDesktopMax"?: undefined;
              "--isHighDef"?: undefined;
              "--isTablet"?: undefined;
              "--isTabletMax"?: undefined;
          }
          | {
              "--isBreakpointLarge"?: undefined;
              "--isBreakpointLargeMax"?: undefined;
              "--isBreakpointMedium"?: undefined;
              "--isBreakpointMediumMax": boolean;
              "--isBreakpointSmall"?: undefined;
              "--isBreakpointSmallMax"?: undefined;
              "--isDesktop"?: undefined;
              "--isDesktopMax"?: undefined;
              "--isHighDef"?: undefined;
              "--isTablet"?: undefined;
              "--isTabletMax"?: undefined;
          }
          | {
              "--isBreakpointLarge": boolean;
              "--isBreakpointLargeMax"?: undefined;
              "--isBreakpointMedium"?: undefined;
              "--isBreakpointMediumMax"?: undefined;
              "--isBreakpointSmall"?: undefined;
              "--isBreakpointSmallMax"?: undefined;
              "--isDesktop"?: undefined;
              "--isDesktopMax"?: undefined;
              "--isHighDef"?: undefined;
              "--isTablet"?: undefined;
              "--isTabletMax"?: undefined;
          }
          | {
              "--isBreakpointLarge"?: undefined;
              "--isBreakpointLargeMax": boolean;
              "--isBreakpointMedium"?: undefined;
              "--isBreakpointMediumMax"?: undefined;
              "--isBreakpointSmall"?: undefined;
              "--isBreakpointSmallMax"?: undefined;
              "--isDesktop"?: undefined;
              "--isDesktopMax"?: undefined;
              "--isHighDef"?: undefined;
              "--isTablet"?: undefined;
              "--isTabletMax"?: undefined;
          }
          | {
              "--isBreakpointLarge"?: undefined;
              "--isBreakpointLargeMax"?: undefined;
              "--isBreakpointMedium"?: undefined;
              "--isBreakpointMediumMax"?: undefined;
              "--isBreakpointSmall"?: undefined;
              "--isBreakpointSmallMax"?: undefined;
              "--isDesktop"?: undefined;
              "--isDesktopMax"?: undefined;
              "--isHighDef"?: undefined;
              "--isTablet": boolean;
              "--isTabletMax"?: undefined;
          }
          | {
              "--isBreakpointLarge"?: undefined;
              "--isBreakpointLargeMax"?: undefined;
              "--isBreakpointMedium"?: undefined;
              "--isBreakpointMediumMax"?: undefined;
              "--isBreakpointSmall"?: undefined;
              "--isBreakpointSmallMax"?: undefined;
              "--isDesktop"?: undefined;
              "--isDesktopMax"?: undefined;
              "--isHighDef"?: undefined;
              "--isTablet"?: undefined;
              "--isTabletMax": boolean;
          }
          | {
              "--isBreakpointLarge"?: undefined;
              "--isBreakpointLargeMax"?: undefined;
              "--isBreakpointMedium"?: undefined;
              "--isBreakpointMediumMax"?: undefined;
              "--isBreakpointSmall"?: undefined;
              "--isBreakpointSmallMax"?: undefined;
              "--isDesktop": boolean;
              "--isDesktopMax"?: undefined;
              "--isHighDef"?: undefined;
              "--isTablet"?: undefined;
              "--isTabletMax"?: undefined;
          }
          | {
              "--isBreakpointLarge"?: undefined;
              "--isBreakpointLargeMax"?: undefined;
              "--isBreakpointMedium"?: undefined;
              "--isBreakpointMediumMax"?: undefined;
              "--isBreakpointSmall"?: undefined;
              "--isBreakpointSmallMax"?: undefined;
              "--isDesktop"?: undefined;
              "--isDesktopMax": boolean;
              "--isHighDef"?: undefined;
              "--isTablet"?: undefined;
              "--isTabletMax"?: undefined;
          }
          | {
              "--isBreakpointLarge"?: undefined;
              "--isBreakpointLargeMax"?: undefined;
              "--isBreakpointMedium"?: undefined;
              "--isBreakpointMediumMax"?: undefined;
              "--isBreakpointSmall"?: undefined;
              "--isBreakpointSmallMax"?: undefined;
              "--isDesktop"?: undefined;
              "--isDesktopMax"?: undefined;
              "--isHighDef": boolean;
              "--isTablet"?: undefined;
              "--isTabletMax"?: undefined;
          }
    • --isMediaDesktop: boolean
    • --isMediaDesktopMax: boolean
    • --isMediaHighDef: boolean
    • --isMediaLarge: boolean
    • --isMediaLargeMax: boolean
    • --isMediaMedium: boolean
    • --isMediaMediumMax: boolean
    • --isMediaSmall: boolean
    • --isMediaSmallMax: boolean
    • --isMediaTablet: boolean
    • --isMediaTabletMax: boolean
    // Load Reset styles or consume conditionals and append to your own styles
    import * as Styles from '@universityofmaryland/web-styles-library';
    Styles.token.media.conditionals;

     .element {
       display: none;
       @container style(--isMediaDesktop: true) {
         display: block;
       }
     };

    1.3.0

    Settings

    Member Visibility