toolbar-button.scss 1.1KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. @import "../../themes/ionic.globals";
  2. // Toolbar Buttons
  3. // --------------------------------------------------
  4. .bar-button {
  5. @include margin(0);
  6. @include padding(0);
  7. @include text-align(center);
  8. @include appearance(none);
  9. position: relative;
  10. display: inline-block;
  11. line-height: 1;
  12. text-overflow: ellipsis;
  13. text-transform: none;
  14. white-space: nowrap;
  15. cursor: pointer;
  16. vertical-align: top; // the better option for most scenarios
  17. vertical-align: -webkit-baseline-middle; // the best for those that support it
  18. user-select: none;
  19. }
  20. .bar-button::after {
  21. @include position(-7px, -2px, -6px, -2px);
  22. // used to make the button's hit area larger
  23. position: absolute;
  24. content: "";
  25. }
  26. // Menu Toggle
  27. // --------------------------------------------------
  28. .bar-button-menutoggle {
  29. display: flex;
  30. align-items: center;
  31. }
  32. // Back Button
  33. // --------------------------------------------------
  34. .back-button {
  35. display: none;
  36. }
  37. .back-button.show-back-button {
  38. display: inline-block;
  39. }
  40. .back-button-text {
  41. display: flex;
  42. align-items: center;
  43. }