From 34c553a42b992dc1ced2093b36a5ae5e2a87b9bd Mon Sep 17 00:00:00 2001 From: Seth Vargo Date: Wed, 5 Apr 2017 11:28:34 -0400 Subject: [PATCH 01/17] Update basic scaffolding --- website/Gemfile | 2 +- website/Gemfile.lock | 10 +- website/Makefile | 18 +- website/config.rb | 53 +- website/packer.json | 2 +- website/source/404.html.erb | 11 - website/source/404.html.md | 14 + website/source/assets/images/logo-text.svg | 9 + .../source/assets/javascripts/application.js | 26 +- .../source/assets/stylesheets/_buttons.scss | 170 +-- .../source/assets/stylesheets/_community.scss | 29 +- website/source/assets/stylesheets/_docs.scss | 414 ++----- .../source/assets/stylesheets/_downloads.scss | 77 +- .../source/assets/stylesheets/_footer.scss | 108 +- .../source/assets/stylesheets/_global.scss | 118 +- .../source/assets/stylesheets/_header.scss | 105 +- website/source/assets/stylesheets/_home.scss | 4 - website/source/assets/stylesheets/_inner.scss | 89 ++ website/source/assets/stylesheets/_logos.scss | 41 + .../source/assets/stylesheets/_mixins.scss | 724 ----------- .../source/assets/stylesheets/_sidebar.scss | 23 - .../assets/stylesheets/_syntax.scss.erb | 14 + .../source/assets/stylesheets/_utilities.scss | 24 - .../source/assets/stylesheets/_variables.scss | 97 +- .../assets/stylesheets/application.scss | 28 +- website/source/community.html.erb | 126 +- website/source/downloads.html.erb | 9 +- website/source/index.html.erb | 522 ++++---- .../intro/hashicorp-ecosystem.html.markdown | 30 - website/source/layouts/_footer.erb | 90 -- website/source/layouts/_header.erb | 36 - website/source/layouts/_meta.erb | 37 - website/source/layouts/_sidebar.erb | 47 +- website/source/layouts/alicloud.erb | 143 ++- website/source/layouts/archive.erb | 42 +- website/source/layouts/arukas.erb | 42 +- website/source/layouts/atlas.erb | 56 +- website/source/layouts/aws.erb | 90 +- website/source/layouts/azure.erb | 4 +- website/source/layouts/azurerm.erb | 36 +- website/source/layouts/backend-types.erb | 112 +- website/source/layouts/bitbucket.erb | 4 +- website/source/layouts/chef.erb | 52 +- website/source/layouts/circonus.erb | 6 +- website/source/layouts/clc.erb | 4 +- website/source/layouts/cloudflare.erb | 36 +- website/source/layouts/cloudstack.erb | 4 +- website/source/layouts/cobbler.erb | 42 +- website/source/layouts/commands-env.erb | 60 +- website/source/layouts/commands-state.erb | 78 +- website/source/layouts/consul.erb | 74 +- website/source/layouts/datadog.erb | 60 +- website/source/layouts/digitalocean.erb | 38 +- website/source/layouts/dme.erb | 4 +- website/source/layouts/dns.erb | 40 +- website/source/layouts/dnsimple.erb | 34 +- website/source/layouts/docker.erb | 72 +- website/source/layouts/docs.erb | 1078 ++++++++--------- website/source/layouts/downloads.erb | 45 +- website/source/layouts/dyn.erb | 4 +- website/source/layouts/external.erb | 36 +- website/source/layouts/fastly.erb | 6 +- website/source/layouts/github.erb | 80 +- website/source/layouts/google.erb | 372 +++--- website/source/layouts/grafana.erb | 48 +- website/source/layouts/heroku.erb | 40 +- website/source/layouts/icinga2.erb | 42 +- website/source/layouts/ignition.erb | 56 +- website/source/layouts/influxdb.erb | 42 +- website/source/layouts/inner.erb | 19 +- website/source/layouts/intro.erb | 188 ++- website/source/layouts/kubernetes.erb | 50 +- website/source/layouts/layout.erb | 139 ++- website/source/layouts/librato.erb | 42 +- website/source/layouts/logentries.erb | 44 +- website/source/layouts/mailgun.erb | 34 +- website/source/layouts/mysql.erb | 44 +- website/source/layouts/newrelic.erb | 6 +- website/source/layouts/nomad.erb | 42 +- website/source/layouts/ns1.erb | 90 +- website/source/layouts/openstack.erb | 18 +- website/source/layouts/opsgenie.erb | 6 +- website/source/layouts/packet.erb | 4 +- website/source/layouts/pagerduty.erb | 6 +- website/source/layouts/postgresql.erb | 4 +- website/source/layouts/powerdns.erb | 34 +- website/source/layouts/profitbricks.erb | 36 +- website/source/layouts/rabbitmq.erb | 80 +- website/source/layouts/rancher.erb | 78 +- website/source/layouts/random.erb | 54 +- website/source/layouts/remotestate.erb | 4 +- website/source/layouts/rundeck.erb | 60 +- website/source/layouts/scaleway.erb | 6 +- website/source/layouts/softlayer.erb | 48 +- website/source/layouts/spotinst.erb | 34 +- website/source/layouts/statuscake.erb | 42 +- .../source/layouts/svg/_svg-by-hashicorp.erb | 17 - website/source/layouts/svg/_svg-download.erb | 4 - .../source/layouts/svg/_svg-enterprise.erb | 41 - website/source/layouts/svg/_svg-github.erb | 9 - .../layouts/svg/_svg-hashicorp-logo.erb | 7 - website/source/layouts/template.erb | 48 +- website/source/layouts/terraform.erb | 42 +- website/source/layouts/tls.erb | 60 +- website/source/layouts/triton.erb | 4 +- website/source/layouts/ultradns.erb | 68 +- website/source/layouts/vault.erb | 6 +- website/source/layouts/vcd.erb | 4 +- website/source/layouts/vsphere.erb | 4 +- 109 files changed, 3217 insertions(+), 4398 deletions(-) delete mode 100644 website/source/404.html.erb create mode 100644 website/source/404.html.md create mode 100644 website/source/assets/images/logo-text.svg create mode 100644 website/source/assets/stylesheets/_inner.scss create mode 100644 website/source/assets/stylesheets/_logos.scss delete mode 100755 website/source/assets/stylesheets/_mixins.scss delete mode 100644 website/source/assets/stylesheets/_sidebar.scss create mode 100644 website/source/assets/stylesheets/_syntax.scss.erb delete mode 100755 website/source/assets/stylesheets/_utilities.scss delete mode 100644 website/source/intro/hashicorp-ecosystem.html.markdown delete mode 100644 website/source/layouts/_footer.erb delete mode 100644 website/source/layouts/_header.erb delete mode 100644 website/source/layouts/_meta.erb delete mode 100644 website/source/layouts/svg/_svg-by-hashicorp.erb delete mode 100644 website/source/layouts/svg/_svg-download.erb delete mode 100644 website/source/layouts/svg/_svg-enterprise.erb delete mode 100644 website/source/layouts/svg/_svg-github.erb delete mode 100644 website/source/layouts/svg/_svg-hashicorp-logo.erb diff --git a/website/Gemfile b/website/Gemfile index 08e6fe65e..405a8c992 100644 --- a/website/Gemfile +++ b/website/Gemfile @@ -1,3 +1,3 @@ source "https://rubygems.org" -gem "middleman-hashicorp", "0.3.13" +gem "middleman-hashicorp", "0.3.22" diff --git a/website/Gemfile.lock b/website/Gemfile.lock index 0811f6d62..229218ac9 100644 --- a/website/Gemfile.lock +++ b/website/Gemfile.lock @@ -6,7 +6,7 @@ GEM minitest (~> 5.1) thread_safe (~> 0.3, >= 0.3.4) tzinfo (~> 1.1) - autoprefixer-rails (6.7.6) + autoprefixer-rails (6.7.7.1) execjs bootstrap-sass (3.3.7) autoprefixer-rails (>= 5.2.1) @@ -77,7 +77,7 @@ GEM rack (>= 1.4.5, < 2.0) thor (>= 0.15.2, < 2.0) tilt (~> 1.4.1, < 2.0) - middleman-hashicorp (0.3.13) + middleman-hashicorp (0.3.22) bootstrap-sass (~> 3.3) builder (~> 3.2) middleman (~> 3.4) @@ -103,7 +103,7 @@ GEM mini_portile2 (2.1.0) minitest (5.10.1) multi_json (1.12.1) - nokogiri (1.7.0.1) + nokogiri (1.7.1) mini_portile2 (~> 2.1.0) padrino-helpers (0.12.8.1) i18n (~> 0.6, >= 0.6.7) @@ -138,7 +138,7 @@ GEM turbolinks (5.0.1) turbolinks-source (~> 5) turbolinks-source (5.0.0) - tzinfo (1.2.2) + tzinfo (1.2.3) thread_safe (~> 0.1) uber (0.0.15) uglifier (2.7.2) @@ -151,7 +151,7 @@ PLATFORMS ruby DEPENDENCIES - middleman-hashicorp (= 0.3.13) + middleman-hashicorp (= 0.3.22) BUNDLED WITH 1.14.6 diff --git a/website/Makefile b/website/Makefile index 41fcf114e..d7620d1c2 100644 --- a/website/Makefile +++ b/website/Makefile @@ -1,14 +1,24 @@ -VERSION?="0.3.13" +VERSION?="0.3.22" + +build: + @echo "==> Starting build in Docker..." + @docker run \ + --interactive \ + --rm \ + --tty \ + --volume "$(shell pwd):/website" \ + hashicorp/middleman-hashicorp:${VERSION} \ + bundle exec middleman build --verbose --clean website: @echo "==> Starting website in Docker..." @docker run \ - --interactive \ - --rm \ + --interactive \ + --rm \ --tty \ --publish "4567:4567" \ --publish "35729:35729" \ --volume "$(shell pwd):/website" \ hashicorp/middleman-hashicorp:${VERSION} -.PHONY: website +.PHONY: build website diff --git a/website/config.rb b/website/config.rb index 6e2d25511..75ed314a8 100644 --- a/website/config.rb +++ b/website/config.rb @@ -26,17 +26,66 @@ helpers do # # @return [String] def description_for(page) - return escape_html(page.data.description || "") + description = (page.data.description || "") + .gsub('"', '') + .gsub(/\n+/, ' ') + .squeeze(' ') + + return escape_html(description) end # 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 == expected or (expected.is_a?(Regexp) and expected.match(current)) + if current.start_with?(expected) return " class=\"active\"" else return "" end end + + # Returns the id for this page. + # @return [String] + def body_id_for(page) + if !(name = page.data.sidebar_current).blank? + return "page-#{name.strip}" + end + if page.url == "/" || page.url == "/index.html" + return "page-home" + end + if !(title = page.data.page_title).blank? + return title + .downcase + .gsub('"', '') + .gsub(/[^\w]+/, '-') + .gsub(/_+/, '-') + .squeeze('-') + .squeeze(' ') + end + return "" + end + + # Returns the list of classes for this page. + # @return [String] + def body_classes_for(page) + classes = [] + + if !(layout = page.data.layout).blank? + classes << "layout-#{page.data.layout}" + end + + if !(title = page.data.page_title).blank? + title = title + .downcase + .gsub('"', '') + .gsub(/[^\w]+/, '-') + .gsub(/_+/, '-') + .squeeze('-') + .squeeze(' ') + classes << "page-#{title}" + end + + return classes.join(" ") + end end diff --git a/website/packer.json b/website/packer.json index b51f63801..35de63232 100644 --- a/website/packer.json +++ b/website/packer.json @@ -8,7 +8,7 @@ "builders": [ { "type": "docker", - "image": "hashicorp/middleman-hashicorp:0.3.13", + "image": "hashicorp/middleman-hashicorp:0.3.22", "discard": "true", "run_command": ["-d", "-i", "-t", "{{ .Image }}", "/bin/sh"] } diff --git a/website/source/404.html.erb b/website/source/404.html.erb deleted file mode 100644 index f49742d5d..000000000 --- a/website/source/404.html.erb +++ /dev/null @@ -1,11 +0,0 @@ ---- -layout: "inner" -noindex: true -page_title: "404" ---- - -

Page not found

- -

-Unfortunately, the page you requested can't be found. -

diff --git a/website/source/404.html.md b/website/source/404.html.md new file mode 100644 index 000000000..e99ce088b --- /dev/null +++ b/website/source/404.html.md @@ -0,0 +1,14 @@ +--- +layout: "inner" +page_title: "Not Found" +noindex: true +description: |- + Page not found! +--- + +# Page Not Found + +Sorry, the page you tried to visit does not exist. This could be our fault, +and if so we will fix that up right away. + +Please go back, or go back to get back on track. diff --git a/website/source/assets/images/logo-text.svg b/website/source/assets/images/logo-text.svg new file mode 100644 index 000000000..5ff7645c2 --- /dev/null +++ b/website/source/assets/images/logo-text.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/website/source/assets/javascripts/application.js b/website/source/assets/javascripts/application.js index bc70be7fb..ad181b4cc 100644 --- a/website/source/assets/javascripts/application.js +++ b/website/source/assets/javascripts/application.js @@ -1,29 +1,5 @@ //= require turbolinks //= 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 app/_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/_Sidebar -//= require app/_Init - -// assets/javascripts/application.js //= require hashicorp/mega-nav +//= require hashicorp/sidebar diff --git a/website/source/assets/stylesheets/_buttons.scss b/website/source/assets/stylesheets/_buttons.scss index c1f44435d..e1037e818 100755 --- a/website/source/assets/stylesheets/_buttons.scss +++ b/website/source/assets/stylesheets/_buttons.scss @@ -1,137 +1,37 @@ -// -// Button Styles -// -------------------------------------------------- - -.outline-btn{ - position: relative; - display: inline-block; - // Extra 3px of bottom padding compensates for ::after content - padding: 20px 30px 23px; - background-color: transparent; - color: $white; - border: 2px solid $white; - //border-radius: $btn-border-radius; - font-size: 20px; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 2px; - text-decoration: none !important; - @include transition(background-color .3s ease-in-out); - - &::after { - font-size: 1.2em; - content: "»"; - position: relative; - left: 5px; - } - - &.purple{ - color: $purple; - border: 2px solid $purple; - } - - &.small-outline-btn{ - font-size: 16px; - padding: 0px 15px 3px 10px; - letter-spacing: 0; - border: 2px solid rgba(255, 255, 255, .7); - } - - &:hover{ - color: $white; - background-color: rgba(255, 255, 255, .2); - @include transition(background-color .3s ease-in-out); - - &.purple{ - background-color: rgba(255, 255, 255, .5); - } - } -} - -.simple-btn{ - position: relative; - display: inline-block; - // Extra 3px of bottom padding compensates for ::after content - background-color: transparent; - color: $white; - font-size: 16px; - font-weight: 500; - text-transform: uppercase; - text-decoration: none !important; - @include transition(color .3s ease-in-out); - - &::after { - font-size: 1.2em; - content: "»"; - position: relative; - left: 5px; - } - - &:hover{ - color: rgba(255, 255, 255, .4); - @include transition(color .3s ease-in-out); - } -} - -.terra-btn{ - position: relative; - display: inline-block; - // Extra 3px of bottom padding compensates for ::after content - padding: 20px 30px 23px; - color: white; - background-color: $purple; - font-size: 20px; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 2px; - @include transition( background-color 0.3s ease ); - - &::after { - font-size: 1.2em; - content: "»"; - position: relative; - left: 5px; - } - - &:hover{ - color: white; - background-color: rgba(130, 47, 247, 0.8); - text-decoration: none; - @include transition( background-color 0.3s ease ); - } -} - -@media (max-width: 768px) { - .outline-btn, .terra-btn{ - font-size: 16px; - text-align: center; - } -} - -//animation on header main nav link hover -/*.li-under a::after { - position: absolute; - top: 68%; - left: 50%; - margin-left: -4px; - width: 6px; - height: 6px; - background-color: white; - content: ''; - opacity: 0; +.button { + background: $button-background; + border: 1px solid $button-font-color; + box-shadow: 3px 4px 0 rgba(0,0,0,0.1); + color: $button-font-color; + display: inline-block; + font-family: $button-font-family; + font-size: $button-font-size; + font-weight: $button-font-weight; + letter-spacing: 1px; + margin-bottom: 4px; + padding: 10px 30px; + text-transform: uppercase; text-decoration: none; - -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; - -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; - transition: height 0.3s, opacity 0.3s, transform 0.3s; - -webkit-transform: translateY(-10px); - -moz-transform: translateY(-10px); - transform: translateY(-10px); -} -.li-under a:hover::after, -.li-under a:focus::after { - opacity: 1; - -webkit-transform: skewY(15deg) translateY(10px); - -moz-transform: skewY(15deg) translateY(10px); - transform: skewY(15deg) translateY(10px); -}*/ + &:hover, + &:active, + &:focus { + text-decoration: none; + } + + &:hover { + background: $button-font-color; + border: 1px solid $button-font-color; + color: $button-background; + } + + &.primary { + background: $button-primary-background; + border: 1px solid darken($button-primary-background, 5%); + color: $button-primary-font-color; + + &:hover { + background: lighten($button-primary-background, 5%); + } + } +} diff --git a/website/source/assets/stylesheets/_community.scss b/website/source/assets/stylesheets/_community.scss index ff8c3412e..1ff047de6 100644 --- a/website/source/assets/stylesheets/_community.scss +++ b/website/source/assets/stylesheets/_community.scss @@ -1,21 +1,22 @@ -.people { +#inner { + .people { margin-top: 30px; .person { - margin-bottom: 40px; - min-height: 165px; // enough space for five lines of bio text + &:after { + display: block; + clear: both; + content: ' '; + } - h3 { - text-transform: none; - } + img { + width: 125px; + margin: auto auto; + } - img { - width: 125px; - margin: auto auto; - } - - .bio { - padding-left: 150px; - } + .bio { + padding-left: 150px; + } } + } } diff --git a/website/source/assets/stylesheets/_docs.scss b/website/source/assets/stylesheets/_docs.scss index 35f16eb60..64b250d4e 100755 --- a/website/source/assets/stylesheets/_docs.scss +++ b/website/source/assets/stylesheets/_docs.scss @@ -1,362 +1,100 @@ -// -// Docs -// -------------------------------------------------- - -body.page-sub{ - background-color: $light-black; -} - -body.layout-backend-types, -body.layout-commands-env, -body.layout-commands-state, -body.layout-alicloud, -body.layout-archive, -body.layout-arukas, -body.layout-atlas, -body.layout-aws, -body.layout-azure, -body.layout-bitbucket, -body.layout-chef, -body.layout-azurerm, -body.layout-circonus, -body.layout-clc, -body.layout-cloudflare, -body.layout-cloudstack, -body.layout-cobbler, -body.layout-consul, -body.layout-datadog, -body.layout-digitalocean, -body.layout-dme, -body.layout-dns, -body.layout-dnsimple, -body.layout-docker, -body.layout-dyn, -body.layout-external, -body.layout-github, -body.layout-grafana, -body.layout-fastly, -body.layout-google, -body.layout-heroku, -body.layout-ignition, -body.layout-icinga2, -body.layout-influxdb, -body.layout-kubernetes, -body.layout-librato, -body.layout-logentries, -body.layout-mailgun, -body.layout-mysql, -body.layout-newrelic, -body.layout-nomad, -body.layout-ns1, -body.layout-openstack, -body.layout-opsgenie, -body.layout-packet, -body.layout-pagerduty, -body.layout-postgresql, -body.layout-powerdns, -body.layout-profitbricks, -body.layout-rabbitmq, -body.layout-rancher, -body.layout-random, -body.layout-rundeck, -body.layout-scaleway, -body.layout-spotinst, -body.layout-statuscake, -body.layout-softlayer, -body.layout-template, -body.layout-tls, -body.layout-ultradns, -body.layout-triton, -body.layout-vault, -body.layout-vcd, -body.layout-vsphere, -body.layout-docs, -body.layout-downloads, -body.layout-inner, -body.layout-remotestate, -body.layout-terraform, -body.layout-intro{ - background: $light-black image-url('sidebar-wire.png') left 62px no-repeat; - - >.container{ - .col-md-8[role=main]{ - min-height: 800px; - background-color: white; - - >div{ - position: relative; - z-index: 10; - } - } - } -} - -.docs-sidebar{ - position: relative; - z-index: 20; +#docs-sidebar { margin-bottom: 30px; - margin-top: 50px; - margin-right: 4%; + margin-top: 50px; + overflow: hidden; - a{ - color: $purple; - } - - .docs-sidenav{ - padding-top: 15px; - padding-bottom: 15px; - font-family: $font-family-klavika; - font-size: 16px; - - :last-child{ - border-bottom: none; - } - - //all li > a - li{ - position: relative; - - > a{ - color: white; - @include transition( color 0.5s ease ); - } - - > a:hover, - > a:focus { - background-color: transparent !important; - color: white; - @include transition( color 0.5s ease ); - } - } - - - > li { - padding: 10px 0; - - >.nav{ - li{ - a{ - font-family: $font-family-open-sans; - color: white; - } - } - } - - &.active { - >a{ - color: lighten($purple, 4%); - font-weight: 600; - } - - &:before{ - content: ''; - position: absolute; - width: 6px; - height: 8px; - background-color: $purple; - font-weight: 500; - @include skewY(24deg); - top: 26px; - left: -10px; - } - > a{ - -webkit-font-smoothing: antialiased; - } - - .nav { - display: block; - - li.active a { - color: lighten($purple, 4%); - font-weight: 500; - } - } - } - - > a { - text-transform: uppercase; - letter-spacing: 1px; - -webkit-font-smoothing: antialiased; - } - } - - .nav { - display: none; - margin-bottom: 15px; - - > li{ - margin-left: 20px; - - > a{ - -webkit-font-smoothing: antialiased; - padding: 6px 15px; - } - } - } - - .nav-visible { - display: block; - } - } -} - -.bs-docs-section{ - @media(max-width: 767px){ - padding: 10px 5px 80px 5px; - } - @media(min-width: 768px){ - padding: 10px 20px 80px 20px; - } - - .lead{ - margin-bottom: 48px - } - - .doc-sectional{ - margin-bottom: 48px; - } - - p, li, .alert { - font-size: 18px; - line-height: 1.5; - margin: 0 0 18px; - -webkit-font-smoothing: antialiased; - } - - pre{ - margin: 0 0 18px; - } - - a{ - color: $purple; - &:hover{ - text-decoration: underline; - } - } - - img{ - max-width: 650px; - margin-top: 25px; - margin-bottom: 25px; - } - - h1{ - margin-top: 72px; - color: $purple; - font-weight: 400; - text-transform: uppercase; - letter-spacing: -1px; - word-wrap: break-word; - } - - h2, h3, h4{ - margin-top: 48px; - font-family: $font-family-open-sans; - text-transform: none; - } - - h2 { - margin-bottom: 16px; - padding-bottom: 10px; - border-bottom: 1px solid #eeeeee; - } - - p { - color: $light-black; - } - - #graph { + h1, + h2, + h3, + h4, + h5, + h6 { margin-top: 30px; - } -} -@media (max-width: 992px) { - body.layout-docs, - body.layout-inner, - body.layout-intro{ - >.container{ - .col-md-8[role=main]{ - min-height: 0; - &::before { - border-left: 9999px solid white; - } - } - } - } + a { + color: inherit; - body.page-sub{ - >.container{ - background-color: white; + &:hover, &:active, &:focus { + outline: 0; + text-decoration: underline; + } } } - .docs-sidebar{ - margin-top: 0px; - margin-bottom: 0px; + ul.nav.docs-sidenav { + display: block; + padding-bottom: 15px; - .docs-sidenav{ - padding-bottom: 0; + li { + a { + color: $sidebar-link-color; + font-size: $sidebar-font-size; + padding: 10px 0 10px 15px; - //all li > a - li{ - > a{ - color: black; - @include transition( color 0.5s ease ); + &:before { + color: $sidebar-link-color-active; + content: '\203A'; + font-size: $font-size; + left: 0; + line-height: 100%; + opacity: 0.4; + position: absolute; + + height: 100%; + width: 8px } - > a:hover, - > a:focus { - color: $purple; - @include transition( color 0.5s ease ); + &:focus, + &:hover { + background-color: transparent; + color: $sidebar-link-color-hover; + + &:before { + opacity: 1; + } } - } - - > li { - >.nav{ - li{ - a{ - color: black; - - &:hover{ - color: $purple; - } - } + &.back { + &:before { + content: '\2039'; } } } - } - } - .bs-docs-section{ - h1{ - font-size: 32px; - padding-top: 24px; - border-top: 1px solid #eeeeee; + // For forcing sub-navs to appear - in the long term, this should not + // be a thing anymore... + > ul.nav-visible { + display: block; + } } - h2 { - font-size: 24px; - } + li.active { + > a { + color: $sidebar-link-color-active; - h2, h3, h4{ - margin-top: 32px; - } - - p, li, .alert { - font-size: 16px; - } - } -} - -@media (max-width: 480px) { - .bs-docs-section{ - img{ - max-width: 450px; + &:before { + opacity: 1; } + } - h1{ - font-size: 28px; - } - } + // Open nested navigations + > ul.nav { + display: block; + } + } + + // subnav + ul.nav { + display: none; + margin: 10px; + + li { + margin-left: 10px; + + a { + padding: 6px 15px; + } + } + } + } } diff --git a/website/source/assets/stylesheets/_downloads.scss b/website/source/assets/stylesheets/_downloads.scss index be2187eaf..97a4dfc66 100644 --- a/website/source/assets/stylesheets/_downloads.scss +++ b/website/source/assets/stylesheets/_downloads.scss @@ -1,59 +1,60 @@ -.downloads { - margin-top: 20px; +body.layout-downloads { + #inner { + .downloads { + margin-top: 20px; - .description { + .description { margin-bottom: 20px; - } + } - .download { + .download { + align-items: center; border-bottom: 1px solid #b2b2b2; - padding-bottom: 15px; - margin-top: 10px; - margin-bottom: 10px; + display: flex; + padding: 15px; .details { - padding-left: 95px; + padding-left: 20px; - h2 { - margin-top: 30px; + h2 { + margin-top: 4px; + border: none; + } + + ul { + padding-left: 0px; + margin: -8px 0 0 0; + } + + li { + display: inline-block; + + &:after { + content: " | "; } - ul { - padding-left: 0px; - } - - li { - display: inline-block; - - &:after { - content: " | "; - } - - &:last-child:after { - content: ""; - } + &:last-child:after { + content: ""; } + } } .icon { - img { - width: 75px; - } + svg { + width: 75px; + } } .os-name { - font-size: 40px; - margin-bottom: -3px; + font-size: 40px; + margin-bottom: -3px; } - } + } - .poweredby { + .poweredby { margin-top: 20px; - - img { - display: block; - margin: 0 auto; - width: 122px; - } + text-align: center; + } } + } } diff --git a/website/source/assets/stylesheets/_footer.scss b/website/source/assets/stylesheets/_footer.scss index 2bf21204f..ae34a057a 100644 --- a/website/source/assets/stylesheets/_footer.scss +++ b/website/source/assets/stylesheets/_footer.scss @@ -1,98 +1,22 @@ -body.page-sub{ - #footer{ - padding: 40px 0; - margin-top: 0; +#footer { + padding-top: 50px; - .hashicorp-project{ - margin-top: 24px; - &:hover{ - svg{ - .svg-bg-line{ - opacity: .4; - } + ul.footer-links { + li { + a { + color: $footer-link-color; + font-size: $footer-font-size; + font-family: $font-family-open-sans; + text-decoration: none; + + &:hover, &:focus, &:active { + background-color: transparent; + color: $footer-link-color-hover; + outline: 0; } - } - } - } -} -#footer{ - background-color: white; - padding: 150px 0 80px; - margin-top: -40px; - - &.white{ - background-color: $black; - .footer-links{ - li > a { - @include project-footer-a-subpage-style(); - } - } - } - - .footer-links{ - li > a { - @include project-footer-a-style(); - } - } - - .hashicorp-project{ - margin-top: 24px; - } - - .pull-right{ - padding-right: 15px; - } -} - -.edit-page-link{ - position: absolute; - top: -70px; - right: 30px; - z-index: 9999; - - a{ - text-transform: uppercase; - color: $black; - font-size: 13px; - } -} - -@media (max-width: 992px) { - .footer-links { - display: block; - text-align: center; - - ul{ - display: inline-block;; - float: none !important; - } - - .footer-hashi{ - display: block; - float: none !important; - } - } -} - -@media (max-width: 414px) { - #footer{ - ul{ - display: block; - li{ - display: block; - float: none; - } - - &.external-links{ - li{ - svg{ - position: relative; - left: 0; - top: 2px; - margin-top: 0; - margin-right: 4px; - } + @media (max-width: 992px) { + text-align: center; } } } diff --git a/website/source/assets/stylesheets/_global.scss b/website/source/assets/stylesheets/_global.scss index f30bbff6d..3b69c05dd 100755 --- a/website/source/assets/stylesheets/_global.scss +++ b/website/source/assets/stylesheets/_global.scss @@ -1,117 +1,35 @@ -// -// Global Site -// -------------------------------------------------- - -/*html{ +html { + height: 100%; + min-height: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -}*/ +} body { - // -webkit-font-smoothing: subpixel-antialiased; - color: $black; - font-size: 15px; - font-family: $font-family-open-sans; - font-weight: 500; + -webkit-font-smoothing: antialiased; + color: $body-font-color; + background-color: $white; + font-size: $font-size; + font-family: $font-family-open-sans; + font-weight: $font-weight-reg; + height: 100%; + min-height: 100%; } h1, h2, h3, h4, h5 { - -webkit-font-smoothing: antialiased; - font-family: $font-family-klavika; - font-weight: 600; -} -h1{ - font-size: 42px; - line-height: 40px; - margin-bottom: 24px; - text-transform: uppercase; + font-family: $font-family-klavika; + -webkit-font-smoothing: antialiased; } -h2{ - font-size: 34px; - text-transform: uppercase; +h1 { + margin-bottom: 24px; } -h3{ - font-size: 20px; - line-height: 20px; - text-transform: uppercase; -} - -h4 { - font-size: 18px; -} - -p { - margin-bottom: 30px; - font-size: 16px; - font-weight: regular; - line-height: 1.5; -} - -p.lead{ - font-size: 21px; - font-weight: 400 !important; -} - -//an alternative color for buttons in the doc body -.btn-serf{ - color: $white !important; - background-color: $btn-color; - border-radius: $btn-border-radius; - //@include box-shadow( $shadow ); -} - -.highlight{ - margin-bottom: 18px; -} - -pre { - background-color: $black; - color: $white; - font-size: 14px; - font-weight: normal; - font-family: "Courier New", Monaco, Menlo, Consolas, monospace; - border: none; - padding: 20px; - margin-bottom: 0; -} - -// Typekit utilites to hide FOUC +// Avoid FOUT .wf-loading { visibility: hidden; } + .wf-active, .wf-inactive { visibility: visible; } - - -//fixed grid below 992 to prevent smaller responsive sizes -@media (max-width: 992px) { - .container{ - max-width: 970px; - } -} - -//all below styles are overriding corrections for below (min-width: 992px) -//below (min-width: 992px) these styles change -.navbar-nav { - margin: 0; -} - -.navbar-right { - float: right !important; -} - -.navbar-nav > li { - float: left; -} - -.navbar-nav > li > a { - padding-top: 15px; - padding-bottom: 15px; -} - -.center { - text-align: center; -} diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss index 310664235..dde70d7d6 100755 --- a/website/source/assets/stylesheets/_header.scss +++ b/website/source/assets/stylesheets/_header.scss @@ -1,57 +1,78 @@ -// -// Header -// - Project Specific -// - edits should be made here -// -------------------------------------------------- - -body.page-sub{ - #header{ - background-color: $purple; - } -} - #header { - .navbar-brand { - .logo{ - width: $project-logo-width; - height: $project-logo-height; - font-size: 0px; - font-family: $font-family-klavika; - background: image-url('logo-header.svg') 0 32% no-repeat; + background: $header-background-color; - &:hover{ - opacity: .6; + .navbar-toggle { + height: $header-height; + margin: 0; + padding-right: 15px; + border-radius: 0; + + .icon-bar { + border: 1px solid $white; + border-radius: 0; + } + } + + .navbar-brand { + display: block; + margin: 0; + padding: 0; + + a { + display: flex; + align-items: center; + height: $header-height; + line-height: $header-height; + + svg.logo { + transition: opacity 0.15s ease-in-out; + @extend svg.logo.white; + + &:hover, &:focus, &:active { + opacity: 0.6; + outline: 0; + text-decoration: none; + } } } + } - .by-hashicorp{ - margin-top: 2px; - &:hover{ - svg{ - .svg-bg-line{ - opacity: .4; + ul.nav { + li { + a { + color: $header-link-color; + font-size: $header-font-size; + font-family: $font-family-open-sans; + font-weight: $font-weight-bold; + height: $header-height; + line-height: $header-height; + padding: 0 10px; + margin: 0; + text-decoration: none; + + &:hover, &:focus, &:active { + background-color: transparent; + color: $header-link-color-hover; + outline: 0; + + svg { + fill: $header-link-color-hover; } } - } - } - } - .buttons{ - margin-top: 2px; //baseline everything - - ul.navbar-nav{ - li { - svg path{ - fill: $white; + svg { + fill: $header-link-color; + position: relative; + top: 2px; + width: 14px; + height: 14px; + margin-right: 3px; } } } } - .main-links, - .external-links { - li > a { - @include project-a-style(); - } + .buttons { + margin-top: 2px; } } diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss index 807a8b542..e57005766 100755 --- a/website/source/assets/stylesheets/_home.scss +++ b/website/source/assets/stylesheets/_home.scss @@ -14,10 +14,6 @@ body.page-home { color: $white; background: $black; z-index: 99; - - .terra-btn{ - margin-top: 30px; - } } .temp-skew { diff --git a/website/source/assets/stylesheets/_inner.scss b/website/source/assets/stylesheets/_inner.scss new file mode 100644 index 000000000..d20d71398 --- /dev/null +++ b/website/source/assets/stylesheets/_inner.scss @@ -0,0 +1,89 @@ +#inner { + p, li, .alert { + font-size: $font-size; + font-family: $font-family-open-sans; + font-weight: $font-weight-reg; + line-height: 1.84em; + margin: 0 0 $font-size; + -webkit-font-smoothing: antialiased; + } + + .alert p:last-child { + margin-bottom: 0; + } + + pre { + font-family: $font-family-monospace; + font-size: ($font-size - 3); + font-weight: normal; + padding: 20px; + margin: 0 0 $font-size; + + // This will force the code to scroll horizontally on small screens + // instead of wrapping. + code { + overflow-wrap: normal; + white-space: pre; + } + } + + a { + color: $body-link-color; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + + code { + background: inherit; + color: $body-link-color; + } + } + + img { + display: block; + margin: 25px auto; + max-width: 650px; + height: auto; + width: 90%; + } + + h1, + h2, + h3, + h4 { + color: $body-font-color; + margin-top: 54px; + margin-bottom: $font-size; + line-height: 1.3; + } + + h2 { + padding-bottom: 3px; + border-bottom: 1px solid $gray-light; + } + + h1 > code, + h2 > code, + h3 > code, + h4 > code, + h5 > code + h6 > code, + li code, + table code, + p code, + tt, + .alert code { + font-family: $font-family-monospace; + font-size: 90%; + background-color: transparent; + color: inherit; + padding: 0; + } + + table { + @extend .table; + @extend .table-striped; + } +} diff --git a/website/source/assets/stylesheets/_logos.scss b/website/source/assets/stylesheets/_logos.scss new file mode 100644 index 000000000..6e8f39a48 --- /dev/null +++ b/website/source/assets/stylesheets/_logos.scss @@ -0,0 +1,41 @@ +svg.logo { + &.color { + opacity: 1.0; + + path.text { + fill: $black; + opacity: 1.0; + } + + path.rect-light { + fill: $terraform-purple; + opacity: 1.0; + } + + path.rect-dark { + fill: $terraform-purple-dark; + opacity: 1.0; + } + } + + // The default logo class is the colored version + @extend .color; + + &.white { + opacity: 1.0; + + path.text { + fill: $white; + } + + path.rect-light { + fill: $white; + opacity: 1.0; + } + + path.rect-dark { + fill: $white; + opacity: 0.7; + } + } +} diff --git a/website/source/assets/stylesheets/_mixins.scss b/website/source/assets/stylesheets/_mixins.scss deleted file mode 100755 index f49151e3a..000000000 --- a/website/source/assets/stylesheets/_mixins.scss +++ /dev/null @@ -1,724 +0,0 @@ -// -// Mixins -// -------------------------------------------------- - - -// Utilities -// ------------------------- - -// Clearfix -// Source: http://nicolasgallagher.com/micro-clearfix-hack/ -// -// For modern browsers -// 1. The space content is one way to avoid an Opera bug when the -// contenteditable attribute is included anywhere else in the document. -// Otherwise it causes space to appear at the top and bottom of elements -// that are clearfixed. -// 2. The use of `table` rather than `block` is only necessary if using -// `:before` to contain the top-margins of child elements. -@mixin clearfix() { - &:before, - &:after { - content: " "; /* 1 */ - display: table; /* 2 */ - } - &:after { - clear: both; - } -} - -// Webkit-style focus -@mixin tab-focus() { - // Default - outline: thin dotted #333; - // Webkit - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - -// Center-align a block level element -@mixin center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} - -// Sizing shortcuts -@mixin size($width, $height) { - width: $width; - height: $height; -} -@mixin square($size) { - @include size($size, $size); -} - -// Placeholder text -@mixin placeholder($color: $input-color-placeholder) { - &:-moz-placeholder { color: $color; } // Firefox 4-18 - &::-moz-placeholder { color: $color; } // Firefox 19+ - &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+ - &::-webkit-input-placeholder { color: $color; } // Safari and Chrome -} - -// Text overflow -// Requires inline-block or block for proper styling -@mixin text-overflow() { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -// CSS image replacement -// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 -@mixin hide-text() { - font: #{"0/0"} a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} - - - -// CSS3 PROPERTIES -// -------------------------------------------------- - -// Single side border-radius -@mixin border-top-radius($radius) { - border-top-right-radius: $radius; - border-top-left-radius: $radius; -} -@mixin border-right-radius($radius) { - border-bottom-right-radius: $radius; - border-top-right-radius: $radius; -} -@mixin border-bottom-radius($radius) { - border-bottom-right-radius: $radius; - border-bottom-left-radius: $radius; -} -@mixin border-left-radius($radius) { - border-bottom-left-radius: $radius; - border-top-left-radius: $radius; -} - -// Drop shadows -@mixin box-shadow($shadow) { - -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 - box-shadow: $shadow; -} - -// Transitions -@mixin transition($transition) { - -webkit-transition: $transition; - transition: $transition; -} -@mixin transition-delay($transition-delay) { - -webkit-transition-delay: $transition-delay; - transition-delay: $transition-delay; -} -@mixin transition-duration($transition-duration) { - -webkit-transition-duration: $transition-duration; - transition-duration: $transition-duration; -} -@mixin transition-transform($transition) { - -webkit-transition: -webkit-transform $transition; - -moz-transition: -moz-transform $transition; - -o-transition: -o-transform $transition; - transition: transform $transition; -} - -// Transformations -@mixin rotate($degrees) { - -webkit-transform: rotate($degrees); - -ms-transform: rotate($degrees); // IE9+ - transform: rotate($degrees); -} -@mixin scale($ratio) { - -webkit-transform: scale($ratio); - -ms-transform: scale($ratio); // IE9+ - transform: scale($ratio); -} -@mixin translate($x, $y) { - -webkit-transform: translate($x, $y); - -ms-transform: translate($x, $y); // IE9+ - transform: translate($x, $y); -} -@mixin skew($x, $y) { - -webkit-transform: skew($x, $y); - -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ - transform: skew($x, $y); -} -@mixin translate3d($x, $y, $z) { - -webkit-transform: translate3d($x, $y, $z); - transform: translate3d($x, $y, $z); -} - -// Backface visibility -// Prevent browsers from flickering when using CSS 3D transforms. -// Default value is `visible`, but can be changed to `hidden` -// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples -@mixin backface-visibility($visibility) { - -webkit-backface-visibility: $visibility; - -moz-backface-visibility: $visibility; - backface-visibility: $visibility; -} - -// Box sizing -@mixin box-sizing($boxmodel) { - -webkit-box-sizing: $boxmodel; - -moz-box-sizing: $boxmodel; - box-sizing: $boxmodel; -} - -// User select -// For selecting text on the page -@mixin user-select($select) { - -webkit-user-select: $select; - -moz-user-select: $select; - -ms-user-select: $select; // IE10+ - -o-user-select: $select; - user-select: $select; -} - -// Resize anything -@mixin resizable($direction) { - resize: $direction; // Options: horizontal, vertical, both - overflow: auto; // Safari fix -} - -// CSS3 Content Columns -@mixin content-columns($column-count, $column-gap: $grid-gutter-width) { - -webkit-column-count: $column-count; - -moz-column-count: $column-count; - column-count: $column-count; - -webkit-column-gap: $column-gap; - -moz-column-gap: $column-gap; - column-gap: $column-gap; -} - -// Optional hyphenation -@mixin hyphens($mode: auto) { - word-wrap: break-word; - -webkit-hyphens: $mode; - -moz-hyphens: $mode; - -ms-hyphens: $mode; // IE10+ - -o-hyphens: $mode; - hyphens: $mode; -} - -// Opacity -@mixin opacity($opacity) { - opacity: $opacity; - // IE8 filter - $opacity-ie: ($opacity * 100); - filter: #{"alpha(opacity=#{opacity-ie})"}; -} - - - -// GRADIENTS -// -------------------------------------------------- - -#gradient { - - // Horizontal gradient, from left to right - // - // Creates two color stops, start and end, by specifying a color and position for each color stop. - // Color stops are not available in IE9 and below. - @mixin horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { - background-image: -webkit-gradient(linear, $start-percent top, $end-percent top, from($start-color), to($end-color)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1+, Chrome 10+ - background-image: -moz-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // FF 3.6+ - background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10 - background-repeat: repeat-x; - filter: 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. `