groundworkcss-rails 0.2.5 → 0.2.6

data/vendor/assets/stylesheets/groundworkcss-scss/_mixins.scss

@@ -18,24 +18,56 @@
 
 @mixin desktop {
   @media only screen and (min-width:1025px) {
+    .hide-on-desktop { display:none; }
+    // helper overrides
+    .no-padding-desktop { padding:0; }
+    .no-margin-desktop { margin:0; }
+    .zero-desktop { @include _zero; }
     @content;
   }
 }
 
 @mixin ipad {
   @media only screen and (min-width:768px) and (max-width:1024px) {
+    .ipad-only { display:inline-block; }
+    .hide-on-ipad { display:none; }
+    .desktop-only { display:none; }
+    // helper overrides
+    .no-padding-ipad { padding:0; }
+    .no-margin-ipad { margin:0; }
+    .zero-ipad { @include _zero; }
+    @content;
+  }
+}
+
+@mixin ipad-above {
+  @media only screen and (min-width: 768px) {
     @content;
   }
 }
 
 @mixin small-tablet {
   @media only screen and (max-width:767px) {
+    .small-tablet-only { display:inline-block; }
+    .hide-on-small-tablet { display:none; }
+    .desktop-only { display:none; }
+    // helper overrides
+    .no-padding-small-tablet { padding:0; }
+    .no-margin-small-tablet { margin:0; }
+    .zero-small-tablet { @include _zero; }
     @content;
   }
 }
 
 @mixin mobile {
   @media only screen and (max-width:480px) {
+    .mobile-only { display:inline-block; }
+    .hide-on-mobile { display:none; }
+    .desktop-only { display:none; }
+    // helper overrides
+    .no-padding-mobile { padding:0; }
+    .no-margin-mobile { margin:0; }
+    .zero-mobile { @include _zero; }
     @content;
   }
 }
@@ -47,34 +79,17 @@
 }
 
 // ====================
-//   custom functions
+//       helpers
 // ====================
 
-// convert x,y to approximate degrees
-@function degrees($x, $y) {
-  @if ($x gt 0) {
-    @if ($y gt 0) {
-      @return 45;
-    } @elseif ($y == 0) {
-      @return 90;
-    } @else {
-      @return 315;
-    }
-  } @elseif ($x lt 0) {
-    @if ($y gt 0) {
-      @return 135;
-    } @elseif ($y == 0) {
-      @return 270;
-    } @else {
-      @return 225;
-    }
-  } @else {
-    @return 0;
-  }
-}
+@mixin _zero { margin:0; padding:0; }
+
+// ====================
+//      functions
+// ====================
 
 // strip unit of measurement from a value
