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 2d2eb810fc9..4276cbb4a1e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,7 @@ -_site/ -.sass-cache/ +_site +.bundle .DS_Store +.jekyll-cache +.jekyll-metadata +.sass-cache +Gemfile.lock 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.lock b/Gemfile.lock index 01b92bdd485..5d0732b30e2 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,60 +1,92 @@ GEM remote: https://rubygems.org/ specs: - addressable (2.5.0) - public_suffix (~> 2.0, >= 2.0.2) - asciidoctor (1.5.5) + addressable (2.8.5) + public_suffix (>= 2.0.2, < 6.0) + asciidoctor (1.5.8) coderay (1.1.1) colorator (1.1.0) - faraday (0.10.0) - multipart-post (>= 1.2, < 3) - ffi (1.9.14) + 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) - jekyll (3.3.1) + 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) - jekyll-sass-converter (~> 1.0) - jekyll-watch (~> 1.1) - kramdown (~> 1.3) - liquid (~> 3.0) - mercenary (~> 0.3.3) + 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 (~> 1.7) + rouge (>= 3.0, < 5.0) safe_yaml (~> 1.0) - jekyll-asciidoc (2.0.1) + terminal-table (>= 1.8, < 4.0) + webrick (~> 1.7) + jekyll-asciidoc (3.0.0) asciidoctor (>= 1.5.0) - jekyll (>= 2.3.0) - jekyll-gist (1.4.0) + jekyll (>= 3.0.0) + jekyll-gist (1.5.0) octokit (~> 4.2) jekyll-paginate (1.1.0) - jekyll-sass-converter (1.5.0) - sass (~> 3.4) - jekyll-watch (1.5.0) - listen (~> 3.0, < 3.1) - kramdown (1.13.0) - liquid (3.0.6) - listen (3.0.8) - rb-fsevent (~> 0.9, >= 0.9.4) - rb-inotify (~> 0.9, >= 0.9.7) - mercenary (0.3.6) - multipart-post (2.0.0) - octokit (4.6.2) - sawyer (~> 0.8.0, >= 0.5.3) - pathutil (0.14.0) + jekyll-sass-converter (3.0.0) + sass-embedded (~> 1.54) + jekyll-watch (2.2.1) + listen (~> 3.0) + 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 (2.0.4) - rb-fsevent (0.9.8) - rb-inotify (0.9.7) - ffi (>= 0.5.0) - rouge (1.11.1) - safe_yaml (1.0.4) - sass (3.4.22) - sawyer (0.8.1) - addressable (>= 2.3.5, < 2.6) - faraday (~> 0.8, < 1.0) + 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) @@ -65,4 +97,4 @@ DEPENDENCIES jekyll-paginate BUNDLED WITH - 1.13.6 + 2.4.18 diff --git a/README.md b/README.md index 751df2e068c..95fba45685e 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,11 @@ ## You like and use this theme? Then support me. Just [paypal.me/PhlowMedia](https://www.paypal.me/PhlowMedia) :) -[![Flattr this git repo](http://api.flattr.com/button/flattr-badge-large.png)](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 :) - -[![Subscribe to Jekyll Newsletter](https://phlow.github.io/static/tinyletter_subscribe_button.png)](https://tinyletter.com/feeling-responsive) - - -[![Start Video](https://github.com/Phlow/feeling-responsive/blob/gh-pages/images/video-feeling-responsive-1280x720.jpg)](https://www.youtube.com/embed/3b5zCFSmVvU) - ## 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 . - -To get to know *Feeling Responsive* check out all the features explained in the [documentation][1]. - -And what license is *Feeling Responsive* released under? [This one][2]. - +Do you want to get to know *Feeling Responsive*? Have a look › . +Documentation & Features › [documentation][1]. +License › https://github.com/Phlow/feeling-responsive/blob/gh-pages/LICENSE ## Why use this theme? @@ -35,28 +20,6 @@ Feeling Responsive is heavily customizable. **[More ›][3]** - -## Changelog - -*Feeling Responsive* is in active development. Thank you to everyone who contributed, especially [Róbert Papp][5], [Alexandra von Criegern](https://github.com/plutonik-a) and [Juan Jose Amor Iglesias](https://github.com/jjamor). - -**[Read Changelog ›][6]** - - - -## Video Tutorial - -Click the image to [watch the YouTube-Video-Tutorial][4]. - -[![Start Video](https://github.com/Phlow/feeling-responsive/blob/gh-pages/images/video-feeling-responsive-tutorial-frontpage.jpg)](https://www.youtube.com/watch?v=rLS-BEvlEyY) - - - - - - - - [1]: http://phlow.github.io/feeling-responsive/documentation/ [2]: https://github.com/Phlow/feeling-responsive/blob/gh-pages/LICENSE [3]: http://phlow.github.io/feeling-responsive/info/ @@ -65,5 +28,3 @@ Click the image to [watch the YouTube-Video-Tutorial][4]. [6]: https://phlow.github.io/feeling-responsive/changelog/ [7]: http://phlow.github.io/feeling-responsive/ [8]: http://phlow.github.io/simplicity/ - [9]: # - [10]: # diff --git a/_config.yml b/_config.yml index 05305b5343d..76d4eb9d206 100644 --- a/_config.yml +++ b/_config.yml @@ -44,8 +44,8 @@ urlimg: 'https://phlow.github.io/feeling-responsive/images/' # Logo size is 600x80 pixels logo: "logo.png" -# Gems -gems: +# Plugins +plugins: - jekyll-asciidoc - jekyll-gist - jekyll-paginate @@ -63,11 +63,11 @@ paginate_path: "blog/page:num" # Pagination path › Important for blog page i # 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 @@ -76,6 +76,7 @@ exclude: - LICENSE - README.md - INSTALL.md + - vendor # The language setting is used in /includes/header.html for html-settings @@ -142,11 +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' -# yandex_site_verification: '' -# alexa_verify_id: '' +google_site_verification : 'Vk0IOJ2jwG_qEoG7fuEXYqv0m2rLa8P778Fi_GrsgEQ' +bing_webmastertools_id : '0FB4C028ABCF07C908C54386ABD2D97F' +# yandex_site_verification : '' +# alexa_verify_id : '' @@ -157,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' # ______ __ __ @@ -177,9 +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_image : 'http://images.phlow.de/phlow/phlow_de-logo-512x.png' +og_locale : 'en_EN' +og_type : 'website' # _____ _ __ __ ___ ___ @@ -192,8 +192,8 @@ og_type: 'website' # socialmedia: - twitter: phlow - facebook: phlow.media + twitter : phlow + facebook : phlow.media # ____ _ @@ -205,7 +205,7 @@ socialmedia: # # used in _includes/comments -disqus_shortname: feelingresponsive +# disqus_shortname: # _____ @@ -216,8 +216,8 @@ disqus_shortname: feelingresponsive # sass: - sass_dir: _sass - style: :compressed + sass_dir : _sass + style : :compressed # ___ __ __ _ @@ -229,7 +229,7 @@ sass: # # used in _includes/footer_scripts -google_analytics_tracking_id: UA-60112281-1 +# google_analytics_tracking_id: @@ -265,7 +265,7 @@ google_analytics_tracking_id: UA-60112281-1 asciidoctor-enabled: false asciidoctor: - description: testtewtetrue + description: attributes: source-highlighter: coderay coderay-css: style diff --git a/_config_dev.yml b/_config_dev.yml index 5a5f83ab5f1..e8d645bb32c 100644 --- a/_config_dev.yml +++ b/_config_dev.yml @@ -20,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: false diff --git a/_data/socialmedia.yml b/_data/socialmedia.yml index 16acb42b499..7befbab361b 100644 --- a/_data/socialmedia.yml +++ b/_data/socialmedia.yml @@ -18,11 +18,6 @@ class: icon-cloud title: "Mixe, was sonst?" -- name: Phlow YouTube Google+ - url: https://plus.google.com/u/0/+Phlow - class: icon-googleplus - title: "YouTube Google+" - # - name: Facebook # url: http://www.facebook.com/ # class: icon-facebook diff --git a/_includes/_favicon.html b/_includes/_favicon.html index 3807a6e8fde..4161f8b36a8 100644 --- a/_includes/_favicon.html +++ b/_includes/_favicon.html @@ -1,7 +1,7 @@ {% comment %} -* +* * More Information › https://mathiasbynens.be/notes/touch-icons -* +* {% endcomment %} {% comment %} Regular Old-Skool Favicon: {% endcomment %} {% if site.favicon-32x32 %}{% endif %} diff --git a/_includes/_footer_scripts.html b/_includes/_footer_scripts.html index a82968b6717..b3a999595a8 100755 --- a/_includes/_footer_scripts.html +++ b/_includes/_footer_scripts.html @@ -17,20 +17,6 @@ -{% if site.google_analytics_tracking_id %} - -{% endif %} - {% comment %} diff --git a/_includes/_frontpage-widget.html b/_includes/_frontpage-widget.html index e9fe020fd17..1b5b76ea204 100644 --- a/_includes/_frontpage-widget.html +++ b/_includes/_frontpage-widget.html @@ -1,20 +1,29 @@ +{% comment %} +* +* First the include captures the url and image in a +* separate variable to make the code better readable. +* +* These variables are widget_url and widget_image +* +{% endcomment %} + +{% capture widget_url %}{% if include.widget.url == NULL %}{% elsif include.widget.url contains 'http' %}{{ include.widget.url }}{% else %}{{ site.url }}{{ site.baseurl }}{{ include.widget.url }}{% endif %}{% endcapture %} + +{% capture widget_image %}{% if include.widget.image contains 'http' %}{{ include.widget.image }}{% else %}{{ site.urlimg }}{{ include.widget.image }}{% endif %}{% endcapture %} + +
- {% capture widget_url %}{% if include.widget.url contains 'http' %}{{ include.widget.url }}{% else %}{{ site.url }}{{ site.baseurl }}{{ include.widget.url }}{% endif %}{% endcapture %} {% if include.widget.video %} {{ include.widget.video }} + {% elsif widget_url == empty %} + {% if widget_image != empty %}{% endif %} {% else %} - {% if include.widget.image %} - {%comment%}TODO lazy loading{%endcomment%} - {%comment%}{%endcomment%} - {%comment%}{%endcomment%} - {% endif %} + {% if widget_image != empty %}{% endif %} {% endif %}

