Popover plugin add color modifiers

CHANGELOG.md

 # Amaze UI Change Log
 ---
 
+### 2014.12 W3
+
+**JS:**
+
+- `NEW` #283 添加表单验证插件；
+- `IMPROVED` Popover 增加大小、颜色样式；
+
+
 ### 2014.12 W2
 
 **CSS:**

js/ui.popover.js

@@ -19,6 +19,7 @@ var Popover = function(element, options) {
 };
 
 Popover.DEFAULTS = {
+  theme: undefined,
   trigger: 'click',
   content: '',
   open: false,
@@ -182,12 +183,20 @@ Popover.prototype.close = function() {
 
 Popover.prototype.getPopover = function() {
   var uid = UI.utils.generateGUID('am-popover');
-  return $(this.options.tpl).attr('id', uid);
+  var theme = [];
+
+  if (this.options.theme) {
+    $.each(this.options.theme.split(','), function(i, item) {
+      theme.push('am-popover-' + $.trim(item));
+    });
+  }
+  return $(this.options.tpl).attr('id', uid).addClass(theme.join(' '));
 };
 
-Popover.prototype.setContent = function() {
+Popover.prototype.setContent = function(content) {
+  content = content || this.options.content;
   this.$popover && this.$popover.find('.am-popover-inner').empty().
-    html(this.options.content);
+    html(content);
 };
 
 Popover.prototype.events = function() {
@@ -222,7 +231,7 @@ function Plugin(option) {
     }
 
     if (typeof option == 'string') {
-      data[option]();
+      data[option] && data[option]();
     }
   });
 }

less/ui.popover.less

@@ -25,6 +25,9 @@
 @popover-color: @white;
 @popover-border-radius: @global-radius;
 @popover-duration: 300ms;
+@popover-font-size: @global-font-size;
+@popover-sm-font-size: @font-size-sm;
+@popover-lg-font-size: @font-size-lg;
 
 
 /* ==========================================================================
@@ -42,9 +45,9 @@
   color: @popover-color;
   border: 1px solid @popover-border;
   display: none;
+  font-size: @popover-font-size;
   z-index: @z-index-popover;
   opacity: 0;
-  transform: none;
   transition: opacity @popover-duration;
   .hook-popover;
 
@@ -57,7 +60,7 @@
 .@{ns}popover-inner {
   position: relative;
   background: @popover-bg;
-  padding: 10px;
+  padding: 8px;
   z-index: 110;
   .scrollable();
   .hook-popover-inner;
@@ -70,7 +73,6 @@
   z-index: 100;
   .caret-up(8px, @popover-bg);
   overflow: hidden;
-
   .hook-popover-caret;
 
   .@{ns}popover-top & {
@@ -98,6 +100,53 @@
 }
 
 
+// Modifiers
+// =============================================================================
+
+.@{ns}popover-sm {
+  font-size: @popover-sm-font-size;
+
+  .@{ns}popover-inner {
+    padding: 5px;
+  }
+}
+
+.@{ns}popover-lg {
+  font-size: @popover-lg-font-size;
+}
+
+.popover-color-variant(@bg-color: @global-primary) {
+  border-color: @bg-color;
+  .@{ns}popover-inner {
+    background: @bg-color;
+  }
+
+  .@{ns}popover-caret {
+    border-bottom-color: @bg-color;
+  }
+};
+
+.@{ns}popover-secondary {
+  .popover-color-variant(@global-primary);
+}
+
+.@{ns}popover-secondary {
+  .popover-color-variant(@global-secondary);
+}
+
+.@{ns}popover-success {
+  .popover-color-variant(@global-success);
+}
+
+.@{ns}popover-warning {
+  .popover-color-variant(@global-warning);
+}
+
+.@{ns}popover-danger {
+  .popover-color-variant(@global-danger);
+}
+
+
 // Hooks
 // =============================================================================