meedan-bootstrap 0.0.3

data/stylesheets/_media_object.scss

@@ -0,0 +1,141 @@
+
+/* ===================================================================  */
+/* = Mixin: Media Object                                                */
+/* ===================================================================  */
+
+@mixin media-object($media-object-width: $primary-cols, $context: $primary-cols) {
+  position: relative;
+  @include clearfix;
+  @include columns($media-object-width, $context);
+  @include trailer(0.5, $medium-font-size);
+  @include trailer(0.5, $medium-font-size, padding);
+    
+  // Width hacks to be revised
+  // need to update the media objects to get widths right — CGB may 30
+  img, embed, iframe {
+    max-width: 100%;
+    clear: both;
+    float: $from-direction;
+    
+  }
+  iframe {
+    width: 100%;
+  }
+  &.video iframe {
+    height: auto;
+  }
+  
+  // non grid padding
+  .description p, .report-stats {
+    padding: 2%;
+    list-style-type: none;
+  }
+  
+  /* ================================The row across the top of the report */
+  .byline { 
+    width: 100%;
+    
+    &>.shortlink, &>img, &>span, &>time {
+      float: $from-direction;
+      display: inline-block;
+      margin-#{opposite-position($from-direction)}: 1%;
+    }
+    
+    img.avatar-image {
+      width: rhythm(1);
+      height: rhythm(1);
+      margin-#{$from-direction}: 1%;
+    }
+    
+    time {
+      a {
+        text-decoration: none;
+        &:hover {
+         text-decoration: underline;
+        }
+      }
+    }
+
+    .shortlink {
+      width: auto;
+      background: $bright-blue;
+      @include border-radius(10px);
+      padding-#{opposite-position($from-direction)}: 3%;
+      padding-#{$from-direction}: 1%;
+      height: 22px;
+      .icon {
+        width: 20px;
+        height: 20px;
+        background: url("/images/iconic-icons/white/link_12x12.png") center center no-repeat;
+        display: inline-block;
+        float: $from-direction;
+      }
+      a {
+        color: white;
+        padding: 0;
+        @include adjust-font-size-to($xsmall-font-size);
+        @include en-sans-font-stack;
+        float: $from-direction;
+        text-decoration: none;
+      }
+    }
+  }
+  
+  $description-color: white;
+  .description {
+    @include columns($media-object-width, $media-object-width);
+    background: $description-color;
+    @include leader-and-trailer(1, $large-font-size);
+    position: relative;
+    @include pointer-content($description-color);
+  }
+
+  .inner {
+
+    // label
+    .label-wrapper {
+      float: opposite-position($from-direction);
+      background: white;
+      margin: 0;
+      @include border-top-radius;
+      @include border-bottom-radius(0);
+      .custom-label {
+      }
+      .text {
+      }
+    }
+
+    // buttons
+    .contextual-action-buttons {
+      padding-#{$from-direction}: 2%;
+      float: $from-direction;
+      &:last-of-type {
+        float: opposite-position($from-direction);
+      }
+    }
+    
+     // media content
+    .content {
+      background: white;
+      display: inline-block;
+      padding: 2%;
+      width: 96%;
+      position: relative;
+    }
+      
+    //tweet media content 
+    .tweet {
+      color: $twitter-blue;
+      @include en-sans-font-stack;
+      @include adjust-font-size-to($medium-large-font-size);
+      @include leader-and-trailer(1, $medium-large-font-size, 1);
+    }
+  }
+  .metadata {
+    @include columns($media-object-width, $media-object-width);
+    @include leader-and-trailer(0.5, $medium-font-size);
+    @include en-sans-font-stack;
+    color: $darker-gray;
+    @include adjust-font-size-to($small-font-size);
+  }
+}

data/stylesheets/_messages.scss

@@ -0,0 +1,19 @@
+@mixin messages($color: $light-gray, $adjustment: "lighten", $font-size: $medium-font-size) {
+  margin: 0;
+  padding-left: rhythm(1/2, $font-size);
+  padding-right: rhythm(1/2, $font-size);
+  margin-top: rhythm(1, $font-size);
+  margin-bottom: rhythm(1, $font-size);
+  color: adjust_hue(darken($color, 50%), -5%);
+  @include adjust-font-size-to($font-size);
+  @include leading-border(1px, 1, $font-size);
+  @include trailing-border(1px, 1, $font-size);
+  border-color: adjust_hue(darken($color, 20%), -5%);
+  
+  @if $adjustment == "lighten" {
+    background: adjust_hue(lighten($color, 20%), -5%);
+  }
+  @else if $adjustment == "darken" {
+    background: adjust_hue(darken($color, 20%), -5%);
+  }
+}

data/stylesheets/_navigation.scss

