Skip to content

Instantly share code, notes, and snippets.

@SaintG12468

SaintG12468/less-boilerplate.less

Forked from jonaslsl/less-boilerplate.less
Created June 25, 2016 12:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SaintG12468/b214981cd90ce761acef1ecccc48d3ec to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SaintG12468/b214981cd90ce761acef1ecccc48d3ec to your computer and use it in GitHub Desktop.
Download ZIP
LESS Boilerplate
Raw
less-boilerplate.less
/*
LESS CSS BOILERPLATE
*/
@import "lesshat.less";
@import url(http://fonts.googleapis.com/css?family=Arvo:400,700);
/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h3, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
/* PATTERNS */
html {
font-size:62.5%;
-webkit-text-size-adjust: none;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
/* Prevent Mobile Browser Click Delay */
-ms-touch-action: manipulation;
touch-action: manipulation;
/* determina o tamanho máximo da tela e centraliza o site */
/*max-width: 1480px;*/
margin: 0 auto;
}
/* Prevent Mobile Browser Click Delay */
a, input, button {
-ms-touch-action: none !important;
}
@viewport {
width: device-width;
zoom: 1;
}
body {
background: #FFF; /* Old browsers */
font-family: 'Raleway', Arial, Helvetica, sans-serif;
height:100%;
font-style:normal;
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
&:hover {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
}
/* Tira o "X" dos inputs no IE */
input::-ms-clear {
display: none;
}
/* Class para centralização vertical, através de JS */
.vertical {
margin-top: auto;
top:0;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
* {
zoom: 1;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
a {
text-decoration: none;
outline: none;
color: black;
img {
border: none;
&:hover {
border: none;
}
}
}
/* AQUI COMEÇA A PADRONIZAÇÃO DO THEMA */
/* COLORS */
@gray: #999999;
@black: #000000;
@red: #ee2e24;
@white: #ffffff;
@d_red: #b20e10;
@d_red_2: #74020c;
@l_blue: #3b5998;
@blue: #00aced;
@d_green: #48be7f;
@d_gray: #b7b7b7;
@d_orange: #e31417;
@orange: #d14836;
@l_black: #313131;
@l_gray:#eeeeee;
.gray{ color: @gray; }
.black{ color: @black; }
.red{ color: @red; }
.white{ color: @white; }
.d_red { color: @d_red_2; }
.red_bkg{ background-color: @red; }
.d_red_bkg{ background-color: @d_red; }
.l_blue_bkg{ background-color: @l_blue; }
.blue_bkg{ background-color: @blue; }
.d_green_bkg{ background-color: @d_green; }
.d_gray_bkg{ background-color: @d_gray; }
.d_orange_bkg{ background-color: @d_orange; }
.orange_bkg{ background-color: @orange; }
.black_bkg{ background-color: @black; }
.l_black_bkg{ background-color: @l_black; }
.l_gray_bkg{ background-color: @l_gray; }
.white_bkg{ background-color: @white; }
/* FONTS */
/* @font-face kit by Fonts2u (http://www.fonts2u.com) */
/*@font-face {
font-family:"Mathlete-Bulky";
src:url("fonts/mathlete/Mathlete-Bulky.eot?") format("eot"),
url("fonts/mathlete/Mathlete-Bulky.woff") format("woff"),
url("fonts/mathlete/Mathlete-Bulky.ttf") format("truetype"),
url("fonts/mathlete/Mathlete-Bulky.svg#Mathlete-Bulky") format("svg");
font-weight:normal;
font-style:normal;
}*/
@main_font: "Raleway", Helvetica, Arial, sans-serif;
@sec_font: "Arvo", Helvetica, Arial, sans-serif;
@font_weight: 100;
@font_size: 1rem;
@line_height: 1rem;
h1, h2, h3, h4, h5, h6, p {
-webkit-font-smoothing: antialiased;/* Better Font Rendering =========== */
-moz-osx-font-smoothing: grayscale;/* Better Font Rendering =========== */
color: @black;
}
h1, h2, h3, h4, h6{
font-family: @main_font;
font-weight: 900;
}
h5, p, a {
font-family: @sec_font;
font-weight: normal;
}
/* quem somos */
h1{
font-size: 18px;
font-size: @font_size*1.8;
}
/*o que fazemos */
h2{
font-size: 17px;
font-size: @font_size*1.7;
text-transform: uppercase;
}
/* nomes equipe e título contato*/
h3{
font-size: 13px;
font-size: @font_size*1.3;
}
/* copyright */
h4{
font-size: 11px;
font-size: @font_size*1.1;
}
/* contato */
h5{
font-size: 14px;
font-size: @font_size*1.4;
}
/* nome profissional */
h6{
font-size: 30px;
font-size: @font_size*3.0;
}
p{
font-size: 14px;
font-size: @font_size*1.4;
}
a{
font-size: 16px;
font-size: @font_size*1.6;
line-height: 23px;
}
nav a{
font-family: @main_font;
font-weight: 900;
color: @black;
text-transform: uppercase;
}
/* ICON FONT - ICOMOON.COM */
@font-face {
font-family: 'icomoon';
src:url('fonts/icons/icomoon.eot?kn2mp9');
src:url('fonts/icons/icomoon.eot?#iefixkn2mp9') format('embedded-opentype'),
url('fonts/icons/icomoon.woff?kn2mp9') format('woff'),
url('fonts/icons/icomoon.ttf?kn2mp9') format('truetype'),
url('fonts/icons/icomoon.svg?kn2mp9#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-tw:before {
content: "\63";
}
.icon-gp:before {
content: "\64";
}
.icon-in:before {
content: "\72";
}
.icon-fb:before {
content: "\65";
}
.social{
font-size: 20px;
float: left;
margin: 0px 5px;
}
.social_wrapper{
margin: @r3 @r3 0;
}
.fb:hover{ color: @l_blue; }
.tw:hover{ color: @blue; }
.gp:hover{ color: @orange; }
.in:hover{ color: @d_orange; }
/* DEFINE OS ATRIBUTOS DE BOLD E STRONG */
.bold {
font-weight: (@font_weight * 7);
}
strong {
font-weight: (@font_weight * 7);
}
/* BOTÕES
.btn {
color: white;
text-decoration: none;
box-sizing: border-box;
padding: 10px 18px;
font-family: @main_font;
font-weight: (@font_weight * 9);
text-transform: uppercase;
font-size: 12px;
line-height: 30px;
line-height: (@line_height * 3);
letter-spacing: .05em;
text-align: left;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
[class*="i"]{
margin: 3px 0px 0px 18px;
font-size: 23px;
float: right;
color:white;
display: inline-block;
font-weight: bold;
padding: 0;
}
}
.btn-large{ width: 200px; padding: 7px 18px; }
.btn-medium{ width: 180px; }
.btn-small{ width: 150px; }
.btn-tiny{ width: 80px; }
.red_btn{
background-color: @red;
&:hover { background-color: @l_black; }
&:active{ background-color: @black; }
}
.d_red_btn{ background-color: @d_red; }
.l_blue_btn{ background-color: @l_blue; }
.blue_btn{ background-color: @blue; }
.d_green_btn{ background-color: @d_green; }
.d_gray_btn{ background-color: @d_gray; }
.d_orange_btn{ background-color: @d_orange; }
.orange_btn{ background-color: @orange; }
.black_btn{ background-color: @black; }
.l_black_btn{
background-color: @l_black;
&:hover {
background-color: @red;
}
&:active {
background-color: @d_red;
}
}
.l_gray_btn{
background-color: @l_gray;
[class*="i"]{
background-color: @red;
width: 50px;
margin: -10px -18px 0px 0px;
height: 50px;
padding: 12px;
text-align: center;
}
&:hover {
text-decoration: underline;
}
&:active {
text-decoration: underline;
color: @black;
}
}
.white_btn{
background-color: @white;
border: 3px solid @black;
color: black;
[class*="i"]{ color: black; }
&:hover {
background-color: @red;
border: 3px solid @red;
color: @white;
[class*="i"]{ color: @white; }
}
&:active{
background-color: @d_red;
border: 3px solid @d_red;
color: @white;
[class*="i"]{ color: @white; }
}
}*/
*:focus { outline:none; }
a [class*="i"]{
float: left;
padding: 0 @r3/2;
}
/* INPUTS */
input{
height: 50px;
padding-left: 18px;
border: 2px @l_gray solid;
font-family: @sec_font;
font-size: 14px;
}
input.active{
border: 2px @d_green solid;
}
input.alert{
border: 2px @red solid;
}
input.disabled{
background-color: @l_gray;
}
/* GLOBAL VARIABLES */
/* STRUCTURE - contains only structural elements like heder, footer, main_container and page_container */
@page_width: 100%;
@page_max: 1280px;
@main_width: 1280px;
@main_max_width: 1280px;
@main_padding: 10px;
@col_padding: 20px;
/* Div que engloba tudo no tamanho da tela, evita espaços brancos nas laterais */
header{
position: fixed;
z-index: 10;
background-color: @white;
width: 100%;
}
.page{
width: @page_width;
}
/* usada para limitar o tamanho do conteudo principal*/
.main{
width: @main_width;
max-width: @main_max_width;
clear: both;
min-height: 50px;
margin: auto;
box-sizing: border-box;
padding: 0px @main_padding;
}
/* bloco de conteudo principal */
.content{
width: 100%;
display: inline-block;
position: relative;
}
.row{
overflow: hidden;
clear: both;
}
.page_wrapper{
position: relative;
}
/* MENU */
@menu_transition_time: 1s;
@menu_link_padding: 11px 141px 11px 37px;
@menu_desktop_margin: 0 25px;
/* MENU MOBILE */
@menu_min_height_mobile: 100%;
@menu_width_mobile: 80%;
/* MENU TABLET */
@menu_min_height_tablet: 100%;
@menu_width_tablet: 40%;
/* MEDIA QUERIES */
@mobile_min_size: 0px;
@mobile_max_size: 520px;
@tablet_min_size: 521px;
@tablet_max_size: 960px;
@desktop_min_size: 961px;
@desktop_max_size: 1220px;
@bigdesktop_min_size: 1221px;
@mobile: ~"screen and (min-width: @{mobile_min_size}) and (max-width: @{mobile_max_size})";
@tablet: ~"screen and (min-width: @{tablet_min_size}) and (max-width: @{tablet_max_size})";
@desktop: ~"screen and (min-width: @{desktop_min_size}) and (max-width: @{desktop_max_size})";
@bigdesktop: ~"screen and (min-width: @{bigdesktop_min_size})";
/* FORM */
@form_width: 50%;
@send_btn_width: 100px;
@send_btn_height: 30px;
@input_height: 55px;
@input_margin_bottom: 12px;
@input_border_radius: 5px;
@input_border: solid 1px black;
@input_padding_left: 8px;
@box_shadow_x: 0px;
@box_shadow_y: 0px;
@box_shadow_blur: 8px;
@box_shadow_color: #FFF;
@focus_border: solid 1px black;
@textarea_height: 200px;
@textarea_padding: 10px 0px 0px 8px;
@textarea_margin: 0px 0px 5px;
/* RITMO */
@r1: 60px;
@r2: 30px;
@r3: 15px;
/* RITMO LATERAL */
@rl:15px;
/* Column */
@col_size: 144px;
.lft {
float: left !important;
}
.rgt {
float: right !important;
}
.inline{
display: inline;
}
/* GRID */
.mixin-col {
border:0px solid rgba(0,0,0,0);
float:left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-moz-background-clip:padding-box !important;
-webkit-background-clip:padding-box !important;
background-clip:padding-box !important;
}
.col {
.mixin-col;
}
.mixin-span(@num, @gutter_pc, @gutter_px) {
width: (@gutter_px * @num) + (@gutter_pc * (@num - 1));
//border-left-width:@gutter_px;
//padding:@padding;
//margin-left:@gutter_pc;
}
.mixin-span_first {
margin-left:0;
}
.row .col:first-child {
.mixin-span_first;
}
/* TAMANHO DAS COLUNAS - ADICIONAR OS ELEMENTOS NESTAS CLASSES */
.col {
/*margin-left:0%;
padding:0 0%;*/
margin: 0px 0px 0px @rl;
}
.row .col:first-child {
margin-left:0;
}
.span_1 {
.mixin-span(1, @rl, @col_size);
}
.span_2 {
.mixin-span(2, @rl, @col_size);
}
.span_3 {
.mixin-span(3, @rl, @col_size);
}
.span_4 {
.mixin-span(4, @rl, @col_size);
}
.span_5 {
.mixin-span(5, @rl, @col_size);
}
.span_6 {
.mixin-span(6, @rl, @col_size);
}
.span_7 {
.mixin-span(7, @rl, @col_size);
}
.span_8 {
.mixin-span(8, @rl, @col_size);
}
/* CONTENT */
.demo{
background-color: @l_gray;
}
.top{
max-height: 60px;
padding: @r3 0px;
a{
color: @red;
}
}
/* NAV */
.top-nav{
width: 100%;
height: 40px;
.lang_selector {
font-size: 1.2em;
}
}
.en{
margin: @r3 !important;
}
.logo{
margin-top: -10px;
position: absolute;
z-index: 1;
left: 50%;
margin-left: -26px;
img {
width: 52px;
box-shadow: 0 4px 4px -4px #000;
}
}
nav{
margin-top: -46px;
}
nav li{
float: left;
display: inline;
margin: @r2 39px 0;
&:first-child {
margin-left: 18px;
}
}
nav li a{
font-size: 1.2rem;
padding-bottom: 12px;
display: inline-block;
}
nav li a:hover{
// color: @red;
}
.menu_wrapper{
overflow: hidden;
margin: 0 auto;
width: 967px;
}
ul.row{
box-shadow: 0px 2px 3px #888888;
}
#menu-link{
float: right;
padding: @r3;
cursor: pointer;
display: none;
}
.logo_mobile{
display: none;
}
/* STRUCTURE */
main{
/*margin-top: -50px;*/
}
.page_wrapper{
overflow: hidden;
}
.bkg{
height: 100%;
background-repeat: no-repeat;
background-size: 100%;
z-index: -1;
}
.hide{
display: none;
}
/* HOME */
.home img{
width: 100%;
z-index: -9999;
position: relative;
}
.home{
padding-top: 59px;
}
.home p{
position: absolute;
right: @r1;
bottom: @r2;
}
/* Quem somos */
.quem{
position: relative;
#slideshowwho{
position: relative;
}
#slideshowwho > div {
position: absolute;
}
.img_bkg{
width: 100%;
position: relative;
}
.txt-wrapper{
position: absolute;
top: @r1;
//transform: translateY(-12%);
em {
font-size: 1.2em;
}
}
.title{
margin: @r3 0 0 @r1;
text-align: center;
}
.since{
width: 275px;
position: absolute;
bottom: @r2;
}
.red_line{
border-top: 2px solid @red;
width: 300px;
}
.subtitle{
display: inline-block;
padding: @r3/2 @r1*2;
position: absolute;
bottom: @r2;
right: 0px;
}
}
/* O que fazemos */
.oque{
.main{
margin: @r1 auto @r1;
}
.col{
margin: 0 auto !important;
float: none;
width: 1100px;
}
.img_wrapper{
width: 333px;
height: 361px;
position: relative;
margin: 0 @r3 @r2;
float: left;
cursor: pointer;
}
img{
position: absolute;
}
.bl{
position: relative;
top: 25%;
width: 160px;
height: 160px;
width: 160px;
background-color: rgba(0,0,0,0.5);
margin: 0 auto;
text-align: center;
cursor: pointer;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.bl h2{
margin: 0;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
line-height: 100%;
opacity: 1;
}
.info{
opacity: 0;
position: absolute;
width: 100%;
background-color: rgba(0,0,0,0.9);
height: 100%;
top: 0;
padding: @r1 @r2;
cursor: pointer;
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-ms-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
h2{
padding-bottom: @r3;
}
ul li {
list-style: disc;
color: #fff;
}
p {
font-size: 1.5em !important;
line-height: 150%;
}
}
.service_link{
padding-top: @r2;
display: inline-block;
}
}
.contato{
padding-top: @r1*2;
img, .address{
float: left;
margin: 0 0 @r2;
text-align: center;
}
.address{
width: 50%;
}
iframe{
max-width: 702px;
margin-bottom: @r1;
width: 49.5%;
}
span{
width: @r3;
display: inline-block;
}
.ft{
float: right;
margin: 0px @r2 @r2;
}
.sp{
text-align: right;
padding-right: 10px;
}
.rj {
text-align: left;
padding-left: 10px;
border-left: 1px solid
}
}
.clientes{
width: 100%;
max-width: 1480px;
.nav{
background-color: rgba(0,0,0,0.8);
text-transform: uppercase;
text-align: center;
padding: @r1*2 0;
margin: 0 @r3 0 0;
height: 1000px;
width: 10%;
max-width: 145px;
min-width: 96px;
box-sizing: border-box;
a{
position: relative;
font-family: @main_font;
font-size: 1.2rem;
margin: @r3 0;
display: inherit;
color: @white;
&:hover{
// color: rgba(238,46,36,0.7);
color: #fff;
&:after{
content: '◄';
position: absolute;
right: -3px;
font-size: 20px;
}
}
}
a.active:after{
content: '◄';
position: absolute;
right: -3px;
font-size: 20px;
color: #fff;
}
}
.wrapper{
float: left;
max-width: 1150px;
width: 88%;
margin: @r2 0 @r1;
}
.outside_view{
position: absolute;
overflow: hidden;
width: 100%;
min-height: 865px;
}
.inside_view{
position: absolute;
left: 0;
min-height: 1000px;
width: 100%;
overflow: hidden;
width: 2800px;
}
.img_col{
float: left;
transition: all 0.5s ease;
}
img{
display: inherit;
width: 199px;
padding: 0 !important;
}
.rgt_nav{
background: url('img/rgt-arrow.png') no-repeat;
background-color: @white;
background-position: 50% 50%;
position: absolute;
right: 0;
width: 80px;
cursor: pointer;
z-index: 10;
}
.rgt_nav{
height: 930px;
}
.image {
position:relative;
width: 198px;
height: 279px;
margin: 0 10px 10px 0;
}
.image {
width: 198px;
height: 279px;
display: inline-block;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after, .image:before {
position:absolute;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:after {
content:'\A';
width:100%;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
}
.image:before {
content: attr(data-content);
width:100%;
color: @white;
z-index:1;
padding-top: 68%;
font-size: 1.1rem;
text-align:center;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
.image:hover:after, .image:hover:before {
opacity:1;
cursor: pointer;
}
}
.equipe{
margin: @r1 0 @r1;
.names {
float: right;
margin-right: @r1;
}
.names p{
text-align: right;
clear: both;
line-height: 2rem;
cursor: pointer;
}
.names p.active-name{
color: @red;
}
.person{
display: none;
cursor: pointer;
position: relative;
}
.info .bottom, .info .top{
background-color: rgba(0,0,0,0.8);
}
.info .bottom{
height: @r1*2;
margin-top: -@r1*2;
position: relative;
padding: @r2 @r1;
}
.info .top{
display: none;
min-height: 686px;
position: absolute;
top: 0;
width: 100%;
padding: @r1*8 @r1 0;
h2{
font-size: 37px;
font-size: 3.7rem;
}
.descr{
width: 200px;
}
}
.info .bottom p, .info .bottom h3,
.info .top p, .info .top h2{
color: @white;
padding: 0 0 @r3/2;
float: right;
clear: both;
}
.info .bottom h3, .info .top h2{
text-transform: uppercase;
}
}
.reel{
margin: 0;
position: relative;
img{
width: 100%;
box-shadow: 0px 0px 10px #888888;
}
h2 {
position: absolute;
top: 339px;
width: 100%;
text-align: center;
text-transform: uppercase;
font-family: @sec_font;
font-size: 1.5em;
color: #fff;
}
}
@media @mobile{
.top-nav{
display: none;
}
nav{
display: none;
}
#menu-link{
display: inline-block;
}
.menu_wrapper{
width: 100%;
position: relative;
}
nav li:first-child{
margin: @r3/2 0;
}
nav li:nth-child(4){
display: none;
}
nav li {
display: inline-block;
margin: @r3/2 0;
width: 100%;
text-align: center;
}
nav li a{
padding: 0;
}
.logo_mobile{
text-align: center;
display: inherit;
}
.logo_mobile img{
width: 40px;
position: relative;
margin: 10px 0 0 70px;
box-sizing: border-box;
}
.contato{
.address{
width: 100%;
}
img{
display: none;
}
}
.clientes{
.nav{
width: 100%;
height: 300px;
padding: @r2;
max-width: 100%;
}
.wrapper{
width: 100%;
}
.inside_view{
width: 230px;
margin: 0 auto;
}
}
}
@media @tablet{
.top-nav{
display: none;
}
nav{
display: none;
}
#menu-link{
display: inline-block;
}
.menu_wrapper{
width: 100%;
position: relative;
}
nav li:first-child{
margin: @r3/2 0;
}
nav li:nth-child(4){
display: none;
}
nav li {
display: inline-block;
margin: @r3/2 0;
width: 100%;
text-align: center;
}
nav li a{
padding: 0;
}
.logo_mobile{
text-align: center;
display: inherit;
}
.logo_mobile img{
width: 40px;
position: relative;
margin: 10px 0 0 70px;
box-sizing: border-box;
}
.contato{
.address{
width: 100%;
}
img{
display: none;
}
iframe{
width: 100%;
}
}
.clientes{
.wrapper{
width: 70%;
}
}
}
/* RETINA */
/* retina.less*/
/* A helper mixin for applying high-resolution background images (http://www.retinajs.com) */
.at2x(@path, @w: auto, @h: auto) {
background-image: url(@path);
@at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;
@media all and (-webkit-min-device-pixel-ratio : 1.5) {
background-image: url(@at2x_path);
background-size: @w @h;
}
}
/* LIGHT BOX */
#lightbox {
position: absolute;
top: 0;
left: 50%;
width: 500px;
margin-left: -250px;
background: #fff;
z-index: 1001;
display: none;
}
#lightbox-shadow {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
z-index: 1000;
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment