75 lines
2.3 KiB
CSS
75 lines
2.3 KiB
CSS
.a8c-faux-inline-help {
|
|
position: fixed;
|
|
right: 24px;
|
|
bottom: 24px;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.a8c-faux-inline-help .a8c-faux-inline-help__button {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 10px; /* push away from WordPress Core footer */
|
|
line-height: 0;
|
|
padding: 1px;
|
|
border-radius: 100%;
|
|
background-color: #1d2327; /* IE11 fallback - Classic Dark */
|
|
background-color: var( --color-primary );
|
|
border: 1px solid #3c434a; /* IE11 fallback - Classic Dark */
|
|
border: 1px solid var( --color-primary-dark );
|
|
transition: all 0.2s ease-in-out;
|
|
overflow: visible;
|
|
width: 40px;
|
|
height: 40px;
|
|
box-sizing: border-box; /* .button component */
|
|
|
|
/* elevation() mixin styles */
|
|
box-shadow: 0 4px 5px 0 rgba( 16, 21, 23, 0.14 ),
|
|
0 1px 10px 0 rgba( 16, 21, 23, 0.12 ),
|
|
0 2px 4px -1px rgba( 16, 21, 23, 0.2 ); /* IE11 fallback - Classic Dark */
|
|
box-shadow: 0 4px 5px 0 rgba( var( --color-neutral-100-rgb ), 0.14 ),
|
|
0 1px 10px 0 rgba( var( --color-neutral-100-rgb ), 0.12 ),
|
|
0 2px 4px -1px rgba( var( --color-neutral-100-rgb ), 0.2 );
|
|
}
|
|
|
|
.a8c-faux-inline-help .a8c-faux-inline-help__button::before {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: block;
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
content: '';
|
|
background: #ffffff; /* IE11 fallback - Classic Dark */
|
|
background: var( --color-surface );
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.a8c-faux-inline-help .a8c-faux-inline-help__button:focus {
|
|
background-color: #1d2327; /* IE11 fallback - Classic Dark */
|
|
background-color: var( --color-primary );
|
|
box-shadow: 0 0 0 2px #8c8f94; /* IE11 fallback - Classic Dark */
|
|
box-shadow: 0 0 0 2px var( --color-primary-light );
|
|
}
|
|
|
|
.a8c-faux-inline-help .a8c-faux-inline-help__button .gridicon {
|
|
pointer-events: none; /* ensure SVG does not capture click on anchor */
|
|
position: relative;
|
|
fill: #1d2327; /* IE11 fallback - Classic Dark */
|
|
fill: var( --color-primary );
|
|
margin: -3px 0 0 -3px;
|
|
top: 0;
|
|
height: 42px;
|
|
width: 42px;
|
|
}
|
|
|
|
.a8c-faux-inline-help .a8c-faux-inline-help__button .gridicon>use:first-child,
|
|
.a8c-faux-inline-help .a8c-faux-inline-help__button .gridicon>g:first-child {
|
|
transform: none;
|
|
}
|
|
|
|
.a8c-faux-inline-help .a8c-faux-inline-help__button:hover:not(.is-active) {
|
|
background: #1d2327; /* IE11 fallback - Classic Dark */
|
|
background: var( --color-primary );
|
|
transform: scale( 1.15 );
|
|
}
|