/* ------------------------------------------------------------------------------ 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 ------------------------------------------------------------------------------ */ .mod-header{ padding: (($base-line-height/$base-font-size)+em) 0; } .hdr-logo{ display:block; background:transparent url(../img/logo.png) 50% 100% no-repeat; @include background-size(contain); height:$logo-height+px; } .mod-site-search{ //background:orange; .site-search-label{} .site-search-input{ width:90%; padding:0; border:0; background:$col-light-gray; -webkit-appearance:none; } .site-search-button{ width:10%; padding:0; border:0; -webkit-appearance:none; } } .hdr-nav{} /* ------------------------------------------------------------------------------ 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; } .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{ float:left; width:$logo-width + px; } .mod-site-search{ //background:red; //float:right; .site-search-label{} .site-search-input{} .site-search-button{} } .hdr-nav{ display:block; text-align:right; //float:right; } }// /@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{ //background:#dedede; @include legacy-pie-clearfix; } .hdr-logo{ float:left; width:$logo-width + px; } .mod-site-search{ //background:red; //float:right; .site-search-label{} .site-search-input{} .site-search-button{} } .hdr-nav{ display:block; text-align:right; //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); } }