open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add busy icon

Browse Source
This commit is contained in:
Rob Garrison 2018-11-29 05:11:28 -06:00
parent 7cd84038bf
commit 0e7ff1c78f
2 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
manage.html
View File

@ -240,8 +240,8 @@
</label>
<span id="bulk-filter-count"></span>
<span i18n-text="bulkActions"></span>
<span class="select-resizer bulk-actions-select">
<select id="bulk-actions" i18n-title="manageOnlyLocalTooltip">
<span class="select-resizer bulk-actions-select-wrapper">
<select id="bulk-actions-select" i18n-title="manageOnlyLocalTooltip">
<option i18n-text="bulkActionsSelect" value=""></option>
<option i18n-text="enableStyleLabel" value="enable"></option>
<option i18n-text="disableStyleLabel" value="disable"></option>
@ -255,7 +255,9 @@
<button id="bulk-actions-apply"i18n-text="bulkActionsApply"></button>
<svg class="svg-icon busy hidden" viewBox="0 0 24 24">
<path d="M12 23h-1v-6.57A5.97 5.97 0 0 1 7 18c-3.25 0-6-2.75-6-6v-1h6.57A5.97 5.97 0 0 1 6 7c0-3.25 2.75-6 6-6h1v6.57A5.97 5.97 0 0 1 17 6c3.25 0 6 2.75 6 6v1h-6.57A5.97 5.97 0 0 1 18 17c0 3.25-2.75 6-6 6zm1-9.87v7.74c1.7-.46 3-2.04 3-3.87s-1.3-3.41-3-3.87zM3.13 13c.46 1.7 2.04 3 3.87 3s3.41-1.3 3.87-3H3.13zm10-2h7.74c-.46-1.7-2.05-3-3.87-3s-3.41 1.3-3.87 3zM11 3.13C9.3 3.59 8 5.18 8 7s1.3 3.41 3 3.87V3.13z"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0" to="360 0 0" dur="1s" repeatCount="indefinite"/>
<!-- supported everwhere?
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0" to="360 0 0" dur="1s" repeatCount="indefinite"/>
-->
</svg>
</span>

18
manage/manage.css
View File

@ -56,11 +56,27 @@ a:hover {
}
.entry-actions > a,
.bulk-actions-select,
.bulk-actions-select-wrapper,
#bulk-actions-apply {
margin-left: 2px;
}
#bulk-actions .svg-icon.busy:not(.hidden) {
-webkit-animation:spin 1s linear infinite;
-moz-animation:spin 1s linear infinite;
animation:spin 1s linear infinite;
}
@-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
.svg-icon:hover {
fill: #000;
}