Would be nice if this were setup as a Bootstrap.js extension, using the base theming i

if you are using bootstrap with less you can use the following: <div class="highli

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

plugin for use with bootstrap. about alertify.js HOT 6 CLOSED

fabien-d commented on May 24, 2024

plugin for use with bootstrap.

from alertify.js.

Comments (6)

commented on May 24, 2024

indeed, very needed!

from alertify.js.

fabien-d commented on May 24, 2024

I've split the core and theme CSS into separate files. For this one, I'm leaning towards simply adding a alertify.bootstrap.css file which would style the dialogs in a bootstrap look and feel.

from alertify.js.

nodrog commented on May 24, 2024

if you are using bootstrap with less you can use the following:

.rgba-background-color(@hex, @alpha: 1) {
  background-color: @hex;
  background-color: hsla(hue(@hex), saturation(@hex), lightness(@hex), @alpha);
}
.rgba-box-shadow(@dimentions, @hex, @alpha: 1) {
   box-shadow: @dimentions hsla(hue(@hex), saturation(@hex), lightness(@hex), @alpha);
}

.rgba-border(@details, @hex, @alpha: 1) {
  border: @details @hex;
  border: @details hsla(hue(@hex), saturation(@hex), lightness(@hex), @alpha);
}

.alertify {
  background: @white;
  border-radius: 6px;
  .rgba-border(1px solid, @black, 0.3);
  .rgba-box-shadow(0 3px 7px, @black, 0.3);
  -webkit-background-clip: padding; 
  -moz-background-clip: padding; 
  background-clip: padding-box;
}

.alertify-text {
  border: 1px solid @textColor;
  padding: 10px;
  border-radius: 4px;
}

.alertify-button {
  .btn;
  &.alertify-button-cancel {
    .btn-danger;
  }
  &.alertify-button-ok {
    .btn-success;
  }

  &:hover, &:focus {
    color:@white;
    text-decoration:none;
    outline: none;
    box-shadow: none;
  }

}

.alertify-log {
  .alert;
  &.alertify-log-error {
     .alert-error;
  }
  &.alertify-log-success {
     .alert-success;
  }
}