woople-theme 0.0.2

data/app/assets/stylesheets/woople-theme/content.css.less

@@ -0,0 +1,38 @@
+@import "woople-theme/variables.css.less";
+@import "woople-theme/colours.css.less";
+
+#navigation .outer-content {
+  position:relative;
+  left:-10px;
+  margin-left:0;
+
+  -webkit-transition: right, -webkit-transform 0.25s;
+  -moz-transition: right, -moz-transform 0.25s;
+  -ms-transition: right, -ms-transform 0.25s;
+  -o-transition: right, -o-transform 0.25s;
+  transition: right, transform 0.25s;
+
+  .translate(0, 0);
+
+  .content {
+    background: @contentBackground;
+    .box-shadow();
+  }
+}
+
+@media (max-width: 768px) {
+  #navigation .outer-content {
+    left:0;
+    right:0;
+    width:100%;
+  }
+
+  #navigation:target .outer-content {
+    .translate(@contentOffset, 0);
+  }
+
+  .no-csstransform #navigation:target .outer-content {
+    left:@contentOffset;
+    right:@negativeContentOffset;
+  }
+}

data/app/assets/stylesheets/woople-theme/course.css.less

@@ -0,0 +1,47 @@
+@import "woople-theme/variables.css.less";
+@import "woople-theme/colours.css.less";
+
+#course {
+  overflow:hidden;
+
+  .page-header {
+    img {
+      .course-image();
+      max-width:@imageWidth;
+      float:left;
+      margin-right:@gridGutterWidth;
+    }
+
+    p, h1 {
+      margin-left: @gridGutterWidth + @imageWidth;
+    }
+  }
+
+  > header {
+    margin:0;
+  }
+
+  header + .outline h2 {
+    border-top:0;
+  }
+}
+
+@media (max-width: 767px) {
+  #course {
+    .modal-body {
+      padding:0;
+      .modal-video();
+    }
+
+    .modal-header {
+      display:none;
+    }
+
+    .modal-footer {
+      padding:0;
+      padding-top:@phoneMargin;
+      border:none;
+      .box-shadow(none);
+    }
+  }
+}

data/app/assets/stylesheets/woople-theme/framework.css

@@ -0,0 +1,5 @@
+/*
+ *= require google-code-prettify/prettify
+ *= require twitter/bootstrap
+ *= require framework/index
+*/

data/app/assets/stylesheets/woople-theme/framework/index.css.less

@@ -0,0 +1,8 @@
+.codify .card {
+  /* TODO: this should use the bootstrap columns */
+  width:500px;
+}
+
+.codify .card .face > * {
+  height:200px;
+}

data/app/assets/stylesheets/woople-theme/framework/responsive.css.less

@@ -0,0 +1 @@
+@import "twitter/bootstrap/responsive";

data/app/assets/stylesheets/woople-theme/grid.css.less

