From e792606519ab2fa80b256ea7ab049676b63dc33f Mon Sep 17 00:00:00 2001 From: captainill Date: Fri, 6 Nov 2015 23:17:00 -0800 Subject: [PATCH] basic structure of redesign --- .../source/assets/javascripts/_app/Sidebar.js | 50 ++ website/source/assets/javascripts/_app/app.js | 27 +- .../assets/javascripts/application.coffee | 3 + website/source/assets/javascripts/lib/Base.js | 145 ++++ .../source/assets/stylesheets/_header.scss | 386 ++-------- .../source/assets/stylesheets/_mixins.scss | 724 ------------------ .../source/assets/stylesheets/_sidebar.scss | 23 + .../assets/stylesheets/application.scss | 10 +- .../hashicorp-shared/_hashicorp-header.scss | 228 ++++++ .../hashicorp-shared/_hashicorp-sidebar.scss | 293 +++++++ .../hashicorp-shared/_hashicorp-utility.scss | 87 +++ .../hashicorp-shared/_project-utility.scss | 20 + website/source/layouts/_header.erb | 62 +- website/source/layouts/_sidebar.erb | 27 + website/source/layouts/layout.erb | 1 + .../source/layouts/svg/_svg-by-hashicorp.erb | 18 + website/source/layouts/svg/_svg-download.erb | 4 + website/source/layouts/svg/_svg-github.erb | 9 + .../layouts/svg/_svg-hashicorp-logo.erb | 7 + 19 files changed, 1060 insertions(+), 1064 deletions(-) create mode 100644 website/source/assets/javascripts/_app/Sidebar.js create mode 100644 website/source/assets/javascripts/lib/Base.js delete mode 100755 website/source/assets/stylesheets/_mixins.scss create mode 100644 website/source/assets/stylesheets/_sidebar.scss create mode 100755 website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss create mode 100644 website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss create mode 100755 website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss create mode 100755 website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss create mode 100644 website/source/layouts/_sidebar.erb create mode 100644 website/source/layouts/svg/_svg-by-hashicorp.erb create mode 100644 website/source/layouts/svg/_svg-download.erb create mode 100644 website/source/layouts/svg/_svg-github.erb create mode 100644 website/source/layouts/svg/_svg-hashicorp-logo.erb diff --git a/website/source/assets/javascripts/_app/Sidebar.js b/website/source/assets/javascripts/_app/Sidebar.js new file mode 100644 index 0000000000..b36e508c4a --- /dev/null +++ b/website/source/assets/javascripts/_app/Sidebar.js @@ -0,0 +1,50 @@ +(function(){ + + Sidebar = Base.extend({ + + $body: null, + $overlay: null, + $sidebar: null, + $sidebarHeader: null, + $sidebarImg: null, + $toggleButton: null, + + constructor: function(){ + this.$body = $('body'); + this.$overlay = $('.sidebar-overlay'); + this.$sidebar = $('#sidebar'); + this.$sidebarHeader = $('#sidebar .sidebar-header'); + this.$toggleButton = $('.navbar-toggle'); + this.sidebarImg = this.$sidebarHeader.css('background-image'); + + this.addEventListeners(); + }, + + addEventListeners: function(){ + var _this = this; + + _this.$toggleButton.on('click', function() { + _this.$sidebar.toggleClass('open'); + if ((_this.$sidebar.hasClass('sidebar-fixed-left') || _this.$sidebar.hasClass('sidebar-fixed-right')) && _this.$sidebar.hasClass('open')) { + _this.$overlay.addClass('active'); + _this.$body.css('overflow', 'hidden'); + } else { + _this.$overlay.removeClass('active'); + _this.$body.css('overflow', 'auto'); + } + + return false; + }); + + _this.$overlay.on('click', function() { + $(this).removeClass('active'); + _this.$body.css('overflow', 'auto'); + _this.$sidebar.removeClass('open'); + }); + } + + }); + + window.Sidebar = Sidebar; + +})(); diff --git a/website/source/assets/javascripts/_app/app.js b/website/source/assets/javascripts/_app/app.js index c75c3614ef..4cff2744f4 100644 --- a/website/source/assets/javascripts/_app/app.js +++ b/website/source/assets/javascripts/_app/app.js @@ -4,17 +4,24 @@ var APP = (function() { - function initialize (){ - APP.Utils.runIfClassNamePresent('page-home', initHome); - } + function initializeSidebar() { + new Sidebar(); + } - function initHome() { - APP.Homepage.init(); - } + function initialize() { + APP.Utils.runIfClassNamePresent('page-home', initHome); - //api - return { - initialize: initialize - } + //always init sidebar + initializeSidebar(); + } + + function initHome() { + APP.Homepage.init(); + } + + //api + return { + initialize: initialize + } })(); diff --git a/website/source/assets/javascripts/application.coffee b/website/source/assets/javascripts/application.coffee index c226f163a5..cd144c6b25 100644 --- a/website/source/assets/javascripts/application.coffee +++ b/website/source/assets/javascripts/application.coffee @@ -2,6 +2,9 @@ #= require jquery #= require bootstrap +#= require lib/Base + +#= require _app/Sidebar #= require _app/app #= require _app/homepage #= require _app/util diff --git a/website/source/assets/javascripts/lib/Base.js b/website/source/assets/javascripts/lib/Base.js new file mode 100644 index 0000000000..504e2beea1 --- /dev/null +++ b/website/source/assets/javascripts/lib/Base.js @@ -0,0 +1,145 @@ +/* + Based on Base.js 1.1a (c) 2006-2010, Dean Edwards + Updated to pass JSHint and converted into a module by Kenneth Powers + License: http://www.opensource.org/licenses/mit-license.php +*/ +/*global define:true module:true*/ +/*jshint eqeqeq:true*/ +(function (name, global, definition) { + if (typeof module !== 'undefined') { + module.exports = definition(); + } else if (typeof define !== 'undefined' && typeof define.amd === 'object') { + define(definition); + } else { + global[name] = definition(); + } +})('Base', this, function () { + // Base Object + var Base = function () {}; + + // Implementation + Base.extend = function (_instance, _static) { // subclass + var extend = Base.prototype.extend; + // build the prototype + Base._prototyping = true; + var proto = new this(); + extend.call(proto, _instance); + proto.base = function () { + // call this method from any other method to invoke that method's ancestor + }; + delete Base._prototyping; + // create the wrapper for the constructor function + //var constructor = proto.constructor.valueOf(); //-dean + var constructor = proto.constructor; + var klass = proto.constructor = function () { + if (!Base._prototyping) { + if (this._constructing || this.constructor === klass) { // instantiation + this._constructing = true; + constructor.apply(this, arguments); + delete this._constructing; + } else if (arguments[0] !== null) { // casting + return (arguments[0].extend || extend).call(arguments[0], proto); + } + } + }; + // build the class interface + klass.ancestor = this; + klass.extend = this.extend; + klass.forEach = this.forEach; + klass.implement = this.implement; + klass.prototype = proto; + klass.toString = this.toString; + klass.valueOf = function (type) { + return (type === 'object') ? klass : constructor.valueOf(); + }; + extend.call(klass, _static); + // class initialization + if (typeof klass.init === 'function') klass.init(); + return klass; + }; + + Base.prototype = { + extend: function (source, value) { + if (arguments.length > 1) { // extending with a name/value pair + var ancestor = this[source]; + if (ancestor && (typeof value === 'function') && // overriding a method? + // the valueOf() comparison is to avoid circular references + (!ancestor.valueOf || ancestor.valueOf() !== value.valueOf()) && /\bbase\b/.test(value)) { + // get the underlying method + var method = value.valueOf(); + // override + value = function () { + var previous = this.base || Base.prototype.base; + this.base = ancestor; + var returnValue = method.apply(this, arguments); + this.base = previous; + return returnValue; + }; + // point to the underlying method + value.valueOf = function (type) { + return (type === 'object') ? value : method; + }; + value.toString = Base.toString; + } + this[source] = value; + } else if (source) { // extending with an object literal + var extend = Base.prototype.extend; + // if this object has a customized extend method then use it + if (!Base._prototyping && typeof this !== 'function') { + extend = this.extend || extend; + } + var proto = { + toSource: null + }; + // do the "toString" and other methods manually + var hidden = ['constructor', 'toString', 'valueOf']; + // if we are prototyping then include the constructor + for (var i = Base._prototyping ? 0 : 1; i < hidden.length; i++) { + var h = hidden[i]; + if (source[h] !== proto[h]) + extend.call(this, h, source[h]); + } + // copy each of the source object's properties to this object + for (var key in source) { + if (!proto[key]) extend.call(this, key, source[key]); + } + } + return this; + } + }; + + // initialize + Base = Base.extend({ + constructor: function () { + this.extend(arguments[0]); + } + }, { + ancestor: Object, + version: '1.1', + forEach: function (object, block, context) { + for (var key in object) { + if (this.prototype[key] === undefined) { + block.call(context, object[key], key, object); + } + } + }, + implement: function () { + for (var i = 0; i < arguments.length; i++) { + if (typeof arguments[i] === 'function') { + // if it's a function, call it + arguments[i](this.prototype); + } else { + // add the interface using the extend method + this.prototype.extend(arguments[i]); + } + } + return this; + }, + toString: function () { + return String(this.valueOf()); + } + }); + + // Return Base implementation + return Base; +}); diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss index c002e9f0b4..6c60e2a9a4 100755 --- a/website/source/assets/stylesheets/_header.scss +++ b/website/source/assets/stylesheets/_header.scss @@ -1,322 +1,104 @@ // // Header +// - Project Specific +// - edits should be made here // -------------------------------------------------- body.page-sub{ - #header{ - @include consul-gradient-bg(); + #header{ + background-color: $purple; + + .navbar-brand { + .logo{ + &:hover{ + color: $black; + } + } + .by{ + &:hover{ + svg{ + line{ + stroke: $black; + } + } + } + } } + } } -#footer, #header { - @include anti-alias(); - position: relative; - color: $white; - text-rendering: optimizeLegibility; - margin-bottom: 0; + .navbar-brand { + .logo{ + font-size: 20px; + text-transform: uppercase; + background: image-url('../images/logo-header.png') 0 0 no-repeat; + @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width, $project-logo-height); + background-position: 0 45%; - .navbar-collapse{ - box-shadow: none; - } - - &.navbar-static-top{ - z-index: 1000; - } - - a{ - color: $white; - } - - .navbar-toggle{ - margin-top: 14px; - margin-bottom: 14px; - border: 2px solid $white; - .icon-bar{ - border: 1px solid $white; - } - } - - .brand { - padding: 13px 15px; - line-height: 0; - - .logo{ - display: block; - width: 179px; - height: 59px; - background: image-url('consul-header-logo.png') 0 0 no-repeat; - @include img-retina("consul-header-logo.png", "consul-header-logo@2x.png", 179px, 59px); - } - } - - .navbar-nav{ - -webkit-font-smoothing: antialiased; - li{ - position: relative; - - > a { - font-size: 12px; - text-transform: uppercase; - letter-spacing: 3px; - padding-left: 22px; - } - - &.first{ - >a{ - padding-left: 15px; - } - } - } - } - - .nav.li-under a::after { - - } - - .nav > li > a:hover, .nav > li > a:focus { - background-color: transparent; - /*color: $p; - @include transition( color 0.3s ease );*/ - } - - .main-links.navbar-nav{ - li + li::before { - content: ""; - position: absolute; - left: 0; - top: 35px; - width: 4px; - height: 23px; - background: image-url('nav-dotpipes.png') 0 0 no-repeat; - @include img-retina("nav-dotpipes.png", "nav-dotpipes@2x.png", 4px, 23px); - padding-right: 15px; - } - - /*li + li.li-under a::after{ - left: 15px; - }*/ - - li > a { - line-height: 62px; - } - - } - - .buttons.navbar-nav{ - margin-top: 26px; - margin-left: 30px; - - li{ - &.first{ - margin-right: 12px; - } - - &.download{ - a{ - background: image-url('icon-download.png') 8px 6px no-repeat; - @include img-retina("icon-download.png", "icon-download@2x.png", 20px, 20px); - } - } - - &.github{ - a{ - background: image-url('icon-github.png') 8px 6px no-repeat; - @include img-retina("icon-github.png", "icon-github@2x.png", 20px, 20px); - } - } - } - - li > a { - padding-top: 6px; - padding-bottom: 6px; - padding-left: 40px; - } - } -} - -#footer{ - height: 650px; - text-align: center; - color: $purple; - - .main-links.navbar-nav{ - float: none; - display: inline-block; - padding-top: 155px; - - .li-under a::after { - background-color: $purple; - } - } - - .footer-hashi{ - padding-top: 110px; - } - - a{ + &:hover{ color: $purple; + } } - .buttons.navbar-nav{ - float: none; - display: inline-block; - margin-bottom: 30px; - margin-top: 0px; - - li{ - &.first{ - margin-right: 12px; - } - - &.download{ - a{ - background: image-url('icon-download-purple.png') 8px 6px no-repeat; - @include img-retina("icon-download-purple.png", "icon-download-purple@2x.png", 20px, 20px); - } - } - - &.github{ - a{ - background: image-url('icon-github-purple.png') 8px 6px no-repeat; - @include img-retina("icon-github-purple.png", "icon-github-purple@2x.png", 20px, 20px); - } - } - } - - li > a { - padding-top: 6px; - padding-bottom: 6px; - padding-left: 40px; + .by{ + color: $black; + &:hover{ + svg{ + line{ + stroke: $purple; + } } + } } + } + + .buttons{ + margin-top: 2px; //baseline everything + + ul.navbar-nav{ + li { + // &:hover{ + // svg path{ + // fill: $purple; + // } + // } + + svg path{ + fill: $white; + } + } + } + } + + .main-links, + .external-links { + li > a { + @include project-a-style(); + } + } +} + +@media (max-width: 414px) { + #header { + .navbar-brand { + .logo{ + padding-left: 37px; + font-size: 18px; + @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width * .75, $project-logo-height * .75); + //background-position: 0 45%; + } + } + } } -@media (max-width: 992px) { - #header { - .brand { - .logo{ - width: 120px; - height: 39px; - margin-top: 12px; - background-size: 120px 39px; - } - } - - .buttons.navbar-nav{ - li{ - a{ - background: none !important; - padding-left: 15px; - } - } - } +@media (max-width: 320px) { + #header { + .navbar-brand { + .logo{ + font-size: 0 !important; //hide terraform text + } } -} - -@media (max-width: 768px) { - - #footer, - #header{ - .buttons.navbar-nav, - .main-links.navbar-nav{ - display: block; - padding-bottom: 15px; - li{ - display: block; - float: none; - margin-top: 15px; - } - - .li-under a::after, - li + li::before { - display: none; - } - } - } - - #header, - #footer{ - .main-links.navbar-nav{ - li > a { - padding: 0; - padding-left: 0; - line-height: 22px; - } - } - } - - #footer{ - .footer-hashi { - span{ - margin-right: 0; - } - - .hashi-logo{ - display: block; - margin-top: 15px; - margin-bottom: 20px; - } - } - - .buttons.navbar-nav{ - margin-left: 0; - - li.first { - margin-right: 0 !important; - } - } - } - - #header{ - @include consul-gradient-bg(); - - .navbar-right{ - float: none !important; - } - - .brand { - .logo{ - margin-top: 0; - } - } - - .navbar-nav > li{ - float: none; - } - - .buttons.navbar-nav{ - margin-top: 15px; - margin-left: 0px; - - li{ - a{ - padding-left: 40px; - } - &.first{ - margin-right: 0; - margin-bottom: 10px; - } - - &.download{ - a{ - background: image-url('icon-download.png') 8px 6px no-repeat !important;; - @include img-retina("icon-download.png", "icon-download@2x.png", 20px, 20px); - } - } - - &.github{ - a{ - background: image-url('icon-github.png') 8px 6px no-repeat !important;; - @include img-retina("icon-github.png", "icon-github@2x.png", 20px, 20px); - } - } - } - } - } -} - -@media (max-width: 480px) { - + } } diff --git a/website/source/assets/stylesheets/_mixins.scss b/website/source/assets/stylesheets/_mixins.scss deleted file mode 100755 index 76dbc757b3..0000000000 --- a/website/source/assets/stylesheets/_mixins.scss +++ /dev/null @@ -1,724 +0,0 @@ -// -// Mixins -// -------------------------------------------------- - - -// Utilities -// ------------------------- - -// Clearfix -// Source: http://nicolasgallagher.com/micro-clearfix-hack/ -// -// For modern browsers -// 1. 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. -// 2. The use of `table` rather than `block` is only necessary if using -// `:before` to contain the top-margins of child elements. -@mixin clearfix() { - &:before, - &:after { - content: " "; /* 1 */ - display: table; /* 2 */ - } - &:after { - clear: both; - } -} - -// Webkit-style focus -@mixin tab-focus() { - // Default - outline: thin dotted #333; - // Webkit - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - -// Center-align a block level element -@mixin center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} - -// Sizing shortcuts -@mixin size($width, $height) { - width: $width; - height: $height; -} -@mixin square($size) { - @include size($size, $size); -} - -// Placeholder text -@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 -} - -// Text overflow -// Requires inline-block or block for proper styling -@mixin text-overflow() { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -// CSS image replacement -// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 -@mixin hide-text() { - font: #{"0/0"} a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} - - - -// CSS3 PROPERTIES -// -------------------------------------------------- - -// Single side border-radius -@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; -} - -// Drop shadows -@mixin box-shadow($shadow) { - -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 - box-shadow: $shadow; -} - -// Transitions -@mixin transition($transition) { - -webkit-transition: $transition; - transition: $transition; -} -@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; -} - -// Transformations -@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); -} - -// Backface visibility -// Prevent browsers from flickering when using CSS 3D transforms. -// Default value is `visible`, but can be changed to `hidden` -// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples -@mixin backface-visibility($visibility) { - -webkit-backface-visibility: $visibility; - -moz-backface-visibility: $visibility; - backface-visibility: $visibility; -} - -// Box sizing -@mixin box-sizing($boxmodel) { - -webkit-box-sizing: $boxmodel; - -moz-box-sizing: $boxmodel; - box-sizing: $boxmodel; -} - -// User select -// For selecting text on the page -@mixin user-select($select) { - -webkit-user-select: $select; - -moz-user-select: $select; - -ms-user-select: $select; // IE10+ - -o-user-select: $select; - user-select: $select; -} - -// Resize anything -@mixin resizable($direction) { - resize: $direction; // Options: horizontal, vertical, both - overflow: auto; // Safari fix -} - -// CSS3 Content Columns -@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; -} - -// Optional hyphenation -@mixin hyphens($mode: auto) { - word-wrap: break-word; - -webkit-hyphens: $mode; - -moz-hyphens: $mode; - -ms-hyphens: $mode; // IE10+ - -o-hyphens: $mode; - hyphens: $mode; -} - -// Opacity -@mixin opacity($opacity) { - opacity: $opacity; - // IE8 filter - $opacity-ie: ($opacity * 100); - filter: #{"alpha(opacity=${opacity-ie})"}; -} - - - -// GRADIENTS -// -------------------------------------------------- - -#gradient { - - // Horizontal gradient, from left to right - // - // 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. - @mixin 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: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb($start-color),argb($end-color))); // IE9 and down - } - - // Vertical gradient, from top to bottom - // - // 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. - @mixin 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: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb($start-color),argb($end-color))); // IE9 and down - } - - @mixin 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 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: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb($start-color),argb($end-color))); // IE9 and down, gets no color-stop at all for proper fallback - } - @mixin 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: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb($start-color),argb($end-color))); // IE9 and down, gets no color-stop at all for proper fallback - } - @mixin 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 striped($color: #555, $angle: 45deg) { - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - } -} - -// Reset filters for IE -// -// When you need to remove a gradient background, do not forget to use this to reset -// the IE filter for IE9 and below. -@mixin reset-filter() { - // filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); -} - - - -// Retina images -// -// Short retina mixin for setting background-image and -size - -@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { - background-image: image-url("#{$file-1x}"); - background-size: $width-1x $height-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; - } -} - - -// Responsive image -// -// Keep images from scaling beyond the width of their parents. - -@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 -} - - -// COMPONENT MIXINS -// -------------------------------------------------- - -// Horizontal dividers -// ------------------------- -// Dividers (basically an hr) within dropdowns and nav lists -@mixin nav-divider($color: #e5e5e5) { - height: 1px; - margin: (($line-height-computed / 2) - 1) 0; - overflow: hidden; - background-color: $color; -} - -// Panels -// ------------------------- -@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; - } - } - & > .panel-footer { - + .panel-collapse .panel-body { - border-bottom-color: $border; - } - } -} - -// Alerts -// ------------------------- -@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%); - } -} - -// Tables -// ------------------------- -@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; - border-color: $border; - } - } - - // Hove# 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 { - background-color: darken($background, 5%); - border-color: darken($border, 5%); - } - } -} - -// Button variants -// ------------------------- -// Easily pump out default styles, as well as :hover, :focus, :active, -// and disabled options for all buttons -@mixin button-variant($color, $background, $border) { - color: $color; - background-color: $background; - border-color: $border; - - &:hover, - &:focus, - &:active, - &.active, - .open .dropdown-toggle& { - color: $color; - background-color: darken($background, 8%); - border-color: darken($border, 12%); - } - &:active, - &.active, - .open .dropdown-toggle& { - background-image: none; - } - &.disabled, - &[disabled], - fieldset[disabled] & { - &, - &:hover, - &:focus, - &:active, - &.active { - background-color: $background; - border-color: $border - } - } -} - -// Button sizes -// ------------------------- -@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; -} - -// Pagination -// ------------------------- -@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); - } - } - } -} - -// Labels -// ------------------------- -@mixin label-variant($color) { - background-color: $color; - &[href] { - &:hover, - &:focus { - background-color: darken($color, 10%); - } - } -} - -// Navbar vertical align -// ------------------------- -// Vertically center elements in the navbar. -// Example: an element has a height of 30px, so write out `@include navbar-vertical-align(30px);` to calculate the appropriate top margin. -@mixin navbar-vertical-align($element-height) { - margin-top: (($navbar-height - $element-height) / 2); - margin-bottom: (($navbar-height - $element-height) / 2); -} - -// Progress bars -// ------------------------- -// @mixin progress-bar-variant($color) { -// background-color: $color; -// .progress-striped & { -// #gradient > @include striped($color); -// } -// } - -// Responsive utilities -// ------------------------- -// More easily include all the states for responsive-utilities.less. -@mixin responsive-visibility() { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } -} - -@mixin responsive-invisibility() { - display: none !important; - tr& { display: none !important; } - th&, - td& { display: none !important; } -} - -// Grid System -// ----------- - -// Centered container element -@mixin container-fixed() { - margin-right: auto; - margin-left: auto; - padding-left: ($grid-gutter-width / 2); - padding-right: ($grid-gutter-width / 2); - @include clearfix(); -} - -// Creates a wrapper for a series of columns -@mixin make-row($gutter: $grid-gutter-width) { - margin-left: ($gutter / -2); - margin-right: ($gutter / -2); - @include clearfix(); -} - -// Generate the extra small columns -@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); -} - -// Generate the small columns -@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) { - float: left; - width: percentage(($columns / $grid-columns)); - } -} - -// Generate the small column offsets -@mixin make-sm-column-offset($columns) { - @media (min-width: $screen-sm) { - margin-left: percentage(($columns / $grid-columns)); - } -} -@mixin make-sm-column-push($columns) { - @media (min-width: $screen-sm) { - left: percentage(($columns / $grid-columns)); - } -} -@mixin make-sm-column-pull($columns) { - @media (min-width: $screen-sm) { - right: percentage(($columns / $grid-columns)); - } -} - -// Generate the medium 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) { - float: left; - width: percentage(($columns / $grid-columns)); - } -} - -// Generate the large column offsets -@mixin make-md-column-offset($columns) { - @media (min-width: $screen-md) { - 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) { - right: percentage(($columns / $grid-columns)); - } -} - -// Generate the large 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) { - float: left; - width: percentage(($columns / $grid-columns)); - } -} - -// Generate the large column offsets -@mixin make-lg-column-offset($columns) { - @media (min-width: $screen-lg) { - margin-left: percentage(($columns / $grid-columns)); - } -} -@mixin make-lg-column-push($columns) { - @media (min-width: $screen-lg) { - left: percentage(($columns / $grid-columns)); - } -} -@mixin make-lg-column-pull($columns) { - @media (min-width: $screen-lg) { - right: percentage(($columns / $grid-columns)); - } -} - - -// Form validation states -// -// Used in forms.less to generate the form validation CSS for warnings, errors, -// and successes. - -@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) { - // Color the label and help text - .help-block, - .control-label { - color: $text-color; - } - // Set the border and box shadow on specific inputs to match - .form-control { - border-color: $border-color; - @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work - &:focus { - border-color: darken($border-color, 10%); - $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); - @include box-shadow($shadow); - } - } - // Set validation states also for addons - .input-group-addon { - color: $text-color; - border-color: $border-color; - background-color: $background-color; - } -} - -// Form control focus state -// -// Generate a customized focus state and for any input with the specified color, -// which defaults to the `$input-focus-border` variable. -// -// 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. -// -// Example usage: change the default blue border and shadow to white for better -// contrast against a dark gray background. - -@mixin form-control-focus($color: $input-border-focus) { - $color-rgba: rgba(red($color), green($color), blue($color), .6); - &:focus { - border-color: $color; - outline: 0; - @include box-shadow(#{"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px ${color-rgba}"}); - } -} - -// Form control sizing -// -// Relative text size, padding, and border-radii changes for form controls. For -// horizontal sizing, wrap controls in the predefined grid classes. `