Feature/ns class

resources/styles/_components.less

@@ -0,0 +1,12 @@
+// This file should be imported wrapped within another less file only.
+// Each of them begin with a `&-`, allowing whatever file that is importing
+// this file to easily namespace all the components at once.
+
+@import './components/html/index';
+@import './components/exercise/step-card';
+@import './components/exercise/group';
+@import './components/breadcrumbs/step';
+@import './components/question';
+@import './components/close';
+@import './components/spy-mode';
+@import './components/smart-overflow';

resources/styles/components/breadcrumbs/icons.less

@@ -0,0 +1,26 @@
+// Note: Use tokens instead of strings to be able to do LESS compile-time validation
+.icon-feedback { .x-icon-bg(feedback); }
+.icon-exercise { .x-icon-bg(homework); }
+.icon-homework { .x-icon-bg(homework); }
+.icon-external { .x-icon-bg(external); }
+.icon-event { .x-icon-bg(event); }
+.icon-end { .x-icon-bg(end); }
+.icon-interactive { .x-icon-bg(interactive); }
+.icon-coach { .x-icon-bg(coach); }
+.icon-video { .x-icon-bg(video); }
+.icon-reading  { .x-icon-bg(reading); }
+.icon-recover  { .x-icon-bg(recover); }
+.icon-test     { .x-icon-bg(test); }
+.icon-spaced_practice  { .x-icon-bg(review); }
+.icon-personalized     { .x-icon-bg(personalized); }
+.icon-worked-example   { .x-icon-bg(worked-example); }
+
+.icon-placeholder {
+  &:before {
+    content: '?';
+    font-style: normal;
+  }
+}
+// The following are usually overlays on other icons
+.icon-correct  { .x-icon-bg(correct); }
+.icon-incorrect { .x-icon-bg(incorrect); }

resources/styles/components/breadcrumbs/index.less

@@ -1,26 +1,13 @@
-.crumb-circle(@radius){
-  font-size: @radius;
-  border-radius: 2 * @radius;
-  line-height: 2 * @radius;
-  min-width: 2 * @radius;
-}
-
-.crumb-text(){
-  position: absolute;
-  width: 100%;
-  text-align: center;
-  left: 0;
-}
-
 // http://caniuse.com/#search=counter
 .task-homework,
 .task-practice,
 .task-chapter_practice,
