mirror of
https://gh.wpcy.net/https://github.com/elementor/one-click-accessibility.git
synced 2026-04-21 04:14:34 +08:00
ae23a192da
* Initial refactor commit
* ✅ Added build and tests CI/CD
* PR Rejects
* Rejects leftover
175 lines
No EOL
3.2 KiB
Text
175 lines
No EOL
3.2 KiB
Text
@toolbar-width: 180px;
|
|
//Toolbar
|
|
.pojo-a11y-toolbar-position(@direction) {
|
|
|
|
&.pojo-a11y-toolbar-@{direction} {
|
|
@{direction}: -@toolbar-width;
|
|
|
|
-webkit-transition: @direction 750ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
|
-moz-transition: @direction 750ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
|
-o-transition: @direction 750ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
|
transition: @direction 750ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
|
|
|
&.pojo-a11y-toolbar-open {
|
|
@{direction}: 0;
|
|
}
|
|
|
|
& when (@direction = left) {
|
|
.pojo-a11y-toolbar-toggle {
|
|
left: 180px;
|
|
}
|
|
}
|
|
|
|
& when (@direction = right) {
|
|
.pojo-a11y-toolbar-toggle {
|
|
right: 180px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#pojo-a11y-toolbar {
|
|
position: fixed;
|
|
font-size: 16px !important;
|
|
line-height: 1.4;
|
|
z-index: 9999;
|
|
|
|
.pojo-a11y-toolbar-position(right);
|
|
.pojo-a11y-toolbar-position(left);
|
|
|
|
.pojo-a11y-toolbar-toggle {
|
|
position: absolute;
|
|
|
|
a {
|
|
display: inline-block;
|
|
font-size: 200%;
|
|
line-height: 0;
|
|
padding: 10px;
|
|
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
|
|
box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
|
|
box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
|
|
}
|
|
}
|
|
|
|
svg {
|
|
max-width: inherit; //Compatibility for Twenty Twenty theme `svg {max-width:100%;}`
|
|
}
|
|
}
|
|
|
|
.pojo-a11y-toolbar-overlay {
|
|
border: 1px solid;
|
|
font-size: 100%;
|
|
width: @toolbar-width;
|
|
|
|
p.pojo-a11y-toolbar-title {
|
|
display: block;
|
|
line-height: 2;
|
|
font-weight: bold;
|
|
padding: 10px 15px 0;
|
|
margin: 0;
|
|
}
|
|
|
|
&.pojo-a11y-toolbar-open {
|
|
|
|
.pojo-a11y-toolbar-toggle a,
|
|
.pojo-a11y-toolbar-overlay {
|
|
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
|
|
box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
|
|
}
|
|
}
|
|
|
|
ul.pojo-a11y-toolbar-items {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 10px 0;
|
|
|
|
&.pojo-a11y-links {
|
|
border-top: 1px solid;
|
|
}
|
|
|
|
li.pojo-a11y-toolbar-item {
|
|
|
|
a {
|
|
display: block;
|
|
padding: 10px 15px;
|
|
font-size: 80%;
|
|
line-height: 1;
|
|
|
|
&.active {
|
|
font-weight: bold;
|
|
}
|
|
|
|
svg {
|
|
padding-right: 6px;
|
|
display: inline-block;
|
|
width: 1.5em;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: inherit;
|
|
line-height: 1;
|
|
text-align: center;
|
|
text-rendering: auto;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.pojo-a11y-toolbar-text {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
body.rtl {
|
|
|
|
#pojo-a11y-toolbar {
|
|
|
|
.pojo-a11y-toolbar-overlay {
|
|
|
|
ul.pojo-a11y-toolbar-items {
|
|
|
|
li.pojo-a11y-toolbar-item {
|
|
|
|
a {
|
|
|
|
svg {
|
|
padding-left: 6px;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Responsive
|
|
@media (max-width: 767px) {
|
|
|
|
#pojo-a11y-toolbar {
|
|
|
|
.pojo-a11y-toolbar-overlay {
|
|
|
|
p.pojo-a11y-toolbar-title {
|
|
padding: 7px 12px 0;
|
|
}
|
|
|
|
ul.pojo-a11y-toolbar-items {
|
|
padding: 7px 0;
|
|
|
|
li.pojo-a11y-toolbar-item {
|
|
|
|
a {
|
|
display: block;
|
|
padding: 7px 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |
