diff --git a/website/Gemfile b/website/Gemfile index 99e3e69cc..936305b5e 100644 --- a/website/Gemfile +++ b/website/Gemfile @@ -1,13 +1,3 @@ -source "https://rubygems.org" +source 'https://rubygems.org' -gem "less", "~> 2.6" -gem "middleman", "~> 3.3" -gem "middleman-minify-html", "~> 3.4" -gem "rack-contrib", "~> 1.1" -gem "redcarpet", "~> 3.1" -gem "therubyracer", "~> 0.12" -gem "thin", "~> 1.6" - -group :development do - gem "highline", "~> 1.6" -end +gem 'middleman-hashicorp', github: 'hashicorp/middleman-hashicorp' diff --git a/website/Gemfile.lock b/website/Gemfile.lock index dd50f1ecc..b6d99f8d4 100644 --- a/website/Gemfile.lock +++ b/website/Gemfile.lock @@ -1,3 +1,20 @@ +GIT + remote: git://github.com/hashicorp/middleman-hashicorp.git + revision: 81fe3211fb66b867c70671ed2db12206d711d61b + specs: + middleman-hashicorp (0.1.0) + bootstrap-sass (~> 3.2) + builder (~> 3.2) + less (~> 2.6) + middleman (~> 3.3) + middleman-livereload (~> 3.3) + middleman-minify-html (~> 3.4) + middleman-syntax (~> 2.0) + rack-contrib (~> 1.1) + redcarpet (~> 3.1) + therubyracer (~> 0.12) + thin (~> 1.6) + GEM remote: https://rubygems.org/ specs: @@ -7,6 +24,9 @@ GEM minitest (~> 5.1) thread_safe (~> 0.1) tzinfo (~> 1.1) + bootstrap-sass (3.2.0.2) + sass (~> 3.2) + builder (3.2.2) celluloid (0.16.0) timers (~> 4.0.0) chunky_png (1.3.1) @@ -28,18 +48,21 @@ GEM compass-import-once (1.0.5) sass (>= 3.2, < 3.5) daemons (1.1.9) + em-websocket (0.5.1) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0.6.0) erubis (2.7.0) eventmachine (1.0.3) execjs (2.2.1) - ffi (1.9.5) + ffi (1.9.6) haml (4.0.5) tilt - highline (1.6.21) hike (1.2.3) hitimes (1.2.2) hooks (0.4.0) uber (~> 0.0.4) htmlcompressor (0.1.2) + http_parser.rb (0.6.0) i18n (0.6.11) json (1.8.1) kramdown (1.4.2) @@ -73,6 +96,10 @@ GEM rack-test (~> 0.6.2) thor (>= 0.15.2, < 2.0) tilt (~> 1.4.1, < 2.0) + middleman-livereload (3.3.4) + em-websocket (~> 0.5.1) + middleman-core (~> 3.2) + rack-livereload (~> 0.3.15) middleman-minify-html (3.4.0) htmlcompressor (~> 0.1.0) middleman-core (>= 3.2) @@ -81,6 +108,9 @@ GEM sprockets (~> 2.12.1) sprockets-helpers (~> 1.1.0) sprockets-sass (~> 1.2.0) + middleman-syntax (2.0.0) + middleman-core (~> 3.2) + rouge (~> 1.0) minitest (5.4.2) multi_json (1.10.1) padrino-helpers (0.12.3) @@ -92,6 +122,8 @@ GEM rack (1.5.2) rack-contrib (1.1.0) rack (>= 0.9.1) + rack-livereload (0.3.15) + rack rack-test (0.6.2) rack (>= 1.0) rb-fsevent (0.9.4) @@ -99,6 +131,7 @@ GEM ffi (>= 0.5.0) redcarpet (3.1.2) ref (1.0.5) + rouge (1.7.2) sass (3.4.5) sprockets (2.12.2) hike (~> 1.2) @@ -124,7 +157,7 @@ GEM hitimes tzinfo (1.2.2) thread_safe (~> 0.1) - uber (0.0.8) + uber (0.0.9) uglifier (2.5.3) execjs (>= 0.3.0) json (>= 1.8.0) @@ -133,11 +166,4 @@ PLATFORMS ruby DEPENDENCIES - highline (~> 1.6) - less (~> 2.6) - middleman (~> 3.3) - middleman-minify-html (~> 3.4) - rack-contrib (~> 1.1) - redcarpet (~> 3.1) - therubyracer (~> 0.12) - thin (~> 1.6) + middleman-hashicorp! diff --git a/website/Gruntfile.js b/website/Gruntfile.js deleted file mode 100644 index cf24c632c..000000000 --- a/website/Gruntfile.js +++ /dev/null @@ -1,36 +0,0 @@ -// jshint node:true -module.exports = function(grunt) { - -// Load plugins here -grunt.loadNpmTasks('grunt-contrib-less'); -grunt.loadNpmTasks('grunt-contrib-clean'); -grunt.loadNpmTasks('grunt-contrib-connect'); -grunt.loadNpmTasks('grunt-contrib-copy'); -grunt.loadNpmTasks('grunt-contrib-watch'); -grunt.loadNpmTasks('grunt-recess'); - -// Configuration goes here -grunt.initConfig({ - - less: { - development:{ - files: { - "source/stylesheets/main.css": "source/stylesheets/main.less" - } - } - }, - - - watch: { - less: { - files: 'source/stylesheets/*.less', - tasks: ['less'] - } - } - -}); - -// CSS Compilation task -grunt.registerTask('default', ['watch']); - -}; diff --git a/website/config.rb b/website/config.rb index 3cbbb2145..cc79c8858 100644 --- a/website/config.rb +++ b/website/config.rb @@ -2,23 +2,9 @@ # Configure Middleman #------------------------------------------------------------------------- -set :css_dir, 'stylesheets' -set :js_dir, 'javascripts' -set :images_dir, 'images' - -# Use the RedCarpet Markdown engine -set :markdown_engine, :redcarpet -set :markdown, - :fenced_code_blocks => true, - :with_toc_data => true - -# Build-specific configuration -configure :build do - activate :asset_hash - activate :minify_html, remove_multi_spaces: false - activate :minify_javascript -end - -configure :development do - set :debug_assets, true +activate :hashicorp do |h| + h.version = '0.2.2' + h.bintray_repo = 'mitchellh/terraform' + h.bintray_user = 'mitchellh' + h.bintray_key = ENV['BINTRAY_API_KEY'] end diff --git a/website/helpers/download_helpers.rb b/website/helpers/download_helpers.rb deleted file mode 100644 index 494ed6a5e..000000000 --- a/website/helpers/download_helpers.rb +++ /dev/null @@ -1,63 +0,0 @@ -require "net/http" - -$terraform_files = {} -$terraform_os = [] - -if ENV["TERRAFORM_VERSION"] - raise "BINTRAY_API_KEY must be set." if !ENV["BINTRAY_API_KEY"] - http = Net::HTTP.new("dl.bintray.com", 80) - req = Net::HTTP::Get.new("/mitchellh/terraform/") - req.basic_auth "mitchellh", ENV["BINTRAY_API_KEY"] - response = http.request(req) - - response.body.split("\n").each do |line| - next if line !~ /\/mitchellh\/terraform\/terraform_(#{Regexp.quote(ENV["TERRAFORM_VERSION"])}.+?)'/ - filename = $1.to_s - os = filename.split("_")[1] - next if os == "SHA256SUMS" - next if os == "web" - - $terraform_files[os] ||= [] - $terraform_files[os] << filename - end - - $terraform_os = ["darwin", "linux", "windows"] & $terraform_files.keys - $terraform_os += $terraform_files.keys - $terraform_os.uniq! - - $terraform_files.each do |key, value| - value.sort! - end -end - -module DownloadHelpers - def download_arch(file) - parts = file.split("_") - return "" if parts.length != 3 - parts[2].split(".")[0] - end - - def download_os_human(os) - if os == "darwin" - return "Mac OS X" - elsif os == "freebsd" - return "FreeBSD" - elsif os == "openbsd" - return "OpenBSD" - elsif os == "Linux" - return "Linux" - elsif os == "windows" - return "Windows" - else - return os - end - end - - def download_url(file) - "https://dl.bintray.com/mitchellh/terraform/terraform_#{file}" - end - - def latest_version - ENV["TERRAFORM_VERSION"] - end -end diff --git a/website/package.json b/website/package.json deleted file mode 100755 index 5662c9eba..000000000 --- a/website/package.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "name": "terraform" - , "description": "" - , "version": "1.0.0" - , "devDependencies": { - "grunt": "~0.4.1" - , "grunt-cli": "~0.1.13" - , "grunt-contrib-less": "~0.11.0" - , "grunt-contrib-clean": "~0.5.0" - , "grunt-contrib-connect": "~0.3.0" - , "grunt-contrib-concat": "~0.3.0" - , "grunt-contrib-copy": "~0.4.0" - , "grunt-contrib-uglify": "~0.2.2" - , "grunt-contrib-watch": "~0.5.1" - , "grunt-recess": "~0.3.3" - } -} diff --git a/website/source/fonts/.!50177!league_gothic-webfont.eot b/website/source/assets/fonts/.!50177!league_gothic-webfont.eot similarity index 100% rename from website/source/fonts/.!50177!league_gothic-webfont.eot rename to website/source/assets/fonts/.!50177!league_gothic-webfont.eot diff --git a/website/source/fonts/league_gothic-webfont.eot b/website/source/assets/fonts/league_gothic-webfont.eot similarity index 100% rename from website/source/fonts/league_gothic-webfont.eot rename to website/source/assets/fonts/league_gothic-webfont.eot diff --git a/website/source/fonts/league_gothic-webfont.svg b/website/source/assets/fonts/league_gothic-webfont.svg similarity index 100% rename from website/source/fonts/league_gothic-webfont.svg rename to website/source/assets/fonts/league_gothic-webfont.svg diff --git a/website/source/fonts/league_gothic-webfont.ttf b/website/source/assets/fonts/league_gothic-webfont.ttf similarity index 100% rename from website/source/fonts/league_gothic-webfont.ttf rename to website/source/assets/fonts/league_gothic-webfont.ttf diff --git a/website/source/fonts/league_gothic-webfont.woff b/website/source/assets/fonts/league_gothic-webfont.woff similarity index 100% rename from website/source/fonts/league_gothic-webfont.woff rename to website/source/assets/fonts/league_gothic-webfont.woff diff --git a/website/source/images/bg-galaxy.jpg b/website/source/assets/images/bg-galaxy.jpg similarity index 100% rename from website/source/images/bg-galaxy.jpg rename to website/source/assets/images/bg-galaxy.jpg diff --git a/website/source/images/bg-static.png b/website/source/assets/images/bg-static.png similarity index 100% rename from website/source/images/bg-static.png rename to website/source/assets/images/bg-static.png diff --git a/website/source/images/docs/module_graph.png b/website/source/assets/images/docs/module_graph.png similarity index 100% rename from website/source/images/docs/module_graph.png rename to website/source/assets/images/docs/module_graph.png diff --git a/website/source/images/docs/module_graph_expand.png b/website/source/assets/images/docs/module_graph_expand.png similarity index 100% rename from website/source/images/docs/module_graph_expand.png rename to website/source/assets/images/docs/module_graph_expand.png diff --git a/website/source/images/favicon.png b/website/source/assets/images/favicon.png similarity index 100% rename from website/source/images/favicon.png rename to website/source/assets/images/favicon.png diff --git a/website/source/images/feature-iterate-bg.png b/website/source/assets/images/feature-iterate-bg.png similarity index 100% rename from website/source/images/feature-iterate-bg.png rename to website/source/assets/images/feature-iterate-bg.png diff --git a/website/source/images/feature-iterate-bg@2x.png b/website/source/assets/images/feature-iterate-bg@2x.png similarity index 100% rename from website/source/images/feature-iterate-bg@2x.png rename to website/source/assets/images/feature-iterate-bg@2x.png diff --git a/website/source/images/footer-hashicorp-logo.png b/website/source/assets/images/footer-hashicorp-logo.png similarity index 100% rename from website/source/images/footer-hashicorp-logo.png rename to website/source/assets/images/footer-hashicorp-logo.png diff --git a/website/source/images/footer-hashicorp-logo@2x.png b/website/source/assets/images/footer-hashicorp-logo@2x.png similarity index 100% rename from website/source/images/footer-hashicorp-logo@2x.png rename to website/source/assets/images/footer-hashicorp-logo@2x.png diff --git a/website/source/images/footer-hashicorp-white-logo.png b/website/source/assets/images/footer-hashicorp-white-logo.png similarity index 100% rename from website/source/images/footer-hashicorp-white-logo.png rename to website/source/assets/images/footer-hashicorp-white-logo.png diff --git a/website/source/images/footer-hashicorp-white-logo@2x.png b/website/source/assets/images/footer-hashicorp-white-logo@2x.png similarity index 100% rename from website/source/images/footer-hashicorp-white-logo@2x.png rename to website/source/assets/images/footer-hashicorp-white-logo@2x.png diff --git a/website/source/images/graph-example.png b/website/source/assets/images/graph-example.png similarity index 100% rename from website/source/images/graph-example.png rename to website/source/assets/images/graph-example.png diff --git a/website/source/images/header-download-icon.png b/website/source/assets/images/header-download-icon.png similarity index 100% rename from website/source/images/header-download-icon.png rename to website/source/assets/images/header-download-icon.png diff --git a/website/source/images/header-download-icon@2x.png b/website/source/assets/images/header-download-icon@2x.png similarity index 100% rename from website/source/images/header-download-icon@2x.png rename to website/source/assets/images/header-download-icon@2x.png diff --git a/website/source/images/header-github-icon.png b/website/source/assets/images/header-github-icon.png similarity index 100% rename from website/source/images/header-github-icon.png rename to website/source/assets/images/header-github-icon.png diff --git a/website/source/images/header-github-icon@2x.png b/website/source/assets/images/header-github-icon@2x.png similarity index 100% rename from website/source/images/header-github-icon@2x.png rename to website/source/assets/images/header-github-icon@2x.png diff --git a/website/source/images/header-logo.png b/website/source/assets/images/header-logo.png similarity index 100% rename from website/source/images/header-logo.png rename to website/source/assets/images/header-logo.png diff --git a/website/source/images/header-logo@2x.png b/website/source/assets/images/header-logo@2x.png similarity index 100% rename from website/source/images/header-logo@2x.png rename to website/source/assets/images/header-logo@2x.png diff --git a/website/source/images/header-nav-divider.png b/website/source/assets/images/header-nav-divider.png similarity index 100% rename from website/source/images/header-nav-divider.png rename to website/source/assets/images/header-nav-divider.png diff --git a/website/source/images/header-nav-divider@2x.png b/website/source/assets/images/header-nav-divider@2x.png similarity index 100% rename from website/source/images/header-nav-divider@2x.png rename to website/source/assets/images/header-nav-divider@2x.png diff --git a/website/source/images/hero-bg.png b/website/source/assets/images/hero-bg.png similarity index 100% rename from website/source/images/hero-bg.png rename to website/source/assets/images/hero-bg.png diff --git a/website/source/images/logo-static.png b/website/source/assets/images/logo-static.png similarity index 100% rename from website/source/images/logo-static.png rename to website/source/assets/images/logo-static.png diff --git a/website/source/images/readme.png b/website/source/assets/images/readme.png similarity index 100% rename from website/source/images/readme.png rename to website/source/assets/images/readme.png diff --git a/website/source/images/sidebar-wire.png b/website/source/assets/images/sidebar-wire.png similarity index 100% rename from website/source/images/sidebar-wire.png rename to website/source/assets/images/sidebar-wire.png diff --git a/website/source/images/white-wireframe.png b/website/source/assets/images/white-wireframe.png similarity index 100% rename from website/source/images/white-wireframe.png rename to website/source/assets/images/white-wireframe.png diff --git a/website/source/images/white-wireframe@2x.png b/website/source/assets/images/white-wireframe@2x.png similarity index 100% rename from website/source/images/white-wireframe@2x.png rename to website/source/assets/images/white-wireframe@2x.png diff --git a/website/source/javascripts/app/Engine.Particle.Fixed.js b/website/source/assets/javascripts/app/Engine.Particle.Fixed.js similarity index 100% rename from website/source/javascripts/app/Engine.Particle.Fixed.js rename to website/source/assets/javascripts/app/Engine.Particle.Fixed.js diff --git a/website/source/javascripts/app/Engine.Particle.js b/website/source/assets/javascripts/app/Engine.Particle.js similarity index 100% rename from website/source/javascripts/app/Engine.Particle.js rename to website/source/assets/javascripts/app/Engine.Particle.js diff --git a/website/source/javascripts/app/Engine.Point.Puller.js b/website/source/assets/javascripts/app/Engine.Point.Puller.js similarity index 100% rename from website/source/javascripts/app/Engine.Point.Puller.js rename to website/source/assets/javascripts/app/Engine.Point.Puller.js diff --git a/website/source/javascripts/app/Engine.Point.js b/website/source/assets/javascripts/app/Engine.Point.js similarity index 100% rename from website/source/javascripts/app/Engine.Point.js rename to website/source/assets/javascripts/app/Engine.Point.js diff --git a/website/source/javascripts/app/Engine.Polygon.Puller.js b/website/source/assets/javascripts/app/Engine.Polygon.Puller.js similarity index 100% rename from website/source/javascripts/app/Engine.Polygon.Puller.js rename to website/source/assets/javascripts/app/Engine.Polygon.Puller.js diff --git a/website/source/javascripts/app/Engine.Polygon.js b/website/source/assets/javascripts/app/Engine.Polygon.js similarity index 100% rename from website/source/javascripts/app/Engine.Polygon.js rename to website/source/assets/javascripts/app/Engine.Polygon.js diff --git a/website/source/javascripts/app/Engine.Shape.Puller.js b/website/source/assets/javascripts/app/Engine.Shape.Puller.js similarity index 100% rename from website/source/javascripts/app/Engine.Shape.Puller.js rename to website/source/assets/javascripts/app/Engine.Shape.Puller.js diff --git a/website/source/javascripts/app/Engine.Shape.js b/website/source/assets/javascripts/app/Engine.Shape.js similarity index 100% rename from website/source/javascripts/app/Engine.Shape.js rename to website/source/assets/javascripts/app/Engine.Shape.js diff --git a/website/source/javascripts/app/Engine.Typewriter.js b/website/source/assets/javascripts/app/Engine.Typewriter.js similarity index 100% rename from website/source/javascripts/app/Engine.Typewriter.js rename to website/source/assets/javascripts/app/Engine.Typewriter.js diff --git a/website/source/javascripts/app/Engine.js b/website/source/assets/javascripts/app/Engine.js similarity index 100% rename from website/source/javascripts/app/Engine.js rename to website/source/assets/javascripts/app/Engine.js diff --git a/website/source/javascripts/app/Grid.js b/website/source/assets/javascripts/app/Grid.js similarity index 100% rename from website/source/javascripts/app/Grid.js rename to website/source/assets/javascripts/app/Grid.js diff --git a/website/source/javascripts/app/Init.js b/website/source/assets/javascripts/app/Init.js similarity index 100% rename from website/source/javascripts/app/Init.js rename to website/source/assets/javascripts/app/Init.js diff --git a/website/source/javascripts/app/Logo.js b/website/source/assets/javascripts/app/Logo.js similarity index 100% rename from website/source/javascripts/app/Logo.js rename to website/source/assets/javascripts/app/Logo.js diff --git a/website/source/javascripts/app/Puller.js b/website/source/assets/javascripts/app/Puller.js similarity index 100% rename from website/source/javascripts/app/Puller.js rename to website/source/assets/javascripts/app/Puller.js diff --git a/website/source/assets/javascripts/application.js b/website/source/assets/javascripts/application.js new file mode 100644 index 000000000..9180016ef --- /dev/null +++ b/website/source/assets/javascripts/application.js @@ -0,0 +1,24 @@ +//= require jquery +//= require bootstrap + +//= require lib/String.substitute +//= require lib/Vector +//= require lib/Function.prototype.bind +//= require lib/Base +//= require lib/Chainable +//= require lib/dbg + +//= require docs +//= require app/Logo +//= require app/Grid +//= require app/Engine +//= require app/Engine.Particle +//= require app/Engine.Particle.Fixed +//= require app/Engine.Point +//= require app/Engine.Point.Puller +//= require app/Engine.Polygon +//= require app/Engine.Polygon.Puller +//= require app/Engine.Shape +//= require app/Engine.Shape.Puller +//= require app/Engine.Typewriter +//= require app/Init diff --git a/website/source/javascripts/docs.js b/website/source/assets/javascripts/docs.js similarity index 100% rename from website/source/javascripts/docs.js rename to website/source/assets/javascripts/docs.js diff --git a/website/source/javascripts/html5shiv.js b/website/source/assets/javascripts/html5shiv.js similarity index 100% rename from website/source/javascripts/html5shiv.js rename to website/source/assets/javascripts/html5shiv.js diff --git a/website/source/javascripts/lang-go.js b/website/source/assets/javascripts/lang-go.js similarity index 100% rename from website/source/javascripts/lang-go.js rename to website/source/assets/javascripts/lang-go.js diff --git a/website/source/javascripts/lib/Base.js b/website/source/assets/javascripts/lib/Base.js similarity index 100% rename from website/source/javascripts/lib/Base.js rename to website/source/assets/javascripts/lib/Base.js diff --git a/website/source/javascripts/lib/Chainable.js b/website/source/assets/javascripts/lib/Chainable.js similarity index 100% rename from website/source/javascripts/lib/Chainable.js rename to website/source/assets/javascripts/lib/Chainable.js diff --git a/website/source/javascripts/lib/Function.prototype.bind.js b/website/source/assets/javascripts/lib/Function.prototype.bind.js similarity index 100% rename from website/source/javascripts/lib/Function.prototype.bind.js rename to website/source/assets/javascripts/lib/Function.prototype.bind.js diff --git a/website/source/javascripts/lib/String.substitute.js b/website/source/assets/javascripts/lib/String.substitute.js similarity index 100% rename from website/source/javascripts/lib/String.substitute.js rename to website/source/assets/javascripts/lib/String.substitute.js diff --git a/website/source/javascripts/lib/Vector.js b/website/source/assets/javascripts/lib/Vector.js similarity index 100% rename from website/source/javascripts/lib/Vector.js rename to website/source/assets/javascripts/lib/Vector.js diff --git a/website/source/javascripts/lib/dbg.js b/website/source/assets/javascripts/lib/dbg.js similarity index 100% rename from website/source/javascripts/lib/dbg.js rename to website/source/assets/javascripts/lib/dbg.js diff --git a/website/source/javascripts/prettify.js b/website/source/assets/javascripts/prettify.js similarity index 100% rename from website/source/javascripts/prettify.js rename to website/source/assets/javascripts/prettify.js diff --git a/website/source/javascripts/respond.min.js b/website/source/assets/javascripts/respond.min.js similarity index 100% rename from website/source/javascripts/respond.min.js rename to website/source/assets/javascripts/respond.min.js diff --git a/website/source/stylesheets/_buttons.less b/website/source/assets/stylesheets/_buttons.scss similarity index 76% rename from website/source/stylesheets/_buttons.less rename to website/source/assets/stylesheets/_buttons.scss index 321144554..6d225ce5e 100755 --- a/website/source/stylesheets/_buttons.less +++ b/website/source/assets/stylesheets/_buttons.scss @@ -4,21 +4,21 @@ .outline-btn{ background-color: transparent; - color: @white; - border: 2px solid @white; - //border-radius: @btn-border-radius; + color: $white; + border: 2px solid $white; + //border-radius: $btn-border-radius; text-decoration: none !important; - .transition(background-color .3s ease-in-out); + @include transition(background-color .3s ease-in-out); &.purple{ - color: @purple; - border: 2px solid @purple; + color: $purple; + border: 2px solid $purple; } &:hover{ - color: @white; + color: $white; background-color: rgba(255, 255, 255, .2); - .transition(background-color .3s ease-in-out); + @include transition(background-color .3s ease-in-out); &.purple{ background-color: rgba(255, 255, 255, .5); @@ -28,11 +28,11 @@ .terra-btn{ background-color: rgba(130, 47, 247, 0.36); - .transition( background-color 0.3s ease ); + @include transition( background-color 0.3s ease ); &:hover{ background-color: rgba(130, 47, 247, 0.8); - .transition( background-color 0.3s ease ); + @include transition( background-color 0.3s ease ); } } @@ -62,4 +62,4 @@ -webkit-transform: skewY(15deg) translateY(10px); -moz-transform: skewY(15deg) translateY(10px); transform: skewY(15deg) translateY(10px); -}*/ \ No newline at end of file +}*/ diff --git a/website/source/stylesheets/_community.less b/website/source/assets/stylesheets/_community.scss similarity index 100% rename from website/source/stylesheets/_community.less rename to website/source/assets/stylesheets/_community.scss diff --git a/website/source/stylesheets/_docs.less b/website/source/assets/stylesheets/_docs.scss similarity index 83% rename from website/source/stylesheets/_docs.less rename to website/source/assets/stylesheets/_docs.scss index 02797d407..e4733e38b 100755 --- a/website/source/stylesheets/_docs.less +++ b/website/source/assets/stylesheets/_docs.scss @@ -3,7 +3,7 @@ // -------------------------------------------------- body.page-sub{ - background-color: @light-black; + background-color: $light-black; } body.layout-consul, @@ -18,7 +18,7 @@ body.layout-docs, body.layout-inner, body.layout-downloads, body.layout-intro{ - background: @light-black url('../images/sidebar-wire.png') left 62px no-repeat; + background: $light-black image-url('sidebar-wire.png') left 62px no-repeat; >.container{ .col-md-8[role=main]{ @@ -41,7 +41,7 @@ body.layout-intro{ margin-right: 4%; a{ - color: @purple; + color: $purple; } .docs-sidenav{ @@ -58,14 +58,14 @@ body.layout-intro{ > a{ color: white; - .transition( color 0.5s ease ); + @include transition( color 0.5s ease ); } > a:hover, > a:focus { background-color: transparent !important; color: white; - .transition( color 0.5s ease ); + @include transition( color 0.5s ease ); } } @@ -84,7 +84,7 @@ body.layout-intro{ &.active { >a{ - color: lighten(@purple, 4%); + color: lighten($purple, 4%); font-weight: 500; } @@ -93,9 +93,9 @@ body.layout-intro{ position: absolute; width: 6px; height: 8px; - background-color: @purple; + background-color: $purple; font-weight: 500; - .skewY(24deg); + @include skewY(24deg); top: 26px; left: -10px; } @@ -105,14 +105,14 @@ body.layout-intro{ /*> a:hover, > a:focus { - font-weight: @font-weight-lato-xb; + font-weight: $font-weight-lato-xb; }*/ .nav { display: block; li.active a { - color: lighten(@purple, 4%); + color: lighten($purple, 4%); font-weight: 500; } } @@ -160,8 +160,8 @@ body.layout-intro{ p, li, .alert { font-size: 20px; - font-family: @font-family-open-sans; - font-weight: @font-weight-open; + font-family: $font-family-open-sans; + font-weight: $font-weight-open; line-height: 1.5em; margin: 0 0 18px; -webkit-font-smoothing: antialiased; @@ -172,7 +172,7 @@ body.layout-intro{ } a{ - color: @purple; + color: $purple; &:hover{ text-decoration: underline; } @@ -185,13 +185,13 @@ body.layout-intro{ } h1{ - color: @purple; + color: $purple; text-transform: uppercase; padding-bottom: 24px; margin-top: 40px; margin-bottom: 24px; border-bottom: 1px solid #eeeeee; - .lato-light(); + @include lato-light(); } h2, h3, h4{ @@ -235,13 +235,13 @@ body.layout-intro{ li{ > a{ color: black; - .transition( color 0.5s ease ); + @include transition( color 0.5s ease ); } > a:hover, > a:focus { - color: @purple; - .transition( color 0.5s ease ); + color: $purple; + @include transition( color 0.5s ease ); } } @@ -253,7 +253,7 @@ body.layout-intro{ color: black; &:hover{ - color: @purple; + color: $purple; } } } diff --git a/website/source/stylesheets/_downloads.less b/website/source/assets/stylesheets/_downloads.scss similarity index 100% rename from website/source/stylesheets/_downloads.less rename to website/source/assets/stylesheets/_downloads.scss diff --git a/website/source/assets/stylesheets/_fonts.scss b/website/source/assets/stylesheets/_fonts.scss new file mode 100755 index 000000000..3f1d4aaed --- /dev/null +++ b/website/source/assets/stylesheets/_fonts.scss @@ -0,0 +1,26 @@ +// +// Typography +// -------------------------------------------------- + +//light +.rls-l{ + font-family: $font-family-lato; + font-weight: $font-weight-lato-xl; +} + +//semibold +.rls-sb{ + font-family: $font-family-lato; + font-weight: $font-weight-lato-sb; +} + +//extrabold +.rls-xb{ + font-family: $font-family-lato; + font-weight: $font-weight-lato-xb; +} + +.os{ + font-family: $font-family-open-sans; + font-weight: $font-weight-open; +} diff --git a/website/source/stylesheets/_footer.less b/website/source/assets/stylesheets/_footer.scss similarity index 75% rename from website/source/stylesheets/_footer.less rename to website/source/assets/stylesheets/_footer.scss index 3f90eac47..c16acff75 100644 --- a/website/source/stylesheets/_footer.less +++ b/website/source/assets/stylesheets/_footer.scss @@ -31,7 +31,7 @@ body.page-home{ } .li-under a::after { - background-color: @purple; + background-color: $purple; } li{ @@ -39,12 +39,12 @@ body.page-home{ text-transform: uppercase; font-size: 12px; letter-spacing: 3px; - .transition( color 0.3s ease ); + @include transition( color 0.3s ease ); font-weight: 400; &:hover{ - color: @purple; - .transition( color 0.3s ease ); + color: $purple; + @include transition( color 0.3s ease ); background-color: transparent; } } @@ -64,15 +64,15 @@ body.page-home{ &.download{ a{ - background: url(../images/icon-download-purple.png) 8px 6px no-repeat; - .img-retina("../images/icon-download-purple.png", "../images/icon-download-purple@2x.png", 20px, 20px); + 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: url(../images/icon-github-purple.png) 8px 6px no-repeat; - .img-retina("../images/icon-github-purple.png", "../images/icon-github-purple@2x.png", 20px, 20px); + 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); } } } @@ -91,7 +91,7 @@ body.page-home{ a{ color: black; - font-weight: @font-weight-lato-xb; + font-weight: $font-weight-lato-xb; } span{ @@ -105,8 +105,8 @@ body.page-home{ display: inline-block; width: 37px; height: 40px; - background: url(../images/footer-hashicorp-logo.png) 0 0 no-repeat; - .img-retina("../images/footer-hashicorp-logo.png", "../images/footer-hashicorp-logo@2x.png", 37px, 40px); + background: image-url('footer-hashicorp-logo.png') 0 0 no-repeat; + @include img-retina("footer-hashicorp-logo.png", "footer-hashicorp-logo@2x.png", 37px, 40px); } } } @@ -119,7 +119,7 @@ body.page-home{ #footer{ padding: 140px 0 100px; - background-color: @black; + background-color: $black; transform: none; >.container{ @@ -135,8 +135,8 @@ body.page-home{ .hashi-logo{ i{ - background: url(../images/footer-hashicorp-white-logo.png) 0 0 no-repeat; - .img-retina("../images/footer-hashicorp-white-logo.png", "../images/footer-hashicorp-white-logo@2x.png", 37px, 40px); + background: image-url('footer-hashicorp-white-logo.png') 0 0 no-repeat; + @include img-retina("footer-hashicorp-white-logo.png", "footer-hashicorp-white-logo@2x.png", 37px, 40px); } } } diff --git a/website/source/stylesheets/_global.less b/website/source/assets/stylesheets/_global.scss similarity index 74% rename from website/source/stylesheets/_global.less rename to website/source/assets/stylesheets/_global.scss index 932d6098a..a244e55f9 100755 --- a/website/source/stylesheets/_global.less +++ b/website/source/assets/stylesheets/_global.scss @@ -9,10 +9,10 @@ body { -webkit-font-smoothing: subpixel-antialiased; - color: @black; - background-color: @black; + color: $black; + background-color: $black; font-size: 15px; - font-family: @font-family-lato; + font-family: $font-family-lato; font-weight: 500; } @@ -23,24 +23,24 @@ h1, h2, h3, h4, h5 { h1{ font-size: 42px; line-height: 42px; - font-family: @font-family-lato; - font-weight: @font-weight-lato-sb; + font-family: $font-family-lato; + font-weight: $font-weight-lato-sb; margin-bottom: 24px; } h3{ font-size: 28px; line-height: 28px; - font-family: @font-family-lato; - font-weight: @font-weight-lato-sb; + font-family: $font-family-lato; + font-weight: $font-weight-lato-sb; } //an alternative color for buttons in the doc body .btn-serf{ - color: @white !important; - background-color: @btn-color; - border-radius: @btn-border-radius; - //.box-shadow( @shadow ); + color: $white !important; + background-color: $btn-color; + border-radius: $btn-border-radius; + //@include box-shadow( $shadow ); } .highlight{ @@ -48,8 +48,8 @@ h3{ } pre { - background-color: @black; - color: @white; + background-color: $black; + color: $white; font-size: 14px; font-weight: normal; font-family: "Courier New", Monaco, Menlo, Consolas, monospace; diff --git a/website/source/stylesheets/_header.less b/website/source/assets/stylesheets/_header.scss similarity index 82% rename from website/source/stylesheets/_header.less rename to website/source/assets/stylesheets/_header.scss index 2e7803e93..408d11d78 100755 --- a/website/source/stylesheets/_header.less +++ b/website/source/assets/stylesheets/_header.scss @@ -10,7 +10,7 @@ body.page-sub{ #header{ height: 90px; - background-color: @purple; + background-color: $purple; .navbar-collapse{ background-color: rgba(255, 255, 255, 0.98); @@ -29,30 +29,30 @@ body.page-sub{ float: left !important; li > a { color: black; - .transition( color 0.3s ease ); + @include transition( color 0.3s ease ); } } .buttons.nav > li > a, .buttons.nav > li > a { - //background-color: lighten(@purple, 1%); - .transition( background-color 0.3s ease ); + //background-color: lighten($purple, 1%); + @include transition( background-color 0.3s ease ); } .buttons.nav > li > a:hover, .buttons.nav > li > a:focus { background-color: black; - .transition( background-color 0.3s ease ); + @include transition( background-color 0.3s ease ); } .main-links.nav > li > a:hover, .main-links.nav > li > a:focus { - color: @purple; - .transition( color 0.3s ease ); + color: $purple; + @include transition( color 0.3s ease ); } } } #header { position: relative; - color: @white; + color: $white; text-rendering: optimizeLegibility; margin-bottom: 0; @@ -68,17 +68,17 @@ body.page-sub{ } a{ - color: @white; + color: $white; } .navbar-toggle{ margin-top: 26px; margin-bottom: 14px; margin-right: 0; - border: 2px solid @white; + border: 2px solid $white; border-radius: 0; .icon-bar{ - border: 1px solid @white; + border: 1px solid $white; border-radius: 0; } } @@ -90,10 +90,10 @@ body.page-sub{ height: 56px; line-height: 56px; font-size: 24px; - .lato-light(); + @include lato-light(); text-transform: uppercase; - background: url(../images/consul-header-logo.png) 0 0 no-repeat; - .img-retina("../images/header-logo.png", "../images/header-logo@2x.png", 50px, 56px); + background: image-url('consul-header-logo.png') 0 0 no-repeat; + @include img-retina("header-logo.png", "header-logo@2x.png", 50px, 56px); -webkit-font-smoothing: default; } } @@ -108,7 +108,7 @@ body.page-sub{ text-transform: uppercase; letter-spacing: 3px; padding-left: 22px; - .transition( color 0.3s ease ); + @include transition( color 0.3s ease ); } &.first{ @@ -121,8 +121,8 @@ body.page-sub{ .nav > li > a:hover, .nav > li > a:focus { background-color: transparent; - color: lighten(@purple, 15%); - .transition( color 0.3s ease ); + color: lighten($purple, 15%); + @include transition( color 0.3s ease ); } .main-links.navbar-nav{ @@ -139,8 +139,8 @@ body.page-sub{ top: 7px; width: 1px; height: 12px; - background-color: @purple; - .skewY(24deg); + background-color: $purple; + @include skewY(24deg); padding-right: 0; } @@ -165,15 +165,15 @@ body.page-sub{ &.download{ a{ padding-left: 30px; - background: url(../images/header-download-icon.png) 12px 8px no-repeat; - .img-retina("../images/header-download-icon.png", "../images/header-download-icon@2x.png", 12px, 13px); + background: image-url("header-download-icon.png") 12px 8px no-repeat; + @include img-retina("header-download-icon.png", "header-download-icon@2x.png", 12px, 13px); } } &.github{ a{ - background: url(../images/header-github-icon.png) 12px 7px no-repeat; - .img-retina("../images/header-github-icon.png", "../images/header-github-icon@2x.png", 12px, 13px); + background: image-url("header-github-icon.png") 12px 7px no-repeat; + @include img-retina("header-github-icon.png", "header-github-icon@2x.png", 12px, 13px); } } } @@ -206,8 +206,8 @@ body.page-sub{ top: 9px; width: 6px; height: 8px; - background-color: @purple; - .skewY(24deg); + background-color: $purple; + @include skewY(24deg); padding-right: 8px; } @@ -243,8 +243,8 @@ body.page-sub{ top: 9px; width: 6px; height: 8px; - background-color: @purple; - .skewY(24deg); + background-color: $purple; + @include skewY(24deg); padding-right: 8px; } } @@ -366,7 +366,7 @@ body.page-sub{ font-size: 20px !important; line-height:42px !important; margin-top: 23px !important ; - .img-retina("../images/header-logo.png", "../images/header-logo@2x.png", 39px, 44px); + @include img-retina("../images/header-logo.png", "../images/header-logo@2x.png", 39px, 44px); } } diff --git a/website/source/stylesheets/_home.less b/website/source/assets/stylesheets/_home.scss similarity index 88% rename from website/source/stylesheets/_home.less rename to website/source/assets/stylesheets/_home.scss index c35f18422..ecd8e882a 100755 --- a/website/source/stylesheets/_home.less +++ b/website/source/assets/stylesheets/_home.scss @@ -7,7 +7,7 @@ .feature{ padding: 240px 0; - .lato-light(); + @include lato-light(); h2{ text-align: right; @@ -15,15 +15,15 @@ line-height: 44px; letter-spacing: 2px; text-transform: uppercase; - color: @purple; - .lato-light(); + color: $purple; + @include lato-light(); } p{ font-size: 16px; letter-spacing: 1px; line-height: 1.5em; - font-family: @font-family-lato; + font-family: $font-family-lato; font-weight: 300; } @@ -61,9 +61,9 @@ margin-top: -36px; #feature-auto-bg{ - background: #fff url(../images/white-wireframe.png) center top no-repeat; + background: #fff image-url("white-wireframe.png") center top no-repeat; background-size: cover; - .skewY(-3deg); + @include skewY(-3deg); z-index: 10; } @@ -98,11 +98,11 @@ } #feature-iterate-bg{ - background: #fff url(../images/feature-iterate-bg.png) center top no-repeat; + background: #fff image-url("feature-iterate-bg.png") center top no-repeat; border-top: 2px solid white; - border-bottom: 2px solid @purple; + border-bottom: 2px solid $purple; background-size: cover; - .skewY(3deg); + @include skewY(3deg); z-index: 20; } @@ -120,7 +120,7 @@ background-color: rgb(255, 255, 255); width: 80px; height: 80px; - .skewY(26deg); + @include skewY(26deg); float: left; margin-right: 25px; @@ -153,8 +153,8 @@ } #feature-clone-bg{ - background-color: @purple; - .skewY(3deg); + background-color: $purple; + @include skewY(3deg); z-index: 20; } @@ -199,7 +199,7 @@ background-color: white; width: 30px; height: 30px; - .skewY(30deg); + @include skewY(30deg); margin: 5px 5px 0 0; } } @@ -216,8 +216,8 @@ } #cta-bg{ - background-color: @purple; - .skewY(-3deg); + background-color: $purple; + @include skewY(-3deg); z-index: 20; } @@ -238,7 +238,7 @@ font-size: 14px; letter-spacing: 1px; line-height: 1.5esm; - font-family: @font-family-lato; + font-family: $font-family-lato; } @@ -256,7 +256,7 @@ text-transform: uppercase; letter-spacing: 3px; color: white; - .lato-light(); + @include lato-light(); font-weight: 500; &:hover { @@ -276,7 +276,7 @@ #demo-bg{ background-color: #000; - .skewY(-3deg); + @include skewY(-3deg); z-index: 30; } @@ -287,8 +287,8 @@ h2 { margin-top: 0; font-size: 28px; - color: lighten(@purple, 8%); - .lato-light(); + color: lighten($purple, 8%); + @include lato-light(); } p{ @@ -296,7 +296,7 @@ font-size: 16px; letter-spacing: 1px; line-height: 1.5em; - color: @gray-light; + color: $gray-light; font-weight: 400; } } @@ -349,8 +349,8 @@ font-size: 14px; letter-spacing: 1px; color: white; - font-family: @font-family-lato; - font-weight: @font-weight-lato-xb; + font-family: $font-family-lato; + font-weight: $font-weight-lato-xb; } ul.shell-dots{ @@ -384,28 +384,28 @@ padding: 20px; font-size: 15px; font-family: "Courier New", Monaco, Menlo, Consolas, monospace; - color: @white; + color: $white; background-color: transparent; overflow:auto; font-weight: 500; -webkit-font-smoothing: subpixel-antialiased; .txt-spe { - color: lighten(@blue, 5%); + color: lighten($blue, 5%); font-weight: 600; } .txt-var { - color: lighten(@purple, 8%); + color: lighten($purple, 8%); font-weight: 600; } .txt-str { - color: lighten(@green, 2%); + color: lighten($green, 2%); } .txt-int { - color: lighten(@orange, 2%); + color: lighten($orange, 2%); font-weight: 600; } @@ -414,7 +414,7 @@ white-space: pre-wrap; } .cursor { - background-color: lighten(@purple, %5); + background-color: lighten($purple, 5%); } } } @@ -667,14 +667,14 @@ margin-top: -80px; padding: 280px 0 360px; color: white; - background: #fff url(../images/feature-iterate-bg.png) center top no-repeat; + background: #fff image-url("feature-iterate-bg.png") center top no-repeat; border-top: 2px solid white; - border-bottom: 2px solid @purple; + border-bottom: 2px solid $purple; background-size: cover; - .skewY(3deg); + @include skewY(3deg); >.container{ - .skewY(-3deg); + @include skewY(-3deg); } p{ @@ -693,7 +693,7 @@ background-color: rgb(255, 255, 255); width: 40px; height: 40px; - .skewY(26deg); + @include skewY(26deg); float: left; margin-right: 15px; } @@ -729,7 +729,7 @@ background-color: white; width: 15px; height: 15px; - .skewY(30deg); + @include skewY(30deg); margin: 3px 3px 0 0; } } diff --git a/website/source/stylesheets/_jumbotron.less b/website/source/assets/stylesheets/_jumbotron.scss similarity index 97% rename from website/source/stylesheets/_jumbotron.less rename to website/source/assets/stylesheets/_jumbotron.scss index 30df36368..39cc872e8 100755 --- a/website/source/stylesheets/_jumbotron.less +++ b/website/source/assets/stylesheets/_jumbotron.scss @@ -6,7 +6,7 @@ position:relative; z-index:0; height:700px; - margin-top: @negative-hero-margin; + margin-top: $negative-hero-margin; background-color: black; } @@ -15,15 +15,15 @@ height:700px; padding-top: 0; padding-bottom: 0; - color: @jumbotron-color; + color: $jumbotron-color; &.static { - background-image:url(../images/bg-galaxy.jpg); + background-image:image-url("bg-galaxy.jpg"); background-position:50% 50%; background-repeat:no-repeat; .jumbotron-content { - background-image:url(../images/bg-static.png); + background-image:image-url("bg-static.png"); background-size:cover; background-position:50% 50%; background-repeat:no-repeat; @@ -35,7 +35,7 @@ position:absolute; top:50%; left:50%; - background:url(../images/logo-static.png); + background:image-url("logo-static.png"); -webkit-background-size:100% 100%; -moz-background-size:100% 100%; @@ -92,7 +92,7 @@ top:0; left:0; - background-image:url(../images/bg-galaxy.jpg); + background-image:image-url("bg-galaxy.jpg"); /* background-size:cover; */ background-position:50% 50%; background-repeat: no-repeat; diff --git a/website/source/assets/stylesheets/_mixins.scss b/website/source/assets/stylesheets/_mixins.scss new file mode 100755 index 000000000..f49151e3a --- /dev/null +++ b/website/source/assets/stylesheets/_mixins.scss @@ -0,0 +1,724 @@ +// +// 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: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{argb($start-color)}', endColorstr='#{argb($end-color)}', GradientType=1); // 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: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{argb($start-color)}', endColorstr='#{argb($end-color)}', GradientType=0); // 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: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{argb($start-color)}', endColorstr='#{argb($end-color)}', GradientType=1); // IE9 and down + } + @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: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{argb($start-color)}', endColorstr='#{argb($end-color)}', GradientType=0); // IE9 and down + } + @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: 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; + } + } + + // 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 { + 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. `
- <% $terraform_os.each do |os| %> + <% product_versions.each do |os, versions| %>