@@ -0,0 +1,30 @@
+// simple grid list of actions
+@mixin checkdesk-navigation {
+  @include columns(2, $secondary-cols);
+  @include omega;
+  @include opacity(0.5);
+  &:hover { @include opacity(1); }
+  @include adjust-font-size-to($small-font-size);
+  @include en-sans-font-stack;
+  margin: 0;
+  background: $gray;
+  li {
+    list-style-type: none;
+    float: $from-direction;
+    margin-#{$from-direction}: 2%;
+    a {
+      background: $light-gray;
+      padding-left: 4px;
+      padding-right: 4px;
+    }
+    &:hover {
+      a {
+        color: black;
+        text-decoration: none;
+      }
+    }
+  }
+  .selected {
+    font-weight: bold;
+  }
+}

data/stylesheets/_pagination.scss

@@ -0,0 +1,20 @@
+
+@mixin pagination($font-size: 19px) {
+  @include full;
+  @include adjust-font-size-to($font-size);
+  @include leader(1, $font-size);
+  @include trailer(1, $font-size);
+  background: $light-gray;
+  text-align: center;
+  li {
+    margin: 0;
+    padding: 0;
+    display: inline;
+    a {
+      font-weight: bold;
+      text-decoration: none;
+      background: $light-gray;
+      padding: 0 rhythm(1, $font-size);
+    }
+  }
+}

data/stylesheets/_pointer.scss

@@ -0,0 +1,14 @@
+// generate a CSS3 pointer using borders to draw triangles
+@mixin pointer-content($color: $buttermilk-yellow, $size: 15px, $shape: transparent transparent $color transparent, $top: -$size * 2, $side: 2%) {
+  &:before {
+    content: ' ';
+    position: absolute; 
+    width: 0;  
+    height: 0;  
+    #{$from-direction}: $side;  
+    top: $top;  
+    border: $size solid;  
+    border-color: $shape;
+    z-index: 100;
+  }
+}

data/stylesheets/_profile.scss

@@ -0,0 +1,25 @@
+/* ================ */
+/* = user profile = */
+/* ================ */
+@mixin profile() {
+  float: $from-direction;
+  padding: $gutter;
+  
+  // membership history
+  .user-member {
+
+  }
+
+  // twitter integration 
+  div.twitter-info {
+  }
+
+   // user stats
+  .user-stats {
+  }
+  
+  // user picture
+  .picture {
+    padding: $gutter $gutter*2 0 0;
+  }
+}

data/stylesheets/_reset.scss

@@ -0,0 +1,12 @@
+@mixin reset() {    
+
+  // prep blocks for responsive grid
+  iframe, img, object {
+    max-width: 100%;
+  }
+
+  // clean IE image resizing
+  img {
+    -ms-interpolation-mode: bicubic;
+  }
+}

data/stylesheets/_respond_to.scss

@@ -0,0 +1,24 @@
+// Media query breakpoints
+// See http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
+$break-small: 350px;
+$break-large: 1180px;
+
+@mixin respond-to($media) {
+  @if $media == "small-screens" {
+    @media only screen and (max-width: $break-small) { @content; }
+  }
+  @else if $media == "medium-screens" {
+    @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
+  }
+  @else if $media == "large-screens" {
+    @media only screen and (min-width: $break-large) { @content; }
+  }
+}
+
+
+// Now we can use three customizations on any element:
+// element {
+  // @include respond-to(handhelds) { width: 100% ;}
+  // @include respond-to(medium-screens) { width: 125px; }
+  // @include respond-to(wide-screens) { float: none; }
+// }

data/stylesheets/_syntax.scss