{{ include.widget.title }}

-

{{ include.widget.text }}

-

{{ site.data.language.more }}

+ + {% if include.widget.text != empty %}

{{ include.widget.text }}

{% endif %} + {% if widget_url != empty %}

{{ site.data.language.more }}

{% endif %}
\ No newline at end of file diff --git a/_includes/_head.html b/_includes/_head.html index fb686e39c06..2a915ae9c61 100644 --- a/_includes/_head.html +++ b/_includes/_head.html @@ -49,7 +49,6 @@ {% if site.google_site_verification %}{% endif %} {% if site.bing_webmastertools_id %}{% endif %} {% if site.yandex_site_verification %}{% endif %} - {% if site.google_author %}{% endif %} {% if site.alexa_verify_id %}{% endif %} {% if page.noindex == true or layout.noindex == true %}{% endif %} @@ -89,3 +88,16 @@ {% unless page.style == NULL %} {% endunless %} + + {% if site.google_analytics_tracking_id %} + + + + {% endif %} + diff --git a/_includes/_meta_information.html b/_includes/_meta_information.html index 4fc3ec799ec..ee515ee8e71 100644 --- a/_includes/_meta_information.html +++ b/_includes/_meta_information.html @@ -20,13 +20,13 @@ {% if page.collection == "posts" %}
{% if page.previous.url %} - + {% endif %} - + {% if page.next.url %} - + {% else %} -
+
{% endif %}
{% endif %} diff --git a/_includes/_navigation.html b/_includes/_navigation.html index 237ea2357ef..a38cb00f6ae 100644 --- a/_includes/_navigation.html +++ b/_includes/_navigation.html @@ -5,49 +5,52 @@ * {% endcomment %} diff --git a/_includes/list-collection b/_includes/list-collection index 5316645126d..b0a26f1a73c 100644 --- a/_includes/list-collection +++ b/_includes/list-collection @@ -6,7 +6,7 @@ * If you set »published: false« in front matter of a collection page * the page gots filtered out via unless * -* Example: {% include list-collection ollection='wordpress' %} +* Example: {% include list-collection collection='wordpress' %} * {% endcomment %} diff --git a/_layouts/frontpage.html b/_layouts/frontpage.html index 4c7421d8161..b23abb39fbb 100644 --- a/_layouts/frontpage.html +++ b/_layouts/frontpage.html @@ -16,17 +16,15 @@ * {% endcomment %}
- {% if page.widget1.title %} + {% if page.widget1.image or page.widget1.video or page.widget1.title %} {% include _frontpage-widget.html widget=page.widget1 %} {% endif %} - - {% if page.widget2.title %} + {% if page.widget2.image or page.widget2.video or page.widget2.title %} {% include _frontpage-widget.html widget=page.widget2 %} {% endif %} - - {% if page.widget3.title %} + {% if page.widget3.image or page.widget3.video or page.widget3.title %} {% include _frontpage-widget.html widget=page.widget3 %} {% endif %}
diff --git a/_posts/design/2014-09-10-portfolio.md b/_posts/design/2014-09-10-portfolio.md index f664bf44fae..b009360085a 100755 --- a/_posts/design/2014-09-10-portfolio.md +++ b/_posts/design/2014-09-10-portfolio.md @@ -10,31 +10,31 @@ categories:
- -

