skyframe 0.0.1.beta

data/templates/project/partials/mods/_mod-form.scss

@@ -0,0 +1,319 @@
+@import '../plugins/validation-engine';
+/* ===========================================================================
+   Forms - H5BP Normalize bits
+   ======================================================================== */
+/*
+ * Corrects margin displayed oddly in IE6/7.
+ */
+
+form {
+    margin: 0;
+}
+
+/*
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    padding:0;
+    border: none;
+    //margin: 0 2px;
+    //padding: 0.35em 0.625em 0.75em;
+}
+
+/*
+ * 1. Corrects color not being inherited in IE6/7/8/9.
+ * 2. Corrects text not wrapping in FF3.
+ * 3. Corrects alignment displayed oddly in IE6/7.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0;
+    white-space: normal; /* 2 */
+    *margin-left: -7px; /* 3 */
+}
+
+/*
+ * 1. Corrects font size not being inherited in all browsers.
+ * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome.
+ * 3. Improves appearance and consistency in all browsers.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%; /* 1 */
+    margin: 0; /* 2 */
+    vertical-align: baseline; /* 3 */
+    *vertical-align: middle; /* 3 */
+}
+
+/*
+ * Addresses FF3/4 setting `line-height` on `input` using `!important` in the
+ * UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/*
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Corrects inability to style clickable `input` types in iOS.
+ * 3. Improves usability and consistency of cursor style between image-type
+ *    `input` and others.
+ * 4. Removes inner spacing in IE7 without affecting normal text inputs.
+ *    Known issue: inner spacing remains in IE6.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+    *overflow: visible;  /* 4 */
+}
+
+/*
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+input[disabled] {
+    cursor: default;
+}
+
+/*
+ * 1. Addresses box sizing set to content-box in IE8/9.
+ * 2. Removes excess padding in IE8/9.
+ * 3. Removes excess padding in IE7.
+ *    Known issue: excess padding remains in IE6.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+    *height: 13px; /* 3 */
+    *width: 13px; /* 3 */
+}
+
+/*
+ * 1. Addresses `appearance` set to `searchfield` in S5, Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz`
+ *    to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/*
+ * Removes inner padding and search cancel button in S5, Chrome on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/*
+ * Removes inner padding and border in FF3+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * 1. Removes default vertical scrollbar in IE6/7/8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+    resize: vertical;
+}
+
+
+
+/*----------------------------------------------------------------------------
+888888 Yb  dP 888888 888888 88b 88 8888b.  
+88__    YbdP    88   88__   88Yb88  8I  Yb 
+88""    dPYb    88   88""   88 Y88  8I  dY 
+888888 dP  Yb   88   888888 88  Y8 8888Y"  
+------------------------------------------------------------------------------
+  Extend classes. These are classes should not in your HTML markup. 
+  These class should be reused in this module for neatness.  
+----------------------------------------------------------------------------*/
+
+
+/*----------------------------------------------------------------------------
+8888b.  888888 888888    db    88   88 88     888888     .dP"Y8 888888 Yb  dP 88     888888 .dP"Y8 
+ 8I  Yb 88__   88__     dPYb   88   88 88       88       `Ybo."   88    YbdP  88     88__   `Ybo." 
+ 8I  dY 88""   88""    dP__Yb  Y8   8P 88  .o   88       o.`Y8b   88     8P   88  .o 88""   o.`Y8b 
+8888Y"  888888 88     dP""""Yb `YbodP' 88ood8   88       8bodP'   88    dP    88ood8 888888 8bodP' 
+------------------------------------------------------------------------------
+  Default style
+----------------------------------------------------------------------------*/
+/* ===========================================================================
+   Forms
+   ======================================================================== */
+.mod-form{
+  padding :$lh-px;    
+  padding:$lh-rem;
+
+  background:$col-light-gray;
+
+  h2,fieldset{
+    /*
+    padding-left:$lh-px;
+    padding-left:$lh-rem;
+    padding-right:$lh-px;
+    padding-right:$lh-rem;    
+    */
+  }
+
+}
+
+fieldset{
+  @include vr-ma();
+  //background:yellow;
+}
+
+label{
+  display:block;
+  //@include vr-ma();
+}
+input{
+ @include inline-block; 
+ 
+}
+
+input[type=text],
+input[type=email],
+input[type=search],
+input[type=tel],
+input[type=password],
+select,
+textarea{
+ width:100%; 
+ @include input-style();
+ //@include fz(16px,1);
+
+ //@include box-sizing(border-box);
+ //border:1px solid $col-dark-gray;
+}
+
+
+button,
+input[type="submit"]{
+  @include button-style;
+}
+
+
+.lt-ie9{
+  input[type=text],
+  input[type=email],
+  input[type=search],
+  input[type=tel],
+  input[type=password],
+  select,
+  textarea{
+   //width:90%; 
+   //padding:4%;
+   //background:$col-light-gray;
+  }
+}
+
+
+
+/*----------------------------------------------------------------------------
+8b    d8 888888 8888b.  88    db         dP"Yb  88   88 888888 88""Yb Yb  dP                  8b    d8  dP"Yb  88""Yb 88 88     888888 
+88b  d88 88__    8I  Yb 88   dPYb       dP   Yb 88   88 88__   88__dP  YbdP      ________     88b  d88 dP   Yb 88__dP 88 88     88__   
+88YbdP88 88""    8I  dY 88  dP__Yb      Yb b dP Y8   8P 88""   88"Yb    8P       """"""""     88YbdP88 Yb   dP 88""Yb 88 88  .o 88""   
+88 YY 88 888888 8888Y"  88 dP""""Yb      `"YoYo `YbodP' 888888 88  Yb  dP                     88 YY 88  YbodP  88oodP 88 88ood8 888888 
+------------------------------------------------------------------------------
+  Mobile
+---------------------------------------------------------------------------*/
+@media only screen and (min-width: $mq-mob-min) and (max-width: $mq-mob-max){  
+
+
+
+
+}// /@media mob
+
+
+/*----------------------------------------------------------------------------
+8b    d8 888888 8888b.  88    db         dP"Yb  88   88 888888 88""Yb Yb  dP                  888888    db    88""Yb 88     888888 888888 
+88b  d88 88__    8I  Yb 88   dPYb       dP   Yb 88   88 88__   88__dP  YbdP      ________       88     dPYb   88__dP 88     88__     88   
+88YbdP88 88""    8I  dY 88  dP__Yb      Yb b dP Y8   8P 88""   88"Yb    8P       """"""""       88    dP__Yb  88""Yb 88  .o 88""     88   
+88 YY 88 888888 8888Y"  88 dP""""Yb      `"YoYo `YbodP' 888888 88  Yb  dP                       88   dP""""Yb 88oodP 88ood8 888888   88   
+------------------------------------------------------------------------------
+  Tablet
+----------------------------------------------------------------------------*/
+@media only screen and (min-width: $mq-tab-min) and (max-width: $mq-tab-max){  
+
+
+  input[type=text],
+  input[type=email],
+  input[type=search],
+  input[type=tel],
+  input[type=password],
+  select,
+  textarea{
+   width:75%; 
+  }
+
+
+
+}// /@media tab
+
+/*----------------------------------------------------------------------------
+8b    d8 888888 8888b.  88    db         dP"Yb  88   88 888888 88""Yb Yb  dP                  8888b.  888888 .dP"Y8 88  dP 888888  dP"Yb  88""Yb 
+88b  d88 88__    8I  Yb 88   dPYb       dP   Yb 88   88 88__   88__dP  YbdP      ________      8I  Yb 88__   `Ybo." 88odP    88   dP   Yb 88__dP 
+88YbdP88 88""    8I  dY 88  dP__Yb      Yb b dP Y8   8P 88""   88"Yb    8P       """"""""      8I  dY 88""   o.`Y8b 88"Yb    88   Yb   dP 88"""  
+88 YY 88 888888 8888Y"  88 dP""""Yb      `"YoYo `YbodP' 888888 88  Yb  dP                     8888Y"  888888 8bodP' 88  Yb   88    YbodP  88     
+------------------------------------------------------------------------------
+  Desktop
+----------------------------------------------------------------------------*/
+@media only screen and (min-width: $mq-dsk-min){
+
+
+  input[type=text],
+  input[type=email],
+  input[type=search],
+  input[type=tel],
+  input[type=password],
+  select,
+  textarea{
+   width:50%; 
+  }
+
+
+}// /@media dsk
+
+
+
+/*----------------------------------------------------------------------------
+88""Yb 888888 888888 88 88b 88    db    
+88__dP 88__     88   88 88Yb88   dPYb   
+88"Yb  88""     88   88 88 Y88  dP__Yb  
+88  Yb 888888   88   88 88  Y8 dP""""Yb 
+------------------------------------------------------------------------------
+  Retina
+----------------------------------------------------------------------------*/
+@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
+
+}