@@ -0,0 +1,205 @@
+
+// syntax overrides to add a scss style. 
+// In the markup use the <pre>:::css syntax. 
+// We just tweak it slightly to better show sass.
+// This is included at the end of the mixin and overrides the coderay theme
+@mixin scss {
+   color: aqua;
+   position: relative;
+
+  .constant { font-weight: normal; }
+  .predefined {color: yellow;}
+  .directive { color:pink; }
+  .error { color:#9df393;}
+
+  .value { color: #9df393; }
+  .type { color: white; }
+  .key { 
+    color: $key;
+    .char { color: $key }
+    .delimiter { color: $key }
+  }
+  
+  .string {
+    color: aqua!important;
+    .delimiter {
+      color: aqua;
+    }
+    .content {
+      color: aqua;
+    }
+  }
+  .tag {
+    color: aqua;
+  }
+  .attribute-name {
+    color: aqua;
+  }
+}
+
+// This coderay theme is based on https://gist.github.com/1250944
+@mixin syntax() {
+  
+  overflow-x: auto;
+  
+  &.bad {
+    background-color: darken(red, 30%)!important;
+  }
+  
+  direction: ltr!important; // code is always ltr in our examples
+  background-color: $syntax-background;
+  color: $syntax-foreground;
+  font-weight: normal;
+  letter-spacing: 0.0em;
+  font-family: monospace, Helvetica, sans-serif;
+  @include adjust-font-size-to($small-font-size);
+
+  @include full;
+  @include pad(1/2, 1/2);
+  @include leader-and-trailer(1, $small-font-size);
+  @include leader-and-trailer(1, $small-font-size, 1);
+  
+  * {
+    text-indent: 0!important;
+    text-align: $from-direction!important;
+    padding: 0!important;
+    margin: 0!important;
+    letter-spacing: 0!important;
+  }
+  
+  .line-numbers {
+    background-color: $line-no-background;
+    a {
+      color: $line-no-foreground;
+      text-decoration: none;
+      &:target { color: blue !important; }
+    }
+
+    .highlighted { 
+      color: red !important; 
+      a { color: red !important; }
+    }
+  }
+
+  span.line-numbers { padding: 0px 4px; }
+
+  .line { display: block; float: $from-direction; width: 100%; }
+
+  .debug { color: white !important; background: blue !important; }
+
+  .annotation { color:#007 }
+  .attribute-name { color: white }
+  .attribute-value { color:#700 }
+  .binary { color:#509 }
+
+  .char { 
+    color:#D20;
+    .content { color:#D20 }
+    .delimiter { color:#710 }
+  }
+
+  .class { color:$entity-clr; }
+
+  .class-variable { color:#369 }
+  .color { color: white }
+
+  .comment { 
+    color:$comment-clr;
+    .char { color:#444 }
+    .delimiter { color:#444 }
+  }
+
+  .complex { color:#A08 }
+  .constant { color:$constant-clr; font-weight:bold }
+  .decorator { color:#B0B }
+  .definition { color:#099; font-weight:bold }
+  .delimiter { color:black }
+
+  .doc { color:#970 }
+  .doc-string { color:#D42; font-weight:bold }
+  .doctype { color:#34b }
+  .entity { color:#800; font-weight:bold }
+
+  .escape  { color:#666 }
+  .exception { color:#C00; font-weight:bold }
+  .float { color:$constant-clr }
+
+  .function { color:$entity-clr; }
+
+  .global-variable { color:#d70 }
+  .hex { color:#02b }
+  .imaginary { color:#f00 }
+  .include { color:#B44; font-weight:bold }
+  .inline { background-color: hsla(0,0%,0%,0.07); color: black }
+  .inline-delimiter { font-weight: bold; color: #666 }
+  .instance-variable { color:#33B }
+  .integer  { color:$constant-clr }
+
+  .keyword { color:$keyword-clr; font-weight:bold }
+
+  .label { color:#970; font-weight:bold }
+  .local-variable { color:$variable-clr }
+  .namespace { color:#707; font-weight:bold }
+  .octal { color:#40E }
+  .operator { }
+  .predefined { color:yellow;}
+  .predefined-constant { color:#069 }
+  .predefined-type { color:#0a5; font-weight:bold }
+  .preprocessor { color:#579 }
+  .pseudo-class { color:#00C; font-weight:bold }
+
+  .regexp { 
+    .content, .delimiter { color:$regex-clr }
+    .modifier { color:#C2C }
+  }
+
+  .reserved { color:#080; font-weight:bold }
+
+  .shell { 
+    background-color:hsla(120,100%,50%,0.06); 
+    .content { color:#2B2 }
+    .delimiter { color:#161 }
+  }
+
+  .string { 
+    background-color:hsla(0,100%,50%,0.05); 
+    .char { color: #b0b }
+    .content, .delimiter { color: $string-clr; }
+    .modifier { color: #E40 }
+  }
+
+  .symbol { 
+    color:#A60;
+    .content { color:#A60 }
+    .delimiter { color:#630 }
+  }
+
+  .tag { color:#070 }
+  
+  .variable  { color:#037 }
+
+  .insert { 
+    background: hsla(120,100%,50%,0.12);
+    .eyecatcher { background-color: hsla(120,100%,50%,0.2); border: 1px solid hsla(120,100%,25%,0.5); margin: -1px; border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
+    .insert { color: #0c0; background:transparent; font-weight:bold }
+  }
+
+  .delete { 
+    background: hsla(0,100%,50%,0.12);
+    .eyecatcher { background-color: hsla(0,100%,50%,0.2); border: 1px solid hsla(0,100%,45%,0.5); margin: -1px; border-bottom: none; border-top-left-radius: 5px; border-top-right-radius: 5px; }
+    .delete { color: #c00; background:transparent; font-weight:bold }
+  }
+
+  .change { 
+    color: #bbf; background: #007; 
+    .change { color: #88f }
+  }
+
+  .head { 
+    color: #f8f; background: #505;
+    .filename { color: white; }
+    .head { color: #f4f }
+  }  
+  
+  @include scss;
+}