// styles and effects .round-corners { -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; } @mixin rounded { -moz-border-radius: 50px; -webkit-border-radius: 50px; -khtml-border-radius: 50px; border-radius: 50px; } .rounded { @include rounded; } @mixin animate-background-color { transition: background-color .3s ease-in-out; -moz-transition: background-color .3s ease-in-out; -webkit-transition: background-color .3s ease-in-out; -o-transition: background-color .3s ease-in-out; } .animate-background-color { @include animate-background-color; } @mixin animate-text-color { transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -webkit-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; } .animate-text-color { @include animate-text-color; } @mixin animate-opacity { transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; } .animate-opacity { @include animate-opacity; } @mixin drop-shadow { -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) !important; -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) !important; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) !important; @include animate-opacity; } .drop-shadow { @include drop-shadow; } @mixin hyphenate { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .hyphenate { @include hyphenate; } @mixin uppercase { text-transform: uppercase; } .uppercase { @include uppercase; } @mixin padded { padding: ($baseline * 3) 0; } .padded { @include padded; } @mixin padded-medium { padding: ($baseline * 2) 0; } .padded-medium { @include padded-medium; } @mixin padded-small{ padding: $baseline 0; } .padded-small { @include padded-small; } @mixin transition($transition) { -webkit-transition: $transition; -o-transition: $transition; transition: $transition; } @mixin translate3d($x, $y: 0, $z: 0) { -webkit-transform: translate3d($x, $y, $z); -moz-transform: translate3d($x, $y, $z); -ms-transform: translate3d($x, $y, $z); -o-transform: translate3d($x, $y, $z); } @mixin clearfix { zoom:1; &:before, &:after{ content:""; display:table; } &:after{ clear: both; } } .clearfix { @include clearfix; } @mixin inner-bg-large { background-image: #c1b4d5; /* Old browsers */ background-image: image-url("sidebar_background_inner.png"), -moz-linear-gradient(45deg, #c1b4d5 0%, #98d3f8 100%); /* FF3.6+ */ background-image: image-url("sidebar_background_inner.png"), -webkit-gradient(linear, left bottom, right top, color-stop(0%,#c1b4d5), color-stop(100%,#98d3f8)); /* Chrome,Safari4+ */ background-image: image-url("sidebar_background_inner.png"), -webkit-linear-gradient(45deg, #c1b4d5 0%,#98d3f8 100%); /* Chrome10+,Safari5.1+ */ background-image: image-url("sidebar_background_inner.png"), -o-linear-gradient(45deg, #c1b4d5 0%,#98d3f8 100%); /* Opera 11.10+ */ background-image: image-url("sidebar_background_inner.png"), -ms-linear-gradient(45deg, #c1b4d5 0%,#98d3f8 100%); /* IE10+ */ background-image: image-url("sidebar_background_inner.png"), linear-gradient(45deg, #c1b4d5 0%,#98d3f8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1b4d5', endColorstr='#98d3f8',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ background-repeat: no-repeat; background-position: 0 0; } .inner-bg-large { @include inner-bg-large; } @mixin inner-bg-small { background: #c1b4d5; /* Old browsers */ background: -moz-linear-gradient(45deg, #c1b4d5 0%, #98d3f8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#c1b4d5), color-stop(100%,#98d3f8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, #c1b4d5 0%,#98d3f8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, #c1b4d5 0%,#98d3f8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, #c1b4d5 0%,#98d3f8 100%); /* IE10+ */ background: linear-gradient(45deg, #c1b4d5 0%,#98d3f8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1b4d5', endColorstr='#98d3f8',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ } .inner-bg-small { } @mixin docs-bg-large { background-image: image-url("sidebar_background_docs.png"), #362d6c; /* Old browsers */ background-image: image-url("sidebar_background_docs.png"), -moz-linear-gradient(45deg, #362d6c 0%, #0c5593 100%); /* FF3.6+ */ background-image: image-url("sidebar_background_docs.png"), -webkit-gradient(linear, left bottom, right top, color-stop(0%,#362d6c), color-stop(100%,#0c5593)); /* Chrome,Safari4+ */ background-image: image-url("sidebar_background_docs.png"), -webkit-linear-gradient(45deg, #362d6c 0%,#0c5593 100%); /* Chrome10+,Safari5.1+ */ background-image: image-url("sidebar_background_docs.png"), -o-linear-gradient(45deg, #362d6c 0%,#0c5593 100%); /* Opera 11.10+ */ background-image: image-url("sidebar_background_docs.png"), -ms-linear-gradient(45deg, #362d6c 0%,#0c5593 100%); /* IE10+ */ background-image: image-url("sidebar_background_docs.png"), linear-gradient(45deg, #362d6c 0%,#0c5593 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362d6c', endColorstr='#0c5593',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ background-repeat: no-repeat; background-position: 0 140px, 0 0; } .docs-bg-large { @include docs-bg-large; } @mixin docs-bg-small { background: #362d6c; /* Old browsers */ background: -moz-linear-gradient(45deg, #362d6c 0%, #0c5593 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#362d6c), color-stop(100%,#0c5593)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, #362d6c 0%,#0c5593 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, #362d6c 0%,#0c5593 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, #362d6c 0%,#0c5593 100%); /* IE10+ */ background: linear-gradient(45deg, #362d6c 0%,#0c5593 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362d6c', endColorstr='#0c5593',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ } .docs-bg-small { @include docs-bg-small; } @mixin get-started-bg { background-image: #362d6c; /* Old browsers */ background-image: -moz-linear-gradient(45deg, #362d6c 0%, #0c5593 100%); /* FF3.6+ */ background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#362d6c), color-stop(100%,#0c5593)); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(45deg, #362d6c 0%,#0c5593 100%); /* Chrome10+,Safari5.1+ */ background-image: -o-linear-gradient(45deg, #362d6c 0%,#0c5593 100%); /* Opera 11.10+ */ background-image: -ms-linear-gradient(45deg, #362d6c 0%,#0c5593 100%); /* IE10+ */ background-image: linear-gradient(45deg, #362d6c 0%,#0c5593 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362d6c', endColorstr='#0c5593',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ background-position: center 0; background-repeat: no-repeat; } .get-started-bg { @include get-started-bg; } /* .sidebar-nav-selected { background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(71,101,118,1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(71,101,118,1))); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(71,101,118,1) 100%); background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(71,101,118,1) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(71,101,118,1) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(71,101,118,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#476576',GradientType=1 ); } */ // helpers @mixin reset { margin: 0; padding: 0; } .reset { @include reset; } @mixin kill-effects { -webkit-box-shadow: 0 0; -moz-box-shadow: 0 0; box-shadow: 0 0; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; font-family: inherit; color: inherit; background-color: transparent; background-image: none; border: 0; text-shadow: none; } .kill-effects { @include kill-effects; } .debug { border: 1px solid #ff0000; } @mixin hover { &:hover { cursor: pointer; @include animate-text-color; } } .hover { @include hover; }