data/templates/project/partials/mods/_mod-header.scss

@@ -0,0 +1,291 @@
+/*
+------------------------------------------------------------------------------
+888888 Yb  dP 888888 888888 88b 88 8888b.  
+88__    YbdP    88   88__   88Yb88  8I  Yb 
+88""    dPYb    88   88""   88 Y88  8I  dY 
+888888 dP  Yb   88   888888 88  Y8 8888Y"  
+------------------------------------------------------------------------------
+  Extend classes. These are classes should not in your HTML markup. 
+  These class should be reused in this module for neatness.  
+------------------------------------------------------------------------------
+*/
+
+
+
+
+/*
+------------------------------------------------------------------------------
+8888b.  888888 888888    db    88   88 88     888888     .dP"Y8 888888 Yb  dP 88     888888 .dP"Y8 
+ 8I  Yb 88__   88__     dPYb   88   88 88       88       `Ybo."   88    YbdP  88     88__   `Ybo." 
+ 8I  dY 88""   88""    dP__Yb  Y8   8P 88  .o   88       o.`Y8b   88     8P   88  .o 88""   o.`Y8b 
+8888Y"  888888 88     dP""""Yb `YbodP' 88ood8   88       8bodP'   88    dP    88ood8 888888 8bodP' 
+------------------------------------------------------------------------------
+  Default style
+------------------------------------------------------------------------------
+*/
+
+/* =============================================================================
+   Header
+   ========================================================================== */
+.mod-header{
+  padding: (($base-line-height/$base-font-size)+em) 0;
+}
+
+/* =============================================================================
+   Logo
+   ========================================================================== */
+.hdr-logo{
+  display:block;
+  background:transparent url(../img/logo.png) 50% 100% no-repeat;
+  @include background-size(contain);  
+  height:$logo-height+px;
+  @include vr-mb;
+
+  img{ display:none; }
+
+}
+
+
+
+/* =============================================================================
+   Search
+   ========================================================================== */
+.mod-site-search{
+  @include legacy-pie-clearfix;
+
+  fieldset{ 
+    margin:0; 
+    border:1px solid $col-dark-gray;
+    @include border-radius(5px);
+    &:hover{ 
+      border: 1px solid darken($col-dark-gray, 20%)  
+    }
+  }
+
+  .site-search-label{}
+  .site-search-input{
+    float:left;
+    @include border-radius(5px);
+    border:none;
+    -webkit-appearance:none;
+    padding-left:5px;
+    outline:none;
+    width: 100%;
+    &:hover,
+    &:focus{
+      border:none;
+    }
+
+  }
+  /*
+  .site-search-button{
+    float:left;
+    @include border-radius(0 5px 5px 0);
+    border:none;
+    padding:0;
+    margin:0;
+    line-height:1.5em;
+
+
+    background:$col-light-gray url(../img/icon-search.png) 50% 50% no-repeat;
+    @include background-size(contain);  
+    width: 20%;
+
+    -webkit-appearance:none;    
+    
+    span{      
+      @extend .ir;
+      font-size:16px;
+    }
+  }
+  */
+
+}
+
+/* =============================================================================
+   < IE8 
+   ========================================================================== */
+.lt-ie8{
+  .site-search-input{ 
+    padding-left:0; 
+    padding-right:0; 
+  }
+  .site-search-button{
+    //padding:0; 
+  }
+}
+
+/* =============================================================================
+   Header Nav
+   ========================================================================== */
+.hdr-nav{
+  @include horizontal-list;
+  li{
+    //@include fz(12px, 1);
+    //margin-top:0;
+  }
+}
+
+/*
+------------------------------------------------------------------------------
+8b    d8 888888 8888b.  88    db         dP"Yb  88   88 888888 88""Yb Yb  dP                  8b    d8  dP"Yb  88""Yb 88 88     888888 
+88b  d88 88__    8I  Yb 88   dPYb       dP   Yb 88   88 88__   88__dP  YbdP      ________     88b  d88 dP   Yb 88__dP 88 88     88__   
+88YbdP88 88""    8I  dY 88  dP__Yb      Yb b dP Y8   8P 88""   88"Yb    8P       """"""""     88YbdP88 Yb   dP 88""Yb 88 88  .o 88""   
+88 YY 88 888888 8888Y"  88 dP""""Yb      `"YoYo `YbodP' 888888 88  Yb  dP                     88 YY 88  YbodP  88oodP 88 88ood8 888888 
+------------------------------------------------------------------------------
+  Mobile
+------------------------------------------------------------------------------
+*/
+@media only screen and (min-width: $mq-mob-min) and (max-width: $mq-mob-max){  
+
+  /* =============================================================================
+     Comment
+     ========================================================================== */
+  .hdr-logo{
+    //background:red url(../img/skyframe-logo@2x.png) 0 0 no-repeat;
+  }
+
+  .mod-site-search{
+    
+    .site-search-label{}
+    .site-search-input{ 
+
+    }
+    .site-search-button{
+      span{
+
+      }
+    }
+  }
+
+
+
+
+  .hdr-nav{
+    display:none;
+  }
+
+}// /@media mob
+
+
+/*
+------------------------------------------------------------------------------
+8b    d8 888888 8888b.  88    db         dP"Yb  88   88 888888 88""Yb Yb  dP                  888888    db    88""Yb 88     888888 888888 
+88b  d88 88__    8I  Yb 88   dPYb       dP   Yb 88   88 88__   88__dP  YbdP      ________       88     dPYb   88__dP 88     88__     88   
+88YbdP88 88""    8I  dY 88  dP__Yb      Yb b dP Y8   8P 88""   88"Yb    8P       """"""""       88    dP__Yb  88""Yb 88  .o 88""     88   
+88 YY 88 888888 8888Y"  88 dP""""Yb      `"YoYo `YbodP' 888888 88  Yb  dP                       88   dP""""Yb 88oodP 88ood8 888888   88   
+------------------------------------------------------------------------------
+  Tablet
+------------------------------------------------------------------------------
+*/
+@media only screen and (min-width: $mq-tab-min) and (max-width: $mq-tab-max){  
+
+  /* =============================================================================
+     Header
+     ========================================================================== */
+
+  .mod-header{
+    //background:#dedede;
+    @include legacy-pie-clearfix;
+  }
+
+  .hdr-logo{}
+
+  .mod-site-search{
+    width:50%;
+    float:left;
+
+      .site-search-label{}
+      .site-search-input{}
+      .site-search-button{}    
+  }
+
+  .hdr-nav{
+    width:50%;
+    float:right;
+    //background:orange;
+    display:block;
+    text-align:right;
+    li{
+      float:right;
+      margin-left:$lh-px;
+      margin-left:$lh-rem;
+    }
+  }
+
+}// /@media tab
+
+/*
+------------------------------------------------------------------------------
+8b    d8 888888 8888b.  88    db         dP"Yb  88   88 888888 88""Yb Yb  dP                  8888b.  888888 .dP"Y8 88  dP 888888  dP"Yb  88""Yb 
+88b  d88 88__    8I  Yb 88   dPYb       dP   Yb 88   88 88__   88__dP  YbdP      ________      8I  Yb 88__   `Ybo." 88odP    88   dP   Yb 88__dP 
+88YbdP88 88""    8I  dY 88  dP__Yb      Yb b dP Y8   8P 88""   88"Yb    8P       """"""""      8I  dY 88""   o.`Y8b 88"Yb    88   Yb   dP 88"""  
+88 YY 88 888888 8888Y"  88 dP""""Yb      `"YoYo `YbodP' 888888 88  Yb  dP                     8888Y"  888888 8bodP' 88  Yb   88    YbodP  88     
+------------------------------------------------------------------------------
+  Desktop
+------------------------------------------------------------------------------
+*/
+@media only screen and (min-width: $mq-dsk-min){
+
+  /* =============================================================================
+     Header
+     ========================================================================== */
+  .mod-header{
+    @include legacy-pie-clearfix;
+    position:relative;
+    padding-bottom:0;
+  }
+
+    .hdr-logo{
+      float:left;
+      width:$logo-width + px;
+    }
+
+    .mod-site-search{      
+      position: absolute;
+      right:0;
+      top:$lh-px * 3;
+      width: columns(3,12);
+
+        fieldset{}
+          .site-search-label{}
+          .site-search-input{}
+          .site-search-button{}    
+    }// /.mod-site-search
+
+    .hdr-nav{
+      display:block;
+      float:right;
+    }
+
+}// /@media dsk
+
+
+
+/*
+------------------------------------------------------------------------------
+88""Yb 888888 888888 88 88b 88    db    
+88__dP 88__     88   88 88Yb88   dPYb   
+88"Yb  88""     88   88 88 Y88  dP__Yb  
+88  Yb 888888   88   88 88  Y8 dP""""Yb 
+------------------------------------------------------------------------------
+  Retina
+------------------------------------------------------------------------------
+*/
+
+//only screen and (max--moz-device-pixel-ratio: $pixel-ratio-min),
+//only screen and (-o-min-device-pixel-ratio: 2/1 ),
+@media only screen and (-webkit-min-device-pixel-ratio: $pixel-ratio-min), 
+       only screen and (min-device-pixel-ratio: $pixel-ratio-min)  {
+
+  body{
+    //background:orange;
+  }
+
+  .hdr-logo{
+    background:transparent url(../img/logo@2x.png) 0 100% no-repeat;
+    //@include background-size(contain);  
+  }
+
+
+}