From be653efb2067760858d8e59a0411644fb47dd1f6 Mon Sep 17 00:00:00 2001 From: Chee Rabbits Date: Mon, 20 Feb 2012 22:43:20 +0000 Subject: [PATCH] zomg --- README | 8 ++ nimbupani.less | 316 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 324 insertions(+) create mode 100644 README create mode 100644 nimbupani.less diff --git a/README b/README new file mode 100644 index 0000000..b7b558d --- /dev/null +++ b/README @@ -0,0 +1,8 @@ + yay +::::: + +http://lesscss.org/ + + + +.round-box(10px) diff --git a/nimbupani.less b/nimbupani.less new file mode 100644 index 0000000..9e48af9 --- /dev/null +++ b/nimbupani.less @@ -0,0 +1,316 @@ +/* rounding things! */ + +.round-box(@radius: 5px) { + -webkit-border-radius: @radius @radius @radius @radius; // Saf3-4, iOS 1-3.2, Android ≤1.6 + -moz-border-radius: @radius @radius @radius @radius; //FF1-3.6 + border-radius: @radius @radius @radius @radius; // Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ + + // useful if you don't want a bg color from leaking outside the border: + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} + +.round-box-noclip(@radius: 5px) { + -webkit-border-radius: @radius @radius @radius @radius; + -moz-border-radius: @radius @radius @radius @radius; + border-radius: @radius @radius @radius @radius; +} + +.round-top(@radius: 5px, @other: 0) { + -webkit-border-radius: @radius @radius @other @other; + -moz-border-radius: @radius @radius @other @other; + border-radius: @radius @radius @other @other; + + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} + +.round-top-noclip(@radius: 5px, @other: 0) { + -webkit-border-radius: @radius @radius @other @other; + -moz-border-radius: @radius @radius @other @other; + border-radius: @radius @radius @other @other; +} + +.round-bottom(@radius: 5px, @other: 0) { + -webkit-border-radius: @other @other @radius @radius; + -moz-border-radius: @other @other @radius @radius; + border-radius: @other @other @radius @radius; + + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} + +.round-bottom-noclip(@radius: 5px, @other: 0) { + -webkit-border-radius: @other @other @radius @radius; + -moz-border-radius: @other @other @radius @radius; + border-radius: @other @other @radius @radius; +} + +.round-left(@radius: 5px, @other: 0) { + -webkit-border-radius: @radius @other @other @radius; + -moz-border-radius: @radius @other @other @radius; + border-radius: @radius @other @other @radius; + + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} + +.round-left-noclip(@radius: 5px, @other: 0) { + -webkit-border-radius: @radius @other @other @radius; + -moz-border-radius: @radius @other @other @radius; + border-radius: @radius @other @other @radius; +} + +.round-right(@radius: 5px, @other: 0) { + -webkit-border-radius: @other @radius @radius @other; + -moz-border-radius: @other @radius @radius @other; + border-radius: @other @radius @radius @other; + + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} + +.round-right-noclip(@radius: 5px, @other: 0) { + -webkit-border-radius: @other @radius @radius @other; + -moz-border-radius: @other @radius @radius @other; + border-radius: @other @radius @radius @other; +} + +// use this one without commas just like you would border-radius:;, dear +.border-radius(@radius: 5px) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; + + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} +.border-radius-noclip(@radius) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; +} + +// Is there a better way of doing this? +/* .box-shadow(@x: 0, @y: 0, @blur: 4px, @color: #ffffff) { + -webkit-box-shadow: @x @y @blur @color; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ + -moz-box-shadow: @x @y @blur @color; /* FF3.5 - 3.6 + box-shadow: @x @y @blur @color; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 +} +.box-shadow(@x: 0, @y: 0, @blur: 4px, @spread: 0px, @color: #ffffff) { + urg wat i dno */ + +.box-shadow(@arguments: 0 0 4px 0px #ffffff) { + -webkit-box-shadow: @arguments; // Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ + -moz-box-shadow: @arguments; // FF3.5 - 3.6 + box-shadow: @arguments; // Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 +} + +.box-gradient (@from: #444, @to: #666) { + background-color: (@from + @to) / 2; + background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); // Saf4+, Chrome + background-image: -webkit-linear-gradient(top, @from, @to); // Chrome 10+, Saf5.1+, iOS 5+ + background-image: -moz-linear-gradient(top, @from, @to); // FF3.6 + background-image: -ms-linear-gradient(top, @from, @to); // IE10 + background-image: -o-linear-gradient(top, @from, @to); // Opera 11.10+ + background-image: linear-gradient(to bottom, @from, @to); +} + +.box-rgba(@r, @g, @b, @a) { + // your place or mine? + @msa: `Math.floor(@{a}*255).toString(16)`; + @msr: `(@{r}).toString(16)`; + @msg: `(@{g}).toString(16)`; + @msb: `(@{b}).toString(16)`; + + // this would be nicer with functions ! + @mspa: `(@{a} < 0.063) ? "0" + @{msa} : "" + @{msa}`; + @mspr: `(@{r} < 16) ? "0" + @{msr} : "" + @{msr}`; + @mspg: `(@{g} < 16) ? "0" + @{msg} : "" + @{msg}`; + @mspb: `(@{b} < 16) ? "0" + @{msb} : "" + @{msb}`; + + @mscolor: `@{mspa}+@{mspr}+@{mspg}+@{mspb}`; // seriously, fucking microsoft wtf guys + background-color: transparent; + background-color: rgba(@r, @g, @b, @a); + filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#@{mscolor},endColorstr=#@{mscolor})"; + zoom: 1; +} + +.rotate(@ndeg: 180deg) { + -webkit-transform: rotate(@ndeg); // Saf3.1+, Chrome + -moz-transform: rotate(@ndeg); // FF3.5+ + -ms-transform: rotate(@ndeg); // IE9 + -o-transform: rotate(@ndeg); // Opera 10.5 + transform: rotate(@ndeg); + /* filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 + M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand'); + zoom: 1; fuck even trying to do this in less. */ +} + +.scale(@factor: 0.5) { + -webkit-transform: scale(@factor); + -moz-transform: scale(@factor); + -ms-transform: scale(@factor); + -o-transform: scale(@factor) + transform: scale(@factor); + + /* filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 + M11=0.9999025240093042, M12=-0.013962180339145272, M21=0.013962180339145272, + M22=0.9999025240093042,SizingMethod='auto expand'); + if you're living on a diet of crack and would like to try, pls do */ +} + +.transform() { + -webkit-transform: @arguments; + -moz-transform: @arguments; + -ms-transform: @arguments; + -o-transform: @arguments; + transform: @arguments; +} + + +.3dtransform(@perspective: 300, @rotateY: 180deg) { + -webkit-perspective: @perspective; // Saf4+, Chrome 12+ + -moz-perspective: @perspective; // FF10+ + -ms-perspective: @perspective; // IE10+ + perspective: @perspective; + -webkit-transform: rotateY(@rotateY); -webkit-transform-style: preserve-3d; + -moz-transform: rotateY(@rotateY); -moz-transform-style: preserve-3d; + -ms-transform: rotateY(@rotateY); -ms-transform-style: preserve-3d; + transform: rotateY(@rotateY); transform-style: preserve-3d; +} + + +.transition(@prop: all, @duration: 0.3s, @timing: ease-in-out) { + -webkit-transition: @prop @duration @timing; // Saf3.2+, Chrome + -moz-transition: @prop @duration @timing; // FF4+ + -ms-transition: @prop @duration @timing; // IE10 + -o-transition: @prop @duration @timing; // Opera 10.5+ + transition: @prop @duration @timing; + // you don't really love me, and i don't really mind + // cause I don't love anybody + // that stuff is just a waste of time +} + +.opacity(@op: 0.9) { + opacity: @op; // Chrome 4+, FF2+, Saf3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+ + @msop: @op * 100; + filter: alpha(opacity=@msop); // IE6-IE8 +} + +.background-size(@arguments: 100% 100%) { + -webkit-background-size: @arguments; // Saf3-4 + -moz-background-size: @arguments; // FF3.6 + -o-background-size: @arguments; // opera 9.5 + background-size: @arguments; // Opera, IE9, Saf5, Chrome, FF4 + // wat, contain cover auto etc. idek +} + +.column-count(@cols:2, @gap:15px) { + -webkit-column-count: @cols; -webkit-column-gap: @gap; // Saf3, Chrome + -moz-column-count: @cols; -moz-column-gap: @gap; // FF1.8+ + column-count: @cols; column-gap: @gap; // Opera 11.1+ (and ie10!!) +} + +.animation() { + -webkit-animation: @arguments; // Saf5, Chrome + -moz-animation: @arguments; // FF5+ + -ms-animation: @arguments; // IE10 + animation: @arguments; +} + +.animation-delay(){ + -webkit-animation-delay: @arguments; + -moz-animation-delay: @arguments; + -ms-animation-delay: @arguments; + animation-delay: @arguments; +} + +.animation-direction() { + -webkit-animation-direction: @arguments; + -moz-animation-direction: @arguments; + -ms-animation-direction: @arguments; + animation-direction: @arguments; +} + +.animation-duration() { + -webkit-animation-duration: @arguments; + -moz-animation-duration: @arguments; + -ms-animation-duration: @arguments; + animation-duration: @arguments; +} + +.animation-iteration-count() { + -webkit-animation-iteration-count: @arguments; + -moz-animation-iteration-count: @arguments; + -ms-animation-iteration-count: @arguments; + animation-iteration-count: @arguments; +} + +.animation-name() { + -webkit-animation-name: @arguments; + -moz-animation-name: @arguments; + -ms-animation-name: @arguments; + animation-name: @arguments; +} + +.animation-play-state() { + -webkit-animation-play-state: @arguments; + -moz-animation-play-state: @arguments; + -ms-animation-play-state: @arguments; + animation-play-state: @arguments; +} + +.animation-timing-function() { + -webkit-animation-timing-function: @arguments; + -moz-animation-timing-function: @arguments; + -ms-animation-timing-function: @arguments; + animation-timing-function: @arguments; +} +.animation-fill-mode() { + -webkit-animation-fill-mode: @arguments; + -moz-animation-fill-mode: @arguments; + -ms-animation-fill-mode: @arguments; + animation-fill-mode: @arguments; +} + +.tabsize(@tabsize: 2) { + -moz-tab-size: @tabsize; // Firefox 4+ + -o-tab-size: @tabsize; // Opera 10.60+ + tab-size: @tabsize; +} + +// inspired by divya's scss colorize ( from her scss snippets https://gist.github.com/1857529 ) +// Use .colorize( "lol.png", rgba(233,47,201,0.4) ) +.colorize(@image, @color) { + background: fade(@color, 100%); + background: -webkit-gradient(linear, left top, right bottom, from(@color), to(@color)); + background: -webkit-linear-gradient(left, @color, @color), url(@image); + background: -moz-linear-gradient(left, @color, @color), url(@image); + background: -ms-linear-gradient(left, @color, @color), url(@image); + background: -o-linear-gradient(left, @color, @color), url(@image); + background: linear-gradient(to right, @color, @color); +} + +// if you prefer +.colourise(@image, @colour) { + background: fade(@colour, 100%); + background: -webkit-gradient(linear, left top, right bottom, from(@colour), to(@colour)); + background: -webkit-linear-gradient(left, @colour, @colour), url(@image); + background: -moz-linear-gradient(left, @colour, @colour), url(@image); + background: -ms-linear-gradient(left, @colour, @colour), url(@image); + background: -o-linear-gradient(left, @colour, @colour), url(@image); + background: linear-gradient(to right, @colour, @colour); +} + + +/* thanks to css3please, from where i thefted many these: © 2010; a Paul Irish and Jonathan Neal joint, in association w/ Boaz Sender and Zoltan Hawryluk. + + - chee ( @cheedear ) */ +