Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
166 lines (137 sloc) 4.18 KB
/*--------------------------------------------------
Bootstrap.less v1
--------------------------------------------------
Colors
-------------------------------------------------- */
// Links
@link-color: #8b59c2;
@link-hover-color: darken(@link-color, 10);
// Grays
@gray-light: #777;
@gray: #555;
@gray-dark: #333;
// Accent Colors
@blue: #00b3ee;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
/*--------------------------------------------------
Mixins
-------------------------------------------------- */
// Clearfix for use in Less files
.clearfix{
&:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
& {display: inline-block;}
* html & {height: 1%;}
& {display: block;}
}
// CSS3 columns.
.columns(@count, @gap: 1.5em){
-webkit-column-count: @count;
-webkit-column-gap: @gap;
-moz-column-count: @count;
-moz-column-gap: @gap;
column-count: @count;
column-gap: @gap;
& > * {
position: static; // Boy, it took me long time to figure this out.
}
}
// Button style
// Usage: include the mixin and define base color. I highly recommend you to customize these styles.
.button(@basecolor: #eee){
.rounded(3px);
-webkit-font-smoothing: antialiased;
display: inline-block;
.gradient(@basecolor, darken(@basecolor, 10%));
.sans-serif(bold);
text-align: center;
text-decoration: none;
padding: 0.3em 0.5em;
&:hover{
}
&:active{
.transition(none);
top: auto; outline: none !important;
}
}
// Border Radius
.rounded(@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.border-radius(@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0) {
-moz-border-top-left-radius: @topleft;
-moz-border-top-right-radius: @topright;
-moz-border-bottom-right-radius: @bottomright;
-moz-border-bottom-left-radius: @bottomleft;
-webkit-border-top-left-radius: @topleft;
-webkit-border-top-right-radius: @topright;
-webkit-border-bottom-right-radius: @bottomright;
-webkit-border-bottom-left-radius: @bottomleft;
border-top-left-radius: @topleft;
border-top-right-radius: @topright;
border-bottom-right-radius: @bottomright;
border-bottom-left-radius: @bottomleft;
}
// Drop shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
transition: @transition;
}
// Font Stacks
.sans-serif(@weight: normal, @size: 14px, @lineheight: 20px) {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineheight;
}
.serif(@weight: normal, @size: 14px, @lineheight: 20px) {
font-family: "Georgia", Times New Roman, Times, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineheight;
}
.monospace(@weight: normal, @size: 12px, @lineheight: 20px) {
font-family: "Monaco", Courier New, monospace;
font-size: @size;
font-weight: @weight;
line-height: @lineheight;
}
// Gradients
.gradient(@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor));
background-image: -moz-linear-gradient(@startColor, @endColor);
}
.three-color-gradient(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
background-color: @endColor;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
}
// For links or buttons with background-image applied, and you want it to change on hover:
.hover(@dir: bottom){
&:hover{
background-position-y: @dir;
}
}