diff options
| author | Franck Cuny <franck@lumberjaph.net> | 2013-07-25 18:35:25 -0700 |
|---|---|---|
| committer | Franck Cuny <franck@lumberjaph.net> | 2013-07-25 18:35:25 -0700 |
| commit | 3d46aca2693381e81045210c41e782431acd1ed9 (patch) | |
| tree | 410067ba6ce89d6a371e1c06643a14b2bede85e5 /assets/less/mixins.less | |
| parent | new post - patch.pm (diff) | |
| parent | Add a page with my talks. (diff) | |
| download | lumberjaph-3d46aca2693381e81045210c41e782431acd1ed9.tar.gz | |
Merge branch 'design'
* design:
Add a page with my talks.
Remove more files.
use index.atom for our feed.
add openid to our header.
remove unused layout templates.
I don't need tags.
Remove useless empty page.
First attempt with the new theme.
attempt for a new design
Diffstat (limited to 'assets/less/mixins.less')
| -rw-r--r-- | assets/less/mixins.less | 305 |
1 files changed, 305 insertions, 0 deletions
diff --git a/assets/less/mixins.less b/assets/less/mixins.less new file mode 100644 index 0000000..a408b7d --- /dev/null +++ b/assets/less/mixins.less @@ -0,0 +1,305 @@ +// UTILITY MIXINS +// -------------------------------------------------- + +// Clearfix +// -------------------- +// For clearing floats like a boss h5bp.com/q +.clearfix { + *zoom: 1; + &:before, + &:after { + display: table; + content: ""; + // Fixes Opera/contenteditable bug: + // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 + line-height: 0; + } + &:after { + clear: both; + } +} + +// Webkit-style focus +// -------------------- +.tab-focus() { + // Default + outline: thin dotted #333; + // Webkit + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +// Center-align a block level element +// ---------------------------------- +.center-block() { + display: block; + margin-left: auto; + margin-right: auto; +} + +// TYPOGRAPHY +// -------------------------------------------------- + +// Full-fat vertical rhythm +// ------------------------ +.font-size(@size) { + font-size: 0px + @size; + font-size: 0rem + @size / @doc-font-size; + line-height: 0 + round(@doc-line-height / @size*10000) / 10000; + margin-bottom: 0px + @doc-line-height; + margin-bottom: 0rem + (@doc-line-height / @doc-font-size); +} + +// Just the REMs +// ------------- +.font-rem(@size) { + font-size: 0px + @size; + font-size: 0rem + @size / @doc-font-size; +} + +// Just font-size and line-height +// ------------------------------ +.font(@size) { + font-size: 0px + @size; + font-size: 0rem + @size / @doc-font-size; + line-height: 0 + round(@doc-line-height / @size*10000) / 10000; +} + +.text-overflow() { +overflow: hidden; +text-overflow: ellipsis; +white-space: nowrap; } + +// GRADIENTS +// -------------------------------------------------- + +.horizontal(@startColor : @white, @endColor : @lightergrey) { +background-color: @endColor; +background-image : -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ +background-image : -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ +background-image : -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ +background-image : -ms-linear-gradient(left, @startColor, @endColor); // IE10 +background-image : -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 +background-image : linear-gradient(left, @startColor, @endColor); // W3C +background-repeat : repeat-x; } + +.vertical(@startColor : @white, @endColor: @lightergrey) { +background-image : -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ +background-image : -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ +background-color : @endColor; +background-image : -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ +background-image : -ms-linear-gradient(top, @startColor, @endColor); // IE10 +background-image : -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 +background-image : linear-gradient(top, @startColor, @endColor); // W3C +background-repeat : repeat-x; } + +.directional(@startColor : @white, @endColor : @lightergrey, @deg : 45deg) { +background-color : @endColor; +background-image : -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ +background-image : -ms-linear-gradient(@deg, @startColor, @endColor); // IE10 +background-image : -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ +background-image : -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 +background-image : linear-gradient(@deg, @startColor, @endColor); // W3C +background-repeat : repeat-x; } + +// .bordered(COLOR, COLOR, COLOR, COLOR); +.bordered(@top-color: #eee, @right-color: #eee, @bottom-color: #eee, @left-color: #eee) { +border-top : solid 1px @top-color; +border-left : solid 1px @left-color; +border-right : solid 1px @right-color; +border-bottom : solid 1px @bottom-color; } + +// ROUND CORNERS +// -------------------------------------------------- + +// .rounded(VALUE); +.rounded(@radius:4px) { +-webkit-border-radius : @radius; +-moz-border-radius : @radius; +border-radius : @radius; } + +// .border-radius(VALUE,VALUE,VALUE,VALUE); +.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { +-webkit-border-top-right-radius : @topright; +-webkit-border-bottom-right-radius : @bottomright; +-webkit-border-bottom-left-radius : @bottomleft; +-webkit-border-top-left-radius : @topleft; +-moz-border-radius-topright : @topright; +-moz-border-radius-bottomright : @bottomright; +-moz-border-radius-bottomleft : @bottomleft; +-moz-border-radius-topleft : @topleft; +border-top-right-radius : @topright; +border-bottom-right-radius : @bottomright; +border-bottom-left-radius : @bottomleft; +border-top-left-radius : @topleft; +-webkit-background-clip : padding-box; +-moz-background-clip : padding; +background-clip : padding-box; } + +// .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) +.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { +-webkit-box-shadow : @shadow; +-moz-box-shadow : @shadow; +box-shadow : @shadow; } + +// .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); +.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) { +-webkit-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); +-moz-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); +box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); } + +// .text-shadow(); +.text-shadow(@shadow: 0 2px 3px rgba(0,0,0,.25)) { +text-shadow : @shadow; } + +// .opacity(VALUE); +.opacity(@opacity : .5) { +-webkit-opacity : @opacity; +-moz-opacity : @opacity; +opacity : @opacity; } + +// TRANSFORMATIONS +// -------------------------------------------------- + +// .rotate(VALUEdeg); +.rotate(@deg) { +-webkit-transform : rotate(@deg); +-moz-transform : rotate(@deg); +-ms-transform : rotate(@deg); +-o-transform : rotate(@deg); +transform : rotate(@deg); } + +// .scale(VALUE); +.scale(@ratio) { +-webkit-transform : scale(@ratio); +-moz-transform : scale(@ratio); +-ms-transform : scale(@ratio); +-o-transform : scale(@ratio); +transform : scale(@ratio); } + +// .skew(VALUE, VALUE); +.skew(@x: 0, @y: 0) { +-webkit-transform : skew(@x, @y); +-moz-transform : skew(@x, @y); +-ms-transform : skew(@x, @y); +-o-transform : skew(@x, @y); +transform : skew(@x, @y); } + +// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); +.transition(@transition) { +-webkit-transition : @transition; +-moz-transition : @transition; +-ms-transition : @transition; +-o-transition : @transition; +transition : @transition; } + +// .translate(VALUE, VALUE) +.translate(@x: 0, @y: 0) { +-webkit-transform : translate(@x, @y); +-moz-transform : translate(@x, @y); +-ms-transform : translate(@x, @y); +-o-transform : translate(@x, @y); +transform : translate(@x, @y); } + +.translate3d(@x: 0, @y: 0, @z: 0) { +-webkit-transform : translate(@x, @y, @z); +-moz-transform : translate(@x, @y, @z); +-ms-transform : translate(@x, @y, @z); +-o-transform : translate(@x, @y, @z); +transform : translate(@x, @y, @z); } + +.animation(@name, @duration: 300ms, @delay: 0, @ease: ease) { + -webkit-animation: @name @duration @delay @ease; + -moz-animation: @name @duration @delay @ease; + -ms-animation: @name @duration @delay @ease; +} + +// BACKGROUND +// -------------------------------------------------- + +// .background-alpha(VALUE VALUE); +.background-alpha(@color: @white, @alpha: 1) { +background-color : hsla(hue(@color), saturation(@color), lightness(@color), @alpha); } + +// .background-size(VALUE VALUE); +.background-size(@size){ +-webkit-background-size : @size; +-moz-background-size : @size; +-o-background-size : @size; +background-size : @size; } + +// .background-clip(VALUE); (border-box, padding-box, content-box) +.background-clip(@clip) { +-webkit-background-clip : @clip; +-moz-background-clip : @clip; +background-clip : @clip; } + +// .box-sizing(VALUE); (border-box, padding-box, content-box) +.box-sizing(@boxsize: border-box) { +-webkit-box-sizing : @boxsize; +-moz-box-sizing : @boxsize; +-ms-box-sizing : @boxsize; +box-sizing : @boxsize; } + +// For image replacement +.hide-text() { +text-indent : 100%; +white-space : nowrap; +overflow : hidden; } + +// Hide from visual and speaking browsers +.hidden() { +display : none !important; +visibility : hidden; } +.hidden { + display: none; + visibility: hidden; +} + +// Hide but maintain layout +.invisible() { +visibility : hidden; } + +// .resize(VALUE) (none, both, horizontal, vertical, inherit) +.resize(@direction: both) { +resize : @direction; +overflow : auto; } + +// .userselect(VALUE) (all, element, none, text) +.user-select(@select) { +-webkit-user-select : @select; +-moz-user-select : @select; +-o-user-select : @select; +user-select : @select; } + +// Hidden but available to speaking browsers +.visuallyhidden() { +overflow : hidden; +position : absolute; +clip : rect(0 0 0 0); +height : 1px; +width : 1px; +margin : -1px; +padding : 0; +border : 0; } + +// Make visuallyhidden focusable with a keyboard +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { +position : static; +clip : auto; +height : auto; +width : auto; +margin : 0; +overflow: visible; } + +// MEDIA QUERIES +// -------------------------------------------------- + +@small: ~"only screen and (min-width: 30em)"; +@medium: ~"only screen and (min-width: 48em)"; +@large: ~"only screen and (min-width: 62.5em)"; +@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)", + ~"only screen and (-o-min-device-pixel-ratio: 3/2)", + ~"only screen and (min-resolution: 144dpi)", + ~"only screen and (min-resolution: 1.5dppx)";
\ No newline at end of file |
