diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 00000000000..fcab0b2569f
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+custom: paypal.me/PhlowMedia
+patreon: phlow
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
diff --git a/.gitignore b/.gitignore
index 0c3e5abb0b8..4276cbb4a1e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,7 @@
-_site/
-.sass-cache/
+_site
+.bundle
+.DS_Store
+.jekyll-cache
+.jekyll-metadata
+.sass-cache
+Gemfile.lock
diff --git a/.jekyll-metadata b/.jekyll-metadata
deleted file mode 100644
index beefda1ae32..00000000000
Binary files a/.jekyll-metadata and /dev/null differ
diff --git a/.ruby-version b/.ruby-version
new file mode 100644
index 00000000000..818bd47abfc
--- /dev/null
+++ b/.ruby-version
@@ -0,0 +1 @@
+3.0.6
diff --git a/Gemfile b/Gemfile
index 4486bb9ea20..ed0956460e9 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,4 +1,13 @@
source 'https://rubygems.org'
gem 'jekyll'
-gem 'jekyll-paginate'
\ No newline at end of file
+
+group :jekyll_plugins do
+ gem 'jekyll-gist'
+ gem 'jekyll-paginate'
+ gem "jekyll-asciidoc"
+end
+
+gem 'asciidoctor', '~> 1.5.4'
+gem 'coderay', '1.1.1'
+
diff --git a/Gemfile.lock b/Gemfile.lock
index 3a82675224f..5d0732b30e2 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,38 +1,100 @@
GEM
remote: https://rubygems.org/
specs:
- colorator (0.1)
- ffi (1.9.10)
- jekyll (3.0.0)
- colorator (~> 0.1)
- jekyll-sass-converter (~> 1.0)
- jekyll-watch (~> 1.1)
- kramdown (~> 1.3)
- liquid (~> 3.0)
- mercenary (~> 0.3.3)
- rouge (~> 1.7)
+ addressable (2.8.5)
+ public_suffix (>= 2.0.2, < 6.0)
+ asciidoctor (1.5.8)
+ coderay (1.1.1)
+ colorator (1.1.0)
+ concurrent-ruby (1.2.2)
+ em-websocket (0.5.3)
+ eventmachine (>= 0.12.9)
+ http_parser.rb (~> 0)
+ eventmachine (1.2.7)
+ faraday (2.7.10)
+ faraday-net_http (>= 2.0, < 3.1)
+ ruby2_keywords (>= 0.0.4)
+ faraday-net_http (3.0.2)
+ ffi (1.15.5)
+ forwardable-extended (2.6.0)
+ google-protobuf (3.23.4-arm64-darwin)
+ google-protobuf (3.23.4-x86_64-linux)
+ http_parser.rb (0.8.0)
+ i18n (1.14.1)
+ concurrent-ruby (~> 1.0)
+ jekyll (4.3.2)
+ addressable (~> 2.4)
+ colorator (~> 1.0)
+ em-websocket (~> 0.5)
+ i18n (~> 1.0)
+ jekyll-sass-converter (>= 2.0, < 4.0)
+ jekyll-watch (~> 2.0)
+ kramdown (~> 2.3, >= 2.3.1)
+ kramdown-parser-gfm (~> 1.0)
+ liquid (~> 4.0)
+ mercenary (>= 0.3.6, < 0.5)
+ pathutil (~> 0.9)
+ rouge (>= 3.0, < 5.0)
safe_yaml (~> 1.0)
+ terminal-table (>= 1.8, < 4.0)
+ webrick (~> 1.7)
+ jekyll-asciidoc (3.0.0)
+ asciidoctor (>= 1.5.0)
+ jekyll (>= 3.0.0)
+ jekyll-gist (1.5.0)
+ octokit (~> 4.2)
jekyll-paginate (1.1.0)
- jekyll-sass-converter (1.3.0)
- sass (~> 3.2)
- jekyll-watch (1.3.0)
+ jekyll-sass-converter (3.0.0)
+ sass-embedded (~> 1.54)
+ jekyll-watch (2.2.1)
listen (~> 3.0)
- kramdown (1.9.0)
- liquid (3.0.6)
- listen (3.0.3)
- rb-fsevent (>= 0.9.3)
- rb-inotify (>= 0.9)
- mercenary (0.3.5)
- rb-fsevent (0.9.6)
- rb-inotify (0.9.5)
- ffi (>= 0.5.0)
- rouge (1.10.1)
- safe_yaml (1.0.4)
- sass (3.4.19)
+ kramdown (2.4.0)
+ rexml
+ kramdown-parser-gfm (1.1.0)
+ kramdown (~> 2.0)
+ liquid (4.0.4)
+ listen (3.8.0)
+ rb-fsevent (~> 0.10, >= 0.10.3)
+ rb-inotify (~> 0.9, >= 0.9.10)
+ mercenary (0.4.0)
+ octokit (4.25.1)
+ faraday (>= 1, < 3)
+ sawyer (~> 0.9)
+ pathutil (0.16.2)
+ forwardable-extended (~> 2.6)
+ public_suffix (5.0.3)
+ rb-fsevent (0.11.2)
+ rb-inotify (0.10.1)
+ ffi (~> 1.0)
+ rexml (3.3.3)
+ strscan
+ rouge (4.1.3)
+ ruby2_keywords (0.0.5)
+ safe_yaml (1.0.5)
+ sass-embedded (1.64.2-arm64-darwin)
+ google-protobuf (~> 3.23)
+ sass-embedded (1.64.2-x86_64-linux-gnu)
+ google-protobuf (~> 3.23)
+ sawyer (0.9.2)
+ addressable (>= 2.3.5)
+ faraday (>= 0.17.3, < 3)
+ strscan (3.1.0)
+ terminal-table (3.0.2)
+ unicode-display_width (>= 1.1.1, < 3)
+ unicode-display_width (2.4.2)
+ webrick (1.8.1)
PLATFORMS
- ruby
+ arm64-darwin-22
+ x86_64-linux
DEPENDENCIES
+ asciidoctor (~> 1.5.4)
+ coderay (= 1.1.1)
jekyll
+ jekyll-asciidoc
+ jekyll-gist
jekyll-paginate
+
+BUNDLED WITH
+ 2.4.18
diff --git a/README.md b/README.md
index 5dca78c75e8..95fba45685e 100644
--- a/README.md
+++ b/README.md
@@ -1,24 +1,11 @@
-[](https://flattr.com/submit/auto?user_id=Phlow&url=https://github.com/Phlow/feeling-responsive&title=Support%20Feeling%20Responsive%20Jekyll%20Theme&language=en_GB&tags=github,jekyll,theme,webdesign&category=software)
-
-
-# Newsletter: Stay in Touch for Future Updates
-
-If you are a webdesigner interested in Jekyll, the static website generator, this little newsletter is for you. I share tutorials, clever code snippets and information about my own Jekyll Themes called [*Feeling Responsive*][7] and [*Simplicity*][8]. Please don't expect weekly emails :)
-
-[](https://tinyletter.com/feeling-responsive)
-
-
-[](https://www.youtube.com/embed/3b5zCFSmVvU)
+## You like and use this theme? Then support me. Just [paypal.me/PhlowMedia](https://www.paypal.me/PhlowMedia) :)
## A Responsive Jekyll Theme: *Feeling Responsive*
-Do you want to get to know *Feeling Responsive*? Than check it out first and have a look on its home at
Created with ♥ by Phlow with Jekyll based on Feeling Responsive.
' # Main author of the website # See > authors.yml @@ -24,8 +25,8 @@ author: phlow # This URL is the main address for absolute links. Don't include a slash at the end. # -url: 'https://phlow.github.io/feeling-responsive' -baseurl: '' +url: 'https://phlow.github.io' +baseurl: '/feeling-responsive' # This is for the editing function in _/includes/improve_content # Leave it empty if your site is not on GitHub/GitHub Pages @@ -43,6 +44,12 @@ urlimg: 'https://phlow.github.io/feeling-responsive/images/' # Logo size is 600x80 pixels logo: "logo.png" +# Plugins +plugins: + - jekyll-asciidoc + - jekyll-gist + - jekyll-paginate + # ____ _ __ _ # / __ \____ _____ _(_)___ ____ _/ /_(_)___ ____ @@ -51,19 +58,16 @@ logo: "logo.png" # /_/ \__,_/\__, /_/_/ /_/\__,_/\__/_/\____/_/ /_/ # /____/ # -gems: [jekyll-paginate] paginate: 5 # Paginates all X entries paginate_path: "blog/page:num" # Pagination path › Important for blog page in /blog/ to work - - # Theme works best with Kramdown (using the table of contents function) -markdown: kramdown -permalink: /:categories/:title/ -highlight: rouge -excerpt_separator: "" -include: ['.htaccess'] +markdown : kramdown +permalink : /:categories/:title/ +highlight : rouge +excerpt_separator : "" +include : ['.htaccess'] # Exclude these files from your production _site exclude: - .sass-cache @@ -72,10 +76,11 @@ exclude: - LICENSE - README.md - INSTALL.md + - vendor # The language setting is used in /includes/header.html for html-settings -language: "en" +language: 'en' # Used › default.html front-matter and compress.html @@ -101,8 +106,8 @@ compress_html: defaults: - scope: - path: "" # an empty string here means all files in the project - type: "pages" + path: '' # an empty string here means all files in the project + type: 'pages' values: show_meta: false # Hide metadata for all pages # sidebar: # Possible values › left, right › by default there will be no sidebar @@ -110,8 +115,8 @@ defaults: author: phlow # Default author for pages - scope: - path: "" - type: "posts" + path: '' + type: 'posts' values: show_meta: true # Show metadata for all posts # sidebar: # Possible values › left, right › by default there will be no sidebar @@ -138,10 +143,10 @@ defaults: # ___/ / /___/ /_/ / # /____/_____/\____/ Verify Website to Webmaster Tools -google_author: "https://plus.google.com/u/0/118311555303973066167" -google_site_verification: "Vk0IOJ2jwG_qEoG7fuEXYqv0m2rLa8P778Fi_GrsgEQ" -bing_webmastertools_id: "0FB4C028ABCF07C908C54386ABD2D97F" -# alexa_verify_id: "" +google_site_verification : 'Vk0IOJ2jwG_qEoG7fuEXYqv0m2rLa8P778Fi_GrsgEQ' +bing_webmastertools_id : '0FB4C028ABCF07C908C54386ABD2D97F' +# yandex_site_verification : '' +# alexa_verify_id : '' @@ -152,18 +157,18 @@ bing_webmastertools_id: "0FB4C028ABCF07C908C54386ABD2D97F" # /_/ \__,_/ |___/_/\___/\____/_/ /_/____/ Favicon-Crap: Favicons, Chrome, Android & Apple Touch Buttons # More information » https://mathiasbynens.be/notes/touch-icons -favicon-32x32: "favicon-32x32.png" -touch-icon-192x192: "touch-icon-192x192.png" -apple-touch-icon-180x180-precomposed: "apple-touch-icon-180x180-precomposed.png" -apple-touch-icon-152x152-precomposed: "apple-touch-icon-152x152-precomposed.png" -apple-touch-icon-144x144-precomposed: "apple-touch-icon-144x144-precomposed.png" -apple-touch-icon-120x120-precomposed: "apple-touch-icon-120x120-precomposed.png" -apple-touch-icon-114x114-precomposed: "apple-touch-icon-114x114-precomposed.png" -apple-touch-icon-76x76-precomposed: "apple-touch-icon-76x76-precomposed.png" -apple-touch-icon-72x72-precomposed: "apple-touch-icon-72x72-precomposed.png" -apple-touch-icon-precomposed: "apple-touch-icon-precomposed.png" -msapplication_tileimage: "msapplication_tileimage.png" # Size 144x144 -msapplication_tilecolor: "#fabb00" +favicon-32x32 : 'favicon-32x32.png' +touch-icon-192x192 : 'touch-icon-192x192.png' +apple-touch-icon-180x180-precomposed : 'apple-touch-icon-180x180-precomposed.png' +apple-touch-icon-152x152-precomposed : 'apple-touch-icon-152x152-precomposed.png' +apple-touch-icon-144x144-precomposed : 'apple-touch-icon-144x144-precomposed.png' +apple-touch-icon-120x120-precomposed : 'apple-touch-icon-120x120-precomposed.png' +apple-touch-icon-114x114-precomposed : 'apple-touch-icon-114x114-precomposed.png' +apple-touch-icon-76x76-precomposed : 'apple-touch-icon-76x76-precomposed.png' +apple-touch-icon-72x72-precomposed : 'apple-touch-icon-72x72-precomposed.png' +apple-touch-icon-precomposed : 'apple-touch-icon-precomposed.png' +msapplication_tileimage : 'msapplication_tileimage.png' # Size 144x144 +msapplication_tilecolor : '#fabb00' # ______ __ __ @@ -172,13 +177,9 @@ msapplication_tilecolor: "#fabb00" # / __/ / /_/ / /__/ __/ /_/ / /_/ / /_/ / ,< # /_/ \__,_/\___/\___/_.___/\____/\____/_/|_| Facebook-Optimization › http://j.mp/fb_optimize -og_image: "http://images.phlow.de/phlow/phlow_de-logo-512x.png" -og_locale: "en_EN" -og_type: "website" -og_title: "Feeling Responsive – A Responsive Theme for Jekyll" -og_description: "Feeling Responsive is built on the fabulous Foundation Framework and comes with lots of features to show your content right." -# og_url: "" -# og_site_name: "" +og_image : 'http://images.phlow.de/phlow/phlow_de-logo-512x.png' +og_locale : 'en_EN' +og_type : 'website' # _____ _ __ __ ___ ___ @@ -190,6 +191,10 @@ og_description: "Feeling Responsive is built on the fabulous # Open _data/socialmedia.yml to adjust the left and right topbar navigation # +socialmedia: + twitter : phlow + facebook : phlow.media + # ____ _ # / __ \(_)________ ___ _______ @@ -200,7 +205,7 @@ og_description: "Feeling Responsive is built on the fabulous # # used in _includes/comments -disqus_shortname: feelingresponsive +# disqus_shortname: # _____ @@ -211,8 +216,8 @@ disqus_shortname: feelingresponsive # sass: - sass_dir: _sass - style: :compressed + sass_dir : _sass + style : :compressed # ___ __ __ _ @@ -224,7 +229,7 @@ sass: # # used in _includes/footer_scripts -google_analytics_tracking_id: UA-60112281-1 +# google_analytics_tracking_id: @@ -242,3 +247,26 @@ google_analytics_tracking_id: UA-60112281-1 # used in _includes/footer_scripts # tawkto_embed_uri: + + +# ___ _ __ __ +# / | __________(_)___/ /___ _____/ /_____ _____ +# / /| | / ___/ ___/ / __ / __ \/ ___/ __/ __ \/ ___/ +# / ___ |(__ ) /__/ / /_/ / /_/ / /__/ /_/ /_/ / / +# /_/ |_/____/\___/_/\__,_/\____/\___/\__/\____/_/ +# +# Asciidoctor is a fast text processor and publishing toolchain for converting +# AsciiDoc content to HTML5, DocBook 5 (or 4.5) and other formats. +# +# https://github.com/asciidoctor/jekyll-asciidoc +# https://github.com/asciidoctor +# +# + +asciidoctor-enabled: false +asciidoctor: + description: + attributes: + source-highlighter: coderay + coderay-css: style + icons: font diff --git a/_config_dev.yml b/_config_dev.yml index 7b23c13084c..e8d645bb32c 100644 --- a/_config_dev.yml +++ b/_config_dev.yml @@ -5,9 +5,13 @@ # # Start development with › $ jekyll serve --config _config.yml,_config_dev.yml -url: 'http://localhost:4000' -urlimg: 'http://localhost:4000/images/' -gems: [jekyll-paginate] +url: 'http://localhost:4000' +baseurl: '' +urlimg: 'http://localhost:4000/images/' + +# See › https://github.com/jekyll/jekyll-gist#disabling-noscript-support +gist: + noscript: false sass: # http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style @@ -16,7 +20,7 @@ sass: # trace_selectors: true # debug_info: true # FUTURE https://github.com/jekyll/jekyll-sass-converter/issues/12 - sourcemap: true + # sourcemap: true # Produces an error # Disable when not in production -google_analytics_tracking_id: +google_analytics_tracking_id: false diff --git a/_data/navigation.yml b/_data/navigation.yml index 0b75f6b1a18..749b176677d 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -13,7 +13,7 @@ - title: "Grid & Colors" url: "/design/grid/" - title: "Typography" - url: "/design/typography/" + url: "/design/typography/typography/" - title: "Page/Post" url: "/design/page/" - title: "Post-Left-Sidebar" diff --git a/_drafts/page_all_frontmatter.md b/_drafts/page_all_frontmatter.md index 2ef6801fcb1..4c6fc7f2123 100644 --- a/_drafts/page_all_frontmatter.md +++ b/_drafts/page_all_frontmatter.md @@ -30,11 +30,11 @@ image: caption: caption_url: style: # Adding additional CSS-styles to -iframe: "" +iframe: '' video: - embedURL: "" - contentURL: "" - thumbnailUrl: "" + embedURL: '' + contentURL: '' + thumbnailUrl: '' # # Metainformation & Customization # diff --git a/_includes/_breadcrumb.html b/_includes/_breadcrumb.html index fc3074d57de..fde80a3a35a 100644 --- a/_includes/_breadcrumb.html +++ b/_includes/_breadcrumb.html @@ -1,17 +1,17 @@ {% comment %} -* +* * http://stackoverflow.com/questions/9612235/what-are-some-good-ways-to-implement-breadcrumbs-on-a-jekyll-site -* +* {% endcomment %} diff --git a/_includes/_favicon.html b/_includes/_favicon.html index 0fcfe352b91..4161f8b36a8 100644 --- a/_includes/_favicon.html +++ b/_includes/_favicon.html @@ -1,77 +1,30 @@ {% comment %} -* +* * More Information › https://mathiasbynens.be/notes/touch-icons -* +* {% endcomment %} - - -{% if site.favicon-32x32 %} - {% comment %} Regular Old-Skool Favicon: {% endcomment %} - -{% endif %} - - -{% if site.touch-icon-192x192 %} - {% comment %} For Chrome for Android: {% endcomment %} - -{% endif %} - - -{% if site.apple-touch-icon-180x180-precomposed %} - {% comment %} For iPhone 6 Plus with @3× display: {% endcomment %} - -{% endif %} - - -{% if site.apple-touch-icon-152x152-precomposed %} - {% comment %} For iPad with @2× display running iOS ≥ 7: {% endcomment %} - -{% endif %} - - -{% if site.apple-touch-icon-144x144-precomposed %} - {% comment %} For iPad with @2× display running iOS ≤ 6: {% endcomment %} - -{% endif %} - - -{% if site.apple-touch-icon-120x120-precomposed %} - {% comment %} For iPhone with @2× display running iOS ≥ 7: {% endcomment %} - -{% endif %} - - -{% if site.apple-touch-icon-114x114-precomposed %} - {% comment %} For iPhone with @2× display running iOS ≤ 6: {% endcomment %} - -{% endif %} - - -{% if site.apple-touch-icon-76x76-precomposed %} - {% comment %} For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: {% endcomment %} - -{% endif %} - - -{% if site.apple-touch-icon-72x72-precomposed %} - {% comment %} For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: {% endcomment %} - -{% endif %} - - -{% if site.apple-touch-icon-precomposed %} - {% comment %} For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: {% endcomment %} - {% comment %} 57×57px {% endcomment %} -{% endif %} - - -{% if site.msapplication_tileimage %} - {% comment %} Favicon for Windows 8 {% endcomment %} - -{% endif %} - - -{% if site.msapplication_tilecolor %} - {% comment %} Background Color for Tile for Windows 8 {% endcomment %} - -{% endif %} +{% comment %} Regular Old-Skool Favicon: {% endcomment %} + {% if site.favicon-32x32 %}{% endif %} +{% comment %} For Chrome for Android: {% endcomment %} + {% if site.touch-icon-192x192 %}{% endif %} +{% comment %} For iPhone 6 Plus with @3× display: {% endcomment %} + {% if site.apple-touch-icon-180x180-precomposed %}{% endif %} +{% comment %} For iPad with @2× display running iOS ≥ 7: {% endcomment %} + {% if site.apple-touch-icon-152x152-precomposed %}{% endif %} +{% comment %} For iPad with @2× display running iOS ≤ 6: {% endcomment %} + {% if site.apple-touch-icon-144x144-precomposed %}{% endif %} +{% comment %} For iPhone with @2× display running iOS ≥ 7: {% endcomment %} + {% if site.apple-touch-icon-120x120-precomposed %}{% endif %} +{% comment %} For iPhone with @2× display running iOS ≤ 6: {% endcomment %} + {% if site.apple-touch-icon-114x114-precomposed %}{% endif %} +{% comment %} For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: {% endcomment %} + {% if site.apple-touch-icon-76x76-precomposed %} + {% endif %} +{% comment %} For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: {% endcomment %} + {% if site.apple-touch-icon-72x72-precomposed %}{% endif %} +{% comment %} For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: {% endcomment %} + {% if site.apple-touch-icon-precomposed %}{% comment %} 57×57px {% endcomment %} {% endif %} +{% comment %} Favicon for Windows 8 {% endcomment %} + {% if site.msapplication_tileimage %}{% endif %} +{% comment %} Background Color for Tile for Windows 8 {% endcomment %} + {% if site.msapplication_tilecolor %}{% endif %} diff --git a/_includes/_footer.html b/_includes/_footer.html index 3f6ed3a1902..c5676881eff 100755 --- a/_includes/_footer.html +++ b/_includes/_footer.html @@ -27,7 +27,7 @@
- Website: Nixdorf Internatsberatung & Schulberatung
+
+ Website: Grafik Design Jeannette Corneille
- Website: Praxis für psychologische Psychotherapie Simone Schriefer
+
+ Website: Webdesign, SEO, Music
, so shift padding
+.listingblock pre.highlightjs {
+ padding: 0px;
+ & > code {
+ padding: $pre-padding;
+ // FIXME make border radius on listing blocks configurable!
+ @include radius;
+ }
+}
+
+@if not $pre-border-size {
+ .listingblock pre.prettyprint {
+ border-width: 0;
+ }
+}
+
+.listingblock > .content {
+ // give floating language text a place to drop anchor
+ position: relative;
+}
+
+.listingblock code[data-lang]:before {
+ display: none;
+ content: attr(data-lang);
+ position: absolute;
+ font-size: emCalc(12px);
+ //top: 0.5rem; // 0.67em
+ top: 0.425rem;
+ right: 0.5rem; // 0.67em
+ line-height: 1;
+ text-transform: uppercase;
+ color: $text-color;
+}
+
+.listingblock:hover code[data-lang]:before {
+ display: block;
+}
+
+.listingblock.terminal pre .command:before {
+ content: attr(data-prompt);
+ padding-right: 0.5em;
+ color: #999;
+}
+
+.listingblock.terminal pre .command:not([data-prompt]):before {
+ content: "$";
+}
+
+// overrides for Pygments default styles
+table.pyhltable {
+ border-collapse: separate;
+ border: 0;
+ margin-bottom: 0;
+ background: none;
+}
+
+table.pyhltable td {
+ vertical-align: top;
+ padding-top: 0;
+ padding-bottom: 0;
+ line-height: $pre-line-height;
+}
+
+table.pyhltable td.code {
+ padding-left: .75em;
+ padding-right: 0;
+}
+
+// QUESTION can't td:not(.code) be written as td.linenos?
+pre.pygments .lineno,
+table.pyhltable td:not(.code) {
+ color: #999;
+ padding-left: 0;
+ padding-right: .5em;
+ border-right: 1px solid $hr-border-color;
+}
+
+pre.pygments .lineno {
+ display: inline-block;
+ margin-right: .25em;
+}
+
+table.pyhltable .linenodiv {
+ background: none !important;
+ padding-right: 0 !important;
+}
+
+// TODO
+// - add centered option using margin-left: auto; margin-right: auto; padding-left: 1.5em;
+.quoteblock {
+ margin: 0 1em $paragraph-margin-bottom 1.5em;
+ display: table; // enables auto width
+ & > .title {
+ margin-left: -1.5em;
+ margin-bottom: 0.75em;
+ }
+
+ blockquote, blockquote p {
+ color: $blockquote-font-color;
+ font-size: 1.15rem;
+ line-height: 1.75;
+ word-spacing: 0.1em;
+ //letter-spacing: 0;
+ font-style: italic;
+ text-align: justify;
+ }
+
+ blockquote {
+ padding: 0;
+ border: 0;
+ font-style: italic;
+
+ &:before {
+ content:"\00BB";
+ font-size:80px;
+ line-height: 0;
+ position:absolute;
+ left: -50px;
+ top: auto;
+ color: $grey-11;
+ }
+
+ &:after {
+ content: "\00AB";
+ font-size:80px;
+ line-height: 0;
+ position:absolute;
+ right: -50px;
+ }
+
+ & > .paragraph:last-child p {
+ margin-bottom: 0;
+ }
+ }
+
+ .attribution {
+ //margin-top: 0.5rem;
+ margin-top: 0.5em;
+ margin-right: 0.5ex;
+ text-align: left;
+ }
+
+ .quoteblock {
+ margin-left: 0;
+ margin-right: 0;
+ padding: 0.5em 0;
+ border-left: 3px solid $blockquote-cite-font-color;
+
+ blockquote {
+ padding: 0 0 0 0.75em;
+ &:before {
+ display: none;
+ }
+ }
+ }
+}
+
+.verseblock {
+ //margin: 0 0.5em $paragraph-margin-bottom 0.5em;
+ margin: 0 1em $paragraph-margin-bottom 1em;
+ pre {
+ // FIXME make me a variable
+ font-family: "Open Sans", "DejaVu Sans", sans;
+ font-size: 1.15rem;
+ color: $blockquote-font-color;
+ background-color: transparent;
+ padding: 0px;
+ border: none;
+ overflow: initial;
+ font-weight: 300;
+ text-rendering: optimizeLegibility;
+ strong {
+ font-weight: 400;
+ }
+ }
+
+ .attribution {
+ margin-top: 1.25rem;
+ margin-left: 0.5ex;
+ }
+}
+
+.quoteblock,
+.verseblock {
+ .attribution {
+ font-size: $blockquote-cite-font-size;
+ line-height: 1.45;
+ font-style: italic;
+ br {
+ display: none;
+ }
+ cite {
+ display: block;
+ //letter-spacing: -0.05em;
+ //letter-spacing: -0.025em;
+ color: $blockquote-cite-font-color;
+ }
+ }
+}
+
+.quoteblock.abstract {
+ margin: 0 0 $paragraph-margin-bottom 0;
+ display: block;
+ blockquote, blockquote p {
+ text-align: left;
+ word-spacing: 0;
+ //letter-spacing: -0.001em;
+ }
+
+ blockquote, blockquote p:first-of-type {
+ //&:first-line {
+ // font-weight: bold;
+ // letter-spacing: 0;
+ //}
+
+ &:before {
+ display: none;
+ }
+ }
+}
+
+table.tableblock {
+ max-width: 100%;
+ border-collapse: separate;
+ // QUESTION should this be any last-child?
+ td > .paragraph:last-child p,
+ th, td {
+ & > p:last-child {
+ margin-bottom: 0;
+ }
+ }
+}
+
+// NOTE .grid-* selectors must be defined before .frame-* selectors in order for styles to cascade properly
+table.tableblock,
+th.tableblock,
+td.tableblock {
+ border: 0 solid $table-border-color;
+}
+
+table.grid-all th.tableblock,
+table.grid-all td.tableblock {
+ border-width: 0 $table-border-size $table-border-size 0;
+}
+
+table.grid-all tfoot > tr > th.tableblock,
+table.grid-all tfoot > tr > td.tableblock {
+ border-width: $table-border-size $table-border-size 0 0;
+}
+
+table.grid-cols th.tableblock,
+table.grid-cols td.tableblock {
+ border-width: 0 $table-border-size 0 0;
+}
+
+table.grid-all * > tr > .tableblock:last-child,
+table.grid-cols * > tr > .tableblock:last-child {
+ border-right-width: 0;
+}
+
+table.grid-rows th.tableblock,
+table.grid-rows td.tableblock {
+ border-width: 0 0 $table-border-size 0;
+}
+
+table.grid-all tbody > tr:last-child > th.tableblock,
+table.grid-all tbody > tr:last-child > td.tableblock,
+table.grid-all thead:last-child > tr > th.tableblock,
+table.grid-rows tbody > tr:last-child > th.tableblock,
+table.grid-rows tbody > tr:last-child > td.tableblock,
+table.grid-rows thead:last-child > tr > th.tableblock {
+ border-bottom-width: 0;
+}
+
+table.grid-rows tfoot > tr > th.tableblock,
+table.grid-rows tfoot > tr > td.tableblock {
+ border-width: $table-border-size 0 0 0;
+}
+
+table.frame-all {
+ border-width: $table-border-size;
+}
+
+table.frame-sides {
+ border-width: 0 $table-border-size;
+}
+
+table.frame-topbot {
+ border-width: $table-border-size 0;
+}
+
+@each $halign in (left, right, center) {
+ th.halign-#{$halign},
+ td.halign-#{$halign} {
+ text-align: $halign;
+ }
+}
+
+@each $valign in (top, bottom, middle) {
+ th.valign-#{$valign},
+ td.valign-#{$valign} {
+ vertical-align: $valign;
+ }
+}
+
+// NOTE Fix required in Foundation, user-agent stylesheet is overriding
+table thead th,
+table tfoot th {
+ font-weight: $table-head-font-weight;
+}
+
+// vertical table header (block)
+tbody tr th {
+ display: $table-display;
+ //line-height: $table-line-height;
+ background: $table-head-bg;
+}
+
+// vertical table header (content)
+tbody tr th,
+tfoot tr th {
+ &, p {
+ color: $table-head-font-color;
+ font-weight: $table-head-font-weight;
+ }
+}
+
+p.tableblock > code:only-child {
+ background: none;
+ padding: 0;
+}
+
+/*
+p.tableblock {
+ font-size: 1em;
+}
+*/
+
+td > div.verse {
+ white-space: pre;
+}
+
+// AsciiDoc list styles
+
+ol {
+ margin-left: $list-side-margin + emCalc(4px);
+}
+
+ul li ol {
+ margin-left: $list-side-margin;
+}
+
+dl dd {
+ margin-left: $definition-list-content-margin-left;
+}
+
+// argh
+dl dd:last-child,
+dl dd:last-child > :last-child {
+ margin-bottom: 0;
+}
+
+ol > li p,
+ul > li p,
+ul dd,
+ol dd,
+.olist .olist,
+.ulist .ulist,
+.ulist .olist,
+.olist .ulist {
+ margin-bottom: $paragraph-margin-bottom / 2;
+}
+
+ul.unstyled,
+ol.unnumbered,
+ul.checklist,
+ul.none {
+ list-style-type: none;
+}
+
+ul.unstyled,
+ol.unnumbered,
+ul.checklist {
+ margin-left: emCalc(10px);
+}
+
+// use consistent size for checkbox
+ul.checklist li > p:first-child > .fa-square-o:first-child,
+ul.checklist li > p:first-child > .fa-check-square-o:first-child {
+ width: 1em;
+ font-size: 0.85em;
+}
+
+ul.checklist li > p:first-child > input[type="checkbox"]:first-child {
+ width: 1em;
+ position: relative;
+ top: 1px;
+}
+
+ul.inline {
+ @include inline-list;
+}
+
+// used when you need to style the term inline
+// or should we name it "natural"?
+.unstyled dl dt {
+ font-weight: normal;
+ font-style: normal;
+}
+
+@mixin ordered-list-type($class, $type) {
+ ol.#{$class} {
+ list-style-type: #{$type};
+ }
+}
+
+@include ordered-list-type(arabic, decimal);
+@include ordered-list-type(decimal, decimal-leading-zero);
+@include ordered-list-type(loweralpha, lower-alpha);
+@include ordered-list-type(upperalpha, upper-alpha);
+@include ordered-list-type(lowerroman, lower-roman);
+@include ordered-list-type(upperroman, upper-roman);
+@include ordered-list-type(lowergreek, lower-greek);
+//@include ordered-list-type(armenian, armenian);
+//@include ordered-list-type(georgian, georgian);
+
+.hdlist > table,
+.colist > table {
+ border: 0;
+ background: none;
+ & > tbody > tr {
+ background: none;
+ }
+}
+
+td.hdlist1,
+td.hdlist2 {
+ vertical-align: top;
+ padding: 0 emCalc(10px);
+}
+
+td.hdlist1 {
+ font-weight: bold;
+ padding-bottom: $paragraph-margin-bottom;
+}
+
+.literalblock + .colist,
+.listingblock + .colist {
+ margin-top: -0.5em;
+}
+
+.colist > table {
+ tr > td:first-of-type {
+ padding: 0 0.75em;
+ line-height: 1;
+ }
+
+ tr > td:last-of-type {
+ padding: emCalc(4px) 0;
+ }
+}
+
+// reenable once we can style the number too
+//.qanda > ol > li > p > em:only-child {
+// color: darken($primary-color, 5%);
+//}
+
+// picked from foundation/components/_thumbs.css
+.thumb,
+.th {
+ line-height: 0;
+ display: inline-block;
+ border: $thumb-border-style $thumb-border-width $thumb-border-color;
+ @if $experimental {
+ -webkit-box-shadow: $thumb-box-shadow;
+ }
+ box-shadow: $thumb-box-shadow;
+}
+
+// for now just allow title to be aligned for imageblock, might add others later
+// TODO might want to support auto-sizing content so title aligns to edge of content
+//.imageblock {
+// &.text-center > .title {
+// text-align: center !important;
+// }
+//
+// &.text-right > .title {
+// text-align: right !important;
+// }
+//}
+
+.imageblock {
+ &.left,
+ &[style*="float: left"] {
+ margin: emCalc(4px) emCalc(10px) $panel-margin-bottom 0;
+ }
+ &.right,
+ &[style*="float: right"] {
+ margin: emCalc(4px) 0 $panel-margin-bottom emCalc(10px);
+ }
+ //&.center {
+ // display: table;
+ //}
+
+ & > .title {
+ margin-bottom: 0;
+ }
+
+ &.thumb,
+ &.th {
+ border-width: $thumb-border-width + ($thumb-border-width * .5);
+ & > .title {
+ padding: 0 emCalc(2px);
+ }
+ }
+}
+
+//span.image {
+.image {
+ // QUESTION should we require the related role?
+ // "related" mean "illustrative" or "supporting" of the text
+ //&.related,
+ //&.rel {
+ //}
+
+ &.left,
+ &.right {
+ margin-top: emCalc(4px);
+ margin-bottom: emCalc(4px);
+ display: inline-block;
+ line-height: 0;
+ }
+
+ &.left {
+ margin-right: emCalc(10px);
+ }
+
+ &.right {
+ margin-left: emCalc(10px);
+ }
+}
+
+// NOTE defined directly on object & svg (above) to align with settings for img
+//.imageblock,
+//span.image {
+// object[type="image/svg+xml"], svg {
+// display: inline-block;
+// vertical-align: middle;
+// }
+//}
+
+a.image {
+ text-decoration: none;
+ // allow SVG to be a link
+ display: inline-block;
+ //object[type="image/svg+xml"] {
+ object {
+ pointer-events: none;
+ }
+}
+
+// AsciiDoc footnote styles
+sup.footnote,
+sup.footnoteref {
+ font-size: emCalc(14px); // 80% instead?
+ position: static;
+ vertical-align: super;
+ a {
+ text-decoration: none;
+ &:active {
+ text-decoration: underline;
+ }
+ }
+}
+
+#footnotes {
+ padding-top: emCalc(12px);
+ padding-bottom: emCalc(12px);
+ margin-bottom: $panel-margin-bottom / 2;
+ hr {
+ width: 20%;
+ min-width: emCalc(100px);
+ margin: -0.25em 0 0.75em 0;
+ border-width: 1px 0 0 0;
+ }
+ .footnote {
+ padding: 0 0.375em 0 0.225em; // .15em difference is due to text-indent
+ line-height: 1.3334;
+ font-size: emCalc(14px);
+ margin-left: 1.2em;
+ text-indent: -1.05em;
+ margin-bottom: 0.2em;
+ a:first-of-type {
+ font-weight: bold;
+ text-decoration: none;
+ }
+ }
+
+ .footnote:last-of-type {
+ margin-bottom: 0;
+ }
+
+ // footnotes in embedded documents
+ #content & {
+ margin-top: -$panel-margin-bottom / 2;
+ margin-bottom: 0;
+ padding: emCalc(12px) 0;
+ }
+}
+
+// for embedded gists
+.gist .file-data > table {
+ border: 0;
+ background: #fff;
+ width: 100%;
+ margin-bottom: 0;
+ td.line-data {
+ width: 99%;
+ }
+}
+
+
+.exampleblock > .content {
+ // white
+ //background-color: #fff;
+ //border-color: $panel-border-color;
+ //FIXME @include single-box-shadow($panel-border-color, 0, 1px, 2px);
+
+ // light yellow
+ background-color: #fffef7; // from rgb(252,247,227), analogous to #f8f8f7
+ border-color: $panel-border-color;
+ //FIXME @include single-box-shadow($panel-border-color, 0, 1px, 4px);
+}
+
+div.unbreakable { page-break-inside: avoid; }
+
+.big { font-size: larger; }
+
+.small { font-size: smaller; }
+
+.underline { text-decoration: underline; }
+
+.overline { text-decoration: overline; }
+
+.line-through { text-decoration: line-through; }
+
+.aqua { color: #00bfbf; }
+
+.aqua-background { background-color: #00fafa; }
+
+.black { color: black; }
+
+.black-background { background-color: black; }
+
+.blue { color: #0000bf; }
+
+.blue-background { background-color: #0000fa; }
+
+.fuchsia { color: #bf00bf; }
+
+.fuchsia-background { background-color: #fa00fa; }
+
+.gray { color: #606060; }
+
+.gray-background { background-color: #7d7d7d; }
+
+.green { color: #006000; }
+
+.green-background { background-color: #007d00; }
+
+.lime { color: #00bf00; }
+
+.lime-background { background-color: #00fa00; }
+
+.maroon { color: #600000; }
+
+.maroon-background { background-color: #7d0000; }
+
+.navy { color: #000060; }
+
+.navy-background { background-color: #00007d; }
+
+.olive { color: #606000; }
+
+.olive-background { background-color: #7d7d00; }
+
+.purple { color: #600060; }
+
+.purple-background { background-color: #7d007d; }
+
+.red { color: #bf0000; }
+
+.red-background { background-color: #fa0000; }
+
+.silver { color: #909090; }
+
+.silver-background { background-color: #bcbcbc; }
+
+.teal { color: #006060; }
+
+.teal-background { background-color: #007d7d; }
+
+.white { color: #bfbfbf; }
+
+.white-background { background-color: #fafafa; }
+
+.yellow { color: #bfbf00; }
+
+.yellow-background { background-color: #fafa00; }
+
+//
+// _awesome-icons.sccs
+//
+
+span.icon>.fa {
+ cursor: default;
+}
+
+.admonitionblock td.icon {
+ [class^="fa icon-"] {
+ font-size: 2.5em;
+ text-shadow: $icon-text-shadow;
+ cursor: default;
+ }
+
+ .icon-note:before {
+ //@extend .fa-info-circle;
+ content: "\f05a";
+ color: scale-color($success-color, $lightness: $rainbow-lightness);
+ //color: $success-color;
+ font-family: FontAwesome;
+ }
+
+ .icon-tip:before {
+ // @extend .fa-lightbulb-o;
+ content: "\f0eb";
+ color: scale-color($info-color, $lightness: $rainbow-lightness);
+ //color: $info-color;
+ font-family: FontAwesome;
+ }
+
+ .icon-warning:before {
+ // @extend .fa-exclamation-triangle;
+ content: "\f071";
+ color: scale-color($warning-color, $lightness: $rainbow-lightness);
+ //color: $warning-color;
+ font-family: FontAwesome;
+ }
+
+ .icon-caution:before {
+ // @extend .fa-fire;
+ content: "\f06d";
+ color: scale-color($alert-color, $lightness: $rainbow-lightness);
+ //color: $alert-color;
+ font-family: FontAwesome;
+ }
+
+ .icon-important:before {
+ // @extend .icon-exclamation-circle;
+ content: "\f06a";
+ color: scale-color($ci-2, $lightness: $rainbow-lightness);
+ //color: $ci-2;
+ font-family: FontAwesome;
+ }
+}
+
+// alternatively could use ➊ through ➓ to get the numbered circles,
+// then style them as appropriate; would need to output them in the text, though
+.conum[data-value] {
+ display: inline-block;
+ color: #fff !important;
+ background-color: $body-font-color;
+ @include radius(100px);
+ text-align: center;
+ font-size: 0.75em;
+ //width: 1.5em;
+ //height: 1.5em;
+ //line-height: 1.5em;
+ width: 1.67em;
+ height: 1.67em;
+ line-height: 1.67em;
+ // FIXME make this font a variable
+ font-family: "Open Sans", "DejaVu Sans", sans-serif;
+ font-style: normal;
+ // QUESTION should the callout numbers be regular weight?
+ font-weight: bold;
+ // text-indent only seems to be required for webkit
+ //text-indent: -1px;
+
+ & * {
+ color: #fff !important;
+ }
+
+ & + b {
+ display: none;
+ }
+
+ &:after {
+ content: attr(data-value);
+ }
+
+ pre & {
+ position: relative;
+ top: -0.125em;
+ }
+}
+
+// hack to disallow syntax highlighting from changing the color
+b.conum * {
+ color: inherit !important;
+}
+
+// hack for when highlight.js adds a bogus element into DOM
+// QUESTION should we solve this w/ javascript instead?
+.conum:not([data-value]):empty {
+ display: none;
+}
diff --git a/_sass/_11_syntax-highlighting.scss b/_sass/_11_syntax-highlighting.scss
index f0a2a0c1e22..ea411a5d0e9 100644
--- a/_sass/_11_syntax-highlighting.scss
+++ b/_sass/_11_syntax-highlighting.scss
@@ -4,6 +4,13 @@
.highlight {
background: #fff;
+ [data-lang]::before {
+ content: attr(data-lang);
+ display: block;
+ text-align: right;
+ margin-right: 5px;
+ text-transform: uppercase;
+ }
.c { color: #998; font-style: italic } // Comment
.err { color: #a61717; background-color: #e3d2d2 } // Error
.k { font-weight: bold } // Keyword
diff --git a/_sass/_functions.scss b/_sass/_functions.scss
index 60dd1e2ade0..3b51e97631c 100644
--- a/_sass/_functions.scss
+++ b/_sass/_functions.scss
@@ -7,17 +7,21 @@
$rem-base: 16px !default;
// IMPORT ONCE
-// We use this to prevent styles from being loaded multiple times for compenents that rely on other components.
-$modules: () !default;
+// We use this to prevent styles from being loaded multiple times for components that rely on other components.
+$modules: (
+ ) !default;
+
@mixin exports($name) {
// Import from global scope
$modules: $modules !global;
// Check if a module is already on the list
- $module_index: index($modules, $name);
- @if (($module_index == null) or ($module_index == false)) {
- $modules: append($modules, $name) !global;
- @content;
- }
+ $module_index: index($modules, $name
+);
+
+@if (($module_index ==null) or ($module_index ==false)) {
+ $modules: append($modules, $name) !global;
+ @content;
+}
}
//
@@ -27,80 +31,101 @@ $modules: () !default;
// RANGES
// We use these functions to define ranges for various things, like media queries.
-@function lower-bound($range){
- @if length($range) <= 0 {
+@function lower-bound($range) {
+ @if length($range) <=0 {
@return 0;
}
- @return nth($range,1);
+
+ @return nth($range, 1);
}
@function upper-bound($range) {
@if length($range) < 2 {
@return 999999999999;
}
+
@return nth($range, 2);
}
+/// TODO: This is bad practice, calculating between units should be done by converting as by the sass development team:
+/// https://github.com/sass/sass/issues/533 (right now this is a work around)
// STRIP UNIT
// It strips the unit of measure and returns it
-@function strip-unit($num) {
- @return $num / ($num * 0 + 1);
+@function strip-unit($value) {
+ @if type-of($value)=="number" {
+ @if (unitless($value)) {
+ @return $value;
+ }
+
+ @else if unit($value)=="em" {
+ @return calc($value / 1em);
+ }
+
+ @else if unit($value)=="px" {
+ @return calc($value / 1px);
+ }
+
+ @else if unit($value)=="pt" {
+ @return calc($value / 1pt);
+ }
+ }
+
+ @else {
+ @warn "Not a number value: #{$value}";
+ @return $value;
+ }
}
// TEXT INPUT TYPES
-@function text-inputs( $types: all, $selector: input ) {
-
- $return: ();
-
- $all-text-input-types:
- text
- password
- date
- datetime
- datetime-local
- month
- week
- email
- number
- search
- tel
- time
- url
- color
- textarea;
-
- @if $types == all { $types: $all-text-input-types; }
-
- @each $type in $types {
- @if $type == textarea {
- @if $selector == input {
- $return: append($return, unquote('#{$type}'), comma)
- } @else {
- $return: append($return, unquote('#{$type}#{$selector}'), comma)
- }
- } @else {
- $return: append($return, unquote('#{$selector}[type="#{$type}"]'), comma)
- }
+@function text-inputs($types: all, $selector: input) {
+
+ $return: ();
+
+ $all-text-input-types: text password date datetime datetime-local month week email number search tel time url color textarea;
+
+ @if $types ==all {
+ $types: $all-text-input-types;
+ }
+
+ @each $type in $types {
+ @if $type ==textarea {
+ @if $selector ==input {
+ $return: append($return, unquote('#{$type}'), comma)
+ }
+
+ @else {
+ $return: append($return, unquote('#{$type}#{$selector}'), comma)
+ }
}
- @return $return;
+ @else {
+ $return: append($return, unquote('#{$selector}[type="#{$type}"]'), comma)
+ }
+ }
+
+ @return $return;
}
// CONVERT TO REM
-@function convert-to-rem($value, $base-value: $rem-base) {
- $value: strip-unit($value) / strip-unit($base-value) * 1rem;
- @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
+@function convert-to-rem($value, $base-value: $rem-base) {
+ $value: calc(strip-unit($value) / strip-unit($base-value) * 1rem);
+
+ @if ($value ==0rem) {
+ $value: 0;
+ }
+
+ // Turn 0rem into 0
@return $value;
}
@function data($attr) {
@if $namespace {
- @return '[data-' + $namespace + '-' + $attr + ']';
+ @return ('[data-' + $namespace + '-' + $attr + ']');
}
- @return '[data-' + $attr + ']';
+ @return ('[data-' + $attr + ']');
}
// REM CALC
@@ -125,23 +150,28 @@ $modules: () !default;
@function rem-calc($values, $base-value: $rem-base) {
$max: length($values);
- @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }
-
- $remValues: ();
- @for $i from 1 through $max {
- $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
+ @if $max ==1 {
+ @return convert-to-rem(nth($values, 1), $base-value);
}
- @return $remValues;
+
+ $remValues: (
+ );
+
+@for $i from 1 through $max {
+ $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
+}
+
+@return $remValues;
}
// OLD EM CALC
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
-@function emCalc($values){
+@function emCalc($values) {
@return rem-calc($values);
}
// OLD EM CALC
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
-@function em-calc($values){
+@function em-calc($values) {
@return rem-calc($values);
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_accordion.scss b/_sass/foundation-components/_accordion.scss
index fb575095769..1676e7ee2d1 100644
--- a/_sass/foundation-components/_accordion.scss
+++ b/_sass/foundation-components/_accordion.scss
@@ -18,12 +18,12 @@ $accordion-navigation-font-color: $jet !default;
$accordion-navigation-font-size: rem-calc(16) !default;
$accordion-navigation-font-family: $body-font-family !default;
-$accordion-content-padding: ($column-gutter/2) !default;
+$accordion-content-padding: calc($column-gutter / 2) !default;
$accordion-content-active-bg-color: $white !default;
// Mixin: accordion-container()
-// Decription: Responsible for the container component of accordions, generating styles relating to a margin of zero and a clearfix
+// Description: Responsible for the container component of accordions, generating styles relating to a margin of zero and a clearfix
// Explicit Dependencies: a clearfix mixin *is* defined.
// Implicit Dependencies: None
@@ -38,55 +38,68 @@ $accordion-content-active-bg-color: $white !default;
// @params $active-bg [ color or string ]: Specify the background color for the navigation element when clicked and not released.
// @params $active_class [ string ]: Specify the class name used to keep track of which accordion tab should be visible
// @params $font-color [ color or string ]: Color of the font for accordion
-// @params $font-size [ number ]: Specifiy the font-size of the text inside the navigation element
-// @params $font-family [ string ]: Specify the font family for the text of the navigation of the accorion
+// @params $font-size [ number ]: Specify the font-size of the text inside the navigation element
+// @params $font-family [ string ]: Specify the font family for the text of the navigation of the accordion
-@mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active', $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family ){
+@mixin accordion-navigation($bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active', $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family ) {
display: block;
margin-bottom: 0 !important;
- @if type-of($active_class) != "string" {
+
+ @if type-of($active_class) !="string" {
@warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of this navigation component."
}
+
@else {
- &.#{ $active_class } > a {
+ &.#{ $active_class }>a {
background: $active-bg;
}
}
- > a {
+
+ >a {
background: $bg;
color: $font-color;
- @if type-of($padding) != number {
+
+ @if type-of($padding) !=number {
@warn "`#{$padding}` was read as #{type-of($padding)}";
- @if $accordion-navigation-padding != null {
+
+ @if $accordion-navigation-padding !=null {
@warn "#{$padding} was read as a #{type-of($padding)}";
@warn "`#{$padding}` isn't a valid number. $accordion-navigation-padding (#{$accordion-navigation-padding}) will be used instead.)";
padding: $accordion-navigation-padding;
}
+
@else {
@warn "`#{$padding}` isn't a valid number and $accordion-navigation-padding is missing. A value of `null` is returned to not output an invalid value for padding";
padding: null;
}
}
+
@else {
padding: $padding;
}
+
display: block;
font-family: $font-family;
- @if type-of($font-size) != number {
+
+ @if type-of($font-size) !=number {
@warn "`#{$font-size}` was read as a #{type-of($font-size)}";
- @if $accordion-navigation-font-size != null {
+
+ @if $accordion-navigation-font-size !=null {
@warn "`#{$font-size}` is not a valid number. The value of $accordion-navigation-font-size will be used instead (#{$accordion-navigation-font-size}).";
font-size: $accordion-navigation-font-size;
}
- @else{
+
+ @else {
@warn "`#{$font-size}` is not a valid number and the default value of $accordion-navigation-font-size is not defined. A value of `null` will be returned to not generate an invalid value for font-size.";
font-size: null;
}
}
+
@else {
font-size: $font-size;
}
+
&:hover {
background: $hover-bg;
}
@@ -98,24 +111,31 @@ $accordion-content-active-bg-color: $white !default;
// @params $bg [ color ]: Background color for the content when it's visible
// @params $active_class [ string ]: Class name used to keep track of which accordion tab should be visible.
-@mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active'){
+@mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active') {
display: none;
- @if type-of($padding) != "number" {
+
+ @if type-of($padding) !="number" {
@warn "#{$padding} was read as a #{type-of($padding)}";
- @if $accordion-content-padding != null {
+
+ @if $accordion-content-padding !=null {
@warn "`#{$padding}` isn't a valid number. $accordion-content-padding used instead";
padding: $accordion-content-padding;
- } @else {
+ }
+
+ @else {
@warn "`#{$padding}` isn't a valid number and the default value of $accordion-content-padding is not defined. A value of `null` is returned to not output an invalid value for padding.";
padding: null;
}
- } @else {
+ }
+
+ @else {
padding: $padding;
}
- @if type-of($active_class) != "string" {
+ @if type-of($active_class) !="string" {
@warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of the content. "
}
+
@else {
&.#{$active_class} {
display: block;
@@ -129,23 +149,33 @@ $accordion-content-active-bg-color: $white !default;
.accordion {
@include clearfix;
margin-bottom: 0;
- .accordion-navigation, dd {
+
+ .accordion-navigation,
+ dd {
display: block;
margin-bottom: 0 !important;
- &.active > a { background: $accordion-navigation-active-bg-color; }
- > a {
+
+ &.active>a {
+ background: $accordion-navigation-active-bg-color;
+ }
+
+ >a {
background: $accordion-navigation-bg-color;
color: $accordion-navigation-font-color;
padding: $accordion-navigation-padding;
display: block;
font-family: $accordion-navigation-font-family;
font-size: $accordion-navigation-font-size;
- &:hover { background: $accordion-navigation-hover-bg-color; }
+
+ &:hover {
+ background: $accordion-navigation-hover-bg-color;
+ }
}
- > .content {
+ >.content {
display: none;
padding: $accordion-content-padding;
+
&.active {
display: block;
background: $accordion-content-active-bg-color;
@@ -154,4 +184,4 @@ $accordion-content-active-bg-color: $white !default;
}
}
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_alert-boxes.scss b/_sass/foundation-components/_alert-boxes.scss
index 493fbaa17e7..65028d72e41 100644
--- a/_sass/foundation-components/_alert-boxes.scss
+++ b/_sass/foundation-components/_alert-boxes.scss
@@ -66,7 +66,7 @@ $alert-transition-ease: ease-out !default;
// We use this mixin to add alert styles
//
// $bg - The background of the alert. Default: $primary-color.
-@mixin alert-style($bg:$primary-color) {
+@mixin alert-style($bg: $primary-color) {
// This finds the lightness percentage of the background color.
$bg-lightness: lightness($bg);
@@ -76,8 +76,13 @@ $alert-transition-ease: ease-out !default;
border-color: scale-color($bg, $lightness: $alert-function-factor);
// We control the text color for you based on the background color.
- @if $bg-lightness > 70% { color: $alert-font-color-alt; }
- @else { color: $alert-font-color; }
+ @if $bg-lightness >70% {
+ color: $alert-font-color-alt;
+ }
+
+ @else {
+ color: $alert-font-color;
+ }
}
@@ -88,20 +93,23 @@ $alert-transition-ease: ease-out !default;
line-height: 0;
position: absolute;
top: $alert-close-top;
- margin-top: -($alert-close-font-size / 2);
+ margin-top: -(calc($alert-close-font-size / 2));
#{$opposite-direction}: $alert-close-position;
color: $alert-close-color;
opacity: $alert-close-opacity;
background: $alert-close-background;
+
&:hover,
- &:focus { opacity: $alert-close-opacity-hover; }
+ &:focus {
+ opacity: $alert-close-opacity-hover;
+ }
}
// We use this to quickly create alerts with a single mixin.
//
// $bg - Background of alert. Default: $primary-color.
// $radius - Radius of alert box. Default: false.
-@mixin alert($bg:$primary-color, $radius:false) {
+@mixin alert($bg: $primary-color, $radius: false) {
@include alert-base;
@include alert-style($bg);
@include radius($radius);
@@ -112,17 +120,41 @@ $alert-transition-ease: ease-out !default;
.alert-box {
@include alert;
- .close { @include alert-close; }
+ .close {
+ @include alert-close;
+ }
+
+ &.radius {
+ @include radius($alert-radius);
+ }
- &.radius { @include radius($alert-radius); }
- &.round { @include radius($global-rounded); }
+ &.round {
+ @include radius($global-rounded);
+ }
- &.success { @include alert-style($success-color); }
- &.alert { @include alert-style($alert-color); }
- &.secondary { @include alert-style($secondary-color); }
- &.warning { @include alert-style($warning-color); }
- &.info { @include alert-style($info-color); }
- &.alert-close { opacity: 0}
+ &.success {
+ @include alert-style($success-color);
+ }
+
+ &.alert {
+ @include alert-style($alert-color);
+ }
+
+ &.secondary {
+ @include alert-style($secondary-color);
+ }
+
+ &.warning {
+ @include alert-style($warning-color);
+ }
+
+ &.info {
+ @include alert-style($info-color);
+ }
+
+ &.alert-close {
+ opacity: 0
+ }
}
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_block-grid.scss b/_sass/foundation-components/_block-grid.scss
index 5c7bf14611b..cf6b31cfeac 100644
--- a/_sass/foundation-components/_block-grid.scss
+++ b/_sass/foundation-components/_block-grid.scss
@@ -15,6 +15,7 @@ $block-grid-elements: 12 !default;
$block-grid-default-spacing: rem-calc(20) !default;
$align-block-grid-to-grid: false !default;
+
@if $align-block-grid-to-grid {
$block-grid-default-spacing: $column-gutter;
}
@@ -31,42 +32,54 @@ $block-grid-media-queries: true !default;
// $per-row - # of items to display per row. Default: false.
// $spacing - # of ems to use as padding on each block item. Default: rem-calc(20).
// $base-style - Apply a base style to block grid. Default: true.
-@mixin block-grid(
- $per-row:false,
- $spacing:$block-grid-default-spacing,
- $include-spacing:true,
- $base-style:true) {
+@mixin block-grid($per-row: false,
+ $spacing: $block-grid-default-spacing,
+ $include-spacing: true,
+ $base-style: true) {
@if $base-style {
display: block;
padding: 0;
+
@if $align-block-grid-to-grid {
margin: 0;
- } @else {
- margin: 0 (-$spacing/2);
}
+
+ @else {
+ margin: 0 calc(-1 * $spacing / 2);
+ }
+
@include clearfix;
&>li {
display: block;
height: auto;
float: $default-float;
+
@if $include-spacing {
- padding: 0 ($spacing/2) $spacing;
+ padding: 0 calc($spacing / 2) $spacing;
}
}
}
@if $per-row {
&>li {
- width: 100%/$per-row;
+ width: calc(100% / $per-row);
+
@if $include-spacing {
padding: 0 ($spacing/2) $spacing;
}
+
list-style: none;
- &:nth-of-type(1n) { clear: none; }
- &:nth-of-type(#{$per-row}n+1) { clear: both; }
+ &:nth-of-type(1n) {
+ clear: none;
+ }
+
+ &:nth-of-type(#{$per-row}n+1) {
+ clear: both;
+ }
+
@if $align-block-grid-to-grid {
@include block-grid-aligned($per-row, $spacing);
}
@@ -76,11 +89,13 @@ $block-grid-media-queries: true !default;
@mixin block-grid-aligned($per-row, $spacing) {
@for $i from 1 through $block-grid-elements {
- @if $per-row >= $i {
- $grid-column: '+' + $i;
- @if $per-row == $i {
+ @if $per-row >=$i {
+ $grid-column: '+'+$i;
+
+ @if $per-row ==$i {
$grid-column: '';
}
+
&:nth-of-type(#{$per-row}n#{unquote($grid-column)}) {
padding-left: ($spacing - (($spacing / $per-row) * ($per-row - ($i - 1))));
padding-right: ($spacing - (($spacing / $per-row) * $i));
@@ -92,10 +107,10 @@ $block-grid-media-queries: true !default;
// Generate presentational markup for block grid.
//
// $size - Name of class to use, i.e. "large" will generate .large-block-grid-1, .large-block-grid-2, etc.
-@mixin block-grid-html-classes($size,$include-spacing) {
+@mixin block-grid-html-classes($size, $include-spacing) {
@for $i from 1 through $block-grid-elements {
.#{$size}-block-grid-#{($i)} {
- @include block-grid($i,$block-grid-default-spacing,$include-spacing,false);
+ @include block-grid($i, $block-grid-default-spacing, $include-spacing, false);
}
}
}
@@ -103,30 +118,32 @@ $block-grid-media-queries: true !default;
@include exports("block-grid") {
@if $include-html-block-grid-classes {
- [class*="block-grid-"] { @include block-grid; }
+ [class*="block-grid-"] {
+ @include block-grid;
+ }
@if $block-grid-media-queries {
@media #{$small-up} {
- @include block-grid-html-classes($size:small,$include-spacing:false);
+ @include block-grid-html-classes($size: small, $include-spacing: false);
}
@media #{$medium-up} {
- @include block-grid-html-classes($size:medium,$include-spacing:false);
+ @include block-grid-html-classes($size: medium, $include-spacing: false);
}
@media #{$large-up} {
- @include block-grid-html-classes($size:large,$include-spacing:false);
+ @include block-grid-html-classes($size: large, $include-spacing: false);
}
@if $include-xl-html-block-grid-classes {
@media #{$xlarge-up} {
- @include block-grid-html-classes($size:xlarge,$include-spacing:false);
+ @include block-grid-html-classes($size: xlarge, $include-spacing: false);
}
@media #{$xxlarge-up} {
- @include block-grid-html-classes($size:xxlarge,$include-spacing:false);
+ @include block-grid-html-classes($size: xxlarge, $include-spacing: false);
}
}
}
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_button-groups.scss b/_sass/foundation-components/_button-groups.scss
index c989dfbaf07..5afb7556aec 100644
--- a/_sass/foundation-components/_button-groups.scss
+++ b/_sass/foundation-components/_button-groups.scss
@@ -19,30 +19,37 @@ $button-group-border-width: 1px !default;
//
// We use this to add styles for a button group container
-@mixin button-group-container($styles:true, $float:false) {
+@mixin button-group-container($styles: true, $float: false) {
@if $styles {
list-style: none;
margin: 0;
#{$default-float}: 0;
@include clearfix();
}
+
@if $float {
float: #{$default-float};
margin-#{$opposite-direction}: $button-bar-margin-opposite;
- & div { overflow: hidden; }
+
+ & div {
+ overflow: hidden;
+ }
}
}
// We use this to control styles for button groups
-@mixin button-group-style($radius:false, $even:false, $float:false, $orientation:horizontal) {
+@mixin button-group-style($radius: false, $even: false, $float: false, $orientation: horizontal) {
- > button, .button {
+ >button,
+ .button {
border-#{$default-float}: $button-group-border-width solid;
border-color: rgba(255, 255, 255, 0.5);
}
&:first-child {
- button, .button {
+
+ button,
+ .button {
border-#{$default-float}: 0;
}
}
@@ -52,84 +59,107 @@ $button-group-border-width: 1px !default;
margin: 0;
float: $float;
display: list-item;
+
// Make sure the first child doesn't get the negative margin.
- &:first-child { margin-#{$default-float}: 0; }
+ &:first-child {
+ margin-#{$default-float}: 0;
+ }
}
+
@else {
margin: 0 -2px;
display: inline-block;
}
- @if $orientation == vertical {
- display:block;
- margin:0;
- > button, .button {
+ @if $orientation ==vertical {
+ display: block;
+ margin: 0;
+
+ >button,
+ .button {
border-top: $button-group-border-width solid;
border-color: rgba(255, 255, 255, 0.5);
border-left-width: 0;
- margin:0;
+ margin: 0;
display: block;
}
&:first-child {
- button, .button {
+
+ button,
+ .button {
border-top: 0;
}
}
}
// We use these to control left and right radius on first/last buttons in the group.
- @if $radius == true {
+ @if $radius ==true {
+
&,
- & > a,
- & > button,
- & > .button { @include radius(0); }
+ &>a,
+ &>button,
+ &>.button {
+ @include radius(0);
+ }
+
&:first-child,
- &:first-child > a,
- &:first-child > button,
- &:first-child > .button {
- @if $orientation == vertical {
+ &:first-child>a,
+ &:first-child>button,
+ &:first-child>.button {
+ @if $orientation ==vertical {
@include side-radius(top, $button-radius);
}
+
@else {
@include side-radius($default-float, $button-radius);
}
}
+
&:last-child,
- &:last-child > a,
- &:last-child > button,
- &:last-child > .button {
- @if $orientation == vertical {
+ &:last-child>a,
+ &:last-child>button,
+ &:last-child>.button {
+ @if $orientation ==vertical {
@include side-radius(bottom, $button-radius);
}
+
@else {
@include side-radius($opposite-direction, $button-radius);
}
}
}
+
@else if $radius {
+
&,
- & > a,
- & > button,
- & > .button { @include radius(0); }
+ &>a,
+ &>button,
+ &>.button {
+ @include radius(0);
+ }
+
&:first-child,
- &:first-child > a,
- &:first-child > button,
- &:first-child > .button {
- @if $orientation == vertical {
+ &:first-child>a,
+ &:first-child>button,
+ &:first-child>.button {
+ @if $orientation ==vertical {
@include side-radius(top, $radius);
}
+
@else {
@include side-radius($default-float, $radius);
}
}
+
&:last-child,
- &:last-child > a,
- &:last-child > button,
- &:last-child > .button {
- @if $orientation == vertical {
+ &:last-child>a,
+ &:last-child>button,
+ &:last-child>.button {
+ @if $orientation ==vertical {
@include side-radius(bottom, $radius);
}
+
@else {
@include side-radius($opposite-direction, $radius);
}
@@ -138,60 +168,90 @@ $button-group-border-width: 1px !default;
// We use this to make the buttons even width across their container
@if $even {
- width: percentage((100/$even) / 100);
- button, .button { width: 100%; }
+ width: percentage(calc((100/$even) / 100));
+
+ button,
+ .button {
+ width: 100%;
+ }
}
}
@include exports("button-group") {
@if $include-html-button-classes {
- .button-group { @include button-group-container;
+ .button-group {
+ @include button-group-container;
- & > li { @include button-group-style(); }
+ &>li {
+ @include button-group-style();
+ }
&.stack {
- & > li { @include button-group-style($orientation:vertical); float: none; }
+ &>li {
+ @include button-group-style($orientation: vertical);
+ float: none;
+ }
}
&.stack-for-small {
- & > li {
- @include button-group-style($orientation:horizontal);
+ &>li {
+ @include button-group-style($orientation: horizontal);
+
@media #{$small-only} {
- @include button-group-style($orientation:vertical);
+ @include button-group-style($orientation: vertical);
}
}
}
- &.radius > * { @include button-group-style($radius:$button-radius, $float:null); }
- &.radius.stack > * { @include button-group-style($radius:$button-radius, $float:null, $orientation:vertical); }
- &.radius.stack-for-small > * {
+ &.radius>* {
+ @include button-group-style($radius: $button-radius, $float: null);
+ }
+
+ &.radius.stack>* {
+ @include button-group-style($radius: $button-radius, $float: null, $orientation: vertical);
+ }
+
+ &.radius.stack-for-small>* {
@media #{$medium-up} {
- @include button-group-style($radius:$button-radius, $orientation:horizontal);
+ @include button-group-style($radius: $button-radius, $orientation: horizontal);
}
+
@media #{$small-only} {
- @include button-group-style($radius:$button-radius, $orientation:vertical);
+ @include button-group-style($radius: $button-radius, $orientation: vertical);
}
}
- &.round > * { @include button-group-style($radius:$button-round, $float:null); }
- &.round.stack > * { @include button-group-style($radius:$button-med, $float:null, $orientation:vertical); }
- &.round.stack-for-small > * {
+ &.round>* {
+ @include button-group-style($radius: $button-round, $float: null);
+ }
+
+ &.round.stack>* {
+ @include button-group-style($radius: $button-med, $float: null, $orientation: vertical);
+ }
+
+ &.round.stack-for-small>* {
@media #{$medium-up} {
- @include button-group-style($radius:$button-round, $orientation:horizontal);
+ @include button-group-style($radius: $button-round, $orientation: horizontal);
}
+
@media #{$small-only} {
- @include button-group-style($radius:$button-med, $orientation:vertical);
+ @include button-group-style($radius: $button-med, $orientation: vertical);
}
}
@for $i from 2 through 8 {
- &.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
+ &.even-#{$i} li {
+ @include button-group-style($even: $i, $float: null);
+ }
}
}
.button-bar {
@include clearfix;
- .button-group { @include button-group-container($styles:false, $float:true); }
+
+ .button-group {
+ @include button-group-container($styles: false, $float: true);
+ }
}
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_dropdown-buttons.scss b/_sass/foundation-components/_dropdown-buttons.scss
index 3e45e5a5e0c..715c9925709 100644
--- a/_sass/foundation-components/_dropdown-buttons.scss
+++ b/_sass/foundation-components/_dropdown-buttons.scss
@@ -22,25 +22,25 @@ $button-pip-lrg: rem-calc(11) !default;
$dropdown-button-padding-tny: $button-pip-tny * 7 !default;
$dropdown-button-pip-size-tny: $button-pip-tny !default;
$dropdown-button-pip-opposite-tny: $button-pip-tny * 3 !default;
-$dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1) !default;
+$dropdown-button-pip-top-tny: calc(-1 * $button-pip-tny / 2) + rem-calc(1) !default;
// We use these to style small dropdown buttons
$dropdown-button-padding-sml: $button-pip-sml * 7 !default;
$dropdown-button-pip-size-sml: $button-pip-sml !default;
$dropdown-button-pip-opposite-sml: $button-pip-sml * 3 !default;
-$dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1) !default;
+$dropdown-button-pip-top-sml: calc(-1 * $button-pip-sml / 2) + rem-calc(1) !default;
// We use these to style medium dropdown buttons
$dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3) !default;
$dropdown-button-pip-size-med: $button-pip-med - rem-calc(3) !default;
$dropdown-button-pip-opposite-med: $button-pip-med * 2.5 !default;
-$dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2) !default;
+$dropdown-button-pip-top-med: calc(-1 * $button-pip-med / 2) + rem-calc(2) !default;
// We use these to style large dropdown buttons
$dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3) !default;
$dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default;
$dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5 !default;
-$dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
+$dropdown-button-pip-top-lrg: calc(-1 * $button-pip-lrg / 2) + rem-calc(3) !default;
// @mixins
//
@@ -52,7 +52,7 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
// $pip-color - Color of the little triangle that points to the dropdown. Default: $white.
// $base-style - Add in base-styles. This can be set to false. Default:true
-@mixin dropdown-button($padding:medium, $pip-color:$white, $base-style:true) {
+@mixin dropdown-button($padding: medium, $pip-color: $white, $base-style: true) {
// We add in base styles, but they can be negated by setting to 'false'.
@if $base-style {
@@ -73,8 +73,9 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
}
// If we're dealing with tiny buttons, use these styles
- @if $padding == tiny {
+ @if $padding ==tiny {
padding-#{$opposite-direction}: $dropdown-button-padding-tny;
+
&:after {
border-width: $dropdown-button-pip-size-tny;
#{$opposite-direction}: $dropdown-button-pip-opposite-tny;
@@ -83,8 +84,9 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
}
// If we're dealing with small buttons, use these styles
- @if $padding == small {
+ @if $padding ==small {
padding-#{$opposite-direction}: $dropdown-button-padding-sml;
+
&::after {
border-width: $dropdown-button-pip-size-sml;
#{$opposite-direction}: $dropdown-button-pip-opposite-sml;
@@ -93,8 +95,9 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
}
// If we're dealing with default (medium) buttons, use these styles
- @if $padding == medium {
+ @if $padding ==medium {
padding-#{$opposite-direction}: $dropdown-button-padding-med;
+
&::after {
border-width: $dropdown-button-pip-size-med;
#{$opposite-direction}: $dropdown-button-pip-opposite-med;
@@ -103,8 +106,9 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
}
// If we're dealing with large buttons, use these styles
- @if $padding == large {
+ @if $padding ==large {
padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
+
&::after {
border-width: $dropdown-button-pip-size-lrg;
#{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
@@ -114,17 +118,34 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
// We can control the pip color. We didn't use logic in this case, just set it and forget it.
@if $pip-color {
- &::after { border-color: $pip-color transparent transparent transparent; }
+ &::after {
+ border-color: $pip-color transparent transparent transparent;
+ }
}
}
@include exports("dropdown-button") {
@if $include-html-button-classes {
- .dropdown.button, button.dropdown { @include dropdown-button;
- &.tiny { @include dropdown-button(tiny,$base-style:false); }
- &.small { @include dropdown-button(small,$base-style:false); }
- &.large { @include dropdown-button(large,$base-style:false); }
- &.secondary:after { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
+
+ .dropdown.button,
+ button.dropdown {
+ @include dropdown-button;
+
+ &.tiny {
+ @include dropdown-button(tiny, $base-style: false);
+ }
+
+ &.small {
+ @include dropdown-button(small, $base-style: false);
+ }
+
+ &.large {
+ @include dropdown-button(large, $base-style: false);
+ }
+
+ &.secondary:after {
+ border-color: $dropdown-button-pip-color-alt transparent transparent transparent;
+ }
}
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_forms.scss b/_sass/foundation-components/_forms.scss
index 80124fd0653..d89e23d725d 100644
--- a/_sass/foundation-components/_forms.scss
+++ b/_sass/foundation-components/_forms.scss
@@ -22,7 +22,7 @@ $form-label-font-color: scale-color($black, $lightness: 30%) !default;
$form-label-small-transform: capitalize !default;
$form-label-bottom-margin: 0 !default;
$input-font-family: inherit !default;
-$input-font-color: rgba(0,0,0,0.75) !default;
+$input-font-color: rgba(0, 0, 0, 0.75) !default;
$input-font-size: rem-calc(14) !default;
$input-bg-color: $white !default;
$input-focus-bg-color: scale-color($white, $lightness: -2%) !default;
@@ -33,7 +33,7 @@ $input-border-width: 1px !default;
$input-border-radius: $global-radius !default;
$input-disabled-bg: $gainsboro !default;
$input-disabled-cursor: $cursor-default-value !default;
-$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
+$input-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !default;
$input-include-glowing-effect: true !default;
// We use these to style the fieldset border and spacing.
@@ -84,26 +84,36 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// We use this mixin to give us form styles for rows inside of forms
@mixin form-row-base {
- .row { margin: 0 ((-$form-spacing) / 2);
+ .row {
+ margin: 0 calc((-1 * $form-spacing) / 2);
.column,
- .columns { padding: 0 ($form-spacing / 2); }
+ .columns {
+ padding: 0 calc($form-spacing / 2);
+ }
// Use this to collapse the margins of a form row
- &.collapse { margin: 0;
+ &.collapse {
+ margin: 0;
.column,
- .columns { padding: 0; }
+ .columns {
+ padding: 0;
+ }
+
input {
@include side-radius($opposite-direction, 0);
}
}
}
+
input.column,
input.columns,
textarea.column,
- textarea.columns { padding-#{$default-float}: ($form-spacing / 2); }
+ textarea.columns {
+ padding-#{$default-float}: calc($form-spacing / 2);
+ }
}
// @MIXIN
@@ -112,30 +122,35 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
@mixin form-element {
background-color: $input-bg-color;
font-family: $input-font-family;
+
border: {
style: $input-border-style;
width: $input-border-width;
color: $input-border-color;
}
+
box-shadow: $input-box-shadow;
color: $input-font-color;
display: block;
font-size: $input-font-size;
margin: 0 0 $form-spacing 0;
- padding: $form-spacing / 2;
+ padding: calc($form-spacing / 2);
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
width: 100%;
@include box-sizing(border-box);
+
@if $input-include-glowing-effect {
@include block-glowing-effect(focus, $glowing-effect-fade-time, $glowing-effect-color);
}
+
// Basic focus styles
&:focus {
background: $input-focus-bg-color;
border-color: $input-focus-border-color;
outline: none;
}
- // Disbaled Styles
+
+ // Disabled Styles
&:disabled {
background-color: $input-disabled-bg;
cursor: $input-disabled-cursor;
@@ -156,7 +171,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
//
// $alignment - Alignment options. Default: false. Options: [right, inline, false]
// $base-style - Control whether or not the base styles come through. Default: true.
-@mixin form-label($alignment:false, $base-style:true) {
+@mixin form-label($alignment: false, $base-style: true) {
// Control whether or not the base styles come through.
@if $base-style {
@@ -170,13 +185,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
}
// Alignment options
- @if $alignment == right {
+ @if $alignment ==right {
float: none !important;
text-align: right;
}
- @else if $alignment == inline {
+
+ @else if $alignment ==inline {
margin: 0 0 $form-spacing 0;
- padding: $form-spacing / 2 + rem-calc($input-border-width) 0;
+ padding: calc($form-spacing / 2) + rem-calc($input-border-width) 0;
}
}
@@ -203,7 +219,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
// $is-button - Toggle position settings if prefix is a button. Default:false
//
-@mixin prefix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {
+@mixin prefix($bg: $input-prefix-bg, $border: $input-prefix-border-color, $is-button: false) {
@if $bg {
$bg-lightness: lightness($bg);
@@ -211,8 +227,13 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
border-#{$opposite-direction}: none;
// Control the font color based on background brightness
- @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
- @else { color: $input-prefix-font-color-alt; }
+ @if $bg-lightness >70% or $bg ==yellow {
+ color: $input-prefix-font-color;
+ }
+
+ @else {
+ color: $input-prefix-font-color-alt;
+ }
}
@if $border {
@@ -235,7 +256,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// We use this mixin to create postfix label styles
// $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
// $is-button - Toggle position settings if prefix is a button. Default: false
-@mixin postfix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {
+@mixin postfix($bg: $input-prefix-bg, $border: $input-prefix-border-color, $is-button: false) {
@if $bg {
$bg-lightness: lightness($bg);
@@ -243,8 +264,13 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
border-#{$default-float}: none;
// Control the font color based on background brightness
- @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
- @else { color: $input-prefix-font-color-alt; }
+ @if $bg-lightness >70% or $bg ==yellow {
+ color: $input-prefix-font-color;
+ }
+
+ @else {
+ color: $input-prefix-font-color-alt;
+ }
}
@if $border {
@@ -282,7 +308,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
//
// We use this mixin to control border and background color of error inputs
// $color - Default: $alert-color (found in settings file)
-@mixin form-error-color($color:$alert-color) {
+@mixin form-error-color($color: $alert-color) {
border-color: $color;
background-color: rgba($color, 0.1);
@@ -297,13 +323,15 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
//
// We use this simple mixin to style labels for error inputs
// $color - Default:$alert-color. Found in settings file
-@mixin form-label-error-color($color:$alert-color) { color: $color; }
+@mixin form-label-error-color($color: $alert-color) {
+ color: $color;
+}
// @MIXIN
//
// We use this mixin to create error message styles
// $bg - Default: $alert-color (Found in settings file)
-@mixin form-error-message($bg:$input-error-message-bg-color) {
+@mixin form-error-message($bg: $input-error-message-bg-color) {
display: block;
padding: $input-error-message-padding;
margin-top: $input-error-message-top;
@@ -315,12 +343,18 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// We can control the text color based on the brightness of the background.
$bg-lightness: lightness($bg);
background: $bg;
- @if $bg-lightness < 70% or $bg == yellow { color: $input-error-message-font-color; }
- @else { color: $input-error-message-font-color-alt; }
+
+ @if $bg-lightness < 70% or $bg ==yellow {
+ color: $input-error-message-font-color;
+ }
+
+ @else {
+ color: $input-error-message-font-color-alt;
+ }
}
// We use this mixin to style select elements
-@mixin form-select {
+@mixin form-select {
-webkit-appearance: none !important;
border-radius: 0;
background-color: $select-bg-color;
@@ -335,25 +369,32 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
// We can safely use leftmost and rightmost now
- background-position: if($text-direction == 'rtl', 0%, 100%) center;
+ background-position: if($text-direction =='rtl', 0%, 100%) center;
background-repeat: no-repeat;
+
border: {
style: $input-border-style;
width: $input-border-width;
color: $input-border-color;
}
- padding: ($form-spacing / 2);
+
+ padding: calc($form-spacing / 2);
font-size: $input-font-size;
font-family: $body-font-family;
color: $input-font-color;
line-height: normal;
@include radius(0);
- &.radius { @include radius($global-radius); }
+
+ &.radius {
+ @include radius($global-radius);
+ }
+
&:hover {
background-color: $select-hover-bg-color;
border-color: $input-focus-border-color;
}
+
// Disabled Styles
&:disabled {
background-color: $input-disabled-bg;
@@ -362,29 +403,44 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
}
// We use this mixin to turn on/off HTML5 number spinners
-@mixin html5number($browser, $on:true) {
+@mixin html5number($browser, $on: true) {
@if $on==false {
- @if $browser==webkit {
- -webkit-appearance: none;
- margin: 0;
- } @else if $browser==moz {
- -moz-appearance: textfield;
- }
+ @if $browser==webkit {
+ -webkit-appearance: none;
+ margin: 0;
+ }
+
+ @else if $browser==moz {
+ -moz-appearance: textfield;
+ }
}
}
@include exports("form") {
@if $include-html-form-classes {
+
/* Standard Forms */
- form { margin: 0 0 $form-spacing; }
+ form {
+ margin: 0 0 $form-spacing;
+ }
/* Using forms within rows, we need to set some defaults */
- form .row { @include form-row-base; }
+ form .row {
+ @include form-row-base;
+ }
/* Label Styles */
- label { @include form-label;
- &.right { @include form-label(right,false); }
- &.inline { @include form-label(inline,false); }
+ label {
+ @include form-label;
+
+ &.right {
+ @include form-label(right, false);
+ }
+
+ &.inline {
+ @include form-label(inline, false);
+ }
+
/* Styles for required inputs */
small {
text-transform: $form-label-small-transform;
@@ -394,29 +450,62 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
/* Attach elements to the beginning or end of an input */
.prefix,
- .postfix { @include prefix-postfix-base; }
+ .postfix {
+ @include prefix-postfix-base;
+ }
/* Adjust padding, alignment and radius if pre/post element is a button */
- .postfix.button { @include button-size(false,false); @include postfix(false, false, true); }
- .prefix.button { @include button-size(false,false); @include prefix(false, false, true); }
+ .postfix.button {
+ @include button-size(false, false);
+ @include postfix(false, false, true);
+ }
- .prefix.button.radius { @include radius(0); @include side-radius($default-float, $button-radius); }
- .postfix.button.radius { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
- .prefix.button.round { @include radius(0); @include side-radius($default-float, $button-round); }
- .postfix.button.round { @include radius(0); @include side-radius($opposite-direction, $button-round); }
+ .prefix.button {
+ @include button-size(false, false);
+ @include prefix(false, false, true);
+ }
+
+ .prefix.button.radius {
+ @include radius(0);
+ @include side-radius($default-float, $button-radius);
+ }
+
+ .postfix.button.radius {
+ @include radius(0);
+ @include side-radius($opposite-direction, $button-radius);
+ }
+
+ .prefix.button.round {
+ @include radius(0);
+ @include side-radius($default-float, $button-round);
+ }
+
+ .postfix.button.round {
+ @include radius(0);
+ @include side-radius($opposite-direction, $button-round);
+ }
/* Separate prefix and postfix styles when on span or label so buttons keep their own */
- span.prefix,label.prefix { @include prefix(); }
- span.postfix,label.postfix { @include postfix(); }
+ span.prefix,
+ label.prefix {
+ @include prefix();
+ }
+
+ span.postfix,
+ label.postfix {
+ @include postfix();
+ }
/* We use this to get basic styling on all basic form elements */
#{text-inputs(all, 'input')} {
-webkit-appearance: none;
border-radius: 0;
@include form-element;
- @if $input-include-glowing-effect == false {
- @include single-transition(all, 0.15s, linear);
+
+ @if $input-include-glowing-effect ==false {
+ @include single-transition(all, 0.15s, linear);
}
+
&.radius {
@include radius($input-border-radius);
}
@@ -425,28 +514,63 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
form {
.row {
.prefix-radius.row.collapse {
+
input,
textarea,
- select { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
- .prefix { @include radius(0); @include side-radius($default-float, $button-radius); }
+ select {
+ @include radius(0);
+ @include side-radius($opposite-direction, $button-radius);
+ }
+
+ .prefix {
+ @include radius(0);
+ @include side-radius($default-float, $button-radius);
+ }
}
+
.postfix-radius.row.collapse {
+
input,
textarea,
- select { @include radius(0); @include side-radius($default-float, $button-radius); }
- .postfix { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
+ select {
+ @include radius(0);
+ @include side-radius($default-float, $button-radius);
+ }
+
+ .postfix {
+ @include radius(0);
+ @include side-radius($opposite-direction, $button-radius);
+ }
}
+
.prefix-round.row.collapse {
+
input,
textarea,
- select { @include radius(0); @include side-radius($opposite-direction, $button-round); }
- .prefix { @include radius(0); @include side-radius($default-float, $button-round); }
+ select {
+ @include radius(0);
+ @include side-radius($opposite-direction, $button-round);
+ }
+
+ .prefix {
+ @include radius(0);
+ @include side-radius($default-float, $button-round);
+ }
}
+
.postfix-round.row.collapse {
+
input,
textarea,
- select { @include radius(0); @include side-radius($default-float, $button-round); }
- .postfix { @include radius(0); @include side-radius($opposite-direction, $button-round); }
+ select {
+ @include radius(0);
+ @include side-radius($default-float, $button-round);
+ }
+
+ .postfix {
+ @include radius(0);
+ @include side-radius($opposite-direction, $button-round);
+ }
}
}
}
@@ -461,10 +585,10 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
height: auto;
}
- /* Not allow resize out of parent */
- textarea {
- max-width: 100%;
- }
+ /* Not allow resize out of parent */
+ textarea {
+ max-width: 100%;
+ }
/* Add height value for select elements to match text input height */
select {
@@ -480,8 +604,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
margin: 0 0 $form-spacing 0;
}
- input[type="checkbox"] + label,
- input[type="radio"] + label {
+ input[type="checkbox"]+label,
+ input[type="radio"]+label {
display: inline-block;
margin-#{$default-float}: $form-spacing * .5;
margin-#{$opposite-direction}: $form-spacing;
@@ -491,13 +615,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
/* Normalize file input width */
input[type="file"] {
- width:100%;
+ width: 100%;
}
/* HTML5 Number spinners settings */
input[type=number] {
@include html5number(moz, $input-number-spinners)
}
+
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
@include html5number(webkit, $input-number-spinners);
@@ -511,17 +636,27 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
/* Error Handling */
#{data('abide')} {
- .error small.error, .error span.error, span.error, small.error {
+
+ .error small.error,
+ .error span.error,
+ span.error,
+ small.error {
@include form-error-message;
}
- span.error, small.error { display: none; }
+
+ span.error,
+ small.error {
+ display: none;
+ }
}
- span.error, small.error {
+ span.error,
+ small.error {
@include form-error-message;
}
.error {
+
input,
textarea,
select {
@@ -542,8 +677,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
@include form-error-message;
}
- > label {
- > small {
+ >label {
+ >small {
color: scale-color($form-label-font-color, $lightness: 15%);
background: transparent;
padding: 0;
@@ -565,6 +700,9 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
select.error {
margin-bottom: 0;
}
- label.error { @include form-label-error-color; }
+
+ label.error {
+ @include form-label-error-color;
+ }
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_global.scss b/_sass/foundation-components/_global.scss
index 37d96eb1dd4..d0137070cec 100644
--- a/_sass/foundation-components/_global.scss
+++ b/_sass/foundation-components/_global.scss
@@ -30,7 +30,7 @@ $base-line-height: 1.5 !default;
//
// We use this to control border radius.
// $radius - Default: $global-radius || 4px
-@mixin radius($radius:$global-radius) {
+@mixin radius($radius: $global-radius) {
@if $radius {
border-radius: $radius;
}
@@ -40,13 +40,15 @@ $base-line-height: 1.5 !default;
//
// We use this to create equal side border radius on elements.
// $side - Options: left, right, top, bottom
-@mixin side-radius($side, $radius:$global-radius) {
- @if ($side == left or $side == right) {
+@mixin side-radius($side, $radius: $global-radius) {
+ @if ($side ==left or $side ==right) {
-webkit-border-bottom-#{$side}-radius: $radius;
-webkit-border-top-#{$side}-radius: $radius;
border-bottom-#{$side}-radius: $radius;
border-top-#{$side}-radius: $radius;
- } @else {
+ }
+
+ @else {
-webkit-#{$side}-left-radius: $radius;
-webkit-#{$side}-right-radius: $radius;
border-#{$side}-left-radius: $radius;
@@ -58,11 +60,14 @@ $base-line-height: 1.5 !default;
//
// We can control whether or not we have inset shadows edges.
// $active - Default: true, Options: false
-@mixin inset-shadow($active:true) {
+@mixin inset-shadow($active: true) {
box-shadow: $shiny-edge-size $shiny-edge-color inset;
- @if $active { &:active {
- box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
+ @if $active {
+ &:active {
+ box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
+ }
+ }
}
// @mixins
@@ -71,17 +76,17 @@ $base-line-height: 1.5 !default;
// $property - Default: all, Options: http://www.w3.org/TR/css3-transitions/#animatable-properties
// $speed - Default: 300ms
// $ease - Default:ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
-@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
+@mixin single-transition($property: all, $speed: 300ms, $ease: ease-out) {
transition: $property $speed $ease;
}
// @mixins
//
// We use this to add box-sizing across browser prefixes
-@mixin box-sizing($type:border-box) {
+@mixin box-sizing($type: border-box) {
-webkit-box-sizing: $type; // Android < 2.3, iOS < 4
- -moz-box-sizing: $type; // Firefox < 29
- box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
+ -moz-box-sizing: $type; // Firefox < 29
+ box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
}
// @mixins
@@ -96,19 +101,23 @@ $base-line-height: 1.5 !default;
width: 0;
height: 0;
border: inset $triangle-size;
- @if ($triangle-direction == top) {
+
+ @if ($triangle-direction ==top) {
border-color: $triangle-color transparent transparent transparent;
border-top-style: solid;
}
- @if ($triangle-direction == bottom) {
+
+ @if ($triangle-direction ==bottom) {
border-color: transparent transparent $triangle-color transparent;
border-bottom-style: solid;
}
- @if ($triangle-direction == left) {
+
+ @if ($triangle-direction ==left) {
border-color: transparent transparent transparent $triangle-color;
border-left-style: solid;
}
- @if ($triangle-direction == right) {
+
+ @if ($triangle-direction ==right) {
border-color: transparent $triangle-color transparent transparent;
border-right-style: solid;
}
@@ -136,29 +145,33 @@ $base-line-height: 1.5 !default;
@if $top {
top: $top;
}
+
@else {
top: 50%;
margin-top: (-$width/2);
}
+
@if $left {
left: $left;
}
+
@else {
left: ($tabbar-menu-icon-width - $width)/2;
}
}
+
@else {
top: 50%;
- margin-top: -($width/2);
+ margin-top: -(calc($width / 2));
#{$opposite-direction}: $topbar-link-padding;
}
- box-shadow:
- 0 0 0 $thickness $color,
- 0 $gap + $thickness 0 $thickness $color,
- 0 (2 * $gap + 2*$thickness) 0 $thickness $color;
+ box-shadow: 0 0 0 $thickness $color,
+ 0 ($gap + $thickness) 0 $thickness $color,
+ 0 (2 * $gap + 2*$thickness) 0 $thickness $color;
width: $width;
}
+
span:hover:after {
box-shadow:
0 0 0 $thickness $hover-color,
@@ -169,8 +182,16 @@ $base-line-height: 1.5 !default;
// We use this to do clear floats
@mixin clearfix {
- &:before, &:after { content: " "; display: table; }
- &:after { clear: both; }
+
+ &:before,
+ &:after {
+ content: " ";
+ display: table;
+ }
+
+ &:after {
+ clear: both;
+ }
}
// @mixins
@@ -179,7 +200,7 @@ $base-line-height: 1.5 !default;
// $selector - Used for selector state. Default: focus, Options: hover, active, visited
// $fade-time - Default: 300ms
// $glowing-effect-color - Default: fade-out($primary-color, .25)
-@mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) {
+@mixin block-glowing-effect($selector: focus, $fade-time: 300ms, $glowing-effect-color: fade-out($primary-color, .25)) {
transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
&:#{$selector} {
@@ -193,8 +214,8 @@ $base-line-height: 1.5 !default;
// We use this to translate elements in 2D
// $horizontal: Default: 0
// $vertical: Default: 0
-@mixin translate2d($horizontal:0, $vertical:0) {
- transform: translate($horizontal,$vertical)
+@mixin translate2d($horizontal: 0, $vertical: 0) {
+ transform: translate($horizontal, $vertical)
}
// @mixins
@@ -220,33 +241,33 @@ $base-line-height: 1.5 !default;
clip: auto;
}
-$white : #FFFFFF !default;
-$ghost : #FAFAFA !default;
-$snow : #F9F9F9 !default;
-$vapor : #F6F6F6 !default;
-$white-smoke : #F5F5F5 !default;
-$silver : #EFEFEF !default;
-$smoke : #EEEEEE !default;
-$gainsboro : #DDDDDD !default;
-$iron : #CCCCCC !default;
-$base : #AAAAAA !default;
-$aluminum : #999999 !default;
-$jumbo : #888888 !default;
-$monsoon : #777777 !default;
-$steel : #666666 !default;
-$charcoal : #555555 !default;
-$tuatara : #444444 !default;
-$oil : #333333 !default;
-$jet : #222222 !default;
-$black : #000000 !default;
+$white : #FFFFFF !default;
+$ghost : #FAFAFA !default;
+$snow : #F9F9F9 !default;
+$vapor : #F6F6F6 !default;
+$white-smoke : #F5F5F5 !default;
+$silver : #EFEFEF !default;
+$smoke : #EEEEEE !default;
+$gainsboro : #DDDDDD !default;
+$iron : #CCCCCC !default;
+$base : #AAAAAA !default;
+$aluminum : #999999 !default;
+$jumbo : #888888 !default;
+$monsoon : #777777 !default;
+$steel : #666666 !default;
+$charcoal : #555555 !default;
+$tuatara : #444444 !default;
+$oil : #333333 !default;
+$jet : #222222 !default;
+$black : #000000 !default;
// We use these as default colors throughout
-$primary-color: #008CBA !default; // bondi-blue
+$primary-color: #008CBA !default; // bondi-blue
$secondary-color: #e7e7e7 !default; // white-lilac
-$alert-color: #f04124 !default; // cinnabar
-$success-color: #43AC6A !default; // sea-green
-$warning-color: #f08a24 !default; // carrot
-$info-color: #a0d3e8 !default; // cornflower
+$alert-color: #f04124 !default; // cinnabar
+$success-color: #43AC6A !default; // sea-green
+$warning-color: #f08a24 !default; // carrot
+$info-color: #a0d3e8 !default; // cornflower
// We use these to define default font stacks
$font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default;
@@ -271,10 +292,13 @@ $font-smoothing: antialiased !default;
$text-direction: ltr !default;
$default-float: left !default;
$opposite-direction: right !default;
-@if $text-direction == ltr {
+
+@if $text-direction ==ltr {
$default-float: left;
$opposite-direction: right;
-} @else {
+}
+
+@else {
$default-float: right;
$opposite-direction: left;
}
@@ -296,11 +320,21 @@ $include-html-global-classes: $include-html-classes !default;
$column-gutter: rem-calc(30) !default;
// Media Query Ranges
-$small-range: (0, 40em) !default;
-$medium-range: (40.063em, 64em) !default;
-$large-range: (64.063em, 90em) !default;
-$xlarge-range: (90.063em, 120em) !default;
-$xxlarge-range: (120.063em, 99999999em) !default;
+$small-range: (
+ 0,
+ 40em) !default;
+$medium-range: (
+ 40.063em,
+ 64em) !default;
+$large-range: (
+ 64.063em,
+ 90em) !default;
+$xlarge-range: (
+ 90.063em,
+ 120em) !default;
+$xxlarge-range: (
+ 120.063em,
+ 99999999em) !default;
$screen: "only screen" !default;
@@ -340,7 +374,7 @@ $cursor-text-value: text !default;
@include exports("global") {
- // Meta styles are included in all builds, as they are a dependancy of the Javascript.
+ // Meta styles are included in all builds, as they are a dependency of the Javascript.
// Used to provide media query values for javascript components.
// Forward slash placed around everything to convince PhantomJS to read the value.
@@ -350,131 +384,164 @@ $cursor-text-value: text !default;
meta.foundation-mq-small {
font-family: "/" + unquote($small-up) + "/";
- width: lower-bound($small-range);
- }
+ width: lower-bound($small-range
+ );
+}
- meta.foundation-mq-small-only {
- font-family: "/" + unquote($small-only) + "/";
- width: lower-bound($small-range);
- }
+meta.foundation-mq-small-only {
+ font-family: "/" + unquote($small-only) + "/";
+ width: lower-bound($small-range);
+}
- meta.foundation-mq-medium {
- font-family: "/" + unquote($medium-up) + "/";
- width: lower-bound($medium-range);
- }
+meta.foundation-mq-medium {
+ font-family: "/" + unquote($medium-up) + "/";
+ width: lower-bound($medium-range);
+}
- meta.foundation-mq-medium-only {
- font-family: "/" + unquote($medium-only) + "/";
- width: lower-bound($medium-range);
- }
+meta.foundation-mq-medium-only {
+ font-family: "/" + unquote($medium-only) + "/";
+ width: lower-bound($medium-range);
+}
- meta.foundation-mq-large {
- font-family: "/" + unquote($large-up) + "/";
- width: lower-bound($large-range);
- }
+meta.foundation-mq-large {
+ font-family: "/" + unquote($large-up) + "/";
+ width: lower-bound($large-range);
+}
+
+meta.foundation-mq-large-only {
+ font-family: "/" + unquote($large-only) + "/";
+ width: lower-bound($large-range);
+}
+
+meta.foundation-mq-xlarge {
+ font-family: "/" + unquote($xlarge-up) + "/";
+ width: lower-bound($xlarge-range);
+}
+
+meta.foundation-mq-xlarge-only {
+ font-family: "/" + unquote($xlarge-only) + "/";
+ width: lower-bound($xlarge-range);
+}
- meta.foundation-mq-large-only {
- font-family: "/" + unquote($large-only) + "/";
- width: lower-bound($large-range);
+meta.foundation-mq-xxlarge {
+ font-family: "/" + unquote($xxlarge-up) + "/";
+ width: lower-bound($xxlarge-range);
+}
+
+meta.foundation-data-attribute-namespace {
+ font-family: #{$namespace};
+}
+
+@if $include-html-global-classes {
+
+ // Must be 100% for off canvas to work
+ html,
+ body {
+ height: 100%;
}
- meta.foundation-mq-xlarge {
- font-family: "/" + unquote($xlarge-up) + "/";
- width: lower-bound($xlarge-range);
+ // Set box-sizing globally to handle padding and border widths
+ *,
+ *:before,
+ *:after {
+ @include box-sizing(border-box);
}
- meta.foundation-mq-xlarge-only {
- font-family: "/" + unquote($xlarge-only) + "/";
- width: lower-bound($xlarge-range);
+ html,
+ body {
+ font-size: $base-font-size;
}
- meta.foundation-mq-xxlarge {
- font-family: "/" + unquote($xxlarge-up) + "/";
- width: lower-bound($xxlarge-range);
+ // Default body styles
+ body {
+ background: $body-bg;
+ color: $body-font-color;
+ padding: 0;
+ margin: 0;
+ font-family: $body-font-family;
+ font-weight: $body-font-weight;
+ font-style: $body-font-style;
+ line-height: $base-line-height; // Set to $base-line-height to take on browser default of 150%
+ position: relative;
+ cursor: $cursor-auto-value;
}
- meta.foundation-data-attribute-namespace {
- font-family: #{$namespace};
+ a:hover {
+ cursor: $cursor-pointer-value;
}
- @if $include-html-global-classes {
+ // Grid Defaults to get images and embeds to work properly
+ img {
+ max-width: 100%;
+ height: auto;
+ }
- // Must be 100% for off canvas to work
- html, body { height: 100%; }
+ img {
+ -ms-interpolation-mode: bicubic;
+ }
- // Set box-sizing globally to handle padding and border widths
- *,
- *:before,
- *:after {
- @include box-sizing(border-box);
- }
+ #map_canvas,
+ .map_canvas {
- html,
- body { font-size: $base-font-size; }
-
- // Default body styles
- body {
- background: $body-bg;
- color: $body-font-color;
- padding: 0;
- margin: 0;
- font-family: $body-font-family;
- font-weight: $body-font-weight;
- font-style: $body-font-style;
- line-height: $base-line-height; // Set to $base-line-height to take on browser default of 150%
- position: relative;
- cursor: $cursor-auto-value;
+ img,
+ embed,
+ object {
+ max-width: none !important;
}
+ }
- a:hover { cursor: $cursor-pointer-value; }
-
- // Grid Defaults to get images and embeds to work properly
- img { max-width: 100%; height: auto; }
-
- img { -ms-interpolation-mode: bicubic; }
+ // Miscellaneous useful HTML classes
+ .left {
+ float: left !important;
+ }
- #map_canvas,
- .map_canvas {
- img,
- embed,
- object { max-width: none !important;
- }
- }
+ .right {
+ float: right !important;
+ }
- // Miscellaneous useful HTML classes
- .left { float: left !important; }
- .right { float: right !important; }
- .clearfix { @include clearfix; }
+ .clearfix {
+ @include clearfix;
+ }
- // Hide visually and from screen readers
- .hide {
- display: none !important;
- visibility: hidden;
- }
+ // Hide visually and from screen readers
+ .hide {
+ display: none !important;
+ visibility: hidden;
+ }
- // Hide visually and from screen readers, but maintain layout
- .invisible { visibility: hidden; }
+ // Hide visually and from screen readers, but maintain layout
+ .invisible {
+ visibility: hidden;
+ }
- // Font smoothing
- // Antialiased font smoothing works best for light text on a dark background.
- // Apply to single elements instead of globally to body.
- // Note this only applies to webkit-based desktop browsers and Firefox 25 (and later) on the Mac.
- .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+ // Font smoothing
+ // Antialiased font smoothing works best for light text on a dark background.
+ // Apply to single elements instead of globally to body.
+ // Note this only applies to webkit-based desktop browsers and Firefox 25 (and later) on the Mac.
+ .antialiased {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
- // Get rid of gap under images by making them display: inline-block; by default
- img {
- display: inline-block;
- vertical-align: middle;
- }
+ // Get rid of gap under images by making them display: inline-block; by default
+ img {
+ display: inline-block;
+ vertical-align: middle;
+ }
- //
- // Global resets for forms
- //
+ //
+ // Global resets for forms
+ //
- // Make sure textarea takes on height automatically
- textarea { height: auto; min-height: 50px; }
+ // Make sure textarea takes on height automatically
+ textarea {
+ height: auto;
+ min-height: 50px;
+ }
- // Make select elements 100% width by default
- select { width: 100%; }
+ // Make select elements 100% width by default
+ select {
+ width: 100%;
}
}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_grid.scss b/_sass/foundation-components/_grid.scss
index aa4e77cdef7..8ad18546502 100644
--- a/_sass/foundation-components/_grid.scss
+++ b/_sass/foundation-components/_grid.scss
@@ -29,7 +29,7 @@ $last-child-float: $opposite-direction !default;
// $colNumber - Found in settings file
// $totalColumns - Found in settings file
@function grid-calc($colNumber, $totalColumns) {
- @return percentage(($colNumber / $totalColumns));
+ @return percentage(calc($colNumber / $totalColumns));
}
//
@@ -43,24 +43,24 @@ $last-child-float: $opposite-direction !default;
@mixin grid-row($behavior: false) {
// use @include grid-row(nest); to include a nested row
- @if $behavior == nest {
+ @if $behavior ==nest {
width: auto;
- margin-#{$default-float}: -($column-gutter/2);
- margin-#{$opposite-direction}: -($column-gutter/2);
+ margin-#{$default-float}: - calc($column-gutter/2);
+ margin-#{$opposite-direction}: - calc($column-gutter/2);
margin-top: 0;
margin-bottom: 0;
max-width: none;
}
// use @include grid-row(collapse); to collapsed a container row margins
- @else if $behavior == collapse {
+ @else if $behavior ==collapse {
width: 100%;
margin: 0;
max-width: $row-width;
}
// use @include grid-row(nest-collapse); to collapse outer margins on a nested row
- @else if $behavior == nest-collapse {
+ @else if $behavior ==nest-collapse {
width: auto;
margin: 0;
max-width: none;
@@ -90,16 +90,15 @@ $last-child-float: $opposite-direction !default;
// $pull - # of columns to pull. Default: false.
// $collapse - Get rid of gutter padding on column? Default: false.
// $float - Should this float? Default: true. Options: true, false, left, right.
-@mixin grid-column(
- $columns:false,
- $last-column:false,
- $center:false,
- $offset:false,
- $push:false,
- $pull:false,
- $collapse:false,
- $float:true,
- $position:false) {
+@mixin grid-column($columns: false,
+ $last-column: false,
+ $center: false,
+ $offset: false,
+ $push: false,
+ $pull: false,
+ $collapse: false,
+ $float: true,
+ $position: false) {
// If positioned for default .column, include relative position
// push and pull require position set
@@ -115,9 +114,9 @@ $last-child-float: $opposite-direction !default;
// Gutter padding whenever a column isn't set to collapse
// (use $collapse:null to do nothing)
- @else if $collapse == false {
- padding-left: ($column-gutter / 2);
- padding-right: ($column-gutter / 2);
+ @else if $collapse ==false {
+ padding-left: calc($column-gutter / 2);
+ padding-right: calc($column-gutter / 2);
}
// If a column number is given, calculate width
@@ -125,17 +124,34 @@ $last-child-float: $opposite-direction !default;
width: grid-calc($columns, $total-columns);
// If last column, float naturally instead of to the right
- @if $last-column { float: $opposite-direction; }
+ @if $last-column {
+ float: $opposite-direction;
+ }
}
// Source Ordering, adds left/right depending on which you use.
- @if $push { #{$default-float}: grid-calc($push, $total-columns); #{$opposite-direction}: auto; }
- @if $pull { #{$opposite-direction}: grid-calc($pull, $total-columns); #{$default-float}: auto; }
+ @if $push {
+ #{$default-float}: grid-calc($push, $total-columns);
+ #{$opposite-direction}: auto;
+ }
+
+ @if $pull {
+ #{$opposite-direction}: grid-calc($pull, $total-columns);
+ #{$default-float}: auto;
+ }
@if $float {
- @if $float == left or $float == true { float: $default-float; }
- @else if $float == right { float: $opposite-direction; }
- @else { float: none; }
+ @if $float ==left or $float ==true {
+ float: $default-float;
+ }
+
+ @else if $float ==right {
+ float: $opposite-direction;
+ }
+
+ @else {
+ float: none;
+ }
}
// If centered, get rid of float and add appropriate margins
@@ -146,7 +162,9 @@ $last-child-float: $opposite-direction !default;
}
// If offset, calculate appropriate margins
- @if $offset { margin-#{$default-float}: grid-calc($offset, $total-columns) !important; }
+ @if $offset {
+ margin-#{$default-float}: grid-calc($offset, $total-columns) !important;
+ }
}
@@ -157,23 +175,30 @@ $last-child-float: $opposite-direction !default;
@for $i from 0 through $total-columns - 1 {
.#{$size}-push-#{$i} {
- @include grid-column($push:$i, $collapse:null, $float:false);
+ @include grid-column($push: $i, $collapse: null, $float: false);
}
+
.#{$size}-pull-#{$i} {
- @include grid-column($pull:$i, $collapse:null, $float:false);
+ @include grid-column($pull: $i, $collapse: null, $float: false);
}
}
.column,
- .columns { @include grid-column($columns:false, $position:true); }
+ .columns {
+ @include grid-column($columns: false, $position: true);
+ }
@for $i from 1 through $total-columns {
- .#{$size}-#{$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
+ .#{$size}-#{$i} {
+ @include grid-column($columns: $i, $collapse: null, $float: false);
+ }
}
@for $i from 0 through $total-columns - 1 {
- .#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
+ .#{$size}-offset-#{$i} {
+ @include grid-column($offset: $i, $collapse: null, $float: false);
+ }
}
.#{$size}-reset-order {
@@ -185,7 +210,9 @@ $last-child-float: $opposite-direction !default;
}
.column.#{$size}-centered,
- .columns.#{$size}-centered { @include grid-column($center:true, $collapse:null, $float:false); }
+ .columns.#{$size}-centered {
+ @include grid-column($center: true, $collapse: null, $float: false);
+ }
.column.#{$size}-uncentered,
.columns.#{$size}-uncentered {
@@ -196,7 +223,7 @@ $last-child-float: $opposite-direction !default;
// Fighting [class*="column"] + [class*="column"]:last-child
.column.#{$size}-centered:last-child,
- .columns.#{$size}-centered:last-child{
+ .columns.#{$size}-centered:last-child {
float: none;
}
@@ -211,20 +238,28 @@ $last-child-float: $opposite-direction !default;
float: $opposite-direction;
}
- .row {
- &.#{$size}-collapse {
- > .column,
- > .columns { @include grid-column($collapse:true, $float:false); }
-
- .row {margin-left:0; margin-right:0;}
- }
- &.#{$size}-uncollapse {
- > .column,
- > .columns {
- @include grid-column;
- }
- }
- }
+ .row {
+ &.#{$size}-collapse {
+
+ >.column,
+ >.columns {
+ @include grid-column($collapse: true, $float: false);
+ }
+
+ .row {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ }
+
+ &.#{$size}-uncollapse {
+
+ >.column,
+ >.columns {
+ @include grid-column;
+ }
+ }
+ }
}
@include exports("grid") {
@@ -233,57 +268,81 @@ $last-child-float: $opposite-direction !default;
@include grid-row;
&.collapse {
- > .column,
- > .columns { @include grid-column($collapse:true, $float:false); }
- .row {margin-left:0; margin-right:0;}
+ >.column,
+ >.columns {
+ @include grid-column($collapse: true, $float: false);
+ }
+
+ .row {
+ margin-left: 0;
+ margin-right: 0;
+ }
}
- .row { @include grid-row($behavior:nest);
- &.collapse { @include grid-row($behavior:nest-collapse); }
+ .row {
+ @include grid-row($behavior: nest);
+
+ &.collapse {
+ @include grid-row($behavior: nest-collapse);
+ }
}
}
.column,
- .columns { @include grid-column($columns:$total-columns); }
+ .columns {
+ @include grid-column($columns: $total-columns);
+ }
- [class*="column"] + [class*="column"]:last-child { float: $last-child-float; }
- [class*="column"] + [class*="column"].end { float: $default-float; }
+ [class*="column"]+[class*="column"]:last-child {
+ float: $last-child-float;
+ }
+
+ [class*="column"]+[class*="column"].end {
+ float: $default-float;
+ }
@media #{$small-up} {
- @include grid-html-classes($size:small);
+ @include grid-html-classes($size: small);
}
@media #{$medium-up} {
- @include grid-html-classes($size:medium);
+ @include grid-html-classes($size: medium);
+
// Old push and pull classes
@for $i from 0 through $total-columns - 1 {
.push-#{$i} {
- @include grid-column($push:$i, $collapse:null, $float:false);
+ @include grid-column($push: $i, $collapse: null, $float: false);
}
+
.pull-#{$i} {
- @include grid-column($pull:$i, $collapse:null, $float:false);
+ @include grid-column($pull: $i, $collapse: null, $float: false);
}
}
}
+
@media #{$large-up} {
- @include grid-html-classes($size:large);
+ @include grid-html-classes($size: large);
+
@for $i from 0 through $total-columns - 1 {
.push-#{$i} {
- @include grid-column($push:$i, $collapse:null, $float:false);
+ @include grid-column($push: $i, $collapse: null, $float: false);
}
+
.pull-#{$i} {
- @include grid-column($pull:$i, $collapse:null, $float:false);
+ @include grid-column($pull: $i, $collapse: null, $float: false);
}
}
}
}
+
@if $include-xl-html-grid-classes {
@media #{$xlarge-up} {
- @include grid-html-classes($size:xlarge);
+ @include grid-html-classes($size: xlarge);
}
+
@media #{$xxlarge-up} {
- @include grid-html-classes($size:xxlarge);
+ @include grid-html-classes($size: xxlarge);
}
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_panels.scss b/_sass/foundation-components/_panels.scss
index b3018e32e05..b7bba360f3a 100644
--- a/_sass/foundation-components/_panels.scss
+++ b/_sass/foundation-components/_panels.scss
@@ -29,6 +29,7 @@ $panel-font-color-alt: $white !default;
$panel-header-adjust: true !default;
$callout-panel-link-color: $primary-color !default;
$callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%) !default;
+
//
// @mixins
//
@@ -36,7 +37,7 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne
// $bg - Sets the panel background color. Default: $panel-pg || scale-color($white, $lightness: -5%) !default
// $padding - Sets the panel padding amount. Default: $panel-padding || rem-calc(20)
// $adjust - Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust || true
-@mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust) {
+@mixin panel($bg: $panel-bg, $padding: $panel-padding, $adjust: $panel-header-adjust) {
@if $bg {
$bg-lightness: lightness($bg);
@@ -48,26 +49,70 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne
padding: $padding;
background: $bg;
- @if $bg-lightness >= 50% { color: $panel-font-color; }
- @else { color: $panel-font-color-alt; }
+
+ @if $bg-lightness >=50% {
+ color: $panel-font-color;
+ }
+
+ @else {
+ color: $panel-font-color-alt;
+ }
// Respect the padding, fool.
- &>:first-child { margin-top: 0; }
- &>:last-child { margin-bottom: 0; }
+ &>:first-child {
+ margin-top: 0;
+ }
+
+ &>:last-child {
+ margin-bottom: 0;
+ }
@if $adjust {
+
// We set the font color based on the darkness of the bg.
- @if $bg-lightness >= 50% {
- h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color; }
+ @if $bg-lightness >=50% {
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ p,
+ li,
+ dl {
+ color: $panel-font-color;
+ }
}
- @else {
- h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color-alt; }
+
+ @else {
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ p,
+ li,
+ dl {
+ color: $panel-font-color-alt;
+ }
}
// reset header line-heights for panels
- h1,h2,h3,h4,h5,h6 {
- line-height: 1; margin-bottom: rem-calc(20) / 2;
- &.subheader { line-height: 1.4; }
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ line-height: 1;
+ margin-bottom: calc(rem-calc(20) / 2);
+
+ &.subheader {
+ line-height: 1.4;
+ }
}
}
}
@@ -77,10 +122,12 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne
@if $include-html-panel-classes {
/* Panels */
- .panel { @include panel;
+ .panel {
+ @include panel;
&.callout {
@include panel(scale-color($primary-color, $lightness: 94%));
+
a:not(.button) {
color: $callout-panel-link-color;
@@ -98,4 +145,4 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne
}
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_side-nav.scss b/_sass/foundation-components/_side-nav.scss
index d16be157135..ba29e6e6f63 100644
--- a/_sass/foundation-components/_side-nav.scss
+++ b/_sass/foundation-components/_side-nav.scss
@@ -22,7 +22,7 @@ $side-nav-list-margin: rem-calc(0 0 7 0) !default;
$side-nav-link-color: $primary-color !default;
$side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%) !default;
$side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%) !default;
-$side-nav-link-bg-hover: hsla(0, 0, 0, 0.025) !default;
+$side-nav-link-bg-hover: hsla(0deg, 0%, 0%, 0.025) !default;
$side-nav-link-margin: 0 !default;
$side-nav-link-padding: rem-calc(7 14) !default;
$side-nav-font-size: rem-calc(14) !default;
@@ -54,12 +54,11 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
// $font-size - Font size of nav items. Default: $side-nav-font-size.
// $link-color - Color of navigation links. Default: $side-nav-link-color.
// $link-color-hover - Color of navigation links when hovered. Default: $side-nav-link-color-hover.
-@mixin side-nav(
- $divider-color:$side-nav-divider-color,
- $font-size:$side-nav-font-size,
- $link-color:$side-nav-link-color,
- $link-color-hover:$side-nav-link-color-hover,
- $link-bg-hover:$side-nav-link-bg-hover) {
+@mixin side-nav($divider-color: $side-nav-divider-color,
+ $font-size: $side-nav-font-size,
+ $link-color: $side-nav-link-color,
+ $link-color-hover: $side-nav-link-color-hover,
+ $link-bg-hover: $side-nav-link-bg-hover) {
display: block;
margin: 0;
padding: $side-nav-padding;
@@ -77,6 +76,7 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
color: $link-color;
margin: $side-nav-link-margin;
padding: $side-nav-link-padding;
+
&:hover,
&:focus {
background: $link-bg-hover;
@@ -84,7 +84,7 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
}
}
- &.active > a:first-child:not(.button) {
+ &.active>a:first-child:not(.button) {
color: $side-nav-link-color-active;
font-weight: $side-nav-font-weight-active;
font-family: $side-nav-font-family-active;
@@ -100,10 +100,12 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
&.heading {
color: $side-nav-heading-color;
+
font: {
size: $side-nav-heading-font-size;
weight: $side-nav-heading-font-weight;
}
+
text-transform: $side-nav-heading-text-transform;
}
}
@@ -111,6 +113,8 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
@include exports("side-nav") {
@if $include-html-nav-classes {
- .side-nav { @include side-nav; }
+ .side-nav {
+ @include side-nav;
+ }
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_top-bar.scss b/_sass/foundation-components/_top-bar.scss
index ce59a47d599..b6d5ffa10dc 100644
--- a/_sass/foundation-components/_top-bar.scss
+++ b/_sass/foundation-components/_top-bar.scss
@@ -39,7 +39,7 @@ $topbar-link-bg-active: $primary-color !default;
$topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
$topbar-link-font-family: $body-font-family !default;
$topbar-link-text-transform: none !default;
-$topbar-link-padding: ($topbar-height / 3) !default;
+$topbar-link-padding: calc($topbar-height / 3) !default;
$topbar-back-link-size: rem-calc(18) !default;
$topbar-link-dropdown-padding: rem-calc(20) !default;
$topbar-button-font-size: 0.75rem !default;
@@ -119,7 +119,9 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
width: 100%;
background: $topbar-bg;
- .top-bar { margin-bottom: $topbar-margin-bottom; }
+ .top-bar {
+ margin-bottom: $topbar-margin-bottom;
+ }
}
// Wrapped around .top-bar to make it stick to the top
@@ -141,6 +143,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
width: 100%;
z-index: 99;
}
+
// Ensure you can scroll the menu on small screens
.top-bar-section {
z-index: 98;
@@ -163,19 +166,24 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
list-style: none;
}
- .row { max-width: none; }
+ .row {
+ max-width: none;
+ }
form,
- input { margin-bottom: 0; }
+ input {
+ margin-bottom: 0;
+ }
- input {
- height: $topbar-input-height;
- padding-top: .35rem;
- padding-bottom: .35rem;
- font-size: $topbar-button-font-size;
+ input {
+ height: $topbar-input-height;
+ padding-top: .35rem;
+ padding-bottom: .35rem;
+ font-size: $topbar-button-font-size;
}
- .button, button {
+ .button,
+ button {
padding-top: .35rem + rem-calc(1);
padding-bottom: .35rem + rem-calc(1);
margin-bottom: 0;
@@ -201,10 +209,16 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
margin: 0;
font-size: $rem-base;
- h1, h2, h3, h4, p, span {
+ h1,
+ h2,
+ h3,
+ h4,
+ p,
+ span {
line-height: $topbar-height;
font-size: $topbar-title-font-size;
margin: 0;
+
a {
font-weight: $topbar-title-weight;
color: $topbar-link-color;
@@ -239,9 +253,10 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
margin-top: -16px;
a {
- @if $text-direction == rtl {
+ @if $text-direction ==rtl {
text-indent: -58px;
}
+
height: 34px;
line-height: 33px;
padding: 0 $topbar-link-padding+rem-calc(25) 0 $topbar-link-padding;
@@ -271,16 +286,20 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
height: auto;
background: transparent;
- .title-area { background: $topbar-bg; }
+ .title-area {
+ background: $topbar-bg;
+ }
.toggle-topbar {
- a { color: $topbar-menu-link-color-toggled;
- span::after {
+ a {
+ color: $topbar-menu-link-color-toggled;
+
+ span::after {
// Shh, don't tell, but box-shadows create the menu icon :)
// Change the color of the bars when the menu is expanded, using given thickness from hamburger() above
box-shadow: 0 0 0 1px $topbar-menu-icon-color-toggled,
- 0 7px 0 1px $topbar-menu-icon-color-toggled,
- 0 14px 0 1px $topbar-menu-icon-color-toggled;
+ 0 7px 0 1px $topbar-menu-icon-color-toggled,
+ 0 14px 0 1px $topbar-menu-icon-color-toggled;
}
}
}
@@ -313,7 +332,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
ul li {
background: $topbar-dropdown-bg;
- & > a {
+
+ &>a {
display: block;
width: 100%;
color: $topbar-link-color;
@@ -328,39 +348,65 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
font-size: $topbar-link-font-size;
padding-#{$opposite-direction}: $topbar-link-padding;
padding-#{$default-float}: $topbar-link-padding;
- @include button-style($bg:$primary-color);
+ @include button-style($bg: $primary-color);
+ }
+
+ &.button.secondary {
+ @include button-style($bg: $secondary-color);
+ }
+
+ &.button.success {
+ @include button-style($bg: $success-color);
+ }
+
+ &.button.alert {
+ @include button-style($bg: $alert-color);
+ }
+
+ &.button.warning {
+ @include button-style($bg: $warning-color);
}
- &.button.secondary { @include button-style($bg:$secondary-color); }
- &.button.success { @include button-style($bg:$success-color); }
- &.button.alert { @include button-style($bg:$alert-color); }
- &.button.warning { @include button-style($bg:$warning-color); }
}
- > button {
+ >button {
font-size: $topbar-link-font-size;
padding-#{$opposite-direction}: $topbar-link-padding;
padding-#{$default-float}: $topbar-link-padding;
- @include button-style($bg:$primary-color);
+ @include button-style($bg: $primary-color);
+
+ &.secondary {
+ @include button-style($bg: $secondary-color);
+ }
- &.secondary { @include button-style($bg:$secondary-color); }
- &.success { @include button-style($bg:$success-color); }
- &.alert { @include button-style($bg:$alert-color); }
- &.warning { @include button-style($bg:$warning-color); }
+ &.success {
+ @include button-style($bg: $success-color);
+ }
+
+ &.alert {
+ @include button-style($bg: $alert-color);
+ }
+
+ &.warning {
+ @include button-style($bg: $warning-color);
+ }
}
// Apply the hover link color when it has that class
- &:hover:not(.has-form) > a {
+ &:hover:not(.has-form)>a {
background-color: $topbar-link-bg-color-hover;
+
@if ($topbar-link-bg-hover) {
background: $topbar-link-bg-hover;
}
+
color: $topbar-link-color-hover;
}
// Apply the active link color when it has that class
- &.active > a {
+ &.active>a {
background: $topbar-link-bg-active;
color: $topbar-link-color-active;
+
&:hover {
background: $topbar-link-bg-active-hover;
color: $topbar-link-color-active-hover;
@@ -369,31 +415,37 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
// Add some extra padding for list items contains buttons
- .has-form { padding: $topbar-link-padding; }
+ .has-form {
+ padding: $topbar-link-padding;
+ }
// Styling for list items that have a dropdown within them.
.has-dropdown {
position: relative;
- & > a {
+ &>a {
&:after {
- @if ($topbar-arrows){
+ @if ($topbar-arrows) {
@include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
}
+
margin-#{$opposite-direction}: $topbar-link-padding;
- margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
+ margin-top: -(calc($topbar-dropdown-toggle-size / 2)) - 2;
position: absolute;
top: 50%;
#{$opposite-direction}: 0;
}
}
- &.moved { position: static;
- & > .dropdown {
+ &.moved {
+ position: static;
+
+ &>.dropdown {
@include topbar-show-dropdown();
width: 100%;
}
- & > a:after {
+
+ &>a:after {
display: none;
}
}
@@ -415,25 +467,38 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
a {
font-weight: $topbar-dropdown-link-weight;
padding: 8px $topbar-link-padding;
+
&.parent-link {
font-weight: $topbar-link-weight;
}
}
- &.title h5, &.parent-link {
+ &.title h5,
+ &.parent-link {
// Back Button
margin-bottom: 0;
margin-top: 0;
font-size: $topbar-back-link-size;
+
a {
color: $topbar-link-color;
// line-height: ($topbar-height / 2);
display: block;
- &:hover { background:none; }
+
+ &:hover {
+ background: none;
+ }
}
}
- &.has-form { padding: 8px $topbar-link-padding; }
- .button, button { top: auto; }
+
+ &.has-form {
+ padding: 8px $topbar-link-padding;
+ }
+
+ .button,
+ button {
+ top: auto;
+ }
}
label {
@@ -447,7 +512,9 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
}
- .js-generated { display: block; }
+ .js-generated {
+ display: block;
+ }
// Top Bar styles intended for screen sizes above the breakpoint.
@@ -457,10 +524,17 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
@include clearfix;
overflow: visible;
- .toggle-topbar { display: none; }
+ .toggle-topbar {
+ display: none;
+ }
+
+ .title-area {
+ float: $default-float;
+ }
- .title-area { float: $default-float; }
- .name h1 a { width: auto; }
+ .name h1 a {
+ width: auto;
+ }
input,
.button,
@@ -468,10 +542,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
font-size: rem-calc(14);
position: relative;
height: $topbar-input-height;
- top: (($topbar-height - $topbar-input-height) / 2);
+ top: calc(($topbar-height - $topbar-input-height) / 2);
}
- &.expanded { background: $topbar-bg; }
+ &.expanded {
+ background: $topbar-bg;
+ }
}
.contain-to-grid .top-bar {
@@ -481,7 +557,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
.top-bar-section {
- @include single-transition(none,0,0);
+ @include single-transition(none, 0, 0);
#{$default-float}: 0 !important;
ul {
@@ -491,39 +567,49 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
li {
float: $default-float;
- .js-generated { display: none; }
+
+ .js-generated {
+ display: none;
+ }
}
}
li {
&.hover {
- > a:not(.button) {
+ >a:not(.button) {
background-color: $topbar-link-bg-color-hover;
+
@if ($topbar-link-bg-hover) {
background: $topbar-link-bg-hover;
}
+
color: $topbar-link-color-hover;
}
}
+
&:not(.has-form) {
a:not(.button) {
padding: 0 $topbar-link-padding;
line-height: $topbar-height;
background: $topbar-link-bg;
+
&:hover {
background-color: $topbar-link-bg-color-hover;
+
@if ($topbar-link-bg-hover) {
background: $topbar-link-bg-hover;
}
}
}
}
+
&.active:not(.has-form) {
a:not(.button) {
padding: 0 $topbar-link-padding;
line-height: $topbar-height;
color: $topbar-link-color-active;
background: $topbar-link-bg-active;
+
&:hover {
background: $topbar-link-bg-active-hover;
color: $topbar-link-color-active-hover;
@@ -533,35 +619,40 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
.has-dropdown {
- @if($topbar-arrows){
- & > a {
+ @if($topbar-arrows) {
+ &>a {
padding-#{$opposite-direction}: $topbar-link-padding + $topbar-link-dropdown-padding !important;
+
&:after {
@include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
- margin-top: -($topbar-dropdown-toggle-size / 2);
- top: ($topbar-height / 2);
+ margin-top: -(calc($topbar-dropdown-toggle-size / 2));
+ top: calc($topbar-height / 2);
}
}
}
- &.moved { position: relative;
- & > .dropdown {
+ &.moved {
+ position: relative;
+
+ &>.dropdown {
@include topbar-hide-dropdown();
}
}
- &.hover, &.not-click:hover {
- & > .dropdown {
+ &.hover,
+ &.not-click:hover {
+ &>.dropdown {
@include topbar-show-dropdown();
}
}
- > a:focus + .dropdown {
+
+ >a:focus+.dropdown {
@include topbar-show-dropdown();
}
.dropdown li.has-dropdown {
- & > a {
- @if ($topbar-dropdown-arrows){
+ &>a {
+ @if ($topbar-dropdown-arrows) {
&:after {
border: none;
content: "\00bb";
@@ -591,14 +682,15 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
&:not(.has-form):not(.active) {
- & > a:not(.button) {
+ &>a:not(.button) {
color: $topbar-dropdown-link-color;
background: $topbar-dropdown-link-bg;
}
- &:hover > a:not(.button) {
+ &:hover>a:not(.button) {
color: $topbar-dropdown-link-color-hover;
background-color: $topbar-link-bg-color-hover;
+
@if ($topbar-dropdown-link-bg-hover) {
background: $topbar-dropdown-link-bg-hover;
}
@@ -618,8 +710,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
}
- & > ul > .divider,
- & > ul > [role="separator"] {
+ &>ul>.divider,
+ &>ul>[role="separator"] {
border-bottom: none;
border-top: none;
border-#{$opposite-direction}: $topbar-divider-border-bottom;
@@ -630,7 +722,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
.has-form {
background: $topbar-link-bg;
- padding: 0 ($topbar-height / 3);
+ padding: 0 calc($topbar-height / 3);
height: $topbar-height;
}
@@ -640,15 +732,20 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
#{$default-float}: auto;
#{$opposite-direction}: 0;
- li .dropdown { #{$opposite-direction}: 100%; }
+ li .dropdown {
+ #{$opposite-direction}: 100%;
+ }
}
}
+
.#{$default-float} {
li .dropdown {
#{$opposite-direction}: auto;
#{$default-float}: 0;
- li .dropdown { #{$default-float}: 100%; }
+ li .dropdown {
+ #{$default-float}: 100%;
+ }
}
}
}
@@ -657,17 +754,20 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
// background & text color on hover.
.no-js .top-bar-section {
ul li {
+
// Apply the hover link color when it has that class
- &:hover > a {
+ &:hover>a {
background-color: $topbar-link-bg-color-hover;
+
@if ($topbar-link-bg-hover) {
background: $topbar-link-bg-hover;
}
+
color: $topbar-link-color-hover;
}
// Apply the active link color when it has that class
- &:active > a {
+ &:active>a {
background: $topbar-link-bg-active;
color: $topbar-link-color-active;
}
@@ -675,15 +775,16 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
.has-dropdown {
&:hover {
- & > .dropdown {
+ &>.dropdown {
@include topbar-show-dropdown();
}
}
- > a:focus + .dropdown {
+
+ >a:focus+.dropdown {
@include topbar-show-dropdown();
}
}
}
}
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_type.scss b/_sass/foundation-components/_type.scss
index ff199963185..33f59f3bc8b 100644
--- a/_sass/foundation-components/_type.scss
+++ b/_sass/foundation-components/_type.scss
@@ -59,7 +59,7 @@ $code-color: $oil !default;
$code-font-family: $font-family-monospace !default;
$code-font-weight: $font-weight-normal !default;
$code-background-color: scale-color($secondary-color, $lightness: 70%) !default;
-$code-border-size: 1px !default;
+$code-border-size: 0px !default;
$code-border-style: solid !default;
$code-border-color: scale-color($code-background-color, $lightness: -10%) !default;
$code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default;
diff --git a/assets/css/styles_feeling_responsive.scss b/assets/css/styles_feeling_responsive.scss
index 860ab2213da..fe7521b7826 100755
--- a/assets/css/styles_feeling_responsive.scss
+++ b/assets/css/styles_feeling_responsive.scss
@@ -42,4 +42,8 @@ sitemap:
@import "foundation-components/grid";
@import "09_elements.scss";
+{% if site.asciidoctor-enabled == true %}
+@import "10_asciidoc.scss";
+{% endif %}
+
@import "11_syntax-highlighting.scss";
diff --git a/assets/fonts/.fontcustom-manifest.json b/assets/fonts/.fontcustom-manifest.json
index dfb4588d63b..ae43822ac5d 100644
--- a/assets/fonts/.fontcustom-manifest.json
+++ b/assets/fonts/.fontcustom-manifest.json
@@ -1,7 +1,7 @@
{
"checksum": {
- "previous": "c5cdc0a58b7277d1f320a4ad50aa8ae2ad47fa6ed879c164db1cfb75439bd1d9",
- "current": "c5cdc0a58b7277d1f320a4ad50aa8ae2ad47fa6ed879c164db1cfb75439bd1d9"
+ "previous": "03f5dd2a3a893dc3637cdfbb6da25d276f597ea03db701e7220b5dfcde6ef9bf",
+ "current": "03f5dd2a3a893dc3637cdfbb6da25d276f597ea03db701e7220b5dfcde6ef9bf"
},
"fonts": [
"./iconfont.ttf",
@@ -106,6 +106,10 @@
"codepoint": 61718,
"source": "svg-files-for-custom-font/globe.svg"
},
+ "googleplus": {
+ "codepoint": 61750,
+ "source": "svg-files-for-custom-font/googleplus.svg"
+ },
"heart": {
"codepoint": 61719,
"source": "svg-files-for-custom-font/heart.svg"
@@ -239,8 +243,8 @@
"font_name": "iconfont",
"force": false,
"input": {
- "templates": "svg-files-for-custom-font",
- "vectors": "svg-files-for-custom-font"
+ "templates": "svg-files-for-custom-font/",
+ "vectors": "svg-files-for-custom-font/"
},
"no_hash": true,
"output": {
diff --git a/assets/fonts/iconfont-preview.html b/assets/fonts/iconfont-preview.html
index 188c22a5ab5..ecb1902223c 100644
--- a/assets/fonts/iconfont-preview.html
+++ b/assets/fonts/iconfont-preview.html
@@ -184,6 +184,7 @@
.icon-feather:before,
.icon-github:before,
.icon-globe:before,
+.icon-googleplus:before,
.icon-heart:before,
.icon-heart-outlined:before,
.icon-home:before,
@@ -252,6 +253,7 @@
.icon-feather:before { content: "\f114"; }
.icon-github:before { content: "\f115"; }
.icon-globe:before { content: "\f116"; }
+.icon-googleplus:before { content: "\f136"; }
.icon-heart:before { content: "\f117"; }
.icon-heart-outlined:before { content: "\f118"; }
.icon-home:before { content: "\f119"; }
@@ -297,7 +299,7 @@
- iconfont contains 54 glyphs:
+ iconfont contains 55 glyphs:
Toggle Preview Characters
@@ -614,6 +616,19 @@ iconfont contains 54 glyphs:
+
+
+ PpPpPpPpPpPpPpPpPpPp
+
+
+ 12141618212436486072
+
+
+
+
+
+
+
PpPpPpPpPpPpPpPpPpPp
diff --git a/assets/fonts/iconfont.css b/assets/fonts/iconfont.css
index e54ad53a60b..a748578f8b8 100644
--- a/assets/fonts/iconfont.css
+++ b/assets/fonts/iconfont.css
@@ -47,6 +47,7 @@
.icon-feather:before,
.icon-github:before,
.icon-globe:before,
+.icon-googleplus:before,
.icon-heart:before,
.icon-heart-outlined:before,
.icon-home:before,
@@ -115,6 +116,7 @@
.icon-feather:before { content: "\f114"; }
.icon-github:before { content: "\f115"; }
.icon-globe:before { content: "\f116"; }
+.icon-googleplus:before { content: "\f136"; }
.icon-heart:before { content: "\f117"; }
.icon-heart-outlined:before { content: "\f118"; }
.icon-home:before { content: "\f119"; }
diff --git a/assets/fonts/iconfont.eot b/assets/fonts/iconfont.eot
index 5d952f97d81..af95ebd3c09 100644
Binary files a/assets/fonts/iconfont.eot and b/assets/fonts/iconfont.eot differ
diff --git a/assets/fonts/iconfont.svg b/assets/fonts/iconfont.svg
index 7ffcf70c5da..b9e507c292d 100644
--- a/assets/fonts/iconfont.svg
+++ b/assets/fonts/iconfont.svg
@@ -1,28 +1,28 @@
-