craftpip / angular-confirm

A multipurpose plugin for alert, confirm & dialog for angular1
http://craftpip.github.io/angular-confirm/
MIT License
115 stars 20 forks source link

Can't opt out of default button styling #18

Open seavor opened 7 years ago

seavor commented 7 years ago

If you have to implement a custom design, the theme feature gets you most of the way there, but there's a bunch of built-in styles applied to the buttons that block any easy way of using custom button classes.

A config property that allows you to turn off default styling for buttons would be great, so that you don't have to counteract the offending styles in your custom class.

.ng-confirm .ng-confirm-box .ng-confirm-buttons button {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 4px;
    min-height: 1em;
    outline: 0;
    -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
    transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    border: none;
    background-image: none;
}
seavor commented 7 years ago

I was able to work around it by doing something a bit silly in my theme file.

buttons: {
  confirm: {
    text: 'Yes',
    btnClass: 'lex-btn-green',
    action: LexileSvc_.quit
  },
  close: {
    text: 'No',
    btnClass: 'lex-btn-green-hollow'
  }
}
.ng-confirm-buttons {
      button {
        &.lex-btn-green {
            @extend .lex-btn-green;
        }
        &.lex-btn-green-hollow {
            @extend .lex-btn-green-hollow;
        }
      }
    }