| 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 |
|
