ng-bs-animated-button icon indicating copy to clipboard operation
ng-bs-animated-button copied to clipboard

Initial icon

Open drymek opened this issue 9 years ago • 3 comments

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.

drymek avatar Jul 23 '15 06:07 drymek

I can't seem to get an initial icon with default text to work either...

Janneman84 avatar Oct 05 '15 14:10 Janneman84

Same here. Please let us know when it is fixed.

shamdan avatar Oct 14 '15 20:10 shamdan

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

rmcclellgc avatar Apr 22 '16 19:04 rmcclellgc