snipt

Ctrl+h for KB shortcuts

CSS

CSS Less Mixins

//// Namespaces //// 

.clearfix() { 
    zoom: 1; 
    &:before {  
        content: '';  
        display: block;  
    } 
    &:after {  
        content: '';  
        display: table;  
        clear: both;  
    } 
} 
  
//// Mixins //// 
  
// Borders 
.bordered (@color: #EEE, @width: 1px) { 
    border: @width solid @color; 
} 
.bordered-specific (@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE, @style: solid, @width: 1px) { 
    border-top: @width @style @width @top-color; 
    border-left: @width @style @left-color; 
    border-right: @width @style @right-color; 
    border-bottom: @width @style @bottom-color; 
} 
.border-radius (@radius: 0.313em) { 
    -webkit-border-radius: @radius; 
    -moz-border-radius: @radius; 
    -ms-border-radius: @radius; 
    -o-border-radius: @radius; 
    border-radius: @radius; 
} 
.border-radius-specific (@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; 
    .background-clip(padding-box); 
} 
  
// Backgrounds, Gradients, and Opacity 
.background-clip (@argument: padding-box) { 
    -moz-background-clip: @argument; 
    -webkit-background-clip: @argument; 
    background-clip: @argument; 
} 
.gradient-stops (@point: top, @stop1: 0%, @stop2: 8%, @startColor: #999, @endColor: #fff) { 
    background: @endColor; // Old browsers 
    background: -moz-linear-gradient(top, @startColor @stop1, @endColor @stop2); // FF3.6+  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1,@startColor), color-stop(@stop2,@endColor)); // Chrome,Safari4+  
    background: -webkit-linear-gradient(top, @startColor @stop1, @endColor @stop2); // Chrome10+,Safari5.1+ 
    background: -o-linear-gradient(top, @startColor @stop1, @endColor @stop2); // Opera 11.10+ 
    background: -ms-linear-gradient(top, @startColor @stop1, @endColor @stop2); // IE10+  
    background: linear-gradient(to bottom, @startColor @stop1, @endColor @stop2); // W3C  
} 
.gradient-l (@startColor: #e4e4e4, @endColor: #fff) { 
    background-color: @startColor; 
    background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); 
    background: -webkit-linear-gradient(top, @startColor, @endColor); 
    background: -moz-linear-gradient(top, @startColor, @endColor); 
    background: -ms-linear-gradient(top, @startColor, @endColor); 
    background: -o-linear-gradient(top, @startColor, @endColor); 
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@endColor,@startColor)); 
} 
.gradient-l2 (@startColor: #e4e4e4, @endColor: #fff) { 
    background-color: @startColor; 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@startColor), color-stop(50%,@endColor), color-stop(100%,@startColor)); 
    background-image: -webkit-linear-gradient(top, @startColor 0%, @endColor 50%, @startColor 100%); 
    background-image: -moz-linear-gradient(top, @startColor 0%, @endColor 50%, @startColor 100%); 
    background-image: -ms-linear-gradient(top, @startColor 0%, @endColor 50%, @startColor 100%); 
    background-image: -o-linear-gradient(top, @startColor 0%, @endColor 50%, @endColor 100%); 
    background-image: linear-gradient(to bottom, @startColor 0%, @endColor 50%, @startColor 100%); 
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@endColor,@startColor)); 
} 
.gradient-h (@startColor: #e4e4e4, @endColor: #fff) { 
    background-color: @startColor; 
    background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor)); 
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); 
    background-image: -moz-linear-gradient(left, @startColor, @endColor); 
    background-image: -ms-linear-gradient(left, @startColor, @endColor); 
    background-image: -o-linear-gradient(left, @startColor, @endColor); 
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@endColor,@startColor)); 
} 
.gradient-h2 (@startColor: #e4e4e4, @endColor: #fff) { 
    background-color: @startColor; 
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,@startColor), color-stop(50%,@endColor), color-stop(100%,@startColor)); 
    background-image: -webkit-linear-gradient(left, @startColor 0%, @endColor 50%, @startColor 100%); 
    background-image: -moz-linear-gradient(left, @startColor 0%, @endColor 50%, @startColor 100%); 
    background-image: -ms-linear-gradient(left, @startColor 0%, @endColor 50%, @startColor 100%); 
    background-image: -o-linear-gradient(left, @startColor 0%, @endColor 50%, @endColor 100%); 
    background-image: linear-gradient(to right, @startColor 0%, @endColor 50%, @startColor 100%); 
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@endColor,@startColor)); 
} 
.opacity (@opacity: 0.5) { 
    -moz-opacity: @opacity; 
    -khtml-opacity: @opacity; 
    -webkit-opacity: @opacity; 
    opacity: @opacity; 
    @opperc: @opacity * 100; 
    -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha([email protected]{opperc})"; 
    filter: ~"alpha([email protected]{opperc})"; 
} 
  
// Multiple Backgrounds  
// Icons 
.social-ico(@x-pos: 0,@startColor: #e4e4e4, @endColor: #fff) { 
    background-color: @startColor; 
    background: url(/Content/images/sprites/sprite.png) @x-pos 0 no-repeat,  
                -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); 
    background: url(/Content/images/sprite.png) @x-pos 0 no-repeat,  
                -webkit-linear-gradient(top, @startColor, @endColor); 
    background: url(/Content/images/sprite.png) @x-pos 0 no-repeat,  
                -moz-linear-gradient(top, @startColor, @endColor); 
    background: url(/Content/images/sprite.png) @x-pos 0 no-repeat,  
                -ms-linear-gradient(top, @startColor, @endColor); 
    background: url(/Content/images/sprite.png) @x-pos 0 no-repeat,  
                -o-linear-gradient(top, @startColor, @endColor); 
} 
  
// Center elements 
.center (@width: 80%) { 
    margin-left: auto; 
    margin-right: auto; 
    width: @width; 
} 
.img-align (@pos: center) { 
    text-align: @pos; 
} 
  
// Shadows 
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { 
    -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); 
    -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); 
    box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); 
} 
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { 
    -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); 
    -moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); 
    box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); 
} 
.box-shadow (@arguments) { 
    -webkit-box-shadow: @arguments; 
    -moz-box-shadow: @arguments; 
    box-shadow: @arguments; 
} 
.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) { 
    text-shadow: @string; 
} 
  
// Motion 
.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; 
} 
.transition (@duration: 0.3s, @ease: ease-in) { 
    -webkit-transition: all @duration @ease; 
    -moz-transition: all @duration @ease; 
    -o-transition: all @duration @ease; 
    transition: all @duration @ease; 
} 
.transition-duration (@duration: 0.2s) { 
    -moz-transition-duration: @duration; 
    -webkit-transition-duration: @duration; 
    -o-transition-duration: @duration; 
    transition-duration: @duration; 
} 
.rotate (@deg) { 
    -webkit-transform: rotate(@deg); 
    -moz-transform: rotate(@deg); 
    -o-transform: rotate(@deg); 
    transform: rotate(@deg); 
}  
  
