7845423bb9
* Removes :runtime_banner feature flag + repositioning * Switch to https://udl.forem.com + fix spec * Fix URL specs * Adds data_update_script to remove feature flag * Fix banner overlay on reactions for small screens + iPad max width * Append -only to Runtime Filter CSS * Add import to fix assets:precompile * Implement design update * Apply suggestions from code review Co-authored-by: Lisa Sy <lisasyis@gmail.com> * Add ; * Trigger Travis Co-authored-by: Lisa Sy <lisasyis@gmail.com>
96 lines
3.2 KiB
SCSS
96 lines
3.2 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,
|
|
.PWA-only,
|
|
.PWA-iOS-only,
|
|
.PWA-Android-only,
|
|
.PWA-Windows-only,
|
|
.PWA-Linux-only,
|
|
.PWA-macOS-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 {
|
|
display: var(--runtime-display, block);
|
|
}
|
|
body[data-runtime='ForemWebView-Android'] .ForemWebView-Android-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 {
|
|
display: var(--runtime-display, block);
|
|
}
|
|
body[data-runtime='Browser-iOS'] .Browser-iOS-only {
|
|
display: var(--runtime-display, block);
|
|
}
|
|
body[data-runtime='Browser-Linux'] .Browser-Linux-only {
|
|
display: var(--runtime-display, block);
|
|
}
|
|
body[data-runtime='Browser-Windows'] .Browser-Windows-only {
|
|
display: var(--runtime-display, block);
|
|
}
|
|
body[data-runtime='Browser-macOS'] .Browser-macOS-only {
|
|
display: var(--runtime-display, block);
|
|
}
|
|
|
|
// Elements with class 'PWA' should be visible on any attribute that
|
|
// matches that Medium regardless of OS
|
|
body[data-runtime='PWA-Android'] .PWA-only,
|
|
body[data-runtime='PWA-iOS'] .PWA-only,
|
|
body[data-runtime='PWA-Linux'] .PWA-only,
|
|
body[data-runtime='PWA-Windows'] .PWA-only,
|
|
body[data-runtime='PWA-macOS'] .PWA-only {
|
|
display: var(--runtime-display, block);
|
|
}
|
|
|
|
// Elements that need to match both 'PWA' Medium and OS
|
|
body[data-runtime='PWA-Android'] .PWA-Android-only {
|
|
display: var(--runtime-display, block);
|
|
}
|
|
body[data-runtime='PWA-iOS'] .PWA-iOS-only {
|
|
display: var(--runtime-display, block);
|
|
}
|
|
body[data-runtime='PWA-Linux'] .PWA-Linux-only {
|
|
display: var(--runtime-display, block);
|
|
}
|
|
body[data-runtime='PWA-Windows'] .PWA-Windows-only {
|
|
display: var(--runtime-display, block);
|
|
}
|
|
body[data-runtime='PWA-macOS'] .PWA-macOS-only {
|
|
display: var(--runtime-display, block);
|
|
}
|