snipt

Ctrl+h for KB shortcuts

CSS

Foundation - Global Styles/Mixins

/* Global Foundation Mixins */

/* We use this to control border radius. */
@mixin radius($radius:$global-radius) {
  @if $radius {
    @if $experimental {
      -webkit-border-radius: $radius;
    }
    border-radius: $radius;
  }
}

/* We use this to create equal side border radius on elements. */
@mixin side-radius($side, $radius) {
  @if $side == left {
    @if $experimental {
      -moz-border-radius-bottomleft: $radius;
      -moz-border-radius-topleft: $radius;
      -webkit-border-bottom-left-radius: $radius;
      -webkit-border-top-left-radius: $radius;
    }
    border-bottom-left-radius: $radius;
    border-top-left-radius: $radius;
  }
  @else if $side == right {
    @if $experimental {
      -moz-border-radius-topright: $radius;
      -moz-border-radius-bottomright: $radius;
      -webkit-border-top-right-radius: $radius;
      -webkit-border-bottom-right-radius: $radius;
    }
    border-top-right-radius: $radius;
    border-bottom-right-radius: $radius;
  }
  @else if $side == top {
    @if $experimental {
      -moz-border-radius-topright: $radius;
      -moz-border-radius-topleft: $radius;
      -webkit-border-top-right-radius: $radius;
      -webkit-border-top-left-radius: $radius;
    }
    border-top-right-radius: $radius;
    border-top-left-radius: $radius;
  }
  @else if $side == bottom {
    @if $experimental {
      -moz-border-radius-bottomright: $radius;
      -moz-border-radius-bottomleft: $radius;
      -webkit-border-bottom-right-radius: $radius;
      -webkit-border-bottom-left-radius: $radius;
    }
    border-bottom-right-radius: $radius;
    border-bottom-left-radius: $radius;
  }
}

/* We can control whether or not we have inset shadows edges. */
@mixin inset-shadow($active:true) {
  @if $experimental {
    -webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset;
  }
  box-shadow: $shiny-edge-size $shiny-edge-color inset;

  @if $active { &:active {
    @if $experimental {
      -webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
    }
    box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
}

/* We use this to add transitions to elements */
@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
  @if $experimental {
    -webkit-transition: $property $speed $ease;
    -moz-transition: $property $speed $ease;
  }
  transition: $property $speed $ease;
}

/* We use this to add box-sizing across browser prefixes */
@mixin box-sizing($type:border-box) {
  @if $experimental {
    -moz-box-sizing: $type;
    -webkit-box-sizing: $type;
  }
  box-sizing: $type;
}

/* We use this to create equilateral triangles */
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: inset $triangle-size;
  @if ($triangle-direction == top) {
    border-color: $triangle-color transparent transparent transparent;
    border-top-style: solid;
  }
  @if ($triangle-direction == bottom) {
    border-color: transparent transparent $triangle-color transparent;
    border-bottom-style: solid;
  }
  @if ($triangle-direction == left) {
    border-color: transparent transparent transparent $triangle-color;
    border-left-style: solid;
  }
  @if ($triangle-direction == right) {
    border-color: transparent $triangle-color transparent transparent;
    border-right-style: solid;
  }
}

/* We use this to do clear floats */
@mixin clearfix() {
  *zoom:1;
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}


/* We use this to add a glowing effect to block elements */
@mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) {
  @if $experimental {
    -webkit-transition: -webkit-box-shadow $fade-time, border-color $fade-time ease-in-out;
    -moz-transition: -moz-box-shadow $fade-time, border-color $fade-time ease-in-out;
  }
  transition: box-shadow $fade-time, border-color $fade-time ease-in-out;

  &:#{$selector} {
    @if $experimental {
      -webkit-box-shadow: 0 0 5px $glowing-effect-color;
      -moz-box-shadow: 0 0 5px $glowing-effect-color;
    }
    box-shadow: 0 0 5px $glowing-effect-color;
    border-color: $glowing-effect-color;
  }
}


/* Foundation Variables */

/* The default font-size is set to 100% of the browser style sheet (usually 16px) */
/* for compatibility with brower-based text zoom or user-set defaults. */

/* Since the typical default browser font-size is 16px, that makes the calculation for grid size. */
/* If you want your base font-size to be different and not have it effect the grid breakpoints, */
/* set $em-base to $base-font-size and make sure $base-font-size is a px value. */
$base-font-size: 100% !default;

/* $base-line-height is 24px while $base-font-size is 16px */
$base-line-height: 150% !default;

/* This is the default html and body font-size for the base em value. */
$em-base: 16px !default;

/* Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px) */
@function emCalc($pxWidth) {
  @return $pxWidth / $em-base * 1em;
}

/* Maybe you want to create rems and pixels */
/* @function remCalc($pxWidth) { */
/*   @return $pxWidth / $em-base * 1rem; */
/* } */

/* We use these to control various global styles */
$body-bg: #fff !default;
$body-font-color: #222 !default;
$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
$body-font-weight: normal !default;
$body-font-style: normal !default;

/* We use this to control font-smoothing */
$font-smoothing: subpixel-antialiased !default;

/* We use these to control text direction settings */
$text-direction: ltr !default;

/* NOTE: No need to change this conditional statement, $text-direction variable controls it all. */
$default-float: left !default;
$opposite-direction: right !default;
@if $text-direction == ltr {
  $default-float: left;
  $opposite-direction: right;
} @else {
  $default-float: right;
  $opposite-direction: left;
}

/* We use these as default colors throughout */
$primary-color: #2ba6cb !default;
$secondary-color: #e9e9e9 !default;
$alert-color: #c60f13 !default;
$success-color: #5da423 !default;

/* We use these to make sure border radius matches unless we want it different. */
$global-radius: 3px !default;
$global-rounded: 1000px !default;

