bandshell 0.0.21 → 0.8

data/lib/bandshell/application/public/stylesheets/sass/components/tiles.scss

@@ -0,0 +1,169 @@
+.tile {  /* container */
+  display: block;
+  float: left;
+  background-color: lighten($grayLighter, 5%);
+  width: 202px;
+  height: 202px;
+  cursor: pointer;
+  box-shadow: inset 0px 0px 1px #FFFFCC;
+  text-decoration: none;
+  color: $white;
+  margin: 0 10px 10px 0;
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  .tile-content {
+    width: 200px;
+    height: 200px;
+    display: block;
+    padding: 0;
+    padding-bottom: 30px;
+    vertical-align: top;
+    padding: 10px 15px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+    color: $black;
+    line-height: 16px;
+    padding: 0;
+    border: solid 1px darken($grayLighter, 5%);
+    
+    &, * { @include transition(0.1s all linear); }
+
+    & > img {
+      width: 100%;
+      height : auto;
+      max-width: 100%;
+    }
+
+    &:hover {
+      color: $linkColorHover;
+      text-decoration: none;
+      background: $concerto-blue-5;
+      border-color: $concerto-blue-4;
+      @include opacity(90);
+    }
+
+    .tile-labels {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      min-height: 30px;
+      background-color: transparent;
+      @include clearfix();
+
+      i[class*=icon-] {
+        padding: 2px 5px;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        @include opacity(70);
+        z-index: 2;
+        color: $white;
+        font-size: 25px;
+        @include transition(0.1s linear all);
+      }
+    }
+
+    .default-padding { padding: 6px; }
+
+    h1 {
+      font-size: 150%;
+      text-align: center;
+    }
+
+    h2 {
+      font-size: 125%;
+    }
+
+    p {
+      color: $gray;
+      line-height: 16px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .tile-info {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    min-height: 30px;
+    @include clearfix();
+    @include transition(0.1s all linear);
+
+    .tile-moderate {
+      @include opacity(0);
+      text-align: center;
+      min-height: 30px;
+
+      .icon-check {
+        color: lighten($linkColor, 40%);
+        font-size: 3em;
+        @include transition(0.1s all linear);
+      }
+      .icon-remove-sign {
+        color: lighten($linkColor, 40%);
+        font-size: 3em;
+        @include transition(0.1s all linear);
+      }
+
+      a:hover {
+        text-decoration: none;
+        
+        .icon-check, .icon-remove-sign { color: #FFF !important; }
+      }
+    }
+  }
+
+  &:hover .tile-moderate {
+    background: rgba(0,0,0,0.7);
+    @include opacity(100);
+  }
+  &:hover .tile-labels i[class*=icon-] {
+    @include opacity(0);
+  }
+
+  .tile-overlay {
+    width: 202px;
+    height: 202px;
+    z-index: $zindexPopover;
+    position: absolute;
+    top: 202px; /* start the overlay so that it is hidden at the bottom of its tile container */
+    left: 0px;
+    display: none;
+
+    &.black {
+      background: rgba(0,0,0,0.7);
+    }
+  }
+}
+
+
+.tile-stack::before,
+.tile-stack::after {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  
+  position: absolute;
+  content: '';
+  
+  border: 1px solid darken($grayLighter, 5%);
+  background: $grayLightest;
+  
+  height: 4px;
+}
+.tile-stack::before {
+  width: 196px;
+  
+  left: 1px;
+  bottom: -4px;
+}
+.tile-stack::after {
+  width: 192px;
+  
+  left: 3px;
+  bottom: -7px;
+}

data/lib/bandshell/application/public/stylesheets/sass/components/topmenu.scss

@@ -0,0 +1,218 @@
+/*##########################################################################*/
+/*  Top Menu  */
+/*##########################################################################*/
+
+
+//////////////////
+
+/*##########  STRUCTURE  ##########*/
+
+#top-menu {
+  width: 100%;
+  @include vertical-gradient(#fbfbfb, #d5d5d5);
+  @include box-shadow(0px 1px 6px $gray);
+  border-bottom: solid 1px #999;
+  z-index: 2;
+  position: relative;
+  @include clearfix();
+  
+  .btn {
+
+    // custom attributes:
+    @include border-radius(6px);
+    background: transparent image-url('layout/top-menu/button_top-menu_states.png') top left repeat-x;
+    
+    // IE fix: reset Microsoft filter attribute:
+    filter: none;
+
+    color: #666;
+    text-shadow: 0 1px #eee;
+    margin: 0px 2px;
+    padding: 4px 7px;
+    font-size: 11px;
+    border: solid 1px #999;
+    float: left;
+
+    &:hover {
+      background: transparent image-url('layout/top-menu/button_top-menu_states.png') top left repeat-x;
+      text-shadow: 0 1px #eee;
+      background-position: 100% -31px;
+      border: solid 1px #2f84da;
+
+      .badge {
+        //background-color: $concerto-blue-1;
+        color: $white;
+
+        &.action {
+          background-color: $red;
+        }
+      }
+    }
+
+    &:active {
+      background: transparent image-url('layout/top-menu/button_top-menu_states.png') top left repeat-x;
+      background-position: 100% -62px;
+      border: solid 1px #333;
+    }
+
+    &:visited {
+      color:#666;
+    }
+    
+    &.selected {
+      @include box-shadow(inset 0 0 10px #000);
+      text-decoration: none;
+      text-shadow: 0 -1px #333333;
+      color: #FFF;
+      background-position: 100% 100%;
+      border: solid 1px #333;
+  
+      &:active {
+        color: $white !important;
+      }
+
+      &:hover {
+        color: $white !important;
+      }
+      
+    }
+    
+  }
+
+  .badge {
+    background-color: #666;
+    color: $grayLighter;
+    text-shadow: 0 0 0;
+
+    &.action {
+      background-color: darken($red, 10%);
+    }
+  }
+  
+  #top-menu-logobutton {
+    @include vertical-gradient($concerto-blue-0, $concerto-blue-2);
+    float: left;
+    color: $white;
+    padding: 4px 12px;
+    font-weight: bold;
+    vertical-align: middle;
+
+    i.concertocon-logobutton {
+      opacity: 0.6;
+    }
+
+    &.full {
+      padding: 0px 12px;
+      height: 55px;
+    }
+
+    &.selected {
+      background: $concerto-blue-0;
+      color: $white;
+      position: relative;
+
+      i.concertocon-logobutton {
+        opacity: 1.0;
+      }
+
+      &:after {
+        content: ' ';
+        height: 0;
+        position: absolute;
+        width: 0;
+        top: 100%;
+        left: 50%;
+        margin-left: -10px;
+
+        border: 10px solid transparent;
+        border-top-color: $concerto-blue-0;
+      }
+    }
+
+    // apply new background position on hover to show "lit up" version of logo bg:
+    &:hover i.concertocon-logobutton {
+      opacity: 1.0;
+      text-decoration: none;
+    }
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  #top-menu-logintext {
+    float: left;
+    padding: 4px 12px;
+    margin: 0px;
+    color: $gray;
+    font-size: 0.85em;
+  }
+
+  #top-menu-user {
+
+    i {
+      display: block;
+      margin: 2px 0px;
+    }
+
+    h2 {
+      text-transform: uppercase;
+      font-size: 17px;
+
+      a {
+        color: $gray;
+        text-shadow: 0px 1px 0px $white;
+        letter-spacing: 0.15em;
+        font-size: 17px;
+      }
+    }
+
+    .pull-left {
+      padding-top: 2px;
+      margin-right: 12px;
+    }
+
+    .pull-right {
+      padding-top: 7px;
+      margin-right: 8px;
+
+      p {
+        font-size: 0.8em;
+      }
+    }
+  }
+  
+  // each part of the menu is a "section"
+  section { 
+    border-right:solid 1px #ccc; 
+    float: left;
+    margin: 0px;
+    padding-top: 4px;
+
+    &.right {
+      float: right;
+    }
+
+    .top-menu-sectop {
+      height: 34px;
+      padding: 0px 2px;
+    }
+    
+    .top-menu-secbot {
+      background: #f9f9f9;
+
+      h1 {
+        color: #666;
+        font-size: 0.75em;
+        font-weight: 400;
+        text-shadow: 0 0.05em #FFF;
+        padding: 3px 0px;
+        text-transform: uppercase;
+        letter-spacing: 0.3em;
+        text-align: center;
+      }
+      
+    }
+    
+  }
+  
+}

data/lib/bandshell/application/public/stylesheets/sass/components/type.scss

@@ -0,0 +1,259 @@
+/* Typography.scss
+ * Headings, body text, lists, code, and more for a versatile and durable typography system
+ * ---------------------------------------------------------------------------------------- */
+
+
+// BODY TEXT
+// ---------
+
+p {
+  @include shorthand-font(normal,$basefont,$baseline);
+  margin-bottom: $baseline / 2;
+  small {
+    font-size: $basefont - 2;
+    color: $gray;
+  }
+}
+
+
+// HEADINGS
+// --------
+
+@mixin header-base {
+  font-family: $sans-headers;
+  line-height: normal;
+
+  small {
+    font-weight: normal;
+    color: $grayLight;
+  }
+}
+
+h1, .h1 {
+  @include header-base;
+  font-size: 30px;
+  font-weight: 400;
+
+  &.header {
+    text-transform: uppercase;
+    font-size: 1.3em;
+    letter-spacing: 0.15em;
+    padding: 6px 0;
+    margin-bottom: 16px; 
+  }
+  
+  &.indented {
+    padding-left: 8px !important; 
+  }
+  
+  &.subpage_header {
+    font-size: 3em;
+    margin-bottom: 8px !important; 
+  }
+  
+  small {
+    font-size: 18px;
+  }
+  
+}
+
+h2, .h2 {
+  @include header-base;
+  font-size: 24px; 
+
+  small {
+    font-size: 18px;
+  }
+
+}
+
+h3, .h3 {
+  @include header-base;
+  font-size: 18px; 
+
+  small {
+    font-size: 14px;
+  }
+
+}
+
+h4, .h4 {
+  @include header-base;
+  font-size: 16px; 
+
+  small {
+    font-size: 12px;
+  }
+
+}
+
+h5, .h5 {
+  @include header-base;
+  font-size: 14px; 
+}
+
+h6, .h6 {
+  @include header-base;
+}
+
+h7, .h7 {
+  @include header-base;
+}
+
+.header-with-icon {
+  border-bottom: solid 1px #ccc;
+
+  [class^="concertocon-header-"], [class*=" concertocon-header-"] {
+    background-color: $white;
+    margin-top: -10px; 
+    margin-bottom: -10px; 
+    margin-right: 12px;
+  }
+
+  h3 {
+    padding-top: 10px; 
+  }
+
+  .pagination-cont {
+    float: left;
+    padding-top: 8px;
+    margin-left: 35px;
+  }
+}
+
+.color-gray { color: $gray; }
+
+
+// Unordered and Ordered lists
+ul, ol {
+  margin: 0 0 $baseline 25px;
+}
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin-bottom: 0;
+}
+ul {
+  list-style: disc;
+}
+ol {
+  list-style: decimal;
+}
+li {
+  line-height: $baseline;
+}
+ul.unstyled {
+  list-style: none;
+  margin-left: 0;
+}
+
+// Description Lists
+dl {
+  margin-bottom: $baseline;
+  dt, dd {
+    line-height: $baseline;
+  }
+  dt {
+    font-weight: bold;
+  }
+  dd {
+    margin-left: $baseline / 2;
+  }
+}
+
+// MISC
+// ----
+
+// Horizontal rules
+hr {
+  margin: 20px 0 19px;
+  border: 0;
+  border-bottom: 1px solid #eee;
+}
+
+// Emphasis
+strong {
+  font-style: inherit;
+  font-weight: bold;
+}
+em {
+  font-style: italic;
+  font-weight: inherit;
+  line-height: inherit;
+}
+.muted {
+  color: $grayLight;
+}
+
+// uppercase
+.uppercase {
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+}
+
+// Blockquotes
+blockquote {
+  margin-bottom: $baseline;
+  border-left: 5px solid #eee;
+  padding-left: 15px;
+  p {
+    @include shorthand-font(300,14px,$baseline);
+    margin-bottom: 0;
+  }
+  small {
+    display: block;
+    @include shorthand-font(300,12px,$baseline);
+    color: $grayLight;
+    &:before {
+      content: '\2014 \00A0';
+    }
+  }
+}
+
+// Inline and block code styles
+code, pre {
+  padding: 0 3px 2px;
+  font-family: Monaco, Andale Mono, Courier New, monospace;
+  font-size: 12px;
+  @include border-radius(3px);
+}
+code {
+  background-color: lighten($orange, 40%);
+  color: rgba(0,0,0,.75);
+  padding: 1px 3px;
+}
+pre {
+  background-color: #f5f5f5;
+  display: block;
+  padding: ($baseline - 1) / 2;
+  margin: 0 0 $baseline;
+  line-height: $baseline;
+  font-size: 12px;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.15);
+  @include border-radius(3px);
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+
+}
+
+
+// LABELS
+// ------
+
+.label {
+  padding: 4px;
+  font-size: $basefont * .75;
+  font-weight: bold;
+  color: $white;
+  white-space: nowrap;
+  background-color: darken($gray, 5%);
+  &.important { background-color: #c43c35; }
+  &.warning   { background-color: $orange; }
+  &.success   { background-color: $green; }
+  &.notice    { background-color: lighten($blue, 25%); }
+
+  a { color: $white; }
+}