Merge pull request #18 from Adslot/extract-css-and-update-bootstrap-e…

…xport-variables Extract css and update bootstrap export variables
Adslot · Jan 4, 2016 · 21857e9 · 21857e9
2 parents a8d6f91 + 5235117
commit 21857e9
Show file tree

Hide file tree

Showing 11 changed files with 119 additions and 35 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "adslot-ui",
   "description": "Core component library. By Adslot",
-  "main": "dist/adslot-ui-main.js",
+  "main": ["dist/adslot-ui-main.js", "dist/adslot-ui.css"],
   "dependencies": {
     "lodash": "^3.0.0",
     "react": "^0.14.0"

diff --git a/cfg/base.js b/cfg/base.js
@@ -14,6 +14,7 @@ const supportedBrowsers = [
   'not op_mini > 0',
 ].join('", "');
 const autoprefixerConfig = `autoprefixer-loader?{browsers:["${supportedBrowsers}"]}`;
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
   port,
@@ -47,13 +48,10 @@ module.exports = {
       },
     ],
     loaders: [
-      {
-        test: /\.css$/,
-        loader: 'style!css',
-      },
       {
         test: /\.scss/,
-        loader: `style-loader!css-loader!${autoprefixerConfig}!sass-loader?outputStyle=expanded`,
+        loader: ExtractTextPlugin.extract(
+          `css-loader!${autoprefixerConfig}!sass-loader?outputStyle=expanded`),
       },
       {
         test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg)$/,

diff --git a/cfg/dev.js b/cfg/dev.js
@@ -1,6 +1,7 @@
 const path = require('path');
 const webpack = require('webpack');
 const _ = require('lodash');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 const baseConfig = require('./base');
 
@@ -13,6 +14,7 @@ const config = _.merge({
   cache: true,
   devtool: 'eval',
   plugins: [
+    new ExtractTextPlugin('adslot-ui.css'),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin(),
   ],

diff --git a/cfg/dist.js b/cfg/dist.js
@@ -2,12 +2,12 @@ const _ = require('lodash');
 const baseConfig = require('./base');
 const path = require('path');
 const webpack = require('webpack');
-
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const componentsPath = path.resolve(__dirname, '../src/components/');
 
 const config = _.merge(baseConfig, {
   cache: false,
-  devtool: 'sourcemap',
+  devtool: 'inline',
   externals: {
     lodash: {
       root: '_',
@@ -38,6 +38,7 @@ const config = _.merge(baseConfig, {
     library: 'AdslotUI',
   },
   plugins: [
+    new ExtractTextPlugin('adslot-ui.css'),
     new webpack.optimize.DedupePlugin(),
     new webpack.optimize.UglifyJsPlugin({
       compress: {

diff --git a/dist/adslot-ui-main.js b/dist/adslot-ui-main.js
diff --git a/dist/adslot-ui.css b/dist/adslot-ui.css
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.2",
   "description": "Core component library. By Adslot",
   "main": "dist/adslot-ui-main.js",
+  "license": "MIT",
   "scripts": {
     "start": "node server.js --env=dev",
     "test": "karma start",
@@ -49,6 +50,7 @@
     "eslint-config-airbnb": "^2.1.1",
     "eslint-loader": "^1.1.1",
     "eslint-plugin-react": "^3.11.3",
+    "extract-text-webpack-plugin": "^0.9.1",
     "file-loader": "^0.8.5",
     "generator-react-webpack": "^3.1.1",
     "isparta-loader": "^2.0.0",

diff --git a/src/index.html b/src/index.html
@@ -6,6 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="description" content="Core Component Library. By Adslot">
   <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:500,300,100' />
+  <link rel='stylesheet' href='assets/adslot-ui.css' />
 </head>
 <body>
   <div id="app">APPLICATION CONTENT</div>

diff --git a/src/styles/_bootstrap-custom.scss b/src/styles/_bootstrap-custom.scss
@@ -13,46 +13,51 @@
 @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding';
 @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/type';
 // @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/code';
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid';
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/tables';
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/forms';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/tables';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/forms';
 @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/buttons';
 
 // Components
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/component-animations';
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/dropdowns';
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/button-groups';
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/input-groups';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/component-animations';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/dropdowns';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/button-groups';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/input-groups';
 @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navs';
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navbar';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navbar';
 // @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs';
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pagination';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pagination';
 // @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pager';
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/labels';
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/badges';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/labels';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/badges';
 // @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/jumbotron';
 // @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/thumbnails';
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/alerts';
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/progress-bars';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/alerts';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/progress-bars';
 // @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/media';
 // @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/list-group';
 // @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/panels';
 // @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed';
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/wells';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/wells';
 @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/close';
 
 // Components w/ JavaScript
 @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/modals';
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/tooltip';
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/popovers';
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/carousel';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/tooltip';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/popovers';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/carousel';
 //
 // // Utility classes
-// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities';
 // @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities';
 
 
 // AdslotUI overrides
 @import './bootstrapOverrides/Button';
 @import './bootstrapOverrides/Modal';
 @import './bootstrapOverrides/Nav';
+
+b,
+strong {
+  font-weight: $font-weight-bold;
+}
diff --git a/src/styles/bootstrapOverrides/Button.scss b/src/styles/bootstrapOverrides/Button.scss
@@ -4,7 +4,12 @@
 @mixin button-disabled {
   background-color: $color-disabled;
   border-color: $color-disabled;
-  color: $color-text;
+  color: $color-text-light;
+}
+
+@mixin reset-shadow-and-transform {
+  box-shadow: none;
+  transform: translateY(0);
 }
 
 @mixin button-inverse($color) {
@@ -39,8 +44,7 @@
 
   &:active,
   &.active {
-    box-shadow: none;
-    transform: translateY(0);
+    @include reset-shadow-and-transform;
   }
 
   &:active,
@@ -59,12 +63,24 @@
     &:hover {
       @include button-disabled;
     }
+
+    &:active,
+    &:focus,
+    &:hover {
+      @include reset-shadow-and-transform;
+    }
   }
 }
 
 .btn-link {
   cursor: pointer;
   font-weight: $font-weight-medium; // Overrides 'normal'
+
+  &:active,
+  &:focus,
+  &:hover {
+    @include reset-shadow-and-transform;
+  }
 }
 
 .btn-xs,

diff --git a/src/styles/variable.scss b/src/styles/variable.scss
@@ -72,3 +72,62 @@ $modal-inner-padding: 30px;
 
 $modal-header-border-color: $color-border-lighter;
 $modal-content-border-color: $modal-header-border-color;
+
+$modal-backdrop-bg: $color-gray-darker;
+$modal-backdrop-opacity: .8;
+$modal-content-border-color: transparent;
+
+// == Tables
+$table-bg-accent: $color-gray-white; // for striping;
+$table-bg-hover: $color-gray-white; // for hover;
+$table-border-color: $color-gray-light; // table and cell border;
+
+// == Forms
+$input-border: $color-border-light;
+$input-bg-disabled: $color-gray-lighter;
+
+// == Dropdowns
+$dropdown-border: $color-border-light;
+$dropdown-link-color: $color-text;
+$dropdown-link-hover-color: $color-text-inverse;
+$dropdown-link-active-color: $dropdown-link-color;
+$dropdown-link-active-bg: $color-gray-white;
+
+// == Grid system
+$grid-gutter-width: 20px;
+
+// == Navbar
+$navbar-height: 35px;
+
+// == Pagination
+$pagination-bg: $color-well;
+$pagination-border: $color-border-lighter;
+
+$pagination-hover-border: $color-border-lighter;
+$pagination-hover-bg: $color-gray-white;
+
+$pagination-active-color: $color-text-light;
+$pagination-active-bg: $color-gray-white;
+$pagination-active-border: $color-border-lighter;
+
+$pagination-disabled-border: $color-border-lighter;
+
+// == Form states and alerts
+$state-success-text: $color-text-inverse;
+$state-success-bg: $color-positive;
+$state-success-border: $color-positive-selected;
+
+$state-info-text: $color-text-inverse;
+$state-info-bg: $color-info;
+$state-info-border: $color-info-selected;
+
+$state-warning-text: $color-text-inverse;
+$state-warning-bg: $color-warning;
+$state-warning-border: $color-warning-selected;
+
+$state-danger-text: $color-text-inverse;
+$state-danger-bg: $color-negative;
+$state-danger-border: $color-negative-selected;
+
+// == Nav
+$grid-float-breakpoint: 0; // Stops the navigation responding to breakpoints.