Merge pull request #7 from Adslot/remove-bootstrap-sass-loader

Remove bootstrap-sass-loader and reorganise styles
Adslot · Dec 17, 2015 · 07b2465 · 07b2465
2 parents abf697d + 1af1006
commit 07b2465
Show file tree

Hide file tree

Showing 16 changed files with 133 additions and 151 deletions.
diff --git a/.sass-lint.yml b/.sass-lint.yml
@@ -42,6 +42,7 @@ rules:
   force-pseudo-nesting: 2
 
   # Name Formats
+  class-name-format: 2
   function-name-format: 2
   mixin-name-format: 2
   placeholder-name-format: 2
@@ -58,6 +59,7 @@ rules:
   leading-zero: 2
   nesting-depth: [2, max-depth: 4]
   property-sort-order: 2
+  property-units: [2, global: ['px']]
   quotes: 2
   shorthand-values: 2
   url-quotes: 2
@@ -72,6 +74,7 @@ rules:
   space-before-bang: 2
   space-after-bang: 2
   space-between-parens: 2
+  space-around-operator: 2
 
   # Final Items
   trailing-semicolon: 2

diff --git a/bootstrap-sass.config.js b/bootstrap-sass.config.js
diff --git a/dist/adslot-ui-main.js b/dist/adslot-ui-main.js
diff --git a/package.json b/package.json
@@ -32,11 +32,10 @@
     "babel-core": "^6.3.17",
     "babel-eslint": "^4.1.5",
     "babel-loader": "^6.2.0",
-    "babel-plugin-transform-strict-mode": "^6.2.0",
-    "babel-preset-es2015": "^6.1.18",
-    "babel-preset-react": "^6.1.18",
+    "babel-plugin-transform-strict-mode": "^6.3.13",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
     "bootstrap-sass": "^3.3.6",
-    "bootstrap-sass-loader": "^1.0.9",
     "chai": "^3.4.1",
     "codecov.io": "^0.1.6",
     "css-loader": "^0.23.0",
@@ -66,7 +65,7 @@
     "react-addons-test-utils": "^0.14.3",
     "react-hot-loader": "^1.3.0",
     "rimraf": "^2.4.4",
-    "sass-lint": "^1.3.3",
+    "sass-lint": "^1.4.0",
     "sass-loader": "^3.1.2",
     "style-loader": "^0.13.0",
     "url-loader": "^0.5.7",

diff --git a/src/components/Main.js b/src/components/Main.js
@@ -1,12 +1,13 @@
-require('bootstrap-sass!../../bootstrap-sass.config.js');
-
 import React from 'react';
