playmo 0.0.6 → 0.0.10

data/{stylesheets/_playmo_rails.sass → lib/playmo/recipes/templates/assets_recipe/stylesheets/partials/_html5-boilerplate.css.scss}

@@ -9,5 +9,5 @@
   @include html5-boilerplate-fonts;
   @include html5-boilerplate-styles;
   @include html5-boilerplate-helpers;
-  @include html5-boilerplate-media;
 }
+

data/lib/playmo/recipes/templates/assets_recipe/stylesheets/partials/_layout.css.scss

@@ -0,0 +1,264 @@
+/*===============================================================================================
+
+    Styles for pages layout, custom CSS styles for layout containers positioning.
+    Make the separation for home, domestic and other pages by define id for the 'body' tag.
+
+===============================================================================================*/
+@import "compass/css3/border-radius";
+@import "compass/css3/box-shadow";
+@import "compass/css3/text-shadow";
+@import "compass/css3/opacity";
+@import "compass/css3/images";
+@import "compass/css3/inline-block";
+@import "compass/css3/box-sizing";
+@import "compass/css3/gradient";
+
+@mixin pagination-active {
+  @include background-image(none);
+  @include single-box-shadow(#222, 1px, 1px, 3px, 0px, true);
+  @include single-text-shadow(#222, -1px, -1px, 0);
+  background: #555;
+  color: #fff;
+  padding: 3px 9px;
+  border: 0;
+}
+
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url('http://themes.googleusercontent.com/font?kit=wPL39jTIyO02mfXIlk2kcZONKhqmvY42kW5NWmrYr04') format('woff');
+}
+
+#{headings(all)} {
+    font: $base-font-family;
+    font-family: 'Ubuntu';
+}
+
+body {
+    height: 100%;
+    margin: 0;
+    background: #222 asset-url("bg.jpg", image);
+
+    #notice {
+        left: 0;
+        position: fixed;
+        top: 0;
+        width: 100%;
+        z-index: 65000;
+
+        div {
+            @include border-radius(0 0 7px 7px);
+            @include box-shadow(#000, 1px, 1px, 10px, 1px);
+            @include opacity(0.9);
+            background: none repeat scroll 0 0 #555555;
+            color: #FFFFFF;
+            font-size: 120%;
+            margin: 0 auto;
+            padding: 5px;
+            position: relative;
+            text-align: center;
+            width: 700px;
+        }
+
+        p {
+            margin: 18px 50px;
+        }
+
+        a {
+            color: #FFFFFF;
+            display: inline-block;
+            font-size: 200%;
+            left: 670px;
+            padding: 5px;
+            position: absolute;
+            text-decoration: none;
+            top: 17px;
+        }
+
+        a:hover {
+            color: maroon;
+        }
+    }
+
+    #main-wrapper {
+        width: 915px;
+        margin: 20px auto 0 auto;
+        padding: 0 0 30px 0;
+        background: #f4f4f4;
+        @include border-radius(12px);
+        @include box-shadow(#010101, 0px,0px, 35px, 0px);
+        @include background-image(linear-gradient(#e9e9e9, #fff 40%, #fff));
+        border: 1px solid #fff;
+    }
+
+    header {
+        padding: 30px 0 30px 30px;
+        position: relative;
+        overflow: hidden;
+        border-bottom: 1px solid #ddd;
+        -moz-box-shadow: 0 1px 1px -1px #fff;
+
+        #user-info { position: absolute; top: 30px; right: 30px; }
+
+        h1 {
+            float: left;
+            margin: 0;
+
+            a {
+                color: #000;
+                text-decoration: none;
+            }
+
+            span {
+                font-size: 40%;
+                display: block;
+                line-height: 12px;
+                width: 140px;
+                text-align: center;
+                font-weight: normal;
+            }
+        }
+
+        nav {
+            float: left;
+            margin: 0 0 0 140px;
+
+            ul {
+                li {
+                    display: inline-block;
+                    margin: 0 0 0 3px;
+
+                    a {
+                        height: 27px;
+                        line-height: 27px;
+                        display: inline-block;
+                        text-align: center;
+                        padding: 0 20px;
+                        margin: 6px 0;
+                        @include link-colors(#222, #fff, #fff, #222, #fff);
+                        @include border-radius(4px);
+                        text-decoration: none;
+                    }
+
+                    a:hover {
+                        background: #222 url(/themes/default/images/bg.jpg);
+                    }
+
+                    a.current { font-weight: bold; }
+                }
+            }
+        }
+
+        #searchbar {
+            width: 200px;
+            position: absolute;
+            top: 38px;
+            right: 30px;
+            font-size: 70%;
+            font-weight: normal;
+
+            #q {
+                @include border-radius(12px);
+            }
+        }
+    }
+
+    #body {
+        overflow: hidden;
+        padding: 30px 0 0 30px;
+
+        #content {
+            width: 625px;
+            float: left;
+            margin: 0 30px 0 0;
+
+            /* Pagination styles */
+            nav.pagination {
+                margin: 0 0 5px 0;
+
+
+
+                li {
+                    display: inline-block;
+
+                    a, span {
+                        display: inline-block;
+                        padding: 2px 8px;
+                        border: 1px solid #aaa;
+                        color: #555;
+                        text-decoration: none;
+                        font-weight: bold;
+                        margin: 0 5px 0 0;
+                        @include border-radius(4px);
+                        @include background-image(linear-gradient(#fff, #fff 40%, #e9e9e9));
+                        @include box-shadow(#aaa, 0px, 0px, 2px, 0px);
+                        @include single-text-shadow(#fff, 1px, 1px, 0);
+                    }
+
+                    a:hover, a:focus {
+                        @include background-image(none);
+                        background: #fff;
+                        color: #222;
+                    }
+
+                    a:active {
+                        @include pagination-active;
+                    }
+                }
+
+                li.current {
+                    span {
+                        cursor: default;
+                        @include pagination-active;
+                    }
+                }
+            }
+        }
+
+        aside {
+            width: 195px;
+            float: left;
+        }
+    }
+
+    footer {
+        font-size: 85%;
+        padding: 0 20px;
+        width: 855px;
+        margin: 0 auto 50px auto;
+
+        p {
+            color: #ccc;
+            @include single-text-shadow(#000, 1px, 1px, 0);
+        }
+    }
+
+    #toolbar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        min-width: 1024px;
+        z-index: 65000;
+        background: #bbb;
+        padding: 5px;
+
+        #toolbar-inner { width: 1000px; margin: 0 auto; position: relative; }
+
+        nav {
+            list-style: none;
+            overflow: hidden;
+
+            li {
+                float: left;
+
+                a { display: block; padding: 7px 20px; }
+            }
+
+            ul { display: none; }
+        }
+    }
+
+    #login-area { right: 0; top: 7px; position: absolute; }
+}

data/{templates/project/playmo/playmo.scss → lib/playmo/recipes/templates/assets_recipe/stylesheets/partials/_overrides.css.scss}

@@ -1,32 +1,18 @@
-@charset "utf-8";
-/*==============================================================================
+@import "compass/typography/links/link-colors";
 
-    Title   : Playmo CSS Framework (https://github.com/tanraya/playmo)
-    Name    : default.css
-
-    ATTENTION! DO NOT ADD YOUR CUSTOM STYLES IN THIS FILE!
-
-================================================================================
-
-    1. General Elements
-    2. Headings
-    3. Lists
-    4. Tables
-    5. Article markup
-    6. Images
-    7. Other styles
-
-==============================================================================*/
 /* 1. General Elements =======================================================*/
 body {
     background-color: #fff;
-    font: .75em/18px "Helvetica Neue", Arial, Helvetica, sans-serif;
+    font: .75em/18px $base-font-family;
 }
 
+a { @include link-colors($link-color, $link-hover-color, $link-active-color, $link-color, $link-hover-color); }
+
 /* 2. Headings */
-h1, h2, h3, h4, h5, h6 {
+#{headings(all)} {
     margin: 0 0 10px 0;
     padding: 0;
+    line-height: 1.2em;
 }
 
 h1 { font-size: 2em; }   /* 100% */
@@ -43,15 +29,18 @@ ul, ol, dl { list-style: none; margin: 0; padding: 0; }
 table {
     border-collapse: collapse;
     border-spacing: 0;
-}
+
     caption, th, td {
         text-align: left;
         font-weight: normal;
         padding: 0;
         vertical-align: top;
     }
+}
+
 
 /* 5. Article markup */
+strong { font-weight: bold; }
 em { font-style: italic; }
 sup, sub { vertical-align: baseline; position: relative; }
 sup { top: -0.4em; }
@@ -67,7 +56,7 @@ p {
         height: 0;
         visibility: hidden;
     }
-    
+
     p:after { clear: both; }
 
 blockquote {
@@ -80,6 +69,8 @@ pre, code, kbd, samp, var {
     font: 0.9em Consolas, "Courier New", monospace, sans-serif;
 }
 
+pre { margin: 0 0 18px 0; padding: 0; }
+
 /* 6. Images */
 a img { border: 0; }
 img.f-left { float: left; margin: 0 18px 0 0;  clear: left; }
@@ -87,4 +78,4 @@ img.f-right { float: right; margin: 0 0 0 18px; }
 
 /* 7. Other styles */
 ::-moz-selection{ background: #555; color:#fff; }
-::selection { background: #555; color:#fff; }
+::selection { background: #555; color:#fff; }

data/lib/playmo/recipes/templates/assets_recipe/stylesheets/partials/_simple_form.css.scss

@@ -0,0 +1,7 @@
+.field_with_errors {
+    span.error {
+        color: red;
+        padding: 0 0 0 7px;
+        display: block;
+    }
+}

data/{stylesheets/playmo-rails/_fonts.scss → lib/playmo/recipes/templates/assets_recipe/stylesheets/partials/html5-boilerplate/_fonts.css.scss}

@@ -3,12 +3,12 @@ $base-font-size: 13px !default;
 $base-line-height: 1.231 !default;
 
 //
-// Font normalization inspired by  from the YUI Library's fonts.css: developer.yahoo.com/yui
+// Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
 // Whatever parts of this port of YUI to Sass that are copyrightable, are Copyright (c) 2008, Christopher Eppstein. All Rights Reserved.
 //
 
 @mixin html5-boilerplate-fonts($family: $base-font-family, $size: $base-font-size, $line-height: $base-line-height) {
-  body { 
+  body {
     font-size: $size;
     font-family: $family;
     line-height: $line-height; // hack retained to preserve specificity
@@ -17,15 +17,13 @@ $base-line-height: 1.231 !default;
 
   select, input, textarea, button { font: 99% $family; }
 
-  // normalize monospace sizing 
-  // meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
+  // Normalize monospace sizing:
   // en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
   pre, code, kbd, samp { font-family: monospace, sans-serif; }
 }
 
-// maxvoltar.com/archive/-webkit-font-smoothing
 @mixin font-smoothing {
-  -webkit-font-smoothing: antialiased;
+  @warn "The 'font-smoothing' mixin has been deprecated as it made monospace too thin.";
 }
 
 // Sets the font size specified in pixels using percents so that the base
@@ -44,3 +42,4 @@ $base-line-height: 1.231 !default;
 @mixin font-size($size, $base-font-size: $base-font-size) {
   font-size: ceil(percentage($size / $base-font-size));
 }
+

data/{stylesheets/playmo-rails/_helpers.scss → lib/playmo/recipes/templates/assets_recipe/stylesheets/partials/html5-boilerplate/_helpers.css.scss}

@@ -45,6 +45,11 @@
 // www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden
 @mixin visually-hidden {
   border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
+  // Extends the .visuallyhidden class to allow the element to be focusable
+  // when navigated to via the keyboard: drupal.org/node/897638
+  &.focusable:active, &.focusable:focus {
+    clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;
+  }
 }
 
 // Hide visually and from screenreaders, but maintain layout
@@ -54,4 +59,4 @@
 @mixin magnificent-clearfix {
   @warn "The 'magnificent-clearfix' mixin has been deprecated. Use 'pie-clearfix' in compass core instead.";
   @include pie-clearfix;
-}
+}

data/{stylesheets/playmo-rails/_media.scss → lib/playmo/recipes/templates/assets_recipe/stylesheets/partials/html5-boilerplate/_media.css.scss}

@@ -3,7 +3,7 @@
     @include media-print;
   }
 
-  @media all and (orientation:portrait) { 
+  @media all and (orientation:portrait) {
     @include media-orientation-portrait;
   }
 
@@ -17,16 +17,16 @@
 }
 
 //
-// print styles
-// inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
+// Print styles
+// Inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
 
 @mixin media-print {
   * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
-  -ms-filter: none !important; } // black prints faster: sanbeiji.com/archives/953
+  -ms-filter: none !important; } // Black prints faster: sanbeiji.com/archives/953
   a, a:visited { color: #444 !important; text-decoration: underline; }
   a[href]:after { content: " (" attr(href) ")"; }
   abbr[title]:after { content: " (" attr(title) ")"; }
-  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  // don't show links for images, or javascript/internal links
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  // Don't show links for images, or javascript/internal links
   pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
   thead { display: table-header-group; } // css-discuss.incutio.com/wiki/Printing_Tables
   tr, img { page-break-inside: avoid; }
@@ -37,8 +37,8 @@
 
 
 //
-// media queries for responsive design
-// these follow after primary styles so they will successfully override.
+// Media queries for responsive design
+// These follow after primary styles so they will successfully override.
 //
 
 @mixin media-orientation-portrait {
@@ -54,7 +54,8 @@
 @mixin media-mobile($optimize: true) {
   // j.mp/textsizeadjust
   @if not $optimize {
-    // don't allow iOS and WinMobile to mobile-optimize text
-    html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
+    // Don't allow iOS and WinMobile to mobile-optimize text
+    html { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
   }
 }
+