bandshell 0.0.21 → 0.8

data/lib/bandshell/application/public/stylesheets/sass/components/jquery.qtip2.scss

@@ -0,0 +1,259 @@
+/*##########################################################################*/
+/*  Tooltips, by qTip2 Plugin (http://craigsworks.com/projects/qtip2)  */
+/*##########################################################################*/
+
+
+//////////////////
+
+/* Core qTip styles */
+.qtip, .qtip{
+  position: absolute;
+  left: -28000px;
+  top: -28000px;
+  display: none;
+
+  max-width: 350px;
+  min-width: 50px;
+  
+  font-size: 10.5px;
+  line-height: 12px;
+
+  direction: ltr;
+}
+
+  .qtip-content{
+    position: relative;
+    padding: 5px 9px;
+    overflow: hidden;
+    line-height: normal;
+
+    text-align: left;
+    word-wrap: break-word;
+  }
+
+  .qtip-titlebar{
+    position: relative;
+    padding: 10px 35px 10px 10px;
+    overflow: hidden;
+
+    border-width: 0 0 1px;
+    font-weight: bold;
+  }
+
+  .qtip-titlebar + .qtip-content{ border-top-width: 0 !important; }
+
+  /* Default close button class */
+  .qtip-close{
+    position: absolute;
+    right: -9px; top: -9px;
+
+    cursor: pointer;
+    outline: medium none;
+
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+  }
+
+    .qtip-titlebar .qtip-close{
+      right: 4px; top: 50%;
+      margin-top: -9px;
+    }
+  
+    * html .qtip-titlebar .qtip-close{ top: 16px; } /* IE fix */
+
+    .qtip-titlebar .ui-icon,
+    .qtip-icon .ui-icon{
+      display: block;
+      text-indent: -1000em;
+      direction: ltr;
+      vertical-align: middle;
+    }
+
+    .qtip-icon, .qtip-icon .ui-icon{
+      -moz-border-radius: 3px;
+      -webkit-border-radius: 3px;
+      border-radius: 3px;
+      text-decoration: none;
+    }
+
+      .qtip-icon .ui-icon{
+        width: 18px;
+        height: 14px;
+
+        text-align: center;
+        text-indent: 0;
+        font: normal bold 10px/13px Tahoma,sans-serif;
+
+        color: inherit;
+        background: transparent none no-repeat -100em -100em;
+      }
+
+
+/* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
+.qtip-focus{}
+
+/* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */
+.qtip-hover{}
+
+/* Default tooltip style */
+.qtip-default{
+  border-width: 1px;
+  border-style: solid;
+  background-color: $grayDarker;
+  border-color: #303030;
+  color: #f3f3f3;
+}
+.qtip-default .qtip-titlebar{
+  background-color: #404040;
+}
+.qtip-default .qtip-icon{
+  border-color: #444;
+  background: #F1F1F1;
+  color: #777;
+}
+.qtip-default .qtip-titlebar .qtip-close{
+  border-color: #AAA;
+  color: #111;
+}
+.qtip-default .qtip-titlebar .ui-state-hover{
+  border-color: #303030;
+}
+
+
+/*! Light tooltip style */
+.qtip-light{
+  background-color: white;
+  border-color: #E2E2E2;
+  color: #454545;
+}
+.qtip-light .qtip-titlebar{
+  background-color: #f1f1f1;
+}
+
+
+/* Add shadows to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
+.qtip-shadow{
+  -webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
+}
+
+/* Add rounded corners to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
+.qtip-rounded,
+.qtip-tipsy,
+.qtip-bootstrap{
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+
+.qtip-rounded .qtip-titlebar{
+  -moz-border-radius: 5px 5px 0 0;
+  -webkit-border-radius: 5px 5px 0 0;
+  border-radius: 5px 5px 0 0;
+}
+
+
+/* Class applied to remove inner box padding for tooltip */
+.qtip-nopadding .qtip-content {
+  padding: 0px !important;
+}
+
+.qtip-oneline .qtip-content {
+  padding: 6px;
+}
+
+/* Class applied to make width auto for tooltip content (use sparingly and test!) */
+.qtip-autowidth {
+  width: auto !important;
+  max-width: none !important;
+}
+
+/* Class applied to force a fixed height of 300px */
+.qtip-fixedheight {
+  height: 300px !important;
+  max-height: 300px !important;
+}
+
+/* Class applied to force a fixed height of 300px */
+.qtip-fixedwidth-small {
+  width: 300px !important;
+  max-width: 300px !important;
+}
+.qtip-fixedwidth-medium {
+  width: 500px !important;
+  max-width: 500px !important;
+}
+
+
+/* IE9 fix - removes all filters */
+.qtip:not(.ie9haxors) div.qtip-content,
+.qtip:not(.ie9haxors) div.qtip-titlebar{
+  filter: none;
+  -ms-filter: none;
+}
+
+
+/* Tips plugin */
+.qtip .qtip-tip{
+  margin: 0 auto;
+  overflow: hidden;
+  z-index: 10;
+}
+
+  .qtip .qtip-tip,
+  .qtip .qtip-tip .qtip-vml{
+    position: absolute;
+
+    color: #123456;
+    background: transparent;
+    border: 0 dashed transparent;
+  }
+  
+  .qtip .qtip-tip canvas{ top: 0; left: 0; }
+
+  .qtip .qtip-tip .qtip-vml{
+    behavior: url(#default#VML);
+    display: inline-block;
+    visibility: visible;
+  }
+/* Modal plugin */
+#qtip-overlay{
+  position: fixed;
+  left: -10000em;
+  top: -10000em;
+}
+
+  /* Applied to modals with show.modal.blur set to true */
+  #qtip-overlay.blurs{ cursor: pointer; }
+
+  /* Change opacity of overlay here */
+  #qtip-overlay div{
+    position: absolute;
+    left: 0; top: 0;
+    width: 100%; height: 100%;
+
+    background-color: black;
+
+    opacity: 0.7;
+    filter:alpha(opacity=70);
+    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+  }
+
+
+/* IE6 Modal plugin fix */
+.qtipmodal-ie6fix{
+  position: absolute !important;
+}
+
+
+// Tooltip Scrollable region
+.tooltip-scrollY {
+  max-height: 300px;
+  overflow: auto;
+}
+.tooltip-filter-cont {
+  padding: 10px;
+  border-bottom: solid 1px #ccc;
+}