+
 import {
   Button,
   Modal,
   Nav,
   NavItem,
-} from 'react-bootstrap';
+} from './distributionEntry';
+
+require('styles/App.scss');
 
 class AppComponent extends React.Component {
   constructor(props) {

diff --git a/src/components/distributionEntry.js b/src/components/distributionEntry.js
@@ -1,5 +1,6 @@
 // Export all the components that are consumable.
-require('bootstrap-sass!../../bootstrap-sass.config.js');
+
+require('styles/_bootstrap-custom.scss');
 
 import Button from 'react-bootstrap/lib/Button';
 import Modal from 'react-bootstrap/lib/Modal';

diff --git a/src/styles/App.scss b/src/styles/App.scss
@@ -1,16 +1,25 @@
-@import 'components/Button';
-@import 'components/Modal';
-@import 'components/Tab';
+// For display of components during development.
+// This is not distributed.
 
-// Overall UI Library Styles
 body {
   font-family: 'Roboto', sans-serif;
+  margin: 0;
+}
 
-  h1 {
-    margin: 40px 40px 0;
-  }
+.index {
+  $etalon-spacing: 40px;
+
+  margin: 0 auto;
+  max-width: 600px;
+  min-width: 300px;
+  padding: 0 $etalon-spacing $etalon-spacing;
+
+  > h1 {
+    margin-bottom: $etalon-spacing;
+    margin-top: ($etalon-spacing * 2);
+   }
 
-  .btn-panel {
-    margin: 40px;
+  > .btn-panel + .btn-panel {
+    margin-top: $etalon-spacing;
   }
 }
diff --git a/src/styles/_bootstrap-custom.scss b/src/styles/_bootstrap-custom.scss
@@ -0,0 +1,58 @@
+// AdslotUI variables
+@import './variable';
+
+// Core variables and mixins
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins';
+
+// Reset and dependencies
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize';
+// @import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/print';
+
+// Core CSS
+@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/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/navs';
+// @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/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/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/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/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';
+//
+// // Utility classes
+// @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';
diff --git a/src/styles/components/Button.scss → src/styles/bootstrapOverrides/Button.scss b/src/styles/components/Button.scss → src/styles/bootstrapOverrides/Button.scss
@@ -1,4 +1,5 @@
 @import '../variable';
+@import '../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/buttons';
 
 @mixin button-disabled {
   background-color: $color-disabled;
@@ -23,7 +24,7 @@
 
 
 .btn {
-  box-shadow: 0 1px 0 0 $color-border-light;
+  box-shadow: 0 1px 0 $color-border-light;
   margin-right: 5px;
 
   &:last-child {
@@ -32,7 +33,7 @@
 
   &:hover,
   &:focus {
-    box-shadow: 0 2px 0 0 $color-border-light;
+    box-shadow: 0 2px 0 $color-border-light;
     transform: translateY(-1px);
   }
 

diff --git a/src/styles/components/Modal.scss → src/styles/bootstrapOverrides/Modal.scss b/src/styles/components/Modal.scss → src/styles/bootstrapOverrides/Modal.scss
@@ -1,7 +1,7 @@
 @import '../variable';
 
 .modal {
-  $modal-shadow: 0 3px 0 0 rgba(0, 0, 0, .25);
+  $modal-shadow: 0 3px 0 rgba($color-shadow, .25);
   $modal-header-footer-height: 40px;
   $modal-header-footer-left-padding: 15px;
   $modal-footer-padding: 6px;

diff --git a/src/styles/components/Tab.scss → src/styles/bootstrapOverrides/Nav.scss b/src/styles/components/Tab.scss → src/styles/bootstrapOverrides/Nav.scss
@@ -30,6 +30,7 @@
       &:hover,
       &:focus {
         border: 0;
+        outline: 0;
       }
 
       .icon {
@@ -58,7 +59,6 @@
       }
     }
 
-
     &:last-child {
       border-right: $border;
     }

diff --git a/src/styles/border.scss b/src/styles/border.scss
@@ -0,0 +1,3 @@
+@import 'color';
+
+$border-lighter: 1px solid $color-border-lighter;
diff --git a/src/styles/color.scss b/src/styles/color.scss
@@ -1,8 +1,3 @@
-
-// Global colours.
-// --------------------------------------------------
-
-
 // Hues (Primary Palette)
 
 $color-blue: #006dcc;
@@ -20,23 +15,23 @@ $color-orange-dark: #f8951d;
 $color-cyan: #49afcd;
 $color-cyan-dark: #0492ba;
 
-// For Create / Ad Previews:
-$color-pink: #f2009d;
-$color-purple: #6c217f;
-
-// Tones (Secondary Palette )
+// Tones (Secondary Palette)
 
 $color-white: #fff;
-$color-gray-white: #f9f9f9; // 2% Black
-$color-gray-lightest: #f3f3f3; // 5% Black
-$color-gray-lighter: #e8e8e8; // 10% Black
-$color-gray-light: #d3d3d3;// 20% Black
-$color-gray: #ababab;// 40% Black
-$color-gray-dark: #838383;// 60% Black
-$color-gray-darker: #5a5a5a;// 80% Black
-$color-gray-darkest: #333;// 90% Black
+
+$color-gray-white: #f9f9f9;
+$color-gray-lightest: #f3f3f3;
+$color-gray-lighter: #e8e8e8;
+$color-gray-light: #d3d3d3;
+
+$color-gray: #ababab;
+$color-gray-dark: #838383;
+$color-gray-darker: #5a5a5a;
+$color-gray-darkest: #333;
+
 $color-black: #000;
 
+
 // Usage: Use these values, not the colours directly
 
 // Informative
@@ -60,15 +55,18 @@ $color-info-selected: $color-cyan-dark;
 $color-disabled: $color-gray-lighter;
 $color-disabled-selected: $color-gray-light;
 
-$color-inverse: $color-white;
+$color-completed: $color-gray-dark;
+$color-remaining: $color-gray-lighter;
 
-$color-publisher: #96c83f;
-$color-media: $color-cyan;
+$color-ended: $color-gray-darkest;
+$color-ended-selected: $color-black;
+$color-rejected: $color-black;
+
+$color-inverse: $color-white;
 
 // Layout
 $color-well: $color-white;
 $color-background: $color-gray-lightest;
-$color-panel: $color-gray-light;
 
 // Typography
 $color-link: $color-cyan;
@@ -81,7 +79,9 @@ $color-text-inverse: $color-white;
 
 // Borders
 $color-border-lightest: $color-gray-lightest;
-$color-border-lighter: $color-gray-lighter; // Preferred Border for wells;
+$color-border-lighter: $color-gray-lighter; // Preferred Border
 $color-border-light: $color-gray-light;
 $color-border: $color-gray;
 $color-border-darker: $color-gray-darker;
+$color-border-error: $color-red-dark;
+$color-shadow: $color-black;
diff --git a/src/styles/font-size.scss → src/styles/fontSize.scss b/src/styles/font-size.scss → src/styles/fontSize.scss
@@ -1,7 +1,3 @@
-
-// 2014 Global type sizes
-// --------------------------------------------------
-
 $font-size-jumbo: 24px;
 $font-size-header: 18px;
 $font-size-subheader: 15px;

diff --git a/src/styles/fontWeight.scss b/src/styles/fontWeight.scss
@@ -0,0 +1,3 @@
+$font-weight-light: 100;
+$font-weight-medium: 300;
+$font-weight-bold: 500;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		@import 'color';

		$border-lighter: 1px solid $color-border-lighter;