No Description

inline-help.css 2.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. .a8c-faux-inline-help {
  2. position: fixed;
  3. right: 24px;
  4. bottom: 24px;
  5. z-index: 9999;
  6. }
  7. .a8c-faux-inline-help .a8c-faux-inline-help__button {
  8. position: absolute;
  9. right: 0;
  10. bottom: 10px; /* push away from WordPress Core footer */
  11. line-height: 0;
  12. padding: 1px;
  13. border-radius: 100%;
  14. background-color: #1d2327; /* IE11 fallback - Classic Dark */
  15. background-color: var( --color-primary );
  16. border: 1px solid #3c434a; /* IE11 fallback - Classic Dark */
  17. border: 1px solid var( --color-primary-dark );
  18. transition: all 0.2s ease-in-out;
  19. overflow: visible;
  20. width: 40px;
  21. height: 40px;
  22. box-sizing: border-box; /* .button component */
  23. /* elevation() mixin styles */
  24. box-shadow: 0 4px 5px 0 rgba( 16, 21, 23, 0.14 ),
  25. 0 1px 10px 0 rgba( 16, 21, 23, 0.12 ),
  26. 0 2px 4px -1px rgba( 16, 21, 23, 0.2 ); /* IE11 fallback - Classic Dark */
  27. box-shadow: 0 4px 5px 0 rgba( var( --color-neutral-100-rgb ), 0.14 ),
  28. 0 1px 10px 0 rgba( var( --color-neutral-100-rgb ), 0.12 ),
  29. 0 2px 4px -1px rgba( var( --color-neutral-100-rgb ), 0.2 );
  30. }
  31. .a8c-faux-inline-help .a8c-faux-inline-help__button::before {
  32. width: 28px;
  33. height: 28px;
  34. display: block;
  35. position: absolute;
  36. top: 5px;
  37. left: 5px;
  38. content: '';
  39. background: #ffffff; /* IE11 fallback - Classic Dark */
  40. background: var( --color-surface );
  41. border-radius: 100%;
  42. }
  43. .a8c-faux-inline-help .a8c-faux-inline-help__button:focus {
  44. background-color: #1d2327; /* IE11 fallback - Classic Dark */
  45. background-color: var( --color-primary );
  46. box-shadow: 0 0 0 2px #8c8f94; /* IE11 fallback - Classic Dark */
  47. box-shadow: 0 0 0 2px var( --color-primary-light );
  48. }
  49. .a8c-faux-inline-help .a8c-faux-inline-help__button .gridicon {
  50. pointer-events: none; /* ensure SVG does not capture click on anchor */
  51. position: relative;
  52. fill: #1d2327; /* IE11 fallback - Classic Dark */
  53. fill: var( --color-primary );
  54. margin: -3px 0 0 -3px;
  55. top: 0;
  56. height: 42px;
  57. width: 42px;
  58. }
  59. .a8c-faux-inline-help .a8c-faux-inline-help__button .gridicon>use:first-child,
  60. .a8c-faux-inline-help .a8c-faux-inline-help__button .gridicon>g:first-child {
  61. transform: none;
  62. }
  63. .a8c-faux-inline-help .a8c-faux-inline-help__button:hover:not(.is-active) {
  64. background: #1d2327; /* IE11 fallback - Classic Dark */
  65. background: var( --color-primary );
  66. transform: scale( 1.15 );
  67. }