Merge pull request #18 from openstax/fix/styles-wrapping

no-conflict version of shared component styles

Author: philschatz

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/free-response.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/group.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;
+}