`, and ``.
// @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
-// @font-family-base: @font-family-sans-serif;
+@font-family-base: @font-family-sans-serif;
-// @font-size-base: 14px;
+@font-size-base: 14px;
// @font-size-large: ceil((@font-size-base * 1.25)); // ~18px
// @font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@@ -65,7 +65,7 @@
// @font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
// //** Unit-less `line-height` for use in components like buttons.
-// @line-height-base: 1.428571429; // 20/14
+@line-height-base: 1.428571429; // 20/14
// //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
// @line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@@ -108,7 +108,7 @@
// @line-height-small: 1.5;
// @border-radius-base: 4px;
-// @border-radius-large: 6px;
+@border-radius-large: 6px;
// @border-radius-small: 3px;
// //** Global color for active items (e.g., navs or dropdowns).
@@ -271,7 +271,7 @@
// @zindex-navbar: 1000;
// @zindex-dropdown: 1000;
-// @zindex-popover: 1060;
+@zindex-popover: 1060;
// @zindex-tooltip: 1070;
// @zindex-navbar-fixed: 1030;
// @zindex-modal-background: 1040;
@@ -529,33 +529,33 @@
// @tooltip-arrow-color: @tooltip-bg;
-// //== Popovers
-// //
-// //##
-
-// //** Popover body background color
-// @popover-bg: #fff;
-// //** Popover maximum width
-// @popover-max-width: 276px;
-// //** Popover border color
-// @popover-border-color: rgba(0,0,0,.2);
-// //** Popover fallback border color
-// @popover-fallback-border-color: #ccc;
-
-// //** Popover title background color
-// @popover-title-bg: darken(@popover-bg, 3%);
-
-// //** Popover arrow width
-// @popover-arrow-width: 10px;
-// //** Popover arrow color
-// @popover-arrow-color: @popover-bg;
-
-// //** Popover outer arrow width
-// @popover-arrow-outer-width: (@popover-arrow-width + 1);
-// //** Popover outer arrow color
-// @popover-arrow-outer-color: fadein(@popover-border-color, 5%);
-// //** Popover outer arrow fallback color
-// @popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
+//== Popovers
+//
+//##
+
+//** Popover body background color
+@popover-bg: #fff;
+//** Popover maximum width
+@popover-max-width: 276px;
+//** Popover border color
+@popover-border-color: rgba(0,0,0,.2);
+//** Popover fallback border color
+@popover-fallback-border-color: #ccc;
+
+//** Popover title background color
+@popover-title-bg: darken(@popover-bg, 3%);
+
+//** Popover arrow width
+@popover-arrow-width: 10px;
+//** Popover arrow color
+@popover-arrow-color: @popover-bg;
+
+//** Popover outer arrow width
+@popover-arrow-outer-width: (@popover-arrow-width + 1);
+//** Popover outer arrow color
+@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
+//** Popover outer arrow fallback color
+@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
// //== Labels
diff --git a/src/components/breadcrumb/index.cjsx b/src/components/breadcrumb/index.cjsx
index 307aff1..5af6101 100644
--- a/src/components/breadcrumb/index.cjsx
+++ b/src/components/breadcrumb/index.cjsx
@@ -2,6 +2,8 @@ React = require 'react'
_ = require 'underscore'
classnames = require 'classnames'
+{getNamespacedClass} = require '../../helpers/component'
+
Breadcrumb = React.createClass
displayName: 'Breadcrumb'
propTypes:
@@ -62,7 +64,7 @@ Breadcrumb = React.createClass
if isEnd
title = "#{step.title} Completion"
- classes = classnames 'task-breadcrumbs-step', 'icon-stack', 'icon-lg', step.group, crumbType, className,
+ classes = classnames getNamespacedClass('breadcrumbs-step'), 'icon-stack', 'icon-lg', step.group, crumbType, className,
current: isCurrent
active: isCurrent
completed: isCompleted
diff --git a/src/components/buttons/close-button.cjsx b/src/components/buttons/close-button.cjsx
index 502f8d5..cfb4079 100644
--- a/src/components/buttons/close-button.cjsx
+++ b/src/components/buttons/close-button.cjsx
@@ -1,7 +1,9 @@
React = require 'react'
classnames = require 'classnames'
+{getNamespacedClass} = require '../../helpers/component'
+
module.exports = React.createClass
render: ->
- classNames = classnames 'close-x', 'close', @props.className
+ classNames = classnames getNamespacedClass('close-x'), 'close', @props.className
diff --git a/src/components/demo.cjsx b/src/components/demo.cjsx
index 81851e9..6fb6173 100644
--- a/src/components/demo.cjsx
+++ b/src/components/demo.cjsx
@@ -3,6 +3,8 @@ BS = require 'react-bootstrap'
_ = require 'lodash'
EventEmitter2 = require 'eventemitter2'
+{getNamespacedClass} = require '../helpers/component'
+
Exercise = require './exercise'
exerciseStub = require '../../stubs/exercise'
@@ -142,7 +144,7 @@ Demo = React.createClass
breadcrumbs:
demos = _.map(demos, (demo, name) ->
-
+
{"#{name}"}
diff --git a/src/components/exercise/group.cjsx b/src/components/exercise/group.cjsx
index dc87a74..9704333 100644
--- a/src/components/exercise/group.cjsx
+++ b/src/components/exercise/group.cjsx
@@ -5,6 +5,8 @@ camelCase = require 'camelcase'
ChapterSectionMixin = require '../chapter-section-mixin'
+{getNamespacedClass} = require '../../helpers/component'
+
DEFAULT_GROUP =
show: false
@@ -56,9 +58,9 @@ ExerciseGroup = React.createClass
className = group.replace(' ', '_')
labels = @getGroupLabel(group, related_content)
- groupDOM =
+ groupDOM =
- {labels}
+ {labels}
groupDOM
diff --git a/src/components/exercise/modes.cjsx b/src/components/exercise/modes.cjsx
index 36e2633..bfa4b17 100644
--- a/src/components/exercise/modes.cjsx
+++ b/src/components/exercise/modes.cjsx
@@ -10,6 +10,8 @@ AsyncButton = require '../buttons/async-button'
ExerciseGroup = require './group'
{CardBody} = require '../pinned-header-footer-card/sections'
+{getNamespacedClass} = require '../../helpers/component'
+
{propTypes, props} = require './props'
ExContinueButton = React.createClass
@@ -122,7 +124,7 @@ ExFreeResponse = React.createClass
{freeResponse} = @state
question = content.questions[0]
-