a96d69faab
* drop pwa stuff * this was breaking the build... shrug.gif * Update app/assets/javascripts/initializers/runtime.js Co-authored-by: Suzanne Aitchison <suzanne@forem.com> * shorthand for if Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
61 lines
2.3 KiB
SCSS
61 lines
2.3 KiB
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);
|
|
}
|