-@function numericvalue($val){
+@function numericvalue($val) {
   $unit: unit($val);
   $number: $val / ($val * 0 + 1);
   @return $number;
@@ -86,9 +101,9 @@
 
 // inline image with fallback support for IE 7-
 @mixin data-image($file) {
-  background-image:url('../images/#{$file}');       // fallback
+  background-image:url("#{$root_path}#{$images_path}#{$file}");       // fallback
   background-image:inline-image($file);             // data URI
-  *background-image:url('../images/#{$file}');      // IE7- hack
+  *background-image:url("#{$root_path}#{$images_path}#{$file}");      // IE7- hack
 }
 
 // // vertical gradient with support for IE 6-8 & 10
@@ -118,7 +133,7 @@
 }
 
 // box shadow
-@mixin drop-shadow($color:rgba(0,0,0,0.2), $blur:0, $x:0, $y:0) { // color, blur, x, y
+@mixin drop-shadow($color:rgba(0,0,0,0.2), $blur:5px, $x:2px, $y:2px) { // color, blur, x, y
   -ms-box-shadow:$x $y $blur $color; // IE10+
   @if ($x == 0 and $y == 0) { // non directional glow
     filter: Glow(color=#{ie-hex-str($color)},strength=#{numericvalue($blur)});
@@ -152,6 +167,41 @@
   box-shadow:inset $x $y $blur $color;
 }
 
+// text/UI Element states
+@mixin state($state:'disabled',$mode:normal,$color:default) {
+  @if $color == 'default' {
+    @if $state == 'disabled' {
+      $color: $disabled-color;
+    }@else if $state == 'success' {
+      $color: $success-color;
+    }@else if $state == 'warning' {
+      $color: $warning-color;
+    }@else if $state == 'error' {
+      $color: $error-color;
+    }
+  }
+  color:lighten($color, 35%);
+  @if $mode != 'textOnly' {
+  background:lighten($color, 15%);
+  border-color:$color;
+  }
+  @if $state == 'disabled' {
+  cursor:not-allowed;
+  text-decoration:none;
+  outline:none;
+    &:hover, &:focus, &:visited {
+      color:lighten($color, 35%);
+      @if $mode != 'textOnly' {
+      background:lighten($color, 15%);
+      border-color:$color;
+      }
+      cursor:not-allowed;
+      text-decoration:none;
+      outline:none;
+    }
+  }
+}
+
 // transition
 @mixin transition($transition:all 0.2s) {
   -ms-transition:$transition; // IE10+
@@ -171,7 +221,7 @@
 }
 
 // rotate
-@mixin rotate($deg:0deg){
+@mixin rotate($deg:0deg) {
   -ms-transform:rotate($deg); // IE10+
   -o-transform:rotate($deg); // Opera
   -moz-transform:rotate($deg); // Firefox
@@ -179,8 +229,20 @@
   transform:rotate($deg);
 }
 
+// spin
+@mixin spin($count:infinite,$speed:2s,$easing:linear) {
+  -moz-animation: spin $speed $easing;
+  -moz-animation-iteration-count: $count;
+  -o-animation: spin $speed $easing;
+  -o-animation-iteration-count: $count;
+  -webkit-animation: spin $speed $easing;
+  -webkit-animation-iteration-count: $count;
+  animation: spin $speed $easing;
+  animation-iteration-count: $count;
+}
+
 // scale
-@mixin scale($scale:0){
+@mixin scale($scale:0) {
   -ms-transform:scale($scale); // IE10+
   -o-transform:scale($scale); // Opera
   -moz-transform:scale($scale); // Firefox
@@ -189,7 +251,7 @@
 }
 
 // translate
-@mixin translate($x:0, $y:0){
+@mixin translate($x:0, $y:0) {
   -ms-transform:translate($x,$y); // IE10+
   -o-transform:translate($x,$y); // Opera
   -moz-transform:translate($x,$y); // Firefox
@@ -198,7 +260,7 @@
 }
 
 // transform (translate, rotate & scale)
-@mixin transform($x:0, $y:0, $scale:0, $deg:0deg){
+@mixin transform($x:0, $y:0, $scale:0, $deg:0deg) {
   -ms-transform:translate($x,$y) rotate($deg) scale($scale); // IE10+
   -o-transform:translate($x,$y) rotate($deg) scale($scale); // Opera
   -moz-transform:translate($x,$y) rotate($deg) scale($scale); // Firefox
@@ -207,7 +269,7 @@
 }
 
 // transform origin
-@mixin transform-origin($x:0, $y:0){
+@mixin transform-origin($x:0, $y:0) {
   -ms-transform-origin:$x $y; // IE10+
   -o-transform-origin:$x $y; // Opera
   -moz-transform-origin:$x $y; // Firefox

data/vendor/assets/stylesheets/groundworkcss-scss/_modals.scss

@@ -29,7 +29,7 @@
     visibility:visible;
     opacity:1;
   }
-  div.modal.active {
+  div.modal.active, div[role=dialog].active {
     visibility:visible;
     opacity:1;
     z-index:999;
@@ -51,7 +51,7 @@
   @include gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.9));
 }
 
-div.modal {
+div.modal, div[role=dialog] {
   visibility:hidden;
   opacity:0;
   position:fixed;

data/vendor/assets/stylesheets/groundworkcss-scss/_navigation.scss

@@ -5,7 +5,20 @@
 
 
 
-nav {
+%menu-closed {
+  display:none;
+}
+%menu-open {
+  display:block;
+}
+
+.nav {
+  @extend %clear;
+  &:not(.inline) {
+    > ul:not(.row) {
+      display:inline-block;
+    }
+  } 
   ul {
     display:block;
     list-style:none;
@@ -14,30 +27,23 @@ nav {
     li {
       display:block;
       position:relative;
-      &.on {
-        > a, > a:visited {
-          background:$button-active;
-          text-decoration:none;
-        }
-      }
       a, a:visited {
         display:block;
         width:100%;
         word-wrap:break-word;
         padding:0.25em 1em;
         background:$button-color;
-        border:1px solid $border-color;
+        border-top:1px solid $button-active;
         color:$button-text;
         font-weight:bold;
         font-size:1em;
         text-decoration:none;
-        text-align:center;
         cursor:pointer;
         line-height:1.5;
         @include transition(background-color 0.25s ease-out);
         &:hover, &:focus {
           background:$button-active;
-          border:1px solid $border-color;
+          color:$button-text;
           text-decoration:none;
         }
         &.active {
@@ -45,36 +51,49 @@ nav {
             background:$button-active;
           }
         }
+        &.disabled {
+          @include state(disabled,normal,desaturate($button-color,20%));
+        }
+      }
+      &:first-child {
+        a, a:visited {
+          border-top:none;
+        }
       }
       &.menu {
-        > a {
+        &.disabled {
+          > a, > a:visited {
+            @include state(disabled,normal,desaturate($button-color,20%));
+          }
+        }
+        > a, > a:visited {
           &:after {
-            content:'\f0d7'; // \f0c9
-            display: inline-block;
-            width: 1.1em;
+            content:'\f0d7';
+            display:inline-block;
+            width:1.1em;
             margin-left:0.25em;
-            font-family: FontAwesome;
-            font-weight: normal;
-            font-style: normal;
+            font-family:FontAwesome;
+            font-weight:normal;
+            font-style:normal;
             font-size:1.1em;
-            text-decoration: inherit;
-            -webkit-font-smoothing: antialiased;
-            line-height: normal;
-            vertical-align: baseline;
-            background-image: none;
-            background-position: 0% 0%;
-            background-repeat: repeat;
-            margin-top: 0;
+            text-decoration:inherit;
+            -webkit-font-smoothing:antialiased;
+            line-height:normal;
+            vertical-align:baseline;
+            background-image:none;
+            background-position:0% 0%;
+            background-repeat:repeat;
+            margin-top:0;
           }
         }
-      }
-      &.on {
-        a {
-          border-bottom-right-radius:0 !important;
-          border-bottom-left-radius:0 !important;
-        }
-        ul {
-          display:block !important;
+        &.on {
+          > a, > a:visited {
+            background:$button-active;
+            text-decoration:none;
+          }
+          > ul {
+            @extend %menu-open;
+          }
         }
       }
       &:first-child {
@@ -87,30 +106,46 @@ nav {
           @include rounded(0 0 $radius $radius);
         }
       }
+      &:only-child {
+        a, a:visited {
+          @include rounded($radius);
+        }
+      }
     }
     ul {
-      display:none;
+      @extend %menu-closed;
       position:absolute;
       left:100%;
-      top:-1px;
+      top:0;
       width:auto;
       z-index:101;
       li {
         a, a:visited {
-          @include rounded(0 !important);
+          @include rounded(0);
+          border:none;
+          border-top:1px solid $button-color;
           background:lighten($button-color, 5%);
           &:hover, &:active {
             background:lighten($button-active, 5%);
           }
+          &.disabled {
+            @include state(disabled,normal,desaturate(lighten($button-color, 5%),20%));
+          }
         }
         &:first-child {
           a, a:visited {
-            @include rounded(0 $radius 0 0 !important);
+            border-top:none;
+            @include rounded(0 $radius 0 0);
           }
         }
         &:last-child {
           a, a:visited {
-            @include rounded(0 0 $radius $radius !important);
+            @include rounded(0 0 $radius $radius);
+          }
+        }
+        &:only-child {
+          a, a:visited {
+            @include rounded(0 $radius $radius 0);
           }
         }
       }
@@ -119,10 +154,13 @@ nav {
     &.row {
       li {
         a, a:visited {
+          border-left:1px solid $button-active;
+          border-top:none;
           @include rounded(0);
         }
         &:first-child {
           a, a:visited {
+            border-left:none;
             @include rounded($radius 0 0 $radius);
           }
         }
@@ -131,9 +169,14 @@ nav {
             @include rounded(0 $radius $radius 0);
           }
         }
+        &:only-child {
+          a, a:visited {
+            @include rounded($radius);
+          }
+        }
       }
       ul {
-        display:none;
+        @extend %menu-closed;
         position:absolute;
         left:auto;
         top:auto;
@@ -141,38 +184,41 @@ nav {
         z-index:101;
         li {
           a, a:visited {
-            @include rounded(0 !important);
+            @include rounded(0);
+            border-left:none;
+            border-top:1px solid $button-active;
+          }
+          &:first-child {
+            a, a:visited {
+              @include rounded(0);
+            }
           }
           &:last-child {
             a, a:visited {
-              @include rounded(0 0 $radius $radius !important);
+              @include rounded(0 0 $radius $radius);
             }
           }
         }
       }
     }
   }
-  &:after {
-    content:'';
-    display:block;
-    clear:both;
-  }
   // horizontal inline navigation
   &.inline {
     width:auto;
     ul {
       font-size:0;
-      @include rounded($radius);
       li {
         font-size:$font-size;
         display:inline-block;
         white-space-collapse:discard;
         float:none;
         a, a:visited {
-
+          border-left:1px solid $button-active;
+          border-top:none;
         }
         &:first-child {
           a, a:visited {
+            border-left:none;
             @include rounded($radius 0 0 $radius);
           }
         }
@@ -181,8 +227,14 @@ nav {
             @include rounded(0 $radius $radius 0);
           }
         }
+        &:only-child {
+          a, a:visited {
+            @include rounded($radius);
+          }
+        }
         ul {
-          display:none;
+          @extend %menu-closed;
+          // display:none;
           position:absolute;
           left:auto;
           top:auto;
@@ -191,11 +243,18 @@ nav {
           li {
             display:block;
             a, a:visited {
-              @include rounded(0 !important);
+              @include rounded(0);
+              border-left:none;
+              border-top:1px solid $button-active;
+            }
+            &:first-child {
+              a, a:visited {
+                @include rounded(0);
+              }
             }
             &:last-child {
               a, a:visited {
-                @include rounded(0 0 $radius $radius !important);
+                @include rounded(0 0 $radius $radius);
               }
             }
           }
@@ -203,87 +262,85 @@ nav {
       }
     }
   }
-  // pagination
-  &.pagination {
-    ul {
-      margin:10px auto;
-      display:block;
-      list-style-type:none;
-      text-align:center;
-      li {
-        display:inline-block;
-        @include rounded(4px);
-        padding:0 3px 0 2px;
-        min-width:29px;
+  // hamburger menu
+  &.menu {
+    .menu-toggle {
+      @extend .button;
+      display:none !important;
+    }
+  }
+}
+// pagination
+.pagination {
+  ul {
+    margin:10px auto;
+    display:block;
+    list-style-type:none;
+    li {
+      display:inline-block;
+      @include rounded($radius);
+      padding:0 3px 0 2px;
+      min-width:29px;
+      a {
+        display:block;
+        background:$button-color;
+        font-size:1em;
+        line-height:1.5;
+        font-weight:bold;
+        color:$button-text;
+        text-decoration:none;
         text-align:center;
-        a {
-          display:block;
-          font-size:1em;
-          line-height:1.5;
-          font-weight:bold;
+        padding:0 3px;
+        @include rounded(4px);
+        &:hover, &:focus {
+          background:$button-active;
           color:$button-text;
-          text-decoration:none;
-          padding:0 3px;
-          @include rounded(4px);
-          &:hover, &:focus {
-            background:$button-active;
-            color:$button-text;
-          }
         }
-        &.active {
-          a {
-            background:lighten(gray, 15%);
-            border-color:gray;
-            color:lighten(gray, 35%);
-            text-decoration:none;
-            &:hover, &:focus {
-              background:lighten(gray, 15%);
-              border-color:gray;
-              color:lighten(gray, 35%);
-            }
-          }
+        &.disabled {
+          @include state(disabled,normal,desaturate($button-color,20%));
         }
-        &.prev, &.next {
-          a {
-            padding:0 4px;
-            background:$button-color;
-            color:#fff;
-            &:hover, &:focus {
-              background:$button-active;
-            }
-          }
+      }
+      &.active {
+        a {
+          @include state(disabled,normal,desaturate($button-color,20%));
         }
-        &.disabled {
-          a {
-            background:lighten(gray, 15%);
-            border-color:gray;
-            color:lighten(gray, 35%);
-            text-decoration:none;
-            &:hover, &:focus {
-              background:lighten(gray, 15%);
-              border-color:gray;
-              color:lighten(gray, 35%);
-            }
+      }
+      &.prev, &.next {
+        a {
+          padding:0 4px;
+          background:$button-color;
+          color:#fff;
+          &:hover, &:focus {
+            background:$button-active;
           }
         }
-        &:first-child {
-          a, a:visited {
-            @include rounded($radius);
-          }
+      }
+      &.disabled {
+        a {
+          @include state(disabled,normal,desaturate($button-color,20%));
         }
-        &:last-child {
-          a, a:visited {
-            @include rounded($radius);
-          }
+      }
+      &:first-child {
+        a, a:visited {
+          @include rounded($radius);
+        }
+      }
+      &:last-child {
+        a, a:visited {
+          @include rounded($radius);
         }
       }
     }
   }
 }
 .no-js {
-  nav {
+  .nav {
     ul {
       li.menu {
+        ul {
+          @extend %menu-open;
+          display:none;
+        }
         &:hover, &:focus {
           ul {
             display:block !important;