+.task-concept_coach,
 .task-page_practice {
   .task-breadcrumbs {
     counter-reset: step;
   }
-  .task-breadcrumbs-step:not(.end) {
+  .openstax-breadcrumbs-step:not(.end) {
     &:before {
       counter-increment: step;
       content: counter(step);
@@ -34,7 +21,7 @@
 
 // label readings with chapter info if it exists
 .task-reading {
-  .task-breadcrumbs-step[data-chapter] {
+  .openstax-breadcrumbs-step[data-chapter] {
 
     background: @reading-color;
     color: @openstax-white;
@@ -59,7 +46,7 @@
   margin-right: -2px;
 
   &.shrink {
-    .task-breadcrumbs-step {
+    .openstax-breadcrumbs-step {
       &:not(:hover):not(.active) {
         .scale(.75, .75);
         margin-left: -16px;
@@ -72,36 +59,3 @@
     }
   }
 }
-
-.task-breadcrumbs-step {
-  .crumb-circle(2rem);
-  position: relative;
-  font-weight: 500;
-  cursor: pointer;
-  margin: 2px;
-  display: inline-block;
-  text-align: center;
-  background: @openstax-white;
-  color: @openstax-neutral;
-
-  &:hover,
-  &.active {
-    .openstax-icon-active(1.4, 0.5);
-  }
-
-  &.active {
-    color: @openstax-primary;
-  }
-  &.completed {
-    background: @openstax-answer-background;
-    color: @openstax-answer-color;
-  }
-  &.status-correct {
-    background: @openstax-correct-background;
-    color: @openstax-correct-color;
-  }
-  &.status-incorrect {
-    background: @openstax-incorrect-background;
-    color: @openstax-incorrect-color;
-  }
-}

resources/styles/components/breadcrumbs/step.less

@@ -0,0 +1,37 @@
+&-breadcrumbs-step {
+
+  &.completed{
+    .icon-end { .x-icon-bg(completed); }
+  }
+
+  .crumb-circle(2rem);
+  position: relative;
+  font-weight: 500;
+  cursor: pointer;
+  margin: 2px;
+  display: inline-block;
+  text-align: center;
+  background: @openstax-white;
+  color: @openstax-neutral;
+
+  &:hover,
+  &.active {
+    .openstax-icon-active(1.4, 0.5);
+  }
+
+  &.active {
+    color: @openstax-primary;
+  }
+  &.completed {
+    background: @openstax-answer-background;
+    color: @openstax-answer-color;
+  }
+  &.status-correct {
+    background: @openstax-correct-background;
+    color: @openstax-correct-color;
+  }
+  &.status-incorrect {
+    background: @openstax-incorrect-background;
+    color: @openstax-incorrect-color;
+  }
+}

resources/styles/components/close.less

@@ -1,4 +1,4 @@
-.close-x {
+&-close-x {
   &::before {
     content: "\00d7";
   }

resources/styles/components/exercise/group.less

@@ -0,0 +1,13 @@
+&-step-group {
+  font-size: 1.6rem;
+  color: @openstax-neutral;
+  padding-top: 2rem;
+  padding-bottom: 0;
+  .opacity(0.5);
+
+}
+
+&-step-group-label {
+  display: inline-block;
+  margin-left: 4px;
+}

resources/styles/components/exercise/step-card.less

@@ -0,0 +1,32 @@
+&-exercise {
+  .exercise-typography();
+
+  @{placeholder-selector} {
+    font-style: italic;
+  }
+
+  textarea {
+    width: 100%;
+    min-height: 8em;
+    line-height: 1.5em;
+    margin: 1em 0;
+    padding: 0.75em;
+
+    &[disabled] {
+      border: none;
+    }
+  }
+
+  .exercise-uid {
+    position: absolute;
+    right: @answer-horizontal-spacing;
+    bottom: @answer-vertical-spacing;
+    color: @answer-label-color;
+    font-size: 1.2rem;
+    line-height: 1.2rem;
+  }
+}
+
+&-exercise-card {
+  position: relative;
+}

resources/styles/components/html/index.less

@@ -1,3 +1,3 @@
-.has-html {
+&-has-html {
   .openstax-tables();
 }

resources/styles/components/pinned-header-footer-card/index.less

@@ -1,15 +1,3 @@
-@pinned-top-heading-buffer: @openstax-navbar-height;
-
-.make-shy() {
-  .transform-origin(0 0);
-  .translate(0, -@pinned-top-heading-buffer);
-}
-
-.make-shy-animate() {
-  .transition(transform 0.2s ease-out);
-}
-
-
 body.pinned-shy {
   .pinned-header, .navbar-fixed-top {
     .make-shy();

resources/styles/components/pinned-header-footer-card/sections.less

@@ -11,7 +11,7 @@
 
 .pinned-on {
   .pinned-header {
-    top: @pinned-top-heading-buffer;
+    top: @openstax-navbar-height;
     .fixed-bar();
   }
 }

resources/styles/components/question.less

@@ -127,7 +127,7 @@
 }
 
 
-.question {
+&-question {
 
   .clearfix();
 
@@ -288,12 +288,3 @@
     }
   }
 }
-
-.exercise-uid {
-  position: absolute;
-  right: @answer-horizontal-spacing;
-  bottom: @answer-vertical-spacing;
-  color: @answer-label-color;
-  font-size: 1.2rem;
-  line-height: 1.2rem;
-}

resources/styles/components/smart-overflow.less

@@ -1,4 +1,4 @@
-.smart-overflow {
+&-smart-overflow {
   overflow-y: auto;
   overflow-x: hidden;
   max-height: none;

resources/styles/components/spy-mode.less

@@ -1,4 +1,4 @@
-.debug-content {
+&-debug-content {
 
   &.is-enabled {
     .debug-toggle-link {

resources/styles/globals/icons.less

@@ -1,33 +1,9 @@
-@icon-path: '../../images/icons';
-@icon-size-xs: 1rem;
-@icon-size-sm: @icon-size-xs * 1.6;
-@icon-size-md: @icon-size-xs * 2;
-@icon-size-lg: @icon-size-xs * 4;
-@icon-size-xlg: @icon-size-xs * 6;
-
 // # Overview
 //
 // - add `<i class="icon-homework icon-sm" />` tag in the HTML
 //   - Similar to font-awesome icons
 // - use `<span class="icon-stack icon-lg">` for stacking icons
 
-
-// # Local mixins
-//
-.x-icon-size(@size) {
-  display: inline-block;
-  width: @size;
-  height: @size;
-  background-size: @size @size;
-  background-repeat: no-repeat;
-  background-position: center;
-  .transition(~"transform .1s ease-in-out, margin .3s ease-in-out");
-}
-
-.x-icon-bg(@name) {
-  background-image: url("@{icon-path}/icon-@{name}.svg");
-}
-
 // # Support stacking icons
 //
 // Example:
@@ -59,37 +35,7 @@
 .icon-lg  { .x-icon-size(@icon-size-lg); }
 .icon-xlg { .x-icon-size(@icon-size-xlg); }
 
-// Note: Use tokens instead of strings to be able to do LESS compile-time validation
-.icon-feedback { .x-icon-bg(feedback); }
-.icon-exercise { .x-icon-bg(homework); }
-.icon-homework { .x-icon-bg(homework); }
-.icon-external { .x-icon-bg(external); }
-.icon-event { .x-icon-bg(event); }
-.icon-end { .x-icon-bg(end); }
-.completed{
-  .icon-end { .x-icon-bg(completed); }
-}
-.icon-interactive { .x-icon-bg(interactive); }
-.icon-coach { .x-icon-bg(coach); }
-.icon-video { .x-icon-bg(video); }
-.icon-reading  { .x-icon-bg(reading); }
-.icon-recover  { .x-icon-bg(recover); }
-.icon-test     { .x-icon-bg(test); }
-.icon-spaced_practice  { .x-icon-bg(review); }
-.icon-personalized     { .x-icon-bg(personalized); }
-.icon-worked-example   { .x-icon-bg(worked-example); }
-
 .icon-sm.icon-personalized {
   width: @icon-size-sm * 2;
   background-size: @icon-size-sm * 2 @icon-size-sm;
 }
-
-.icon-placeholder {
-  &:before {
-    content: '?';
-    font-style: normal;
-  }
-}
-// The following are usually overlays on other icons
-.icon-correct  { .x-icon-bg(correct); }
-.icon-incorrect { .x-icon-bg(incorrect); }