Last active
December 29, 2015 05:39
-
-
Save jgraup/7623945 to your computer and use it in GitHub Desktop.
CSS - Less Sample of Less - http://codepen.io/justgooddesign/pen/pLJAb INFO: http://lesscss.org/
DOCS: http://devdocs.io/less/
COMPILE: http://crunchapp.net/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "elements.less"; | |
@import url(http://fonts.googleapis.com/css?family=Lato:400,700); | |
@height : 50px; | |
@black : #000000; | |
@white : #ffffff; | |
@water : #2682D5; | |
@sky : #33CBE0; | |
@red : #DC3964; | |
@orange : #EC7547; | |
@yellow: #FFD728; | |
/* Mixin */ | |
@base: #663333; | |
@lighter1: lighten(spin(@base, 5), 10%); | |
@lighter2: lighten(spin(@base, 10), 20%); | |
@darker1: darken(spin(@base, -5), 10%); | |
@darker2: darken(spin(@base, -10), 20%); | |
@complement1: spin(@base, 180); | |
@complement2: darken(spin(@base, 180), 5%); | |
@lighten1: lighten(@base, 15%); | |
@lighten2: lighten(@base, 30%); | |
/* Implementation */ | |
.one {color: @base;} | |
.two {color: @lighter1;} | |
.three {color: @lighter2;} | |
.four {color: @darker1;} | |
.five {color: @darker2;} | |
* { | |
-webkit-box-sizing:border-box; | |
-moz-box-sizing:border-box; | |
-o-box-sizing:border-box; | |
box-sizing:border-box; | |
} | |
html, body { | |
height:100%; | |
} | |
.trans-color(@color, @alpha){ | |
background:@color; | |
opacity:@alpha; | |
} | |
.rounded-corners (@radius: 8px) { | |
-webkit-border-radius: @radius; | |
-moz-border-radius: @radius; | |
-ms-border-radius: @radius; | |
-o-border-radius: @radius; | |
border-radius: @radius; | |
} | |
nav { | |
position:fixed; | |
left:30px; | |
top:30px; | |
overflow:hidden; | |
.rounded-corners; | |
ul { | |
color:#444444; | |
text-align:center; | |
line-height:@height; | |
li { | |
width:@height; | |
height:@height; | |
.trans-color(@white; 1.0); | |
margin-bottom:1px; | |
cursor:pointer; | |
font:400 16px/@height 'Lato', sans-serif; | |
&:hover { | |
.trans-color(@white; 0.8); | |
} | |
&:active { | |
.trans-color(@white; 0.5); | |
} | |
} | |
} | |
} | |
section { | |
display:table; | |
width:100%; | |
height:100%; | |
text-align:center; | |
p { | |
display:table-cell; | |
vertical-align:middle; | |
height:100%; | |
color:@white; | |
font:400 48px/50px 'Lato', sans-serif; | |
} | |
} | |
#section1 { background-color:@water; } | |
#section2 { background-color:@sky; } | |
#section3 { background-color:@red; } | |
#section4 { background-color:@orange; } | |
#section5 { background-color:@yellow; } | |
/* Mixin */ | |
.reflect (@length: 50%, @opacity: 0.2){ | |
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(@length, transparent), to(rgba(255,255,255,@opacity))); | |
} | |
/* Implementation */ | |
#somediv { | |
.reflect(20%, 0.2); | |
} | |
/* Mixin */ | |
.quick-gradient (@origin: left, @alpha: 0.2) { | |
background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); | |
background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); | |
background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); | |
background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); | |
background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); | |
} | |
/* Implementation */ | |
#somediv { | |
background-color: BADA55; | |
.quick-gradient(top, 0.2); | |
} | |
/* Mixin */ | |
.gradient (@origin: left, @start: #ffffff, @stop: #000000) { | |
background-color: @start; | |
background-image: -webkit-linear-gradient(@origin, @start, @stop); | |
background-image: -moz-linear-gradient(@origin, @start, @stop); | |
background-image: -o-linear-gradient(@origin, @start, @stop); | |
background-image: -ms-linear-gradient(@origin, @start, @stop); | |
background-image: linear-gradient(@origin, @start, @stop); | |
} | |
/* Implementation */ | |
#someDiv { | |
.gradient(left, #663333, #333333); | |
} | |
/* Mixin */ | |
.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) { | |
-webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); | |
-moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); | |
-o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); | |
-ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); | |
transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); | |
} | |
/* Implementation */ | |
#someDiv { | |
.transform(5deg, 0.5, 1deg, 0px); | |
} | |
/* Mixin */ | |
.transition (@prop: all, @time: 1s, @ease: linear) { | |
-webkit-transition: @prop @time @ease; | |
-moz-transition: @prop @time @ease; | |
-o-transition: @prop @time @ease; | |
-ms-transition: @prop @time @ease; | |
transition: @prop @time @ease; | |
} | |
/* Implementation */ | |
#somediv { | |
.transition(all, 0.5s, ease-in); | |
} | |
#somediv:hover { | |
opacity: 0; | |
} | |
/* Mixin */ | |
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) { | |
-webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); | |
-moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); | |
box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); | |
} | |
/* Implementation */ | |
#somediv { | |
.box-shadow(5px, 5px, 6px, 0.3); | |
} | |
/* Mixin */ | |
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) { | |
-webkit-border-radius: @topleft @topright @bottomright @bottomleft; | |
-moz-border-radius: @topleft @topright @bottomright @bottomleft; | |
border-radius: @topleft @topright @bottomright @bottomleft; | |
} | |
/* Implementation */ | |
#somediv { | |
.border-radius-custom(20px, 20px, 0px, 0px); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment