feat(tabs): add CSS to css file

- Add tab specific CSS to separate CSS file

Closes #5211

Author: wesleycho

Gruntfile.js

@@ -251,7 +251,7 @@ module.exports = function(grunt) {
       css: [],
       js: []
     };
-    module.cssFiles.forEach(processCSS.bind(null, styles, true));
+    module.cssFiles.forEach(processCSS.bind(null, module.name, styles, true));
     if (styles.css.length) {
       module.css = styles.css.join('\n');
       module.cssJs = styles.js.join('\n');
@@ -413,7 +413,7 @@ module.exports = function(grunt) {
    * Logic from AngularJS
    * https://github.com/angular/angular.js/blob/36831eccd1da37c089f2141a2c073a6db69f3e1d/lib/grunt/utils.js#L121-L145
    */
-  function processCSS(state, minify, file) {
+  function processCSS(moduleName, state, minify, file) {
     var css = fs.readFileSync(file).toString(),
       js;
     state.css.push(css);
@@ -433,7 +433,7 @@ module.exports = function(grunt) {
       .replace(/\\/g, '\\\\')
       .replace(/'/g, "\\'")
       .replace(/\r?\n/g, '\\n');
-    js = `angular.module('ui.bootstrap.carousel').run(function() {!angular.$$csp() && angular.element(document).find('head').prepend('<style type="text/css">${css}</style>'); });`;
+    js = `angular.module('ui.bootstrap.${moduleName}').run(function() {!angular.$$csp() && angular.element(document).find('head').prepend('<style type="text/css">${css}</style>'); });`;
     state.js.push(js);
 
     return state;

src/tabs/docs/demo.html

@@ -1,52 +1,4 @@
 <style type="text/css">
-  .uib-tab > div {
-    position: relative;
-    display: block;
-    padding: 10px 15px;
-    outline: 0;
-    color: #337ab7;
-  }
-  .uib-tab > div:focus,
-  .uib-tab > div:hover {
-    background-color: #eee;
-    color: #23527c;
-  }
-  .uib-tab.disabled > div {
-    color: #777;
-  }
-  .uib-tab.disabled > div:focus,
-  .uib-tab.disabled > div:hover {
-    color: #777;
-    cursor: not-allowed;
-    background-color: transparent;
-  }
-  .nav-tabs > .uib-tab > div {
-    margin-right: 2px;
-    line-height: 1.42857143;
-    border: 1px solid transparent;
-    border-radius: 4px 4px 0 0;
-  }
-  .nav-tabs > .uib-tab > div:hover {
-    border-color: #eee #eee #ddd;
-  }
-  .nav-tabs > .uib-tab.active > div,
-  .nav-tabs > .uib-tab.active > div:focus,
-  .nav-tabs > .uib-tab.active > div:hover {
-    color: #555;
-    cursor: default;
-    background-color: #fff;
-    border-color: #ddd #ddd transparent #ddd;
-  }
-  .nav-pills > .uib-tab > div {
-    border-radius: 4px;
-  }
-  .nav-pills > .uib-tab.active > div,
-  .nav-pills > .uib-tab.active > div:focus,
-  .nav-pills > .uib-tab.active > div:hover {
-    color: #fff;
-    background-color: #337ab7;
-  }
-
   form.tab-form-demo .tab-pane {
     margin: 20px 20px;
   }

src/tabs/tabs.css

@@ -0,0 +1,47 @@
+.uib-tab > div {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  outline: 0;
+  color: #337ab7;
+}
+.uib-tab > div:focus,
+.uib-tab > div:hover {
+  background-color: #eee;
+  color: #23527c;
+}
+.uib-tab.disabled > div {
+  color: #777;
+}
+.uib-tab.disabled > div:focus,
+.uib-tab.disabled > div:hover {
+  color: #777;
+  cursor: not-allowed;
+  background-color: transparent;
+}
+.nav-tabs > .uib-tab > div {
+  margin-right: 2px;
+  line-height: 1.42857143;
+  border: 1px solid transparent;
+  border-radius: 4px 4px 0 0;
+}
+.nav-tabs > .uib-tab > div:hover {
+  border-color: #eee #eee #ddd;
+}
+.nav-tabs > .uib-tab.active > div,
+.nav-tabs > .uib-tab.active > div:focus,
+.nav-tabs > .uib-tab.active > div:hover {
+  color: #555;
+  cursor: default;
+  background-color: #fff;
+  border-color: #ddd #ddd transparent #ddd;
+}
+.nav-pills > .uib-tab > div {
+  border-radius: 4px;
+}
+.nav-pills > .uib-tab.active > div,
+.nav-pills > .uib-tab.active > div:focus,
+.nav-pills > .uib-tab.active > div:hover {
+  color: #fff;
+  background-color: #337ab7;
+}