@@ -0,0 +1,38 @@
+@import "woople-theme/variables.css.less";
+@import "woople-theme/colours.css.less";
+@import "twitter/bootstrap/mixins";
+@import "twitter/bootstrap/variables";
+
+@media (max-width: 768px) {
+  @woopleColumnWidth: 67px;
+
+  .woopleColumn(@columns: 1) {
+    float: left;
+    margin-left: @gridGutterWidth;
+    width: (@woopleColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+  }
+
+  .woopleOffset (@columns) {
+    margin-left: (@woopleColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+  }
+
+  .span1  { .woopleColumn(1); }
+  .span2  { .woopleColumn(2); }
+  .span3  { .woopleColumn(3); }
+  .span4  { .woopleColumn(4); }
+  .span5  { .woopleColumn(5); }
+  .span6  { .woopleColumn(6); }
+  .span7  { .woopleColumn(7); }
+  .span8  { .woopleColumn(8); }
+  .span9  { .woopleColumn(9); }
+
+  .offset1 { .woopleOffset(1); }
+  .offset2 { .woopleOffset(2); }
+  .offset3 { .woopleOffset(3); }
+  .offset4 { .woopleOffset(4); }
+  .offset5 { .woopleOffset(5); }
+  .offset6 { .woopleOffset(6); }
+  .offset7 { .woopleOffset(7); }
+  .offset8 { .woopleOffset(8); }
+  .offset9 { .woopleOffset(9); }
+}

data/app/assets/stylesheets/woople-theme/index.css.less

@@ -0,0 +1,20 @@
+/*
+ *= require woople-theme/responsive
+
+ *  COMPONENTS
+ *= require woople-theme/base
+ *= require woople-theme/menu
+ *= require woople-theme/content
+ *= require woople-theme/profile
+ *= require woople-theme/page-header
+ *= require woople-theme/outline
+ *= require woople-theme/grid
+ *= require woople-theme/buttons
+ *= require woople-theme/content-item
+ *= require woople-theme/pagination
+ *= require woople-theme/modal
+ *= require woople-theme/legacy
+
+ *  PAGE SPECIFIC STYLES
+ *= require woople-theme/course
+ */

data/app/assets/stylesheets/woople-theme/legacy.css.less

@@ -0,0 +1,28 @@
+@import "woople-theme/variables.css.less";
+@import "woople-theme/colours.css.less";
+
+.no-rgba {
+  body {
+    background: @legacyBackground;
+  }
+
+  .menu .nav-list > li > a {
+    color: @legacyMenuLinkColour;
+  }
+
+  .menu .nav-list > li > a:hover {
+    background-color:#75a2db;
+  }
+
+
+  .page-header {
+    background-color:#f4f5ef;
+  }
+}
+
+.no-boxshadow {
+  .content-item .content-item-image img {
+    border:solid 1px @insetContentBorder;
+  }
+}
+

data/app/assets/stylesheets/woople-theme/menu.css.less

@@ -0,0 +1,132 @@
+@import "woople-theme/variables.css.less";
+@import "woople-theme/colours.css.less";
+
+.menu {
+  background: @primary;
+  padding-right:10px;
+
+  .box-shadow();
+
+  -webkit-transition: right, -webkit-transform 0.25s;
+  -moz-transition: right, -moz-transform 0.25s;
+  -ms-transition: right, -ms-transform 0.25s;
+  -o-transition: right, -o-transform 0.25s;
+  transition: right, transform 0.25s;
+
+  .menu-content {
+    position:relative;
+  }
+
+  .nav-list {
+    margin-top:10px;
+    margin-bottom:30px;
+
+    .nav-header {
+      color:@menuHeadingColour;
+    }
+
+    > li > a {
+      color:@menuLinkColour;
+      margin-right:-24px;
+
+      em {
+        font-size:1.25em;
+        line-height:1.5em;
+        display:block;
+        font-style:normal;
+      }
+    }
+
+    > li > a, .nav-header {
+      text-shadow:0 1px 0 rgba(0,0,0,0.5);
+    }
+
+    .active {
+      position:relative;
+
+      > a {
+        background-color:@menuActiveColour;
+        color:@menuHeadingColour;
+        margin-left:-18px;
+        text-indent:3px;
+      }
+
+      .badge {
+        background-color: @menuActiveLabelColour;
+      }
+    }
+  }
+
+  .nav > li > a:hover {
+    background-color:@menuHoverColour;
+    margin-left:-15px;
+    text-indent:0;
+
+    .badge {
+      background-color:@menuHoverLabelColour;
+    }
+  }
+
+  .cert-status-red {
+    width: 25px;
+    height: 25px;
+    vertical-align:text-top;
+    background-image: url('/assets/woople-theme/certification/red-icon.png');
+    background-repeat:no-repeat;
+    display:inline-block;
+    position:absolute;
+    left:4px;
+    top:-6px;
+  }
+
+  .badge {
+    background-color: @menuLabelBackground;
+    border-top:solid 1px rgba(255,255,255,0.25);
+    .box-shadow(0px 1px rgba(0,0,0,0.25));
+    line-height:1em;
+    margin-top:4px;
+    font-size:11px;
+    float:right;
+  }
+
+  .label-icon {
+    padding-left:31px;
+    position:relative;
+
+    i {
+      position:absolute;
+    }
+  }
+
+}
+
+@media (max-width: 768px) {
+  #navigation:target {
+    .menu {
+      .translate(0,0);
+      width:@menuWidth;
+    }
+  }
+
+  .menu .nav-list > li > a {
+    margin-right:-14px;
+  }
+
+  .no-csstransform {
+    .container {
+      .menu {
+        left: -250px;
+      }
+    }
+  }
+
+  .container {
+    .menu {
+      padding-right:0;
+      position:absolute;
+      top:72px;
+      margin:0;
+      .translate(-250px, 0);
+    }
+  }
+}

data/app/assets/stylesheets/woople-theme/modal.css.less

@@ -0,0 +1,56 @@
+@import "woople-theme/variables.css.less";
+@import "woople-theme/colours.css.less";
+
+.modal-backdrop {
+  opacity:0.5;
+}
+
+.modal {
+  width:720px;
+  margin: -250px 0 0 -360px;
+  .border-radius(0);
+  background-color:@contentBackground;
+  border:none;
+  .box-shadow();
+
+  h3 {
+    .content-title();
+    margin-bottom:0;
+  }
+
+  .modal-footer {
+    background-color:@contentBackground;
+
+    .btn-group {
+      display:inline-block;
+    }
+
+    .btn {
+      line-height:16px;
+    }
+  }
+
+  .modal-body {
+    max-height:initial;
+    padding:0;
+    background-color:@contentBackground;
+
+    .modal-video();
+  }
+}
+
+.icon-thumbs-up {
+  width:15px;
+  height:16px;
+  background:url(/assets/woople-theme/icons/thumbs_up.png) no-repeat;
+}
+
+.active .icon-thumbs-up { opacity: 0.5; }
+
+.icon-thumbs-down {
+  width:15px;
+  height:16px;
+  background:url(/assets/woople-theme/icons/thumbs_down.png) no-repeat;
+}
+
+.active .icon-thumbs-down { opacity: 0.5; }

data/app/assets/stylesheets/woople-theme/outline.css.less

@@ -0,0 +1,117 @@
+@import "woople-theme/variables.css.less";
+@import "woople-theme/colours.css.less";
+
+.outline {
+  margin-bottom:20px;
+
+  h2 {
+    .outline-title();
+  }
+
+  .assessment {
+    margin-left:@leftColumnOffset;
+    margin-top:@contentPadding;
+    text-transform:uppercase;
+  }
+
+  .completed {
+    .action {
+      display:none;
+    }
+  }
+
+  .disabled td, p.disabled {
+    .opacity(50);
+
+    a:hover {
+      text-decoration:none;
+    }
+  }
+
+  tr.disabled {
+   &:hover {
+     td {
+       background:none;
+     }
+   }
+
+   td {
+      background-color:transparent;
+      text-shadow:none;
+      color:@primaryTextColour;
+
+      a {
+        color:@primaryTextColour;
+      }
+
+      .action {
+        display:none;
+      }
+    }
+  }
+
+  table {
+    margin-bottom:0;
+
+    th {
+      color: @secondaryTextColour;
+    }
+
+    th, td {
+      padding:@tableCellPadding;
+      border-top:none;
+      a {
+        color:@primaryTextColour;
+      }
+    }
+
+    .count {
+      width:75px;
+    }
+
+    th {
+      border-top:none;
+    }
+
+    tr > td:first-child, tr > th:first-child {
+      padding-left:@contentPadding;
+      width:@gridGutterWidth + @imageWidth - (@tableCellPadding * 2);
+    }
+
+    .action {
+      display:block;
+    }
+
+    tr:hover {
+      td {
+        background-color:@highlightBackground;
+      }
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  .outline {
+    table {
+      tr > td:first-child, tr > th:first-child {
+        padding-left:@phoneMargin;
+        text-indent:@phoneMargin * 1.5;
+
+        > *:first-child {
+          text-indent:0;
+          margin-left:@phoneMargin;
+        }
+
+      }
+
+    }
+
+    h2 {
+      .outline-title(@phoneLeftColumnOffset);
+    }
+
+    .assessment {
+      margin-left:@phoneLeftColumnOffset;
+    }
+  }
+}