Merge pull request #38 from openstax/fix/post-elsa

Fix styles to be wrapped and not conflict with parents

package.json

@@ -30,7 +30,7 @@
  "keymaster": "^1.6.2",
  "lodash": "^3.10.1",
  "moment": "^2.9.0",
- "openstax-react-components": "openstax/react-components#0b8076d20de1964025a76df4f45256a1ef7c40fc",
+ "openstax-react-components": "openstax/react-components#dbd0ddb0120920b12210d8c2266747f407bc308a",
  "underscore": "~1.8.2"
  },
  "devDependencies": {

resources/styles/components/concept-coach/breadcrumbs.less

@@ -21,7 +21,7 @@
  margin: 1rem 0;
  }
 
- .task-breadcrumbs-step {
+ .openstax-breadcrumbs-step {
  border-width: 2px;
  border-style: solid;
  border-radius: @concept-coach-breadcrumb-border-radius;
@@ -81,7 +81,7 @@
  .task-practice,
  .task-chapter_practice,
  .task-page_practice {
- .task-breadcrumbs-step {
+ .openstax-breadcrumbs-step {
  width: auto;
  position: relative;
 

resources/styles/components/exercise/index.less

@@ -6,6 +6,6 @@
  left: @concept-coach-base-y-padding - 27px;
  top: @concept-coach-base-x-padding;
 
- .exercise();
+ .exercise-typography();
  }
 }

resources/styles/components/shared.less

@@ -1,6 +1,6 @@
 i.close-icon {
- .fa;
- .fa-3x;
+ .fa();
+ .fa-3x();
  cursor: pointer;
  // position pointer to the top right of content
  float: right;

resources/styles/demo.less

@@ -1,2 +1,4 @@
 @import '~openstax-react-components/resources/styles/main';
 @import "@{bootstrap-path}/jumbotron";
+@import "@{bootstrap-path}/navs";
+@import "@{bootstrap-path}/navbar";

resources/styles/main.less

@@ -1,12 +1,16 @@
+@import '~openstax-react-components/resources/styles/no-conflict';
+@import './components/concept-coach/modal-opened';
+
 // All styles are included inside the wrapper selector
 // This ensures CC specific styles do not alter
 // the appearance of the website that's embedding CC
 .concept-coach-wrapper {
  width: 100%;
  height: 100%;
 
- @import '~openstax-react-components/resources/styles/main';
- @import './components/shared';
+ @import "@{bootstrap-path}/variables";
+
+ // @import './components/shared';
  @import './components/concept-coach/index';
  @import './components/navigation/index';
  @import './components/task/index';
@@ -16,11 +20,6 @@
  @import './components/course/index';
  @import './components/user/index';
 
- @import "@{bootstrap-path}/navs";
- @import "@{bootstrap-path}/navbar";
-
  @import './mixins';
  @import './variables';
 }
-@import '~openstax-react-components/resources/styles/variables/colors';
-@import './components/concept-coach/modal-opened';

src/concept-coach/base.cjsx

@@ -111,7 +111,7 @@ ConceptCoach = React.createClass
  className = classnames 'concept-coach-view', "concept-coach-view-#{view}",
  loading: not (isLoggedIn or isLoaded)
 
- <div className='concept-coach'>
+ <div className='concept-coach openstax-wrapper'>
  <ErrorNotification />
 
  <SpyMode.Wrapper>

webpack-helper/configs.coffee

@@ -29,7 +29,7 @@ base =
  # new webpack.NormalModuleReplacementPlugin(/\/react\/lib\/cloneWithProps/, '../../react-clonewithprops/index.js')
  # Pass the BASE_URL along
  new webpack.EnvironmentPlugin( 'NODE_ENV', 'BASE_URL' )
- new ExtractTextPlugin('main.css')
+ new ExtractTextPlugin('[name].css')
  new webpack.optimize.DedupePlugin()
  ]
 

webpack.config.coffee

@@ -33,14 +33,19 @@ getWebpackConfig = (name, isProduction) ->
  }, {isProduction}]
  'demo': [{
  entry:
- demo: [
+ 'demo.js': [
  './demo'
- './resources/styles/main.less'
+ ]
+ 'demo': [
  './resources/styles/demo.less'
  ]
+ 'main': [
+ './resources/styles/main.less'
+ ]
  output:
  path: './assets/'
  publicPath: './'
+ filename: '[name]'
  }, {isProduction, minify: true}]
 
  if configs[name]?