Skip to content

Instantly share code, notes, and snippets.

@akella
Created February 21, 2013 08:48
Show Gist options
  • Save akella/5003306 to your computer and use it in GitHub Desktop.
Save akella/5003306 to your computer and use it in GitHub Desktop.
@import "base";
// =======Sprites
// .whatever{
// @include sized-sprite($icons, badge_hit);
// @include retina{
// @include sized-sprite($icons, badge_new);
// }
// }
// =======animation setting example (set it anywehere)
// @include keyframes(rotate) {
// from {
// @include rotate(0);
// }
// to {
// @include rotate(360);
// }
// }
// animation usage example
// body:hover{
// @include animation(rotate 200s linear infinite);
// }
// ========gradient example
// body{
// @include background-image(linear-gradient(#232323, #5c5c5c));
// }
*{margin:0;padding:0;-webkit-text-size-adjust: none; }
body{
font: {
family: Arial,sans-serif;
weight: normal;
size: 12px;
}
line-height:1.4;
background: #c2dde4 url(../img/bg.png) repeat 0 0;
min-width: 962px;
}
// resets
a img,fieldset{
border:none;
}
a{
color:#3383ae;
}
// common styles, these could be attached to any block with "@extend %wyswyg;"
%wyswyg{
p{
margin-bottom: 1em;
}
ul,ol{
margin: 1em 2em;
list-style: disc;
}
ol{
list-style: decimal;
}
blockquote{
margin: 1em 2em;
}
table{
border-spacing: 0;
border-collapse: collapse;
width: 100%;
td{
border: 1px solid #ccc;
padding: 5px;
}
}
}
%site{
width: 940px;
margin: auto;
}
%button{
display: inline-block;
font-size: 18px;
color: #191513;
font-weight: bold;
text-decoration: none;
border-radius: 6px;
border: 1px solid #e7d700;
border-bottom: 1px solid #aaa300;
box-shadow:inset 0 -1px 0 rgba(#000,.1);
background-color: #fff800;
@include background-image(linear-gradient(#fff800, #ffe600));
padding: 0 18px;
height: 32px;
line-height: 31px;
z-index: 10;
@include transition(all,.3s,linear);
cursor: pointer;
&:hover{
background-color: #fffbad;
@include background-image(linear-gradient(#fffbad, #fff75f));
}
&:active{
background-color: #ffd300;
@include background-image(linear-gradient(#ffd300, #fff300));
}
}
%bigbutton{
@extend %button;
font-size: 24px;
height: 56px;
line-height: 56px;
padding: 0 47px;
}
%addtocart{
@extend %bigbutton;
text-align: center;
width: 92px;
padding: 0;
line-height: 1;
padding-top: 6px;
height: 56px - 6px;
span{
display: block;
font-size: 14px;
}
i{
@include sized-sprite($icons, addtocart);
display: inline-block;
}
}
%h2{
font-size: 21px;
font-weight: bold;
margin: 10px 0 15px 0;
color: #000;
}
.h2{@extend %h2;}
%discount{
position: absolute;
top: -4px;
right: -5px;
@include sized-sprite($icons, discount);
color: #000;
font-size: 1px;
z-index: 50;
span{
display: block;
height: 35px;
line-height: 35px;
width: 130px;
color: #fff;
text-align: center;
@include rotate(45);
@include transform-origin(0,0);
position: absolute;
left: 27px;
top: -27px;
font-size: 27px;
padding-top: 2px;
}
}
%next{
position: absolute;
display: none;
top: 50%;
margin-top: -15px;
@include sized-sprite($icons, offer_next);
right: -6px;
z-index: 50;
cursor: pointer;
}
%prev{
@extend %next;
left: -6px;
right: auto;
@include sized-sprite($icons, offer_prev);
}
.content{
position: relative;
background: #fff;
box-shadow:-4px 0 4px -4px rgba(#000,0.3),4px 0 4px -4px rgba(#000,0.3);
padding: 14px 18px 30px 18px;
&:before{
content:'';
@include sized-sprite($icons, contentshadow);
position: absolute;
top: -1px;
left: -15px;
display: inline-block;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment