Use middleman-hashicorp for docs generation

This commit is contained in:
Seth Vargo 2014-10-08 21:13:54 -04:00
commit fe125992fe
90 changed files with 1035 additions and 1444 deletions

View File

@ -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'

View File

@ -1,3 +1,20 @@
GIT
remote: git://github.com/hashicorp/middleman-hashicorp.git
revision: fe7d5bb4b04c408857dbe94345341cafcbc02de4
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)
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)
@ -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!

View File

@ -2,19 +2,31 @@
# Configure Middleman
#-------------------------------------------------------------------------
set :css_dir, 'stylesheets'
set :js_dir, 'javascripts'
set :images_dir, 'images'
activate :hashicorp do |h|
h.version = '0.4.0'
h.bintray_repo = 'mitchellh/consul'
h.bintray_user = 'mitchellh'
h.bintray_key = ENV['BINTRAY_API_KEY']
# Use the RedCarpet Markdown engine
set :markdown_engine, :redcarpet
set :markdown,
:fenced_code_blocks => true,
:with_toc_data => true
# Do not include the "web" in the default list of packages
h.bintray_exclude_proc = Proc.new do |os, filename|
os == 'web'
end
# Build-specific configuration
configure :build do
activate :asset_hash
activate :minify_html
activate :minify_javascript
# Consul packages are not prefixed with consul_ - they should be in the
# future though!
h.bintray_prefixed = false
end
helpers do
# This helps by setting the "active" class for sidebar nav elements
# if the YAML frontmatter matches the expected value.
def sidebar_current(expected)
current = current_page.data.sidebar_current || ""
if current.start_with?(expected)
return " class=\"active\""
else
return ""
end
end
end

View File

@ -12,7 +12,7 @@ use Rack::Deflater
# to do.
use Rack::StaticCache,
:root => "build",
:urls => ["/images", "/javascripts", "/stylesheets"],
:urls => ["/assets"],
:duration => 2,
:versioning => false

View File

@ -1,67 +0,0 @@
require "net/http"
$consul_files = {}
$consul_os = []
if ENV["CONSUL_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/consul/")
req.basic_auth "mitchellh", ENV["BINTRAY_API_KEY"]
response = http.request(req)
response.body.split("\n").each do |line|
next if line !~ /\/mitchellh\/consul\/(#{Regexp.quote(ENV["CONSUL_VERSION"])}.+?)'/
filename = $1.to_s
os = filename.split("_")[1]
next if os == "SHA256SUMS"
next if os == "web"
$consul_files[os] ||= []
$consul_files[os] << filename
end
$consul_os = ["darwin", "linux", "windows"] & $consul_files.keys
$consul_os += $consul_files.keys
$consul_os.uniq!
$consul_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/consul/#{file}"
end
def ui_download_url
download_url("#{latest_version}_web_ui.zip")
end
def latest_version
ENV["CONSUL_VERSION"]
end
end

View File

@ -1,12 +0,0 @@
module SidebarHelpers
# This helps by setting the "active" class for sidebar nav elements
# if the YAML frontmatter matches the expected value.
def sidebar_current(expected)
current = current_page.data.sidebar_current || ""
if current.start_with?(expected)
return " class=\"active\""
else
return ""
end
end
end

View File

@ -1,69 +0,0 @@
module.exports = function(grunt) {
// Configuration goes here
grunt.initConfig({
less: {
development:{
files: {
"stylesheets/main.css": "stylesheets/main.less"
}
}
},
concat: {
options: {
separator: ';'
},
site: {
src: [
'javascripts/app/app.js',
'javascripts/app/util.js',
'javascripts/app/homepage.js'
],
dest: 'javascripts/app/deploy/site.js'
},
},
uglify: {
app: {
files: {
'javascripts/app/deploy/site.min.js': ['javascripts/app/deploy/site.js']
}
}
},
watch: {
less: {
files: 'stylesheets/*.less',
tasks: ['less']
},
js: {
files: 'javascripts/app/*.js',
tasks: ['concat', 'uglify']
}
}
});
// Load plugins here
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-recess');
// JS distribution task.
grunt.registerTask('dist-js', ['concat', 'uglify']);
// Full distribution task.
grunt.registerTask('dist', ['dist-js']);
grunt.registerTask('default', ['watch']);
};

View File

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

View File

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 45 KiB

View File

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

View File

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

View File

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

View File

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View File

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

View File

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 93 KiB

View File

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View File

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

View File

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

View File

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View File

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 45 KiB

View File

Before

Width:  |  Height:  |  Size: 134 KiB

After

Width:  |  Height:  |  Size: 134 KiB

View File

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 73 KiB

View File

Before

Width:  |  Height:  |  Size: 240 KiB

After

Width:  |  Height:  |  Size: 240 KiB

View File

Before

Width:  |  Height:  |  Size: 802 B

After

Width:  |  Height:  |  Size: 802 B

View File

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

Before

Width:  |  Height:  |  Size: 281 B

After

Width:  |  Height:  |  Size: 281 B

View File

Before

Width:  |  Height:  |  Size: 590 B

After

Width:  |  Height:  |  Size: 590 B

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

Before

Width:  |  Height:  |  Size: 361 B

After

Width:  |  Height:  |  Size: 361 B

View File

Before

Width:  |  Height:  |  Size: 687 B

After

Width:  |  Height:  |  Size: 687 B

View File

Before

Width:  |  Height:  |  Size: 179 B

After

Width:  |  Height:  |  Size: 179 B

View File

Before

Width:  |  Height:  |  Size: 308 B

After

Width:  |  Height:  |  Size: 308 B

View File

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

View File

@ -0,0 +1,7 @@
# From middleman-hashicorp
#= require jquery
#= require bootstrap
#= require app/app
#= require app/homepage
#= require app/util

View File

@ -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);
@ -34,7 +34,7 @@
margin-left: -4px;
width: 8px;
height: 8px;
background-color: @white;
background-color: $white;
border-radius: 4px;
content: '';
opacity: 0;

View File

@ -4,7 +4,7 @@
body.layout-docs,
body.layout-intro{
background: @light-purple url('../images/sidebar-dots.jpg') left 62px no-repeat;
background: $light-purple image-url('sidebar-dots.jpg') left 62px no-repeat;
>.container{
.col-md-8[role=main]{
@ -36,11 +36,11 @@ body.layout-intro{
margin-bottom: 30px;
margin-top: 50px;
margin-right: 4%;
background-color: @light-purple;
border-radius: @el-border-radius;
background-color: $light-purple;
border-radius: $el-border-radius;
a{
color: @purple;
color: $purple;
}
.docs-sidenav{
@ -56,15 +56,15 @@ body.layout-intro{
position: relative;
> a{
color: @purple;
.transition( color 0.5s ease );
color: $purple;
@include transition( color 0.5s ease );
}
> a:hover,
> a:focus {
background-color: transparent !important;
color: @black;
.transition( color 0.5s ease );
color: $black;
@include transition( color 0.5s ease );
}
}
@ -77,7 +77,7 @@ body.layout-intro{
>.nav{
li{
a{
color: @black;
color: $black;
}
}
}
@ -88,7 +88,7 @@ body.layout-intro{
position: absolute;
width: 8px;
height: 8px;
background-color: @purple;
background-color: $purple;
border-radius: 4px;
top: 26px;
left: -10px;
@ -99,22 +99,22 @@ body.layout-intro{
/*> a:hover,
> a:focus {
font-weight: @font-weight-museo-xb;
font-weight: $font-weight-museo-xb;
}*/
.nav {
display: block;
li.active a {
font-weight: @font-weight-museo-xb;
font-weight: $font-weight-museo-xb;
}
}
}
> a {
text-transform: uppercase;
font-family: @font-family-museo;
font-weight: @font-weight-museo-sb;
font-family: $font-family-museo;
font-weight: $font-weight-museo-sb;
-webkit-font-smoothing: antialiased;
}
}
@ -128,7 +128,7 @@ body.layout-intro{
> a{
-webkit-font-smoothing: antialiased;
font-family: @font-family-open-sans;
font-family: $font-family-open-sans;
padding: 6px 15px;
}
}
@ -152,8 +152,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;
@ -164,7 +164,7 @@ body.layout-intro{
}
a{
color: @purple;
color: $purple;
&:hover{
text-decoration: underline;
}
@ -177,7 +177,7 @@ body.layout-intro{
}
h1{
color: @purple;
color: $purple;
text-transform: uppercase;
padding-bottom: 24px;
margin-top: 40px;

View File

@ -0,0 +1,26 @@
//
// Typography
// --------------------------------------------------
//light
.rls-l{
font-family: $font-family-museo;
font-weight: $font-weight-museo-xl;
}
//semibold
.rls-sb{
font-family: $font-family-museo;
font-weight: $font-weight-museo-sb;
}
//extrabold
.rls-xb{
font-family: $font-family-museo;
font-weight: $font-weight-museo-xb;
}
.os{
font-family: $font-family-open-sans;
font-weight: $font-weight-open;
}

View File

@ -9,31 +9,31 @@
body {
font-size: 15px;
color: @black;
color: $black;
font-weight: 300;
}
h1{
font-size: 42px;
line-height: 42px;
font-family: @font-family-museo;
font-weight: @font-weight-museo-sb;
font-family: $font-family-museo;
font-weight: $font-weight-museo-sb;
margin-bottom: 24px;
}
h3{
font-size: 28px;
line-height: 28px;
font-family: @font-family-museo;
font-weight: @font-weight-museo-sb;
font-family: $font-family-museo;
font-weight: $font-weight-museo-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{
@ -41,8 +41,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;

View File

@ -4,15 +4,15 @@
body.page-sub{
#header{
.consul-gradient-bg();
@include consul-gradient-bg();
}
}
#footer,
#header {
.anti-alias();
@include anti-alias();
position: relative;
color: @white;
color: $white;
text-rendering: optimizeLegibility;
margin-bottom: 0;
@ -25,15 +25,15 @@ body.page-sub{
}
a{
color: @white;
color: $white;
}
.navbar-toggle{
margin-top: 14px;
margin-bottom: 14px;
border: 2px solid @white;
border: 2px solid $white;
.icon-bar{
border: 1px solid @white;
border: 1px solid $white;
}
}
@ -46,8 +46,8 @@ body.page-sub{
display: inline-block;
width: 179px;
height: 59px;
background: url(../images/consul-header-logo.png) 0 0 no-repeat;
.img-retina("../images/consul-header-logo.png", "../images/consul-header-logo@2x.png", 179px, 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);
}
}
}
@ -78,8 +78,8 @@ body.page-sub{
.nav > li > a:hover, .nav > li > a:focus {
background-color: transparent;
/*color: @p;
.transition( color 0.3s ease );*/
/*color: $p;
@include transition( color 0.3s ease );*/
}
.main-links.navbar-nav{
@ -90,8 +90,8 @@ body.page-sub{
top: 35px;
width: 4px;
height: 23px;
background: url(../images/nav-dotpipes.png) 0 0 no-repeat;
.img-retina("../images/nav-dotpipes.png", "../images/nav-dotpipes@2x.png", 4px, 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;
}
@ -116,15 +116,15 @@ body.page-sub{
&.download{
a{
background: url(../images/icon-download.png) 8px 6px no-repeat;
.img-retina("../images/icon-download.png", "../images/icon-download@2x.png", 20px, 20px);
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: url(../images/icon-github.png) 8px 6px no-repeat;
.img-retina("../images/icon-github.png", "../images/icon-github@2x.png", 20px, 20px);
background: image-url('icon-github.png') 8px 6px no-repeat;
@include img-retina("icon-github.png", "icon-github@2x.png", 20px, 20px);
}
}
}
@ -140,7 +140,7 @@ body.page-sub{
#footer{
height: 650px;
text-align: center;
color: @purple;
color: $purple;
.main-links.navbar-nav{
float: none;
@ -148,7 +148,7 @@ body.page-sub{
padding-top: 155px;
.li-under a::after {
background-color: @purple;
background-color: $purple;
}
}
@ -157,7 +157,7 @@ body.page-sub{
}
a{
color: @purple;
color: $purple;
}
.buttons.navbar-nav{
@ -173,15 +173,15 @@ body.page-sub{
&.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);
}
}
}
@ -274,7 +274,7 @@ body.page-sub{
}
#header{
.consul-gradient-bg();
@include consul-gradient-bg();
.navbar-right{
float: none !important;
@ -307,15 +307,15 @@ body.page-sub{
&.download{
a{
background: url(../images/icon-download.png) 8px 6px no-repeat !important;;
.img-retina("../images/icon-download.png", "../images/icon-download@2x.png", 20px, 20px);
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: url(../images/icon-github.png) 8px 6px no-repeat !important;;
.img-retina("../images/icon-github.png", "../images/icon-github@2x.png", 20px, 20px);
background: image-url('icon-github.png') 8px 6px no-repeat !important;;
@include img-retina("icon-github.png", "icon-github@2x.png", 20px, 20px);
}
}
}

View File

@ -6,9 +6,9 @@ body.page-home{
}
#features{
.anti-alias();
@include anti-alias();
padding: 130px 0 0 0;
background: #f8f8f8 url(../images/hero-dots-below@2x.png) center top no-repeat;
background: #f8f8f8 image-url('hero-dots-below@2x.png') center top no-repeat;
background-size: 1280px 49px;
.double-row{
@ -18,17 +18,17 @@ body.page-home{
h2{
font-size: 24px;
letter-spacing: 2px;
color: @purple;
font-family: @font-family-museo;
font-weight: @font-weight-museo-xb;
color: $purple;
font-family: $font-family-museo;
font-weight: $font-weight-museo-xb;
}
p{
font-size: 16px;
letter-spacing: 1px;
line-height: 1.5em;
color: @consul-gray;
font-family: @font-family-museo;
font-weight: @font-weight-museo-sb;
color: $consul-gray;
font-family: $font-family-museo;
font-weight: $font-weight-museo-sb;
}
.icn{
@ -41,30 +41,30 @@ body.page-home{
}
.discovery{
background-image: url( ../images/feature-discovery@2x.png);
background-image: image-url('feature-discovery@2x.png');
background-size: 181px 181px;
}
.health{
background-image: url( ../images/feature-health@2x.png);
background-image: image-url('feature-health@2x.png');
background-size: 125px 179px;
}
.multi{
background-image: url( ../images/feature-multi@2x.png);
background-image: image-url('feature-multi@2x.png');
background-size: 182px 184px;
}
.config{
background-image: url( ../images/feature-config@2x.png);
background-image: image-url('feature-config@2x.png');
background-size: 157px 179px;
}
}
#trusted{
background-color: @black;
background-color: $black;
padding: 140px 0;
h3{
margin-bottom: 60px;
color: @white;
color: $white;
text-transform: uppercase;
font-size: 18px;
text-align: center;
@ -82,7 +82,7 @@ body.page-home{
width: 25%;
height: 80px;
margin: 12px 0;
background: url( ../images/trusted-sprite.png ) 0 0 no-repeat;
background: image-url('trusted-sprite.png') 0 0 no-repeat;
&#i0{
background-position: 0 0;
@ -128,9 +128,9 @@ body.page-home{
#footer{
background-color: @consul-footer-gray;
background: @consul-footer-gray url(../images/consul-footer-logo.png) center center no-repeat;
.img-retina("../images/consul-footer-logo.png", "../images/consul-footer-logo@2x.png", 446px, 443px);
background-color: $consul-footer-gray;
background: $consul-footer-gray image-url('consul-footer-logo.png') center center no-repeat;
@include img-retina("consul-footer-logo.png", "consul-footer-logo@2x.png", 446px, 443px);
.footer-links{
margin-bottom: 20px;
@ -141,7 +141,7 @@ body.page-home{
margin-bottom: 30px;
a{
font-weight: @font-weight-museo-xb;
font-weight: $font-weight-museo-xb;
}
span{
@ -195,9 +195,9 @@ body.page-home{
font-size: 14px;
letter-spacing: 1px;
line-height: 1.5em;
color: @consul-gray;
font-family: @font-family-museo;
font-weight: @font-weight-museo-sb;
color: $consul-gray;
font-family: $font-family-museo;
font-weight: $font-weight-museo-sb;
}
@ -216,7 +216,7 @@ body.page-home{
font-size: 16px;
text-transform: uppercase;
letter-spacing: 3px;
color: @purple;
color: $purple;
&:hover {
text-decoration: none;
}
@ -225,27 +225,27 @@ body.page-home{
#demos{
padding: 30px 0 60px;
background-color: @light-purple;
background: @light-purple url('../images/sidebar-dots.jpg') left 62px no-repeat;
background-color: $light-purple;
background: $light-purple image-url('sidebar-dots.jpg') left 62px no-repeat;
.explantion {
margin: 40px 0 40px 0;
h2 {
font-size: 22px;
color: lighten(@gray-light, 15%);
color: lighten($gray-light, 15%);
text-transform: uppercase;
font-family: @font-family-museo;
font-weight: @font-weight-museo-xb;
font-family: $font-family-museo;
font-weight: $font-weight-museo-xb;
}
p{
font-size: 16px;
letter-spacing: 1px;
line-height: 1.5em;
color: @consul-gray;
font-family: @font-family-museo;
font-weight: @font-weight-museo-sb;
color: $consul-gray;
font-family: $font-family-museo;
font-weight: $font-weight-museo-sb;
}
}
@ -283,12 +283,12 @@ body.page-home{
}
.terminal{
background-color: darken(@gray-darker, 15%);
background-color: darken($gray-darker, 15%);
border-radius: 4px;
header{
position: relative;
background-color: @consul-gray;
background-color: $consul-gray;
text-align: center;
padding: 3px;
border-top-left-radius: 4px;
@ -297,9 +297,9 @@ body.page-home{
h4{
font-size: 14px;
letter-spacing: 1px;
color: @gray-darker;
font-family: @font-family-museo;
font-weight: @font-weight-museo-xb;
color: $gray-darker;
font-family: $font-family-museo;
font-weight: $font-weight-museo-xb;
}
ul.shell-dots{
@ -313,7 +313,7 @@ body.page-home{
width: 12px;
height: 12px;
border-radius: 6px;
background-color: @gray-darker;
background-color: $gray-darker;
margin-left: 6px;
}
}
@ -325,21 +325,21 @@ body.page-home{
font-size: 15px;
font-weight: normal;
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
color: @white;
color: $white;
.txt-r {
color: lighten(@red, 8%);;
color: lighten($red, 8%);;
}
.txt-p {
font-weight: bold;
color: lighten(@purple, 15%);
color: lighten($purple, 15%);
}
p{
margin-bottom: 2px;
white-space: pre-wrap;
}
.cursor {
background-color: @light-purple;
background-color: $light-purple;
}
}
}

View File

@ -5,23 +5,23 @@
#jumbotron-mask{
overflow: hidden;
width: 100%;
height: @jumbotron-total-height;
margin-top: @negative-hero-margin;
height: $jumbotron-total-height;
margin-top: $negative-hero-margin;
}
#jumbotron {
position: relative;
height: @jumbotron-total-height;
height: $jumbotron-total-height;
padding-top: 0;
padding-bottom: 0;
margin-top: @negative-hero-margin;
color: @jumbotron-color;
.consul-gradient-bg();
margin-top: $negative-hero-margin;
color: $jumbotron-color;
@include consul-gradient-bg();
&.mobile-hero{
background: transparent url( ../images/node-hero-pattern.jpg ) center center;
background: transparent image-url('node-hero-pattern.jpg') center center;
background-size: 320px 320px;
background: -webkit-image-set( url('../images/node-hero-pattern.jpg') 1x, url('../images/node-hero-pattern@2x.jpg') 2x );
background: -webkit-image-set( image-url('node-hero-pattern.jpg') 1x, image-url('node-hero-pattern$2x.jpg') 2x );
}
@ -31,15 +31,15 @@
left: 0;
height: 632px;
width: 100%;
margin-top: @negative-hero-margin;
background: transparent url('../images/hero-dots.png') center @header-height no-repeat;
margin-top: $negative-hero-margin;
background: transparent image-url('hero-dots.png') center $header-height no-repeat;
}
.container{
position: relative;
height: 100%;
margin-top: @header-height;
margin-top: $header-height;
.jumbo-logo-wrap{
margin-top: 135px;
@ -47,7 +47,7 @@
.jumbo-logo{
width: 318px;
height: 316px;
background: transparent url( ../images/consul-hero-logo@2x.png ) 0 0 no-repeat;
background: transparent image-url('consul-hero-logo@2x.png') 0 0 no-repeat;
background-size: 318px 316px;
z-index: 20;
}

View File

@ -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: 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. `<select>`
// element gets special love because it's special, and that's a fact!
@mixin input-size($input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
height: $input-height;
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
line-height: $line-height;
border-radius: $border-radius;
select& {
height: $input-height;
line-height: $input-height;
}
textarea& {
height: auto;
}
}

View File

@ -3,15 +3,15 @@
// --------------------------------------------------
//
//
// -------------------------
.anti-alias() {
@mixin anti-alias() {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.consul-gradient-bg(){
@mixin consul-gradient-bg() {
background: #694a9c; /* Old browsers */
background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#694a9c), color-stop(100%,#cd2028)); /* Chrome,Safari4+ */
@ -19,6 +19,6 @@
background: -o-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* IE10+ */
background: linear-gradient(to right, #694a9c 0%,#cd2028 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#694a9c', endColorstr='#cd2028',GradientType=1 ); /* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#694a9c', endColorstr='#cd2028',GradientType=1 ); /* IE6-9 */
}
}

View File

@ -0,0 +1,58 @@
//
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
$jumbotron-height: 540px;
$header-height: 92px;
$jumbotron-total-height: 542px; //jumbo+header
$jumbotron-color: #fff;
$btn-border-radius: 4px;
$el-border-radius: 6px;
$negative-hero-margin: -93px;
// colors
// -------------------------
$white: #fff;
$black: #242424;
$gray-darker: #555;
$gray: #777;
$gray-light: #939393;
$gray-lighter: #979797;
$red: #dd4e58;
$red-dark: #c5454e;
$red-darker: #b03c44;
$tan: #f0f0e5;
$consul-gray: #909090;
$consul-footer-gray: #d7d4d7;
$purple: #69499a;
$light-purple: #f7f3f9;
$btn-color: #4592C5;
// Scaffolding
// -------------------------
$body-bg: #fff;
$text-color: $gray;
// Links
// -------------------------
$link-color: $red-dark;
$link-hover-color: darken($link-color, 15%);
// Typography
// -------------------------
$font-family-museo: 'museo-sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-open-sans: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-weight-museo-xl: 100;
$font-weight-museo-reg: 300;
$font-weight-museo-sb: 500;
$font-weight-museo-xb: 700;
$font-weight-open: $font-weight-museo-reg;
$text-shadow: 1px 1px 1px #000;
$shadow: $text-shadow;

View File

@ -1,3 +1,7 @@
// Import bootstrap
@import "bootstrap-sprockets";
@import "bootstrap";
// Core variables and mixins
@import "_variables";
@import "_mixins";
@ -24,5 +28,3 @@
// Components w/ JavaScript
/*@import "modals.less";*/
// 68

View File

@ -69,7 +69,9 @@ allowing a client to make a request from a server.
From a 10,000 foot altitude the architecture of Consul looks like this:
![Consul Architecture](/images/consul-arch.png)
<div class="center">
<%= link_to image_tag('consul-arch.png', alt: 'Consul Architecture'), image_path('consul-arch.png') %>
</div>
Lets break down this image and describe each piece. First of all we can see
that there are two datacenters, one and two respectively. Consul has first

View File

@ -27,7 +27,9 @@ a named ID which can be used to refer to it. This ID can be used with the KV
store to acquire locks, which are advisory mechanisms for mutual exclusion.
Below is a diagram showing the relationship between these components:
![Session Architecture](/images/consul-sessions.png)
<div class="center">
<%= link_to image_tag('consul-sessions.png'), image_path('consul-sessions.png') %>
</div>
The contract that Consul provides is that under any of the folllowing
situations the session will be *invalidated*:

View File

@ -17,24 +17,22 @@ sidebar_current: "downloads-consul"
</p>
</div>
</div>
<% $consul_os.each do |os| %>
<% product_versions.each do |os, versions| %>
<div class="row">
<div class="col-md-12 download">
<div class="icon pull-left"><%= image_tag "/images/icons/icon_#{os}.png" %>
</div>
<div class="details">
<h2 class="os-name"><%= download_os_human(os) %></h2>
<ul>
<% $consul_files[os].each do |file| %>
<li><a href="<%= download_url(file) %>"><%= download_arch(file) %></a></li>
<% end %>
</ul>
<div class="clearfix">
</div>
</div>
</div>
</div>
<% end %>
<div class="col-md-12 download">
<div class="icon pull-left"><%= system_icon(os) %></div>
<div class="details">
<h2 class="os-name"><%= os %></h2>
<ul>
<% versions.each do |url| %>
<li><a href="<%= url %>"><%= arch_for_filename(url) %></a></li>
<% end %>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<% end %>
<div class="row">
<div class="col-md-12 poweredby">

View File

@ -17,7 +17,7 @@ sidebar_current: "downloads-ui"
<a href="/intro/getting-started/ui.html">read the docs on how to set up the UI here</a>.
</p>
<p class="center">
<a class="btn btn-default btn-lg" href="<%= ui_download_url %>">
<a class="btn btn-default btn-lg" href="https://dl.bintray.com/mitchellh/consul/<%= latest_version %>_web_ui.zip">
Download Consul Web UI <%= latest_version %></a>
</p>
</div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 792 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

View File

@ -33,9 +33,7 @@ A screenshot of one page of the demo is shown below so you can get an
idea of what the web UI is like. Click the screenshot for the full size.
<div class="center">
<a href="/images/consul_web_ui.png">
<img src="/images/consul_web_ui.png">
</a>
<%= link_to image_tag('consul_web_ui.png'), image_path('consul_web_ui.png') %>
</div>
## Set Up

View File

@ -1,101 +0,0 @@
//
// app.js
//
var APP = (function() {
function initialize (){
APP.Utils.runIfClassNamePresent('page-home', initHome);
}
function initHome() {
APP.Homepage.init();
}
//api
return {
initialize: initialize
}
})();
;//
// util.js
//
var APP = APP || {};
APP.Utils = (function () {
return {
//check for mobile user agents
isMobile : (function(){
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
//|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
return true;
}
else {
return false;
}
})(),
runIfClassNamePresent: function(selector, initFunction) {
var elms = document.getElementsByClassName(selector);
if (elms.length > 0) {
initFunction();
}
}
}
}());;//homepage.js
var APP = APP || {};
(function () {
APP.Homepage = (function () {
return {
ui : null,
init: function () {
var _this = this;
//cache elements
this.ui = {
$doc: $(window),
$hero: $('#jumbotron'),
$collapse: $('.navbar-collapse')
}
this.addEventListeners();
},
addEventListeners: function(){
var _this = this;
if(APP.Utils.isMobile)
return;
_this.ui.$doc.scroll(function() {
//if collapseable menu is open dont do parrallax. It looks wonky. Bootstrap conflict
if( _this.ui.$collapse.hasClass('in'))
return;
var top = _this.ui.$doc.scrollTop(),
speedAdj = (top*0.8),
speedAdjOffset = speedAdj - top;
_this.ui.$hero.css('webkitTransform', 'translate(0, '+ speedAdj +'px)');
_this.ui.$hero.find('.container').css('webkitTransform', 'translate(0, '+ speedAdjOffset +'px)');
})
}
}
}());
}(jQuery, this));

View File

@ -1 +0,0 @@
var APP=function(){function a(){APP.Utils.runIfClassNamePresent("page-home",b)}function b(){APP.Homepage.init()}return{initialize:a}}(),APP=APP||{};APP.Utils=function(){return{isMobile:function(){return navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/webOS/i)||navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPod/i)||navigator.userAgent.match(/BlackBerry/i)||navigator.userAgent.match(/Windows Phone/i)?!0:!1}(),runIfClassNamePresent:function(a,b){var c=document.getElementsByClassName(a);c.length>0&&b()}}}();var APP=APP||{};!function(){APP.Homepage=function(){return{ui:null,init:function(){this.ui={$doc:$(window),$hero:$("#jumbotron"),$collapse:$(".navbar-collapse")},this.addEventListeners()},addEventListeners:function(){var a=this;APP.Utils.isMobile||a.ui.$doc.scroll(function(){if(!a.ui.$collapse.hasClass("in")){var b=a.ui.$doc.scrollTop(),c=.8*b,d=c-b;a.ui.$hero.css("webkitTransform","translate(0, "+c+"px)"),a.ui.$hero.find(".container").css("webkitTransform","translate(0, "+d+"px)")}})}}}()}(jQuery,this);

View File

@ -1,158 +0,0 @@
/**
* Classy - classy classes for JavaScript
*
* :copyright: (c) 2011 by Armin Ronacher.
* :license: BSD.
*/
;(function(undefined) {
var
CLASSY_VERSION = '1.4',
root = this,
old_class = root.Class,
disable_constructor = false;
/* we check if $super is in use by a class if we can. But first we have to
check if the JavaScript interpreter supports that. This also matches
to false positives later, but that does not do any harm besides slightly
slowing calls down. */
var probe_super = (function(){$super();}).toString().indexOf('$super') > 0;
function usesSuper(obj) {
return !probe_super || /\B\$super\b/.test(obj.toString());
}
/* helper function to set the attribute of something to a value or
removes it if the value is undefined. */
function setOrUnset(obj, key, value) {
if (value === undefined)
delete obj[key];
else
obj[key] = value;
}
/* gets the own property of an object */
function getOwnProperty(obj, name) {
return Object.prototype.hasOwnProperty.call(obj, name)
? obj[name] : undefined;
}
/* instanciate a class without calling the constructor */
function cheapNew(cls) {
disable_constructor = true;
var rv = new cls;
disable_constructor = false;
return rv;
}
/* the base class we export */
var Class = function() {};
/* restore the global Class name and pass it to a function. This allows
different versions of the classy library to be used side by side and
in combination with other libraries. */
Class.$noConflict = function() {
try {
setOrUnset(root, 'Class', old_class);
}
catch (e) {
// fix for IE that does not support delete on window
root.Class = old_class;
}
return Class;
};
/* what version of classy are we using? */
Class.$classyVersion = CLASSY_VERSION;
/* extend functionality */
Class.$extend = function(properties) {
var super_prototype = this.prototype;
/* disable constructors and instanciate prototype. Because the
prototype can't raise an exception when created, we are safe
without a try/finally here. */
var prototype = cheapNew(this);
/* copy all properties of the includes over if there are any */
if (properties.__include__)
for (var i = 0, n = properties.__include__.length; i != n; ++i) {
var mixin = properties.__include__[i];
for (var name in mixin) {
var value = getOwnProperty(mixin, name);
if (value !== undefined)
prototype[name] = mixin[name];
}
}
/* copy class vars from the superclass */
properties.__classvars__ = properties.__classvars__ || {};
if (prototype.__classvars__)
for (var key in prototype.__classvars__)
if (!properties.__classvars__[key]) {
var value = getOwnProperty(prototype.__classvars__, key);
properties.__classvars__[key] = value;
}
/* copy all properties over to the new prototype */
for (var name in properties) {
var value = getOwnProperty(properties, name);
if (name === '__include__' ||
value === undefined)
continue;
prototype[name] = typeof value === 'function' && usesSuper(value) ?
(function(meth, name) {
return function() {
var old_super = getOwnProperty(this, '$super');
this.$super = super_prototype[name];
try {
return meth.apply(this, arguments);
}
finally {
setOrUnset(this, '$super', old_super);
}
};
})(value, name) : value
}
/* dummy constructor */
var rv = function() {
if (disable_constructor)
return;
var proper_this = root === this ? cheapNew(arguments.callee) : this;
if (proper_this.__init__)
proper_this.__init__.apply(proper_this, arguments);
proper_this.$class = rv;
return proper_this;
}
/* copy all class vars over of any */
for (var key in properties.__classvars__) {
var value = getOwnProperty(properties.__classvars__, key);
if (value !== undefined)
rv[key] = value;
}
/* copy prototype and constructor over, reattach $extend and
return the class */
rv.prototype = prototype;
rv.constructor = rv;
rv.$extend = Class.$extend;
rv.$withData = Class.$withData;
return rv;
};
/* instanciate with data functionality */
Class.$withData = function(data) {
var rv = cheapNew(this);
for (var key in data) {
var value = getOwnProperty(data, key);
if (value !== undefined)
rv[key] = value;
}
return rv;
};
/* export the class */
root.Class = Class;
})();

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -17,15 +17,13 @@
<span></span>
</div>
<div class="footer-hashi os">
<span>&copy; 2014. A <a href="http://www.hashicorp.com">HashiCorp</a> Project.</span>
<a class="hashi-logo" href="http://www.hashicorp.com"><img src="/images/footer-hashicorp-logo.png"></a>
<span>Copyright &copy; <%= Time.now.year %>. A <a href="http://www.hashicorp.com">HashiCorp</a> Project.</span>
<a class="hashi-logo" href="http://www.hashicorp.com"><%= image_tag 'footer-hashicorp-logo.png' %></a>
</div>
</div>
</div>
<script src="/javascripts/lib/jquery-2.0.3.min.js"></script>
<script src="/javascripts/lib/bootstrap.min.js"></script>
<script src="/javascripts/app/deploy/site.js"></script>
<%= javascript_include_tag 'application' %>
<script>
APP.initialize();

View File

@ -5,13 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Service discovery and configuration made easy. Distributed, highly available, and datacenter-aware.">
<link rel="shortcut icon" href="/images/favicon.png">
<link rel="shortcut icon" href="<%= image_path('favicon.png') %>">
<title><%= current_page.data.page_title ? "#{current_page.data.page_title} - " : "" %>Consul</title>
<!-- Bootstrap core CSS -->
<%= stylesheet_link_tag "bootstrap.min" %>
<%= stylesheet_link_tag "main" %>
<%= stylesheet_link_tag "application" %>
<!-- google fonts -->
<!-- <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>

View File

@ -1,16 +0,0 @@
{
"name": "consul"
, "description": ""
, "version": "1.0.0"
, "devDependencies": {
"grunt": "~0.4.1"
, "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"
}
}

View File

@ -1,26 +0,0 @@
//
// Typography
// --------------------------------------------------
//light
.rls-l{
font-family: @font-family-museo;
font-weight: @font-weight-museo-xl;
}
//semibold
.rls-sb{
font-family: @font-family-museo;
font-weight: @font-weight-museo-sb;
}
//extrabold
.rls-xb{
font-family: @font-family-museo;
font-weight: @font-weight-museo-xb;
}
.os{
font-family: @font-family-open-sans;
font-weight: @font-weight-open;
}

View File

@ -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.
.clearfix() {
&:before,
&:after {
content: " "; /* 1 */
display: table; /* 2 */
}
&:after {
clear: both;
}
}
// Webkit-style focus
.tab-focus() {
// Default
outline: thin dotted #333;
// Webkit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
// Center-align a block level element
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Sizing shortcuts
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Placeholder text
.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
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// CSS image replacement
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
.hide-text() {
font: ~"0/0" a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
// CSS3 PROPERTIES
// --------------------------------------------------
// Single side border-radius
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}
// Drop shadows
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
// Transformations
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9+
transform: rotate(@degrees);
}
.scale(@ratio) {
-webkit-transform: scale(@ratio);
-ms-transform: scale(@ratio); // IE9+
transform: scale(@ratio);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9+
transform: translate(@x, @y);
}
.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);
}
.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
.backface-visibility(@visibility){
-webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility;
backface-visibility: @visibility;
}
// Box sizing
.box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
// User select
// For selecting text on the page
.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
.resizable(@direction) {
resize: @direction; // Options: horizontal, vertical, both
overflow: auto; // Safari fix
}
// CSS3 Content Columns
.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
.hyphens(@mode: auto) {
word-wrap: break-word;
-webkit-hyphens: @mode;
-moz-hyphens: @mode;
-ms-hyphens: @mode; // IE10+
-o-hyphens: @mode;
hyphens: @mode;
}
// Opacity
.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.
.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.
.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
}
.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
}
.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
}
.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
}
.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;
}
.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.
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}
// Retina images
//
// Short retina mixin for setting background-image and -size
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-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: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Responsive image
//
// Keep images from scaling beyond the width of their parents.
.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
.nav-divider(@color: #e5e5e5) {
height: 1px;
margin: ((@line-height-computed / 2) - 1) 0;
overflow: hidden;
background-color: @color;
}
// Panels
// -------------------------
.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
// -------------------------
.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
// -------------------------
.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
.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
// -------------------------
.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
// -------------------------
.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 {
.border-left-radius(@border-radius);
}
}
&:last-child {
> a,
> span {
.border-right-radius(@border-radius);
}
}
}
}
// Labels
// -------------------------
.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 `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
.navbar-vertical-align(@element-height) {
margin-top: ((@navbar-height - @element-height) / 2);
margin-bottom: ((@navbar-height - @element-height) / 2);
}
// Progress bars
// -------------------------
.progress-bar-variant(@color) {
background-color: @color;
.progress-striped & {
#gradient > .striped(@color);
}
}
// Responsive utilities
// -------------------------
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
.responsive-invisibility() {
display: none !important;
tr& { display: none !important; }
th&,
td& { display: none !important; }
}
// Grid System
// -----------
// Centered container element
.container-fixed() {
margin-right: auto;
margin-left: auto;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
.clearfix();
}
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
.clearfix();
}
// Generate the extra small columns
.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
.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
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.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
.make-md-column-offset(@columns) {
@media (min-width: @screen-md) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.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
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg) {
left: percentage((@columns / @grid-columns));
}
}
.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.
.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;
.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%);
.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.
.form-control-focus(@color: @input-border-focus) {
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
&:focus {
border-color: @color;
outline: 0;
.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. `<select>`
// element gets special love because it's special, and that's a fact!
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
height: @input-height;
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
border-radius: @border-radius;
select& {
height: @input-height;
line-height: @input-height;
}
textarea& {
height: auto;
}
}

View File

@ -1,58 +0,0 @@
//
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
@jumbotron-height: 540px;
@header-height: 92px;
@jumbotron-total-height: 542px; //jumbo+header
@jumbotron-color: #fff;
@btn-border-radius: 4px;
@el-border-radius: 6px;
@negative-hero-margin: -93px;
// colors
// -------------------------
@white: #fff;
@black: #242424;
@gray-darker: #555;
@gray: #777;
@gray-light: #939393;
@gray-lighter: #979797;
@red: #dd4e58;
@red-dark: #c5454e;
@red-darker: #b03c44;
@tan: #f0f0e5;
@consul-gray: #909090;
@consul-footer-gray: #d7d4d7;
@purple: #69499a;
@light-purple: #f7f3f9;
@btn-color: #4592C5;
// Scaffolding
// -------------------------
@body-bg: #fff;
@text-color: @gray;
// Links
// -------------------------
@link-color: @red-dark;
@link-hover-color: darken(@link-color, 15%);
// Typography
// -------------------------
@font-family-museo: 'museo-sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-open-sans: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-weight-museo-xl: 100;
@font-weight-museo-reg: 300;
@font-weight-museo-sb: 500;
@font-weight-museo-xb: 700;
@font-weight-open: @font-weight-museo-reg;
@text-shadow: 1px 1px 1px #000;
@shadow: @text-shadow;

File diff suppressed because one or more lines are too long