Website: Nixdorf Internatsberatung & Schulberatung

+ +

Website: Grafik Design Jeannette Corneille

- -

Website: Grafik Design Jeannette Corneille

+ +

Website: Phlow.de

diff --git a/_posts/design/2015-08-16-typography.md b/_posts/design/2015-08-16-typography.md index 8534662e537..545205b1710 100755 --- a/_posts/design/2015-08-16-typography.md +++ b/_posts/design/2015-08-16-typography.md @@ -30,8 +30,6 @@ categories: - -
## Lato – A Sans Serif Typeface Family @@ -281,18 +279,13 @@ Need a break? I give you three!


If you need footnotes for your posts, articles and entries, the Kramdown-Parser [^1] got you covered. How to use footnotes? Read this footnote. [^2] - - [1]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list [2]: http://phlow.de/ [3]: http://en.wikipedia.org/wiki/Ed_Benguiat [4]: https://www.google.com/fonts/specimen/Lato [5]: https://www.google.com/fonts/specimen/Volkhov [6]: http://www.latofonts.com/ - [7]: http://modularscale.com/ - [8]: # - [9]: # - [10]: # + [7]: https://www.modularscale.com/ [^1]: Find out more about Kramdown on @@ -379,12 +372,6 @@ element - - - - - -
diff --git a/_sass/_01_settings_colors.scss b/_sass/_01_settings_colors.scss index a7bea7459eb..dcedd19f183 100644 --- a/_sass/_01_settings_colors.scss +++ b/_sass/_01_settings_colors.scss @@ -16,9 +16,9 @@ /* Basics ------------------------------------------------------------------- */ -$text-color: #111; -$body-font-color: $text-color; -$body-bg: #fdfdfd; +$text-color : #111; +$body-font-color : $text-color; +$body-bg : #fdfdfd; @@ -26,59 +26,59 @@ $body-bg: #fdfdfd; https://color.adobe.com/de/Flat-Design-Colors-v2-color-theme-4341903/ ------------------------------------------------------------------- */ -$ci-1: #334D5C; // dark turquoise -$ci-2: #45B29D; // turquoise -$ci-3: #EFC94C; // yellow -$ci-4: #E27A3F; // orange -$ci-5: #DF4949; // red -$ci-6: #A1D044; // green +$ci-1 : #334D5C; // dark turquoise +$ci-2 : #45B29D; // turquoise +$ci-3 : #EFC94C; // yellow +$ci-4 : #E27A3F; // orange +$ci-5 : #DF4949; // red +$ci-6 : #A1D044; // green /* Foundation Color Variables ------------------------------------------------------------------- */ -$primary-color: $ci-1; -$secondary-color: $ci-6; -$alert-color: $ci-5; -$success-color: $ci-6; -$warning-color: $ci-4; -$info-color: $ci-1; +$primary-color : $ci-1; +$secondary-color : $ci-6; +$alert-color : $ci-5; +$success-color : $ci-6; +$warning-color : $ci-4; +$info-color : $ci-1; /* Grey Scale ------------------------------------------------------------------- */ -$grey-1: #E4E4E4; -$grey-2: #D7D7D7; -$grey-3: #CBCBCB; -$grey-4: #BEBEBE; -$grey-5: #A4A4A4; -$grey-6: #979797; -$grey-7: #8B8B8B; -$grey-8: #7E7E7E; -$grey-9: #646464; -$grey-10: #575757; -$grey-11: #4B4B4B; -$grey-12: #3E3E3E; -$grey-13: #313131; -$grey-14: #242424; -$grey-15: #171717; -$grey-16: #0B0B0B; +$grey-1 : #E4E4E4; +$grey-2 : #D7D7D7; +$grey-3 : #CBCBCB; +$grey-4 : #BEBEBE; +$grey-5 : #A4A4A4; +$grey-6 : #979797; +$grey-7 : #8B8B8B; +$grey-8 : #7E7E7E; +$grey-9 : #646464; +$grey-10 : #575757; +$grey-11 : #4B4B4B; +$grey-12 : #3E3E3E; +$grey-13 : #313131; +$grey-14 : #242424; +$grey-15 : #171717; +$grey-16 : #0B0B0B; /* Topbar-Navigation ------------------------------------------------------------------- */ -$topbar-bg-color: $body-bg; -$topbar-bg: $topbar-bg-color; +$topbar-bg-color : $body-bg; +$topbar-bg : $topbar-bg-color; $topbar-dropdown-toggle-color: $ci-1; -$topbar-link-color: #000; +$topbar-link-color : #000; $topbar-link-color-hover: #000; $topbar-link-color-active: #000; $topbar-link-color-active-hover: #000; @@ -107,13 +107,13 @@ $topbar-menu-icon-color-toggled: $ci-6; /* Footer ------------------------------------------------------------------- */ -$footer-bg: $grey-8; -$footer-color: #fff; -$footer-link-color: $ci-6; +$footer-bg : $grey-8; +$footer-color : #fff; +$footer-link-color : $ci-6; -$subfooter-bg: $grey-13; -$subfooter-color: $grey-8; +$subfooter-bg : $grey-13; +$subfooter-color : $grey-8; $subfooter-link-color: $grey-8; diff --git a/_sass/_03_settings_mixins_media_queries.scss b/_sass/_03_settings_mixins_media_queries.scss index 3f971f3a8b9..8be24715ec9 100644 --- a/_sass/_03_settings_mixins_media_queries.scss +++ b/_sass/_03_settings_mixins_media_queries.scss @@ -29,7 +29,7 @@ $base-font-size: 100% !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; } @@ -39,13 +39,15 @@ $base-font-size: 100% !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; @@ -57,11 +59,14 @@ $base-font-size: 100% !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 @@ -70,17 +75,17 @@ $base-font-size: 100% !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 @@ -95,19 +100,23 @@ $base-font-size: 100% !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; } @@ -135,29 +144,33 @@ $base-font-size: 100% !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); #{$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, @@ -168,8 +181,16 @@ $base-font-size: 100% !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 @@ -178,7 +199,7 @@ $base-font-size: 100% !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} { @@ -192,8 +213,8 @@ $base-font-size: 100% !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 @@ -224,10 +245,13 @@ $base-font-size: 100% !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; } @@ -250,11 +274,26 @@ $column-gutter: rem-calc(30) !default; // d. Media Query Ranges // - - - - - - - - - - - - - - - - - - - - - - - - - -$small-range: (0em, 40em); -$medium-range: (40.063em, 64em); -$large-range: (64.063em, 90em); -$xlarge-range: (90.063em, 120em); -$xxlarge-range: (120.063em, 99999999em); +$small-range: ( + 0em, + 40em +); +$medium-range: ( + 40.063em, + 64em +); +$large-range: ( + 64.063em, + 90em +); +$xlarge-range: ( + 90.063em, + 120em +); +$xxlarge-range: ( + 120.063em, + 99999999em +); $screen: "only screen" !default; @@ -293,7 +332,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. @@ -353,7 +392,10 @@ $cursor-text-value: text !default; @if $include-html-global-classes { // Must be 100% for off canvas to work - html, body { height: 100%; } + html, + body { + height: 100%; + } // Set box-sizing globally to handle padding and border widths *, @@ -363,7 +405,9 @@ $cursor-text-value: text !default; } html, - body { font-size: $base-font-size; } + body { + font-size: $base-font-size; + } // Default body styles body { @@ -379,25 +423,42 @@ $cursor-text-value: text !default; cursor: $cursor-auto-value; } - a:hover { cursor: $cursor-pointer-value; } + a:hover { + cursor: $cursor-pointer-value; + } // Grid Defaults to get images and embeds to work properly - img { max-width: 100%; height: auto; } + img { + max-width: 100%; + height: auto; + } - img { -ms-interpolation-mode: bicubic; } + img { + -ms-interpolation-mode: bicubic; + } #map_canvas, .map_canvas { + img, embed, - object { max-width: none !important; + object { + max-width: none !important; } } // Miscellaneous useful HTML classes - .left { float: left !important; } - .right { float: right !important; } - .clearfix { @include clearfix; } + .left { + float: left !important; + } + + .right { + float: right !important; + } + + .clearfix { + @include clearfix; + } // Hide visually and from screen readers .hide { @@ -406,13 +467,18 @@ $cursor-text-value: text !default; } // Hide visually and from screen readers, but maintain layout - .invisible { visibility: hidden; } + .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; } + .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 { @@ -425,9 +491,14 @@ $cursor-text-value: text !default; // // Make sure textarea takes on height automatically - textarea { height: auto; min-height: 50px; } + textarea { + height: auto; + min-height: 50px; + } // Make select elements 100% width by default - select { width: 100%; } + select { + width: 100%; + } } -} +} \ No newline at end of file diff --git a/_sass/_06_typography.scss b/_sass/_06_typography.scss old mode 100644 new mode 100755 index 5df1b39eb9b..2c5bc6b43d9 --- a/_sass/_06_typography.scss +++ b/_sass/_06_typography.scss @@ -83,6 +83,9 @@ p.button a { /* Headlines + The hK::before logic is to accomodate a vert. offset for persistent + top of page menu. The logic is copied from + https://css-tricks.com/hash-tag-links-padding/ ------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { @@ -90,7 +93,6 @@ h1, h2, h3, h4, h5, h6 { font-weight: normal; padding: 0; } - h1 { font-size: $font-size-h1; margin-top: 0; diff --git a/_sass/_09_elements.scss b/_sass/_09_elements.scss index 2204004c394..33095653358 100644 --- a/_sass/_09_elements.scss +++ b/_sass/_09_elements.scss @@ -148,3 +148,15 @@ img.lazy { transition: opacity 0.7s; opacity: 1; } + +*:target:not([id^='fn:']):not([id^='fnref:']) { + &::before { + content: " "; + width: 0; + height: 0; + + display: block; + padding-top: 50px; + margin-top: -50px; + } +} 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/mediaelement_js/jquery.js b/assets/mediaelement_js/jquery.js index 86a330515ee..3030229275c 100755 --- a/assets/mediaelement_js/jquery.js +++ b/assets/mediaelement_js/jquery.js @@ -349,8 +349,9 @@ jQuery.extend = jQuery.fn.extend = function() { src = target[ name ]; copy = options[ name ]; + // Prevent Object.prototype pollution // Prevent never-ending loop - if ( target === copy ) { + if ( name === "__proto__" || target === copy ) { continue; } @@ -8204,6 +8205,11 @@ function ajaxConvert( s, response ) { // Convert response if prev dataType is non-auto and differs from current if ( prev !== "*" && prev !== current ) { + // Mitigate possible XSS vulnerability (gh-2432) + if ( s.crossDomain && current === "script" ) { + continue; + } + // Seek a direct converter conv = converters[ prev + " " + current ] || converters[ "* " + current ]; @@ -9594,4 +9600,4 @@ if ( typeof define === "function" && define.amd && define.amd.jQuery ) { define( "jquery", [], function () { return jQuery; } ); } -})( window ); \ No newline at end of file +})( window ); diff --git a/images/webdesign_screenshot_andersneu.jpg b/images/webdesign_screenshot_andersneu.jpg new file mode 100644 index 00000000000..99490bfa3df Binary files /dev/null and b/images/webdesign_screenshot_andersneu.jpg differ diff --git a/images/webdesign_screenshot_moritz_sauer.jpg b/images/webdesign_screenshot_moritz_sauer.jpg new file mode 100644 index 00000000000..c26c9793145 Binary files /dev/null and b/images/webdesign_screenshot_moritz_sauer.jpg differ diff --git a/images/webdesign_screenshot_mosonic.jpg b/images/webdesign_screenshot_mosonic.jpg new file mode 100644 index 00000000000..c475febb67f Binary files /dev/null and b/images/webdesign_screenshot_mosonic.jpg differ diff --git a/images/webdesign_screenshot_nixdorf.jpg b/images/webdesign_screenshot_nixdorf.jpg deleted file mode 100644 index 5c2936f4568..00000000000 Binary files a/images/webdesign_screenshot_nixdorf.jpg and /dev/null differ diff --git a/images/webdesign_screenshot_phlow.jpg b/images/webdesign_screenshot_phlow.jpg index b066c8944e6..3e16fe794e2 100644 Binary files a/images/webdesign_screenshot_phlow.jpg and b/images/webdesign_screenshot_phlow.jpg differ diff --git a/images/webdesign_screenshot_schriefer.jpg b/images/webdesign_screenshot_schriefer.jpg deleted file mode 100644 index 86d80566124..00000000000 Binary files a/images/webdesign_screenshot_schriefer.jpg and /dev/null differ diff --git a/images/webdesign_screenshot_stilwandel.jpg b/images/webdesign_screenshot_stilwandel.jpg deleted file mode 100644 index d8c6753d08f..00000000000 Binary files a/images/webdesign_screenshot_stilwandel.jpg and /dev/null differ diff --git a/images/webdesign_screenshot_tarnkappe.jpg b/images/webdesign_screenshot_tarnkappe.jpg deleted file mode 100644 index cec00fcf32c..00000000000 Binary files a/images/webdesign_screenshot_tarnkappe.jpg and /dev/null differ diff --git a/jekyll-theme-feeling-responsive.gemspec b/jekyll-theme-feeling-responsive.gemspec new file mode 100644 index 00000000000..b68e53afecf --- /dev/null +++ b/jekyll-theme-feeling-responsive.gemspec @@ -0,0 +1,20 @@ +Gem::Specification.new do |s| + s.name = 'jekyll-theme-feeling-responsive' + s.version = '1.1' + s.date = '2021-06-21' + s.summary = 'A free flexible theme for Jekyll built on Foundation framework' + s.description = <[Up to table of contents](#toc) {: .text-right } - - - ## Style your content with {#styling} -Feeling Responsive offers lots of possibilities to style your articles. You can style your content in different ways. There are elements like subheadlines, feature images, header images, homepage images, meta data like categories and tags and many more. +Feeling Responsive offers different options to style your article content. There are elements like subheadlines, feature images, header images, homepage images, meta data like categories and tags and many more. ### subheadlines @@ -88,6 +85,12 @@ Quotes mix it up a little bit, if you write long articles. So use quotes: [Up to table of contents](#toc) {: .text-right } +{% highlight html %} +> Age is an issue of mind over matter. If you don't mind, it doesn't matter. +Mark Twain +[Up to table of contents](#toc) +{: .text-right } +{% endhighlight %} ## Comments @@ -98,12 +101,9 @@ By default comments are turned off. You can customize the default behaviour in ` [Up to table of contents](#toc) {: .text-right } - - - ## Responsive Videos -With foundation responsive videos are easy. [More ›](http://foundation.zurb.com/docs/components/flex_video.html) +With foundation, responsive videos are easy. [More ›](http://foundation.zurb.com/docs/components/flex_video.html)
@@ -122,7 +122,7 @@ With foundation responsive videos are easy. [More ›](http://foundation.zurb.co ## Images: Title, Thumbnails, Homepage {#images} -There are several types of images you can define via front matter. If you want to change the images used in the header have a look at [Style your Header]({{ site.url }}/headers/). +There are several types of images you can define via front matter. If you want to change the images used in the header, have a look at [Style your Header]({{ site.url }}{{ site.baseurl }}/headers/). ### Title Images @@ -152,11 +152,9 @@ image: homepage: header_homepage_13.jpg ~~~ - - ### Captions with URL -Sometimes you want to give credit to the creator of your images, maybe with a link. Especially when you use Creative Commons-images like I do for this website. Just add the following front matter and *Feeling Responsive* does the rest: +Sometimes, you want to give credit to the creator of your images, maybe with a link. Especially when you use Creative Commons-images like I do for this website. Just add the following front matter and *Feeling Responsive* does the rest: ~~~ image: @@ -184,7 +182,7 @@ image: ## Create a Table of Contents {: .t60} -With the Kramdown parser for Markdown you can render a table of contents for your documents. Just insert the following HTML in your post before the actual content. More information on [»Automatic ›Table of Contents‹ Generation«][1]. +With the Kramdown parser for Markdown, you can render a table of contents for your documents. Just insert the following HTML in your post before the actual content. More information on [»Automatic ›Table of Contents‹ Generation«][1]. ### Bare Bones Version {% highlight html %} @@ -244,28 +242,25 @@ This include creates a next/previous link to a post of the same category using t {% raw %} {% include next-previous-post-in-category %}{% endraw %} ~~~ - ### improve_content -If your content is on Jekyll you can use this include to automatically generate a »Edit on GitHub Link« to give people a possibility to improve your content. Got the idea from [Ben Balters Blog](http://ben.balter.com/). +If your content is on Jekyll, you can use this include to automatically generate a »Edit on GitHub Link« to give people a possibility to improve your content. Got the idea from [Ben Balters Blog](http://ben.balter.com/). ~~~ {% raw %}{% include _improve_content.html %}{% endraw %} ~~~ - ### list-collection -This include lets you loop through a collection to list all entries in that collection. If you set »published: false« in front matter of a collection page the page gots filtered out via unless. The following example loops through a collection called *wordpress*. +This include lets you loop through a collection to list all entries in that collection. If you set »published: false« in front matter of a collection page, the page gots filtered out via unless. The following example loops through a collection called *wordpress*. ~~~ {% raw %}{% include list-collection collection='wordpress' %}{% endraw %} ~~~ - ### alert – Embed an alert in your content -This include lets you easily display an alert. To use the include no `.html` ending is necessary. You can use five different kinds of alerts: `warning`, `info`, `success`, `alert` and `text`. +This include lets you easily display an alert. To use the include, no `.html` ending is necessary. You can use five different kinds of alerts: `warning`, `info`, `success`, `alert` and `text`. ~~~ {% raw %}{% include alert warning='This is a warning.' %} @@ -294,10 +289,9 @@ You can even use ``-tags inside the alert. Beware: Use " and ' properly. [Up to table of contents](#toc) {: .text-right } - ## Javascript/Foundation modules -*Feeling Responsive* uses the foundation framework and some of its javascript components. I reduced the modules, to decrease page load and make the theme faster. +*Feeling Responsive* uses the foundation framework and some of its Javascript components. I reduced the modules, to decrease page load and make the theme faster. I only added one other javascript-module: [`backstretch`][3] by Scott Robbin. These modules are currently used by the theme and included in `javascript.min.js`. There is also a non-minified version, if you want to take a closer look: `javascript.js`. diff --git a/pages/getting-started.md b/pages/getting-started.md index b5faef3f0ec..c68398a794e 100644 --- a/pages/getting-started.md +++ b/pages/getting-started.md @@ -1,23 +1,23 @@ --- -layout: page -show_meta: false -title: "Getting Started" -subheadline: "A Step-by-Step Guide" -teaser: "This step-by-step guide helps you to customize Feeling Responsive to your needs." +layout : page +show_meta : false +title : "Getting Started in 10 Steps" +subheadline : "A Step-by-Step Guide" +teaser : "This step-by-step guide helps you to customize Feeling Responsive to your needs." header: - image_fullwidth: "header_homepage_13.jpg" -permalink: "/getting-started/" + image_fullwidth : "header_homepage_13.jpg" +permalink : "/getting-started/" --- -1. Open `_config.yml` and work it through, it's well documented +1. Open `_config.yml` and work it through, it's well documented. 1. Add your own `logo.png` to `/assets/img/`. -1. Open `_data/socialmedia.yml` and add your own social media links. -1. Open `_data/navigation.yml` and customize your navigation. -1. Open `_data/language.yml` and translate the theme if necessary. -1. Open `_data/services.yml` and customize links in the footer. -1. Open `_data/network.yml` and customize links in the footer. +1. Add your own social media links and open `_data/socialmedia.yml`. +1. Open `_sass/_01_settings_colors.scss` and adjust the the colors to your taste. +1. Customize your navigation and open `_data/navigation.yml`. +1. Translate this theme and open `_data/language.yml`. +1. Change the links in the footer and open `_data/services.yml` and `_data/network.yml`. 1. Open `_data/authors.yml` and edit author information and set default author in `config.yml`. -1. [Read the documentation][1] to check out all features of *Feeling Responsive*. 1. Make it yours and add your own content. +1. [Read the documentation][1] to check out all features of *Feeling Responsive*. Check out the documentation for all the tricks › diff --git a/pages/pages-root-folder/index.md b/pages/pages-root-folder/index.md index 9b63780c4a9..6b095358eb1 100644 --- a/pages/pages-root-folder/index.md +++ b/pages/pages-root-folder/index.md @@ -21,7 +21,7 @@ widget3: title: "Download Theme" url: 'https://github.com/Phlow/feeling-responsive' image: widget-github-303x182.jpg - text: 'Feeling Responsive is free and licensed under a MIT License. Make it your own and start building. Grab the Bare-Bones-Version for a fresh start or learn how to use it with the education-version with sample posts and images. Then tell me via Twitter @phlow.' + text: 'Feeling Responsive is free and licensed under a MIT License. Make it your own and start building. The code is well-documented and explains you how it works.' # # Use the call for action to show a button on the frontpage # diff --git a/pages/roadmap.md b/pages/roadmap.md index f823aebef1a..10ef61a4481 100644 --- a/pages/roadmap.md +++ b/pages/roadmap.md @@ -1,56 +1,10 @@ --- -layout: page -title: "Roadmap" -subheadline: "ToDo-List & Ideas" -teaser: "Here are some ideas and features I want to implement in the future." +layout : page +title : "Roadmap – What's up next?!?" +subheadline : "ToDo-List & Ideas" +teaser : "Feeling Responsive works fine. I am happy lots of people use it. Currently I have no plans to make it better or worse." header: - image_fullwidth: "header_roadmap_3.jpg" -permalink: "/roadmap/" + image_fullwidth : "header_roadmap_3.jpg" +permalink : "/roadmap/" --- -## Ideas and possible new features -{: .t30 } - -* Get rid of Backstretch.js and solve it with pure CSS -* [Custom Scrollbar](https://css-tricks.com/custom-scrollbars-in-webkit/) -* Layout/Template for category-archives -* Layout/Template for collections -* Layout/Template for Landingpage -* Clean bare-bones version of *Feeling Responsive* -* Even better responsive typography -* Google AdSense ads -* More post-formats for blogging like special post formats for links, audio, tweets,... -* Make a video-sitemap.xml - - - -## Done - -* [Add schema.org Markup for Videos](https://support.google.com/webmasters/answer/2413309?hl=en) -* [Submit Feeling Responsive to jekyllthemes.org](http://jekyllthemes.org/themes/feeling-responsive/) -* Use `style` in front matter to inject css-styles into ` -* Add include to loop through collections -* Now with optional caption for header -* [Refined humans.txt](http://humanstxt.org/) -* [Produce an introduction video to showcase *Feeling Responsive*](https://www.youtube.com/embed/3b5zCFSmVvU) -* [Additional header with text]({{ site.url }}{{ site.baseurl }}/headers/) -* Added Google Analtics support -* [Add redirection layout by KanishkKanishk](http://codingtips.kanishkkunal.in/redirects-jekyll-github-pages/) -* Convert Foundation Sass to use native Jekyll Sass support -* Optimize HTML and use Schema.org-Attributes › http://schema.org/Article -* Disqus comments -* Rework `list-entries.html` › now language ready -* [Create custom 404.html-webpage](https://help.github.com/articles/custom-404-pages/) -* Add simple search box with Google -* Alternative non-landscape header -* Patterns for header -* Clean up color scheme and highlighting colors -* Make theme translation ready -* [Add draft-templates for new pages/posts](https://github.com/Phlow/feeling-responsive/tree/gh-pages/_drafts) -* [Step-by-Step-Guide to customize *Feeling Responsive*]({{ site.url }}{{ site.baseurl }}/getting-started/) -* [Video-Post-Format to feature videos in a huge way]({{ site.url }}{{ site.baseurl }}/design/video/) -* Title and captions for images -* SEO › Add metadescription to header.html and front matter -* [Adding Open Graph for Jekyll](https://gist.github.com/pathawks/1406355) -* [Gallery Post Example]({{ site.url }}{{ site.baseurl }}/design/gallery/) -* [Adding pagination](http://jekyllrb.com/docs/pagination/) \ No newline at end of file