util.scss 1.3KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. @import "./ionic.globals";
  2. .hide,
  3. [hidden],
  4. template {
  5. display: none !important;
  6. }
  7. .sticky {
  8. position: sticky;
  9. top: 0;
  10. }
  11. // Focus Outline
  12. // --------------------------------------------------
  13. $focus-outline-border-color: #51a7e8 !default;
  14. $focus-outline-border-width: 2px !default;
  15. $focus-outline-box-shadow: 0 0 8px 1px $focus-outline-border-color !default;
  16. :focus,
  17. :active {
  18. outline: none;
  19. }
  20. .focus-outline :focus {
  21. outline: thin dotted;
  22. outline-offset: -1px;
  23. }
  24. .focus-outline button:focus,
  25. .focus-outline [ion-button]:focus {
  26. border-color: $focus-outline-border-color;
  27. outline: $focus-outline-border-width solid $focus-outline-border-color;
  28. box-shadow: $focus-outline-box-shadow;
  29. }
  30. ion-input :focus {
  31. outline: none;
  32. }
  33. // Click Block
  34. // --------------------------------------------------
  35. // Fill the screen to block clicks (a better pointer-events: none)
  36. // to avoid full-page reflows and paints which can cause flickers
  37. .click-block {
  38. display: none;
  39. }
  40. .click-block-enabled {
  41. @include position(0, 0, 0, 0);
  42. @include transform(translate3d(0, -100%, 0), translateY(1px));
  43. position: absolute;
  44. z-index: $z-index-click-block;
  45. display: block;
  46. opacity: 0;
  47. contain: strict;
  48. }
  49. .click-block-active {
  50. @include transform(translate3d(0, 0, 0));
  51. }