data/lib/bandshell/application/public/stylesheets/sass/components/jquery.timepicker.css

@@ -0,0 +1,8 @@
+.ui-timepicker-list { overflow-y: auto; height: 150px; width: 6.5em; background: #fff; border: 1px solid #ddd; margin: 0; padding: 0; }
+.ui-timepicker-list.ui-timepicker-with-duration { width: 11em; }
+.ui-timepicker-duration { margin-left: 5px; color: #888; }
+.ui-timepicker-list:hover .ui-timepicker-duration { color: #888; }
+.ui-timepicker-list li { padding: 3px 0 3px 5px; cursor: pointer; white-space: nowrap; color: #000; list-style: none; margin: 0; }
+.ui-timepicker-list:hover .ui-timepicker-selected { background: #fff; color: #000; }
+li.ui-timepicker-selected, .ui-timepicker-list li:hover, .ui-timepicker-list:hover .ui-timepicker-selected:hover { background: #1980EC; color: #fff; }
+li.ui-timepicker-selected .ui-timepicker-duration, .ui-timepicker-list li:hover .ui-timepicker-duration { color: #ccc; }

data/lib/bandshell/application/public/stylesheets/sass/components/jquery.timepicker.scss

@@ -0,0 +1,8 @@
+.ui-timepicker-list { overflow-y: auto; height: 150px; width: 6.5em; background: #fff; border: 1px solid #ddd; margin: 0; padding: 0; }
+.ui-timepicker-list.ui-timepicker-with-duration { width: 11em; }
+.ui-timepicker-duration { margin-left: 5px; color: #888; }
+.ui-timepicker-list:hover .ui-timepicker-duration { color: #888; }
+.ui-timepicker-list li { padding: 3px 0 3px 5px; cursor: pointer; white-space: nowrap; color: #000; list-style: none; margin: 0; }
+.ui-timepicker-list:hover .ui-timepicker-selected { background: #fff; color: #000; }
+li.ui-timepicker-selected, .ui-timepicker-list li:hover, .ui-timepicker-list:hover .ui-timepicker-selected:hover { background: #1980EC; color: #fff; }
+li.ui-timepicker-selected .ui-timepicker-duration, .ui-timepicker-list li:hover .ui-timepicker-duration { color: #ccc; }

data/lib/bandshell/application/public/stylesheets/sass/components/lists-grid-stacked.scss

@@ -0,0 +1,265 @@
+// lists-grid-stacked.scss.erb
+
+
+
+//---------------
+// Gridlist UL
+// This UL aligns 1..n items in a visual grid. Each item is floated left and fills up available space 
+// (20% width apiece). This UL is used extensively on browse content grids of content.
+
+$griditem-width: 240px;
+$griditem-height: 180px;
+
+ul.new-grid {
+  @include clearfix();
+  margin: 0px;
+  padding: 0px;
+
+  li {
+    list-style: none;
+    float: left;
+    margin: 1px;
+    position: relative;
+
+    a {
+      display: block;
+      width: $griditem-width;
+      height: $griditem-height;
+      background: $white;
+
+      &:hover {
+        text-decoration: none;
+
+        .content {
+          background: darken($grayLight, 6%);
+        
+          img { opacity: 1; }
+        }
+
+        .info {
+          opacity: 1;
+        }
+
+      }
+
+      @include transition(all .1s linear);
+    }
+
+    .content {
+      display: block;
+      z-index: 1;
+      background: $grayLight;
+      height: $griditem-height;
+
+      img {
+        max-width: 100%;
+        opacity: 0.8;
+      }
+
+      p {
+        padding: 12px;
+        font-size: 1.6em;
+        line-height: normal;
+      }
+    }
+
+    .info {
+      z-index: 2;
+      background: $black;
+      opacity: 0.5;
+      display: block;
+      color: $white;
+      position: absolute;
+      bottom: 0px;
+      left: 0px;
+      width: 100%;
+      @include transition(all .1s linear);
+    }
+
+  }
+}
+
+ul.list-grid {
+  margin: 0px;
+  padding: 0px;
+  @include clearfix();
+  
+  > li {
+    list-style: none;
+    float: left;
+    min-width: 200px;
+    height: 60px;
+    width: 23%;
+    margin: 8px 4px;
+    display: table;
+
+    .cont {
+      display: table-cell;
+      vertical-align: top;
+      padding: 0px;
+      min-height: 64px;
+      text-decoration:none;
+      
+      &.thumb-icon { 
+        width: 64px;
+
+        a {
+          text-decoration: none;
+        }
+
+        i {
+          font-size: 45px;
+          color: $black;
+          line-height: 0.8em;
+        }
+      }
+
+      // these elements come along for the ride by bringing in gridlist-item mixin:
+      b {
+        color: $black;
+      }
+      
+      .controls {
+        display: block;
+        margin-top: 4px;
+      }
+
+      h1 {
+        font-size: 1.2em;
+        color: #333;
+        background:none;
+        padding: 0px;
+        margin: 0px;
+        font-weight: bold;
+        text-align: center;
+      }
+      
+      p {
+        margin-bottom: 0px;
+      }
+
+
+      
+    }
+    
+    img {
+      @extend .with-shadow;
+      float: left;
+      margin-bottom:6px;
+      margin-right:10px;
+    }
+
+    i {
+      margin-bottom: 6px;
+      margin-right: 10px;
+    }
+
+  }
+
+  // inset-selection gridlists appear inside forms and while they use 
+  // the base styles of list-grid, several attributes are different
+  // these gridlists are used to make a selection of one or more items
+  // within them (hence their usage in forms)
+  &.inset-selection {
+    border-top: none;
+
+    // a common use for inset gridlists is to have each item in the list-grid
+    // be a clickable link - each item appears with a slight rounded 
+    // border and is a fully clickable region
+
+    > li {
+      margin-right: 6px;
+      margin-bottom: 6px;
+    }
+
+    > li {
+      > a, > div {
+        @include border-radius(4px);
+        display: block;
+        color: $gray;
+        $transition: border linear .1s, background linear .1s;
+        @include transition($transition);
+      }
+
+      > a:hover {
+        background: $concerto-blue-6;
+        text-decoration: none;
+
+        .inp {
+          background: $concerto-blue-4;
+        }
+      }
+    }
+    
+    .inp {
+      float: left;
+      background: $grayLightest;
+      min-height: 46px;
+      padding: 8px 5px;
+      @include border-radius(4px 0px 0px 4px);
+    }
+
+    .cont {
+      border: none;
+      float: left;
+    }
+  }
+
+  // this class can be applied to a list-grid to compress the size of each
+  // list item inside the grid
+  &.small {
+    > li {
+      min-height: 60px;
+
+      .cont {
+        padding: 8px;
+        min-height: 40px;
+      }
+    }
+
+  }
+}
+
+// variant: for span columns that are small enough, override the 
+// width to make it appear flush:
+.row-fluid .span3 ul.list-grid > li, .row-fluid .span2 ul.list-grid > li, .row-fluid .span1 ul.list-grid > li {
+  width: 100%;
+}
+
+
+//---------------
+// Stacked lists UL
+// An alternative to gridlists, this UL simply stacks its list items
+// on top of one another with visual elements. It is often used for 
+// nested lists, such as the feed list on contents#index.
+
+ul.list-stacked {
+  margin-left: 0px;
+  margin-bottom: 12px;
+
+  > li {
+    padding: 12px 12px 0px 12px;
+    list-style: none;
+
+    // this is the second level of UL, which represents a nested list
+    // we only recommend one level deep of visual nesting
+    ul {
+      margin-left: 0px;
+
+      > li {
+        padding-left: 25px;
+        background: #efefef;
+      }
+    }
+
+  }
+
+  p {
+    margin:0px;
+  }
+  
+  .indented {
+    padding-left: 20px;
+  }
+}
+ul.list-stacked.condensed > li { padding: 6px 12px; }