Mercurial > hg > agora-ahsan
diff static/css/mixins.less @ 80:eaa36eaaf74a
Start integration of new design
* New stylesheets, templates, javascript, and images
* Added some new template files with filler content for now.
* Split up the contents of the static/ directory into img/, js/ and css/
Still in progress. Snippet-posting and -viewing will come soon.
| author | dellsystem <ilostwaldo@gmail.com> |
|---|---|
| date | Fri, 24 Aug 2012 17:09:07 -0400 (2012-08-24) |
| parents | |
| children | e0348cfbdf48 |
line wrap: on
line diff
new file mode 100644 --- /dev/null +++ b/static/css/mixins.less @@ -0,0 +1,64 @@ +// From the Twitter bootstrap +#gradient(@startColor, @endColor) { + background-color: @endColor; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror + background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ + background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10 + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 + background-image: linear-gradient(top, @startColor, @endColor); // The standard + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down +} + +.border-radius(@radius) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; +} + +.box-shadow(@shadow) { + -webkit-box-shadow: @shadow; + -moz-box-shadow: @shadow; + box-shadow: @shadow; +} + +.inline-block { + display: inline-block; + zoom: 1; + *display: inline; +} + +.wrap { + width: @fixedWidth; + margin: 0 auto; +} + +.center-align { + text-align: center; +} + +.right-float { + float: right; + margin-left: 10px; +} + +.button { + .inline-block; + #gradient(@mediumBlue, @darkBlue); + .border-radius(5px); + padding: 10px 10px 5px 10px; + color: @white; + text-shadow: @darkSheer 0px 1px 0; + + &:hover { + color: @white; + text-decoration: none; + #gradient(@darkBlue, @darkBlue); + } + + &.large { + font-size: 1.5em; + } +}