styledocco

<!DOCTYPE html><html><head><title>mixins | styledocco </title><meta charset="utf-8"><style>*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;border:0}body{padding:60px 0 40px;background-color:hsl(207,10%,90%);color:hsl(207,5%,30%)}.container{max-width:1300px;margin:0 auto;padding:0 20px}.section{position:relative;margin-bottom:20px}.docs{position:relative;z-index:2;width:68%;min-height:200px;background-color:hsl(207,0%,100%);background-clip:padding-box;border:1px solid hsla(207,5%,5%,.1);border-radius:5px;box-shadow:0 0 3px hsla(207,5%,5%,.1)}.code{position:absolute;top:5px;bottom:5px;right:0;z-index:1;width:33%;padding:10px 10px 10px 20px;border-radius:0 5px 5px 0;border:1px solid hsla(207,20%,10%,.1);background-color:hsla(207,20%,95%,.9);background-clip:padding-box;opacity:.5;-webkit-transition:opacity .4s;-moz-transition:opacity .4s;-o-transition:opacity .4s;transition:opacity .4s}.code:hover{opacity:1}.preview{background:hsl(207,0%,100%);border-top:1px solid hsl(207,30%,95%);position:relative;z-index:1}.preview-code+.preview{margin-top:0;border-top:0}.preview iframe{display:block;width:100%;height:100%;overflow:hidden}.preview-code{position:relative;z-index:2;display:block;width:100%;color:hsl(207,9%,37%);max-height:200px;padding:10px 20px;overflow-y:auto;background:hsl(207,30%,95%);border:1px solid hsl(207,30%,85%);border-left:0;border-right;box-shadow:inset 0 1px 2px hsla(207,30%,10%,.1);line-height:1.1!important;resize:none}.preview-code:focus{outline:0;background:hsl(207,30%,97%);box-shadow:inset 0 1px 2px hsla(207,30%,10%,.1),0 0 5px hsla(207,75%,75%,.9)}.preview-code:last-child{border-bottom:0;border-radius:0 0 5px 5px}.resizeable{padding:15px;overflow:auto;background:hsl(207,0%,100%);box-shadow:0 0 2px hsla(207,10%,20%,.2);resize:both}.preview-code,pre{white-space:pre-wrap;word-wrap:break-word;overflow-y:auto}.code pre{height:100%;margin-top:0}.bar{position:fixed;left:0;right:0;z-index:1010;min-height:40px;line-height:40px;background-image:-webkit-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:-moz-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:-o-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92))}.bar.top{top:0;box-shadow:0 1px 2px hsla(207,5%,0%,.2)}.bar.bottom{bottom:0;box-shadow:0 -1px 2px hsla(207,5%,0%,.2)}.bar ul{margin:0!important}.bar li{display:block;list-style:none}.bar .icon path{fill:hsla(27,10%,75%,.75)}.docs .icon path{fill:hsla(207,10%,75%,.5)}.docs .permalink:hover .icon path{fill:hsl(207,10%,75%)}.bar button{color:hsla(27,10%,75%,.75)}.bar button:hover .icon path,.bar button.is-active .icon path{fill:hsl(27,10%,85%)}.bar button:hover,.bar button.is-active{color:hsl(27,10%,85%)}.bar .icon{vertical-align:middle;display:inline-block}.bar,.bar a,.bar a:visited{color:hsl(27,10%,85%);text-shadow:1px 1px 0 hsla(27,5%,0%,.5)}.bar a:hover,.bar a.is-active{color:hsl(27,10%,95%);text-shadow:1px 1px 0 hsla(27,5%,0%,1);text-decoration:none}.brand{float:left;margin-right:20px;font-weight:700;font-size:16px;text-decoration:none}.brand,a.brand,a.brand:visited{color:hsl(27,5%,5%);text-shadow:1px 1px 0 hsla(27,5%,100%,.2)}.brand:hover,a.brand:hover{color:hsl(27,5%,0%);text-shadow:1px 1px 0 hsla(27,5%,100%,.3);text-decoration:none}.menu{font-size:12px}.menu>li{float:left;position:relative}.menu a{display:block;margin-right:15px}.dropdown-toggle{position:relative;padding-right:15px}.dropdown-toggle:after{display:block;position:absolute;right:0;top:18px;content:'';border:4px solid;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent}.nav-results,.dropdown{position:absolute;z-index:1020;top:32px;left:-16px;width:175px;max-height:500px;padding:10px 0;overflow-y:auto;word-wrap:break-word;font-size:11px;line-height:20px;background-color:hsla(207,10%,25%,.97);border:1px solid hsla(207,5%,70%,.3);border-radius:3px;box-shadow:0 0 3px hsla(207,5%,0%,.2)}.toc-list{width:200px}.nav-results{right:0;width:200px;left:auto;padding:5px 0}.nav-results-filename{display:block;font-size:10px;opacity:.75}.nav-results a{display:block;line-height:15px;padding:5px 10px}.nav-results li:not([hidden])~li a{border-top:1px solid hsla(27,10%,90%,.1)}.dropdown a{padding:0 15px}.dropdown li:hover{background-color:hsl(207,10%,22%)}.nav{float:right;position:relative}.nav input[type="search"]{padding:2px 4px;color:#fff;width:150px;border:1px solid hsla(207,5%,0%,.3);background:hsla(207,12%,40%,.9);box-shadow:inset 1px 1px 3px hsla(207,5%,0%,.05),1px 1px 0 hsla(207,5%,100%,.05);border-radius:10px;-webkit-appearance:textfield}.nav input[type="search"]:focus{outline:0;background:hsla(207,7%,45%,.9)}.settings{text-align:center}.bar button{display:inline-block;vertical-align:middle;padding:0 5px;margin:0 3px;background:transparent}.bar button:first-child{margin-left:0}.settings .auto{line-height:32px;font-size:11px;font-weight:700;letter-spacing:-1px;text-shadow:none;text-transform:uppercase}body{font-family:sans-serif;font-size:14px;line-height:1.618}.docs pre,p,ol,ul,dl,figure,blockquote,table{margin-left:20px;margin-right:20px}.preview,.docs pre,p,ol,ul,dl,figure,blockquote,table{margin-top:10px}ul ul,ol ol,ul ol,ol ul,blockquote p:last-child{margin-top:0}ul,ol{padding-left:1.5em}p:last-child,ol:last-child,ul:last-child,dl:last-child{margin-bottom:20px}hr,h1,h2,h3,h4,h5,h6{margin:1em 20px .5em}h1:first-of-type{margin-top:20px}h1,h2,h3,h4,h5,h6{line-height:1.2;color:hsl(207,10%,50%)}h1 a,h1 a:hover,h1 a:visited{color:inherit;text-decoration:inherit}h1{font-size:3.052em;font-weight:400;color:hsl(207,10%,45%)}h2{font-size:1.953em}h3{font-size:1.536em}h1,h2,h3{letter-spacing:-.025em}h4{font-size:1.25em}h5{font-size:1em;text-transform:uppercase}h6{font-size:1em}.permalink{position:absolute;top:15px;right:15px}a{color:hsl(207,90%,50%);text-decoration:none}a:hover{color:hsl(207,95%,40%);text-decoration:underline}a:visited{color:hsl(207,100%,35%)}.preview-code,pre,code,var{font-style:normal;font-family:"Ubuntu Mono","Andale Mono","DejaVu Sans Mono","Monaco","Bitstream Vera Sans Mono","Consolas","Lucida Console",monospace;font-size:12px}.docs pre,code,var{padding:.1em 3px;background:hsla(207,5%,0%,.025);border:1px solid hsla(207,5%,0%,.05);border-radius:3px}.code pre{line-height:1.1!important}pre code{padding:0;background:transparent;border:0}.cf:before,.cf:after{content:'';display:table}.cf:after{clear:both}[unselectable="on"]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[hidden]{display:none!important}small{font-size:85%;opacity:.9}</style><script type="text/preview">(function(){"use strict";var a=function(a){return Array.prototype.slice.call(a)},b=document.getElementsByTagName("body")[0],c=["link","visited","hover","active","focus","target","enabled","disabled","checked"],d=new RegExp(":(("+c.join(")|(")+"))","gi"),e=a(document.styleSheets).map(function(b){return a(b.cssRules).filter(function(a){return a.selectorText&&a.selectorText.match(d)}).map(function(a){return a.cssText.replace(d,".\\3A $1")}).join("")}).join("");if(e.length){var f=document.createElement("style");f.innerText=e;var g=document.getElementsByTagName("style")[0];g.parentNode.insertBefore(f,g)}var h=function(){var a=window.getComputedStyle(b,null);return function(){if(b.childElementCount===0)return b.offsetHeight;var c=b.getElementsByTagName("*"),d=[];for(var e=0,f=c.length;e<f;e++)d.push(c[e].offsetTop+c[e].offsetHeight+parseInt(window.getComputedStyle(c[e],null).getPropertyValue("margin-bottom")));var g=Math.max.apply(Math,d);return g+=parseInt(a.getPropertyValue("padding-bottom"),10),Math.max(g,b.offsetHeight)}}(),i={getHeight:function(){window.parent.postMessage({height:h()},"*")}};window.addEventListener("message",function(a){if(a.data==null)return;typeof a.data=="string"&&i[a.data]()},!1)})()</script><style type="text/preview">.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:""}.clearfix:after{clear:both}.btn{display:inline-block;padding:4px 10px 4px;margin-bottom:0;font-size:13px;line-height:18px;color:#333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,.75);vertical-align:middle;background-color:#f5f5f5;background-image:-moz-linear-gradient(top, #fff, #e6e6e6);background-image:-ms-linear-gradient(top, #fff, #e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from( #fff),to( #e6e6e6));background-image:-webkit-linear-gradient(top, #fff, #e6e6e6);background-image:-o-linear-gradient(top, #fff, #e6e6e6);background-image:linear-gradient(top, #fff, #e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);cursor:pointer;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);*margin-left:.3em}.btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled]{background-color:#e6e6e6}.btn:active,.btn.active{background-color:#ccc \9}.btn:first-child{*margin-left:0}.btn:hover{color:#333;text-decoration:none;background-color:#e6e6e6;background-position:0 -15px;-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-ms-transition:background-position .1s linear;-o-transition:background-position .1s linear;transition:background-position .1s linear}.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn.active,.btn:active{background-image:none;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);background-color:#e6e6e6;background-color:#d9d9d9 \9;outline:0}.btn.disabled,.btn[disabled]{cursor:default;background-image:none;background-color:#e6e6e6;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.btn-large{padding:9px 14px;font-size:15px;line-height:normal;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.btn-large [class^="icon-"]{margin-top:1px}.btn-small{padding:5px 9px;font-size:11px;line-height:16px}.btn-small [class^="icon-"]{margin-top:-1px}.btn-mini{padding:2px 6px;font-size:11px;line-height:14px}.btn-primary,.btn-primary:hover,.btn-warning,.btn-warning:hover,.btn-danger,.btn-danger:hover,.btn-success,.btn-success:hover,.btn-info,.btn-info:hover,.btn-inverse,.btn-inverse:hover{text-shadow:0 -1px 0 rgba(0,0,0,.25);color:#fff}.btn-primary.active,.btn-warning.active,.btn-danger.active,.btn-success.active,.btn-info.active,.btn-dark.active{color:rgba(255,255,255,.75)}.btn-primary{background-color:#006dcc;background-image:-moz-linear-gradient(top, #08c, #04c);background-image:-ms-linear-gradient(top, #08c, #04c);background-image:-webkit-gradient(linear,0 0,0 100%,from( #08c),to( #04c));background-image:-webkit-linear-gradient(top, #08c, #04c);background-image:-o-linear-gradient(top, #08c, #04c);background-image:linear-gradient(top, #08c, #04c);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);border-color:#04c #0044cc #002a80;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]{background-color:#04c}.btn-primary:active,.btn-primary.active{background-color:#039 \9}.btn-warning{background-color:#faa732;background-image:-moz-linear-gradient(top, #fbb450, #f89406);background-image:-ms-linear-gradient(top, #fbb450, #f89406);background-image:-webkit-gradient(linear,0 0,0 100%,from( #fbb450),to( #f89406));background-image:-webkit-linear-gradient(top, #fbb450, #f89406);background-image:-o-linear-gradient(top, #fbb450, #f89406);background-image:linear-gradient(top, #fbb450, #f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);border-color:#f89406 #f89406 #ad6704;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-warning:hover,.btn-warning:active,.btn-warning.active,.btn-warning.disabled,.btn-warning[disabled]{background-color:#f89406}.btn-warning:active,.btn-warning.active{background-color:#c67605 \9}.btn-danger{background-color:#da4f49;background-image:-moz-linear-gradient(top, #ee5f5b, #bd362f);background-image:-ms-linear-gradient(top, #ee5f5b, #bd362f);background-image:-webkit-gradient(linear,0 0,0 100%,from( #ee5f5b),to( #bd362f));background-image:-webkit-linear-gradient(top, #ee5f5b, #bd362f);background-image:-o-linear-gradient(top, #ee5f5b, #bd362f);background-image:linear-gradient(top, #ee5f5b, #bd362f);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);border-color:#bd362f #bd362f #802420;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-danger:hover,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled]{background-color:#bd362f}.btn-danger:active,.btn-danger.active{background-color:#942a25 \9}.btn-success{background-color:#5bb75b;background-image:-moz-linear-gradient(top, #62c462, #51a351);background-image:-ms-linear-gradient(top, #62c462, #51a351);background-image:-webkit-gradient(linear,0 0,0 100%,from( #62c462),to( #51a351));background-image:-webkit-linear-gradient(top, #62c462, #51a351);background-image:-o-linear-gradient(top, #62c462, #51a351);background-image:linear-gradient(top, #62c462, #51a351);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);border-color:#51a351 #51a351 #387038;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-success:hover,.btn-success:active,.btn-success.active,.btn-success.disabled,.btn-success[disabled]{background-color:#51a351}.btn-success:active,.btn-success.active{background-color:#408140 \9}.btn-info{background-color:#49afcd;background-image:-moz-linear-gradient(top, #5bc0de, #2f96b4);background-image:-ms-linear-gradient(top, #5bc0de, #2f96b4);background-image:-webkit-gradient(linear,0 0,0 100%,from( #5bc0de),to( #2f96b4));background-image:-webkit-linear-gradient(top, #5bc0de, #2f96b4);background-image:-o-linear-gradient(top, #5bc0de, #2f96b4);background-image:linear-gradient(top, #5bc0de, #2f96b4);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-info:hover,.btn-info:active,.btn-info.active,.btn-info.disabled,.btn-info[disabled]{background-color:#2f96b4}.btn-info:active,.btn-info.active{background-color:#24748c \9}.btn-inverse{background-color:#393939;background-image:-moz-linear-gradient(top, #454545, #262626);background-image:-ms-linear-gradient(top, #454545, #262626);background-image:-webkit-gradient(linear,0 0,0 100%,from( #454545),to( #262626));background-image:-webkit-linear-gradient(top, #454545, #262626);background-image:-o-linear-gradient(top, #454545, #262626);background-image:linear-gradient(top, #454545, #262626);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#262626', GradientType=0);border-color:#262626 #262626 #000;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-inverse:hover,.btn-inverse:active,.btn-inverse.active,.btn-inverse.disabled,.btn-inverse[disabled]{background-color:#262626}.btn-inverse:active,.btn-inverse.active{background-color:#0c0c0c \9}button.btn,input[type="submit"].btn{*padding-top:2px;*padding-bottom:2px}button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner{padding:0;border:0}button.btn.large,input[type="submit"].btn.large{*padding-top:7px;*padding-bottom:7px}button.btn.small,input[type="submit"].btn.small{*padding-top:3px;*padding-bottom:3px}.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:""}.clearfix:after{clear:both}.btn{display:inline-block;margin-bottom:0;font-weight:400;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.42857;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn:hover,.btn:focus{color:#333;text-decoration:none}.btn:active,.btn.active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;pointer-events:none;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none}.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active{color:#333;background-color:#ebebeb;border-color:#adadad}.open .btn-default.dropdown-toggle{color:#333;background-color:#ebebeb;border-color:#adadad}.btn-default:active,.btn-default.active{background-image:none}.open .btn-default.dropdown-toggle{background-image:none}.btn-default.disabled,.btn-default.disabled:hover,.btn-default.disabled:focus,.btn-default.disabled:active,.btn-default.disabled.active,.btn-default[disabled],.btn-default[disabled]:hover,.btn-default[disabled]:focus,.btn-default[disabled]:active,.btn-default[disabled].active,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default:hover,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default.active{background-color:#fff;border-color:#ccc}.btn-primary{color:#fff;background-color:#428bca;border-color:#357ebd}.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active{color:#fff;background-color:#3276b1;border-color:#285e8e}.open .btn-primary.dropdown-toggle{color:#fff;background-color:#3276b1;border-color:#285e8e}.btn-primary:active,.btn-primary.active{background-image:none}.open .btn-primary.dropdown-toggle{background-image:none}.btn-primary.disabled,.btn-primary.disabled:hover,.btn-primary.disabled:focus,.btn-primary.disabled:active,.btn-primary.disabled.active,.btn-primary[disabled],.btn-primary[disabled]:hover,.btn-primary[disabled]:focus,.btn-primary[disabled]:active,.btn-primary[disabled].active,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary:hover,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:active,fieldset[disabled] .btn-primary.active{background-color:#428bca;border-color:#357ebd}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active{color:#fff;background-color:#ed9c28;border-color:#d58512}.open .btn-warning.dropdown-toggle{color:#fff;background-color:#ed9c28;border-color:#d58512}.btn-warning:active,.btn-warning.active{background-image:none}.open .btn-warning.dropdown-toggle{background-image:none}.btn-warning.disabled,.btn-warning.disabled:hover,.btn-warning.disabled:focus,.btn-warning.disabled:active,.btn-warning.disabled.active,.btn-warning[disabled],.btn-warning[disabled]:hover,.btn-warning[disabled]:focus,.btn-warning[disabled]:active,.btn-warning[disabled].active,fieldset[disabled] .btn-warning,fieldset[disabled] .btn-warning:hover,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:active,fieldset[disabled] .btn-warning.active{background-color:#f0ad4e;border-color:#eea236}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active{color:#fff;background-color:#d2322d;border-color:#ac2925}.open .btn-danger.dropdown-toggle{color:#fff;background-color:#d2322d;border-color:#ac2925}.btn-danger:active,.btn-danger.active{background-image:none}.open .btn-danger.dropdown-toggle{background-image:none}.btn-danger.disabled,.btn-danger.disabled:hover,.btn-danger.disabled:focus,.btn-danger.disabled:active,.btn-danger.disabled.active,.btn-danger[disabled],.btn-danger[disabled]:hover,.btn-danger[disabled]:focus,.btn-danger[disabled]:active,.btn-danger[disabled].active,fieldset[disabled] .btn-danger,fieldset[disabled] .btn-danger:hover,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:active,fieldset[disabled] .btn-danger.active{background-color:#d9534f;border-color:#d43f3a}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active{color:#fff;background-color:#47a447;border-color:#398439}.open .btn-success.dropdown-toggle{color:#fff;background-color:#47a447;border-color:#398439}.btn-success:active,.btn-success.active{background-image:none}.open .btn-success.dropdown-toggle{background-image:none}.btn-success.disabled,.btn-success.disabled:hover,.btn-success.disabled:focus,.btn-success.disabled:active,.btn-success.disabled.active,.btn-success[disabled],.btn-success[disabled]:hover,.btn-success[disabled]:focus,.btn-success[disabled]:active,.btn-success[disabled].active,fieldset[disabled] .btn-success,fieldset[disabled] .btn-success:hover,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:active,fieldset[disabled] .btn-success.active{background-color:#5cb85c;border-color:#4cae4c}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active{color:#fff;background-color:#39b3d7;border-color:#269abc}.open .btn-info.dropdown-toggle{color:#fff;background-color:#39b3d7;border-color:#269abc}.btn-info:active,.btn-info.active{background-image:none}.open .btn-info.dropdown-toggle{background-image:none}.btn-info.disabled,.btn-info.disabled:hover,.btn-info.disabled:focus,.btn-info.disabled:active,.btn-info.disabled.active,.btn-info[disabled],.btn-info[disabled]:hover,.btn-info[disabled]:focus,.btn-info[disabled]:active,.btn-info[disabled].active,fieldset[disabled] .btn-info,fieldset[disabled] .btn-info:hover,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:active,fieldset[disabled] .btn-info.active{background-color:#5bc0de;border-color:#46b8da}.btn-link{color:#428bca;font-weight:400;cursor:pointer;border-radius:0}.btn-link,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{border-color:transparent}.btn-link:hover,.btn-link:focus{color:#2a6496;text-decoration:underline;background-color:transparent}.btn-link[disabled]:hover,.btn-link[disabled]:focus,fieldset[disabled] .btn-link:hover,fieldset[disabled] .btn-link:focus{color:#999;text-decoration:none}.btn-lg{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}.btn-sm,.btn-xs{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.btn-xs{padding:1px 5px}.btn-block{display:block;width:100%;padding-left:0;padding-right:0}.btn-block+.btn-block{margin-top:5px}input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block{width:100%}</style></head><body><nav class="bar top cf"><div class="container"><a href="index.html" class="brand">styledocco</a><ul class="menu"><li><a href="#" data-toggle="dropdown-1" unselectable="on" class="dropdown-toggle">less</a><ul id="dropdown-1" hidden class="dropdown"><li><a href="less-buttons.html">buttons</a></li><li><a href="less-mixins.html">mixins</a></li><li><a href="less-variables.html">variables</a></li></ul></li><li><a href="#" data-toggle="dropdown-2" unselectable="on" class="dropdown-toggle">sass</a><ul id="dropdown-2" hidden class="dropdown"><li><a href="sass-buttons.html">buttons</a></li><li><a href="sass-mixins.html">mixins</a></li><li><a href="sass-variables.html">variables</a></li><li><a href="sass-bootstrap.html">bootstrap</a></li></ul></li></ul><div class="nav"><button title="Table of Contents" data-toggle="nav-toc"><svg viewBox="0 0 512 512" height="22" width="22" class="icon"><path d="M108.9,403.1V462H50v-58.9H108.9z M108.9,285.4H50v58.9h58.9V285.4zM108.9,50H50v58.9h58.9V50z M108.9,167.7H50v58.9h58.9V167.7z M167.7,344.3H462v-58.9H167.7V344.3zM167.7,50v58.9H462V50H167.7z M167.7,462H462v-58.9H167.7V462z M167.7,226.6H462v-58.9H167.7V226.6z"></path></svg></button><input type="search" placeholder="Search" class="search"></div></div></nav><section class="container"><article id="mixins" class="section"><div class="docs"><a href="#mixins" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h2 id="mixins"> Mixins</h2> <h2 id="utilities"> Utilities</h2> <p> Clearfix Source: <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a></p> <p> For modern browsers</p> <ol> <li>The space content is one way to avoid an Opera bug when the contenteditable attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that are clearfixed.</li> <li>The use of <code>table</code> rather than <code>block</code> is only necessary if using <code>:before</code> to contain the top-margins of child elements.</li> </ol> <p> WebKit-style focus</p> <p> Center-align a block level element</p> <p> Sizing shortcuts</p> <p> Placeholder text</p> <p> Text overflow Requires inline-block or block for proper styling</p> <p> CSS image replacement</p> <p> Heads up! v3 launched with with only <code>.hide-text()</code>, but per our pattern for mixins being reused as classes with the same name, this doesn't hold up. As of v3.0.1 we have added <code>.text-hide()</code> and deprecated <code>.hide-text()</code>. Note that we cannot chain the mixins together in Less, so they are repeated.</p> <p> Source: <a href="https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757">https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757</a></p> <p> Deprecated as of v3.0.1 (will be removed in v4)</p> <p> New mixin to use as of v3.0.1</p> <h2 id="css3-properties"> CSS3 PROPERTIES</h2> <p> Single side border-radius</p> <p> Drop shadows</p> <p> Transitions</p> <p> Transformations</p> <p> Animations</p> <p> Backface visibility Prevent browsers from flickering when using CSS 3D transforms. Default value is <code>visible</code>, but can be changed to <code>hidden</code></p> <p> Box sizing</p> <p> User select For selecting text on the page</p> <p> Resize anything</p> <p> CSS3 Content Columns</p> <p> Optional hyphenation</p> <p> Opacity</p> <h2 id="gradients"> GRADIENTS</h2> <p> Horizontal gradient, from left to right</p> <p> Creates two color stops, start and end, by specifying a color and position for each color stop. Color stops are not available in IE9 and below.</p> <p> Vertical gradient, from top to bottom</p> <p> Creates two color stops, start and end, by specifying a color and position for each color stop. Color stops are not available in IE9 and below.</p> <p> Reset filters for IE</p> <p> When you need to remove a gradient background, do not forget to use this to reset the IE filter for IE9 and below.</p> <p> Retina images</p> <p> Short retina mixin for setting background-image and -size</p> <p> Responsive image</p> <p> Keep images from scaling beyond the width of their parents.</p> <h2 id="component-mixins"> COMPONENT MIXINS</h2> <h2 id="horizontal-dividers"> Horizontal dividers</h2> <p> Dividers (basically an hr) within dropdowns and nav lists</p> <h2 id="panels"> Panels</h2> <h2 id="alerts"> Alerts</h2> <h2 id="tables"> Tables</h2> <h2 id="button-variants"> Button variants</h2> <p> Easily pump out default styles, as well as :hover, :focus, :active, and disabled options for all buttons</p> <h2 id="button-sizes"> Button sizes</h2> <h2 id="pagination"> Pagination</h2> <h2 id="labels"> Labels</h2> <h2 id="navbar-vertical-align"> Navbar vertical align</h2> <p> Vertically center elements in the navbar. Example: an element has a height of 30px, so write out <code>.navbar-vertical-align(30px);</code> to calculate the appropriate top margin.</p> <h2 id="progress-bars"> Progress bars</h2> <h2 id="responsive-utilities"> Responsive utilities</h2> <p> More easily include all the states for responsive-utilities.less. [converter] $parent hack</p> <p> [converter] $parent hack</p> <h2 id="grid-system"> Grid System</h2> <p> Centered container element</p> <p> Creates a wrapper for a series of columns</p> <p> Generate the extra small columns</p> <p> Generate the small columns</p> <p> Generate the small column offsets</p> <p> Generate the medium columns</p> <p> Generate the medium column offsets</p> <p> Generate the large columns</p> <p> Generate the large column offsets</p> <p> Framework grid generation</p> <p> Used only by Bootstrap to generate the correct number of grid classes given any value of <code>$grid-columns</code>.</p> <p> [converter] Grid converted to use SASS cycles (LESS uses recursive nested mixin defs not supported by SASS)</p> <p> [converter] Grid converted to use SASS cycles (LESS uses recursive nested mixin defs not supported by SASS)</p> <p> [converter] This is defined recursively in LESS, but SASS supports real loops</p> <p> Form validation states</p> <p> Used in forms.less to generate the form validation CSS for warnings, errors, and successes.</p> <p> Form control focus state</p> <p> Generate a customized focus state and for any input with the specified color, which defaults to the <code>$input-focus-border</code> variable.</p> <p> We highly encourage you to not customize the default value, but instead use this to tweak colors on an as-needed basis. This aesthetic change is based on WebKit's default styles, but applicable to a wider range of browsers. Its usability and accessibility should be taken into account with any change.</p> <p> Example usage: change the default blue border and shadow to white for better contrast against a dark gray background.</p> <p> Form control sizing</p> <p> Relative text size, padding, and border-radii changes for form controls. For horizontal sizing, wrap controls in the predefined grid classes. <code><select></code> element gets special love because it's special, and that's a fact!</p> <p> [converter] $parent hack</p> </div><div class="code"><pre><code>@mixin clearfix() { &:before, &:after { content: " "; /* 1 */ display: table; /* 2 */ } &:after { clear: both; } } @mixin tab-focus() { // Default outline: thin dotted #333; // WebKit outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } @mixin center-block() { display: block; margin-left: auto; margin-right: auto; } @mixin size($width, $height) { width: $width; height: $height; } @mixin square($size) { @include size($size, $size); } @mixin placeholder($color: $input-color-placeholder) { &:-moz-placeholder { color: $color; } // Firefox 4-18 &::-moz-placeholder { color: $color; } // Firefox 19+ &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+ &::-webkit-input-placeholder { color: $color; } // Safari and Chrome } @mixin text-overflow() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @mixin hide-text() { font: #{0/0} a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } @mixin text-hide() { font: #{0/0} a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } @mixin border-top-radius($radius) { border-top-right-radius: $radius; border-top-left-radius: $radius; } @mixin border-right-radius($radius) { border-bottom-right-radius: $radius; border-top-right-radius: $radius; } @mixin border-bottom-radius($radius) { border-bottom-right-radius: $radius; border-bottom-left-radius: $radius; } @mixin border-left-radius($radius) { border-bottom-left-radius: $radius; border-top-left-radius: $radius; } @mixin box-shadow($shadow...) { -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 box-shadow: $shadow; } @mixin transition($transition...) { -webkit-transition: $transition; transition: $transition; } @mixin transition-property($transition-property) { -webkit-transition-property: $transition-property; transition-property: $transition-property; } @mixin transition-delay($transition-delay) { -webkit-transition-delay: $transition-delay; transition-delay: $transition-delay; } @mixin transition-duration($transition-duration) { -webkit-transition-duration: $transition-duration; transition-duration: $transition-duration; } @mixin transition-transform($transition...) { -webkit-transition: -webkit-transform $transition; -moz-transition: -moz-transform $transition; -o-transition: -o-transform $transition; transition: transform $transition; } @mixin rotate($degrees) { -webkit-transform: rotate($degrees); -ms-transform: rotate($degrees); // IE9+ transform: rotate($degrees); } @mixin scale($ratio) { -webkit-transform: scale($ratio); -ms-transform: scale($ratio); // IE9+ transform: scale($ratio); } @mixin translate($x, $y) { -webkit-transform: translate($x, $y); -ms-transform: translate($x, $y); // IE9+ transform: translate($x, $y); } @mixin skew($x, $y) { -webkit-transform: skew($x, $y); -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ transform: skew($x, $y); } @mixin translate3d($x, $y, $z) { -webkit-transform: translate3d($x, $y, $z); transform: translate3d($x, $y, $z); } @mixin rotateX($degrees) { -webkit-transform: rotateX($degrees); -ms-transform: rotateX($degrees); // IE9+ transform: rotateX($degrees); } @mixin rotateY($degrees) { -webkit-transform: rotateY($degrees); -ms-transform: rotateY($degrees); // IE9+ transform: rotateY($degrees); } @mixin perspective($perspective) { -webkit-perspective: $perspective; -moz-perspective: $perspective; perspective: $perspective; } @mixin perspective-origin($perspective) { -webkit-perspective-origin: $perspective; -moz-perspective-origin: $perspective; perspective-origin: $perspective; } @mixin transform-origin($origin) { -webkit-transform-origin: $origin; -moz-transform-origin: $origin; transform-origin: $origin; } @mixin animation($animation) { -webkit-animation: $animation; animation: $animation; } @mixin backface-visibility($visibility){ -webkit-backface-visibility: $visibility; -moz-backface-visibility: $visibility; backface-visibility: $visibility; } @mixin box-sizing($boxmodel) { -webkit-box-sizing: $boxmodel; -moz-box-sizing: $boxmodel; box-sizing: $boxmodel; } @mixin user-select($select) { -webkit-user-select: $select; -moz-user-select: $select; -ms-user-select: $select; // IE10+ -o-user-select: $select; user-select: $select; } @mixin resizable($direction) { resize: $direction; // Options: horizontal, vertical, both overflow: auto; // Safari fix } @mixin content-columns($column-count, $column-gap: $grid-gutter-width) { -webkit-column-count: $column-count; -moz-column-count: $column-count; column-count: $column-count; -webkit-column-gap: $column-gap; -moz-column-gap: $column-gap; column-gap: $column-gap; } @mixin hyphens($mode: auto) { word-wrap: break-word; -webkit-hyphens: $mode; -moz-hyphens: $mode; -ms-hyphens: $mode; // IE10+ -o-hyphens: $mode; hyphens: $mode; } @mixin opacity($opacity) { opacity: $opacity; // IE8 filter $opacity-ie: ($opacity * 100); filter: #{alpha(opacity=$opacity-ie)}; } @mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { background-image: -webkit-gradient(linear, $start-percent top, $end-percent top, from($start-color), to($end-color)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1+, Chrome 10+ background-image: -moz-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // FF 3.6+ background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10 background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down } @mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { background-image: -webkit-gradient(linear, left $start-percent, left $end-percent, from($start-color), to($end-color)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1+, Chrome 10+ background-image: -moz-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // FF 3.6+ background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10 background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down } @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) { background-repeat: repeat-x; background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1+, Chrome 10+ background-image: -moz-linear-gradient($deg, $start-color, $end-color); // FF 3.6+ background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10 } @mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from($start-color), color-stop($color-stop, $mid-color), to($end-color)); background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color); background-image: -moz-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color); background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); background-repeat: no-repeat; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback } @mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { background-image: -webkit-gradient(linear, 0 0, 0 100%, from($start-color), color-stop($color-stop, $mid-color), to($end-color)); background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color); background-image: -moz-linear-gradient(top, $start-color, $mid-color $color-stop, $end-color); background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); background-repeat: no-repeat; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback } @mixin gradient-radial($inner-color: #555, $outer-color: #333) { background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($inner-color), to($outer-color)); background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color); background-image: -moz-radial-gradient(circle, $inner-color, $outer-color); background-image: radial-gradient(circle, $inner-color, $outer-color); background-repeat: no-repeat; } @mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) { background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, $color), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, $color), color-stop(.75, $color), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); background-image: -moz-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); } @mixin reset-filter() { filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { background-image: image-url("#{$file-1x}"); @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { background-image: image-url("#{$file-2x}"); background-size: $width-1x $height-1x; } } @mixin img-responsive($display: block) { display: $display; max-width: 100%; // Part 1: Set a maximum relative to the parent height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching } @mixin nav-divider($color: #e5e5e5) { height: 1px; margin: (($line-height-computed / 2) - 1) 0; overflow: hidden; background-color: $color; } @mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) { border-color: $border; & > .panel-heading { color: $heading-text-color; background-color: $heading-bg-color; border-color: $heading-border; + .panel-collapse .panel-body { border-top-color: $border; } & > .dropdown .caret { border-color: $heading-text-color transparent; } } & > .panel-footer { + .panel-collapse .panel-body { border-bottom-color: $border; } } } @mixin alert-variant($background, $border, $text-color) { background-color: $background; border-color: $border; color: $text-color; hr { border-top-color: darken($border, 5%); } .alert-link { color: darken($text-color, 10%); } } @mixin table-row-variant($state, $background, $border) { // Exact selectors below required to override `.table-striped` and prevent // inheritance to nested tables. .table > thead > tr, .table > tbody > tr, .table > tfoot > tr { > td.#{$state}, > th.#{$state}, &.#{$state} > td, &.#{$state} > th { background-color: $background; } } // Hover states for `.table-hover` // Note: this is not available for cells or rows within `thead` or `tfoot`. .table-hover > tbody > tr { > td.#{$state}:hover, > th.#{$state}:hover, &.#{$state}:hover > td, &.#{$state}:hover > th { background-color: darken($background, 5%); } } } @mixin button-variant($color, $background, $border) { color: $color; background-color: $background; border-color: $border; &:hover, &:focus, &:active, &.active { color: $color; background-color: darken($background, 8%); border-color: darken($border, 12%); } .open & { &.dropdown-toggle { color: $color; background-color: darken($background, 8%); border-color: darken($border, 12%); } } &:active, &.active { background-image: none; } .open & { &.dropdown-toggle { background-image: none; } } &.disabled, &[disabled], fieldset[disabled] & { &, &:hover, &:focus, &:active, &.active { background-color: $background; border-color: $border; } } } @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { padding: $padding-vertical $padding-horizontal; font-size: $font-size; line-height: $line-height; border-radius: $border-radius; } @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) { > li { > a, > span { padding: $padding-vertical $padding-horizontal; font-size: $font-size; } &:first-child { > a, > span { @include border-left-radius($border-radius); } } &:last-child { > a, > span { @include border-right-radius($border-radius); } } } } @mixin label-variant($color) { background-color: $color; &[href] { &:hover, &:focus { background-color: darken($color, 10%); } } } @mixin navbar-vertical-align($element-height) { margin-top: (($navbar-height - $element-height) / 2); margin-bottom: (($navbar-height - $element-height) / 2); } @mixin progress-bar-variant($color) { background-color: $color; .progress-striped & { @include gradient-striped(); } } @mixin responsive-visibility($parent) { #{$parent} { display: block !important; } tr#{$parent} { display: table-row !important; } th#{$parent}, td#{$parent} { display: table-cell !important; } } @mixin responsive-invisibility($parent) { #{$parent}, tr#{$parent}, th#{$parent}, td#{$parent} { display: none !important; } } @mixin container-fixed() { margin-right: auto; margin-left: auto; padding-left: ($grid-gutter-width / 2); padding-right: ($grid-gutter-width / 2); @include clearfix(); } @mixin make-row($gutter: $grid-gutter-width) { margin-left: ($gutter / -2); margin-right: ($gutter / -2); @include clearfix(); } @mixin make-xs-column($columns, $gutter: $grid-gutter-width) { position: relative; float: left; width: percentage(($columns / $grid-columns)); // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: ($gutter / 2); padding-right: ($gutter / 2); } @mixin make-sm-column($columns, $gutter: $grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: ($gutter / 2); padding-right: ($gutter / 2); // Calculate width based on number of columns available @media (min-width: $screen-sm-min) { float: left; width: percentage(($columns / $grid-columns)); } } @mixin make-sm-column-offset($columns) { @media (min-width: $screen-sm-min) { margin-left: percentage(($columns / $grid-columns)); } } @mixin make-sm-column-push($columns) { @media (min-width: $screen-sm-min) { left: percentage(($columns / $grid-columns)); } } @mixin make-sm-column-pull($columns) { @media (min-width: $screen-sm-min) { right: percentage(($columns / $grid-columns)); } } @mixin make-md-column($columns, $gutter: $grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: ($gutter / 2); padding-right: ($gutter / 2); // Calculate width based on number of columns available @media (min-width: $screen-md-min) { float: left; width: percentage(($columns / $grid-columns)); } } @mixin make-md-column-offset($columns) { @media (min-width: $screen-md-min) { margin-left: percentage(($columns / $grid-columns)); } } @mixin make-md-column-push($columns) { @media (min-width: $screen-md) { left: percentage(($columns / $grid-columns)); } } @mixin make-md-column-pull($columns) { @media (min-width: $screen-md-min) { right: percentage(($columns / $grid-columns)); } } @mixin make-lg-column($columns, $gutter: $grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: ($gutter / 2); padding-right: ($gutter / 2); // Calculate width based on number of columns available @media (min-width: $screen-lg-min) { float: left; width: percentage(($columns / $grid-columns)); } } @mix