Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // ----
- // Sass (v3.4.14)
- // Compass (v1.0.3)
- // ----
- // Responsive utilities
- // -------------------------
- // More easily include all the states for responsive-utilities.less.
- // [converter] $parent hack
- @mixin responsive-visibility($parent) {
- #{$parent} { display: block !important; }
- table#{$parent} { display: table; }
- tr#{$parent} { display: table-row !important; }
- th#{$parent},
- td#{$parent} { display: table-cell !important; }
- }
- // [converter] $parent hack
- @mixin responsive-invisibility($parent) {
- #{$parent},
- tr#{$parent},
- th#{$parent},
- td#{$parent} { display: none !important; }
- }
- // helpers for showing/hiding content depending on logged in status
- html {
- // mobile and logged in only are hidden by default
- @include responsive-invisibility('.visible-device-mobile');
- @include responsive-invisibility('.visible-ios');
- @include responsive-invisibility('.visible-android');
- @include responsive-visibility('.hidden-device-mobile');
- @include responsive-visibility('.hidden-ios');
- @include responsive-visibility('.hidden-android');
- @include responsive-invisibility('.visible-asana-logged-in');
- @include responsive-visibility('.hidden-asana-logged-in');
- // when logged in, mobile is still hidden, but logged in are visible
- &.asana-is-logged-in {
- @include responsive-invisibility('.visible-device-mobile');
- @include responsive-invisibility('.visible-ios');
- @include responsive-invisibility('.visible-android');
- @include responsive-visibility('.hidden-device-mobile');
- @include responsive-visibility('.hidden-ios');
- @include responsive-visibility('.hidden-android');
- // mobile devices stay hidden! even if you're 'visible logged in'!
- @include responsive-invisibility('.visible-device-mobile.visible-asana-logged-in');
- @include responsive-invisibility('.visible-ios.visible-asana-logged-in');
- @include responsive-invisibility('.visible-android.visible-asana-logged-in');
- @include responsive-visibility('.hidden-device-mobile.visible-asana-logged-in');
- @include responsive-visibility('.hidden-ios.visible-asana-logged-in');
- @include responsive-visibility('.hidden-android.visible-asana-logged-in');
- @include responsive-visibility('.visible-asana-logged-in');
- @include responsive-invisibility('.hidden-asana-logged-in');
- // only when logged in and mobile does logged in mobile show
- &.device-mobile {
- @include responsive-visibility('.visible-device-mobile.visible-asana-logged-in');
- @include responsive-invisibility('.hidden-device-mobile.hidden-asana-logged-in');
- @include responsive-invisibility('.hidden-ios.hidden-asana-logged-in');
- @include responsive-invisibility('.hidden-android.hidden-asana-logged-in');
- }
- &.device-android {
- @include responsive-visibility('.visible-device-mobile.visible-asana-logged-in');
- @include responsive-visibility('.visible-android.visible-asana-logged-in');
- @include responsive-invisibility('.hidden-device-mobile.visible-asana-logged-in');
- @include responsive-invisibility('.hidden-android.visible-asana-logged-in');
- }
- &.device-ios {
- @include responsive-visibility('.visible-device-mobile.visible-asana-logged-in');
- @include responsive-visibility('.visible-ios.visible-asana-logged-in');
- @include responsive-invisibility('.hidden-device-mobile.visible-asana-logged-in');
- @include responsive-invisibility('.hidden-ios.visible-asana-logged-in');
- }
- }
- // when not logged in, but mobile, show mobile
- &.device-mobile {
- @include responsive-visibility('.visible-device-mobile');
- @include responsive-invisibility('.hidden-device-mobile');
- @include responsive-invisibility('.hidden-ios');
- @include responsive-invisibility('.hidden-android');
- body { overflow-x: hidden; }
- }
- &.device-android {
- @include responsive-visibility('.visible-device-mobile');
- @include responsive-visibility('.visible-android');
- @include responsive-invisibility('.hidden-device-mobile');
- @include responsive-invisibility('.hidden-android');
- }
- &.device-ios {
- @include responsive-visibility('.visible-device-mobile');
- @include responsive-visibility('.visible-ios');
- @include responsive-invisibility('.hidden-device-mobile');
- @include responsive-invisibility('.hidden-ios');
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement