cartilage 0.1.1

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

@@ -0,0 +1,113 @@
+// Variables.less
+// Variables to customize the look and feel of Bootstrap
+// -----------------------------------------------------
+
+
+
+// GLOBAL VALUES
+// --------------------------------------------------
+
+// Links
+$linkColor:             #08c;
+$linkColorHover:        darken($linkColor, 15%);
+
+// Grays
+$black:                 #000;
+$grayDarker:            #222;
+$grayDark:              #333;
+$gray:                  #555;
+$grayLight:             #999;
+$grayLighter:           #eee;
+$white:                 #fff;
+
+// Accent colors
+$blue:                  #049cdb;
+$blueDark:              #0064cd;
+$green:                 #46a546;
+$red:                   #9d261d;
+$yellow:                #ffc40d;
+$orange:                #f89406;
+$pink:                  #c3325f;
+$purple:                #7a43b6;
+
+// Typography
+$baseFontSize:          13px;
+$baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
+$baseLineHeight:        18px;
+$textColor:             $grayDark;
+
+// Buttons
+$primaryButtonBackground:    $linkColor;
+
+
+
+// COMPONENT VARIABLES
+// --------------------------------------------------
+
+// Z-index master list
+// Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
+$zindexDropdown:        1032;
+$zindexPopover:         1010;
+$zindexTooltip:         1020;
+$zindexFixedNavbar:     1030;
+$zindexModalBackdrop:   1040;
+$zindexModal:           1050;
+
+// Input placeholder text color
+$placeholderText:       $grayLight;
+
+// Navigation Bar ------------------------------------------------------------
+
+//
+// The navigation bar (or "navbar") is the primary header for the site that is
+// pinned to the top of the page and is responsible for primary navigation and
+// other global actions.
+//
+
+$navbarHeight:                    64px;
+$navbarBackground:                #233137;
+$navbarBackgroundHighlight:       #464d53;
+
+$navbarText:                      $grayLight;
+$navbarLinkColor:                 rgba(255, 255, 255, 0.9);
+$navbarLinkColorHover:            $white;
+$navbarLinkColorActive:           $black;
+
+// Form states and alerts
+$warningText:             #c09853;
+$warningBackground:       #fcf8e3;
+$warningBorder:           darken(adjust-hue($warningBackground, -10), 3%);
+
+$errorText:               #b94a48;
+$errorBackground:         #f2dede;
+$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%);
+
+$successText:             #468847;
+$successBackground:       #dff0d8;
+$successBorder:           darken(adjust-hue($successBackground, -10), 5%);
+
+$infoText:                #3a87ad;
+$infoBackground:          #d9edf7;
+$infoBorder:              darken(adjust-hue($infoBackground, -10), 20%);
+
+// Content
+
+$sectionWellBackground: #a4aaad asset-url("cartilage/patterns/background.medium.png", image);
+
+// Source List View
+
+$sourceListBackground: #dee4ea;
+
+// GRID
+// --------------------------------------------------
+
+// Default 940px grid
+$gridColumns:             12;
+$gridColumnWidth:         60px;
+$gridGutterWidth:         20px;
+$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
+
+// Fluid grid
+$fluidGridColumnWidth:    6.382978723%;
+$fluidGridGutterWidth:    2.127659574%;

data/app/assets/stylesheets/cartilage/views/list_view.css.scss

@@ -0,0 +1,41 @@
+
+// Cartilage Support ---------------------------------------------------------
+
+@import "cartilage/mixins";
+@import "cartilage/variables";
+
+// List View -----------------------------------------------------------------
+
+.list-view
+{
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  cursor: default;
+
+  @include user-select(none);
+
+  > .list-view-items-container
+  {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    margin: 0;
+    padding: 0;
+
+    overflow: auto;
+
+    list-style: none;
+
+    &:focus
+    {
+      outline: none;
+    }
+  }
+}

data/app/assets/stylesheets/cartilage/views/list_view_item.css.scss

@@ -0,0 +1,47 @@
+
+// Cartilage Support ---------------------------------------------------------
+
+@import "cartilage/mixins";
+@import "cartilage/variables";
+
+// List View Item ------------------------------------------------------------
+
+.list-view-item
+{
+  margin: 0;
+  padding: 6px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
+
+  @include box-sizing(border-box);
+
+  &:nth-of-type(even)
+  {
+    background-color: rgba(0, 0, 0, 0.025);
+  }
+
+  &:focus
+  {
+    outline: none;
+  }
+
+  &.disabled
+  {
+    color: rgba(0, 0, 0, 0.4)
+  }
+
+  &.selected
+  {
+    background-color: #73adff;
+  }
+
+  &.drop-before
+  {
+    border-top: 2px solid black;
+  }
+
+  &.drop-after
+  {
+    border-bottom: 2px solid black;
+  }
+
+}

data/app/assets/stylesheets/cartilage/views/loading_indicator_view.css.scss

@@ -0,0 +1,50 @@
+
+// Cartilage Support ---------------------------------------------------------
+
+@import "cartilage/mixins";
+@import "cartilage/variables";
+
+// Loading Indicator View ----------------------------------------------------
+
+/* Configuration */
+
+$loadingIndicatorSize: 96px;
+
+/* Definition */
+
+.loading-indicator-view
+{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -($loadingIndicatorSize / 2);
+  margin-left: -($loadingIndicatorSize / 2);
+  height: $loadingIndicatorSize;
+  width: $loadingIndicatorSize;
+  overflow: hidden;
+
+  background: transparent;
+  background-color: rgba(0, 0, 0, 0.15);
+
+  @include box-shadow(inset 1px 1px 3px rgba(0, 0, 0, 0.15));
+  @include border-radius(10px);
+
+  color: rgb(50, 50, 50);
+
+  canvas
+  {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    // width: $loadingIndicatorSize;
+    // height: $loadingIndicatorSize;
+
+    // > div
+    // {
+    //   width: $loadingIndicatorSize;
+    //   height: $loadingIndicatorSize;
+    // }
+  }
+}

data/app/assets/stylesheets/cartilage/views/matrix_view.css.scss

@@ -0,0 +1,87 @@
+
+// Cartilage Support ---------------------------------------------------------
+
+@import "cartilage/mixins";
+@import "cartilage/variables";
+
+// Matrix View ---------------------------------------------------------------
+
+.matrix-view
+{
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  margin: 10px;
+  font-size: 7pt; // TODO Change this to px
+
+  li
+  {
+    float: left;
+    width: 192px;
+    height: 192px;
+    margin: 10px;
+    text-align: center;
+    font-weight: bold;
+    font-size: 120%;
+    border: 1px dotted rgba(0, 0, 0, 0.1);
+    color: rgba(0, 0, 0, 0.25);
+
+    border-radius: 5px;
+
+    text-overflow: ellipsis;
+    background-color: white;
+
+    &:nth-of-type(even)
+    {
+      background-color: white;
+    }
+
+    &.selected
+    {
+      border: 1px solid rgba(0, 0, 255, 0.15);
+      background-color: rgba(0, 0, 0, 0.025);
+      @include box-shadow(#{
+        inset 0 1px 0 rgba(255, 255, 255, 0.95),
+        inset 1px 0 0 rgba(255, 255, 255, 0.75),
+        inset -1px 0 0 rgba(255, 255, 255, 0.75),
+        inset 0 -1px 0 rgba(0, 0, 0, 0.05)
+      });
+    }
+
+    &:focus
+    {
+      outline: none;
+      @include box-shadow(#{
+        inset 0 1px 0 rgba(255, 255, 255, 0.95),
+        inset 1px 0 0 rgba(255, 255, 255, 0.75),
+        inset -1px 0 0 rgba(255, 255, 255, 0.75),
+        inset 0 -1px 0 rgba(0, 0, 0, 0.05),
+        0 0 5px rgba(43, 122, 186, 0.25)
+      });
+    }
+  }
+
+  &:after
+  {
+    content: "";
+    display: block;
+    clear: both;
+    padding-bottom: 20px;
+  }
+
+  .overlay
+  {
+    position: absolute;
+    height: 0px;
+    width: 0px;
+
+    z-index: $zindexModalBackdrop;
+
+    background-color: #336699;
+    border: 1px solid black;
+    @include opacity(0.25);
+  }
+}

data/app/assets/stylesheets/cartilage/views/popover_view.css.scss

@@ -0,0 +1,124 @@
+
+// Cartilage Support ---------------------------------------------------------
+
+@import "cartilage/mixins";
+@import "cartilage/variables";
+
+// Popover View --------------------------------------------------------------
+
+.popover-view
+{
+  position: absolute;
+
+  width: 100px; /* auto; */
+  height: 80px; /* auto; */
+  z-index: 1000;
+  margin: 20px;
+
+  border: 2px solid rgb(0, 0, 0) !important;
+  border: 2px solid rgba(0, 0, 0, 0.9) !important;
+  @include border-radius(2px);
+
+  color: white;
+  text-align: center;
+  line-height: 40px;
+
+  @include box-shadow(0px 0px 16px rgba(0, 0, 0, 0.5));
+
+  .triangle
+  {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+
+    width:0px;
+    height:0px;
+
+    margin-left: -14px;
+
+    font-size: 0px;
+    line-height: 0px;
+  }
+
+  .content-view
+  {
+    position: relative;
+
+    background-color: rgba(0, 0, 0, 0.9);
+
+    @include gradient-vertical(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.95));
+    @include box-shadow(inset 1px 1px 0 rgba(255, 255, 255, 0.25));
+
+    p, li
+    {
+      text-shadow: none;
+    }
+
+  }
+}
+
+.popover-view.top
+{
+  .triangle
+  {
+    top: auto;
+    bottom: 0;
+    margin-bottom: -15px;
+
+    border-left: 14px solid transparent;
+    border-right: 14px solid transparent;
+    border-top: 14px solid rgb(0, 0, 0);
+    border-top: 14px solid rgba(0, 0, 0, 0.85);
+  }
+}
+
+.popover-view.bottom
+{
+  .triangle
+  {
+    top: 0;
+    bottom: auto;
+    margin-top: -15px;
+
+    border-left: 14px solid transparent;
+    border-right: 14px solid transparent;
+    border-bottom: 14px solid rgb(0, 0, 0);
+    border-bottom: 14px solid rgba(0, 0, 0, 0.85);
+  }
+}
+
+.popover-view.left
+{
+  .triangle
+  {
+    top: 50%;
+    bottom: auto;
+    right: 0;
+    left: auto;
+    margin-right: -15px;
+    margin-top: -15px;
+
+    border-left: 14px solid rgb(0, 0, 0);
+    border-left: 14px solid rgba(0, 0, 0, 0.85);
+    border-top: 14px solid transparent;
+    border-bottom: 14px solid transparent;
+  }
+}
+
+.popover-view.right
+{
+  .triangle
+  {
+    top: 50%;
+    bottom: auto;
+    right: auto;
+    left: 0;
+    margin-left: -15px;
+    margin-top: -15px;
+
+    border-right: 14px solid rgb(0, 0, 0);
+    border-right: 14px solid rgba(0, 0, 0, 0.85);
+    border-top: 14px solid transparent;
+    border-bottom: 14px solid transparent;
+  }
+}

data/app/assets/stylesheets/cartilage/views/segmented_view.css.scss

@@ -0,0 +1,98 @@
+
+// Cartilage Support ---------------------------------------------------------
+
+@import "cartilage/mixins";
+@import "cartilage/variables";
+
+// Segmented View ------------------------------------------------------------
+
+fieldset.segmented-view
+{
+  margin: 0;
+  padding: 0;
+  float: left;
+
+  font-size: 10px;
+  line-height: 26px;
+
+  legend
+  {
+    margin: 0;
+    padding: 0;
+    font-size: inherit;
+    line-height: inherit;
+    float: left;
+    margin-right: 10px;
+    width: auto;
+
+    color: rgb(115, 115, 115);
+    color: rgba(0, 0, 0, 0.5);
+    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.9);
+    font-weight: bold;
+  }
+
+  input[type=radio]
+  {
+    display: none;
+  }
+
+  label
+  {
+    margin: 0;
+    padding: 0;
+    float: left;
+    width: auto;
+    font-size: inherit;
+    line-height: inherit;
+    padding-left: 6px;
+    padding-right: 6px;
+    margin-right: 4px;
+
+    color: rgb(115, 115, 115);
+    color: rgba(0, 0, 0, 0.5);
+    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.9) !important;
+
+    @include border-radius(2px);
+    @include transition(color 0.5s);
+
+    &:hover
+    {
+      background: none;
+      color: rgb(85, 85, 85);
+      color: rgba(0, 0, 0, 0.6);
+      @include box-shadow(none);
+    }
+
+    &:active
+    {
+      background-color: transparent !important;
+      background-image: none !important;
+      color: rgb(85, 85, 85);
+      color: rgba(0, 0, 0, 0.6);
+      @include box-shadow(none);
+    }
+  }
+
+  input[type=radio]:checked + label,
+  input[type=radio]:checked + label:hover
+  {
+    color: rgb(85, 85, 85);
+    color: rgba(0, 0, 0, 0.6);
+
+    @include box-shadow(#{
+      inset 0 1px 0 rgba(0, 0, 0, 0.1),
+      inset 1px 0 0 rgba(0, 0, 0, 0.05),
+      inset -1px 0 0 rgba(0, 0, 0, 0.05),
+      inset 0 -1px 0 rgba(255, 255, 255, 0.8)
+    });
+
+    @include gradient-vertical(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+  }
+
+  &:after
+  {
+    content: "";
+    display: block;
+    clear: both;
+  }
+}

