less/stylesheets/mixins.less

0001 @import "vars.less";
0002
0003 /*==================*/
0004 /*          MIXINS      */
0005 /*==================*/
0006
0007
0008 // background images
0009
0010 .bg_sheet {background-image:url(../img/bg_sheet.png);}
0011 .bg_sheet_statistics {background-image: url(../img/statistics_sheet.png);}
0012
0013 .unstyled_list {
0014         list-style-type: none;
0015         padding: 0px;
0016         margin:0px;
0017 }
0018
0019
0020 // effects
0021
0022 .opacity (@opacity: 0.5) {
0023         -webkit-opacity:        @opacity;
0024         -moz-opacity:           @opacity;
0025         opacity:                    @opacity;
0026 }
0027
0028
0029 .border_radius(@radius){
0030   -webkit-border-radius: @radius;
0031      -moz-border-radius: @radius;
0032           border-radius: @radius;
0033   -webkit-background-clip: padding-box;
0034      -moz-background-clip: padding;
0035           background-clip: padding-box;
0036 }
0037
0038
0039 .transition (@transition:@default_transition) {
0040         -webkit-transition: all  @transition ease-out;
0041         -moz-transition:    all  @transition ease-out;
0042         -ms-transition:     all  @transition ease-out;
0043         -o-transition:      all  @transition ease-out;
0044 }
0045
0046 .box_sizing(@boxSizing:border-box){
0047         -webkit-box-sizing: @boxSizing;
0048         -moz-box-sizing: @boxSizing;
0049         box-sizing: @boxSizing;
0050 }
0051
0052 .gradient_color (@from;@to){
0053           background-image: -moz-linear-gradient(top, @from, @to);
0054           background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@from), to( @to));
0055           background-image: -webkit-linear-gradient(top, @from, @to);
0056           background-image: -o-linear-gradient(top, @from, @to);
0057           background-image: linear-gradient(to bottom, @from, @to);
0058           background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@from', endColorstr='@to', GradientType=0);
0059 }
0060
0061 .rotate(@deg:180deg){
0062         transform: rotate(@deg);
0063         -ms-transform: rotate(@deg); /* IE 9 */
0064         -webkit-transform: rotate(@deg); /* Safari and Chrome */
0065 }
0066
0067 // shadows
0068
0069 .taxt_shadow (@string){
0070         text-shadow:@string;
0071 }
0072
0073 .box_shadow (@string) {
0074         -webkit-box-shadow: @string;
0075         -moz-box-shadow:    @string;
0076         box-shadow:         @string;
0077 }
0078
0079 .box_shadows(@first,@second){
0080         -webkit-box-shadow: @first,@second;
0081         -moz-box-shadow:    @first,@second;
0082         box-shadow:         @first,@second;
0083 }
0084
0085 // filters
0086
0087 .grayscale(@amount:100%){
0088     filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */
0089     filter: gray; /* IE6-9 */
0090     -webkit-filter: grayscale(@amount);
0091 }
0092
0093 .sepia(@amount:100%){
0094         -webkit-filter: sepia(@amount);
0095         -moz-filter: sepia(@amount);
0096         filter: sepia(@amount);
0097 }
0098
0099 .blur(@pixel) {
0100         -webkit-filter: blur(@pixel);
0101         -moz-filter: blur(@pixel);
0102         filter: blur(@pixel);
0103 }
0104
0105 // hand icons
0106
0107 .hand-with-coin {
0108         display: inline-block;
0109         background-image: url('../img/new/button/hand-w-coin.png');
0110         height: 61px;
0111         width: 61px;
0112
0113         &.v-2 {
0114                 background-image: url('../img/new/button/hand-w-coin-2.png');
0115         }
0116 }
0117
0118 .grayscale(@amount:100%) {
0119   -webkit-filter: grayscale(@amount);
0120   -moz-filter: grayscale(@amount);
0121   -ms-filter: grayscale(@amount);
0122   -o-filter: grayscale(@amount);
0123   filter: grayscale(@amount);
0124   filter: url(grayscale.svg); /* Firefox 4+ */
0125   filter: gray; /* IE 6-9 */
0126 }