Developer's Roundtable Notes

@gold: #F8AA46;

@litegold: #f8bf76;

@blue: #3589EE;

@textcolor: #444;

 

@bodyfont: "Open Sans", Verdana, Helvetica, Arial, sans-serif;

@headfont: "Ubuntu", @bodyfont;

@headcolor: @gold;

@pageback: #f8f8f8;

@linkcolor: @blue;

@site-width: 960px;

body { 
   background:@pageback; 
}
html { 
   font-family: @bodyfont; 
   color: @textcolor;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   font-family: @headfont; 
   color: @headcolor;
}
a { 
   color: @linkcolor; 
}

body { 
   background:@pageback; 
}
html { 
   font-family: "Open Sans", Verdana, Helvetica, Arial, sans-serif; 
   color: #444;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   font-family: "Ubuntu","Open Sans", Verdana, Helvetica, Arial, sans-serif; ; 
   color: #F8AA46;
}
a { 
   color: #3589EE; 
}

@darkblue: darken( @blue, 10% );

@lightblue: lighten( @blue, 5% );

@anotherblue: @blue + #444;



@full-width: @site-width;

@half-width: @full-width /2;

.mygradient {
   background-color: #ededed;
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ededed));
   background-image: -webkit-linear-gradient(top, #fff, #ededed);
   background-image: -moz-linear-gradient(top, #fff, #ededed);
   background-image: -ms-linear-gradient(top, #fff, #ededed);
   background-image: -o-linear-gradient(top, #fff, #ededed);

}

button {
   .mygradient;
}

div.mybox {
   .mygradient;
}

.round( @radius: 5px ) {
   -webkit-border-radius: @radius;
   -moz-border-radius:@radius;
   border-radius:@radius;
}

.button {
   padding: 1em;
   .round();
}

.another-button {
   padding:0 .5em;
   .round(10px);
}

.button {
   padding: 1em;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

.another-button {
   padding:0 .5em;   
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
}

.mybox(@back: @litegold; bordercolor: @gold;) {
   border-style: solid;
   border-width: 5px 1px;
   border-color: @bordercolor;  
   background: @back; 
   padding: .5em;
   margin: .5em;
}

div.callout {
   .mybox();
}

div.blue-callout {
   .mybox ( @liteblue, @blue );
}

div.callout {
   border-style: solid;
   border-width: 5px 1px;
   border-color: #F8AA46;
   background: #f8bf76;
   padding: .5em;
   margin: .5em;
}

div.blue-callout{
   border-style: solid;
   border-width: 5px 1px;
   border-color: #3589EE;  
   background: #78b3fa;
   padding: .5em;
   margin: .5em;
}

@import url("//fonts.googleapis.com/css?family=Ubuntu");


@import url('anotherstyle.css');

.square ( @size: 3em; ) {

   width: @size;

   height: @size;

   padding: @size * .1;

}

.square {

   width: 3em;

   height: 3em;

   padding: .3em;

}

@url: "http://mycompany.com/assets/";

body {

   background-image: url("@{url}/sprite.png");

}

body {

   background-image: url("http://mycompany.com/assets/sprite.png");

}

a {

   color: @linkcolor;

   text-decoration:none;

   &:hover, &:focus {

      color: darken(@linkcolor, 10%);

      text-decoration: underline;

   }

   &:visited {

      color: @visited-color;
   }

}