// Misc. 
.box-sizing (@type: border-box) { 
    -ms-box-sizing: @type; 
    -moz-box-sizing: @type; 
    -webkit-box-sizing: @type; 
    box-sizing: @type; 
} 
.user-select (@argument: none) { 
    -webkit-user-select: @argument; 
    -moz-user-select: @argument; 
    -ms-user-select: @argument; 
    user-select: @argument; 
}
https://snipt.net/embed/02135e65742c97dab91b4675c81659f5/
/raw/02135e65742c97dab91b4675c81659f5/
02135e65742c97dab91b4675c81659f5
css
CSS
197
2019-07-22T15:20:38
True
False
False
Aug 27, 2013 at 03:23 PM
/api/public/snipt/68073/
css-less-mixins
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10"> 10</a> <a href="#L-11"> 11</a> <a href="#L-12"> 12</a> <a href="#L-13"> 13</a> <a href="#L-14"> 14</a> <a href="#L-15"> 15</a> <a href="#L-16"> 16</a> <a href="#L-17"> 17</a> <a href="#L-18"> 18</a> <a href="#L-19"> 19</a> <a href="#L-20"> 20</a> <a href="#L-21"> 21</a> <a href="#L-22"> 22</a> <a href="#L-23"> 23</a> <a href="#L-24"> 24</a> <a href="#L-25"> 25</a> <a href="#L-26"> 26</a> <a href="#L-27"> 27</a> <a href="#L-28"> 28</a> <a href="#L-29"> 29</a> <a href="#L-30"> 30</a> <a href="#L-31"> 31</a> <a href="#L-32"> 32</a> <a href="#L-33"> 33</a> <a href="#L-34"> 34</a> <a href="#L-35"> 35</a> <a href="#L-36"> 36</a> <a href="#L-37"> 37</a> <a href="#L-38"> 38</a> <a href="#L-39"> 39</a> <a href="#L-40"> 40</a> <a href="#L-41"> 41</a> <a href="#L-42"> 42</a> <a href="#L-43"> 43</a> <a href="#L-44"> 44</a> <a href="#L-45"> 45</a> <a href="#L-46"> 46</a> <a href="#L-47"> 47</a> <a href="#L-48"> 48</a> <a href="#L-49"> 49</a> <a href="#L-50"> 50</a> <a href="#L-51"> 51</a> <a href="#L-52"> 52</a> <a href="#L-53"> 53</a> <a href="#L-54"> 54</a> <a href="#L-55"> 55</a> <a href="#L-56"> 56</a> <a href="#L-57"> 57</a> <a href="#L-58"> 58</a> <a href="#L-59"> 59</a> <a href="#L-60"> 60</a> <a href="#L-61"> 61</a> <a href="#L-62"> 62</a> <a href="#L-63"> 63</a> <a href="#L-64"> 64</a> <a href="#L-65"> 65</a> <a href="#L-66"> 66</a> <a href="#L-67"> 67</a> <a href="#L-68"> 68</a> <a href="#L-69"> 69</a> <a href="#L-70"> 70</a> <a href="#L-71"> 71</a> <a href="#L-72"> 72</a> <a href="#L-73"> 73</a> <a href="#L-74"> 74</a> <a href="#L-75"> 75</a> <a href="#L-76"> 76</a> <a href="#L-77"> 77</a> <a href="#L-78"> 78</a> <a href="#L-79"> 79</a> <a href="#L-80"> 80</a> <a href="#L-81"> 81</a> <a href="#L-82"> 82</a> <a href="#L-83"> 83</a> <a href="#L-84"> 84</a> <a href="#L-85"> 85</a> <a href="#L-86"> 86</a> <a href="#L-87"> 87</a> <a href="#L-88"> 88</a> <a href="#L-89"> 89</a> <a href="#L-90"> 90</a> <a href="#L-91"> 91</a> <a href="#L-92"> 92</a> <a href="#L-93"> 93</a> <a href="#L-94"> 94</a> <a href="#L-95"> 95</a> <a href="#L-96"> 96</a> <a href="#L-97"> 97</a> <a href="#L-98"> 98</a> <a href="#L-99"> 99</a> <a href="#L-100">100</a> <a href="#L-101">101</a> <a href="#L-102">102</a> <a href="#L-103">103</a> <a href="#L-104">104</a> <a href="#L-105">105</a> <a href="#L-106">106</a> <a href="#L-107">107</a> <a href="#L-108">108</a> <a href="#L-109">109</a> <a href="#L-110">110</a> <a href="#L-111">111</a> <a href="#L-112">112</a> <a href="#L-113">113</a> <a href="#L-114">114</a> <a href="#L-115">115</a> <a href="#L-116">116</a> <a href="#L-117">117</a> <a href="#L-118">118</a> <a href="#L-119">119</a> <a href="#L-120">120</a> <a href="#L-121">121</a> <a href="#L-122">122</a> <a href="#L-123">123</a> <a href="#L-124">124</a> <a href="#L-125">125</a> <a href="#L-126">126</a> <a href="#L-127">127</a> <a href="#L-128">128</a> <a href="#L-129">129</a> <a href="#L-130">130</a> <a href="#L-131">131</a> <a href="#L-132">132</a> <a href="#L-133">133</a> <a href="#L-134">134</a> <a href="#L-135">135</a> <a href="#L-136">136</a> <a href="#L-137">137</a> <a href="#L-138">138</a> <a href="#L-139">139</a> <a href="#L-140">140</a> <a href="#L-141">141</a> <a href="#L-142">142</a> <a href="#L-143">143</a> <a href="#L-144">144</a> <a href="#L-145">145</a> <a href="#L-146">146</a> <a href="#L-147">147</a> <a href="#L-148">148</a> <a href="#L-149">149</a> <a href="#L-150">150</a> <a href="#L-151">151</a> <a href="#L-152">152</a> <a href="#L-153">153</a> <a href="#L-154">154</a> <a href="#L-155">155</a> <a href="#L-156">156</a> <a href="#L-157">157</a> <a href="#L-158">158</a> <a href="#L-159">159</a> <a href="#L-160">160</a> <a href="#L-161">161</a> <a href="#L-162">162</a> <a href="#L-163">163</a> <a href="#L-164">164</a> <a href="#L-165">165</a> <a href="#L-166">166</a> <a href="#L-167">167</a> <a href="#L-168">168</a> <a href="#L-169">169</a> <a href="#L-170">170</a> <a href="#L-171">171</a> <a href="#L-172">172</a> <a href="#L-173">173</a> <a href="#L-174">174</a> <a href="#L-175">175</a> <a href="#L-176">176</a> <a href="#L-177">177</a> <a href="#L-178">178</a> <a href="#L-179">179</a> <a href="#L-180">180</a> <a href="#L-181">181</a> <a href="#L-182">182</a> <a href="#L-183">183</a> <a href="#L-184">184</a> <a href="#L-185">185</a> <a href="#L-186">186</a> <a href="#L-187">187</a> <a href="#L-188">188</a> <a href="#L-189">189</a> <a href="#L-190">190</a> <a href="#L-191">191</a> <a href="#L-192">192</a> <a href="#L-193">193</a> <a href="#L-194">194</a> <a href="#L-195">195</a> <a href="#L-196">196</a> <a href="#L-197">197</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="o">////</span> <span class="nt">Namespaces</span> <span class="o">////</span> </span><span id="L-2"><a name="L-2"></a> </span><span id="L-3"><a name="L-3"></a><span class="nc">.clearfix</span><span class="o">()</span> <span class="p">{</span> </span><span id="L-4"><a name="L-4"></a> <span class="n">zoom</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span> </span><span id="L-5"><a name="L-5"></a> <span class="o">&amp;:</span><span class="n">before</span> <span class="err">{</span> </span><span id="L-6"><a name="L-6"></a> <span class="nb">content</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">;</span> </span><span id="L-7"><a name="L-7"></a> <span class="nb">display</span><span class="o">:</span> <span class="nb">block</span><span class="p">;</span> </span><span id="L-8"><a name="L-8"></a> <span class="p">}</span> </span><span id="L-9"><a name="L-9"></a> <span class="o">&amp;</span><span class="nd">:after</span> <span class="p">{</span> </span><span id="L-10"><a name="L-10"></a> <span class="nb">content</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">;</span> </span><span id="L-11"><a name="L-11"></a> <span class="nb">display</span><span class="o">:</span> <span class="n">table</span><span class="p">;</span> </span><span id="L-12"><a name="L-12"></a> <span class="nb">clear</span><span class="o">:</span> <span class="nb">both</span><span class="p">;</span> </span><span id="L-13"><a name="L-13"></a> <span class="p">}</span> </span><span id="L-14"><a name="L-14"></a><span class="err">}</span> </span><span id="L-15"><a name="L-15"></a> </span><span id="L-16"><a name="L-16"></a><span class="o">////</span> <span class="nt">Mixins</span> <span class="o">////</span> </span><span id="L-17"><a name="L-17"></a> </span><span id="L-18"><a name="L-18"></a><span class="o">//</span> <span class="nt">Borders</span> </span><span id="L-19"><a name="L-19"></a><span class="nc">.bordered</span> <span class="o">(</span><span class="k">@color</span><span class="o">:</span> <span class="nn">#EEE</span><span class="o">,</span> <span class="k">@width</span><span class="o">:</span> <span class="nt">1px</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-20"><a name="L-20"></a> <span class="nt">border</span><span class="o">:</span> <span class="k">@width</span> <span class="nt">solid</span> <span class="k">@color</span><span class="p">;</span> </span><span id="L-21"><a name="L-21"></a><span class="err">}</span> </span><span id="L-22"><a name="L-22"></a><span class="nc">.bordered-specific</span> <span class="o">(</span><span class="k">@top-color</span><span class="o">:</span> <span class="nn">#EEE</span><span class="o">,</span> <span class="k">@right-color</span><span class="o">:</span> <span class="nn">#EEE</span><span class="o">,</span> <span class="k">@bottom-color</span><span class="o">:</span> <span class="nn">#EEE</span><span class="o">,</span> <span class="k">@left-color</span><span class="o">:</span> <span class="nn">#EEE</span><span class="o">,</span> <span class="k">@style</span><span class="o">:</span> <span class="nt">solid</span><span class="o">,</span> <span class="k">@width</span><span class="o">:</span> <span class="nt">1px</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-23"><a name="L-23"></a> <span class="nt">border-top</span><span class="o">:</span> <span class="k">@width</span> <span class="k">@style</span> <span class="k">@width</span> <span class="k">@top-color</span><span class="p">;</span> </span><span id="L-24"><a name="L-24"></a> <span class="nt">border-left</span><span class="o">:</span> <span class="k">@width</span> <span class="k">@style</span> <span class="k">@left-color</span><span class="p">;</span> </span><span id="L-25"><a name="L-25"></a> <span class="nt">border-right</span><span class="o">:</span> <span class="k">@width</span> <span class="k">@style</span> <span class="k">@right-color</span><span class="p">;</span> </span><span id="L-26"><a name="L-26"></a> <span class="nt">border-bottom</span><span class="o">:</span> <span class="k">@width</span> <span class="k">@style</span> <span class="k">@bottom-color</span><span class="p">;</span> </span><span id="L-27"><a name="L-27"></a><span class="err">}</span> </span><span id="L-28"><a name="L-28"></a><span class="nc">.border-radius</span> <span class="o">(</span><span class="k">@radius</span><span class="o">:</span> <span class="nt">0</span><span class="nc">.313em</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-29"><a name="L-29"></a> <span class="nt">-webkit-border-radius</span><span class="o">:</span> <span class="k">@radius</span><span class="p">;</span> </span><span id="L-30"><a name="L-30"></a> <span class="nt">-moz-border-radius</span><span class="o">:</span> <span class="k">@radius</span><span class="p">;</span> </span><span id="L-31"><a name="L-31"></a> <span class="nt">-ms-border-radius</span><span class="o">:</span> <span class="k">@radius</span><span class="p">;</span> </span><span id="L-32"><a name="L-32"></a> <span class="nt">-o-border-radius</span><span class="o">:</span> <span class="k">@radius</span><span class="p">;</span> </span><span id="L-33"><a name="L-33"></a> <span class="nt">border-radius</span><span class="o">:</span> <span class="k">@radius</span><span class="p">;</span> </span><span id="L-34"><a name="L-34"></a><span class="p">}</span> </span><span id="L-35"><a name="L-35"></a><span class="nc">.border-radius-specific</span> <span class="o">(</span><span class="k">@topright</span><span class="o">:</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@bottomright</span><span class="o">:</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@bottomleft</span><span class="o">:</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@topleft</span><span class="o">:</span> <span class="nt">0</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-36"><a name="L-36"></a> <span class="nt">-webkit-border-top-right-radius</span><span class="o">:</span> <span class="k">@topright</span><span class="p">;</span> </span><span id="L-37"><a name="L-37"></a> <span class="nt">-webkit-border-bottom-right-radius</span><span class="o">:</span> <span class="k">@bottomright</span><span class="p">;</span> </span><span id="L-38"><a name="L-38"></a> <span class="nt">-webkit-border-bottom-left-radius</span><span class="o">:</span> <span class="k">@bottomleft</span><span class="p">;</span> </span><span id="L-39"><a name="L-39"></a> <span class="nt">-webkit-border-top-left-radius</span><span class="o">:</span> <span class="k">@topleft</span><span class="p">;</span> </span><span id="L-40"><a name="L-40"></a> <span class="nt">-moz-border-radius-topright</span><span class="o">:</span> <span class="k">@topright</span><span class="p">;</span> </span><span id="L-41"><a name="L-41"></a> <span class="nt">-moz-border-radius-bottomright</span><span class="o">:</span> <span class="k">@bottomright</span><span class="p">;</span> </span><span id="L-42"><a name="L-42"></a> <span class="nt">-moz-border-radius-bottomleft</span><span class="o">:</span> <span class="k">@bottomleft</span><span class="p">;</span> </span><span id="L-43"><a name="L-43"></a> <span class="nt">-moz-border-radius-topleft</span><span class="o">:</span> <span class="k">@topleft</span><span class="p">;</span> </span><span id="L-44"><a name="L-44"></a> <span class="nt">border-top-right-radius</span><span class="o">:</span> <span class="k">@topright</span><span class="p">;</span> </span><span id="L-45"><a name="L-45"></a> <span class="nt">border-bottom-right-radius</span><span class="o">:</span> <span class="k">@bottomright</span><span class="p">;</span> </span><span id="L-46"><a name="L-46"></a> <span class="nt">border-bottom-left-radius</span><span class="o">:</span> <span class="k">@bottomleft</span><span class="p">;</span> </span><span id="L-47"><a name="L-47"></a> <span class="nt">border-top-left-radius</span><span class="o">:</span> <span class="k">@topleft</span><span class="p">;</span> </span><span id="L-48"><a name="L-48"></a> <span class="nc">.background-clip</span><span class="o">(</span><span class="nt">padding-box</span><span class="o">);</span> </span><span id="L-49"><a name="L-49"></a><span class="p">}</span> </span><span id="L-50"><a name="L-50"></a> </span><span id="L-51"><a name="L-51"></a><span class="o">//</span> <span class="nt">Backgrounds</span><span class="o">,</span> <span class="nt">Gradients</span><span class="o">,</span> <span class="nt">and</span> <span class="nt">Opacity</span> </span><span id="L-52"><a name="L-52"></a><span class="nc">.background-clip</span> <span class="o">(</span><span class="k">@argument</span><span class="o">:</span> <span class="nt">padding-box</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-53"><a name="L-53"></a> <span class="nt">-moz-background-clip</span><span class="o">:</span> <span class="k">@argument</span><span class="p">;</span> </span><span id="L-54"><a name="L-54"></a> <span class="nt">-webkit-background-clip</span><span class="o">:</span> <span class="k">@argument</span><span class="p">;</span> </span><span id="L-55"><a name="L-55"></a> <span class="nt">background-clip</span><span class="o">:</span> <span class="k">@argument</span><span class="p">;</span> </span><span id="L-56"><a name="L-56"></a><span class="p">}</span> </span><span id="L-57"><a name="L-57"></a><span class="nc">.gradient-stops</span> <span class="o">(</span><span class="k">@point</span><span class="o">:</span> <span class="nt">top</span><span class="o">,</span> <span class="k">@stop1</span><span class="o">:</span> <span class="nt">0</span><span class="o">%,</span> <span class="k">@stop2</span><span class="o">:</span> <span class="nt">8</span><span class="o">%,</span> <span class="k">@startColor</span><span class="o">:</span> <span class="nn">#999</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">:</span> <span class="nn">#fff</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-58"><a name="L-58"></a> <span class="nt">background</span><span class="o">:</span> <span class="k">@endColor</span><span class="p">;</span> <span class="o">//</span> <span class="nt">Old</span> <span class="nt">browsers</span> </span><span id="L-59"><a name="L-59"></a> <span class="nt">background</span><span class="o">:</span> <span class="nt">-moz-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@startColor</span> <span class="k">@stop1</span><span class="o">,</span> <span class="k">@endColor</span> <span class="k">@stop2</span><span class="o">)</span><span class="p">;</span> <span class="o">//</span> <span class="nt">FF3</span><span class="nc">.6</span><span class="o">+</span> </span><span id="L-60"><a name="L-60"></a> <span class="nt">background</span><span class="o">:</span> <span class="nt">-webkit-gradient</span><span class="o">(</span><span class="nt">linear</span><span class="o">,</span> <span class="nt">left</span> <span class="nt">top</span><span class="o">,</span> <span class="nt">left</span> <span class="nt">bottom</span><span class="o">,</span> <span class="nt">color-stop</span><span class="o">(</span><span class="k">@stop1</span><span class="o">,</span><span class="k">@startColor</span><span class="o">),</span> <span class="nt">color-stop</span><span class="o">(</span><span class="k">@stop2</span><span class="o">,</span><span class="k">@endColor</span><span class="o">))</span><span class="p">;</span> <span class="o">//</span> <span class="nt">Chrome</span><span class="o">,</span><span class="nt">Safari4</span><span class="o">+</span> </span><span id="L-61"><a name="L-61"></a> <span class="nt">background</span><span class="o">:</span> <span class="nt">-webkit-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@startColor</span> <span class="k">@stop1</span><span class="o">,</span> <span class="k">@endColor</span> <span class="k">@stop2</span><span class="o">)</span><span class="p">;</span> <span class="o">//</span> <span class="nt">Chrome10</span><span class="o">+,</span><span class="nt">Safari5</span><span class="nc">.1</span><span class="o">+</span> </span><span id="L-62"><a name="L-62"></a> <span class="nt">background</span><span class="o">:</span> <span class="nt">-o-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@startColor</span> <span class="k">@stop1</span><span class="o">,</span> <span class="k">@endColor</span> <span class="k">@stop2</span><span class="o">)</span><span class="p">;</span> <span class="o">//</span> <span class="nt">Opera</span> <span class="nt">11</span><span class="nc">.10</span><span class="o">+</span> </span><span id="L-63"><a name="L-63"></a> <span class="nt">background</span><span class="o">:</span> <span class="nt">-ms-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@startColor</span> <span class="k">@stop1</span><span class="o">,</span> <span class="k">@endColor</span> <span class="k">@stop2</span><span class="o">)</span><span class="p">;</span> <span class="o">//</span> <span class="nt">IE10</span><span class="o">+</span> </span><span id="L-64"><a name="L-64"></a> <span class="nt">background</span><span class="o">:</span> <span class="nt">linear-gradient</span><span class="o">(</span><span class="nt">to</span> <span class="nt">bottom</span><span class="o">,</span> <span class="k">@startColor</span> <span class="k">@stop1</span><span class="o">,</span> <span class="k">@endColor</span> <span class="k">@stop2</span><span class="o">)</span><span class="p">;</span> <span class="o">//</span> <span class="nt">W3C</span> </span><span id="L-65"><a name="L-65"></a><span class="err">}</span> </span><span id="L-66"><a name="L-66"></a><span class="nc">.gradient-l</span> <span class="o">(</span><span class="k">@startColor</span><span class="o">:</span> <span class="nn">#e4e4e4</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">:</span> <span class="nn">#fff</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-67"><a name="L-67"></a> <span class="nt">background-color</span><span class="o">:</span> <span class="k">@startColor</span><span class="p">;</span> </span><span id="L-68"><a name="L-68"></a> <span class="nt">background</span><span class="o">:</span> <span class="nt">-webkit-gradient</span><span class="o">(</span><span class="nt">linear</span><span class="o">,</span> <span class="nt">left</span> <span class="nt">top</span><span class="o">,</span> <span class="nt">left</span> <span class="nt">bottom</span><span class="o">,</span> <span class="nt">from</span><span class="o">(</span><span class="k">@startColor</span><span class="o">),</span> <span class="nt">to</span><span class="o">(</span><span class="k">@endColor</span><span class="o">))</span><span class="p">;</span> </span><span id="L-69"><a name="L-69"></a> <span class="nt">background</span><span class="o">:</span> <span class="nt">-webkit-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@startColor</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">)</span><span class="p">;</span> </span><span id="L-70"><a name="L-70"></a> <span class="nt">background</span><span class="o">:</span> <span class="nt">-moz-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@startColor</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">)</span><span class="p">;</span> </span><span id="L-71"><a name="L-71"></a> <span class="nt">background</span><span class="o">:</span> <span class="nt">-ms-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@startColor</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">)</span><span class="p">;</span> </span><span id="L-72"><a name="L-72"></a> <span class="nt">background</span><span class="o">:</span> <span class="nt">-o-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@startColor</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">)</span><span class="p">;</span> </span><span id="L-73"><a name="L-73"></a> <span class="nt">filter</span><span class="o">:</span> <span class="nt">e</span><span class="o">(%(</span><span class="s2">&quot;progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;%d&#39;, endColorstr=&#39;%d&#39;, GradientType=0)&quot;</span><span class="o">,</span><span class="k">@endColor</span><span class="o">,</span><span class="k">@startColor</span><span class="o">))</span><span class="p">;</span> </span><span id="L-74"><a name="L-74"></a><span class="err">}</span> </span><span id="L-75"><a name="L-75"></a><span class="nc">.gradient-l2</span> <span class="o">(</span><span class="k">@startColor</span><span class="o">:</span> <span class="nn">#e4e4e4</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">:</span> <span class="nn">#fff</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-76"><a name="L-76"></a> <span class="nt">background-color</span><span class="o">:</span> <span class="k">@startColor</span><span class="p">;</span> </span><span id="L-77"><a name="L-77"></a> <span class="nt">background-image</span><span class="o">:</span> <span class="nt">-webkit-gradient</span><span class="o">(</span><span class="nt">linear</span><span class="o">,</span> <span class="nt">left</span> <span class="nt">top</span><span class="o">,</span> <span class="nt">left</span> <span class="nt">bottom</span><span class="o">,</span> <span class="nt">color-stop</span><span class="o">(</span><span class="nt">0</span><span class="o">%,</span><span class="k">@startColor</span><span class="o">),</span> <span class="nt">color-stop</span><span class="o">(</span><span class="nt">50</span><span class="o">%,</span><span class="k">@endColor</span><span class="o">),</span> <span class="nt">color-stop</span><span class="o">(</span><span class="nt">100</span><span class="o">%,</span><span class="k">@startColor</span><span class="o">))</span><span class="p">;</span> </span><span id="L-78"><a name="L-78"></a> <span class="nt">background-image</span><span class="o">:</span> <span class="nt">-webkit-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@startColor</span> <span class="nt">0</span><span class="o">%,</span> <span class="k">@endColor</span> <span class="nt">50</span><span class="o">%,</span> <span class="k">@startColor</span> <span class="nt">100</span><span class="o">%)</span><span class="p">;</span> </span><span id="L-79"><a name="L-79"></a> <span class="nt">background-image</span><span class="o">:</span> <span class="nt">-moz-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@startColor</span> <span class="nt">0</span><span class="o">%,</span> <span class="k">@endColor</span> <span class="nt">50</span><span class="o">%,</span> <span class="k">@startColor</span> <span class="nt">100</span><span class="o">%)</span><span class="p">;</span> </span><span id="L-80"><a name="L-80"></a> <span class="nt">background-image</span><span class="o">:</span> <span class="nt">-ms-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@startColor</span> <span class="nt">0</span><span class="o">%,</span> <span class="k">@endColor</span> <span class="nt">50</span><span class="o">%,</span> <span class="k">@startColor</span> <span class="nt">100</span><span class="o">%)</span><span class="p">;</span> </span><span id="L-81"><a name="L-81"></a> <span class="nt">background-image</span><span class="o">:</span> <span class="nt">-o-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@startColor</span> <span class="nt">0</span><span class="o">%,</span> <span class="k">@endColor</span> <span class="nt">50</span><span class="o">%,</span> <span class="k">@endColor</span> <span class="nt">100</span><span class="o">%)</span><span class="p">;</span> </span><span id="L-82"><a name="L-82"></a> <span class="nt">background-image</span><span class="o">:</span> <span class="nt">linear-gradient</span><span class="o">(</span><span class="nt">to</span> <span class="nt">bottom</span><span class="o">,</span> <span class="k">@startColor</span> <span class="nt">0</span><span class="o">%,</span> <span class="k">@endColor</span> <span class="nt">50</span><span class="o">%,</span> <span class="k">@startColor</span> <span class="nt">100</span><span class="o">%)</span><span class="p">;</span> </span><span id="L-83"><a name="L-83"></a> <span class="nt">filter</span><span class="o">:</span> <span class="nt">e</span><span class="o">(%(</span><span class="s2">&quot;progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;%d&#39;, endColorstr=&#39;%d&#39;, GradientType=1)&quot;</span><span class="o">,</span><span class="k">@endColor</span><span class="o">,</span><span class="k">@startColor</span><span class="o">))</span><span class="p">;</span> </span><span id="L-84"><a name="L-84"></a><span class="err">}</span> </span><span id="L-85"><a name="L-85"></a><span class="nc">.gradient-h</span> <span class="o">(</span><span class="k">@startColor</span><span class="o">:</span> <span class="nn">#e4e4e4</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">:</span> <span class="nn">#fff</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-86"><a name="L-86"></a> <span class="nt">background-color</span><span class="o">:</span> <span class="k">@startColor</span><span class="p">;</span> </span><span id="L-87"><a name="L-87"></a> <span class="nt">background-image</span><span class="o">:</span> <span class="nt">-webkit-gradient</span><span class="o">(</span><span class="nt">linear</span><span class="o">,</span> <span class="nt">left</span> <span class="nt">top</span><span class="o">,</span> <span class="nt">right</span> <span class="nt">top</span><span class="o">,</span> <span class="nt">from</span><span class="o">(</span><span class="k">@startColor</span><span class="o">),</span> <span class="nt">to</span><span class="o">(</span><span class="k">@endColor</span><span class="o">))</span><span class="p">;</span> </span><span id="L-88"><a name="L-88"></a> <span class="nt">background-image</span><span class="o">:</span> <span class="nt">-webkit-linear-gradient</span><span class="o">(</span><span class="nt">left</span><span class="o">,</span> <span class="k">@startColor</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">)</span><span class="p">;</span> </span><span id="L-89"><a name="L-89"></a> <span class="nt">background-image</span><span class="o">:</span> <span class="nt">-moz-linear-gradient</span><span class="o">(</span><span class="nt">left</span><span class="o">,</span> <span class="k">@startColor</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">)</span><span class="p">;</span> </span><span id="L-90"><a name="L-90"></a> <span class="nt">background-image</span><span class="o">:</span> <span class="nt">-ms-linear-gradient</span><span class="o">(</span><span class="nt">left</span><span class="o">,</span> <span class="k">@startColor</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">)</span><span class="p">;</span> </span><span id="L-91"><a name="L-91"></a> <span class="nt">background-image</span><span class="o">:</span> <span class="nt">-o-linear-gradient</span><span class="o">(</span><span class="nt">left</span><span class="o">,</span> <span class="k">@startColor</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">)</span><span class="p">;</span> </span><span id="L-92"><a name="L-92"></a> <span class="nt">filter</span><span class="o">:</span> <span class="nt">e</span><span class="o">(%(</span><span class="s2">&quot;progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;%d&#39;, endColorstr=&#39;%d&#39;, GradientType=1)&quot;</span><span class="o">,</span><span class="k">@endColor</span><span class="o">,</span><span class="k">@startColor</span><span class="o">))</span><span class="p">;</span> </span><span id="L-93"><a name="L-93"></a><span class="err">}</span> </span><span id="L-94"><a name="L-94"></a><span class="nc">.gradient-h2</span> <span class="o">(</span><span class="k">@startColor</span><span class="o">:</span> <span class="nn">#e4e4e4</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">:</span> <span class="nn">#fff</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-95"><a name="L-95"></a> <span class="nt">background-color</span><span class="o">:</span> <span class="k">@startColor</span><span class="p">;</span> </span><span id="L-96"><a name="L-96"></a> <span class="nt">background-image</span><span class="o">:</span> <span class="nt">-webkit-gradient</span><span class="o">(</span><span class="nt">linear</span><span class="o">,</span> <span class="nt">left</span> <span class="nt">top</span><span class="o">,</span> <span class="nt">right</span> <span class="nt">top</span><span class="o">,</span> <span class="nt">color-stop</span><span class="o">(</span><span class="nt">0</span><span class="o">%,</span><span class="k">@startColor</span><span class="o">),</span> <span class="nt">color-stop</span><span class="o">(</span><span class="nt">50</span><span class="o">%,</span><span class="k">@endColor</span><span class="o">),</span> <span class="nt">color-stop</span><span class="o">(</span><span class="nt">100</span><span class="o">%,</span><span class="k">@startColor</span><span class="o">))</span><span class="p">;</span> </span><span id="L-97"><a name="L-97"></a> <span class="nt">background-image</span><span class="o">:</span> <span class="nt">-webkit-linear-gradient</span><span class="o">(</span><span class="nt">left</span><span class="o">,</span> <span class="k">@startColor</span> <span class="nt">0</span><span class="o">%,</span> <span class="k">@endColor</span> <span class="nt">50</span><span class="o">%,</span> <span class="k">@startColor</span> <span class="nt">100</span><span class="o">%)</span><span class="p">;</span> </span><span id="L-98"><a name="L-98"></a> <span class="nt">background-image</span><span class="o">:</span> <span class="nt">-moz-linear-gradient</span><span class="o">(</span><span class="nt">left</span><span class="o">,</span> <span class="k">@startColor</span> <span class="nt">0</span><span class="o">%,</span> <span class="k">@endColor</span> <span class="nt">50</span><span class="o">%,</span> <span class="k">@startColor</span> <span class="nt">100</span><span class="o">%)</span><span class="p">;</span> </span><span id="L-99"><a name="L-99"></a> <span class="nt">background-image</span><span class="o">:</span> <span class="nt">-ms-linear-gradient</span><span class="o">(</span><span class="nt">left</span><span class="o">,</span> <span class="k">@startColor</span> <span class="nt">0</span><span class="o">%,</span> <span class="k">@endColor</span> <span class="nt">50</span><span class="o">%,</span> <span class="k">@startColor</span> <span class="nt">100</span><span class="o">%)</span><span class="p">;</span> </span><span id="L-100"><a name="L-100"></a> <span class="nt">background-image</span><span class="o">:</span> <span class="nt">-o-linear-gradient</span><span class="o">(</span><span class="nt">left</span><span class="o">,</span> <span class="k">@startColor</span> <span class="nt">0</span><span class="o">%,</span> <span class="k">@endColor</span> <span class="nt">50</span><span class="o">%,</span> <span class="k">@endColor</span> <span class="nt">100</span><span class="o">%)</span><span class="p">;</span> </span><span id="L-101"><a name="L-101"></a> <span class="nt">background-image</span><span class="o">:</span> <span class="nt">linear-gradient</span><span class="o">(</span><span class="nt">to</span> <span class="nt">right</span><span class="o">,</span> <span class="k">@startColor</span> <span class="nt">0</span><span class="o">%,</span> <span class="k">@endColor</span> <span class="nt">50</span><span class="o">%,</span> <span class="k">@startColor</span> <span class="nt">100</span><span class="o">%)</span><span class="p">;</span> </span><span id="L-102"><a name="L-102"></a> <span class="nt">filter</span><span class="o">:</span> <span class="nt">e</span><span class="o">(%(</span><span class="s2">&quot;progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;%d&#39;, endColorstr=&#39;%d&#39;, GradientType=1)&quot;</span><span class="o">,</span><span class="k">@endColor</span><span class="o">,</span><span class="k">@startColor</span><span class="o">))</span><span class="p">;</span> </span><span id="L-103"><a name="L-103"></a><span class="err">}</span> </span><span id="L-104"><a name="L-104"></a><span class="nc">.opacity</span> <span class="o">(</span><span class="k">@opacity</span><span class="o">:</span> <span class="nt">0</span><span class="nc">.5</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-105"><a name="L-105"></a> <span class="nt">-moz-opacity</span><span class="o">:</span> <span class="k">@opacity</span><span class="p">;</span> </span><span id="L-106"><a name="L-106"></a> <span class="nt">-khtml-opacity</span><span class="o">:</span> <span class="k">@opacity</span><span class="p">;</span> </span><span id="L-107"><a name="L-107"></a> <span class="nt">-webkit-opacity</span><span class="o">:</span> <span class="k">@opacity</span><span class="p">;</span> </span><span id="L-108"><a name="L-108"></a> <span class="nt">opacity</span><span class="o">:</span> <span class="k">@opacity</span><span class="p">;</span> </span><span id="L-109"><a name="L-109"></a> <span class="k">@opperc</span><span class="o">:</span> <span class="k">@opacity</span> <span class="o">*</span> <span class="nt">100</span><span class="p">;</span> </span><span id="L-110"><a name="L-110"></a> <span class="nt">-ms-filter</span><span class="o">:</span> <span class="o">~</span><span class="s2">&quot;progid:DXImageTransform.Microsoft.Alpha([email protected]{opperc})&quot;</span><span class="p">;</span> </span><span id="L-111"><a name="L-111"></a> <span class="nt">filter</span><span class="o">:</span> <span class="o">~</span><span class="s2">&quot;alpha([email protected]{opperc})&quot;</span><span class="o">;</span> </span><span id="L-112"><a name="L-112"></a><span class="p">}</span> </span><span id="L-113"><a name="L-113"></a> </span><span id="L-114"><a name="L-114"></a><span class="o">//</span> <span class="nt">Multiple</span> <span class="nt">Backgrounds</span> </span><span id="L-115"><a name="L-115"></a><span class="o">//</span> <span class="nt">Icons</span> </span><span id="L-116"><a name="L-116"></a><span class="nc">.social-ico</span><span class="o">(</span><span class="k">@x-pos</span><span class="o">:</span> <span class="nt">0</span><span class="o">,</span><span class="k">@startColor</span><span class="o">:</span> <span class="nn">#e4e4e4</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">:</span> <span class="nn">#fff</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-117"><a name="L-117"></a> <span class="nt">background-color</span><span class="o">:</span> <span class="k">@startColor</span><span class="p">;</span> </span><span id="L-118"><a name="L-118"></a> <span class="nt">background</span><span class="o">:</span> <span class="nt">url</span><span class="o">(/</span><span class="nt">Content</span><span class="o">/</span><span class="nt">images</span><span class="o">/</span><span class="nt">sprites</span><span class="o">/</span><span class="nt">sprite</span><span class="nc">.png</span><span class="o">)</span> <span class="k">@x-pos</span> <span class="nt">0</span> <span class="nt">no-repeat</span><span class="o">,</span> </span><span id="L-119"><a name="L-119"></a> <span class="nt">-webkit-gradient</span><span class="o">(</span><span class="nt">linear</span><span class="o">,</span> <span class="nt">left</span> <span class="nt">top</span><span class="o">,</span> <span class="nt">left</span> <span class="nt">bottom</span><span class="o">,</span> <span class="nt">from</span><span class="o">(</span><span class="k">@startColor</span><span class="o">),</span> <span class="nt">to</span><span class="o">(</span><span class="k">@endColor</span><span class="o">))</span><span class="p">;</span> </span><span id="L-120"><a name="L-120"></a> <span class="nt">background</span><span class="o">:</span> <span class="nt">url</span><span class="o">(/</span><span class="nt">Content</span><span class="o">/</span><span class="nt">images</span><span class="o">/</span><span class="nt">sprite</span><span class="nc">.png</span><span class="o">)</span> <span class="k">@x-pos</span> <span class="nt">0</span> <span class="nt">no-repeat</span><span class="o">,</span> </span><span id="L-121"><a name="L-121"></a> <span class="nt">-webkit-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@startColor</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">)</span><span class="p">;</span> </span><span id="L-122"><a name="L-122"></a> <span class="nt">background</span><span class="o">:</span> <span class="nt">url</span><span class="o">(/</span><span class="nt">Content</span><span class="o">/</span><span class="nt">images</span><span class="o">/</span><span class="nt">sprite</span><span class="nc">.png</span><span class="o">)</span> <span class="k">@x-pos</span> <span class="nt">0</span> <span class="nt">no-repeat</span><span class="o">,</span> </span><span id="L-123"><a name="L-123"></a> <span class="nt">-moz-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@startColor</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">)</span><span class="p">;</span> </span><span id="L-124"><a name="L-124"></a> <span class="nt">background</span><span class="o">:</span> <span class="nt">url</span><span class="o">(/</span><span class="nt">Content</span><span class="o">/</span><span class="nt">images</span><span class="o">/</span><span class="nt">sprite</span><span class="nc">.png</span><span class="o">)</span> <span class="k">@x-pos</span> <span class="nt">0</span> <span class="nt">no-repeat</span><span class="o">,</span> </span><span id="L-125"><a name="L-125"></a> <span class="nt">-ms-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@startColor</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">)</span><span class="p">;</span> </span><span id="L-126"><a name="L-126"></a> <span class="nt">background</span><span class="o">:</span> <span class="nt">url</span><span class="o">(/</span><span class="nt">Content</span><span class="o">/</span><span class="nt">images</span><span class="o">/</span><span class="nt">sprite</span><span class="nc">.png</span><span class="o">)</span> <span class="k">@x-pos</span> <span class="nt">0</span> <span class="nt">no-repeat</span><span class="o">,</span> </span><span id="L-127"><a name="L-127"></a> <span class="nt">-o-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@startColor</span><span class="o">,</span> <span class="k">@endColor</span><span class="o">)</span><span class="p">;</span> </span><span id="L-128"><a name="L-128"></a><span class="err">}</span> </span><span id="L-129"><a name="L-129"></a> </span><span id="L-130"><a name="L-130"></a><span class="o">//</span> <span class="nt">Center</span> <span class="nt">elements</span> </span><span id="L-131"><a name="L-131"></a><span class="nc">.center</span> <span class="o">(</span><span class="k">@width</span><span class="o">:</span> <span class="nt">80</span><span class="o">%)</span> <span class="p">{</span> </span><span id="L-132"><a name="L-132"></a> <span class="nt">margin-left</span><span class="o">:</span> <span class="nt">auto</span><span class="o">;</span> </span><span id="L-133"><a name="L-133"></a> <span class="nt">margin-right</span><span class="o">:</span> <span class="nt">auto</span><span class="o">;</span> </span><span id="L-134"><a name="L-134"></a> <span class="nt">width</span><span class="o">:</span> <span class="k">@width</span><span class="p">;</span> </span><span id="L-135"><a name="L-135"></a><span class="p">}</span> </span><span id="L-136"><a name="L-136"></a><span class="nc">.img-align</span> <span class="o">(</span><span class="k">@pos</span><span class="o">:</span> <span class="nt">center</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-137"><a name="L-137"></a> <span class="nt">text-align</span><span class="o">:</span> <span class="k">@pos</span><span class="p">;</span> </span><span id="L-138"><a name="L-138"></a><span class="p">}</span> </span><span id="L-139"><a name="L-139"></a> </span><span id="L-140"><a name="L-140"></a><span class="o">//</span> <span class="nt">Shadows</span> </span><span id="L-141"><a name="L-141"></a><span class="nc">.drop-shadow</span> <span class="o">(</span><span class="k">@x</span><span class="o">:</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@y</span><span class="o">:</span> <span class="nt">1px</span><span class="o">,</span> <span class="k">@blur</span><span class="o">:</span> <span class="nt">2px</span><span class="o">,</span> <span class="k">@spread</span><span class="o">:</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@alpha</span><span class="o">:</span> <span class="nt">0</span><span class="nc">.25</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-142"><a name="L-142"></a> <span class="nt">-webkit-box-shadow</span><span class="o">:</span> <span class="k">@x</span> <span class="k">@y</span> <span class="k">@blur</span> <span class="k">@spread</span> <span class="nt">rgba</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@alpha</span><span class="o">)</span><span class="p">;</span> </span><span id="L-143"><a name="L-143"></a> <span class="nt">-moz-box-shadow</span><span class="o">:</span> <span class="k">@x</span> <span class="k">@y</span> <span class="k">@blur</span> <span class="k">@spread</span> <span class="nt">rgba</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@alpha</span><span class="o">)</span><span class="p">;</span> </span><span id="L-144"><a name="L-144"></a> <span class="nt">box-shadow</span><span class="o">:</span> <span class="k">@x</span> <span class="k">@y</span> <span class="k">@blur</span> <span class="k">@spread</span> <span class="nt">rgba</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@alpha</span><span class="o">)</span><span class="p">;</span> </span><span id="L-145"><a name="L-145"></a><span class="err">}</span> </span><span id="L-146"><a name="L-146"></a><span class="nc">.inner-shadow</span> <span class="o">(</span><span class="k">@x</span><span class="o">:</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@y</span><span class="o">:</span> <span class="nt">1px</span><span class="o">,</span> <span class="k">@blur</span><span class="o">:</span> <span class="nt">2px</span><span class="o">,</span> <span class="k">@spread</span><span class="o">:</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@alpha</span><span class="o">:</span> <span class="nt">0</span><span class="nc">.25</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-147"><a name="L-147"></a> <span class="nt">-webkit-box-shadow</span><span class="o">:</span> <span class="nt">inset</span> <span class="k">@x</span> <span class="k">@y</span> <span class="k">@blur</span> <span class="k">@spread</span> <span class="nt">rgba</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@alpha</span><span class="o">)</span><span class="p">;</span> </span><span id="L-148"><a name="L-148"></a> <span class="nt">-moz-box-shadow</span><span class="o">:</span> <span class="nt">inset</span> <span class="k">@x</span> <span class="k">@y</span> <span class="k">@blur</span> <span class="k">@spread</span> <span class="nt">rgba</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@alpha</span><span class="o">)</span><span class="p">;</span> </span><span id="L-149"><a name="L-149"></a> <span class="nt">box-shadow</span><span class="o">:</span> <span class="nt">inset</span> <span class="k">@x</span> <span class="k">@y</span> <span class="k">@blur</span> <span class="k">@spread</span> <span class="nt">rgba</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@alpha</span><span class="o">)</span><span class="p">;</span> </span><span id="L-150"><a name="L-150"></a><span class="err">}</span> </span><span id="L-151"><a name="L-151"></a><span class="nc">.box-shadow</span> <span class="o">(</span><span class="k">@arguments</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-152"><a name="L-152"></a> <span class="nt">-webkit-box-shadow</span><span class="o">:</span> <span class="k">@arguments</span><span class="p">;</span> </span><span id="L-153"><a name="L-153"></a> <span class="nt">-moz-box-shadow</span><span class="o">:</span> <span class="k">@arguments</span><span class="p">;</span> </span><span id="L-154"><a name="L-154"></a> <span class="nt">box-shadow</span><span class="o">:</span> <span class="k">@arguments</span><span class="p">;</span> </span><span id="L-155"><a name="L-155"></a><span class="p">}</span> </span><span id="L-156"><a name="L-156"></a><span class="nc">.text-shadow</span> <span class="o">(</span><span class="k">@string</span><span class="o">:</span> <span class="nt">0</span> <span class="nt">1px</span> <span class="nt">3px</span> <span class="nt">rgba</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="nc">.25</span><span class="o">))</span> <span class="p">{</span> </span><span id="L-157"><a name="L-157"></a> <span class="nt">text-shadow</span><span class="o">:</span> <span class="k">@string</span><span class="p">;</span> </span><span id="L-158"><a name="L-158"></a><span class="p">}</span> </span><span id="L-159"><a name="L-159"></a> </span><span id="L-160"><a name="L-160"></a><span class="o">//</span> <span class="nt">Motion</span> </span><span id="L-161"><a name="L-161"></a><span class="nc">.animation</span> <span class="o">(</span><span class="k">@name</span><span class="o">,</span> <span class="k">@duration</span><span class="o">:</span> <span class="nt">300ms</span><span class="o">,</span> <span class="k">@delay</span><span class="o">:</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@ease</span><span class="o">:</span> <span class="nt">ease</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-162"><a name="L-162"></a> <span class="nt">-webkit-animation</span><span class="o">:</span> <span class="k">@name</span> <span class="k">@duration</span> <span class="k">@delay</span> <span class="k">@ease</span><span class="p">;</span> </span><span id="L-163"><a name="L-163"></a> <span class="nt">-moz-animation</span><span class="o">:</span> <span class="k">@name</span> <span class="k">@duration</span> <span class="k">@delay</span> <span class="k">@ease</span><span class="p">;</span> </span><span id="L-164"><a name="L-164"></a> <span class="nt">-ms-animation</span><span class="o">:</span> <span class="k">@name</span> <span class="k">@duration</span> <span class="k">@delay</span> <span class="k">@ease</span><span class="p">;</span> </span><span id="L-165"><a name="L-165"></a><span class="err">}</span> </span><span id="L-166"><a name="L-166"></a><span class="nc">.transition</span> <span class="o">(</span><span class="k">@duration</span><span class="o">:</span> <span class="nt">0</span><span class="nc">.3s</span><span class="o">,</span> <span class="k">@ease</span><span class="o">:</span> <span class="nt">ease-in</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-167"><a name="L-167"></a> <span class="nt">-webkit-transition</span><span class="o">:</span> <span class="nt">all</span> <span class="k">@duration</span> <span class="k">@ease</span><span class="p">;</span> </span><span id="L-168"><a name="L-168"></a> <span class="nt">-moz-transition</span><span class="o">:</span> <span class="nt">all</span> <span class="k">@duration</span> <span class="k">@ease</span><span class="p">;</span> </span><span id="L-169"><a name="L-169"></a> <span class="nt">-o-transition</span><span class="o">:</span> <span class="nt">all</span> <span class="k">@duration</span> <span class="k">@ease</span><span class="p">;</span> </span><span id="L-170"><a name="L-170"></a> <span class="nt">transition</span><span class="o">:</span> <span class="nt">all</span> <span class="k">@duration</span> <span class="k">@ease</span><span class="p">;</span> </span><span id="L-171"><a name="L-171"></a><span class="err">}</span> </span><span id="L-172"><a name="L-172"></a><span class="nc">.transition-duration</span> <span class="o">(</span><span class="k">@duration</span><span class="o">:</span> <span class="nt">0</span><span class="nc">.2s</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-173"><a name="L-173"></a> <span class="nt">-moz-transition-duration</span><span class="o">:</span> <span class="k">@duration</span><span class="p">;</span> </span><span id="L-174"><a name="L-174"></a> <span class="nt">-webkit-transition-duration</span><span class="o">:</span> <span class="k">@duration</span><span class="p">;</span> </span><span id="L-175"><a name="L-175"></a> <span class="nt">-o-transition-duration</span><span class="o">:</span> <span class="k">@duration</span><span class="p">;</span> </span><span id="L-176"><a name="L-176"></a> <span class="nt">transition-duration</span><span class="o">:</span> <span class="k">@duration</span><span class="p">;</span> </span><span id="L-177"><a name="L-177"></a><span class="p">}</span> </span><span id="L-178"><a name="L-178"></a><span class="nc">.rotate</span> <span class="o">(</span><span class="k">@deg</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-179"><a name="L-179"></a> <span class="nt">-webkit-transform</span><span class="o">:</span> <span class="nt">rotate</span><span class="o">(</span><span class="k">@deg</span><span class="o">)</span><span class="p">;</span> </span><span id="L-180"><a name="L-180"></a> <span class="nt">-moz-transform</span><span class="o">:</span> <span class="nt">rotate</span><span class="o">(</span><span class="k">@deg</span><span class="o">)</span><span class="p">;</span> </span><span id="L-181"><a name="L-181"></a> <span class="nt">-o-transform</span><span class="o">:</span> <span class="nt">rotate</span><span class="o">(</span><span class="k">@deg</span><span class="o">)</span><span class="p">;</span> </span><span id="L-182"><a name="L-182"></a> <span class="nt">transform</span><span class="o">:</span> <span class="nt">rotate</span><span class="o">(</span><span class="k">@deg</span><span class="o">)</span><span class="p">;</span> </span><span id="L-183"><a name="L-183"></a><span class="p">}</span> </span><span id="L-184"><a name="L-184"></a> </span><span id="L-185"><a name="L-185"></a><span class="o">//</span> <span class="nt">Misc</span><span class="o">.</span> </span><span id="L-186"><a name="L-186"></a><span class="nc">.box-sizing</span> <span class="o">(</span><span class="k">@type</span><span class="o">:</span> <span class="nt">border-box</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-187"><a name="L-187"></a> <span class="nt">-ms-box-sizing</span><span class="o">:</span> <span class="k">@type</span><span class="p">;</span> </span><span id="L-188"><a name="L-188"></a> <span class="nt">-moz-box-sizing</span><span class="o">:</span> <span class="k">@type</span><span class="p">;</span> </span><span id="L-189"><a name="L-189"></a> <span class="nt">-webkit-box-sizing</span><span class="o">:</span> <span class="k">@type</span><span class="p">;</span> </span><span id="L-190"><a name="L-190"></a> <span class="nt">box-sizing</span><span class="o">:</span> <span class="k">@type</span><span class="p">;</span> </span><span id="L-191"><a name="L-191"></a><span class="p">}</span> </span><span id="L-192"><a name="L-192"></a><span class="nc">.user-select</span> <span class="o">(</span><span class="k">@argument</span><span class="o">:</span> <span class="nt">none</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-193"><a name="L-193"></a> <span class="nt">-webkit-user-select</span><span class="o">:</span> <span class="k">@argument</span><span class="p">;</span> </span><span id="L-194"><a name="L-194"></a> <span class="nt">-moz-user-select</span><span class="o">:</span> <span class="k">@argument</span><span class="p">;</span> </span><span id="L-195"><a name="L-195"></a> <span class="nt">-ms-user-select</span><span class="o">:</span> <span class="k">@argument</span><span class="p">;</span> </span><span id="L-196"><a name="L-196"></a> <span class="nt">user-select</span><span class="o">:</span> <span class="k">@argument</span><span class="p">;</span> </span><span id="L-197"><a name="L-197"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
css, less, mixins