cartilage 0.1.1

data/app/assets/stylesheets/cartilage/core.css.scss

@@ -0,0 +1,432 @@
+
+// Cartilage Variables -------------------------------------------------------
+//
+// NOTE: Variable overrides must be set before Bootstrap is included!
+//
+
+@import "cartilage/variables";
+
+// Twitter Bootstrap ---------------------------------------------------------
+
+@import "bootstrap";
+
+// Cartilage Mixins ----------------------------------------------------------
+
+@import "cartilage/mixins";
+
+// ---------------------------------------------------------------------------
+
+html
+{
+  overflow: hidden;
+}
+
+body
+{
+  background-image: asset-url("cartilage/patterns/background.png", image);
+}
+
+// Structural Layout ---------------------------------------------------------
+
+.container-absolute
+{
+  position: absolute;
+  top: $navbarHeight;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  @include clearfix();
+}
+
+// Navigation Bar ------------------------------------------------------------
+
+.navbar-inner
+{
+
+  //
+  // Add a subtle bevel (highlight and shadow) to the navbar by using inset
+  // box shadows.
+  //
+  @include box-shadow(#{inset 0px 1px 0px rgba(255, 255, 255, 0.15), inset 1px 0px 0px rgba(255, 255, 255, 0.05), inset -1px 0px 0px rgba(255, 255, 255, 0.05), inset 0px -1px 0px rgba(0, 0, 0, 0.5)});
+
+}
+
+.navbar
+{
+  //
+  // Don't allow the user to select any text within the navbar.
+  //
+  @include user-select(none);
+
+  .brand
+  {
+
+    //
+    // Apply Fitt's law to the entire brand area. The navigation bar will be
+    // clickable from all the way to the left of the browser window to the top
+    // and bottom of the navigation bar. We will cap the overlap area on the
+    // right side at 10px to leave 10px of unclickable space between the brand
+    // and the navigation.
+    //
+    line-height: $navbarHeight;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    padding-left: 20px;
+    padding-right: 10px;
+    margin-right: 10px;
+
+    img
+    {
+      vertical-align: middle;
+
+      max-width: none;
+
+      //
+      // Vertically aligning the image to the middle does not result in a
+      // perfect alignment, depending on the font size of the brand element
+      // itself. Offset it here to ensure we get it centered correctly.
+      //
+      // TODO This is to offset for better centering, but it's a total hack
+      // and hard-coded...
+      //
+      padding-bottom: 6px;
+
+      //
+      // Don't allow the user to drag the brand image. This will allow the
+      // user to drag the link to which the brand image points, instead,
+      // which is likely what the user would want anyways.
+      //
+      @include user-drag(none);
+    }
+  }
+
+  .btn
+  {
+
+    &.btn-navbar
+    {
+      //
+      // Properly align buttons in the middle of the navigation bar, based on
+      // the defined height of the navbar (and the known height of the buttons,
+      // which at the time this was written was 30px).
+      //
+      // PATCH Submitted to Bootstrap (https://github.com/twitter/bootstrap/pull/1853)
+      //
+      margin-top: ($navbarHeight - 30px) / 2;
+
+      //
+      // Remove the excess right margin so that it aligns properly (at 20px)
+      // from the right border.
+      //
+      margin-right: 0;
+    }
+
+  }
+
+  //
+  // Override the navigation styles within the context of the navigation bar
+  // with our own tabbed implementation. We could override the nav-tabs class
+  // instead, but it would be more to override and nav-tabs are not intended
+  // to be used inside the navbar (as far as I can tell).
+  //
+  .nav
+  {
+    > li
+    {
+      > a
+      {
+        line-height: ($navbarHeight / 2);
+        margin-top: ($navbarHeight / 2);
+        margin-right: 6px;
+        padding: 0 10px;
+        color: white;
+
+        text-shadow: 0 -1px 0 black;
+        font-weight: bold;
+        font-size: 13px;
+
+        background-color: rgb(38, 46, 49);
+        background-color: rgba(0, 0, 0, 0.25);
+
+        @include border-radius(3px 3px 0 0);
+        @include transition('color 0.25s, background-color 0.25s');
+
+        &:hover
+        {
+          background-color: rgb(25, 33, 36);
+          background-color: rgba(0, 0, 0, 0.45);
+        }
+      }
+
+      &.active
+      {
+        > a
+        {
+          color: $navbarLinkColorActive;
+          text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
+          @include gradient-vertical(rgb(244, 245, 246), rgb(248, 248, 249));
+
+          // TODO We cannot use a drop-shadow because dropdowns in the navbar
+          //      are at the wrong z-index, therefore we can't place the page-header
+          //      above the navbar to pull off the desired shadow effect.
+          // @include box-shadow(0 0 4px black);
+
+          &:hover
+          {
+            //
+            // Don't allow the text color to change for the active tab when
+            // the user hovers over the link.
+            //
+            color: $navbarLinkColorActive;
+          }
+        }
+      }
+    }
+  }
+}
+
+.btn-navbar .icon-bar
+{
+  display: block;
+  width: 18px;
+  height: 2px;
+  background-color: #f5f5f5;
+  @include border-radius(1px);
+  @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
+}
+
+.btn-navbar .icon-bar + .icon-bar
+{
+  margin-top: 3px;
+}
+
+// Page Content --------------------------------------------------------------
+
+#content
+{
+
+  // Page Header -------------------------------------------------------------
+
+  #page-header
+  {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+
+    height: 48px;
+    min-height: 48px;
+    line-height: 48px;
+    padding-left: 20px;
+    padding-right: 20px;
+
+    border-bottom: 1px solid rgb(198, 198, 199);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.45);
+    @include gradient-vertical(rgb(248, 248, 249), rgb(252, 251, 252));
+    @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
+    @include user-select(none);
+
+    h1
+    {
+      line-height: inherit;
+      font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+                   "Helvetica Neue", sans-serif;
+      font-weight: 300;
+      font-size: (46px / 2.25);
+      color: rgb(76, 76, 76);
+      color: rgba(0, 0, 0, 0.7);
+      text-shadow: 0 1px 0px rgba(255, 255, 255, 0.9);
+
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      float: left;
+
+      small
+      {
+        position: relative;
+        font-size: inherit;
+        color: rgba(0, 0, 0, 0.4);
+        margin-left: 20px;
+        line-height: inherit !important;
+        height: inherit !important;
+        padding-left: 20px;
+        font-size: 80%;
+
+        &:before
+        {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          content: "";
+          border-left: 1px solid rgb(216, 216, 217);
+          border-left: 1px solid rgba(0, 0, 0, 0.1);
+          border-right: 1px solid rgb(246, 246, 246);
+          border-right: 1px solid rgba(255, 255, 255, 0.8);
+          margin-right: 20px;
+        }
+
+        a
+        {
+          color: inherit;
+          text-decoration: none;
+          display: inline;
+        }
+      }
+    }
+
+    // button for toggling action items in responsive layouts
+    .btn-actions
+    {
+      display: none;
+      float: right;
+      padding: 7px 10px;
+      margin-left: 5px;
+      margin-right: 0;
+      margin-top: 9px;
+      // @include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
+      @include box-shadow(#{inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075)});
+
+      .icon-bar
+      {
+        display: block;
+        width: 18px;
+        height: 2px;
+        background-color: #aaa;
+        @include border-radius(1px);
+        @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.75));
+      }
+
+      .icon-bar + .icon-bar
+      {
+        margin-top: 3px;
+      }
+    }
+    // Override the default collapsed state
+    .actions-collapse.collapse
+    {
+      height: auto;
+    }
+
+    ul.actions
+    {
+      float: right;
+      margin-top: 9px;
+      list-style: none;
+      border: none;
+      background: transparent;
+
+      > li
+      {
+        float: left;
+        margin-left: 12px;
+      }
+    }
+  }
+
+  #page-content
+  {
+    position: absolute;
+    top: 49px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    > .alert
+    {
+      margin: 20px;
+      @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.075));
+      @include border-radius(3px);
+    }
+  }
+}
+
+// Standard Section (white header, drop shadow, etc) -------------------------
+
+.standard-section
+{
+  position: relative;
+  margin: 20px;
+  background-color: rgb(245, 247, 247);
+  background-color: rgba(255, 255, 255, 0.8);
+  border: 1px solid rgb(195, 196, 196);
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  @include border-radius(3px);
+  @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.075));
+
+  header
+  {
+    padding: 10px 20px;
+    background-color: white;
+    border-bottom: 1px solid rgb(217, 217, 217);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+    @include border-radius(2px 2px 0 0);
+
+    h1
+    {
+      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
+      font-weight: 300;
+      font-size: 20.4px;
+      color: rgb(128, 128, 128);
+      color: rgba(0, 0, 0, 0.5);
+      margin: 0;
+    }
+
+    .header-actions
+    {
+      position: absolute;
+      right: 20px;
+      top: 20px;
+
+      form, button, a
+      {
+       float: left;
+       display: inline;
+       margin-left: 10px;
+      }
+    }
+  }
+
+  .section-content
+  {
+    padding: 20px;
+  }
+
+  table
+  {
+    margin-bottom: 0;
+
+    th:first-of-type, td:first-of-type
+    {
+      padding-left: 20px;
+    }
+
+    th:last-of-type, td:last-of-type
+    {
+      padding-right: 20px;
+    }
+  }
+
+  iframe
+  {
+    width: 100%;
+    height: 240px;
+    border: none;
+  }
+
+  fieldset
+  {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+}
+
+// Responsive Layout -------------------------------------------------------
+
+// @import "bootstrap-responsive";
+// @import "cartilage/responsive";

