ANGULAR-CONFIRM

Themes - Use one, or make your own.

angular-confirm v docs
view on Github

back to Main Docs

Themes

The Light & Dark themes that suit any website design, 

$ngConfirm({
    theme: 'light'
});
$.confirm({
    theme: 'dark'
});
$.confirm({
    theme: 'supervan' // 'material', 'bootstrap'
});

Make your own themes

Why not? A unique design must have a unique confirm box

This is a CSS boilerplate for defining a theme. 

.ng-confirm.ng-confirm-my-theme {
  .ng-confirm-bg {
    &.ng-confirm-bg-h {
    }
  }
  .ng-confirm-scrollpane {
  }
  .ng-confirm-box {
    &.ng-confirm-loading {
      &:before {
      }
      &:after {
      }
    }
    div.ng-confirm-closeIcon {
      &:empty {
      }
      .fa, .glyphicon, .zmdi {
      }
      &:hover {
      }
    }
    div.ng-confirm-title-c {
      .ng-confirm-icon-c {
        i {
        }
        &:empty {
        }
      }
      .ng-confirm-title {
        &:empty {
        }
      }
    }
    div.ng-confirm-content-pane {
      .ng-confirm-content {
        img {
        }
        &:empty {
        }
      }
    }
    .ng-confirm-buttons {
      button{
      }
    }
  }
  .ng-confirm-clear {
  }
  &.ng-confirm-rtl {
    .ng-confirm-closeIcon {
    }
  }
}
.ng-confirm.ng-confirm-my-theme {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-bg {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-bg.ng-confirm-bg-h {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-scrollpane {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box.ng-confirm-loading {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box.ng-confirm-loading:before {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box.ng-confirm-loading:after {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box div.ng-confirm-closeIcon {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box div.ng-confirm-closeIcon:empty {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box div.ng-confirm-closeIcon .fa,
.ng-confirm.ng-confirm-my-theme .ng-confirm-box div.ng-confirm-closeIcon .glyphicon,
.ng-confirm.ng-confirm-my-theme .ng-confirm-box div.ng-confirm-closeIcon .zmdi {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box div.ng-confirm-closeIcon:hover {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box div.ng-confirm-title-c {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box div.ng-confirm-title-c .ng-confirm-icon-c {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box div.ng-confirm-title-c .ng-confirm-icon-c i {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box div.ng-confirm-title-c .ng-confirm-icon-c:empty {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box div.ng-confirm-title-c .ng-confirm-title {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box div.ng-confirm-title-c .ng-confirm-title:empty {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box div.ng-confirm-content-pane {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box div.ng-confirm-content-pane .ng-confirm-content {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box div.ng-confirm-content-pane .ng-confirm-content img {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box div.ng-confirm-content-pane .ng-confirm-content:empty {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box .ng-confirm-buttons {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-box .ng-confirm-buttons button {
}
.ng-confirm.ng-confirm-my-theme .ng-confirm-clear {
}
.ng-confirm.ng-confirm-my-theme.ng-confirm-rtl {
}
.ng-confirm.ng-confirm-my-theme.ng-confirm-rtl .ng-confirm-closeIcon {
}

JS part of it 

$ngConfirm({
    theme: 'my-theme'
});

Thanks for making it to the end of the document.
Your support and suggestions matter the most!

Please post your
Questions / Suggestions / Issues.

Made by @craftpip