compass-inuit 4.5.5.1 → 5.0.1

data/stylesheets/compass-inuit/generic/_pull.scss

@@ -5,11 +5,6 @@
  * Pull classes, to move grid items over to the right by certain amounts.
  */
 
-/**
- * Not a particularly great selector, but the DRYest way to do things.
- */
-[class*="pull--"]{ position:relative; }
-
 @mixin pull-setup($namespace: "") {
 
     /**
@@ -100,24 +95,53 @@
     .pull--#{$namespace}eleven-twelfths     { right:91.666%; }
 }
 
+@if $pull == true{
+
+/**
+ * Not a particularly great selector, but the DRYest way to do things.
+ */
+[class*="pull--"]{ position:relative; }
+
 @include pull-setup();
 
-@if $responsive-pull == true{
+@if $palm-pull == true{
+
+    @include media-query(palm){
+        @include pull-setup("palm-");
+    }
 
-@include media-query(palm){
-    @include pull-setup("palm-");
 }
 
-@include media-query(lap){
-    @include pull-setup("lap-");
+@if $lap-pull == true{
+
+    @include media-query(lap){
+        @include pull-setup("lap-");
+    }
+
 }
 
-@include media-query(portable){
-    @include pull-setup("portable-");
+@if $lap-and-up-pull == true{
+
+    @include media-query(lap-and-up){
+        @include pull-setup("lap-and-up-");
+    }
+
 }
 
-@include media-query(desk){
-    @include pull-setup("desk-");
+@if $portable-pull == true{
+
+    @include media-query(portable){
+        @include pull-setup("portable-");
+    }
+
+}
+
+@if $desk-pull == true{
+
+    @include media-query(desk){
+        @include pull-setup("desk-");
+    }
+
 }
 
-} /* endif */
+}//endif

data/stylesheets/compass-inuit/generic/_push.scss

@@ -5,11 +5,6 @@
  * Push classes, to move grid items over to the right by certain amounts.
  */
 
-/**
- * Not a particularly great selector, but the DRYest way to do things.
- */
-[class*="push--"]{ position:relative; }
-
 @mixin push-setup($namespace: "") {
 
     /**
@@ -100,24 +95,53 @@
     .push--#{$namespace}eleven-twelfths     { left:91.666%; }
 }
 
+@if $push == true{
+
 @include push-setup();
 
-@if $responsive-push == true{
+/**
+ * Not a particularly great selector, but the DRYest way to do things.
+ */
+[class*="push--"]{ position:relative; }
+
+@if $palm-push == true{
+
+    @include media-query(palm){
+        @include push-setup("palm-");
+    }
 
-@include media-query(palm){
-    @include push-setup("palm-");
 }
 
-@include media-query(lap){
-    @include push-setup("lap-");
+@if $lap-push == true{
+
+    @include media-query(lap){
+        @include push-setup("lap-");
+    }
+
 }
 
-@include media-query(portable){
-    @include push-setup("portable-");
+@if $lap-and-up-push == true{
+
+    @include media-query(lap-and-up){
+        @include push-setup("lap-and-up-");
+    }
+
 }
 
-@include media-query(desk){
-    @include push-setup("desk-");
+@if $portable-push == true{
+
+    @include media-query(portable){
+        @include push-setup("portable-");
+    }
+
+}
+
+@if $desk-push == true{
+
+    @include media-query(desk){
+        @include push-setup("desk-");
+    }
+
 }
 
-} /* endif */
+}//endif

data/stylesheets/compass-inuit/generic/_reset.scss

@@ -2,13 +2,13 @@
     $RESET
 \*------------------------------------*/
 /**
- * A more considered reset; more of a restart... 
+ * A more considered reset; more of a restart...
  * As per: csswizardry.com/2011/10/reset-restarted
  */
 
 @if $global-border-box == true{
     /**
-    * Let’s make the box model all nice, shall we…?
+    * Let’s make the box model all nice, shall we...?
     */
     *{
         &,
@@ -42,7 +42,7 @@ abbr[title],dfn[title]{
 /**
  * Remove underlines from potentially troublesome elements.
  */
-a,u,ins{
+u,ins{
     text-decoration:none;
 }
 

data/stylesheets/compass-inuit/generic/_shared.scss

@@ -24,7 +24,7 @@ pre,
 .islet{
     margin-bottom:$base-spacing-unit;
     margin-bottom:($base-spacing-unit / $base-font-size)*1rem;
-    
+
     .islet &{
         margin-bottom:$base-spacing-unit / 2;
         margin-bottom:(($base-spacing-unit / $base-font-size) / 2)*1rem;

data/stylesheets/compass-inuit/generic/_widths.scss

@@ -105,7 +105,7 @@
 
 /**
  * If you have set `$responsive` to ‘true’ in `_vars.scss` then you now have
- * access to these classes. You can define at which breakpoing you’d like an
+ * access to these classes. You can define at which breakpoint you’d like an
  * element to be a certain size, e.g.:
  *
  * `<div class="g  one-quarter  lap-one-half  palm-one-whole"> ... </div>`
@@ -128,6 +128,10 @@
     @include grid-setup("lap-");
 }
 
+@include media-query(lap-and-up){
+    @include grid-setup("lap-and-up-");
+}
+
 @include media-query(portable){
     @include grid-setup("portable-");
 }
@@ -146,7 +150,7 @@
 @if $responsive-extra == true{
 
 @include media-query(desk-wide){
-    @include grid-setup("deskwide-");
+    @include grid-setup("desk-wide-");
 }
 
 }

data/stylesheets/compass-inuit/objects/_arrows.scss

@@ -1,3 +1,5 @@
+@if $use-arrows == true{
+
 /*------------------------------------*\
     $ARROWS
 \*------------------------------------*/
@@ -17,7 +19,7 @@ $arrow:                 $arrow-size - $arrow-border;
  */
 %arrow{
     position:relative;
-    
+
     &:before,
     &:after{
         content:"";
@@ -38,7 +40,7 @@ $arrow:                 $arrow-size - $arrow-border;
  */
 %arrow--top{
     @extend %arrow;
-    
+
     &:before,
     &:after{
         bottom:100%;
@@ -47,7 +49,7 @@ $arrow:                 $arrow-size - $arrow-border;
 
 %arrow--upper{
     @extend %arrow;
-    
+
     &:before{
         top:$arrow;
     }
@@ -71,7 +73,7 @@ $arrow:                 $arrow-size - $arrow-border;
 
 %arrow--lower{
     @extend %arrow;
-    
+
     &:before{
         bottom:$arrow;
     }
@@ -82,7 +84,7 @@ $arrow:                 $arrow-size - $arrow-border;
 
 %arrow--bottom{
     @extend %arrow;
-    
+
     &:before,
     &:after{
         top:100%;
@@ -91,7 +93,7 @@ $arrow:                 $arrow-size - $arrow-border;
 
 %arrow--near{
     @extend %arrow;
-    
+
     &:before,
     &:after{
         right:100%;
@@ -100,7 +102,7 @@ $arrow:                 $arrow-size - $arrow-border;
 
 %arrow--left{
     @extend %arrow;
-    
+
     &:before{
         left:$arrow;
     }
@@ -111,7 +113,7 @@ $arrow:                 $arrow-size - $arrow-border;
 
 %arrow--center{
     @extend %arrow;
-    
+
     &:before,
     &:after{
         left:50%;
@@ -124,7 +126,7 @@ $arrow:                 $arrow-size - $arrow-border;
 
 %arrow--right{
     @extend %arrow;
-    
+
     &:before{
         right:$arrow;
     }
@@ -135,9 +137,11 @@ $arrow:                 $arrow-size - $arrow-border;
 
 %arrow--far{
     @extend %arrow;
-    
+
     &:before,
     &:after{
         left:100%;
     }
 }
+
+}//endif

data/stylesheets/compass-inuit/objects/_beautons.scss

@@ -0,0 +1,226 @@
+@if $use-beautons == true{
+
+/*------------------------------------*\
+    $BEAUTONS.CSS
+\*------------------------------------*/
+/**
+ * beautons is a beautifully simple button toolkit.
+ *
+ * LICENSE
+ * 
+ * Copyright 2013 Harry Roberts
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ * http://apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * 
+ */
+
+
+/*!*
+ * 
+ * @csswizardry -- csswizardry.com/beautons
+ * 
+ */
+
+
+
+
+
+/*------------------------------------*\
+    $BASE
+\*------------------------------------*/
+/**
+ * Base button styles.
+ *
+ * 1. Allow us to better style box model properties.
+ * 2. Line different sized buttons up a little nicer.
+ * 3. Stop buttons wrapping and looking broken.
+ * 4. Make buttons inherit font styles.
+ * 5. Force all elements using beautons to appear clickable.
+ * 6. Normalise box model styles.
+ * 7. If the button’s text is 1em, and the button is (3 * font-size) tall, then
+ *    there is 1em of space above and below that text. We therefore apply 1em
+ *    of space to the left and right, as padding, to keep consistent spacing.
+ * 8. Basic cosmetics for default buttons. Change or override at will.
+ * 9. Don’t allow buttons to have underlines; it kinda ruins the illusion.
+ */
+.btn{
+    display:inline-block;       /* [1] */
+    vertical-align:middle;      /* [2] */
+    white-space:nowrap;         /* [3] */
+    font-family:inherit;        /* [4] */
+    font-size:100%;             /* [4] */
+    cursor:pointer;             /* [5] */
+    border:none;                /* [6] */
+    margin:0;                   /* [6] */
+    padding-top:   0;           /* [6] */
+    padding-bottom:0;           /* [6] */
+    line-height:3;              /* [7] */
+    padding-right:1em;          /* [7] */
+    padding-left: 1em;          /* [7] */
+    border-radius:$brand-round; /* [8] */
+}
+
+.btn{
+
+    &,
+    &:hover{
+        text-decoration:none;   /* [9] */
+    }
+
+    &:active,
+    &:focus{
+        outline:none;
+    }
+}
+
+
+
+
+
+/*------------------------------------*\
+    $SIZES
+\*------------------------------------*/
+/**
+ * Button size modifiers.
+ *
+ * These all follow the same sizing rules as above; text is 1em, space around it
+ * remains uniform.
+ */
+.btn--small{
+    padding-right:0.5em;
+    padding-left: 0.5em;
+    line-height:2;
+}
+
+.btn--large{
+    padding-right:1.5em;
+    padding-left: 1.5em;
+    line-height:4;
+}
+
+.btn--huge{
+    padding-right:2em;
+    padding-left: 2em;
+    line-height:5;
+}
+
+/**
+ * These buttons will fill the entirety of their container.
+ *
+ * 1. Remove padding so that widths and paddings don’t conflict.
+ */
+.btn--full{
+    width:100%;
+    padding-right:0;            /* [1] */
+    padding-left: 0;            /* [1] */
+    text-align:center;
+}
+
+
+
+
+
+/*------------------------------------*\
+    $FONT-SIZES
+\*------------------------------------*/
+/**
+ * Button font-size modifiers.
+ */
+.btn--alpha{
+    font-size:3rem;
+}
+
+.btn--beta{
+    font-size:2rem;
+}
+
+.btn--gamma{
+    font-size:1rem;
+}
+
+/**
+ * Make the button inherit sizing from its parent.
+ */
+.btn--natural{
+    vertical-align:baseline;
+    font-size:inherit;
+    line-height:inherit;
+    padding-right:0.5em;
+    padding-left: 0.5em;
+}
+
+
+
+
+
+/*------------------------------------*\
+    $FUNCTIONS
+\*------------------------------------*/
+/**
+ * Button function modifiers.
+ */
+.btn--primary{}
+.btn--secondary{}
+.btn--tertiary{}
+
+/**
+ * Positive actions; e.g. sign in, purchase, submit, etc.
+ */
+.btn--positive{
+    background-color:#4A993E;
+    color:#fff;
+}
+
+/**
+ * Negative actions; e.g. close account, delete photo, remove friend, etc.
+ */
+.btn--negative{
+    background-color:#b33630;
+    color:#fff;
+}
+
+/**
+ * Inactive, disabled buttons.
+ * 
+ * 1. Make the button look like normal text when hovered.
+ */
+.btn--inactive,
+    .btn--inactive:hover,
+    .btn--inactive:active,
+    .btn--inactive:focus{
+        background-color:#ddd;
+        color:#777;
+        cursor:text;            /* [1] */
+    }
+
+
+
+
+
+/*------------------------------------*\
+    $STYLES
+\*------------------------------------*/
+/**
+ * Button style modifiers.
+ *
+ * 1. Use an overly-large number to ensure completely rounded, pill-like ends.
+ */
+.btn--soft{
+    border-radius:200px;        /* [1] */
+}
+
+.btn--hard{
+    border-radius:0;
+}
+
+}//endif