Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't opt out of default button styling #18

Open
seavor opened this issue Aug 15, 2017 · 1 comment
Open

Can't opt out of default button styling #18

seavor opened this issue Aug 15, 2017 · 1 comment

Comments

@seavor
Copy link

seavor commented Aug 15, 2017

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
Copy link
Author

seavor commented Aug 15, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant