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