/* We use these to control inset shadow shiny edges and depressions. */
$shiny-edge-size: 0 1px 0 !default;
$shiny-edge-color: rgba(#fff, .5) !default;
$shiny-edge-active-color: rgba(#000, .2) !default;

/* We use this to control whether or not CSS classes come through in the gem files. */
$include-html-classes: true !default;
$include-print-styles: true !default;
$include-html-global-classes: $include-html-classes !default;

/* Media Queries */
$small-screen: 768px !default;
$medium-screen: 1280px !default;
$large-screen: 1440px !default;

$screen: "only screen" !default;
$small: "only screen and (min-width: #{$small-screen})" !default;
$medium: "only screen and (min-width:#{$medium-screen})" !default;
$large: "only screen and (min-width:#{$large-screen})" !default;
$landscape: "only screen and (orientation: landscape)" !default;
$portrait: "only screen and (orientation: portrait)" !default;

/* We use this as cursors values for enabling the option of having custom cursors */
$cursor-crosshair-value: crosshair !default;
$cursor-default-value: default !default;
$cursor-pointer-value: pointer !default;
$cursor-help-value: help !default;
$cursor-text-value: text !default;

/* Set box-sizing globally to handle padding and border widths */
*,
*:before,
*:after {
  @include box-sizing(border-box);
}

html,
body { font-size: $base-font-size; }

/* Default body styles */
body {
  background: $body-bg;
  color: $body-font-color;
  padding: 0;
  margin: 0;
  font-family: $body-font-family;
  font-weight: $body-font-weight;
  font-style: $body-font-style;
  line-height: 1;
  position: relative;
  cursor: $cursor-default-value;
}

a:hover { cursor: $cursor-pointer-value; }

/* Override outline from normalize, we do not like it */
a:focus { outline: none; }

/* Grid Defaults to get images and embeds to work properly */
img,
object,
embed { max-width: 100%; height: auto; }

object,
embed { height: 100%; }
img { -ms-interpolation-mode: bicubic; }

#map_canvas,
.map_canvas {
  img,
  embed,
  object { max-width: none !important;
  }
}

/* Miscellaneous useful HTML classes */
.left         { float: left !important; }
.right        { float: right !important; }
.text-left    { text-align: left !important; }
.text-right   { text-align: right !important; }
.text-center  { text-align: center !important; }
.text-justify { text-align: justify !important; }
.hide         { display: none; }

/* Font smoothing */
/* Antialiased font smoothing works best for light text on a dark background. */
/* Apply to single elements instead of globally to body. */
/* Note this only applies to webkit-based desktop browsers on the Mac. */
.antialiased { -webkit-font-smoothing: antialiased; }

/* Get rid of gap under images by making them display: inline-block; by default */
img { display: inline-block; }

/* Make sure textarea takes on height automatically */
textarea { height: auto; min-height: 50px; }

/* Make select elements 100% width by default */
select { width: 100%; }
https://snipt.net/embed/060ab7c82a6de64824374789ccf10020/
/raw/060ab7c82a6de64824374789ccf10020/
060ab7c82a6de64824374789ccf10020
css
CSS
298
2019-08-22T05:05:07
True
False
False
Jul 01, 2013 at 03:43 PM
/api/public/snipt/66186/
foundation-global-stylesmixins
<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> <a href="#L-198">198</a> <a href="#L-199">199</a> <a href="#L-200">200</a> <a href="#L-201">201</a> <a href="#L-202">202</a> <a href="#L-203">203</a> <a href="#L-204">204</a> <a href="#L-205">205</a> <a href="#L-206">206</a> <a href="#L-207">207</a> <a href="#L-208">208</a> <a href="#L-209">209</a> <a href="#L-210">210</a> <a href="#L-211">211</a> <a href="#L-212">212</a> <a href="#L-213">213</a> <a href="#L-214">214</a> <a href="#L-215">215</a> <a href="#L-216">216</a> <a href="#L-217">217</a> <a href="#L-218">218</a> <a href="#L-219">219</a> <a href="#L-220">220</a> <a href="#L-221">221</a> <a href="#L-222">222</a> <a href="#L-223">223</a> <a href="#L-224">224</a> <a href="#L-225">225</a> <a href="#L-226">226</a> <a href="#L-227">227</a> <a href="#L-228">228</a> <a href="#L-229">229</a> <a href="#L-230">230</a> <a href="#L-231">231</a> <a href="#L-232">232</a> <a href="#L-233">233</a> <a href="#L-234">234</a> <a href="#L-235">235</a> <a href="#L-236">236</a> <a href="#L-237">237</a> <a href="#L-238">238</a> <a href="#L-239">239</a> <a href="#L-240">240</a> <a href="#L-241">241</a> <a href="#L-242">242</a> <a href="#L-243">243</a> <a href="#L-244">244</a> <a href="#L-245">245</a> <a href="#L-246">246</a> <a href="#L-247">247</a> <a href="#L-248">248</a> <a href="#L-249">249</a> <a href="#L-250">250</a> <a href="#L-251">251</a> <a href="#L-252">252</a> <a href="#L-253">253</a> <a href="#L-254">254</a> <a href="#L-255">255</a> <a href="#L-256">256</a> <a href="#L-257">257</a> <a href="#L-258">258</a> <a href="#L-259">259</a> <a href="#L-260">260</a> <a href="#L-261">261</a> <a href="#L-262">262</a> <a href="#L-263">263</a> <a href="#L-264">264</a> <a href="#L-265">265</a> <a href="#L-266">266</a> <a href="#L-267">267</a> <a href="#L-268">268</a> <a href="#L-269">269</a> <a href="#L-270">270</a> <a href="#L-271">271</a> <a href="#L-272">272</a> <a href="#L-273">273</a> <a href="#L-274">274</a> <a href="#L-275">275</a> <a href="#L-276">276</a> <a href="#L-277">277</a> <a href="#L-278">278</a> <a href="#L-279">279</a> <a href="#L-280">280</a> <a href="#L-281">281</a> <a href="#L-282">282</a> <a href="#L-283">283</a> <a href="#L-284">284</a> <a href="#L-285">285</a> <a href="#L-286">286</a> <a href="#L-287">287</a> <a href="#L-288">288</a> <a href="#L-289">289</a> <a href="#L-290">290</a> <a href="#L-291">291</a> <a href="#L-292">292</a> <a href="#L-293">293</a> <a href="#L-294">294</a> <a href="#L-295">295</a> <a href="#L-296">296</a> <a href="#L-297">297</a> <a href="#L-298">298</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="c">/* Global Foundation Mixins */</span> </span><span id="L-2"><a name="L-2"></a> </span><span id="L-3"><a name="L-3"></a><span class="c">/* We use this to control border radius. */</span> </span><span id="L-4"><a name="L-4"></a><span class="k">@mixin</span> <span class="nt">radius</span><span class="o">($</span><span class="nt">radius</span><span class="o">:$</span><span class="nt">global-radius</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-5"><a name="L-5"></a> <span class="k">@if</span> <span class="o">$</span><span class="nt">radius</span> <span class="p">{</span> </span><span id="L-6"><a name="L-6"></a> <span class="k">@if</span> <span class="o">$</span><span class="nt">experimental</span> <span class="p">{</span> </span><span id="L-7"><a name="L-7"></a> <span class="nt">-webkit-border-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</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="nt">border-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-10"><a name="L-10"></a> <span class="p">}</span> </span><span id="L-11"><a name="L-11"></a><span class="p">}</span> </span><span id="L-12"><a name="L-12"></a> </span><span id="L-13"><a name="L-13"></a><span class="c">/* We use this to create equal side border radius on elements. */</span> </span><span id="L-14"><a name="L-14"></a><span class="k">@mixin</span> <span class="nt">side-radius</span><span class="o">($</span><span class="nt">side</span><span class="o">,</span> <span class="o">$</span><span class="nt">radius</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-15"><a name="L-15"></a> <span class="k">@if</span> <span class="o">$</span><span class="nt">side</span> <span class="o">==</span> <span class="nt">left</span> <span class="p">{</span> </span><span id="L-16"><a name="L-16"></a> <span class="k">@if</span> <span class="o">$</span><span class="nt">experimental</span> <span class="p">{</span> </span><span id="L-17"><a name="L-17"></a> <span class="nt">-moz-border-radius-bottomleft</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-18"><a name="L-18"></a> <span class="nt">-moz-border-radius-topleft</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-19"><a name="L-19"></a> <span class="nt">-webkit-border-bottom-left-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-20"><a name="L-20"></a> <span class="nt">-webkit-border-top-left-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-21"><a name="L-21"></a> <span class="p">}</span> </span><span id="L-22"><a name="L-22"></a> <span class="nt">border-bottom-left-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-23"><a name="L-23"></a> <span class="nt">border-top-left-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-24"><a name="L-24"></a> <span class="p">}</span> </span><span id="L-25"><a name="L-25"></a> <span class="k">@else</span> <span class="nt">if</span> <span class="o">$</span><span class="nt">side</span> <span class="o">==</span> <span class="nt">right</span> <span class="p">{</span> </span><span id="L-26"><a name="L-26"></a> <span class="k">@if</span> <span class="o">$</span><span class="nt">experimental</span> <span class="p">{</span> </span><span id="L-27"><a name="L-27"></a> <span class="nt">-moz-border-radius-topright</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-28"><a name="L-28"></a> <span class="nt">-moz-border-radius-bottomright</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-29"><a name="L-29"></a> <span class="nt">-webkit-border-top-right-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-30"><a name="L-30"></a> <span class="nt">-webkit-border-bottom-right-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-31"><a name="L-31"></a> <span class="p">}</span> </span><span id="L-32"><a name="L-32"></a> <span class="nt">border-top-right-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-33"><a name="L-33"></a> <span class="nt">border-bottom-right-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</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="k">@else</span> <span class="nt">if</span> <span class="o">$</span><span class="nt">side</span> <span class="o">==</span> <span class="nt">top</span> <span class="p">{</span> </span><span id="L-36"><a name="L-36"></a> <span class="k">@if</span> <span class="o">$</span><span class="nt">experimental</span> <span class="p">{</span> </span><span id="L-37"><a name="L-37"></a> <span class="nt">-moz-border-radius-topright</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-38"><a name="L-38"></a> <span class="nt">-moz-border-radius-topleft</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-39"><a name="L-39"></a> <span class="nt">-webkit-border-top-right-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-40"><a name="L-40"></a> <span class="nt">-webkit-border-top-left-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-41"><a name="L-41"></a> <span class="p">}</span> </span><span id="L-42"><a name="L-42"></a> <span class="nt">border-top-right-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-43"><a name="L-43"></a> <span class="nt">border-top-left-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-44"><a name="L-44"></a> <span class="p">}</span> </span><span id="L-45"><a name="L-45"></a> <span class="k">@else</span> <span class="nt">if</span> <span class="o">$</span><span class="nt">side</span> <span class="o">==</span> <span class="nt">bottom</span> <span class="p">{</span> </span><span id="L-46"><a name="L-46"></a> <span class="k">@if</span> <span class="o">$</span><span class="nt">experimental</span> <span class="p">{</span> </span><span id="L-47"><a name="L-47"></a> <span class="nt">-moz-border-radius-bottomright</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-48"><a name="L-48"></a> <span class="nt">-moz-border-radius-bottomleft</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-49"><a name="L-49"></a> <span class="nt">-webkit-border-bottom-right-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-50"><a name="L-50"></a> <span class="nt">-webkit-border-bottom-left-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-51"><a name="L-51"></a> <span class="p">}</span> </span><span id="L-52"><a name="L-52"></a> <span class="nt">border-bottom-right-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-53"><a name="L-53"></a> <span class="nt">border-bottom-left-radius</span><span class="o">:</span> <span class="o">$</span><span class="nt">radius</span><span class="o">;</span> </span><span id="L-54"><a name="L-54"></a> <span class="p">}</span> </span><span id="L-55"><a name="L-55"></a><span class="p">}</span> </span><span id="L-56"><a name="L-56"></a> </span><span id="L-57"><a name="L-57"></a><span class="c">/* We can control whether or not we have inset shadows edges. */</span> </span><span id="L-58"><a name="L-58"></a><span class="k">@mixin</span> <span class="nt">inset-shadow</span><span class="o">($</span><span class="nt">active</span><span class="nd">:true</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-59"><a name="L-59"></a> <span class="k">@if</span> <span class="o">$</span><span class="nt">experimental</span> <span class="p">{</span> </span><span id="L-60"><a name="L-60"></a> <span class="nt">-webkit-box-shadow</span><span class="o">:</span> <span class="o">$</span><span class="nt">shiny-edge-size</span> <span class="o">$</span><span class="nt">shiny-edge-color</span> <span class="nt">inset</span><span class="o">;</span> </span><span id="L-61"><a name="L-61"></a> <span class="p">}</span> </span><span id="L-62"><a name="L-62"></a> <span class="nt">box-shadow</span><span class="o">:</span> <span class="o">$</span><span class="nt">shiny-edge-size</span> <span class="o">$</span><span class="nt">shiny-edge-color</span> <span class="nt">inset</span><span class="o">;</span> </span><span id="L-63"><a name="L-63"></a> </span><span id="L-64"><a name="L-64"></a> <span class="k">@if</span> <span class="o">$</span><span class="nt">active</span> <span class="p">{</span> <span class="o">&amp;</span><span class="nd">:active</span> <span class="p">{</span> </span><span id="L-65"><a name="L-65"></a> <span class="o">@</span><span class="n">if</span> <span class="err">$</span><span class="n">experimental</span> <span class="err">{</span> </span><span id="L-66"><a name="L-66"></a> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="err">$</span><span class="n">shiny</span><span class="o">-</span><span class="n">edge</span><span class="o">-</span><span class="nb">size</span> <span class="err">$</span><span class="n">shiny</span><span class="o">-</span><span class="n">edge</span><span class="o">-</span><span class="n">active</span><span class="o">-</span><span class="nb">color</span> <span class="nb">inset</span><span class="p">;</span> </span><span id="L-67"><a name="L-67"></a> <span class="p">}</span> </span><span id="L-68"><a name="L-68"></a> <span class="nt">box-shadow</span><span class="o">:</span> <span class="o">$</span><span class="nt">shiny-edge-size</span> <span class="o">$</span><span class="nt">shiny-edge-active-color</span> <span class="nt">inset</span><span class="o">;</span> <span class="p">}</span> <span class="p">}</span> </span><span id="L-69"><a name="L-69"></a><span class="err">}</span> </span><span id="L-70"><a name="L-70"></a> </span><span id="L-71"><a name="L-71"></a><span class="c">/* We use this to add transitions to elements */</span> </span><span id="L-72"><a name="L-72"></a><span class="k">@mixin</span> <span class="nt">single-transition</span><span class="o">($</span><span class="nt">property</span><span class="nd">:all</span><span class="o">,</span> <span class="o">$</span><span class="nt">speed</span><span class="nd">:300ms</span><span class="o">,</span> <span class="o">$</span><span class="nt">ease</span><span class="nd">:ease-out</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-73"><a name="L-73"></a> <span class="k">@if</span> <span class="o">$</span><span class="nt">experimental</span> <span class="p">{</span> </span><span id="L-74"><a name="L-74"></a> <span class="nt">-webkit-transition</span><span class="o">:</span> <span class="o">$</span><span class="nt">property</span> <span class="o">$</span><span class="nt">speed</span> <span class="o">$</span><span class="nt">ease</span><span class="o">;</span> </span><span id="L-75"><a name="L-75"></a> <span class="nt">-moz-transition</span><span class="o">:</span> <span class="o">$</span><span class="nt">property</span> <span class="o">$</span><span class="nt">speed</span> <span class="o">$</span><span class="nt">ease</span><span class="o">;</span> </span><span id="L-76"><a name="L-76"></a> <span class="p">}</span> </span><span id="L-77"><a name="L-77"></a> <span class="nt">transition</span><span class="o">:</span> <span class="o">$</span><span class="nt">property</span> <span class="o">$</span><span class="nt">speed</span> <span class="o">$</span><span class="nt">ease</span><span class="o">;</span> </span><span id="L-78"><a name="L-78"></a><span class="p">}</span> </span><span id="L-79"><a name="L-79"></a> </span><span id="L-80"><a name="L-80"></a><span class="c">/* We use this to add box-sizing across browser prefixes */</span> </span><span id="L-81"><a name="L-81"></a><span class="k">@mixin</span> <span class="nt">box-sizing</span><span class="o">($</span><span class="nt">type</span><span class="nd">:border-box</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-82"><a name="L-82"></a> <span class="k">@if</span> <span class="o">$</span><span class="nt">experimental</span> <span class="p">{</span> </span><span id="L-83"><a name="L-83"></a> <span class="nt">-moz-box-sizing</span><span class="o">:</span> <span class="o">$</span><span class="nt">type</span><span class="o">;</span> </span><span id="L-84"><a name="L-84"></a> <span class="nt">-webkit-box-sizing</span><span class="o">:</span> <span class="o">$</span><span class="nt">type</span><span class="o">;</span> </span><span id="L-85"><a name="L-85"></a> <span class="p">}</span> </span><span id="L-86"><a name="L-86"></a> <span class="nt">box-sizing</span><span class="o">:</span> <span class="o">$</span><span class="nt">type</span><span class="o">;</span> </span><span id="L-87"><a name="L-87"></a><span class="p">}</span> </span><span id="L-88"><a name="L-88"></a> </span><span id="L-89"><a name="L-89"></a><span class="c">/* We use this to create equilateral triangles */</span> </span><span id="L-90"><a name="L-90"></a><span class="k">@mixin</span> <span class="nt">css-triangle</span><span class="o">($</span><span class="nt">triangle-size</span><span class="o">,</span> <span class="o">$</span><span class="nt">triangle-color</span><span class="o">,</span> <span class="o">$</span><span class="nt">triangle-direction</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-91"><a name="L-91"></a> <span class="nt">content</span><span class="o">:</span> <span class="s2">&quot;&quot;</span><span class="o">;</span> </span><span id="L-92"><a name="L-92"></a> <span class="nt">display</span><span class="o">:</span> <span class="nt">block</span><span class="o">;</span> </span><span id="L-93"><a name="L-93"></a> <span class="nt">width</span><span class="o">:</span> <span class="nt">0</span><span class="o">;</span> </span><span id="L-94"><a name="L-94"></a> <span class="nt">height</span><span class="o">:</span> <span class="nt">0</span><span class="o">;</span> </span><span id="L-95"><a name="L-95"></a> <span class="nt">border</span><span class="o">:</span> <span class="nt">inset</span> <span class="o">$</span><span class="nt">triangle-size</span><span class="o">;</span> </span><span id="L-96"><a name="L-96"></a> <span class="k">@if</span> <span class="o">($</span><span class="nt">triangle-direction</span> <span class="o">==</span> <span class="nt">top</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-97"><a name="L-97"></a> <span class="nt">border-color</span><span class="o">:</span> <span class="o">$</span><span class="nt">triangle-color</span> <span class="nt">transparent</span> <span class="nt">transparent</span> <span class="nt">transparent</span><span class="o">;</span> </span><span id="L-98"><a name="L-98"></a> <span class="nt">border-top-style</span><span class="o">:</span> <span class="nt">solid</span><span class="o">;</span> </span><span id="L-99"><a name="L-99"></a> <span class="p">}</span> </span><span id="L-100"><a name="L-100"></a> <span class="k">@if</span> <span class="o">($</span><span class="nt">triangle-direction</span> <span class="o">==</span> <span class="nt">bottom</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-101"><a name="L-101"></a> <span class="nt">border-color</span><span class="o">:</span> <span class="nt">transparent</span> <span class="nt">transparent</span> <span class="o">$</span><span class="nt">triangle-color</span> <span class="nt">transparent</span><span class="o">;</span> </span><span id="L-102"><a name="L-102"></a> <span class="nt">border-bottom-style</span><span class="o">:</span> <span class="nt">solid</span><span class="o">;</span> </span><span id="L-103"><a name="L-103"></a> <span class="p">}</span> </span><span id="L-104"><a name="L-104"></a> <span class="k">@if</span> <span class="o">($</span><span class="nt">triangle-direction</span> <span class="o">==</span> <span class="nt">left</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-105"><a name="L-105"></a> <span class="nt">border-color</span><span class="o">:</span> <span class="nt">transparent</span> <span class="nt">transparent</span> <span class="nt">transparent</span> <span class="o">$</span><span class="nt">triangle-color</span><span class="o">;</span> </span><span id="L-106"><a name="L-106"></a> <span class="nt">border-left-style</span><span class="o">:</span> <span class="nt">solid</span><span class="o">;</span> </span><span id="L-107"><a name="L-107"></a> <span class="p">}</span> </span><span id="L-108"><a name="L-108"></a> <span class="k">@if</span> <span class="o">($</span><span class="nt">triangle-direction</span> <span class="o">==</span> <span class="nt">right</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-109"><a name="L-109"></a> <span class="nt">border-color</span><span class="o">:</span> <span class="nt">transparent</span> <span class="o">$</span><span class="nt">triangle-color</span> <span class="nt">transparent</span> <span class="nt">transparent</span><span class="o">;</span> </span><span id="L-110"><a name="L-110"></a> <span class="nt">border-right-style</span><span class="o">:</span> <span class="nt">solid</span><span class="o">;</span> </span><span id="L-111"><a name="L-111"></a> <span class="p">}</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="c">/* We use this to do clear floats */</span> </span><span id="L-115"><a name="L-115"></a><span class="k">@mixin</span> <span class="nt">clearfix</span><span class="o">()</span> <span class="p">{</span> </span><span id="L-116"><a name="L-116"></a> <span class="o">*</span><span class="nt">zoom</span><span class="nd">:1</span><span class="o">;</span> </span><span id="L-117"><a name="L-117"></a> <span class="o">&amp;</span><span class="nd">:before</span><span class="o">,</span> <span class="o">&amp;</span><span class="nd">:after</span> <span class="p">{</span> <span class="nb">content</span><span class="o">:</span> <span class="s2">&quot; &quot;</span><span class="p">;</span> <span class="nb">display</span><span class="o">:</span> <span class="n">table</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-118"><a name="L-118"></a> <span class="o">&amp;</span><span class="nd">:after</span> <span class="p">{</span> <span class="nb">clear</span><span class="o">:</span> <span class="nb">both</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-119"><a name="L-119"></a><span class="p">}</span> </span><span id="L-120"><a name="L-120"></a> </span><span id="L-121"><a name="L-121"></a> </span><span id="L-122"><a name="L-122"></a><span class="c">/* We use this to add a glowing effect to block elements */</span> </span><span id="L-123"><a name="L-123"></a><span class="k">@mixin</span> <span class="nt">block-glowing-effect</span><span class="o">($</span><span class="nt">selector</span><span class="nd">:focus</span><span class="o">,</span> <span class="o">$</span><span class="nt">fade-time</span><span class="nd">:300ms</span><span class="o">,</span> <span class="o">$</span><span class="nt">glowing-effect-color</span><span class="nd">:fade-out</span><span class="o">($</span><span class="nt">primary-color</span><span class="o">,</span> <span class="nc">.25</span><span class="o">))</span> <span class="p">{</span> </span><span id="L-124"><a name="L-124"></a> <span class="k">@if</span> <span class="o">$</span><span class="nt">experimental</span> <span class="p">{</span> </span><span id="L-125"><a name="L-125"></a> <span class="nt">-webkit-transition</span><span class="o">:</span> <span class="nt">-webkit-box-shadow</span> <span class="o">$</span><span class="nt">fade-time</span><span class="o">,</span> <span class="nt">border-color</span> <span class="o">$</span><span class="nt">fade-time</span> <span class="nt">ease-in-out</span><span class="o">;</span> </span><span id="L-126"><a name="L-126"></a> <span class="nt">-moz-transition</span><span class="o">:</span> <span class="nt">-moz-box-shadow</span> <span class="o">$</span><span class="nt">fade-time</span><span class="o">,</span> <span class="nt">border-color</span> <span class="o">$</span><span class="nt">fade-time</span> <span class="nt">ease-in-out</span><span class="o">;</span> </span><span id="L-127"><a name="L-127"></a> <span class="p">}</span> </span><span id="L-128"><a name="L-128"></a> <span class="nt">transition</span><span class="o">:</span> <span class="nt">box-shadow</span> <span class="o">$</span><span class="nt">fade-time</span><span class="o">,</span> <span class="nt">border-color</span> <span class="o">$</span><span class="nt">fade-time</span> <span class="nt">ease-in-out</span><span class="o">;</span> </span><span id="L-129"><a name="L-129"></a> </span><span id="L-130"><a name="L-130"></a> <span class="o">&amp;:</span><span class="err">#</span><span class="p">{</span><span class="err">$</span><span class="n">selector</span><span class="p">}</span> <span class="p">{</span> </span><span id="L-131"><a name="L-131"></a> <span class="o">@</span><span class="n">if</span> <span class="err">$</span><span class="n">experimental</span> <span class="err">{</span> </span><span id="L-132"><a name="L-132"></a> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">5px</span> <span class="err">$</span><span class="n">glowing</span><span class="o">-</span><span class="n">effect</span><span class="o">-</span><span class="nb">color</span><span class="p">;</span> </span><span id="L-133"><a name="L-133"></a> <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">5px</span> <span class="err">$</span><span class="n">glowing</span><span class="o">-</span><span class="n">effect</span><span class="o">-</span><span class="nb">color</span><span class="p">;</span> </span><span id="L-134"><a name="L-134"></a> <span class="p">}</span> </span><span id="L-135"><a name="L-135"></a> <span class="nt">box-shadow</span><span class="o">:</span> <span class="nt">0</span> <span class="nt">0</span> <span class="nt">5px</span> <span class="o">$</span><span class="nt">glowing-effect-color</span><span class="o">;</span> </span><span id="L-136"><a name="L-136"></a> <span class="nt">border-color</span><span class="o">:</span> <span class="o">$</span><span class="nt">glowing-effect-color</span><span class="o">;</span> </span><span id="L-137"><a name="L-137"></a> <span class="p">}</span> </span><span id="L-138"><a name="L-138"></a><span class="err">}</span> </span><span id="L-139"><a name="L-139"></a> </span><span id="L-140"><a name="L-140"></a> </span><span id="L-141"><a name="L-141"></a><span class="c">/* Foundation Variables */</span> </span><span id="L-142"><a name="L-142"></a> </span><span id="L-143"><a name="L-143"></a><span class="c">/* The default font-size is set to 100% of the browser style sheet (usually 16px) */</span> </span><span id="L-144"><a name="L-144"></a><span class="c">/* for compatibility with brower-based text zoom or user-set defaults. */</span> </span><span id="L-145"><a name="L-145"></a> </span><span id="L-146"><a name="L-146"></a><span class="c">/* Since the typical default browser font-size is 16px, that makes the calculation for grid size. */</span> </span><span id="L-147"><a name="L-147"></a><span class="c">/* If you want your base font-size to be different and not have it effect the grid breakpoints, */</span> </span><span id="L-148"><a name="L-148"></a><span class="c">/* set $em-base to $base-font-size and make sure $base-font-size is a px value. */</span> </span><span id="L-149"><a name="L-149"></a><span class="o">$</span><span class="nt">base-font-size</span><span class="o">:</span> <span class="nt">100</span><span class="o">%</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-150"><a name="L-150"></a> </span><span id="L-151"><a name="L-151"></a><span class="c">/* $base-line-height is 24px while $base-font-size is 16px */</span> </span><span id="L-152"><a name="L-152"></a><span class="o">$</span><span class="nt">base-line-height</span><span class="o">:</span> <span class="nt">150</span><span class="o">%</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-153"><a name="L-153"></a> </span><span id="L-154"><a name="L-154"></a><span class="c">/* This is the default html and body font-size for the base em value. */</span> </span><span id="L-155"><a name="L-155"></a><span class="o">$</span><span class="nt">em-base</span><span class="o">:</span> <span class="nt">16px</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-156"><a name="L-156"></a> </span><span id="L-157"><a name="L-157"></a><span class="c">/* Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px) */</span> </span><span id="L-158"><a name="L-158"></a><span class="k">@function</span> <span class="nt">emCalc</span><span class="o">($</span><span class="nt">pxWidth</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-159"><a name="L-159"></a> <span class="k">@return</span> <span class="o">$</span><span class="nt">pxWidth</span> <span class="o">/</span> <span class="o">$</span><span class="nt">em-base</span> <span class="o">*</span> <span class="nt">1em</span><span class="p">;</span> </span><span id="L-160"><a name="L-160"></a><span class="p">}</span> </span><span id="L-161"><a name="L-161"></a> </span><span id="L-162"><a name="L-162"></a><span class="c">/* Maybe you want to create rems and pixels */</span> </span><span id="L-163"><a name="L-163"></a><span class="c">/* @function remCalc($pxWidth) { */</span> </span><span id="L-164"><a name="L-164"></a><span class="c">/* @return $pxWidth / $em-base * 1rem; */</span> </span><span id="L-165"><a name="L-165"></a><span class="c">/* } */</span> </span><span id="L-166"><a name="L-166"></a> </span><span id="L-167"><a name="L-167"></a><span class="c">/* We use these to control various global styles */</span> </span><span id="L-168"><a name="L-168"></a><span class="o">$</span><span class="nt">body-bg</span><span class="o">:</span> <span class="nn">#fff</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-169"><a name="L-169"></a><span class="o">$</span><span class="nt">body-font-color</span><span class="o">:</span> <span class="nn">#222</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-170"><a name="L-170"></a><span class="o">$</span><span class="nt">body-font-family</span><span class="o">:</span> <span class="s2">&quot;Helvetica Neue&quot;</span><span class="o">,</span> <span class="s2">&quot;Helvetica&quot;</span><span class="o">,</span> <span class="nt">Helvetica</span><span class="o">,</span> <span class="nt">Arial</span><span class="o">,</span> <span class="nt">sans-serif</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-171"><a name="L-171"></a><span class="o">$</span><span class="nt">body-font-weight</span><span class="o">:</span> <span class="nt">normal</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-172"><a name="L-172"></a><span class="o">$</span><span class="nt">body-font-style</span><span class="o">:</span> <span class="nt">normal</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-173"><a name="L-173"></a> </span><span id="L-174"><a name="L-174"></a><span class="c">/* We use this to control font-smoothing */</span> </span><span id="L-175"><a name="L-175"></a><span class="o">$</span><span class="nt">font-smoothing</span><span class="o">:</span> <span class="nt">subpixel-antialiased</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-176"><a name="L-176"></a> </span><span id="L-177"><a name="L-177"></a><span class="c">/* We use these to control text direction settings */</span> </span><span id="L-178"><a name="L-178"></a><span class="o">$</span><span class="nt">text-direction</span><span class="o">:</span> <span class="nt">ltr</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-179"><a name="L-179"></a> </span><span id="L-180"><a name="L-180"></a><span class="c">/* NOTE: No need to change this conditional statement, $text-direction variable controls it all. */</span> </span><span id="L-181"><a name="L-181"></a><span class="o">$</span><span class="nt">default-float</span><span class="o">:</span> <span class="nt">left</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-182"><a name="L-182"></a><span class="o">$</span><span class="nt">opposite-direction</span><span class="o">:</span> <span class="nt">right</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-183"><a name="L-183"></a><span class="k">@if</span> <span class="o">$</span><span class="nt">text-direction</span> <span class="o">==</span> <span class="nt">ltr</span> <span class="p">{</span> </span><span id="L-184"><a name="L-184"></a> <span class="o">$</span><span class="nt">default-float</span><span class="o">:</span> <span class="nt">left</span><span class="o">;</span> </span><span id="L-185"><a name="L-185"></a> <span class="o">$</span><span class="nt">opposite-direction</span><span class="o">:</span> <span class="nt">right</span><span class="o">;</span> </span><span id="L-186"><a name="L-186"></a><span class="p">}</span> <span class="k">@else</span> <span class="p">{</span> </span><span id="L-187"><a name="L-187"></a> <span class="o">$</span><span class="nt">default-float</span><span class="o">:</span> <span class="nt">right</span><span class="o">;</span> </span><span id="L-188"><a name="L-188"></a> <span class="o">$</span><span class="nt">opposite-direction</span><span class="o">:</span> <span class="nt">left</span><span class="o">;</span> </span><span id="L-189"><a name="L-189"></a><span class="p">}</span> </span><span id="L-190"><a name="L-190"></a> </span><span id="L-191"><a name="L-191"></a><span class="c">/* We use these as default colors throughout */</span> </span><span id="L-192"><a name="L-192"></a><span class="o">$</span><span class="nt">primary-color</span><span class="o">:</span> <span class="nn">#2ba6cb</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-193"><a name="L-193"></a><span class="o">$</span><span class="nt">secondary-color</span><span class="o">:</span> <span class="nn">#e9e9e9</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-194"><a name="L-194"></a><span class="o">$</span><span class="nt">alert-color</span><span class="o">:</span> <span class="nn">#c60f13</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-195"><a name="L-195"></a><span class="o">$</span><span class="nt">success-color</span><span class="o">:</span> <span class="nn">#5da423</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-196"><a name="L-196"></a> </span><span id="L-197"><a name="L-197"></a><span class="c">/* We use these to make sure border radius matches unless we want it different. */</span> </span><span id="L-198"><a name="L-198"></a><span class="o">$</span><span class="nt">global-radius</span><span class="o">:</span> <span class="nt">3px</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-199"><a name="L-199"></a><span class="o">$</span><span class="nt">global-rounded</span><span class="o">:</span> <span class="nt">1000px</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-200"><a name="L-200"></a> </span><span id="L-201"><a name="L-201"></a><span class="c">/* We use these to control inset shadow shiny edges and depressions. */</span> </span><span id="L-202"><a name="L-202"></a><span class="o">$</span><span class="nt">shiny-edge-size</span><span class="o">:</span> <span class="nt">0</span> <span class="nt">1px</span> <span class="nt">0</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-203"><a name="L-203"></a><span class="o">$</span><span class="nt">shiny-edge-color</span><span class="o">:</span> <span class="nt">rgba</span><span class="o">(</span><span class="nn">#fff</span><span class="o">,</span> <span class="nc">.5</span><span class="o">)</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-204"><a name="L-204"></a><span class="o">$</span><span class="nt">shiny-edge-active-color</span><span class="o">:</span> <span class="nt">rgba</span><span class="o">(</span><span class="nn">#000</span><span class="o">,</span> <span class="nc">.2</span><span class="o">)</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-205"><a name="L-205"></a> </span><span id="L-206"><a name="L-206"></a><span class="c">/* We use this to control whether or not CSS classes come through in the gem files. */</span> </span><span id="L-207"><a name="L-207"></a><span class="o">$</span><span class="nt">include-html-classes</span><span class="o">:</span> <span class="nt">true</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-208"><a name="L-208"></a><span class="o">$</span><span class="nt">include-print-styles</span><span class="o">:</span> <span class="nt">true</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-209"><a name="L-209"></a><span class="o">$</span><span class="nt">include-html-global-classes</span><span class="o">:</span> <span class="o">$</span><span class="nt">include-html-classes</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-210"><a name="L-210"></a> </span><span id="L-211"><a name="L-211"></a><span class="c">/* Media Queries */</span> </span><span id="L-212"><a name="L-212"></a><span class="o">$</span><span class="nt">small-screen</span><span class="o">:</span> <span class="nt">768px</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-213"><a name="L-213"></a><span class="o">$</span><span class="nt">medium-screen</span><span class="o">:</span> <span class="nt">1280px</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-214"><a name="L-214"></a><span class="o">$</span><span class="nt">large-screen</span><span class="o">:</span> <span class="nt">1440px</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-215"><a name="L-215"></a> </span><span id="L-216"><a name="L-216"></a><span class="o">$</span><span class="nt">screen</span><span class="o">:</span> <span class="s2">&quot;only screen&quot;</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-217"><a name="L-217"></a><span class="o">$</span><span class="nt">small</span><span class="o">:</span> <span class="s2">&quot;only screen and (min-width: #{$small-screen})&quot;</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-218"><a name="L-218"></a><span class="o">$</span><span class="nt">medium</span><span class="o">:</span> <span class="s2">&quot;only screen and (min-width:#{$medium-screen})&quot;</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-219"><a name="L-219"></a><span class="o">$</span><span class="nt">large</span><span class="o">:</span> <span class="s2">&quot;only screen and (min-width:#{$large-screen})&quot;</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-220"><a name="L-220"></a><span class="o">$</span><span class="nt">landscape</span><span class="o">:</span> <span class="s2">&quot;only screen and (orientation: landscape)&quot;</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-221"><a name="L-221"></a><span class="o">$</span><span class="nt">portrait</span><span class="o">:</span> <span class="s2">&quot;only screen and (orientation: portrait)&quot;</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-222"><a name="L-222"></a> </span><span id="L-223"><a name="L-223"></a><span class="c">/* We use this as cursors values for enabling the option of having custom cursors */</span> </span><span id="L-224"><a name="L-224"></a><span class="o">$</span><span class="nt">cursor-crosshair-value</span><span class="o">:</span> <span class="nt">crosshair</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-225"><a name="L-225"></a><span class="o">$</span><span class="nt">cursor-default-value</span><span class="o">:</span> <span class="nt">default</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-226"><a name="L-226"></a><span class="o">$</span><span class="nt">cursor-pointer-value</span><span class="o">:</span> <span class="nt">pointer</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-227"><a name="L-227"></a><span class="o">$</span><span class="nt">cursor-help-value</span><span class="o">:</span> <span class="nt">help</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-228"><a name="L-228"></a><span class="o">$</span><span class="nt">cursor-text-value</span><span class="o">:</span> <span class="nt">text</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span> </span><span id="L-229"><a name="L-229"></a> </span><span id="L-230"><a name="L-230"></a><span class="c">/* Set box-sizing globally to handle padding and border widths */</span> </span><span id="L-231"><a name="L-231"></a><span class="o">*,</span> </span><span id="L-232"><a name="L-232"></a><span class="o">*</span><span class="nd">:before</span><span class="o">,</span> </span><span id="L-233"><a name="L-233"></a><span class="o">*</span><span class="nd">:after</span> <span class="p">{</span> </span><span id="L-234"><a name="L-234"></a> <span class="o">@</span><span class="n">include</span> <span class="n">box</span><span class="o">-</span><span class="n">sizing</span><span class="p">(</span><span class="nb">border</span><span class="o">-</span><span class="n">box</span><span class="p">);</span> </span><span id="L-235"><a name="L-235"></a><span class="p">}</span> </span><span id="L-236"><a name="L-236"></a> </span><span id="L-237"><a name="L-237"></a><span class="nt">html</span><span class="o">,</span> </span><span id="L-238"><a name="L-238"></a><span class="nt">body</span> <span class="p">{</span> <span class="nb">font-size</span><span class="o">:</span> <span class="err">$</span><span class="n">base</span><span class="o">-</span><span class="nb">font-size</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-239"><a name="L-239"></a> </span><span id="L-240"><a name="L-240"></a><span class="c">/* Default body styles */</span> </span><span id="L-241"><a name="L-241"></a><span class="nt">body</span> <span class="p">{</span> </span><span id="L-242"><a name="L-242"></a> <span class="nb">background</span><span class="o">:</span> <span class="err">$</span><span class="n">body</span><span class="o">-</span><span class="n">bg</span><span class="p">;</span> </span><span id="L-243"><a name="L-243"></a> <span class="nb">color</span><span class="o">:</span> <span class="err">$</span><span class="n">body</span><span class="o">-</span><span class="nb">font</span><span class="o">-</span><span class="nb">color</span><span class="p">;</span> </span><span id="L-244"><a name="L-244"></a> <span class="nb">padding</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> </span><span id="L-245"><a name="L-245"></a> <span class="nb">margin</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> </span><span id="L-246"><a name="L-246"></a> <span class="nb">font-family</span><span class="o">:</span> <span class="err">$</span><span class="n">body</span><span class="o">-</span><span class="nb">font-family</span><span class="p">;</span> </span><span id="L-247"><a name="L-247"></a> <span class="nb">font-weight</span><span class="o">:</span> <span class="err">$</span><span class="n">body</span><span class="o">-</span><span class="nb">font-weight</span><span class="p">;</span> </span><span id="L-248"><a name="L-248"></a> <span class="nb">font-style</span><span class="o">:</span> <span class="err">$</span><span class="n">body</span><span class="o">-</span><span class="nb">font-style</span><span class="p">;</span> </span><span id="L-249"><a name="L-249"></a> <span class="nb">line-height</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span> </span><span id="L-250"><a name="L-250"></a> <span class="nb">position</span><span class="o">:</span> <span class="nb">relative</span><span class="p">;</span> </span><span id="L-251"><a name="L-251"></a> <span class="nb">cursor</span><span class="o">:</span> <span class="err">$</span><span class="nb">cursor</span><span class="o">-</span><span class="nb">default</span><span class="o">-</span><span class="n">value</span><span class="p">;</span> </span><span id="L-252"><a name="L-252"></a><span class="p">}</span> </span><span id="L-253"><a name="L-253"></a> </span><span id="L-254"><a name="L-254"></a><span class="nt">a</span><span class="nd">:hover</span> <span class="p">{</span> <span class="nb">cursor</span><span class="o">:</span> <span class="err">$</span><span class="nb">cursor</span><span class="o">-</span><span class="nb">pointer</span><span class="o">-</span><span class="n">value</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-255"><a name="L-255"></a> </span><span id="L-256"><a name="L-256"></a><span class="c">/* Override outline from normalize, we do not like it */</span> </span><span id="L-257"><a name="L-257"></a><span class="nt">a</span><span class="nd">:focus</span> <span class="p">{</span> <span class="nb">outline</span><span class="o">:</span> <span class="nb">none</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-258"><a name="L-258"></a> </span><span id="L-259"><a name="L-259"></a><span class="c">/* Grid Defaults to get images and embeds to work properly */</span> </span><span id="L-260"><a name="L-260"></a><span class="nt">img</span><span class="o">,</span> </span><span id="L-261"><a name="L-261"></a><span class="nt">object</span><span class="o">,</span> </span><span id="L-262"><a name="L-262"></a><span class="nt">embed</span> <span class="p">{</span> <span class="nb">max-width</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span> <span class="nb">height</span><span class="o">:</span> <span class="nb">auto</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-263"><a name="L-263"></a> </span><span id="L-264"><a name="L-264"></a><span class="nt">object</span><span class="o">,</span> </span><span id="L-265"><a name="L-265"></a><span class="nt">embed</span> <span class="p">{</span> <span class="nb">height</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-266"><a name="L-266"></a><span class="nt">img</span> <span class="p">{</span> <span class="o">-</span><span class="n">ms</span><span class="o">-</span><span class="n">interpolation</span><span class="o">-</span><span class="n">mode</span><span class="o">:</span> <span class="n">bicubic</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-267"><a name="L-267"></a> </span><span id="L-268"><a name="L-268"></a><span class="nn">#map_canvas</span><span class="o">,</span> </span><span id="L-269"><a name="L-269"></a><span class="nc">.map_canvas</span> <span class="p">{</span> </span><span id="L-270"><a name="L-270"></a> <span class="n">img</span><span class="o">,</span> </span><span id="L-271"><a name="L-271"></a> <span class="nb">embed</span><span class="o">,</span> </span><span id="L-272"><a name="L-272"></a> <span class="n">object</span> <span class="err">{</span> <span class="nb">max-width</span><span class="o">:</span> <span class="nb">none</span> <span class="cp">!important</span><span class="p">;</span> </span><span id="L-273"><a name="L-273"></a> <span class="p">}</span> </span><span id="L-274"><a name="L-274"></a><span class="err">}</span> </span><span id="L-275"><a name="L-275"></a> </span><span id="L-276"><a name="L-276"></a><span class="c">/* Miscellaneous useful HTML classes */</span> </span><span id="L-277"><a name="L-277"></a><span class="nc">.left</span> <span class="p">{</span> <span class="nb">float</span><span class="o">:</span> <span class="nb">left</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-278"><a name="L-278"></a><span class="nc">.right</span> <span class="p">{</span> <span class="nb">float</span><span class="o">:</span> <span class="nb">right</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-279"><a name="L-279"></a><span class="nc">.text-left</span> <span class="p">{</span> <span class="nb">text-align</span><span class="o">:</span> <span class="nb">left</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-280"><a name="L-280"></a><span class="nc">.text-right</span> <span class="p">{</span> <span class="nb">text-align</span><span class="o">:</span> <span class="nb">right</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-281"><a name="L-281"></a><span class="nc">.text-center</span> <span class="p">{</span> <span class="nb">text-align</span><span class="o">:</span> <span class="nb">center</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-282"><a name="L-282"></a><span class="nc">.text-justify</span> <span class="p">{</span> <span class="nb">text-align</span><span class="o">:</span> <span class="nb">justify</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-283"><a name="L-283"></a><span class="nc">.hide</span> <span class="p">{</span> <span class="nb">display</span><span class="o">:</span> <span class="nb">none</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-284"><a name="L-284"></a> </span><span id="L-285"><a name="L-285"></a><span class="c">/* Font smoothing */</span> </span><span id="L-286"><a name="L-286"></a><span class="c">/* Antialiased font smoothing works best for light text on a dark background. */</span> </span><span id="L-287"><a name="L-287"></a><span class="c">/* Apply to single elements instead of globally to body. */</span> </span><span id="L-288"><a name="L-288"></a><span class="c">/* Note this only applies to webkit-based desktop browsers on the Mac. */</span> </span><span id="L-289"><a name="L-289"></a><span class="nc">.antialiased</span> <span class="p">{</span> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="nb">font</span><span class="o">-</span><span class="n">smoothing</span><span class="o">:</span> <span class="n">antialiased</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-290"><a name="L-290"></a> </span><span id="L-291"><a name="L-291"></a><span class="c">/* Get rid of gap under images by making them display: inline-block; by default */</span> </span><span id="L-292"><a name="L-292"></a><span class="nt">img</span> <span class="p">{</span> <span class="nb">display</span><span class="o">:</span> <span class="nb">inline</span><span class="o">-</span><span class="nb">block</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-293"><a name="L-293"></a> </span><span id="L-294"><a name="L-294"></a><span class="c">/* Make sure textarea takes on height automatically */</span> </span><span id="L-295"><a name="L-295"></a><span class="nt">textarea</span> <span class="p">{</span> <span class="nb">height</span><span class="o">:</span> <span class="nb">auto</span><span class="p">;</span> <span class="nb">min-height</span><span class="o">:</span> <span class="m">50px</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-296"><a name="L-296"></a> </span><span id="L-297"><a name="L-297"></a><span class="c">/* Make select elements 100% width by default */</span> </span><span id="L-298"><a name="L-298"></a><span class="nt">select</span> <span class="p">{</span> <span class="nb">width</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span> </span></pre></div> </td></tr></table>