runtime.scss

// The classes in this file are all related to a Runtime Filter feature detailed
// in RFC 27. A short summary of how they work can be summarized by:
//
// They all are invisible by default. Only after the `initializeRuntime()` code
// adds the context to the data-runtime attribute to the body element is when
// elements with these classes become visible.
//
// More thorough context can be found in: https://github.com/forem/rfcs/pull/27

// Elements with all of these classes are not visible by default
.ForemWebView-only,
.ForemWebView-iOS-only,
.ForemWebView-Android-only,
.Desktop-only,
.Browser-only,
.Browser-iOS-only,
.Browser-Android-only,
.Browser-macOS-only,
.Browser-Windows-only,
.Browser-Linux-only {
  display: none;
}

// Elements with class 'ForemWebView' should be visible on any attribute that
// matches that Medium regardless of OS
body[data-runtime='ForemWebView-iOS'] .ForemWebView-only,
body[data-runtime='ForemWebView-Android'] .ForemWebView-only {
  display: var(--runtime-display, block);
}

// Elements that need to match both 'ForemWebView' Medium and OS
body[data-runtime='ForemWebView-iOS'] .ForemWebView-iOS-only,
body[data-runtime='ForemWebView-Android'] .ForemWebView-Android-only {
  display: var(--runtime-display, block);
}

// Elements that will be presented on Desktop but not mobile OS's
body[data-runtime$='Windows'] .Desktop-only,
body[data-runtime$='Linux'] .Desktop-only,
body[data-runtime$='macOS'] .Desktop-only {
  display: var(--runtime-display, block);
}

// Elements with class 'Browser' should be visible on any attribute that
// matches that Medium regardless of OS
body[data-runtime='Browser-Android'] .Browser-only,
body[data-runtime='Browser-iOS'] .Browser-only,
body[data-runtime='Browser-Linux'] .Browser-only,
body[data-runtime='Browser-Windows'] .Browser-only,
body[data-runtime='Browser-macOS'] .Browser-only {
  display: var(--runtime-display, block);
}

// Elements that need to match both 'Browser' Medium and OS
body[data-runtime='Browser-Android'] .Browser-Android-only,
body[data-runtime='Browser-iOS'] .Browser-iOS-only,
body[data-runtime='Browser-Linux'] .Browser-Linux-only,
body[data-runtime='Browser-Windows'] .Browser-Windows-only,
body[data-runtime='Browser-macOS'] .Browser-macOS-only {
  display: var(--runtime-display, block);
}