data/app/assets/stylesheets/cartilage/mixins.css.scss

@@ -0,0 +1,19 @@
+
+// Bootstrap Support ---------------------------------------------------------
+
+@import "bootstrap/mixins";
+
+// Cartilage Mixins ----------------------------------------------------------
+
+@mixin user-select($select: inherit)
+{
+  -webkit-user-select: $select;
+  -moz-user-select: $select;
+  -ms-user-select: $select;
+  user-select: $select;
+}
+
+@mixin user-drag($drag: auto)
+{
+  -webkit-user-drag: $drag;
+}

data/app/assets/stylesheets/cartilage/responsive.css.scss

@@ -0,0 +1,192 @@
+
+// Bootstrap Support ---------------------------------------------------------
+
+@import "bootstrap-responsive";
+
+// Cartilage Support ---------------------------------------------------------
+
+@import "cartilage/variables";
+@import "cartilage/mixins";
+
+// Up to Landscape Phone -----------------------------------------------------
+
+@media (max-width: 480px)
+{
+
+}
+
+// Landscape Phone to Small Desktop and Portrait Tablet ----------------------
+
+@media (max-width: 768px)
+{
+
+}
+
+// Landscape Phone to Small Desktop and Portrait Tablet ----------------------
+
+@media (max-width: 768px)
+{
+
+  html
+  {
+    overflow: visible;
+  }
+
+  body
+  {
+    padding: 0;
+  }
+
+  // Navigation Bar ----------------------------------------------------------
+
+  .navbar-fixed-top,
+  .navbar-fixed-bottom
+  {
+    margin: 0;
+  }
+
+  // Containers --------------------------------------------------------------
+
+  .container-fluid
+  {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+// Portrait Tablet to Default Desktop ----------------------------------------
+
+@media (min-width: 768px) and (max-width: 979px)
+{
+
+}
+
+// Tablets and Below --------------------------------------------------------
+
+@media (max-width: 979px)
+{
+
+  // Navigation Bar ---------------------------------------------------------
+
+  .navbar
+  {
+    margin-bottom: 0;
+  }
+
+  .navbar-fixed-top,
+  .navbar-fixed-bottom
+  {
+    margin: 0;
+
+    .navbar-inner
+    {
+      padding: 0;
+    }
+  }
+
+  .navbar .brand
+  {
+    float: none;
+    line-height: $navbarHeight;
+    padding: 0 10px 0 inherit;
+    margin: 0 10px 0 -20px;
+    display: inline-block;
+  }
+
+  .navbar .nav > li > a
+  {
+    margin: 0;
+    margin-bottom: 10px;
+    line-height: ($navbarHeight / 2.75);
+    @include border-radius(3px);
+  }
+
+  .navbar .nav > li:last-of-type > a
+  {
+    margin-bottom: 20px;
+  }
+
+  // Absolute Container ------------------------------------------------------
+
+  .container-absolute
+  {
+    position: relative;
+    top: auto;
+    overflow: visible;
+  }
+
+  // Application Content -----------------------------------------------------
+
+  #content
+  {
+
+    // Page Header -----------------------------------------------------------
+
+    #page-header
+    {
+      position: relative;
+      height: auto;
+
+      // Actions Button
+      .btn-actions
+      {
+        display: block;
+      }
+
+      // Hide the pageactions
+      .actions-collapse
+      {
+        overflow: hidden;
+        height: 0;
+        clear: left;
+      }
+
+      // Block-level the nav
+      ul.actions
+      {
+        float: none;
+        padding: 0;
+        margin-left: 0;
+
+        > li
+        {
+          float: none;
+          margin-left: 0;
+        }
+
+        .btn
+        {
+          float: none;
+          margin: 0 0 ($baseLineHeight / 2);
+          display: block;
+        }
+      }
+    }
+
+    // Page Content ----------------------------------------------------------
+
+    #page-content
+    {
+      position: static;
+      overflow: visible;
+    }
+  }
+
+}
+
+// Default Desktop -----------------------------------------------------------
+
+@media (min-width: 980px)
+{
+  .actions-collapse.collapse
+  {
+    height: auto !important;
+  }
+}
+
+// Large Desktop and Up ------------------------------------------------------
+
+@media (min-width: 1200px)
+{
+
+}