Bidirectional layout

layout.scss

/*directional mixins*/
@import "base";
@import "welcome";
@import "announcement";
@import "favorites";
@import "tags";
@import "sidebar";
@import "nav";
@import "tabs";
@import "main_form";

#header,
#footer,
.mission,
.breadcrumb,
.content, .node, #footer-container, form { @include clearfix; } 

.inner { padding: $default_padding; }

@mixin icon-layout($width: $primary_width, $language_dir: left, $background_color: none, $icon_width: 40px, $padding: $default_padding, $border_color: lighten($tarawera, 10%)) {
  background-color: $background_color;
  border-top: 2px solid $border-color;
  float: $language_dir;
  width: $width - $padding;
  margin-#{opposite-position($language-dir)}: $padding;
  padding: $padding;
  position: relative;
  overflow: hidden;
  h3 {
    padding-#{$language_dir}: $icon_width;
  }
  object {
    margin: $padding;
  }
  div.type-icon {
    width: $icon_width;
    position: absolute;
    top: $padding/2;
    #{language_dir}: 0;
  }
  div.inner-wrap {
    ul.links{
      float: $language_dir;
      margin-top:$padding/2;
      li {
        padding:0;
        a.comment-responses {
          background:url('../images/response-icon.png') no-repeat center $language_dir;
          padding-#{$language_dir}: $padding*2;
        }
      }
      li.node_read_more {
        margin-#{$language_dir}:$padding*2;
      }  
    }
  }
}

/*custom teaser colors*/
/*
.teaser-image, .teaser-default, .teaser-slides {
  border-top-color: #448ccb!important;
}

$ms_word_blue: #448ccb; 
$link_grey: #c3c3c3; 
$pdf_red: darken(red, 10%);
$video_green: darken($aquasqueeze, 30%);
.teaser-word { border-top-color: $ms_word_blue!important; }
.teaser-link { border-top-color: $link_grey!important; }
.teaser-pdf { border-top-color: $pdf_red!important; }
.teaser-video { border-top-color: $video_green!important; }
*/

/* ================================= */
/* = The Emediat layout, logged-in = */
/* ================================= */

