ng-bs-animated-button
ng-bs-animated-button copied to clipboard
Initial icon
It's looks like icon.initial is never used (at least with onlyIcons = false). Is there any reason for that? I would like to have button with "defaultText" + "initailIcon". if this is not intentional, I'll prepare PR.
I can't seem to get an initial icon with default text to work either...
Same here. Please let us know when it is fixed.
Changing the css to should fix the issue if inital icon not showing
@-webkit-keyframes btn-ng-bs-rotation {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes btn-ng-bs-rotation {
0% {
-moz-transform: rotate(0);
transform: rotate(0);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes btn-ng-bs-rotation {
0% {
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes btn-ng-bs-rotation {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.btn-ng-bs-animated .icons {
opacity: 0;
width: 0;
-webkit-transition: opacity 0.15s, width 0.15s;
-moz-transition: opacity 0.15s, width 0.15s;
-o-transition: opacity 0.15s, width 0.15s;
transition: opacity 0.15s, width 0.15s;
}
.btn-ng-bs-animated.icons-only .icons,
.btn-ng-bs-animated .icons,
.btn-ng-bs-animated.is-active .icons {
opacity: 1;
width: 1em;
}
.btn-ng-bs-animated.is-active .icons.pull-left {
margin-right: 0.4em;
}
.btn-ng-bs-animated.icons-only.is-active .icons.pull-left,
.btn-ng-bs-animated .icons {
margin-right: 0.4em;
}
.btn-ng-bs-animated .icon-initial {
display: inline-block;
}
.btn-ng-bs-animated.icons-only .icon-initial {
display: inline-block;
}
.btn-ng-bs-animated.is-active .icon-initial {
display: none;
}
.btn-ng-bs-animated.is-active .icons.pull-right,
.btn-ng-bs-animated .icons {
margin-left: 0.4em;
}
.btn-ng-bs-animated.is-active .icons .icon-spinner {
-webkit-animation: btn-ng-bs-rotation 2s infinite linear;
-moz-animation: btn-ng-bs-rotation 2s infinite linear;
-o-animation: btn-ng-bs-rotation 2s infinite linear;
animation: btn-ng-bs-rotation 2s infinite linear;
}
.btn-ng-bs-animated.icons-only .text {
display: none;
}