data/app/assets/stylesheets/cartilage/views/source_list_view.css.scss

@@ -0,0 +1,65 @@
+
+// Cartilage Support ---------------------------------------------------------
+
+@import "cartilage/mixins";
+@import "cartilage/variables";
+
+// Source List View ----------------------------------------------------------
+
+.source-list-view
+{
+  background: $sourceListBackground;
+  border-right: 1px solid rgba(0, 0, 0, 0.45);
+
+  overflow: hidden;
+
+  > .header-view
+  {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+
+    z-index: 1;
+
+    // List Views are absolutely positioned to take up all available space,
+    // by default. When in a header view, we want to force it to relative
+    // position so that we can calculate its height.
+    > .list-view
+    {
+      position: relative;
+
+      > .list-view-items-container
+      {
+        position: relative;
+      }
+    }
+
+    &:after
+    {
+      content: "";
+      position: absolute;
+      bottom: -3px;
+      left: 0;
+      right: 0;
+      height: 4px;
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyYWRpYWxHcmFkaWVudCBpZD0iZyI+PHN0b3Agb2Zmc2V0PSIwLjM4IiBzdG9wLWNvbG9yPSJyZ2JhKDAsIDAsIDAsIDAuMDc1KSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiYSgwLCAwLCAwLCAwKSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJlY3QgeD0iMCUiIHk9IjAlIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJyZ2JhKDAsIDAsIDAsIDApIiAvPjxyZWN0IHg9IjAlIiB5PSItMTAwJSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMjAwJSIgZmlsbD0idXJsKCNnKSIgLz48L3N2Zz4=);
+      background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 283, color-stop(38%, rgba(0, 0, 0, 0.075)), color-stop(100%, rgba(0, 0, 0, 0)));
+      background-image: -webkit-radial-gradient(center top, farthest-side, rgba(0, 0, 0, 0.075) 38%, rgba(0, 0, 0, 0) 100%);
+      background-image: -moz-radial-gradient(center top, farthest-side, rgba(0, 0, 0, 0.075) 38%, rgba(0, 0, 0, 0) 100%);
+      background-image: -ms-radial-gradient(center top, farthest-side, rgba(0, 0, 0, 0.075) 38%, rgba(0, 0, 0, 0) 100%);
+      background-image: -o-radial-gradient(center top, farthest-side, rgba(0, 0, 0, 0.075) 38%, rgba(0, 0, 0, 0) 100%);
+      background-image: radial-gradient(farthest-side at center top, rgba(0, 0, 0, 0.075) 38%, rgba(0, 0, 0, 0) 100%);
+    }
+  }
+
+  > .footer-view
+  {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    z-index: 1;
+  }
+}

data/app/assets/stylesheets/cartilage/views/split_view.css.scss

@@ -0,0 +1,80 @@
+
+// Cartilage Support ---------------------------------------------------------
+
+@import "cartilage/mixins";
+@import "cartilage/variables";
+
+// Split View ----------------------------------------------------------------
+
+.split-view
+{
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  > .first-view,
+  > .second-view
+  {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    overflow: auto;
+  }
+
+  &.horizontal
+  {
+    .first-view
+    {
+      height: 50%;
+    }
+
+    .second-view
+    {
+      top: 50%;
+    }
+
+    .drag-handle
+    {
+      position: absolute;
+      left: 0;
+      right: 0;
+
+      top: 50%;
+      height: 5px;
+      z-index: 100;
+
+      cursor: row-resize;
+    }
+  }
+
+  &.vertical
+  {
+    .first-view
+    {
+      width: 50%;
+    }
+
+    .second-view
+    {
+      left: 50%;
+    }
+
+    .drag-handle
+    {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+
+      left: 50%;
+      width: 5px;
+      z-index: 100;
+
+      cursor: col-resize;
+    }
+  }
+}