@mixin emediat-layout($direction: right) {
  @include set_the_direction_property($direction);

  /* main 2 columns */
  .panel-right-sidebar{
    width: $page_width;
    margin: 0 auto;
    .panel-main {
      width: $primary_width;
      float: $direction;
      /* each iconified resource is half the width of the container, minus padding */
      .teaser {
        @include icon-layout(($primary_width/2 - ($default_padding * 4)), $direction);
        .pane-page-title {
          padding-top: $default_padding*2;
        }
      }
    }
    .panel-right {
      @include sidebar($direction);
      float: opposite-position($direction);
      width: $secondary_width;
      padding: $default_padding;
      .panel-inner {
        padding: 0;
      }
    }
  }
  
  /*panels are used on workshops, events, community, trainers tools, the profile*/
  div.panel-main {
    div.panel-pane {
      float: $direction; 
       @include clearfix;
       width: 100%;
      div.pane-content {
        width: 100%;
        h1 {
        }
      }  
    }
  }

  .field-items {
    float: $direction;
    clear: both;
  }

  /* main h1s */
  h1, .pane-page-title-extras {
    border-bottom: $default_border;
    padding-bottom: $default_padding/2;
    margin-bottom: ($default_padding);
    @include clearfix;
    float: $direction;
    width: 100%;
    display: block;

  }
  
  
  /* ------------------------------------------ language switcher */
  .pane-locale-0 {
    @include language-switcher($secondary_width);
  }
          
  /* ------------------------------------------ PAGE: landing */        
  .pane-welcome-message {
    @include welcome_message_hovers($direction);
  }
  
  /* ------------------------------------------  PAGE: resources*/
  .panel-main {
    div.view-id-resources .teaser {
      @include icon-layout($half_primary_width, $direction);
    } 
  }
  
  /* ------------------------------------------  PAGE discussions*/
  .panel-main {
    .pane-discussions-panel-pane-1 .teaser {
      @include icon-layout($primary_width, $direction);
    }
  }
  
  /* ------------------------------------------  PAGE profile */
  .pane-profile-header {
    text-align: $direction;
    .profile-photo {
      margin: $default_padding;
      float: $direction;
    }
  }
  /* ------------------------------------------  PAGE: workshop */
  .node-type-workshop {
    .field-field-workshop-training-partner {
      margin-bottom:40px;
    }
    .view-discussions-resources .teaser {
      @include icon-layout($primary_width, $direction);
    }
  }
  
  
  /* ------------------------------------------ PAGE TYPE: taxonomy*/
  .page-taxonomy {
    .view-id-discussions .teaser {
      @include icon-layout($primary_width, $direction);
    }
    .view-discussions-resources .teaser {
      @include icon-layout($primary_width, $direction);
    }
  }
  
  .view-id-favorites .teaser {
    @include icon-layout($primary_width, $direction);
  }
  
  /* ------------------------------------------  Page: Trainers' Tools */
  .page-trainers {
    .panel-pane {
      margin-bottom:40px;
    }
    .pane-reports {
      .pane-content {
        h3 {
          font-size:16px;
          margin-bottom:0;
          margin-top:10px;
          font-weight:normal;
        }
      }
    }
    .pane-trainers-panel-pane-1, .pane-trainers-panel-pane-2 {
      width: $half_primary_width;
      float: $direction;
      .teaser {
        @include icon-layout($half_primary_width, $direction);
      }
    }
    .pane-trainers-panel-pane-1 {
      margin-right:50px;
    } 
  }

  /* comment nodes */

  .view-content {
    .node {
      width: $primary_width -$default_padding*2;
      @include box-shadow(#c3c3c3 1px 1px 3px);
    }
  }


  /* ------------------------------------------  Page type: Nodes */

  .submitted {
    display:block;
    margin-bottom:10px;
    font-style:italic;
  }
  .node-inner {
    margin-bottom: $default_padding;
    .content {
      font-size: 18px;
      line-height: 1.4;
      .field { margin-top: $default_padding; }
    } 
    ul.term-links {@include tags($direction);}
    ul.links {
      padding: $default_padding 0;
      width: 100%;
      float: $direction;
      clear: both;
      display: block;
      @include clearfix;
      margin: 0;
      @include favorites($direction);
        
      li {
        @include block;
        padding: 3px;
        span.flag-message {
          margin: $default_padding 0;
          padding: $default_padding;
        }
      }
      li.comment_add {
        display:none;
      }
    }
  }  

  /* ------------------------------------------ Page:  Community */
  .page-community{
    .pane-block {
      margin-bottom:20px;
    }
    .view-id-community_country {
      .views-row {
        width:85px;
        margin-right:10px;
      }
    }
  }

  .view-community-country .teaser {
    @include icon-layout($primary_width, $direction);
  }
  
  
  /* ------------------------------------------ Page: Profile */
  .pane-field-profile-about {
    float: $direction;
    width: $half_primary_width;
    padding: $default_padding;
  }
  .pane-profile-header {
    @include special_block($half_primary_width);
    float: opposite-position($direction);
    clear: both;
    div.profile-photo {
      padding: $default_padding;
      display: block;
      float: $direction;
    }
    
    h2 {
      float: $direction;
    }
    h3 {
      float: $direction;
    }
  }
  .node-type-profile {
    .view-discussions-resources .teaser {
      @include icon-layout($primary_width, $direction);
    }
  }

  .view-administrative-announcements {
    .views-row {
      @include announcement($direction);
    }
  }
  .pane-current-user-info {
    .profile-photo {
      margin-#{opposite-position($direction)}:10px;
      img {
        @include box-shadow($silver, 0px, 1px, 3px);
      }
    }
    h2 {
      font-size:20px;
    }
  }
  
  .more-link {
    float: left;
    clear: both;
    border-top: 1px solid #3c3c3c3;
    font-size: 15px;
    padding: $default_padding 0;
    a {color: #c3c3c3;}
  }
  
  .views-admin-links {
   margin-#{$direction}: -50px; 
  }
  
  /*  tips on the workshop/resource creation   */
  .tips {
    @include linear-gradient(color_stops(darken($postit,7%),$postit,$postit));
    /*turned off for now*/
    display: none;
  }

  .node-form { 
    @include main-form($direction);
  }

  /* ------------------------------------------ misc --- */
  
  h3.trainer_only {
    border-top: 1px solid #c3c3c3;
    background:url("../images/icons/gray_dark/lock_fill_12x16.png") top $direction no-repeat;
    padding-#{$direction}: 20px;
  }
   #content-header {
     @include tabs($direction);
   }

   .content, .node, form {
     float: $direction; clear: both;
   }

   h2 {
     width: 100%;
   }

   #navigation {
     @include navigation($direction);
     ul#primary li { float:$direction; }
     li.first a span { margin-#{$direction}:-9999px!important; }
   }

   ul.resources-subject {
     list-style-type: none;
     @include tags($direction);
   }

   ul.resources-by-type {
     list-style-type: none;
     @include tags($direction);
   }

   div.pane-menu-menu-discussion-categories {
     ul.menu {
       @include tags($direction);
     }
   }
  
}


/* --------------------- end mixins ----------------*/

body { @include emediat-layout(left); }
body.i18n-ar { @include emediat-layout(right); }

is there a demo?