diff --git a/.env.sample b/.env.sample index 20b9a50..e5cdca7 100644 --- a/.env.sample +++ b/.env.sample @@ -7,6 +7,7 @@ ALGOLIA_API_KEY= ALGOLIA_SEARCH_KEY= ALGOLIA_PREFIX=devsite-dev- GOOGLE_ANALYTICS= +GOOGLE_API= ROLLBAR_CLIENT_TOKEN= RACK_ENV=development SKIP_DOCS=false diff --git a/Gemfile b/Gemfile index 463ac08..4b82a66 100644 --- a/Gemfile +++ b/Gemfile @@ -13,32 +13,32 @@ # limitations under the License. source 'https://rubygems.org' -ruby '2.2.9' +ruby '3.3.7' -gem 'slugize', '>= 0.0.3' -gem 'jekyll', '>= 3.0.3' +gem 'slugize' +gem 'jekyll' gem 'jekyll-paginate' -gem 'bundler', '>= 1.7.9' -gem 'rack', '< 1.6.0' -gem 'rack-contrib', '>= 1.2.0' -gem 'nokogiri', '>= 1.6.3.1' -gem 'algoliasearch', '>= 1.6.1' -gem 'htmlentities', '>= 4.3.2' -gem 'rubyzip', '>=1.1.6' -gem 'dotenv', '>= 0.11.1' -gem 'newrelic_rpm', '>= 3.9.8.273' -gem 'rack-wwwhisper', '>= 1.0' -gem 'uglifier', '>= 2.7.0' -gem 'googlestaticmap', '>= 1.2.2' -gem 'rack-rewrite', '>= 1.5.0' -gem 'rack-ssl-enforcer', '>= 0.2.9' -gem 'rack-xframe-options', '>= 0.1.2' +gem 'bundler' +gem 'rack' +gem 'rack-contrib' +gem 'nokogiri' +gem 'algoliasearch' +gem 'htmlentities' +gem 'rubyzip' +gem 'dotenv' +gem 'newrelic_rpm' +gem 'rack-wwwhisper' +gem 'uglifier' +gem 'googlestaticmap' +gem 'rack-rewrite' +gem 'rack-ssl-enforcer' +gem 'rack-xframe-options' gem 'rack-host-redirect' gem 'pygments.rb' gem 'redcarpet' group :development, :test do - gem 'rspec', '>= 3.1.0' - gem 'simplecov', '>= 0.9.1' - gem 'rubocop', '>= 0.28.0' + gem 'rspec' + gem 'simplecov' + gem 'rubocop' end diff --git a/Gemfile.lock b/Gemfile.lock index 77ea19b..b59725d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,138 +1,244 @@ GEM remote: https://rubygems.org/ specs: - addressable (2.3.8) - algoliasearch (1.7.0) - httpclient (~> 2.4) + addressable (2.8.7) + public_suffix (>= 2.0.2, < 7.0) + algoliasearch (1.27.5) + httpclient (~> 2.8, >= 2.8.3) json (>= 1.5.1) - ast (2.2.0) - colorator (0.1) - diff-lcs (1.2.5) - docile (1.1.5) - dotenv (2.1.0) - execjs (2.6.0) - ffi (1.9.10) - git-version-bump (0.15.1) - googlestaticmap (1.2.2) + ast (2.4.2) + base64 (0.2.0) + bigdecimal (3.1.9) + colorator (1.1.0) + concurrent-ruby (1.3.5) + connection_pool (2.5.0) + csv (3.3.2) + diff-lcs (1.6.0) + docile (1.4.1) + dotenv (3.1.7) + em-websocket (0.5.3) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0) + eventmachine (1.2.7) + execjs (2.10.0) + ffi (1.17.1-aarch64-linux-gnu) + ffi (1.17.1-aarch64-linux-musl) + ffi (1.17.1-arm-linux-gnu) + ffi (1.17.1-arm-linux-musl) + ffi (1.17.1-arm64-darwin) + ffi (1.17.1-x86_64-darwin) + ffi (1.17.1-x86_64-linux-gnu) + ffi (1.17.1-x86_64-linux-musl) + forwardable-extended (2.6.0) + google-protobuf (4.29.3) + bigdecimal + rake (>= 13) + google-protobuf (4.29.3-aarch64-linux) + bigdecimal + rake (>= 13) + google-protobuf (4.29.3-arm64-darwin) + bigdecimal + rake (>= 13) + google-protobuf (4.29.3-x86_64-darwin) + bigdecimal + rake (>= 13) + google-protobuf (4.29.3-x86_64-linux) + bigdecimal + rake (>= 13) + googlestaticmap (1.2.6) htmlentities (4.3.4) - httpclient (2.7.1) - jekyll (3.1.2) - colorator (~> 0.1) - jekyll-sass-converter (~> 1.0) - jekyll-watch (~> 1.1) - kramdown (~> 1.3) - liquid (~> 3.0) - mercenary (~> 0.3.3) - rouge (~> 1.7) + http_parser.rb (0.8.0) + httpclient (2.9.0) + mutex_m + i18n (1.14.7) + concurrent-ruby (~> 1.0) + jekyll (4.4.1) + addressable (~> 2.4) + base64 (~> 0.2) + colorator (~> 1.0) + csv (~> 3.0) + em-websocket (~> 0.5) + i18n (~> 1.0) + jekyll-sass-converter (>= 2.0, < 4.0) + jekyll-watch (~> 2.0) + json (~> 2.6) + kramdown (~> 2.3, >= 2.3.1) + kramdown-parser-gfm (~> 1.0) + liquid (~> 4.0) + mercenary (~> 0.3, >= 0.3.6) + pathutil (~> 0.9) + rouge (>= 3.0, < 5.0) safe_yaml (~> 1.0) + terminal-table (>= 1.8, < 4.0) + webrick (~> 1.7) jekyll-paginate (1.1.0) - jekyll-sass-converter (1.4.0) - sass (~> 3.4) - jekyll-watch (1.3.1) + jekyll-sass-converter (3.1.0) + sass-embedded (~> 1.75) + jekyll-watch (2.2.1) listen (~> 3.0) - json (1.8.3) - kramdown (1.9.0) - liquid (3.0.6) - listen (3.0.6) - rb-fsevent (>= 0.9.3) - rb-inotify (>= 0.9.7) - mercenary (0.3.5) - mini_portile2 (2.0.0) - net-http-persistent (2.9.4) - newrelic_rpm (3.14.2.312) - nokogiri (1.6.7.2) - mini_portile2 (~> 2.0.0.rc2) - parser (2.3.0.2) - ast (~> 2.2) - posix-spawn (0.3.11) - powerpack (0.1.1) - pygments.rb (0.6.3) - posix-spawn (~> 0.3.6) - yajl-ruby (~> 1.2.0) - rack (1.5.5) - rack-contrib (1.4.0) - git-version-bump (~> 0.15) - rack (~> 1.4) - rack-host-redirect (1.2.1) + json (2.10.1) + kramdown (2.5.1) + rexml (>= 3.3.9) + kramdown-parser-gfm (1.1.0) + kramdown (~> 2.0) + language_server-protocol (3.17.0.4) + lint_roller (1.1.0) + liquid (4.0.4) + listen (3.9.0) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) + mercenary (0.4.0) + mutex_m (0.3.0) + net-http-persistent (4.0.5) + connection_pool (~> 2.2) + newrelic_rpm (9.17.0) + nokogiri (1.18.3-aarch64-linux-gnu) + racc (~> 1.4) + nokogiri (1.18.3-aarch64-linux-musl) + racc (~> 1.4) + nokogiri (1.18.3-arm-linux-gnu) + racc (~> 1.4) + nokogiri (1.18.3-arm-linux-musl) + racc (~> 1.4) + nokogiri (1.18.3-arm64-darwin) + racc (~> 1.4) + nokogiri (1.18.3-x86_64-darwin) + racc (~> 1.4) + nokogiri (1.18.3-x86_64-linux-gnu) + racc (~> 1.4) + nokogiri (1.18.3-x86_64-linux-musl) + racc (~> 1.4) + parallel (1.26.3) + parser (3.3.7.1) + ast (~> 2.4.1) + racc + pathutil (0.16.2) + forwardable-extended (~> 2.6) + public_suffix (6.0.1) + pygments.rb (3.0.0) + racc (1.8.1) + rack (3.1.10) + rack-contrib (2.5.0) + rack (< 4) + rack-host-redirect (1.3.0) rack rack-rewrite (1.5.1) rack-ssl-enforcer (0.2.9) - rack-wwwhisper (1.1.9) + rack-wwwhisper (1.1.16) addressable (~> 2.0) - net-http-persistent - rack (~> 1.0) + net-http-persistent (< 5.0) + rack (>= 1.0) rack-xframe-options (0.1.2) rack (>= 0.9.1) - rainbow (2.1.0) - rb-fsevent (0.9.7) - rb-inotify (0.9.7) - ffi (>= 0.5.0) - redcarpet (3.3.4) - rouge (1.10.1) - rspec (3.4.0) - rspec-core (~> 3.4.0) - rspec-expectations (~> 3.4.0) - rspec-mocks (~> 3.4.0) - rspec-core (3.4.2) - rspec-support (~> 3.4.0) - rspec-expectations (3.4.0) + rainbow (3.1.1) + rake (13.2.1) + rb-fsevent (0.11.2) + rb-inotify (0.11.1) + ffi (~> 1.0) + redcarpet (3.6.1) + regexp_parser (2.10.0) + rexml (3.4.1) + rouge (4.5.1) + rspec (3.13.0) + rspec-core (~> 3.13.0) + rspec-expectations (~> 3.13.0) + rspec-mocks (~> 3.13.0) + rspec-core (3.13.3) + rspec-support (~> 3.13.0) + rspec-expectations (3.13.3) diff-lcs (>= 1.2.0, < 2.0) - rspec-support (~> 3.4.0) - rspec-mocks (3.4.1) + rspec-support (~> 3.13.0) + rspec-mocks (3.13.2) diff-lcs (>= 1.2.0, < 2.0) - rspec-support (~> 3.4.0) - rspec-support (3.4.1) - rubocop (0.36.0) - parser (>= 2.3.0.0, < 3.0) - powerpack (~> 0.1) - rainbow (>= 1.99.1, < 3.0) + rspec-support (~> 3.13.0) + rspec-support (3.13.2) + rubocop (1.73.1) + json (~> 2.3) + language_server-protocol (~> 3.17.0.2) + lint_roller (~> 1.1.0) + parallel (~> 1.10) + parser (>= 3.3.0.2) + rainbow (>= 2.2.2, < 4.0) + regexp_parser (>= 2.9.3, < 3.0) + rubocop-ast (>= 1.38.0, < 2.0) ruby-progressbar (~> 1.7) - ruby-progressbar (1.7.5) - rubyzip (1.1.7) - safe_yaml (1.0.4) - sass (3.4.21) - simplecov (0.11.1) - docile (~> 1.1.0) - json (~> 1.8) - simplecov-html (~> 0.10.0) - simplecov-html (0.10.0) + unicode-display_width (>= 2.4.0, < 4.0) + rubocop-ast (1.38.1) + parser (>= 3.3.1.0) + ruby-progressbar (1.13.0) + rubyzip (2.4.1) + safe_yaml (1.0.5) + sass-embedded (1.85.1-aarch64-linux-gnu) + google-protobuf (~> 4.29) + sass-embedded (1.85.1-aarch64-linux-musl) + google-protobuf (~> 4.29) + sass-embedded (1.85.1-arm-linux-gnueabihf) + google-protobuf (~> 4.29) + sass-embedded (1.85.1-arm-linux-musleabihf) + google-protobuf (~> 4.29) + sass-embedded (1.85.1-arm64-darwin) + google-protobuf (~> 4.29) + sass-embedded (1.85.1-x86_64-darwin) + google-protobuf (~> 4.29) + sass-embedded (1.85.1-x86_64-linux-gnu) + google-protobuf (~> 4.29) + sass-embedded (1.85.1-x86_64-linux-musl) + google-protobuf (~> 4.29) + simplecov (0.22.0) + docile (~> 1.1) + simplecov-html (~> 0.11) + simplecov_json_formatter (~> 0.1) + simplecov-html (0.13.1) + simplecov_json_formatter (0.1.4) slugize (0.0.3) - uglifier (2.7.2) - execjs (>= 0.3.0) - json (>= 1.8.0) - yajl-ruby (1.2.1) + terminal-table (3.0.2) + unicode-display_width (>= 1.1.1, < 3) + uglifier (4.2.1) + execjs (>= 0.3.0, < 3) + unicode-display_width (2.6.0) + webrick (1.9.1) PLATFORMS - ruby + aarch64-linux + aarch64-linux-gnu + aarch64-linux-musl + arm-linux-gnu + arm-linux-gnueabihf + arm-linux-musl + arm-linux-musleabihf + arm64-darwin + x86_64-darwin + x86_64-linux-gnu + x86_64-linux-musl DEPENDENCIES - algoliasearch (>= 1.6.1) - bundler (>= 1.7.9) - dotenv (>= 0.11.1) - googlestaticmap (>= 1.2.2) - htmlentities (>= 4.3.2) - jekyll (>= 3.0.3) + algoliasearch + bundler + dotenv + googlestaticmap + htmlentities + jekyll jekyll-paginate - newrelic_rpm (>= 3.9.8.273) - nokogiri (>= 1.6.3.1) + newrelic_rpm + nokogiri pygments.rb - rack (< 1.6.0) - rack-contrib (>= 1.2.0) + rack + rack-contrib rack-host-redirect - rack-rewrite (>= 1.5.0) - rack-ssl-enforcer (>= 0.2.9) - rack-wwwhisper (>= 1.0) - rack-xframe-options (>= 0.1.2) + rack-rewrite + rack-ssl-enforcer + rack-wwwhisper + rack-xframe-options redcarpet - rspec (>= 3.1.0) - rubocop (>= 0.28.0) - rubyzip (>= 1.1.6) - simplecov (>= 0.9.1) - slugize (>= 0.0.3) - uglifier (>= 2.7.0) + rspec + rubocop + rubyzip + simplecov + slugize + uglifier RUBY VERSION - ruby 2.2.9p480 + ruby 3.3.7p123 BUNDLED WITH - 1.14.6 + 2.6.5 diff --git a/_config.yml b/_config.yml index 0c6d145..2534af4 100644 --- a/_config.yml +++ b/_config.yml @@ -27,7 +27,7 @@ plugins_dir: plugins/ debug: true -gems: [jekyll-paginate] +plugins: [jekyll-paginate] # Blog Options permalink: none diff --git a/plugins/generator_meetups.rb b/plugins/generator_meetups.rb index 4bdb428..df2194c 100644 --- a/plugins/generator_meetups.rb +++ b/plugins/generator_meetups.rb @@ -21,7 +21,7 @@ def initialize(config) def generate(site) @site = site - map = GoogleStaticMap.new(:width => 700, :height => 500) + map = GoogleStaticMap.new(:api_key => site.config['google_maps'], :width => 700, :height => 500) site.data['meetups'].each do |meetup| map.markers << MapMarker.new(:color => "0x9D49D5FF", :location => MapLocation.new(:latitude => meetup['pin']['latitude'], diff --git a/plugins/jekyll_document.rb b/plugins/jekyll_document.rb index 4fb6c5b..6b40e62 100644 --- a/plugins/jekyll_document.rb +++ b/plugins/jekyll_document.rb @@ -23,10 +23,11 @@ class Document alias_method :parent_to_liquid, :to_liquid def to_liquid - Utils.deep_merge_hashes parent_to_liquid, { - 'toc' => toc, - 'related_docs' => related_docs - } + parent_to_liquid + # Utils.deep_merge_hashes parent_to_liquid, { + # 'toc' => toc, + # 'related_docs' => related_docs + # } end private diff --git a/source/_data/env.yaml b/source/_data/env.yaml index f6d6310..7550115 100644 --- a/source/_data/env.yaml +++ b/source/_data/env.yaml @@ -34,6 +34,8 @@ env: DOCS_URL - config: google_analytics env: GOOGLE_ANALYTICS +- config: google_maps + env: GOOGLE_MAPS - config: debug env: DEBUG - config: sdk_bucket diff --git a/source/_includes/mainmenu.html b/source/_includes/mainmenu.html index 5fafbe3..b1e81ec 100644 --- a/source/_includes/mainmenu.html +++ b/source/_includes/mainmenu.html @@ -1,23 +1,37 @@ {% comment %} - Copyright 2025 Google LLC +Copyright 2025 Google LLC - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at - http://www.apache.org/licenses/LICENSE-2.0 +http://www.apache.org/licenses/LICENSE-2.0 - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. {% endcomment %} -
  • Tutorials
    • -
  • Get the SDK
    • -
  • Guides
    • -
  • Documentation
    • -
  • Examples
    • -
  • Blog
    • -
  • More
    • +
  • + Tutorials
    • +
  • + Get the SDK
    • +
  • + Guides
    • +
  • + Documentation
    • +
  • + Examples
    • +
  • + Blog
    • +
  • + More
    • diff --git a/source/_includes/search.html b/source/_includes/search.html index 264b26e..551f617 100644 --- a/source/_includes/search.html +++ b/source/_includes/search.html @@ -1,22 +1,23 @@ {% comment %} - Copyright 2025 Google LLC +Copyright 2025 Google LLC - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at - http://www.apache.org/licenses/LICENSE-2.0 +http://www.apache.org/licenses/LICENSE-2.0 - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. {% endcomment %}
    - - + +
    diff --git a/source/_layouts/sidebar_narrow.html b/source/_layouts/sidebar_narrow.html index cea1e22..119fc46 100644 --- a/source/_layouts/sidebar_narrow.html +++ b/source/_layouts/sidebar_narrow.html @@ -5,7 +5,7 @@ # you may not use this file except in compliance with the License. # You may obtain a copy of the License at # -# http://www.apache.org/licenses/LICENSE-2.0 +# http://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, @@ -16,7 +16,8 @@ layout: master --- -
    +
    pebble @@ -31,4 +32,4 @@
    Publish
    -{{ content }} \ No newline at end of file + {{ content }} diff --git a/source/_layouts/utils/redirect_permanent.html b/source/_layouts/utils/redirect_permanent.html index ac318f8..73d6b67 100644 --- a/source/_layouts/utils/redirect_permanent.html +++ b/source/_layouts/utils/redirect_permanent.html @@ -1,17 +1,17 @@ {% comment %} - Copyright 2025 Google LLC +Copyright 2025 Google LLC - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at - http://www.apache.org/licenses/LICENSE-2.0 +http://www.apache.org/licenses/LICENSE-2.0 - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. {% endcomment %} {% comment %} @@ -19,11 +19,13 @@ new ones. {% endcomment %} -{% capture redirect_url %}{{ page.redirect_to | prepend: site.baseurl | prepend: site.url }}{% endcapture %} +{% assign redirect_url = page.redirect_to | prepend: site.baseurl | prepend: site.url %} +{% assign http = page.redirect_to | downcase | slice: 0, 7 %} +{% assign https = page.redirect_to | downcase | slice: 0, 8 %} -{% if page.redirect_to | downcase | slice: 0, 6 == "http://" or page.redirect_to | downcase | slice: 0, 7 == "https://" %} -{% capture redirect_url %}{{ page.redirect_to }}{% endcapture %} +{% if http == "http://" or https == "https://" %} +{% assign redirect_url = page.redirect_to %} {% endif %} - \ No newline at end of file + diff --git a/source/_sass/_site/app.scss b/source/_sass/_site/app.scss new file mode 100644 index 0000000..f34a896 --- /dev/null +++ b/source/_sass/_site/app.scss @@ -0,0 +1,277 @@ +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@use 'bourbon/bourbon'; + +@use 'colors'; + +@use 'base/base'; +@use 'responsive/responsive'; +@use 'font-awesome/font-awesome'; + +@use 'header'; +@use 'footer'; + + +@use 'elements/alert'; +@use 'elements/buttons'; +@use 'elements/form'; +@use 'elements/mobile-nav'; +@use 'elements/highlight'; +@use 'elements/inline-list'; +@use 'elements/markdown'; +@use 'elements/screenshot'; +@use 'elements/sidebar'; +@use 'elements/spinner'; +@use 'elements/table'; +// @import 'elements/terminal'; +@use 'elements/toc'; +// @import 'elements/typeahead'; +// @import 'elements/video'; +@use 'elements/bigbox'; +@use 'elements/full-height'; +@use 'elements/sectionmenu'; +@use 'elements/search'; +@use 'elements/gray-box'; +@use 'elements/ribbon'; +@use 'elements/pagination'; +@use 'elements/landing-slider'; +@use 'elements/platform-choice'; +@use 'elements/dual-image'; + +@use 'sections/getting-started'; + +@use 'libs/slick'; +@use 'mmenu/jquery.mmenu.all.scss'; + +@use 'sections/events'; +@use 'sections/blog'; +@use 'sections/documentation'; +@use 'sections/examples'; +@use 'sections/guides'; +@use 'sections/retreat'; +@use 'sections/inspiration'; +@use 'sections/round'; +@use 'sections/sdk'; + +@use 'debug'; +@use "base/variables"; +@use "bourbon/addons/font-family"; +@use "bourbon/css3/box-sizing"; +@use "responsive/utilities/variables" as utilities-variables; + +.mm-page { + height: 100%; + position: inherit; + + > div { + height: 100%; + } +} + +.mmenu__wrapper { + height: 100%; +} + +.mm-opened, +.mm-opening { + .mm-page { + margin-top: -1 * header.$header-height; + } + + .content { + padding-top: header.$header-height; + } +} + +.color-picker polygon { + cursor: pointer; +} + +.size-helper { + position: fixed; + bottom: 0; + right: 0; + background-color: #222; + color: #fff; + font-size: 0.8em; +} + +.modal-content { + background-color: colors.$gray-01; +} + +.header--skinny { + font-weight: normal; +} + +.header--flat-bottom { + margin-bottom: 0; +} + +video { + max-width: 100%; +} + +.video--fullwidth { + width: 100%; +} + +.embed.embed--youtube { + position: relative; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; + max-width: 100%; + + iframe, + .video-wrapper { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} +* { + @include box-sizing.box-sizing(border-box); +} + +body, +html { + height: 100%; + margin: 0; + padding: 0; +} + +body { + padding-top: header.$header-height; + background-color: colors.$gray-01; +} + +.anchor[id], +.anchor[name] { + &::before { + content: ' '; + display: block; + height: header.$header-height; + margin-top: -0.7 * header.$header-height; + visibility: hidden; + } +} + +.hidden { + visibility: hidden; +} + +code { + background-color: colors.$white; + border-radius: 2px; + color: color.scale(variables.$base-font-color, $lightness: -33.7748344371%); + font-family: font-family.$monospace; + font-size: utilities-variables.$base-font-size; + padding: 2px 4px; + box-shadow: inset 0 0 2px #bbb; +} + +a code { + color: color.scale(variables.$base-link-color, $lightness: -30.1775147929%); +} + +.container { + max-width: none; + padding: 1em; + position: relative; +} + +.vcenter { + display: table-cell; + vertical-align: middle; +} + +.vcenter--wrapper { + display: table; + width: 100%; +} + +.hcenter { + display: table-cell; + position: relative; + left: 50%; + transform: translateX(-50%); +} + +.hcenter--wrapper { + display: table; + width: 100%; + text-align: center; + margin: 0 auto; +} + +.pagetitle { + text-transform: uppercase; + line-height: 1.1; + + a { + color: utilities-variables.$base-text-color; + + &:hover { + text-decoration: underline; + } + } +} + +.pagetitle--skinny { + margin: 0; +} + +.pagesubtitle { + font-weight: normal; + font-size: 1.4em; + text-transform: uppercase; + color: #999; + margin-bottom: 1em; +} + +.noscript--hide { +} + +.noscript--show { + display: none; +} + +.git-contributors { + li { + display: inline-block; + margin-right: 0.5em; + + &:after { + content: ', '; + } + + &:last-child { + + &:after { + content: ''; + } + } + } +} + +.stop-scrolling { + height: 100%; + overflow: hidden; +} diff --git a/source/_sass/_site/bourbon/LICENSE b/source/_sass/_site/bourbon/LICENSE new file mode 100644 index 0000000..a567240 --- /dev/null +++ b/source/_sass/_site/bourbon/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright © 2011 [thoughtbot, inc.](http://thoughtbot.com) + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the “Software”), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/source/_sass/_site/col.scss b/source/_sass/_site/col.scss new file mode 100644 index 0000000..54f20e0 --- /dev/null +++ b/source/_sass/_site/col.scss @@ -0,0 +1,39 @@ +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +$pebble-black: #111; +$pebble-blue: #16b5d8; +$pebble-blue-alt: color.scale(#16b5d8, $lightness: -33.7748344371%); +$pebble-gray: #959fa0; +$pebble-green: #aed70d; +$pebble-orange: #f57216; +$pebble-pink: #ff568a; +$pebble-red: #b93231; +$pebble-silver: #bdc3c7; + +$green: #00a94b; +$blue: #16aee5; +$red: #ff1200; +$dark-grey: #444; +$darker-grey: #333; +$pink: #d84ba1; +$yellow: #e5e327; +$purple: #9d49d5; +$orange: #e79b22; + +$color-guides: $yellow; +$color-documentation: $pink; +$color-community: $purple; \ No newline at end of file diff --git a/source/_sass/_site/colors.scss b/source/_sass/_site/colors.scss new file mode 100644 index 0000000..5721333 --- /dev/null +++ b/source/_sass/_site/colors.scss @@ -0,0 +1,97 @@ +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +$pebble-black: #111; +$pebble-blue: #16b5d8; +$pebble-blue-alt: color.scale(#16b5d8, $lightness: -33.7748344371%); +$pebble-gray: #959fa0; +$pebble-green: #aed70d; +$pebble-orange: #f57216; +$pebble-pink: #ff568a; +$pebble-red: #b93231; +$pebble-silver: #bdc3c7; + +$header-orange: #ef6725; + +$white: #fff; +$breakfast-room-white: #FFFFF0; +$black: #000; +$green: #00a94b; +$blue: #16aee5; +$red: #ff1200; +$dark-grey: #444; +$darker-grey: #333; +$pink: #d84ba1; +$yellow: #e5e327; +$mustard-yellow: #f5d04c; +$purple: #9d49d5; +$orange: #e59a25; +$orange-02: #e27c3f; +$lightblue: #4cafe2; +$darkerlightblue: #4c96e2; +$dark-red: #d55248; +$dark-blue: #3f94c0; +$turquoise: #35a2b2; +$android-green: #A4C739; + +$bigbox--blue: $lightblue; +$bigbox--green: #22a048; +$bigbox--darkgreen: color.scale($bigbox--green, $lightness: -33.7748344371%); +$bigbox--dark-blue: color.scale($darkerlightblue, $lightness: -33.7748344371%); + +$color-guides: $yellow; +$color-docs: $pink; +$color-community: $purple; +$color-more: $green; +$color-getting-started: $dark-red; +$color-sdk: $lightblue; +$color-appstore: $orange; +$color-other: $dark-grey; + +$gray-01: #f4f4f4; +$gray-02: #444; +$gray-03: #484848; +$gray-04: #eee; +$gray-05: #e5e4e4; +$gray-06: #d6d6d6; +$gray-07: #272822; +$gray-08: #ddd; +$gray-09: #bebebe; +$gray-10: #d9d9d9; +$gray-11: #666; +$gray-12: #ccc; + +$bigbox--blue: $lightblue; +$bigbox--green: #22a048; + +$color-guides: $yellow; +$color-docs: $pink; +$color-community: $purple; +$color-more: $green; +$color-getting-started: $dark-red; +$color-sdk: $lightblue; +$color-appstore: $gray-03; +$color-blog: $orange-02; +$color-examples: #2c67ce; + +$modifier-color-names: 'guides', 'docs', 'community', 'more', 'getting-started', + 'sdk', 'appstore', 'blog'; + +$modifier-colors: $color-guides, $color-docs, $color-community, $color-more, + $color-getting-started, $color-sdk, $color-appstore, + $color-blog; + +$modifier-colors-fg: $white $white $white $white $white $white $white $white; diff --git a/source/_sass/_site/debug.scss b/source/_sass/_site/debug.scss new file mode 100644 index 0000000..31d6656 --- /dev/null +++ b/source/_sass/_site/debug.scss @@ -0,0 +1,24 @@ +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.visibility-checker { + background-color: #444; + bottom: 0; + color: #fff; + position: fixed; + right: 0; + z-index: 10000; +} diff --git a/source/_sass/_site/elements/alert.scss b/source/_sass/_site/elements/alert.scss new file mode 100644 index 0000000..18c4b5d --- /dev/null +++ b/source/_sass/_site/elements/alert.scss @@ -0,0 +1,81 @@ +@use "../colors"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.alert { + background-color: #ddd; + color: colors.$white; + margin-bottom: 1em; + padding: 0.5em; + + p { + font-size: 0.9em; + + &:last-child { + margin-bottom: 0; + } + } + + ul { + @extend %default-ul; + + &:last-child { + margin-bottom: 0; + } + } +} + +.alert--large { + font-size: 1.1em; + padding: 1em; +} + +.alert--medium { + font-size: 1em; + line-height: 1.3; + padding: 0.7em; +} + +$alert-colors: colors.$white colors.$green colors.$blue colors.$red colors.$purple colors.$yellow colors.$orange colors.$lightblue colors.$dark-red colors.$color-blog; +$alert-names: 'white' 'green' 'blue' 'red' 'purple' 'yellow' 'orange' 'lightblue' 'dark-red' 'blog'; + +@each $color in $alert-colors { + $i: list.index($alert-colors, $color); + + .alert--fg-#{list.nth($alert-names, $i)} { + color: $color; + + a { + color: $color; + text-decoration: underline; + } + } + + .alert--bg-#{list.nth($alert-names, $i)} { + background-color: $color; + } +} + +.alert--error { + background-color: colors.$dark-red; + color: #fff; +} + +.alert--success { + background-color: colors.$green; + color: #fff; +} diff --git a/source/_sass/_site/elements/bigbox.scss b/source/_sass/_site/elements/bigbox.scss new file mode 100644 index 0000000..a764b4f --- /dev/null +++ b/source/_sass/_site/elements/bigbox.scss @@ -0,0 +1,192 @@ +@use "../base/variables"; +@use "../colors"; +@use "../responsive/utilities/variables" as utilities-variables; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.bigbox { + text-align: center; + padding: 2em; + overflow: hidden; + position: relative; + + p { + font-size: 1.2 * utilities-variables.$base-font-size; + } + + h2, + h3, + h4 { + font-weight: 600; + + a { + color: variables.$base-font-color; + + &:hover { + text-decoration: underline; + } + } + } + + .btn { + margin-top: 1em; + } + + .vcenter, + .vcenter--wrapper { + height: 100%; + width: 100%; + } +} + +.bigbox--half { + height: 50%; +} + +.bigbox--third { + height: 33.33%; +} + +.bigbox--lightblue { + background-color: colors.$lightblue; + color: colors.$white; +} + +.bigbox--blue { + background-color: colors.$bigbox--blue; + color: colors.$white; +} + +.bigbox--dark-blue { + background-color: colors.$bigbox--blue; + color: colors.$white; +} + +.bigbox--green { + background-color: colors.$bigbox--green; + color: colors.$white; +} + +.bigbox--dark-green { + background-color: colors.$bigbox--darkgreen; + color: colors.$white; +} + +.bigbox--orange { + background-color: colors.$orange; + color: colors.$white; +} + +.bigbox--red { + background-color: colors.$red; + color: colors.$white; +} + +.bigbox--dark-red { + background-color: colors.$dark-red; + color: colors.$white; +} + +.bigbox--lightgray { + background-color: colors.$gray-04; +} + +.bigbox--gray { + background-color: colors.$gray-05; +} + +.bigbox--darkgray { + background-color: colors.$gray-02; + color: colors.$white; +} + + +.bigbox--meetups--map { + background-size: cover; + background-repeat: no-repeat; + background-position: center center; +} + +.bigbox--android { + color: colors.$white; + background-color: colors.$android-green; + + i { + font-size: 6em; + padding-bottom: 20px; + } +} + + +.bigbox--ios { + color: colors.$black; + background-color: colors.$white; + + i { + font-size: 6em; + padding-bottom: 20px; + } +} + +.bigbox__banner { + position: absolute; + top: 0; + left: 0; + right: 0; + background-color: colors.$green; + color: colors.$white; + padding: 0.50rem; + + &:hover { + color: colors.$white; + text-decoration: underline; + } +} + +.bigbox--has-banner { + padding-top: 2.5em; +} + +.bigbox__highlight { + &:hover { + -webkit-filter: brightness(110%); + } +} + +.bigbox__guides-beautiful { + background-color: colors.$blue; + color: colors.$breakfast-room-white; + background-image: url('/assets/images/landing-page/first_time_bg.png'); +} + +.bigbox__guides-building { + background-color: colors.$gray-02; + color: colors.$breakfast-room-white; + background-image: url('/assets/images/landing-page/back_for_more_bg.png'); +} + +.bigbox__guides-publishing { + background-color: colors.$blue; + color: colors.$breakfast-room-white; + background-image: url('/assets/images/landing-page/meta_bg.png'); +} + +.bigbox__guides-interactive { + background-color: colors.$gray-02; + color: colors.$breakfast-room-white; + background-image: url('/assets/images/landing-page/interactive_bg.png'); +} diff --git a/source/_sass/_site/elements/buttons.scss b/source/_sass/_site/elements/buttons.scss new file mode 100644 index 0000000..a99ae50 --- /dev/null +++ b/source/_sass/_site/elements/buttons.scss @@ -0,0 +1,131 @@ +@use "../colors"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.btn { + background-color: colors.$white; + border-radius: 4px; + color: colors.$darker-grey; + font-weight: 700; + padding: 0.5em 2em; + text-transform: uppercase; + display: inline-block; + text-align: center; + + &:hover { + color: colors.$darker-grey; + } +} + +input.btn, +submit.btn { + border: none; + font-size: inherit; +} + +$btn-colors: colors.$white colors.$gray-02 colors.$green colors.$blue colors.$red colors.$purple colors.$yellow colors.$orange colors.$lightblue colors.$dark-red colors.$orange-02 colors.$android-green; +$btn-names: 'white' gray-02 'green' 'blue' 'red' 'purple' 'yellow' 'orange' 'lightblue' 'dark-red' 'orange-02' 'android-green'; + +@each $color in $btn-colors { + $i: list.index($btn-colors, $color); + + .btn--fg-#{list.nth($btn-names, $i)} { + color: $color; + + &:hover, + &:active, + &:focus { + color: $color; + } + } + + .btn--bg-#{list.nth($btn-names, $i)} { + background-color: $color; + + &:hover, + &:active, + &:focus { + background-color: color.scale($color, $lightness: -30.1775147929%); + } + } +} + +// Generate a pair of button classes for each section (original and alternate). +// This should be used when adding buttons in each section, in case we change +// the colours in the future. +@each $color in colors.$modifier-colors { + $i: list.index(colors.$modifier-colors, $color); + + .btn--#{list.nth(colors.$modifier-color-names, $i)} { + background-color: $color; + color: list.nth(colors.$modifier-colors-fg, $i); + + &:hover, + &:focus { + color: list.nth(colors.$modifier-colors-fg, $i); + background-color: color.scale($color, $lightness: -30.1775147929%); + } + + a { + color: list.nth(colors.$modifier-colors-fg, $i); + } + } + + .btn--#{list.nth(colors.$modifier-color-names, $i)}--alt { + background-color: color.complement($color); + color: list.nth(colors.$modifier-colors-fg, $i); + + &:hover, + &:focus { + color: list.nth(colors.$modifier-colors-fg, $i); + background-color: color.scale(color.complement($color), $lightness: -30.1775147929%); + } + + a { + color: list.nth(colors.$modifier-colors-fg, $i); + } + } +} + + +.btn + .btn { + margin-left: 1em; +} + +.btn--wide { + width: 100%; + padding: 0.5em 0; +} + +.btn--center { + display: table; + margin: 0 auto; +} + +.btn--small { + font-size: 0.9em; + padding: 0.5em 1.5em; +} + +.btn--square { + border-radius: 0 +} + +.btn--ios { + color: colors.$white; + background-color: colors.$black; +} diff --git a/source/_sass/_site/elements/calendar.scss b/source/_sass/_site/elements/calendar.scss new file mode 100644 index 0000000..1827e48 --- /dev/null +++ b/source/_sass/_site/elements/calendar.scss @@ -0,0 +1,48 @@ +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.calendar { + + td, + th { + padding: 0.5em 0; + text-align: center; + } + + tbody { + td { + width: calc(1 / 7) * 100%; + } + } +} + +.calendar__month { + text-align: center; +} + +.calendar__day--off { + color: lighten($base-text-color, 50); +} + +.calendar__day--today { + color: $base-link-color; + font-weight: bold; +} + +.calendar__day--event { + background-color: $base-link-color; + color: #fff; +} diff --git a/source/_sass/_site/elements/dual-image.scss b/source/_sass/_site/elements/dual-image.scss new file mode 100644 index 0000000..ecb200b --- /dev/null +++ b/source/_sass/_site/elements/dual-image.scss @@ -0,0 +1,27 @@ +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* View 2 images side by side */ +.pebble-dual-image { + overflow: hidden; + margin: 2em 1em; + .panel { + width: 50%; + display: inline; + float: left; + min-width: 244px; + } +} diff --git a/source/_sass/_site/elements/form.scss b/source/_sass/_site/elements/form.scss new file mode 100644 index 0000000..fa1e564 --- /dev/null +++ b/source/_sass/_site/elements/form.scss @@ -0,0 +1,118 @@ +@use "../base/variables"; +@use "../colors"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.form__group { + display: table; + margin-bottom: 1em; + width: 100%; + + input, + select, + textarea { + background-color: white; + border: 1px solid colors.$gray-06; + border-left: none; + border-radius: 0 5px 5px 0; + color: colors.$gray-02; + display: table-cell; + font-family: variables.$sans-serif; + font-size: 15px; + margin: 0; + padding: 7px; + text-align: left; + width: 100%; + + &.no-label { + border-radius: 5px; + } + + &:focus { + box-shadow: none; + outline: none; + } + } + + textarea { + text-align: left; + margin-bottom: -5px; + } + + select { + height: 2em; + } + + .select-style { + background-color: white; + border-radius: 0 5px 5px 0; + border: 1px solid colors.$gray-06; + border-left-width: 0; + color: color.scale(#444, $alpha:-50%); + display: table-cell; + font-family: variables.$sans-serif; + font-size: 15px; + margin: 0; + overflow: hidden; + padding: 3px 7px; + text-align: left; + width: 100%; + + select { + -webkit-appearance: none; + background-image: none; + background: transparent; + border: none; + box-shadow: none; + padding: 5px 8px; + width: 130%; + } + + select:focus { + outline: none; + } + + &.no-label { + border-left-width: 1px; + } + } + + label { + background-color: #fff; + border: 1px solid colors.$gray-06; + border-right: none; + border-radius: 5px 0 0 5px; + color: #111; + display: table-cell; + font-size: 14px; + font-weight: 400; + margin: 0; + padding: 7px 10px; + vertical-align: top; + white-space: nowrap; + width: 25%; + } + + input.mce_inline_error { + background-color: color.scale(colors.$dark-red, $lightness: 55.737704918%); + border: 1px solid colors.$dark-red; + } +} + +input[type="submit"] { + cursor: pointer; +} diff --git a/source/_sass/_site/elements/full-height.scss b/source/_sass/_site/elements/full-height.scss new file mode 100644 index 0000000..2e778d7 --- /dev/null +++ b/source/_sass/_site/elements/full-height.scss @@ -0,0 +1,66 @@ +@use "../responsive/utilities/mixins/breakpoints"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.full-height { + height: 100%; +} + +@include breakpoints.bp(xs) { + .full-height--xs { + height: 100%; + } +} + +@include breakpoints.bp(s) { + .full-height--s { + height: 100%; + } +} + +@include breakpoints.bp(m) { + .full-height--m { + height: 100%; + } +} + +@include breakpoints.bp(l) { + .full-height--l { + height: 100%; + } +} + +.half-height { + height: 50%; +} + +.half-height--bottom { + height: 50%; + padding-top: 50%; +} + +.one-third-height { + height: 33%; +} + +.two-thirds-height { + height: 67%; +} + +.quarter-height { + height: 25%; +} diff --git a/source/_sass/_site/elements/gray-box.scss b/source/_sass/_site/elements/gray-box.scss new file mode 100644 index 0000000..939ea45 --- /dev/null +++ b/source/_sass/_site/elements/gray-box.scss @@ -0,0 +1,71 @@ +@use "../base/variables"; +@use "../colors"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.gray-box { + background-color: colors.$gray-04; + border-radius: variables.$base-border-radius; + margin-bottom: 1em; + overflow-x: hidden; + padding: 1em; + + ul { + margin-bottom: 1em; + + &:last-child { + margin-bottom: 0; + } + } + + li { + margin-bottom: 0.2em; + + &:last-child { + margin-bottom: 0; + } + } + + h3 { + color: colors.$gray-02; + font-size: 1.3em; + font-weight: 600; + text-transform: uppercase; + + a, + a:hover, + a:active { + color: colors.$gray-02; + } + + a:hover, + a:active { + text-decoration: underline; + } + } +} + +.gray-box--fixed { + overflow-y: auto; +} + +.white-box { + background-color: colors.$white; + border-radius: variables.$base-border-radius; + margin-bottom: 1em; + padding: 0.5em; +} diff --git a/source/_sass/_site/elements/highlight.scss b/source/_sass/_site/elements/highlight.scss new file mode 100644 index 0000000..f121f87 --- /dev/null +++ b/source/_sass/_site/elements/highlight.scss @@ -0,0 +1,302 @@ +@use "../base/variables"; +@use "../bourbon/addons/font-family"; +@use "../colors"; +@use "../responsive/utilities/mixins/breakpoints"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.highlight { + background-color: colors.$gray-07; + border-radius: variables.$base-border-radius; + color: #f8f8f2; + font: 13px/1.3em font-family.$monospace; + margin: 0 0 0.75em; + padding: 10px; + position: relative; + + @include breakpoints.bp-max (xs) { + font-size: 12px; + } + + &.squished { + border-radius: 0; + margin: 0; + } + + pre { + margin: 0; + overflow-x: auto; + } + + .code-copy-link { + background-color: colors.$turquoise; + border-radius: variables.$base-border-radius; + color: colors.$white; + opacity: 0.1; + padding: 0.3em 0.3em 0.3em 0.35em; + position: absolute; + right: 0.4em; + top: 0.4em; + transition: opacity 0.2s; + + &.zeroclipboard-is-hover { + opacity: 1; + } + + span { + display: inline-block; + margin-right: 0.5em; + } + } + + &:hover { + .code-copy-link { + opacity: 1; + } + } + + // Error + .err { + background-color: #1e0010; + color: #960050; + } + + // Keyword + .k { + color: #66d9ef; + } + + // Literal + .l { + color: #ae81ff; + } + + // Name + .n { + color: #f8f8f2; + } + + // Operator + .o { + color: #f92672; + } + + // Punctuation + .p { + color: #f8f8f2; + } + + // Comment.Multiline + // Comment.Preproc + // Comment.Single + // Comment.Special + // Comment + .c, + .cm, + .cp, + .c1, + .cs { + color: #e4b21f; + font-weight: 600; + } + + // Generic.Emph + .ge { + font-style: italic; + } + + // Generic.Strong + .gs { + font-weight: bold; + } + + // Keyword.Constant + // Keyword.Declaration + .kc, + .kd { + color: #66d9ef; + } + + // Keyword.Namespace + .kn { + color: #f92672; + } + + // Keyword.Pseudo + // Keyword.Reserved + // Keyword.Type + .kp, + .kr, + .kt { + color: #66d9ef; + } + + // Literal.Date + .ld { + color: #e6db74; + } + + // Literal.Number + .m { + color: #ae81ff; + } + + // Literal.String + .s { + color: #e6db74; + } + + // Name.Attribute + .na { + color: #a6e22e; + } + + // Name.Builtin + .nb { + color: #f8f8f2; + } + + // Name.Class + .nc { + color: #a6e22e; + } + + // Name.Constant + .no { + color: #66d9ef; + } + + // Name.Decorator + .nd { + color: #a6e22e; + } + + // Name.Entity + .ni { + color: #f8f8f2; + } + + // Name.Exception + // Name.Function + .ne, + .nf { + color: #a6e22e; + } + + // Name.Label + // Name.Namespace + .nl, + .nn { + color: #f8f8f2; + } + + // Name.Other + .nx { + color: #a6e22e; + } + + // Name.Property + .py { + color: #f8f8f2; + } + + // Name.Tag + .nt { + color: #f92672; + } + + // Name.Variable + .nv { + color: #f8f8f2; + } + + // Operator.Word + .ow { + color: #f92672; + } + + // Text.Whitespace + .w { + color: #f8f8f2; + } + + // Literal.Number.Float + // Literal.Number.Hex + // Literal.Number.Integer + // Literal.Number.Oct + .mf, + .mh, + .mi, + .mo { + color: #ae81ff; + } + + // Literal.String.Backtick + // Literal.String.Char + // Literal.String.Doc + // Literal.String.Double + .sb, + .sc, + .sd, + .s2 { + color: #e6db74; + } + + // Literal.String.Escape + .se { + color: #ae81ff; + } + + // Literal.String.Heredoc + // Literal.String.Interpol + // Literal.String.Other + // Literal.String.Regex + // Literal.String.Single + // Literal.String.Symbol + .sh, + .si, + .sx, + .sr, + .s1, + .ss { + color: #e6db74; + } + + // Name.Builtin.Pseudo + // Name.Variable.Class + // Name.Variable.Global + // Name.Variable.Instance + .bp, + .vc, + .vg, + .vi { + color: #f8f8f2; + } + + // Literal.Number.Integer.Long + .il { + color: #ae81ff; + } +} + +.modal-content .highlight { + position: relative; +} + +.highlight--large { + font: 15px/1.3em font-family.$monospace; +} diff --git a/source/_sass/_site/elements/inline-list.scss b/source/_sass/_site/elements/inline-list.scss new file mode 100644 index 0000000..964f438 --- /dev/null +++ b/source/_sass/_site/elements/inline-list.scss @@ -0,0 +1,68 @@ +@use "../base/variables"; +@use "../colors"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@charset "UTF-8"; + +ul.inline-list { + margin: 0; + padding: 0; + + li { + display: inline-block; + + a { + display: inline-block; + } + } +} + +.inline-list--piped li::after { + color: color.scale(variables.$base-font-color, $lightness: 41.8032786885%); + content: ' | '; + display: inline; +} + +.inline-list--piped li:last-child::after { + content: ''; +} + +.inline-list--dashed li::after { + color: color.scale(variables.$base-font-color, $lightness: 55.737704918%); + content: ' — '; + display: inline; +} + +.inline-list--dashed li:last-child::after { + content: ''; +} + +.inline-list--tags { + + li { + background-color: #444; + border-radius: 2px; + color: colors.$white; + display: inline-block; + font-size: 0.65em; + font-weight: bold; + margin-right: 0.2rem; + padding: 0.1rem 0.3rem; + text-transform: uppercase; + } +} \ No newline at end of file diff --git a/source/_sass/_site/elements/landing-slider.scss b/source/_sass/_site/elements/landing-slider.scss new file mode 100644 index 0000000..90c25a1 --- /dev/null +++ b/source/_sass/_site/elements/landing-slider.scss @@ -0,0 +1,32 @@ +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.landing-slider__slide { + position: relative; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + + .vcenter { + height: 300px; + } +} + +.landing-slider__strap { + background-color: rgba(0, 0, 0, 0.7); + color: #fff; + padding: 1em 2em; +} diff --git a/source/_sass/_site/elements/markdown.scss b/source/_sass/_site/elements/markdown.scss new file mode 100644 index 0000000..451dbdf --- /dev/null +++ b/source/_sass/_site/elements/markdown.scss @@ -0,0 +1,128 @@ +@use "../colors"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.markdown { + + ul { + @extend %default-ul; + } + + ol { + @extend %default-ol; + } + + $table-border-color: colors.$gray-06; + $table-border: 1px solid $table-border-color; + $table-background: colors.$white; + $table-header-background: colors.$gray-02; + $table-header-color: colors.$white; + $table-hover-color: color.scale($table-background, $lightness: -5%); + $table-stripe-color: color.scale($table-background, $lightness: -4%); + $table-stripe-color-hover: color.scale($table-stripe-color, $lightness: -5%); + $table-padding: 0.5em; + + table { + border: $table-border; + border-collapse: separate; + border-left: 0; + border-spacing: 0; + margin-bottom: 1em; + font-size: 0.9em; + } + + tbody { + background-color: $table-background; + + td { + border-bottom: 0; + border-left: 1px solid $table-border-color; + border-top: 1px solid $table-border-color; + padding: $table-padding; + } + + tr:hover > td, + tr:hover > th { + background-color: $table-hover-color; + } + + tr:nth-child(even) { + background-color: $table-stripe-color; + + &:hover > td { + background-color: $table-stripe-color-hover; + } + } + } + + thead { + + th { + background-color: $table-header-background; + border-bottom: 0; + border-left: 1px solid $table-border-color; + color: $table-header-color; + padding: $table-padding; + font-weight: 600; + } + } + + svg { + margin-bottom: 1em; + } +} + +.markdown--staff, +.markdown--user { + // margin: 0 auto; + max-width: 43em; +} + +.markdown--staff { + + img { + display: block; + margin: 0 auto; + max-width: 100%; + } +} + +.markdown--legal { + + p { + text-align: justify; + } + + ol { + list-style: none; + margin: 0; + padding: 0; + + li { + margin-bottom: 0.5em; + } + + li strong:first-child { + display: inline-block; + width: 4em; + } + } +} + +.markdown--retreat { + padding-right: 1.5rem; +} diff --git a/source/_sass/_site/elements/mobile-nav.scss b/source/_sass/_site/elements/mobile-nav.scss new file mode 100644 index 0000000..1b6b96e --- /dev/null +++ b/source/_sass/_site/elements/mobile-nav.scss @@ -0,0 +1,118 @@ +@use "../colors"; +@use "../header"; +@use "../responsive/utilities/mixins/breakpoints"; +@use "../responsive/utilities/variables"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +$hamburger-width: header.$header-height; + +.mobile-nav { + background-color: colors.$gray-03; + bottom: 0; + left: 0; + overflow-y: auto; + position: fixed; + top: header.$header-height; + width: 90%; + z-index: 200; + + .open { + display: inherit; + } + + .mainmenu__item a { + color: #fff; + display: block; + font-size: 13px; + font-weight: bold; + height: 4.4em; + margin: 0.5em 0; + padding: 1.5em; + position: relative; + text-transform: uppercase; + + &:hover { + background-color: color.scale(colors.$gray-03, $lightness: 13.9344262295%); + } + } + + .mainmenu__item.active a { + background-color: colors.$gray-06; + color: colors.$gray-03; + } +} + +.mobile-nav__hamburger { + display: none; + + @include breakpoints.bp-max (xs) { + border-bottom: 1px solid colors.$gray-10; + display: block; + position: fixed; + background-color: colors.$white; + left: 0; + width: $hamburger-width; + top: 0; + height: header.$header-height; + padding: calc(variables.$base-font-size / 1.5) 0; + font-size: variables.$base-font-size * 2; + text-align: center; + color: colors.$gray-03; + + &:hover, + &:active { + color: colors.$gray-03; + } + } +} + +.mobile-nav--home { + border-left: 5px solid transparent; +} + +.mobile-nav--tutorials { + border-left: 5px solid colors.$color-getting-started; +} + +.mobile-nav--sdk { + border-left: 5px solid colors.$color-sdk; +} + +.mobile-nav--guides { + border-left: 5px solid colors.$color-guides; +} + +.mobile-nav--docs { + border-left: 5px solid colors.$color-docs; +} + +.mobile-nav--examples { + border-left: 5px solid colors.$color-examples; +} + +.mobile-nav--community { + border-left: 5px solid colors.$color-community; +} + +.mobile-nav--blog { + border-left: 5px solid colors.$color-blog; +} + +.mobile-nav--more { + border-left: 5px solid colors.$color-more; +} diff --git a/source/_sass/_site/elements/pagination.scss b/source/_sass/_site/elements/pagination.scss new file mode 100644 index 0000000..b8559fd --- /dev/null +++ b/source/_sass/_site/elements/pagination.scss @@ -0,0 +1,47 @@ +@use "../base/variables"; +@use "../colors"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.pagination { + margin: 0.5rem 0; + + li { + display: inline-block; + } + + a { + border: 1px solid colors.$gray-08; + border-radius: variables.$base-border-radius; + color: colors.$gray-02; + display: block; + padding: 0.5rem 1rem; + + &:hover { + // background-color: color.scale($base-link-color, $lightness: 39.2307692308%); + border-color: variables.$base-link-color; + color: variables.$base-link-color; + } + } + + .active a { + background-color: variables.$base-link-color; + color: colors.$white; + font-weight: bold; + border-color: variables.$base-link-color; + } +} diff --git a/source/_sass/_site/elements/platform-choice.scss b/source/_sass/_site/elements/platform-choice.scss new file mode 100644 index 0000000..7ec71ee --- /dev/null +++ b/source/_sass/_site/elements/platform-choice.scss @@ -0,0 +1,91 @@ +@use "../base/variables"; +@use "../colors"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.platform-choice { + padding: 0.5em; + border-radius: variables.$base-border-radius; +} + +.platform-choice--large { + font-size: 1.1em; + text-align: center; +} + +.platform-choice--small { + + p { + margin: 0; + } + + img { + display: block; + float: left; + height: variables.$unitless-line-height * 1em; + margin-right: 0.5em; + } + + a { + color: #fff; + font-weight: bold; + white-space: nowrap; + + &:hover { + text-decoration: underline; + } + } +} + +.platform-choice--hidden { + display: none; +} + +.platform-choice--link { + display: inline-block; + margin: 0 1em; + + img { + display: block; + height: 3em; + margin: 0 auto; + } + + h4 { + color: colors.$white; + font-size: 0.9em; + margin: 0.5em 0 0; + text-align: center; + text-transform: uppercase; + } + + &:hover { + h4 { + text-decoration: underline; + } + } +} + +// Hide all of the platform specific instructions by default. +.platform-specific { + display: none; +} + +// Unhide CloudPebble instructions to handle lack of JS support / JS failures. +.platform-specific[data-sdk-platform="cloudpebble"] { + display: inherit; +} diff --git a/source/_sass/_site/elements/ribbon.scss b/source/_sass/_site/elements/ribbon.scss new file mode 100644 index 0000000..e1d8250 --- /dev/null +++ b/source/_sass/_site/elements/ribbon.scss @@ -0,0 +1,68 @@ +@use "../bourbon/css3/transform"; +@use "../colors"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.ribbon { + @include transform.transform(rotate(45deg)); + background-color: colors.$pebble-green; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); + color: #fff; + font-size: 19px; + font-weight: bold; + left: -5px; + line-height: 15px; + padding: 10px 0 8px; + position: relative; + text-align: center; + top: 15px; + width: 120px; +} + +.ribbon__wrapper { + height: 88px; + overflow: hidden; + position: absolute; + right: 0; + top: 0; + width: 85px; +} + +.ribbon__container { + position: relative; +} + +.ribbon--bg-white { + background-color: colors.$white; +} + +.ribbon--fg-dark-grey { + color: colors.$dark-grey; +} + +.ribbon--bg-dark-red { + background-color: colors.$dark-red; +} + +.ribbon--fg-dark-red { + color: colors.$dark-red; +} + +.ribbon--fg-white { + color: colors.$white; +} + diff --git a/source/_sass/_site/elements/screenshot.scss b/source/_sass/_site/elements/screenshot.scss new file mode 100644 index 0000000..22f599f --- /dev/null +++ b/source/_sass/_site/elements/screenshot.scss @@ -0,0 +1,302 @@ +@use "../colors"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.pebble-screenshot { + background-repeat: no-repeat; + display: inline-block; + height: 407px; + padding: 112px 49px 127px; + text-align: left; + width: 242px; + background-size: contain; +} + +.pebble-screenshot--steel-black, +.pebble-screenshot--steel-stainless { + height: 424px; + padding: 113px 50px 143px; + width: 244px; +} + +.pebble-screenshot--time-black, +.pebble-screenshot--time-white, +.pebble-screenshot--time-red { + height: 350px; + padding-top: 91px; + padding-left: 50px; + padding-right: 50px; + padding-bottom: 91px; + width: 244px; +} + +.pebble-screenshot--time-round-black-20, +.pebble-screenshot--time-round-silver-20 { + height: 390px; + padding-top: 110px; + padding-left: 55px; + padding-right: 54px; + padding-bottom: 100px; + width: 289px; +} + +.pebble-screenshot--time-round-red-14, +.pebble-screenshot--time-round-rosegold-14, +.pebble-screenshot--time-round-silver-14 { + height: 390px; + padding-top: 107px; + padding-left: 58px; + padding-right: 56px; + padding-bottom: 103px; + width: 294px; +} + +.pebble-screenshot--pebble2-black, +.pebble-screenshot--pebble2-black-lime, +.pebble-screenshot--pebble2-black-red, +.pebble-screenshot--pebble2-white, +.pebble-screenshot--pebble2-white-teal { + height: 390px; + padding-top: 103px; + padding-left: 48px; + padding-right: 86px; + padding-bottom: 100px; + width: 294px; +} + +.pebble-screenshot--steel-black { + background-image: url('/assets/images/pebbles/steel_black.png'); +} + +.pebble-screenshot--steel-stainless { + background-image: url('/assets/images/pebbles/steel_stainless.png'); +} + +.pebble-screenshot--time-black { + background-image: url('/assets/images/pebbles/snowy-black.png'); +} + +.pebble-screenshot--time-red { + background-image: url('/assets/images/pebbles/snowy-red.png'); +} + +.pebble-screenshot--time-white { + background-image: url('/assets/images/pebbles/snowy-white.png'); +} + +.pebble-screenshot--red { + background-image: url('/assets/images/pebbles/red.png'); +} + +.pebble-screenshot--black { + background-image: url('/assets/images/pebbles/black.png'); +} + +.pebble-screenshot--orange { + background-image: url('/assets/images/pebbles/orange.png'); +} + +.pebble-screenshot--white { + background-image: url('/assets/images/pebbles/white.png'); +} + +.pebble-screenshot--grey { + background-image: url('/assets/images/pebbles/grey.png'); +} + +.pebble-screenshot--white-black { + background-image: url('/assets/images/pebbles/white_black.png'); +} + +.pebble-screenshot--time-round-black-20, +.pebble-screenshot--time-round-silver-20 { + background-image: url('/assets/images/pebbles/time-round-black-20.png'); +} + +.pebble-screenshot--time-round-red-14, +.pebble-screenshot--time-round-rosegold-14, +.pebble-screenshot--time-round-silver-14 { + background-image: url('/assets/images/pebbles/time-round-red-14.png'); +} + +.pebble-screenshot--pebble2-black { + background-image: url('/assets/images/pebbles/device_pebble2_black.png'); +} + +.pebble-screenshot--pebble2-black-lime { + background-image: url('/assets/images/pebbles/device_pebble2_blacklime.png'); +} + +.pebble-screenshot--pebble2-black-red { + background-image: url('/assets/images/pebbles/device_pebble2_blackred.png'); +} + +.pebble-screenshot--pebble2-white { + background-image: url('/assets/images/pebbles/device_pebble2_white.png'); +} + +.pebble-screenshot--pebble2-white-teal { + background-image: url('/assets/images/pebbles/device_pebble2_whiteteal.png'); +} + +.pebble-screenshot--strapless { + background-position: 0 -34px; + height: 339px; + padding-bottom: 93px; + padding-top: 78px; + + &.pebble-screenshot--steel-black, + &.pebble-screenshot--steel-stainless { + background-position: 0 -50px; + height: 324px; + padding-top: 63px; + } +} + +.pebble-screenshot--smaller { + + &.pebble-screenshot--steel-black, + &.pebble-screenshot--steel-stainless { + height: 212px; + padding: 56px 25px 72px; + width: 122px; + } + + &.pebble-screenshot--time-black, + &.pebble-screenshot--time-white, + &.pebble-screenshot--time-red { + height: 175px; + padding-top: 45px; + padding-left: 25px; + padding-right: 25px; + padding-bottom: 45px; + width: 122px; + } + + &.pebble-screenshot--time-round-black-20, + &.pebble-screenshot--time-round-red-14, + &.pebble-screenshot--time-round-rosegold-14, + &.pebble-screenshot--time-round-silver-14, + &.pebble-screenshot--time-round-silver-20 { + height: 175px; + padding-top: 41px; + padding-left: 17px; + padding-right: 19px; + padding-bottom: 42px; + width: 128px; + } +} + +.pebble-screenshot--small { + + &.pebble-screenshot--steel-black, + &.pebble-screenshot--steel-stainless { + height: 318px; + padding: 82px 38px 107px 37px; + width: 183px; + } + + &.pebble-screenshot--time-black, + &.pebble-screenshot--time-white, + &.pebble-screenshot--time-red { + height: 263px; + padding-top: 68px; + padding-left: 37px; + padding-right: 38px; + padding-bottom: 68px; + width: 183px; + } + + &.pebble-screenshot--time-round-black-20, + &.pebble-screenshot--time-round-red-14, + &.pebble-screenshot--time-round-rosegold-14, + &.pebble-screenshot--time-round-silver-14, + &.pebble-screenshot--time-round-silver-20 { + height: 263px; + padding-top: 62px; + padding-left: 26px; + padding-right: 25px; + padding-bottom: 64px; + width: 188px; + } +} + +.screenshot-viewer { + margin-bottom: 1rem; + + max-width: 100%; + overflow-y: scroll; +} + +.screenshot-viewer__screenshots { + display: -webkit-flex; + display: flex; + align-items: flex-end; + -webkit-align-items: flex-end; +} + +.screenshot-viewer__platform { + flex: 1 0 auto; + -webkit-flex: 1 0 auto; + text-align: center; + margin-right: 1rem; + + &:last-child { + margin-right: 0; + } +} + +.screenshot-viewer__tabs { + display: -webkit-flex; + display: flex; + align-items: flex-end; + -webkit-align-items: flex-end; + + h4 { + background-color: colors.$gray-02; + color: colors.$white; + font-weight: normal; + text-transform: uppercase; + font-size: 1.2em; + padding: 0.2em; + margin-top: 0.5em; + flex: 1 0 auto; + -webkit-flex: 1 0 auto; + text-align: center; + margin-right: 1rem; + + &:last-child { + margin-right: 0; + } + } +} + +.screenshot-viewer--tabbed { + .screenshot-viewer__tabs { + h4 { + border: 2px solid colors.$gray-02; + background-color: colors.$gray-06; + color: colors.$gray-02; + cursor: pointer; + + &.selected { + background-color: colors.$gray-02; + color: colors.$white; + } + } + } +} diff --git a/source/_sass/_site/elements/search.scss b/source/_sass/_site/elements/search.scss new file mode 100644 index 0000000..0e37204 --- /dev/null +++ b/source/_sass/_site/elements/search.scss @@ -0,0 +1,257 @@ +@use "../base/variables"; +@use "../colors"; +@use "../header"; +@use "../responsive/utilities/mixins/breakpoints"; +@use "../responsive/utilities/variables" as utilities-variables; +@use "mobile-nav"; +@use "sectionmenu"; +@use "sidebar"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.search { + background-color: colors.$white; + border-bottom: 1px solid colors.$gray-10; + height: header.$header-height; + left: sidebar.$sidebar-width; + padding: calc(utilities-variables.$base-font-size / 1.2); + position: fixed; + right: 0; + top: 0; + z-index: 100; + + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { + left: 0; + padding-left: mobile-nav.$hamburger-width; + } + + input { + -webkit-appearance: textfield; + border: 0; + box-shadow: none; + font-size: utilities-variables.$base-font-size * 1.2; + padding: calc(utilities-variables.$base-font-size / 2); + padding-left: 2em; + width: 100%; + + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { + padding-left: 0; + } + + &:focus { + box-shadow: none; + outline: none; + } + + &:before { + content: '\f002'; + font-family: 'FontAwesome'; + } + } +} + +.search__icon { + font-size: utilities-variables.$base-font-size * 1.2; + left: calc(utilities-variables.$base-font-size / 0.6); + position: absolute; + top: calc(utilities-variables.$base-font-size / 0.6); + + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { + display: none; + } +} + +.content--narrow .search { + left: sidebar.$sidebar--wide-width; + + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { + left: 0; + } +} + +.content--section-menu .search { + left: sidebar.$sidebar-width + sectionmenu.$section-menu-width; + + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { + left: 0; + } +} + +.quicksearch { + background-color: #fff; + border-bottom: 1px solid #d9d9d9; + bottom: 10%; + left: sidebar.$sidebar-width; + overflow-y: scroll; + padding: 0 1em 1em; + position: fixed; + right: 0; + top: header.$header-height - 2; + z-index: 200; + + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { + left: 0; + } + + h3 { + font-size: 1.2 * utilities-variables.$base-font-size; + margin: 0.5em 0; + text-transform: uppercase; + } + + ul { + margin: 0; + } +} + +.quicksearch__block { + h3 { + color: colors.$white; + padding: 0 0.25rem; + } +} + +.quicksearch__block--guides { + h3 { + background-color: colors.$color-guides; + color: variables.$base-font-color; + } +} + +.quicksearch__block--docs { + h3 { + background-color: colors.$color-docs; + } +} + +.quicksearch__block--community { + h3 { + background-color: colors.$color-community; + } +} + +.quicksearch__block--more { + h3 { + background-color: colors.$color-more; + } +} + +.quicksearch__block--other { + h3 { + background-color: colors.$color-other; + } +} + +.quicksearch__result { + margin-bottom: 0.5 * utilities-variables.$base-font-size; + overflow: hidden; + text-overflow: ellipsis; + +} + +.quicksearch__summary { + font-size: 0.9 * utilities-variables.$base-font-size; + line-height: 0.9 * utilities-variables.$base-line-height; + margin: 0; + max-height: 0.9 * utilities-variables.$base-line-height; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.search__result__highlight { + text-decoration: underline; +} + +.quicksearch__result__tag { + background-color: colors.$color-docs; + border-radius: 2px; + color: #fff; + display: inline-block; + float: left; + font-size: 0.7em; + padding: 0.2em 0.3em; + margin: 0.1em 0.5em 0.1em 0; +} + +.quicksearch__section { + margin: 0; + font-size: 0.75em; + text-transform: uppercase; + color: colors.$gray-11; + font-weight: bold; + width: auto; + display: table; +} + +.quicksearch__result--active { + background-color: colors.$gray-01; + border-left: 2px solid colors.$gray-03; + border-right: 2px solid colors.$gray-03; + margin: -5px -5px 2.5px; + padding: 5px; +} + +.quicksearch__no-results { + font-size: 3em; + font-weight: 300; + text-align: center; + padding: 1em; + color: colors.$gray-09; +} + +.content--narrow .quicksearch { + left: sidebar.$sidebar--wide-width; + + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { + left: 0; + } +} + +.content--section-menu .quicksearch { + left: sidebar.$sidebar-width + sectionmenu.$section-menu-width; + + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { + left: 0; + } +} + +#search__blackout { + background-color: rgba(0, 0, 0, 0.7); + bottom: 0; + left: sidebar.$sidebar-width; + position: fixed; + right: 0; + top: header.$header-height; + z-index: 150; +} + +.content--narrow #search__blackout { + left: sidebar.$sidebar--wide-width; + + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { + left: 0; + } +} + +.content--section-menu #search__blackout { + left: sidebar.$sidebar-width + sectionmenu.$section-menu-width; + + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { + left: 0; + } +} diff --git a/source/_sass/_site/elements/sectionmenu.scss b/source/_sass/_site/elements/sectionmenu.scss new file mode 100644 index 0000000..5608bed --- /dev/null +++ b/source/_sass/_site/elements/sectionmenu.scss @@ -0,0 +1,249 @@ +@use "../base/variables"; +@use "../colors"; +@use "../header"; +@use "../responsive/utilities/mixins/breakpoints"; +@use "../responsive/utilities/variables" as utilities-variables; +@use "sidebar"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +$section-menu-width: 240px; + +.sidebar__wrapper--sectionmenu { + width: sidebar.$sidebar-width + $section-menu-width; +} + +.section-menu { + border-right: 1px solid colors.$gray-08; + bottom: 0; + left: sidebar.$sidebar-width; + margin-top: header.$header-height; + position: absolute; + top: 0; + width: $section-menu-width; + overflow-y: auto; + + >ul { + padding: 1em; + } + + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { + display: none; + } +} + +.content--section-menu { + margin-left: sidebar.$sidebar-width + $section-menu-width; + + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { + margin-left: 0; + } +} + +.section-menu__header { + height: header.$header-height; + padding: 0 1em; + position: fixed; + top: 0; + width: $section-menu-width; + + h3 { + border-bottom: 1px solid rgba(68, 68, 68, 0.2); + font-size: utilities-variables.$base-font-size * 1.2; + font-weight: 400; + margin-top: 3px; + padding: calc(utilities-variables.$base-line-height / 1.2) 0; + text-transform: uppercase; + width: 100%; + } +} + +.documentation-menu { + background-color: colors.$color-docs; + border-bottom: 1px solid rgba(68, 68, 68, 0.3); + border-right: 1px solid color.scale(colors.$color-docs, $lightness: -30.1775147929%); + box-shadow: rgba(68, 68, 68, 0.3) 0 5px 5px -5px; + display: none; + margin: -1em; + + a { + display: block; + padding: 0.5em 1em; + + &:hover { + background-color: color.scale(colors.$color-docs, $lightness: -5%); + } + } +} + +.documentation-menu__arrow { + float: right; +} + +.documentation-menu--visible { + display: block; +} + +.section-menu__item { + + >a { + color: colors.$gray-02; + display: inline-block; + font-size: 13px; + font-weight: bold; + margin: calc(utilities-variables.$base-line-height / 4) 0; + padding: 0.5em; + } + + >ul { + display: none; + } + + &.open>ul { + display: block; + } +} + +.section-menu__subitem { + + >a { + color: colors.$gray-02; + display: block; + font-size: 13px; + font-weight: 600; + margin: 0 0 0.25em 1em; + text-transform: none; + + span { + display: inline-block; + padding: 0.5em; + } + } + + ul { + display: none; + } + + &.open ul { + display: block; + } +} + +.section-menu__subsubitem { + + >a { + color: colors.$gray-02; + display: block; + font-size: 12px; + font-weight: normal; + margin: 0 0 0.25em 2em; + text-transform: none; + + span { + display: inline-block; + padding: 0.5em; + } + } +} + +.section-menu--dark { + + &, + a, + .section-menu__header a { + color: colors.$white; + } + + .section-menu__item.active>a, + .section-menu__subitem.active>a, + .section-menu__subsubitem.active>a span { + background-color: colors.$white; + border-radius: variables.$base-border-radius; + color: colors.$gray-02; + } +} + +.section-menu--light { + + &, + a, + .section-menu__header a { + color: colors.$gray-02; + } + + .section-menu__item.active>a, + .section-menu__subitem.active>a, + .section-menu__subsubitem.active>a span { + background-color: colors.$gray-02; + border-radius: variables.$base-border-radius; + color: colors.$white; + } +} + +.section-menu--guides { + background-color: colors.$color-guides; + border-right-color: color.scale(colors.$color-guides, $lightness: -30.1775147929%); + + .section-menu__header { + background-color: colors.$color-guides; + } +} + +.section-menu--docs { + background-color: colors.$color-docs; + border-right-color: color.scale(colors.$color-docs, $lightness: -30.1775147929%); + + .section-menu__header { + background-color: colors.$color-docs; + } +} + +.section-menu--community { + background-color: colors.$color-community; + border-right-color: color.scale(colors.$color-community, $lightness: -30.1775147929%); + + .section-menu__header { + background-color: colors.$color-community; + } +} + +.section-menu--sdk { + background-color: colors.$color-sdk; + border-right-color: color.scale(colors.$color-sdk, $lightness: -30.1775147929%); + + .section-menu__header { + background-color: colors.$color-sdk; + } +} + +.section-menu--more { + background-color: colors.$color-more; + border-right-color: color.scale(colors.$color-more, $lightness: -30.1775147929%); + + .section-menu__header { + background-color: colors.$color-more; + } +} + +.section-menu--getting-started { + background-color: colors.$color-getting-started; + border-right-color: color.scale(colors.$color-getting-started, $lightness: -30.1775147929%); + + .section-menu__header { + background-color: colors.$color-getting-started; + } +} diff --git a/source/_sass/_site/elements/sidebar.scss b/source/_sass/_site/elements/sidebar.scss new file mode 100644 index 0000000..bf49ad9 --- /dev/null +++ b/source/_sass/_site/elements/sidebar.scss @@ -0,0 +1,275 @@ +@use "../base/variables"; +@use "../colors"; +@use "../header"; +@use "../responsive/utilities/mixins/breakpoints"; +@use "../responsive/utilities/variables" as utilities-variables; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +$sidebar-width: 105px; +$sidebar--wide-width: header.$header-logo-width; +$sidebar-hide-at: xs; + +.sidebar__wrapper { + position: fixed; + width: $sidebar-width; + top: 0; + bottom: 0; + left: 0; + z-index: 10; + + @include breakpoints.bp-max ($sidebar-hide-at) { + display: none; + } +} + +.sidebar { + background-color: #f6f6f6; + bottom: 0; + left: 0; + padding-top: header.$header-height; + position: absolute; + top: 0; + width: $sidebar-width; + + @include breakpoints.bp-max ($sidebar-hide-at) { + display: none; + } +} + +.sidebar--wide { + width: $sidebar--wide-width; +} + +.sidebar__header { + background-color: #222; + border-bottom: 2px solid colors.$black; + color: colors.$white; + font-size: utilities-variables.$base-font-size * 1.2; + height: header.$header-height; + left: 0; + padding: calc(utilities-variables.$base-line-height / 1.2) 0; + position: absolute; + text-align: center; + top: 0; + width: $sidebar-width; + + &:hover { + background-color: colors.$black; + color: colors.$white; + } + + span { + display: inline-block; + } + + li ul { + display: none; + } + + li.active { + + ul { + display: block; + } + + >a { + background-color: color.scale(variables.$base-link-color, $lightness: 41.8032786885%); + color: #fff; + } + } +} + +.sidebar--wide .sidebar__header { + width: $sidebar--wide-width; +} + +.content { + margin-left: $sidebar-width; + height: 100%; + + @include breakpoints.bp-max ($sidebar-hide-at) { + margin-left: 0; + } +} + +.content--narrow { + margin-left: $sidebar--wide-width; + + @include breakpoints.bp-max ($sidebar-hide-at) { + margin: 0; + } +} + +.sidebar__legal { + position: absolute; + left: 0; + right: 0; + bottom: 3 * utilities-variables.$base-line-height; + font-size: 0.85em; + padding: 1em 0; + text-align: center; + + a { + color: colors.$gray-03; + + &:hover { + text-decoration: underline; + } + } +} + +.sidebar__footer { + background-color: colors.$color-appstore; + border-right: 1px solid color.scale(colors.$color-appstore, $lightness: -30.1775147929%); + bottom: 0; + color: colors.$white; + font-weight: bold; + height: 3 * utilities-variables.$base-line-height; + left: 0; + padding: utilities-variables.$base-line-height 0; + position: absolute; + right: 0; + text-align: center; + text-transform: uppercase; + + &:hover, + &.active { + background-color: color.scale(colors.$color-appstore, $lightness: -30.1775147929%); + border-color: color.scale(colors.$color-appstore, $lightness: -33.7748344371%); + color: colors.$white; + } +} + +.sidebar--narrow { + + .mainmenu__item { + + span { + background-color: #444; + border-radius: variables.$base-border-radius; + color: colors.$white; + display: none; + left: 80px; + margin-top: -1.2em; + padding: 0.5em; + position: absolute; + top: 50%; + white-space: nowrap; + z-index: 100; + } + + &:hover { + span { + display: block; + } + } + } +} + +.mainmenu { + border-right: 1px solid colors.$gray-08; + height: 100%; + // I would like to enable scrolling on the Y axis but it breaks the tooltips. + // overflow-x: visible; + // overflow-y: scroll; + padding-top: 1em; + + li:first-child { + margin-top: -13px; + } + + .mainmenu__item a { + background-position: center center; + background-repeat: no-repeat; + background-size: 3em; + color: colors.$gray-02; + display: block; + font-size: 13px; + font-weight: bold; + height: 4em; + margin: 0.5em 0; + padding: 1.2em; + position: relative; + text-transform: uppercase; + + @media screen and (max-height: 640px) { + margin: 0; + } + + &:hover { + background-color: #e3e3e3; + } + + @media screen and (max-height: 600px) { + background-size: 2.5em; + height: 3em; + padding: 0.75em; + } + } + + .mainmenu__item.active a { + background-color: #e3e3e3; + } + + .mainmenu__item--overview a { + background-image: url('../images/menu/overview.svg'); + } + + .mainmenu__item--getting-started a { + background-image: url('../images/menu/getting-started.svg'); + } + + .mainmenu__item--guides a { + background-image: url('../images/menu/guides.svg'); + } + + .mainmenu__item--docs a { + background-image: url('../images/menu/docs.svg'); + } + + .mainmenu__item--community a { + background-image: url('../images/menu/community.svg'); + } + + .mainmenu__item--sdk a { + background-image: url('../images/menu/sdk.svg'); + } + + .mainmenu__item--blog a { + background-image: url('../images/menu/blog.svg'); + } + + .mainmenu__item--examples a { + background-image: url('../images/menu/examples.svg'); + } + + .mainmenu__item--more a { + background-image: url('../images/menu/more.svg'); + } +} + +.sidebar--wide .mainmenu__item a { + background-position: 1em center; + background-size: 3em; + padding-left: 5em; + + @media screen and (max-height: 600px) { + background-size: 2.5em; + padding-left: 4.5em; + } +} diff --git a/source/_sass/_site/elements/spinner.scss b/source/_sass/_site/elements/spinner.scss new file mode 100644 index 0000000..78005ca --- /dev/null +++ b/source/_sass/_site/elements/spinner.scss @@ -0,0 +1,107 @@ +@use "../bourbon/css3/animation"; +@use "../colors"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@charset "UTF-8"; + +// Spinner by CSS Wizadry: http://jsfiddle.net/csswizardry/M2D4M/ + +// A simple, semantic, usable-anywhere spinner. It takes its coloring from its +// parent element, meaning it can be dropped anywhere without modification. + +// 1. Positioning context. +// 2. Define dimensions in ems so that we can… +// 3. …adjust spinner size by just changing its `font-size`. +// 4. Do not explicitly define a color (allow border to inherit current text +// color). This makes the spinner usable on any color background. We’re also +// only defining a bottom border here; this is what actually gives the +// illusion of something spinning. +// 5. Kellum method hidden text: +// zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement + +.spinner { + @include animation.animation(0.5s spinner linear infinite); + border-bottom: 1px solid; // 4 + display: inline-block; + font-size: 32px; // 3 + height: 1em; // 2 + overflow: hidden; // 5 + position: relative; // 1 + text-indent: 100%; // 5 + vertical-align: middle; + width: 1em; // 2 + + // 1. Make the spinner a circle. + &, + &:after { + border-radius: 100%; // 1 + } + + // The (optically) non-spinning part of the spinner. + // 1. Border around entire element fills in the rest of the ring. + // 2. Paler than the part that appears to spin. + &:after { + border: 1px solid; // 1 + bottom: 0; + content: ''; + left: 0; + opacity: 0.5; // 2 + position: absolute; + right: 0; + top: 0; + } +} + +// Size variants (built by adjusting `font-size`). +.spinner--small { font-size: 16px; } +.spinner--large { font-size: 64px; } + +// Color overrides. +.spinner--light { color: colors.$white; } +.spinner--dark { color: #333; } + +.spinner--center { + display: block; + margin: 0 auto; +} + +.spinner--padded { + margin-bottom: 1rem; + margin-top: 1rem; +} + +@-webkit-keyframes spinner { + + to { + -webkit-transform: rotate(360deg); + } +} + +@-moz-keyframes spinner { + + to { + -moz-transform: rotate(360deg); + } +} + +@keyframes spinner { + + to { + transform: rotate(360deg); + } +} diff --git a/source/_sass/_site/elements/table.scss b/source/_sass/_site/elements/table.scss new file mode 100644 index 0000000..8b14c48 --- /dev/null +++ b/source/_sass/_site/elements/table.scss @@ -0,0 +1,25 @@ +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.table--skinny { + td { + padding: 0.25em 0; + } + + th { + padding: 0.25em 0; + } +} diff --git a/source/_sass/_site/elements/toc.scss b/source/_sass/_site/elements/toc.scss new file mode 100644 index 0000000..3c03fe2 --- /dev/null +++ b/source/_sass/_site/elements/toc.scss @@ -0,0 +1,48 @@ +@use "../base/variables"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.toc__item { + overflow: hidden; + text-overflow: ellipsis; +} + +.toc__item--level1 { + font-size: 1em; +} + +.toc__item--level2 { + font-size: 0.95em; + padding-left: 0.5rem; +} + +.toc__item--level3 { + font-size: 0.90em; + padding-left: 1rem; +} + +.toc__item--level4 { + font-size: 0.85em; + padding-left: 1.5rem; +} + +.toc__item--active { + font-weight: 600; + a { + color: color.scale(variables.$base-link-color, $lightness: -33.7748344371%); + } +} diff --git a/source/_sass/_site/elements/typeahead.scss b/source/_sass/_site/elements/typeahead.scss new file mode 100644 index 0000000..50d4249 --- /dev/null +++ b/source/_sass/_site/elements/typeahead.scss @@ -0,0 +1,71 @@ +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +// Styles for the primary site search, powered by Twitter's Typeahead.js + +.twitter-typeahead { + width: 100%; +} + +.tt-dropdown-menu { + background-color: $white; + border-bottom: 1px solid lighten($base-border-color, 60); + border-left: 1px solid lighten($base-border-color, 60); + border-right: 1px solid lighten($base-border-color, 60); + margin-top: -0.75rem; + width: 100%; +} + +.tt-group-header { + background-color: color.scale($base-border-color, $lightness: 41.8032786885%); + color: $white; + font-size: 1rem; + font-weight: normal; + padding: 0.2rem; + text-align: center; +} + +.tt-suggestion { + border-bottom: 1px solid lighten($base-border-color, 60); + cursor: pointer; + padding: 0.2rem 0.5rem; + + .tt-suggestion-highlight { + color: color.scale($base-font-color, $lightness: 41.8032786885%); + font-size: 0.8rem; + height: 1em; + line-height: 0.8rem; + overflow: hidden; + text-overflow: ellipsis; + } + + p { + margin: 0; + } + + &.tt-cursor { + background-color: $base-link-color; + color: $white; + + .tt-suggestion-highlight { + color: $white; + } + } + + &:last-child { + border-bottom: 0; + } +} diff --git a/source/_sass/_site/elements/video.scss b/source/_sass/_site/elements/video.scss new file mode 100644 index 0000000..9918292 --- /dev/null +++ b/source/_sass/_site/elements/video.scss @@ -0,0 +1,71 @@ +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.video { + margin: auto; + width: 100%; + + .video__wrapper { + height: 0; + position: relative; + } + + iframe { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } +} + +.video--widescreen .video__wrapper { + padding-bottom: 56.25%; +} + +.video--standard .video__wrapper { + padding-bottom: 75%; +} + +.video--preview { + cursor: pointer; + + .video__wrapper::after { + background-color: rgba(200, 200, 200, 0.8); + border-radius: 50%; + color: #444; + content: '\f144'; + font-family: FontAwesome; + font-size: 80px; + left: 50%; + line-height: 68px; + margin-left: -40px; + margin-top: -40px; + padding: 10px; + position: absolute; + top: 50%; + @include transition(color 0.3s linear); + @include transition(background-color 0.3s linear); + } + + &:hover { + + .video__wrapper::after { + background-color: rgba(50, 50, 50, 0.8); + color: #d00; + } + } +} diff --git a/source/_sass/_site/font-awesome/font-awesome.scss b/source/_sass/_site/font-awesome/font-awesome.scss new file mode 100644 index 0000000..4aff02d --- /dev/null +++ b/source/_sass/_site/font-awesome/font-awesome.scss @@ -0,0 +1,17 @@ +/*! + * Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome + * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) + */ + +@use "variables"; +@use "mixins"; +@use "path"; +@use "core"; +@use "larger"; +@use "fixed-width"; +@use "list"; +@use "bordered-pulled"; +@use "spinning"; +@use "rotated-flipped"; +@use "stacked"; +@use "icons"; diff --git a/source/_sass/_site/footer.scss b/source/_sass/_site/footer.scss new file mode 100644 index 0000000..233806e --- /dev/null +++ b/source/_sass/_site/footer.scss @@ -0,0 +1,84 @@ +@use "bourbon/addons/clearfix"; +@use "bourbon/css3/transition"; +@use "responsive/utilities/mixins/breakpoints"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +$footer-height: 2rem; +$footer-height-mobile: 9.95rem; +$footer-background-color: #333; +$footer-text-color: #bbb; +$footer-bp: s; + +.wrapper { + height: auto !important; + margin: 0 auto -1 * $footer-height-mobile; + min-height: 100%; + @include clearfix.clearfix; + + @include breakpoints.bp-min ($footer-bp) { + margin: 0 auto -1 * $footer-height; + } +} + +.push { + height: $footer-height-mobile; + + @include breakpoints.bp-min ($footer-bp) { + height: $footer-height; + } +} + +.footer { + background-color: $footer-background-color; + display: table; + height: $footer-height-mobile; + position: absolute; + width: 100%; + z-index: 100; + + @include breakpoints.bp-min ($footer-bp) { + height: $footer-height; + } + + ul { + display: table-row; + } + + li { + @include breakpoints.bp-min ($footer-bp) { + display: table-cell; + width: 2%; + } + } + + a { + @include transition.transition (all 0.2s ease-in-out); + background-color: $footer-background-color; + color: $footer-text-color; + display: block; + font-size: 0.7rem; + font-weight: bold; + padding: 0.65rem 0 0.4rem; + text-align: center; + text-transform: uppercase; + + &:hover { + background-color: color.scale($footer-background-color, $lightness: -33.7748344371%); + } + } +} diff --git a/source/_sass/_site/header.scss b/source/_sass/_site/header.scss new file mode 100644 index 0000000..0c183bd --- /dev/null +++ b/source/_sass/_site/header.scss @@ -0,0 +1,20 @@ +@use "responsive/utilities/variables"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +$header-height: 3 * variables.$base-line-height; +$header-logo-width: 226px; diff --git a/source/_sass/_site/libs/slick.scss b/source/_sass/_site/libs/slick.scss new file mode 100755 index 0000000..fa2b64e --- /dev/null +++ b/source/_sass/_site/libs/slick.scss @@ -0,0 +1,62 @@ +.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } + +.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } +.slick-list:focus { outline: none; } +.slick-loading .slick-list { background: #fff; } +.slick-list.dragging { cursor: pointer; cursor: hand; } + +.slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } + +.slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; } +.slick-track:before, .slick-track:after { content: ""; display: table; } +.slick-track:after { clear: both; } +.slick-loading .slick-track { visibility: hidden; } + +.slick-slide { float: left; height: 100%; min-height: 1px; display: none; } +.slick-slide img { display: block; pointer-events: none;} +.slick-slide.slick-loading img { display: none; } +.slick-slide.dragging img { pointer-events: none; } +.slick-initialized .slick-slide { display: block; } +.slick-loading .slick-slide { visibility: hidden; } +.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } + +/* Icons */ +@font-face { font-family: "slick"; src: url("../fonts/slick.eot"); src: url("../fonts/slick.eot?#iefix") format("embedded-opentype"), url("../fonts/slick.woff") format("woff"), url("../fonts/slick.ttf") format("truetype"), url("../fonts/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; } +/* Arrows */ +.slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; } +.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; } +.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } +.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; } + +.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + +.slick-prev { left: -25px; } +.slick-prev:before { content: "\2190"; } + +.slick-next { right: -25px; } +.slick-next:before { content: "\2192"; } + +/* Dots */ +.slick-slider { margin-bottom: 0; } + +.slick-dots { position: absolute; bottom: 1em; right: 1em; list-style: none; display: block; text-align: right; padding: 0; width: 100%; } +.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; } +.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; } +.slick-dots li button:hover, .slick-dots li button:focus { outline: none; } +.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } +.slick-dots li button:before { position: absolute; top: 0; left: 0; content: "\2022"; width: 20px; height: 20px; font-family: "slick"; font-size: 15px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } +.slick-dots li.slick-active button:before { color: black; opacity: 0.75; } + +[dir="rtl"] .slick-next {right: auto;left: -25px;} +[dir="rtl"] .slick-next:before {content: "\2190";} +[dir="rtl"] .slick-prev {right: -25px;left: auto;} +[dir="rtl"] .slick-prev:before {content: "\2192";} +[dir="rtl"] .slick-slide {float: right;} + +.full-height { + + .slick-list, + .slick-track { + height: 100%; + } +} diff --git a/source/_sass/_site/mmenu/addons/jquery.mmenu.buttonbars.scss b/source/_sass/_site/mmenu/addons/jquery.mmenu.buttonbars.scss new file mode 100755 index 0000000..4a059f5 --- /dev/null +++ b/source/_sass/_site/mmenu/addons/jquery.mmenu.buttonbars.scss @@ -0,0 +1,95 @@ +/* + jQuery.mmenu buttonbars addon CSS +*/ + +@use "../inc/variables"; +@use "../inc/colors"; +@use "../inc/mixins"; + + +.mm-buttonbar { + border: 1px solid transparent; + border-radius: calc(variables.$mm_padding / 2); + text-align: center; + line-height: variables.$mm_buttonbarHeight; + overflow: hidden; + display: block; + padding: 0; + margin: 0; + position: relative; + + @include mixins.mm_clearfix; + + >* { + border-left: 1px solid transparent; + box-sizing: border-box; + display: block; + width: 100%; + height: 100%; + float: left; + + @include mixins.mm_ellipsis; + } + + >a { + text-decoration: none; + } + + >input { + position: absolute; + left: -1000px; + top: -1000px; + } + + >input:checked+label { + border-color: transparent !important; + } + + >*:first-child, + >input:first-child+* { + border-left: none; + } + + + &.mm-buttonbar-2>* { + width: 50%; + } + + &.mm-buttonbar-3>* { + width: 33.33%; + } + + &.mm-buttonbar-4>* { + width: 25%; + } + + &.mm-buttonbar-5>* { + width: 20%; + } +} + +.mm-header .mm-buttonbar { + margin-top: variables.$mm_headerHeight - (variables.$mm_buttonbarHeight * 2); + margin-left: -(variables.$mm_btnSize - variables.$mm_padding ); + margin-right: -(variables.$mm_btnSize - variables.$mm_padding ); +} + +.mm-footer .mm-buttonbar { + border: none; + border-radius: none; + line-height: variables.$mm_footerHeight; + margin: (-(variables.$mm_padding) ) (-(variables.$mm_padding) ) 0 (-(variables.$mm_padding * 2)); + + >* { + border-left: none; + } +} + +.mm-list>li>.mm-buttonbar { + margin: variables.$mm_padding ( + variables.$mm_padding * 2 + ); +} + + +@include colors.mm_colors_buttonbars; diff --git a/source/_sass/_site/mmenu/addons/jquery.mmenu.counters.scss b/source/_sass/_site/mmenu/addons/jquery.mmenu.counters.scss new file mode 100755 index 0000000..b833104 --- /dev/null +++ b/source/_sass/_site/mmenu/addons/jquery.mmenu.counters.scss @@ -0,0 +1,48 @@ +/* + jQuery.mmenu counters addon CSS +*/ + +@use "../inc/variables"; +@use "../inc/colors"; + + +em.mm-counter { + font: inherit; + font-size: variables.$mm_fontSize; + font-style: normal; + text-indent: 0; + line-height: calc(variables.$mm_btnSize / 2); + display: block; + margin-top: - calc(variables.$mm_btnSize / 4); + position: absolute; + right: variables.$mm_subopenWidth; + top: 50%; + + +a.mm-subopen { + padding-left: variables.$mm_counterWidth; + + +a, + +span { + margin-right: variables.$mm_counterWidth + variables.$mm_subopenWidth; + } + } + + +a.mm-fullsubopen { + padding-left: 0; + } +} + +// vertical submenu +.mm-vertical { + em.mm-counter { + top: calc((variables.$mm_btnSize / 4) + 2px); + margin-top: 0; + } +} + +// Search +.mm-nosubresults>em.mm-counter { + display: none; +} + +@include colors.mm_colors_counters; diff --git a/source/_sass/_site/mmenu/addons/jquery.mmenu.dragopen.scss b/source/_sass/_site/mmenu/addons/jquery.mmenu.dragopen.scss new file mode 100755 index 0000000..cfe4c66 --- /dev/null +++ b/source/_sass/_site/mmenu/addons/jquery.mmenu.dragopen.scss @@ -0,0 +1,18 @@ +/* + jQuery.mmenu dragOpen addon CSS +*/ + +@use "../inc/variables"; +@use "../inc/mixins"; + +html.mm-opened.mm-dragging +{ + .mm-menu, + .mm-page, + .mm-fixed-top, + .mm-fixed-bottom, + #mm-blocker + { + @include mixins.mm_webkit-prefix( "transition-duration", 0s ); + } +} \ No newline at end of file diff --git a/source/_sass/_site/mmenu/addons/jquery.mmenu.footer.scss b/source/_sass/_site/mmenu/addons/jquery.mmenu.footer.scss new file mode 100755 index 0000000..a69eed2 --- /dev/null +++ b/source/_sass/_site/mmenu/addons/jquery.mmenu.footer.scss @@ -0,0 +1,35 @@ +/* + jQuery.mmenu footer addon CSS +*/ + +@use "../inc/variables"; +@use "../inc/colors"; + + +.mm-footer +{ + background: inherit; + border-top: 1px solid transparent; + text-align: center; + line-height: variables.$mm_footerHeight - ( variables.$mm_padding * 2 ); + + box-sizing: border-box; + width: 100%; + height: variables.$mm_footerHeight; + padding: variables.$mm_padding variables.$mm_padding 0 ( variables.$mm_padding * 2 ); + position: absolute; + z-index: 2; + bottom: 0; + left: 0; +} + +.mm-menu.mm-hasfooter +{ + > .mm-panel:after + { + height: variables.$mm_footerHeight + variables.$mm_btnSize; + } +} + + +@include colors.mm_colors_footer; \ No newline at end of file diff --git a/source/_sass/_site/mmenu/addons/jquery.mmenu.header.scss b/source/_sass/_site/mmenu/addons/jquery.mmenu.header.scss new file mode 100755 index 0000000..0d8b67a --- /dev/null +++ b/source/_sass/_site/mmenu/addons/jquery.mmenu.header.scss @@ -0,0 +1,137 @@ +/* + jQuery.mmenu header addon CSS +*/ + +@use "../inc/variables"; +@use "../inc/colors"; +@use "../inc/mixins"; + + +.mm-header { + background: inherit; + border-bottom: 1px solid transparent; + text-align: center; + line-height: calc(variables.$mm_btnSize / 2); + + box-sizing: border-box; + width: 100%; + height: variables.$mm_headerHeight; + padding: 0 (variables.$mm_btnSize + variables.$mm_padding ); + position: absolute; + z-index: 2; + top: 0; + left: 0; + + .mm-title, + .mm-prev, + .mm-next, + .mm-close { + padding-top: variables.$mm_headerPaddingTop; + } + + .mm-title { + @include mixins.mm_ellipsis; + + display: inline-block; + width: 100%; + position: relative; + } + + .mm-prev, + .mm-next, + .mm-close { + text-decoration: none; + display: block; + box-sizing: border-box; + min-width: variables.$mm_padding; + height: 100%; + position: absolute; + top: 0; + z-index: 1; + } + + .mm-prev { + padding-left: (variables.$mm_padding * 2); + padding-right: variables.$mm_padding; + left: 0; + } + + .mm-next, + .mm-close { + padding-left: variables.$mm_padding; + padding-right: (variables.$mm_padding * 2); + right: 0; + } + + [href] { + + &.mm-prev:before, + &.mm-next:after { + @include mixins.mm_arrow; + } + + &.mm-prev:before { + @include mixins.mm_arrow-prev; + margin-left: 2px; + margin-right: calc(variables.$mm_padding / 2); + } + + &.mm-next:after, + &.mm-close:after { + margin-left: calc(variables.$mm_padding / 2); + margin-right: -2px; + } + + &.mm-next:after { + @include mixins.mm_arrow-next; + } + + &.mm-close:after { + content: 'x'; + } + } +} + +.mm-menu.mm-hassearch .mm-header { + height: variables.$mm_headerHeight - variables.$mm_padding; + top: variables.$mm_searchHeight; + + .mm-title, + .mm-prev, + .mm-next, + .mm-close { + padding-top: variables.$mm_headerPaddingTop - variables.$mm_padding; + } +} + +$mm_paddingBeneathHeader: variables.$mm_padding * 2 !default; + +.mm-menu.mm-hasheader { + li.mm-subtitle { + display: none; + } + + >.mm-panel { + padding-top: variables.$mm_headerHeight + $mm_paddingBeneathHeader; + + &.mm-list { + padding-top: variables.$mm_headerHeight; + } + + >.mm-list:first-child { + margin-top: -$mm_paddingBeneathHeader; + } + } + + &.mm-hassearch>.mm-panel { + padding-top: variables.$mm_headerHeight + variables.$mm_searchHeight + variables.$mm_padding; + + &.mm-list { + padding-top: variables.$mm_headerHeight + variables.$mm_searchHeight - variables.$mm_padding; + } + } +} + + + +@include colors.mm_colors_header; diff --git a/source/_sass/_site/mmenu/addons/jquery.mmenu.labels.scss b/source/_sass/_site/mmenu/addons/jquery.mmenu.labels.scss new file mode 100755 index 0000000..0994431 --- /dev/null +++ b/source/_sass/_site/mmenu/addons/jquery.mmenu.labels.scss @@ -0,0 +1,35 @@ +/* + jQuery.mmenu labels addon CSS +*/ + +@use "../inc/variables"; +@use "../inc/colors"; +@use "../inc/mixins"; + +.mm-list { + li.mm-label { + >span { + @include mixins.mm_ellipsis; + padding: 0; + line-height: variables.$mm_labelHeight; + } + + &.mm-opened a.mm-subopen:after { + @include mixins.mm_webkit-prefix("transform", rotate(45deg)); + } + } + + li.mm-collapsed:not(.mm-uncollapsed) { + display: none; + } +} + +.mm-menu.mm-vertical .mm-list { + >li.mm-label { + >a.mm-subopen:after { + top: calc(variables.$mm_labelHeight / 2) - 4; + } + } +} + +@include colors.mm_colors_labels; diff --git a/source/_sass/_site/mmenu/addons/jquery.mmenu.offcanvas.scss b/source/_sass/_site/mmenu/addons/jquery.mmenu.offcanvas.scss new file mode 100755 index 0000000..a18e986 --- /dev/null +++ b/source/_sass/_site/mmenu/addons/jquery.mmenu.offcanvas.scss @@ -0,0 +1,71 @@ +/* + jQuery.mmenu offcanvas addon CSS +*/ + +@use "../inc/variables"; +@use "../inc/sizing"; + + +// Animations +.mm-page +{ + box-sizing: border-box; + position: relative; + + -webkit-transition: -webkit-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + -ms-transition: -ms-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + transition: transform variables.$mm_transitionDuration variables.$mm_transitionFunction; +} + +// Container, Page, Blocker +html.mm-opened +{ + overflow: hidden; + position: relative; + + body + { + overflow: hidden; + } +} + +html.mm-background .mm-page +{ + background: inherit; +} +#mm-blocker +{ + background: rgba( 3, 2, 1, 0 ); + display: none; + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 999999; +} +html.mm-opened, +html.mm-blocking +{ + #mm-blocker + { + display: block; + } +} + +// Menu +.mm-menu +{ + &.mm-offcanvas + { + display: none; + position: fixed; + } + &.mm-current + { + display: block; + } +} + + +@include sizing.mm_sizing; \ No newline at end of file diff --git a/source/_sass/_site/mmenu/addons/jquery.mmenu.searchfield.scss b/source/_sass/_site/mmenu/addons/jquery.mmenu.searchfield.scss new file mode 100755 index 0000000..33508a6 --- /dev/null +++ b/source/_sass/_site/mmenu/addons/jquery.mmenu.searchfield.scss @@ -0,0 +1,126 @@ +/* + jQuery.mmenu searchfield addon CSS +*/ + +@use "../inc/variables"; +@use "../inc/colors"; + +.mm-search, +.mm-search input +{ + box-sizing: border-box; +} +.mm-list +{ + > li.mm-search + { + padding: variables.$mm_padding; + margin-top: -( variables.$mm_padding * 2 ); + } + > li.mm-subtitle + li.mm-search + { + margin-top: 0; + } +} +div.mm-panel > div.mm-search +{ + padding: 0 0 variables.$mm_padding 0; +} +.mm-menu.mm-hasheader .mm-list > li.mm-search +{ + margin-top: 0; +} +.mm-menu > .mm-search +{ + background: inherit; + width: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 2; +} +.mm-search +{ + padding: variables.$mm_padding; + + input + { + border: none; + border-radius: variables.$mm_searchfieldHeight; + font: inherit; + font-size: variables.$mm_fontSize; + line-height: variables.$mm_searchfieldHeight; + outline: none; + display: block; + width: 100%; + height: variables.$mm_searchfieldHeight; + margin: 0; + padding: 0 variables.$mm_padding; + } + input::-ms-clear + { + display: none; + } +} + +.mm-menu .mm-noresultsmsg +{ + text-align: center; + font-size: math.round( variables.$mm_fontSize * 1.5 ); + display: none; + padding: ( variables.$mm_btnSize * 1.5 ) 0; + + &:after + { + border: none !important; + } +} +.mm-noresults .mm-noresultsmsg +{ + display: block; +} + +$mm_paddingBeneathHeader: variables.$mm_padding * 2 !default; +.mm-menu +{ + li.mm-nosubresults > a.mm-subopen + { + display: none; + + + a, + + span + { + padding-right: 10px; + } + } + &.mm-hassearch + { + > .mm-panel + { + padding-top: variables.$mm_searchHeight + $mm_paddingBeneathHeader; + + > .mm-list:first-child + { + margin-top: -$mm_paddingBeneathHeader; + } + } + } + &.mm-hasheader + { + > .mm-panel + { + > div.mm-search:first-child + { + margin-top: -(variables.$mm_padding); + + + .mm-list + { + padding-top: 0; + } + } + } + } +} + + +@include colors.mm_colors_searchfield; diff --git a/source/_sass/_site/mmenu/addons/jquery.mmenu.toggles.scss b/source/_sass/_site/mmenu/addons/jquery.mmenu.toggles.scss new file mode 100755 index 0000000..10afcd3 --- /dev/null +++ b/source/_sass/_site/mmenu/addons/jquery.mmenu.toggles.scss @@ -0,0 +1,168 @@ +/* + jQuery.mmenu toggles addon CSS +*/ + +@use "../inc/variables"; +@use "../inc/colors"; +@use "../inc/mixins"; + + +input.mm-toggle, +input.mm-check { + position: absolute; + left: -10000px; +} + +label.mm-toggle, +label.mm-check { + margin: 0; + position: absolute; + bottom: 50%; + z-index: 2; + + &:before { + content: ''; + display: block; + } +} + +// styling +label.mm-toggle { + border-radius: variables.$mm_toggleHeight; + width: variables.$mm_toggleWidth; + height: variables.$mm_toggleHeight; + margin-bottom: - calc(variables.$mm_toggleHeight / 2); + + &:before { + border-radius: variables.$mm_toggleHeight; + width: variables.$mm_toggleHeight - 2; + height: variables.$mm_toggleHeight - 2; + margin: 1px; + } +} + +input.mm-toggle:checked~label.mm-toggle:before { + float: right; +} + +label.mm-check { + width: variables.$mm_checkWidth; + height: variables.$mm_checkHeight; + margin-bottom: - calc(variables.$mm_checkHeight / 2); + + &:before { + border-left: 3px solid; + border-bottom: 3px solid; + width: 40%; + height: 20%; + margin: 25% 0 0 20%; + opacity: 0.1; + + @include mixins.mm-webkit-prefix('transform', rotate(-45deg)); + } +} + +input.mm-check:checked~label.mm-check:before { + opacity: 1; +} + + +// vertical submenu +.mm-menu.mm-vertical .mm-list { + >li label { + + &.mm-toggle, + &.mm-check { + bottom: auto; + margin-bottom: 0; + } + + &.mm-toggle { + top: calc((variables.$mm_btnSize - variables.$mm_toggleHeight ) / 2); + + } + + &.mm-check { + top: calc((variables.$mm_btnSize - variables.$mm_checkHeight ) / 2); + } + } +} + + +// positioning +label { + + &.mm-toggle, + &.mm-check { + right: variables.$mm_padding * 2; + } +} + +label.mm-toggle { + + +a, + +span { + margin-right: variables.$mm_toggleWidth + (variables.$mm_padding * 2); + } +} + +label.mm-check { + + +a, + +span { + margin-right: variables.$mm_checkWidth + (variables.$mm_padding * 2); + } +} + +// positioning with subopen +a.mm-subopen+label { + + &.mm-toggle, + &.mm-check { + right: variables.$mm_subopenWidth + variables.$mm_padding; + } +} + +a.mm-subopen+label.mm-toggle { + + +a, + +span { + margin-right: variables.$mm_subopenWidth + variables.$mm_toggleWidth + variables.$mm_padding; + } +} + +a.mm-subopen+label.mm-check { + + +a, + +span { + margin-right: variables.$mm_subopenWidth + variables.$mm_checkWidth + variables.$mm_padding; + } +} + +// positioning with counter +em.mm-counter+a.mm-subopen+label { + + &.mm-toggle, + &.mm-check { + right: variables.$mm_counterWidth + variables.$mm_subopenWidth + variables.$mm_padding; + } +} + +em.mm-counter+a.mm-subopen+label.mm-toggle { + + +a, + +span { + margin-right: variables.$mm_counterWidth + variables.$mm_subopenWidth + variables.$mm_toggleWidth + variables.$mm_padding; + } +} + +em.mm-counter+a.mm-subopen+label.mm-check { + + +a, + +span { + margin-right: variables.$mm_counterWidth + variables.$mm_subopenWidth + variables.$mm_checkWidth + variables.$mm_padding; + } +} + +@include colors.mm_colors_toggles; +@include colors.mm_colors_checks; diff --git a/source/_sass/_site/mmenu/extensions/jquery.mmenu.effects.scss b/source/_sass/_site/mmenu/extensions/jquery.mmenu.effects.scss new file mode 100755 index 0000000..bcd39ed --- /dev/null +++ b/source/_sass/_site/mmenu/extensions/jquery.mmenu.effects.scss @@ -0,0 +1,153 @@ +/* + jQuery.mmenu effects extension CSS +*/ + +@use "../inc/variables"; +@use "../inc/mixins"; + + +// Slide +html.mm-slide +{ + .mm-menu + { + -webkit-transition: -webkit-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + transition: transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + } + + // Left + &.mm-opened .mm-menu + { + @include mixins.mm_webkit-prefix( 'transform', translateX( -(variables.$mm_subpanelOffset) ) ); + } + &.mm-opening .mm-menu + { + @include mixins.mm_webkit-prefix( 'transform', translateX( 0% ) ); + } + + // Right + &.mm-right + { + &.mm-opened .mm-menu + { + @include mixins.mm_webkit-prefix( 'transform', translateX( variables.$mm_subpanelOffset ) ); + } + &.mm-opening .mm-menu + { + @include mixins.mm_webkit-prefix( 'transform', translateX( 0% ) ); + } + } + + // Top + &.mm-top + { + &.mm-opened .mm-menu + { + @include mixins.mm_webkit-prefix( 'transform', translateY( -(variables.$mm_subpanelOffset) ) ); + } + &.mm-opening .mm-menu + { + @include mixins.mm_webkit-prefix( 'transform', translateY( 0% ) ); + } + } + + // Bottom + &.mm-bottom + { + &.mm-opened .mm-menu + { + @include mixins.mm_webkit-prefix( 'transform', translateY( variables.$mm_subpanelOffset ) ); + } + &.mm-opening .mm-menu + { + @include mixins.mm_webkit-prefix( 'transform', translateY( 0% ) ); + } + } +} + + +// Zoom menu +$mm_scaleDown: 0.7; +$mm_scaleUp: 1.5; +html.mm-zoom-menu +{ + .mm-menu + { + -webkit-transition: -webkit-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + transition: transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + } + + // Left + &.mm-opened .mm-menu + { + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateX( -(variables.$mm_subpanelOffset) ) ); + @include mixins.mm_webkit-prefix( 'transform-origin', left center ); + } + &.mm-opening .mm-menu + { + @include mixins.mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) ); + } + + // Right + &.mm-right + { + &.mm-opened .mm-menu + { + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown) translateX( variables.$mm_subpanelOffset ) ); + @include mixins.mm_webkit-prefix( 'transform-origin', right center ); + } + &.mm-opening .mm-menu + { + @include mixins.mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) ); + } + } + + // Top + &.mm-top + { + &.mm-opened .mm-menu + { + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateY( -(variables.$mm_subpanelOffset) ) ); + @include mixins.mm_webkit-prefix( 'transform-origin', center top ); + } + &.mm-opening .mm-menu + { + @include mixins.mm_webkit-prefix( 'transform', scale( 1, 1 ) translateY( 0% ) ); + } + } + + // Bottom + &.mm-bottom + { + &.mm-opened .mm-menu + { + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateY( variables.$mm_subpanelOffset ) ); + @include mixins.mm_webkit-prefix( 'transform-origin', center bottom ); + } + &.mm-opening .mm-menu + { + @include mixins.mm_webkit-prefix( 'transform', scale( 1, 1 ) translateY( 0% ) ); + } + } +} + + +// Zoom panels +html.mm-zoom-panels .mm-menu.mm-horizontal > .mm-panel +{ + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleUp, $mm_scaleUp ) translateX( 100% ) ); + @include mixins.mm_webkit-prefix( 'transform-origin', left center ); + + -webkit-transition-property: -webkit-transform, left; + transition-property: transform, left; + + &.mm-opened + { + @include mixins.mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) ); + + &.mm-subopened + { + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateX( -(variables.$mm_subpanelOffset) ) ); + } + } +} diff --git a/source/_sass/_site/mmenu/extensions/jquery.mmenu.fullscreen.scss b/source/_sass/_site/mmenu/extensions/jquery.mmenu.fullscreen.scss new file mode 100755 index 0000000..32ce868 --- /dev/null +++ b/source/_sass/_site/mmenu/extensions/jquery.mmenu.fullscreen.scss @@ -0,0 +1,25 @@ +/* + jQuery.mmenu fullscreen extension CSS +*/ + +@use "../inc/variables"; +@use "../inc/sizing"; + +$mm_fs_class : ".mm-fullscreen"; +$mm_fs_full : 1 !default; +$mm_fs_min : 140px !default; +$mm_fs_max : 10000px !default; + +@include sizing.mm_sizing( $mm_fs_class, + $mm_fs_full, $mm_fs_min, $mm_fs_max ); + +@include sizing.mm_sizing_right( $mm_fs_class, + $mm_fs_full, $mm_fs_min, $mm_fs_max); + +@include sizing.mm_sizing_zposition( $mm_fs_class, + $mm_fs_full, $mm_fs_min, $mm_fs_max ); + +html.mm-opened#{$mm_fs_class} .mm-page +{ + box-shadow: none !important; +} \ No newline at end of file diff --git a/source/_sass/_site/mmenu/extensions/jquery.mmenu.iconbar.scss b/source/_sass/_site/mmenu/extensions/jquery.mmenu.iconbar.scss new file mode 100755 index 0000000..1b7fada --- /dev/null +++ b/source/_sass/_site/mmenu/extensions/jquery.mmenu.iconbar.scss @@ -0,0 +1,31 @@ +/* + jQuery.mmenu iconbar extension CSS +*/ + +@import "../inc/variables"; + + +$mm_ib_pageOffset: $mm_btnSize + ( $mm_padding * 2 ) !default; + +body +{ + overflow-x: hidden; +} + +.mm-page +{ + background: inherit; + min-height: 100vh; + + padding-right: $mm_ib_pageOffset; + @include mm-webkit-prefix( 'transform', translateX( $mm_ib_pageOffset ) ); +} + +.mm-menu +{ + &:first-child, + &.mm-current + { + display: block; + } +} \ No newline at end of file diff --git a/source/_sass/_site/mmenu/extensions/jquery.mmenu.positioning.scss b/source/_sass/_site/mmenu/extensions/jquery.mmenu.positioning.scss new file mode 100755 index 0000000..6ca5ba8 --- /dev/null +++ b/source/_sass/_site/mmenu/extensions/jquery.mmenu.positioning.scss @@ -0,0 +1,100 @@ +/* + jQuery.mmenu position extension CSS +*/ + +@use "../inc/variables"; +@use "../inc/mixins"; +@use "../inc/sizing"; + +// top +// bottom +.mm-menu.mm-top, +.mm-menu.mm-bottom +{ + width: 100%; + min-width: 100%; + max-width: 100%; +} + +// right +.mm-menu.mm-right +{ + left: auto; + right: 0; +} + +// bottom +.mm-menu.mm-bottom +{ + top: auto; + bottom: 0; +} + +@include sizing.mm_sizing_right; + + + +/* + jQuery.mmenu z-position extension CSS +*/ + +// reset defaults +html.mm-front +{ + .mm-page, + #mm-blocker + { + @include mixins.mm-webkit-prefix( 'transform', translate( 0, 0 ) !important ); + z-index: 0; + } +} + +// styling +.mm-menu.mm-front +{ + z-index: 1; + box-shadow: 0 0 15px rgba( 0, 0, 0, 0.5 ); +} +html.mm-opened.mm-next .mm-page +{ + box-shadow: none; +} + +// animations +.mm-menu +{ + &.mm-front, + &.mm-next + { + -webkit-transition: -webkit-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + transition: transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + + @include mixins.mm-webkit-prefix( 'transform', translate( -100%, 0 ) ); + + &.mm-right + { + @include mixins.mm-webkit-prefix( 'transform', translate( 100%, 0 ) ); + } + } + &.mm-front + { + &.mm-top + { + @include mixins.mm-webkit-prefix( 'transform', translate( 0, -100% ) ); + } + &.mm-bottom + { + @include mixins.mm-webkit-prefix( 'transform', translate( 0, 100% ) ); + } + } +} +html.mm-opening .mm-menu +{ + &.mm-front, + &.mm-next + { + @include mixins.mm-webkit-prefix( 'transform', translate( 0, 0 ) ); + } +} + +@include sizing.mm_sizing_zposition; \ No newline at end of file diff --git a/source/_sass/_site/mmenu/extensions/jquery.mmenu.themes.scss b/source/_sass/_site/mmenu/extensions/jquery.mmenu.themes.scss new file mode 100755 index 0000000..82fc814 --- /dev/null +++ b/source/_sass/_site/mmenu/extensions/jquery.mmenu.themes.scss @@ -0,0 +1,83 @@ +/* + jQuery.mmenu themes extension CSS +*/ + +@use "../inc/variables"; +@use "../inc/colors"; + +@mixin mm_apply_theme() +{ + @include colors.mm_colors( $mm_t_cls, + $mm_t_backgroundColor, $mm_t_pageShadow, + $mm_t_textColor, $mm_t_dimmedTextColor, + $mm_t_emphasizedBackgroundColor, $mm_t_highlightedBackgroundColor, + $mm_t_borderColor ); + + @include colors.mm_colors_buttonbars( $mm_t_cls, + $mm_t_backgroundColor, + $mm_t_textColor ); + + @include colors.mm_colors_checks( $mm_t_cls, + $mm_t_textColor ); + + @include colors.mm_colors_counters( $mm_t_cls, + $mm_t_dimmedTextColor ); + + @include colors.mm_colors_footer( $mm_t_cls, + $mm_t_dimmedTextColor, + $mm_t_borderColor ); + + @include colors.mm_colors_header( $mm_t_cls, + $mm_t_dimmedTextColor, + $mm_t_borderColor ); + + @include colors.mm_colors_labels( $mm_t_cls, + $mm_t_highlightedBackgroundColor ); + + @include colors.mm_colors_searchfield( $mm_t_cls, + $mm_t_inputBackgroundColor, $mm_t_textColor, + $mm_t_dimmedTextColor ); + + @include colors.mm_colors_toggles( $mm_t_cls, + $mm_t_backgroundColor, + $mm_t_borderColor ); +} + + +// Light +$mm_t_cls : ".mm-light"; +$mm_t_pageShadow : 0 0 10px rgba( 0, 0, 0, 0.3 ); +$mm_t_borderColor : rgba( 0, 0, 0, 0.1 ); +$mm_t_backgroundColor : #f3f3f3; +$mm_t_emphasizedBackgroundColor : rgba( 255, 255, 255, 0.6 ); +$mm_t_highlightedBackgroundColor: rgba( 0, 0, 0, 0.03 ); +$mm_t_textColor : rgba( 0, 0, 0, 0.6 ); +$mm_t_dimmedTextColor : rgba( 0, 0, 0, 0.3 ); +$mm_t_inputBackgroundColor : rgba( 0, 0, 0, 0.1 ); +@include mm_apply_theme; + + +// White +$mm_t_cls : ".mm-white"; +$mm_t_pageShadow : 0 0 10px rgba( 0, 0, 0, 0.3 ); +$mm_t_borderColor : rgba( 0, 0, 0, 0.1 ); +$mm_t_backgroundColor : #fff; +$mm_t_emphasizedBackgroundColor : rgba( 0, 0, 0, 0.06 ); +$mm_t_highlightedBackgroundColor: rgba( 0, 0, 0, 0.03 ); +$mm_t_textColor : rgba( 0, 0, 0, 0.6 ); +$mm_t_dimmedTextColor : rgba( 0, 0, 0, 0.3 ); +$mm_t_inputBackgroundColor : rgba( 0, 0, 0, 0.1 ); +@include mm_apply_theme; + + +// Black +$mm_t_cls : ".mm-black"; +$mm_t_pageShadow : none; +$mm_t_borderColor : rgba( 255, 255, 255, 0.2 ); +$mm_t_backgroundColor : #000; +$mm_t_emphasizedBackgroundColor : rgba( 255, 255, 255, 0.25 ); +$mm_t_highlightedBackgroundColor: rgba( 255, 255, 255, 0.15 ); +$mm_t_textColor : rgba( 255, 255, 255, 0.6 ); +$mm_t_dimmedTextColor : rgba( 255, 255, 255, 0.3 ); +$mm_t_inputBackgroundColor : rgba( 255, 255, 255, 0.3 ); +@include mm_apply_theme; \ No newline at end of file diff --git a/source/_sass/_site/mmenu/extensions/jquery.mmenu.widescreen.scss b/source/_sass/_site/mmenu/extensions/jquery.mmenu.widescreen.scss new file mode 100755 index 0000000..c6ad984 --- /dev/null +++ b/source/_sass/_site/mmenu/extensions/jquery.mmenu.widescreen.scss @@ -0,0 +1,60 @@ +/* + jQuery.mmenu widescreen extension CSS + + To use on widescreens only, include it using a mediaquery: + +*/ + +@import "../inc/variables"; + +$mm_ws_menuWidth: 0.3 !default; + + +// Positioning and sizing +html, body +{ + overflow: auto; +} +body +{ + padding-left: percentage( $mm_ws_menuWidth ) !important; + position: relative; +} +#mm-blocker +{ + display: none !important; +} +.mm-page +{ + box-shadow: none !important; + background: inherit; + + box-sizing: border-box; + min-height: 100vh; + height: auto !important; + margin: 0 !important; + position: relative !important; + top: 0 !important; + z-index: 1; +} +.mm-menu +{ + width: percentage( $mm_ws_menuWidth ) !important; + z-index: 0; + + &.mm-top, + &.mm-right, + &.mm-bottom + { + top: 0 !important; + right: auto !important; + bottom: auto !important; + left: 0 !important; + } + + &:first-child, + &.mm-current + { + display: block; + } +} \ No newline at end of file diff --git a/source/_sass/_site/mmenu/jquery.mmenu.all.scss b/source/_sass/_site/mmenu/jquery.mmenu.all.scss new file mode 100755 index 0000000..b54d645 --- /dev/null +++ b/source/_sass/_site/mmenu/jquery.mmenu.all.scss @@ -0,0 +1,15 @@ +@use "jquery.mmenu"; + +@use "addons/jquery.mmenu.buttonbars" as jquery2; +@use "addons/jquery.mmenu.counters" as jquery3; +@use "addons/jquery.mmenu.dragopen" as jquery4; +@use "addons/jquery.mmenu.footer" as jquery5; +@use "addons/jquery.mmenu.header" as jquery6; +@use "addons/jquery.mmenu.labels" as jquery7; +@use "addons/jquery.mmenu.searchfield" as jquery8; +@use "addons/jquery.mmenu.toggles" as jquery9; + +@use "extensions/jquery.mmenu.effects" as jquery10; +@use "extensions/jquery.mmenu.fullscreen" as jquery11; +@use "extensions/jquery.mmenu.positioning" as jquery12; +@use "extensions/jquery.mmenu.themes" as jquery13; \ No newline at end of file diff --git a/source/_sass/_site/mmenu/jquery.mmenu.oncanvas.scss b/source/_sass/_site/mmenu/jquery.mmenu.oncanvas.scss new file mode 100755 index 0000000..87936a0 --- /dev/null +++ b/source/_sass/_site/mmenu/jquery.mmenu.oncanvas.scss @@ -0,0 +1,271 @@ +/* + jQuery.mmenu panels CSS +*/ +@use "inc/variables"; +@use "inc/colors"; +@use "inc/mixins"; + + +// Animations +.mm-menu.mm-horizontal>.mm-panel { + -webkit-transition: -webkit-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + transition: transform variables.$mm_transitionDuration variables.$mm_transitionFunction; +} + + +// Generic classes +.mm-menu .mm-hidden { + display: none; +} + + +// Container +.mm-wrapper { + overflow-x: hidden; + position: relative; +} + +// Menu +.mm-menu, +.mm-menu>.mm-panel { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 0; +} + +.mm-menu { + background: inherit; + display: block; + overflow: hidden; + padding: 0; + + >.mm-panel { + background: inherit; + + -webkit-overflow-scrolling: touch; + overflow: scroll; + overflow-x: hidden; + overflow-y: auto; + + box-sizing: border-box; + padding: variables.$mm_padding * 2; + + @include mixins.mm_webkit-prefix('transform', translateX(100%)); + + &.mm-opened { + @include mixins.mm_webkit-prefix('transform', translateX(0%)); + } + + &.mm-subopened { + @include mixins.mm_webkit-prefix('transform', translateX(-(variables.$mm_subpanelOffset) )); + } + + &.mm-highest { + z-index: 1; + } + } + + // Lists + .mm-list { + padding: calc(variables.$mm_btnSize / 2) 0; + } + + >.mm-list { + padding-bottom: 0; + + &:after { + content: ''; + display: block; + height: variables.$mm_btnSize; + } + } +} + +.mm-panel>.mm-list { + margin-left: -(variables.$mm_padding * 2); + margin-right: -(variables.$mm_padding * 2); + + &:first-child { + padding-top: 0; + } +} + +.mm-list, +.mm-list>li { + list-style: none; + display: block; + padding: 0; + margin: 0; +} + +.mm-list { + font: inherit; + font-size: variables.$mm_fontSize; + + a, + a:hover { + text-decoration: none; + } + + >li { + position: relative; + + >a, + >span { + @include mixins.mm_ellipsis; + + color: inherit; + line-height: calc(variables.$mm_btnSize - (variables.$mm_padding * 2)); + display: block; + padding: variables.$mm_padding variables.$mm_padding variables.$mm_padding ( + variables.$mm_padding * 2 + ); + margin: 0; + } +} + +>li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults) { + @include mixins.mm_border-bottom; + + &:after { + width: auto; + margin-left: (variables.$mm_padding * 2); + position: relative; + left: auto; + } +} + +// subopen/close +a.mm-subopen { + @include mixins.mm_border-left; + + background: rgba(3, 2, 1, 0); + width: variables.$mm_subopenWidth; + height: 100%; + padding: 0; + position: absolute; + right: 0; + top: 0; + z-index: 2; + + &.mm-fullsubopen { + width: 100%; + + &:before { + border-left: none; + } + } + + +a, + +span { + padding-right: calc(variables.$mm_padding / 2); + margin-right: variables.$mm_subopenWidth; + } +} + +>li.mm-selected { + >a.mm-subopen { + background: transparent; + } + + >a.mm-fullsubopen { + + +a, + +span { + padding-right: calc(variables.$mm_btnSize + (variables.$mm_padding / 2)); + margin-right: 0; + } + } +} + +a.mm-subclose { + text-indent: calc(variables.$mm_btnSize - (variables.$mm_padding * 2)); + padding-top: calc((variables.$mm_btnSize / 2) + variables.$mm_padding); + margin-top: - calc(variables.$mm_btnSize / 2); +} + +// Labels +>li.mm-label { + @include mixins.mm_ellipsis; + + font-size: 10px; + text-transform: uppercase; + text-indent: variables.$mm_padding * 2; + line-height: variables.$mm_labelHeight; + padding-right: calc(variables.$mm_padding / 2); +} + +// Spacers +>li.mm-spacer { + padding-top: variables.$mm_btnSize; + + &.mm-label { + padding-top: variables.$mm_labelHeight; + } +} + +// Arrows +a.mm-subopen:after, +a.mm-subclose:before { + @include mixins.mm_arrow; + + margin-bottom: -5px; + position: absolute; + bottom: 50%; +} + +a.mm-subopen:after { + @include mixins.mm_arrow-next; + + right: 18px; +} + +a.mm-subclose:before { + @include mixins.mm_arrow-prev; + + margin-bottom: -(variables.$mm_padding * 2) + 5; + left: 22px; +} +} + +// vertical submenu +.mm-menu.mm-vertical .mm-list { + .mm-panel { + display: none; + padding: variables.$mm_padding 0 variables.$mm_padding variables.$mm_padding; + + li:last-child:after { + border-color: transparent; + } + } + + li.mm-opened>.mm-panel { + display: block; + } + + >li { + >a.mm-subopen { + height: variables.$mm_btnSize; + + &:after { + top: calc((variables.$mm_btnSize / 2) - 4px); + bottom: auto; + } + } + + &.mm-opened { + >a.mm-subopen:after { + @include mixins.mm_webkit-prefix("transform", rotate(45deg)); + } + } + + &.mm-label>a.mm-subopen { + height: variables.$mm_labelHeight; + } + } +} + +@include colors.mm_colors; diff --git a/source/_sass/_site/mmenu/jquery.mmenu.scss b/source/_sass/_site/mmenu/jquery.mmenu.scss new file mode 100755 index 0000000..0764685 --- /dev/null +++ b/source/_sass/_site/mmenu/jquery.mmenu.scss @@ -0,0 +1,6 @@ +/* + jQuery.mmenu CSS +*/ + +@use "jquery.mmenu.oncanvas"; +@use "addons/jquery.mmenu.offcanvas" as jquery2; diff --git a/source/_sass/_site/responsive/partials/dropdown.svg b/source/_sass/_site/responsive/partials/dropdown.svg new file mode 100755 index 0000000..bd011a9 --- /dev/null +++ b/source/_sass/_site/responsive/partials/dropdown.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_sass/_site/responsive/partials/loader.gif b/source/_sass/_site/responsive/partials/loader.gif new file mode 100755 index 0000000..00df259 Binary files /dev/null and b/source/_sass/_site/responsive/partials/loader.gif differ diff --git a/source/_sass/_site/responsive/partials/overlay.png b/source/_sass/_site/responsive/partials/overlay.png new file mode 100755 index 0000000..d0a265e Binary files /dev/null and b/source/_sass/_site/responsive/partials/overlay.png differ diff --git a/source/_sass/_site/responsive/responsive.scss b/source/_sass/_site/responsive/responsive.scss new file mode 100755 index 0000000..75a9ddf --- /dev/null +++ b/source/_sass/_site/responsive/responsive.scss @@ -0,0 +1,41 @@ +// Utilities +@use "utilities/variables"; +@use "utilities/mixins/breakpoints"; +@use "utilities/mixins/grid"; +@use "utilities/mixins/push-pull"; +@use "utilities/mixins/grid-state"; +@use "utilities/mixins/layout"; +@use "utilities/mixins/text-align"; +@use "utilities/mixins/visibility"; + +// Base Styles +// @import "partials/copyright"; +// @import "partials/normalize"; +// @import "partials/base"; + +// Grid System +@use "partials/grid" as grid2; + +// CSS Components +// @import "partials/alerts"; +// @import "partials/buttons"; +// @import "partials/code"; +// @import "partials/forms"; +// @import "partials/lists"; +// @import "partials/media"; +// @import "partials/tables"; + +// JS Plugins +// @import "partials/autosize"; +// @import "partials/carousel"; +// @import "partials/dropdown"; +@use "partials/modal"; +// @import "partials/tablelist"; +// @import "partials/tabs"; + +// Helpers +@use "partials/helpers-layout"; +@use "partials/helpers-visibility"; + +// Print Styles +@use "partials/print"; diff --git a/source/_sass/_site/sections/blog.scss b/source/_sass/_site/sections/blog.scss new file mode 100644 index 0000000..0027f41 --- /dev/null +++ b/source/_sass/_site/sections/blog.scss @@ -0,0 +1,89 @@ +@use "../colors"; +@use "../responsive/utilities/mixins/breakpoints"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.blog__meta { + border-bottom: 1px solid colors.$gray-09; + border-top: 1px solid colors.$gray-09; + padding: 0.5em; + margin-bottom: 1em; +} + +.blog__more { + margin-top: 2em; +} + +.image-list { + img { + display: inline; + } +} + + +.blog-index__post { + margin-bottom: 2em; + + .blog--no-index { + display: none; + } + + h3 { + font-weight: 600; + font-size: 1.4em; + margin: -0.2em 0 0; + line-height: 1.1; + } + + p.blog-index__tags { + margin: 0 0 0.25em 0; + font-size: 0.9em; + + a { + color: color.scale(colors.$gray-09, $lightness: -33.7748344371%); + } + } + + .blog-index__meta { + margin-right: 1em; + + img { + border-radius: 5px; + } + + p { + color: colors.$gray-09; + font-size: 0.85em; + text-align: center; + } + } + + .blog-index__body { + float: left; + max-width: 43em; + + @include breakpoints.bp-min (m) { + width: 83%; + } + } +} + +.blog__image-text { + font-size: 0.9em; + font-style: italic; + text-align: center; +} \ No newline at end of file diff --git a/source/_sass/_site/sections/documentation.scss b/source/_sass/_site/sections/documentation.scss new file mode 100644 index 0000000..f835eec --- /dev/null +++ b/source/_sass/_site/sections/documentation.scss @@ -0,0 +1,220 @@ +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +@use 'documentation/c'; +@use 'documentation/android'; +@use 'documentation/ios'; +@use 'documentation/js'; +@use "../base/variables"; +@use "../colors"; +@use "../header"; + +$docs-header-color: colors.$gray-06; + +.documentation { + max-width: 43em; + + a, + a code { + color: color.scale(variables.$base-link-color, $lightness: -33.7748344371%); + font-weight: 600; + } + + a:hover, + a:active { + color: color.scale(variables.$base-link-color, $lightness: -67.5496688742%); + } +} + +.docs_tree { + ul { + @extend %default-ul; + } +} + +.docs__item { + ul { + @extend %default-ul; + } +} + + +.docs__item__param { + white-space: nowrap; + + a { + text-decoration: underline; + + &:hover, + &:active, + &:focus { + color: colors.$gray-02; + } + } +} + +.docs__module { + h4 { + margin: 0; + } + + a { + font-weight: normal; + text-decoration: none; + } +} + +.docs__item { + margin-bottom: 2em; + + &:last-child { + margin-bottom: 1em; + } + + &::before { + content: ' '; + display: block; + height: header.$header-height; + margin-top: -1 * header.$header-height; + visibility: hidden; + } + + section { + display: none; + + &[data-platform="aplite"] { + display: block; + } + } +} + +.docs__item__tabs { + list-style: none; + margin: 0; + padding: 0; + + li { + display: inline-block; + } + + a { + background-color: color.scale($docs-header-color, $lightness: 49.756097561%); + border-radius: 4px 4px 0 0; + color: color.scale(colors.$gray-02, $lightness: 13.9344262295%); + display: block; + padding: 0.4em 0.8em; + text-transform: uppercase; + + &.active { + background-color: $docs-header-color; + color: colors.$gray-02; + } + } +} + +.docs__item__header { + background-color: $docs-header-color; + color: colors.$gray-02; + font-size: 0.9em; + font-weight: 600; + padding: 0.5em; + + a, + a:hover, + a:active { + color: colors.$gray-02; + } +} + +.docs__item__name { + color: colors.$gray-02; + font-weight: bold; +} + +.docs__item__summary, +.docs__item__description { + margin-bottom: 0.5em; + + &:last-child { + margin: 0; + } +} + +.docs__item__body { + border: 1px solid $docs-header-color; + border-top: 0; + padding: 0.5em; + + h4 { + border-bottom: 1px solid colors.$color-docs; + text-transform: uppercase; + font-weight: 600; + font-size: 1.2em; + } + + dl { + margin-top: 0; + + &:last-child { + margin-bottom: 0; + } + } + + dd { + margin-left: 1em; + } + + dt { + margin: 0; + } + + p:last-child { + margin-bottom: 0; + } +} + +.docs__item--missing { + border: 1px solid colors.$gray-09; + padding: 0.5em; + + p { + margin-bottom: 0; + } +} + +.alert--docs-notes { + background-color: colors.$gray-05; + border-bottom: 2px solid colors.$color-docs; + border-top: 2px solid colors.$color-docs; + color: colors.$gray-03; + margin: 0 -0.5em 1em; + + h5 { + font-size: 1.1em; + margin: 0; + text-transform: uppercase; + } +} + +.docs__item__anchor { + &::before { + content: ' '; + display: block; + height: header.$header-height; + margin-top: -1 * header.$header-height; + visibility: hidden; + } +} + diff --git a/source/_sass/_site/sections/documentation/android.scss b/source/_sass/_site/sections/documentation/android.scss new file mode 100644 index 0000000..415a90b --- /dev/null +++ b/source/_sass/_site/sections/documentation/android.scss @@ -0,0 +1,442 @@ +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.documentation__android { + + ul { + list-style-type:disc; + } + code, tt { + font-size:1.2em; + } + dt code { + font-size:1.2em; + } + table tr td dt code { + font-size:1.2em; + vertical-align:top; + } + sup { + font-size:.6em; + } + /* + Document title and Copyright styles + */ + .clear { + clear:both; + height:0px; + overflow:hidden; + } + .aboutLanguage { + float:right; + padding:0px 21px; + font-size:.8em; + z-index:200; + margin-top:-7px; + } + .legalCopy { + margin-left:.5em; + } + .bar a, .bar a:link, .bar a:visited, .bar a:active { + color:#FFFFFF; + text-decoration:none; + } + .bar a:hover, .bar a:focus { + color:#bb7a2a; + } + .tab { + background-color:#0066FF; + background-image:url(resources/titlebar.gif); + background-position:left top; + background-repeat:no-repeat; + color:#ffffff; + padding:8px; + width:5em; + font-weight:bold; + } + /* + Navigation bar styles + */ + .bar { + background-image:url(resources/background.gif); + background-repeat:repeat-x; + color:#FFFFFF; + padding:.8em .5em .4em .8em; + height:auto;/*height:1.8em;*/ + font-size:1em; + margin:0; + } + .topNav { + background-image:url(resources/background.gif); + background-repeat:repeat-x; + color:#FFFFFF; + float:left; + padding:0; + width:100%; + clear:right; + height:2.8em; + padding-top:10px; + overflow:hidden; + } + .bottomNav { + margin-top:10px; + background-image:url(resources/background.gif); + background-repeat:repeat-x; + color:#FFFFFF; + float:left; + padding:0; + width:100%; + clear:right; + height:2.8em; + padding-top:10px; + overflow:hidden; + } + .subNav { + background-color:#dee3e9; + border-bottom:1px solid #9eadc0; + float:left; + width:100%; + overflow:hidden; + } + .subNav div { + clear:left; + float:left; + padding:0 0 5px 6px; + } + ul.navList, ul.subNavList { + float:left; + margin:0 25px 0 0; + padding:0; + } + ul.navList li{ + list-style:none; + float:left; + padding:3px 6px; + } + ul.subNavList li{ + list-style:none; + float:left; + font-size:90%; + } + .topNav a:link, .topNav a:active, .topNav a:visited, .bottomNav a:link, .bottomNav a:active, .bottomNav a:visited { + color:#FFFFFF; + text-decoration:none; + } + .topNav a:hover, .bottomNav a:hover { + text-decoration:none; + color:#bb7a2a; + } + .navBarCell1Rev { + background-image:url(resources/tab.gif); + background-color:#a88834; + color:#FFFFFF; + margin: auto 5px; + border:1px solid #c9aa44; + } + /* + Page header and footer styles + */ + .header, .footer { + clear:both; + margin:0 20px; + padding:5px 0 0 0; + } + .indexHeader { + margin:10px; + position:relative; + } + .indexHeader h1 { + font-size:1.3em; + } + .title { + color:#2c4557; + margin:10px 0; + } + .subTitle { + margin:5px 0 0 0; + } + .header ul { + margin:0 0 25px 0; + padding:0; + } + .footer ul { + margin:20px 0 5px 0; + } + .header ul li, .footer ul li { + list-style:none; + font-size:1.2em; + } + /* + Heading styles + */ + div.details ul.blockList ul.blockList ul.blockList li.blockList h4, div.details ul.blockList ul.blockList ul.blockListLast li.blockList h4 { + background-color:#dee3e9; + border-top:1px solid #9eadc0; + border-bottom:1px solid #9eadc0; + margin:0 0 6px -8px; + padding:2px 5px; + } + ul.blockList ul.blockList ul.blockList li.blockList h3 { + background-color:#dee3e9; + border-top:1px solid #9eadc0; + border-bottom:1px solid #9eadc0; + margin:0 0 6px -8px; + padding:2px 5px; + } + ul.blockList ul.blockList li.blockList h3 { + padding:0; + margin:15px 0; + } + ul.blockList li.blockList h2 { + padding:0px 0 20px 0; + } + /* + Page layout container styles + */ + .contentContainer, .sourceContainer, .classUseContainer, .serializedFormContainer, .constantValuesContainer { + clear:both; + padding:10px 20px; + position:relative; + } + .indexContainer { + margin:10px; + position:relative; + font-size:1.0em; + } + .indexContainer h2 { + font-size:1.1em; + padding:0 0 3px 0; + } + .indexContainer ul { + margin:0; + padding:0; + } + .indexContainer ul li { + list-style:none; + } + .contentContainer .description dl dt, .contentContainer .details dl dt, .serializedFormContainer dl dt { + font-size:1.1em; + font-weight:bold; + margin:10px 0 0 0; + color:#4E4E4E; + } + .contentContainer .description dl dd, .contentContainer .details dl dd, .serializedFormContainer dl dd { + margin:10px 0 10px 20px; + } + .serializedFormContainer dl.nameValue dt { + margin-left:1px; + font-size:1.1em; + display:inline; + font-weight:bold; + } + .serializedFormContainer dl.nameValue dd { + margin:0 0 0 1px; + font-size:1.1em; + display:inline; + } + /* + List styles + */ + ul.horizontal li { + display:inline; + font-size:0.9em; + } + ul.inheritance { + margin:0; + padding:0; + } + ul.inheritance li { + display:inline; + list-style:none; + } + ul.inheritance li ul.inheritance { + margin-left:15px; + padding-left:15px; + padding-top:1px; + } + ul.blockList, ul.blockListLast { + margin:10px 0 10px 0; + padding:0; + } + ul.blockList li.blockList, ul.blockListLast li.blockList { + list-style:none; + margin-bottom:25px; + } + ul.blockList ul.blockList li.blockList, ul.blockList ul.blockListLast li.blockList { + padding:0px 20px 5px 10px; + border:1px solid #9eadc0; + background-color:#f9f9f9; + } + ul.blockList ul.blockList ul.blockList li.blockList, ul.blockList ul.blockList ul.blockListLast li.blockList { + padding:0 0 5px 8px; + background-color:#ffffff; + border:1px solid #9eadc0; + border-top:none; + } + ul.blockList ul.blockList ul.blockList ul.blockList li.blockList { + margin-left:0; + padding-left:0; + padding-bottom:15px; + border:none; + border-bottom:1px solid #9eadc0; + } + ul.blockList ul.blockList ul.blockList ul.blockList li.blockListLast { + list-style:none; + border-bottom:none; + padding-bottom:0; + } + table tr td dl, table tr td dl dt, table tr td dl dd { + margin-top:0; + margin-bottom:1px; + } + /* + Table styles + */ + .contentContainer table, .classUseContainer table, .constantValuesContainer table { + border-bottom:1px solid #9eadc0; + width:100%; + } + .contentContainer ul li table, .classUseContainer ul li table, .constantValuesContainer ul li table { + width:100%; + } + .contentContainer .description table, .contentContainer .details table { + border-bottom:none; + } + .contentContainer ul li table th.colOne, .contentContainer ul li table th.colFirst, .contentContainer ul li table th.colLast, .classUseContainer ul li table th, .constantValuesContainer ul li table th, .contentContainer ul li table td.colOne, .contentContainer ul li table td.colFirst, .contentContainer ul li table td.colLast, .classUseContainer ul li table td, .constantValuesContainer ul li table td{ + vertical-align:top; + padding-right:20px; + } + .contentContainer ul li table th.colLast, .classUseContainer ul li table th.colLast,.constantValuesContainer ul li table th.colLast, + .contentContainer ul li table td.colLast, .classUseContainer ul li table td.colLast,.constantValuesContainer ul li table td.colLast, + .contentContainer ul li table th.colOne, .classUseContainer ul li table th.colOne, + .contentContainer ul li table td.colOne, .classUseContainer ul li table td.colOne { + padding-right:3px; + } + .overviewSummary caption, .packageSummary caption, .contentContainer ul.blockList li.blockList caption, .summary caption, .classUseContainer caption, .constantValuesContainer caption { + position:relative; + text-align:left; + background-repeat:no-repeat; + color:#FFFFFF; + font-weight:bold; + clear:none; + overflow:hidden; + padding:0px; + margin:0px; + } + caption a:link, caption a:hover, caption a:active, caption a:visited { + color:#FFFFFF; + } + .overviewSummary caption span, .packageSummary caption span, .contentContainer ul.blockList li.blockList caption span, .summary caption span, .classUseContainer caption span, .constantValuesContainer caption span { + white-space:nowrap; + padding-top:8px; + padding-left:8px; + display:block; + float:left; + background-image:url(resources/titlebar.gif); + height:18px; + } + .overviewSummary .tabEnd, .packageSummary .tabEnd, .contentContainer ul.blockList li.blockList .tabEnd, .summary .tabEnd, .classUseContainer .tabEnd, .constantValuesContainer .tabEnd { + width:10px; + background-image:url(resources/titlebar_end.gif); + background-repeat:no-repeat; + background-position:top right; + position:relative; + float:left; + } + ul.blockList ul.blockList li.blockList table { + margin:0 0 12px 0px; + width:100%; + } + .tableSubHeadingColor { + background-color: #EEEEFF; + } + .altColor { + background-color:#eeeeef; + } + .rowColor { + background-color:#ffffff; + } + .overviewSummary td, .packageSummary td, .contentContainer ul.blockList li.blockList td, .summary td, .classUseContainer td, .constantValuesContainer td { + text-align:left; + padding:3px 3px 3px 7px; + } + th.colFirst, th.colLast, th.colOne, .constantValuesContainer th { + background:#dee3e9; + border-top:1px solid #9eadc0; + border-bottom:1px solid #9eadc0; + text-align:left; + padding:3px 3px 3px 7px; + } + td.colOne a:link, td.colOne a:active, td.colOne a:visited, td.colOne a:hover, td.colFirst a:link, td.colFirst a:active, td.colFirst a:visited, td.colFirst a:hover, td.colLast a:link, td.colLast a:active, td.colLast a:visited, td.colLast a:hover, .constantValuesContainer td a:link, .constantValuesContainer td a:active, .constantValuesContainer td a:visited, .constantValuesContainer td a:hover { + font-weight:bold; + } + td.colFirst, th.colFirst { + border-left:1px solid #9eadc0; + white-space:nowrap; + } + td.colLast, th.colLast { + border-right:1px solid #9eadc0; + } + td.colOne, th.colOne { + border-right:1px solid #9eadc0; + border-left:1px solid #9eadc0; + } + table.overviewSummary { + padding:0px; + margin-left:0px; + } + table.overviewSummary td.colFirst, table.overviewSummary th.colFirst, + table.overviewSummary td.colOne, table.overviewSummary th.colOne { + width:25%; + vertical-align:middle; + } + table.packageSummary td.colFirst, table.overviewSummary th.colFirst { + width:25%; + vertical-align:middle; + } + /* + Content styles + */ + .description pre { + margin-top:0; + } + .deprecatedContent { + margin:0; + padding:10px 0; + } + .docSummary { + padding:0; + } + /* + Formatting effect styles + */ + .sourceLineNo { + color:green; + padding:0 30px 0 0; + } + h1.hidden { + visibility:hidden; + overflow:hidden; + font-size:.9em; + } + .block { + display:block; + margin:3px 0 0 0; + } + .strong { + font-weight:bold; + } +} diff --git a/source/_sass/_site/sections/documentation/c.scss b/source/_sass/_site/sections/documentation/c.scss new file mode 100644 index 0000000..7aa2aa4 --- /dev/null +++ b/source/_sass/_site/sections/documentation/c.scss @@ -0,0 +1,28 @@ +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.documentation__c { + max-width: 43em; + + .gcolor_sample { + width: 3em; + height: 1.3em; + display: block; + float: left; + border: 1px solid #000; + margin-right: 0.5em; + } +} diff --git a/source/_sass/_site/sections/documentation/ios.scss b/source/_sass/_site/sections/documentation/ios.scss new file mode 100644 index 0000000..7a9e13c --- /dev/null +++ b/source/_sass/_site/sections/documentation/ios.scss @@ -0,0 +1,580 @@ +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.documentation__ios { + + code { + white-space: normal; + } + + // font-family: 'Lucida Grande',Geneva,Helvetica,Arial,sans-serif; + // font-size: 13px; + + code { + // font-family: Courier, Consolas, monospace; + // font-size: 13px; + color: #666; + } + + pre { + // font-family: Courier, Consolas, monospace; + font-size: 13px; + line-height: 18px; + tab-interval: 0.5em; + border: 1px solid #C7CFD5; + background-color: #F1F5F9; + color: #666; + padding: 0.3em 1em; + } + + ul { + list-style-type: square; + } + + li { + margin-bottom: 10px; + } + + a, a code { + text-decoration: none; + color: #36C; + } + + a:hover, a:hover code { + text-decoration: underline; + color: #36C; + } + + h2 { + border-bottom: 1px solid #8391A8; + color: #3C4C6C; + font-size: 187%; + font-weight: normal; + margin-top: 1.75em; + padding-bottom: 2px; + } + + table { + margin-bottom: 4em; + border-collapse:collapse; + vertical-align: middle; + } + + td { + border: 1px solid #9BB3CD; + padding: .667em; + font-size: 100%; + } + + th { + border: 1px solid #9BB3CD; + padding: .3em .667em .3em .667em; + background: #93A5BB; + font-size: 103%; + font-weight: bold; + color: white; + text-align: left; + } + + #top_header { + height: 91px; + left: 0; + min-width: 598px; + position: absolute; + right: 0; + top: 0; + z-index: 900; + } + + #footer { + clear: both; + padding-top: 20px; + text-align: center; + } + + .copyright { + font-size: 12px; + } + + .generator { + font-size: 11px; + } + + .main-navigation ul li { + display: inline; + margin-left: 15px; + list-style: none; + } + + .navigation-top { + clear: both; + float: right; + } + + .navigation-bottom { + clear: both; + float: right; + margin-top: 20px; + margin-bottom: -10px; + } + + .open > .disclosure { + background-image: url("../img/disclosure_open.png"); + } + + .disclosure { + background: url("../img/disclosure.png") no-repeat scroll 0 0; + } + + .disclosure, .nodisclosure { + display: inline-block; + height: 8px; + margin-right: 5px; + position: relative; + width: 9px; + } + + #top_header #library { + background: url("../img/library_background.png") repeat-x 0 0 #485E78; + background-color: #ccc; + height: 35px; + font-size: 115%; + } + + #top_header #library #libraryTitle { + color: #FFFFFF; + margin-left: 15px; + text-shadow: 0 -1px 0 #485E78; + top: 8px; + position: absolute; + } + + #libraryTitle { + left: 0; + } + + #top_header #library #developerHome { + color: #92979E; + right: 15px; + top: 8px; + position: absolute; + } + + #top_header #library a:hover { + text-decoration: none; + } + + #top_header #title { + background: url("../img/title_background.png") repeat-x 0 0 #8A98A9; + border-bottom: 1px solid #757575; + height: 25px; + overflow: hidden; + } + + #top_header h1 { + font-size: 105%; + font-weight: normal; + margin: 0; + padding: 3px 0 2px; + text-align: center; + white-space: nowrap; + } + + #headerButtons { + background-color: #D8D8D8; + background-image: url("../img/button_bar_background.png"); + border-bottom: 0px solid #EDEDED; + border-top: 0px solid #a8a8a8; + font-size: 8pt; + height: 28px; + left: 0; + list-style: none outside none; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + right: 0; + top: 61px; + } + + #headerButtons li { + background-repeat: no-repeat; + display: inline; + margin-top: 0; + margin-bottom: 0; + padding: 0; + } + + #toc_button button { + background-color: #EBEEF1; + border-color: #ACACAC; + border-style: none solid none none; + border-width: 0 1px 0 0; + height: 28px; + margin: 0; + padding-left: 30px; + text-align: left; + width: 230px; + } + + li#jumpto_button { + left: 230px; + margin-left: 0; + position: absolute; + } + + li#jumpto_button select { + height: 22px; + margin: 5px 2px 0 10px; + max-width: 300px; + } + + + #tocContainer.isShowingTOC { + border-right: 1px solid #ACACAC; + display: block; + overflow-x: hidden; + overflow-y: auto; + padding: 0; + } + + #tocContainer { + background-color: #EBEEF1; + border-top: 1px solid #ACACAC; + bottom: 0; + display: none; + left: 0; + overflow: hidden; + position: absolute; + top: 90px; + width: 229px; + } + + #tocContainer > ul#toc { + font-size: 11px; + margin: 0; + padding: 12px 0 18px; + width: 209px; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; + } + + #tocContainer > ul#toc > li { + margin: 0; + padding: 0 0 7px 30px; + text-indent: -15px; + } + + #tocContainer > ul#toc > li > .sectionName a { + color: #000000; + font-weight: bold; + } + + #tocContainer > ul#toc > li > .sectionName a:hover { + text-decoration: none; + } + + #tocContainer > ul#toc li.children > ul { + display: none; + height: 0; + } + + #tocContainer > ul#toc > li > ul { + margin: 0; + padding: 0; + } + + #tocContainer > ul#toc > li > ul, ul#toc > li > ul > li { + margin-left: 0; + margin-bottom: 0; + padding-left: 15px; + } + + #tocContainer > ul#toc > li ul { + list-style: none; + margin-right: 0; + padding-right: 0; + } + + #tocContainer > ul#toc li.children.open > ul { + display: block; + height: auto; + margin-left: -15px; + padding-left: 0; + } + + #tocContainer > ul#toc > li > ul, ul#toc > li > ul > li { + margin-left: 0; + padding-left: 15px; + } + + #tocContainer li ul li { + margin-top: 0.583em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + #tocContainer li ul li span.sectionName { + white-space: normal; + } + + #tocContainer > ul#toc > li > ul > li > .sectionName a { + font-weight: bold; + } + + #tocContainer > ul#toc > li > ul a { + color: #4F4F4F; + } + + .index-title { + font-size: 13px; + font-weight: normal; + } + + .index-column { + float: left; + width: 30%; + min-width: 200px; + font-size: 11px; + } + + .index-column ul { + margin: 8px 0 0 0; + padding: 0; + list-style: none; + } + + .index-column ul li { + margin: 0 0 3px 0; + padding: 0; + } + + .hierarchy-column { + min-width: 400px; + } + + .hierarchy-column ul { + margin: 3px 0 0 15px; + } + + .hierarchy-column ul li { + list-style-type: square; + } + + .title { + font-weight: normal; + font-size: 215%; + margin-top:0; + } + + .subtitle { + font-weight: normal; + font-size: 180%; + color: #3C4C6C; + border-bottom: 1px solid #5088C5; + } + + .subsubtitle { + font-weight: normal; + font-size: 145%; + height: 0.7em; + } + + .note { + border: 1px solid #5088C5; + background-color: white; + margin: 1.667em 0 1.75em 0; + padding: 0 .667em .083em .750em; + } + + .warning { + border: 1px solid #5088C5; + background-color: #F0F3F7; + margin-bottom: 0.5em; + padding: 0.3em 0.8em; + } + + .bug { + border: 1px solid #000; + background-color: #ffffcc; + margin-bottom: 0.5em; + padding: 0.3em 0.8em; + } + + .deprecated { + color: #F60425; + } + + .section { + margin-top: 3em; + } + + .section-specification { + margin-left: 2.5em; + margin-right: 2.5em; + font-size: 12px; + } + + .section-specification table { + margin-bottom: 0em; + border-top: 1px solid #d6e0e5; + } + + .section-specification td { + vertical-align: top; + border-bottom: 1px solid #d6e0e5; + border-left-width: 0px; + border-right-width: 0px; + border-top-width: 0px; + padding: .6em; + } + + .section-specification .specification-title { + font-weight: bold; + } + + .task-list { + list-style-type: none; + padding-left: 0px; + } + + .task-list li { + margin-bottom: 3px; + } + + .task-item-suffix { + color: #996; + font-size: 12px; + font-style: italic; + margin-left: 0.5em; + } + + span.tooltip span.tooltip { + font-size: 1.0em; + display: none; + padding: 0.3em; + border: 1px solid #aaa; + background-color: #fdfec8; + color: #000; + text-align: left; + } + + span.tooltip:hover span.tooltip { + display: block; + position: absolute; + margin-left: 2em; + } + + .section-method { + margin-top: 2.3em; + } + + .method-title { + margin-bottom: 1.5em; + } + + .method-subtitle { + margin-top: 0.7em; + margin-bottom: 0.2em; + } + + .method-subsection p { + margin-top: 0.4em; + margin-bottom: 0.8em; + } + + .method-declaration { + margin-top:1.182em; + margin-bottom:.909em; + } + + .method-declaration code { + font:14px Courier, Consolas, monospace; + color:#000; + } + + .declaration { + color: #000; + } + + .termdef { + margin-bottom: 10px; + margin-left: 0px; + margin-right: 0px; + margin-top: 0px; + } + + .termdef dt { + margin: 0; + padding: 0; + } + + .termdef dd { + margin-bottom: 6px; + margin-left: 16px; + margin-right: 0px; + margin-top: 1px; + } + + .termdef dd p { + margin-bottom: 6px; + margin-left: 0px; + margin-right: 0px; + margin-top: -1px; + } + + .argument-def { + margin-top: 0.3em; + margin-bottom: 0.3em; + } + + .argument-def dd { + margin-left: 1.25em; + } + + .see-also-section ul { + list-style-type: none; + padding-left: 0px; + margin-top: 0; + } + + .see-also-section li { + margin-bottom: 3px; + } + + .declared-in-ref { + color: #666; + } + + #tocContainer.hideInXcode { + display: none; + border: 0px solid black; + } + + #top_header.hideInXcode { + display: none; + } + + #contents.hideInXcode { + border: 0px solid black; + top: 0px; + left: 0px; + } + + +} \ No newline at end of file diff --git a/source/_sass/_site/sections/documentation/js.scss b/source/_sass/_site/sections/documentation/js.scss new file mode 100644 index 0000000..625bc9d --- /dev/null +++ b/source/_sass/_site/sections/documentation/js.scss @@ -0,0 +1,23 @@ +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.documentation__js { + .desc-list { + list-style: circle; + margin-left: 25px; + margin-bottom: 20px + } +} \ No newline at end of file diff --git a/source/_sass/_site/sections/events.scss b/source/_sass/_site/sections/events.scss new file mode 100644 index 0000000..72aa351 --- /dev/null +++ b/source/_sass/_site/sections/events.scss @@ -0,0 +1,148 @@ +@use "../base/variables"; +@use "../colors"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.events__map { + height: 260px; + width: 100%; + margin-bottom: 16px; +} + +.events__calendar { + width: 100%; + background-color: colors.$white; + margin-bottom: 1em; + + th, + td { + font-weight: 600; + text-align: center; + } + + .calendar__month, + .calendar__arrow { + background-color: colors.$gray-09; + font-weight: 700; + color: colors.$white; + } + + .calendar__arrow { + font-size: 1.2em; + padding: 0; + + a { + color: colors.$white; + } + } + + .calendar__month { + text-transform: uppercase; + font-size: 13px; + } + + .calendar__days { + th { + font-size: 12px; + } + } + + .calendar__day--past { + color: colors.$gray-06; + } + + .calendar__day--event { + background-color: colors.$green; + color: #fff; + } + + .calendar__day--past-event { + background-color: colors.$gray-06; + color: #fff; + } + + td { + padding: 0.25em; + width: calc(1 / 7) * 100%; + } +} + +.events__list { + + .event { + margin-bottom: 0.5em; + + h3 { + margin: 0; + overflow: hidden; + font-size: 1.3em; + } + + .event__meta { + font-size: 0.9em; + color: color.scale(colors.$gray-09, $lightness: -33.7748344371%); + margin-bottom: 0.5em; + } + } + + .event--highlighted { + padding: 0 10px; + border-left: 10px solid colors.$color-community; + margin-left: -20px; + } + + .event--past { + a { + color: color.scale(variables.$base-link-color, $lightness: 36.7788461538%); + } + } +} + +.retreat-2015__page { + background-color: rgb(47, 89, 108); + background-image: url('/assets/images/community/events/developer-retreat-2015/san-francisco.jpg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center center; +} + +.retreat-2015__stripe { + text-align: center; + background-color: rgba(40, 40, 40, 0.8); + color: #fff; + text-transform: uppercase; + padding: 2em; + + h1 { + font-weight: 500; + font-size: 3em; + margin-bottom: 0; + } + + h2 { + font-weight: 300; + margin-bottom: 0; + } + + form { + margin-top: 3em; + } + + .form_group { + margin-bottom: 0; + } +} diff --git a/source/_sass/_site/sections/examples.scss b/source/_sass/_site/sections/examples.scss new file mode 100644 index 0000000..4509172 --- /dev/null +++ b/source/_sass/_site/sections/examples.scss @@ -0,0 +1,68 @@ +@use "../colors"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.examples__filters { + margin-bottom: 1em; + + &:last-child { + margin-bottom: 0; + } + + h3 { + margin: 0; + } +} + +.examples__tag { + background-color: colors.$color-examples; + border-radius: 3px; + color: colors.$white; + display: inline-block; + font-size: 0.75em; + line-height: 1; + margin-bottom: 0.2em; + min-width: 3em; + padding: 0.3em; + text-align: center; + text-transform: uppercase; + + &:hover, + &:active, + &:focus { + color: colors.$white; + background-color: color.scale(colors.$color-examples, $lightness: -33.7748344371%); + } +} + +.examples__filters--selected { + .examples__tag { + background-color: color.scale(colors.$color-examples, $lightness: 39.2307692308%); + + &.selected { + background-color: colors.$color-examples; + } + } +} + +.example__meta { + margin-top: -1em; + margin-bottom: 0.5em; + font-size: 0.8em; + text-transform: uppercase; + color: colors.$gray-09; +} diff --git a/source/_sass/_site/sections/getting-started.scss b/source/_sass/_site/sections/getting-started.scss new file mode 100644 index 0000000..bba1c25 --- /dev/null +++ b/source/_sass/_site/sections/getting-started.scss @@ -0,0 +1,35 @@ +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.getting-started { + + .title-image { + background-position: center; + background-repeat: no-repeat; + height: 100%; + } + + .watchface-image { + background-image: url("/assets/images/getting-started/long-pebble.png"); + } + .one-click-action-image { + background-image: url("/assets/images/getting-started/pebble-long-grey.svg"); + } + .book-image { + background-image: url("/assets/images/getting-started/pebble-long-grey.svg"); + } + +} diff --git a/source/_sass/_site/sections/guides.scss b/source/_sass/_site/sections/guides.scss new file mode 100644 index 0000000..315261b --- /dev/null +++ b/source/_sass/_site/sections/guides.scss @@ -0,0 +1,54 @@ +@use "../colors"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.guides__toc { + + h2 { + margin: 0; + font-weight: 300; + font-size: 1.5em; + } + + h3 { + margin: 0; + font-weight: 300; + font-size: 1.3em; + } + + h4 { + margin: 0; + font-weight: 600; + font-size: 1.1em; + } + + p { + margin: 0 0 0.5em 0; + } +} + +.centered-table { + + td, th { + text-align:center; + } +} + +table td hr { + margin: 0; + border-bottom-color: colors.$gray-06; +} diff --git a/source/_sass/_site/sections/inspiration.scss b/source/_sass/_site/sections/inspiration.scss new file mode 100644 index 0000000..834cf0b --- /dev/null +++ b/source/_sass/_site/sections/inspiration.scss @@ -0,0 +1,45 @@ +@use "../base/variables"; +@use "../colors"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.inspiration-page { + h2 { + color: colors.$purple; + font-size: 1.5rem; + margin: 1rem 0 0; + text-transform: uppercase; + line-height: 1; + } + + blockquote { + font-size: 1.3rem; + border: 0; + color: color.scale(variables.$base-font-color, $lightness: 39.2307692308%); + margin: 0; + padding: 0; + + p { + margin: 0.5rem 0 1rem; + line-height: 1; + } + } + + h3 { + font-size: 1.1rem; + } +} diff --git a/source/_sass/_site/sections/retreat.scss b/source/_sass/_site/sections/retreat.scss new file mode 100644 index 0000000..5dac2fb --- /dev/null +++ b/source/_sass/_site/sections/retreat.scss @@ -0,0 +1,186 @@ +@use "../base/variables"; +@use "../bourbon/css3/flex-box"; +@use "../colors"; +@use "../elements/sectionmenu"; +@use "../elements/sidebar"; +@use "../header"; +@use "../responsive/utilities/mixins/breakpoints"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +$banner-blue: #066AC4; + +.retreat-page { + font-size: 1.3rem; + + h1 { + background-color: $banner-blue; + color: #fff; + font-size: 1.6em; + margin: 0; + padding: 2rem 0; + text-align: center; + text-transform: uppercase; + width: 100%; + } + + .anchor { + &::before { + content: ' '; + display: block; + height: header.$header-height + 60px; + margin-top: -1 * (header.$header-height + 60px); + visibility: hidden; + } + } + + .container { + margin-top: 1rem; + } +} + +.retreat-banner { + background-color: #066AC4; + overflow: hidden; + position: relative; + width: 100%; + max-height: 620px; + + @include breakpoints.bp-max (xs) { + padding-top: 3rem; + } + + img, + svg { + width: 100%; + display: block; + max-width: 1300px; + margin: 0 auto; + } +} + +.retreat-nav { + background-color: color.scale(#222, $alpha: -30%); + left: sidebar.$sidebar-width + sectionmenu.$section-menu-width; + position: fixed; + text-align: center; + top: header.$header-height; + right: 0; + z-index: 100; + + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { + left: 0; + width: 100%; + } + + .nav { + display: inline-block; + margin: 0; + } + + ul { + @include flex-box.display(flex); + } + + li { + @include flex-box.flex(1 0 auto); + display: block; + + &:last-child > a { + margin-right: 0 !important; + } + + > a { + color: #fff; + display: block; + padding: 1rem 0; + + &:hover, + &:focus { + background-color: color.scale(color.scale($banner-blue, $lightness: -75.7425742574%), $alpha: -30%); + } + } + } +} + +.retreat-location { + + .row { + background-image: url('../images/community/events/developer-retreat-2015/san-francisco.jpg'); + height: 35vw; + background-size: cover; + background-position: center bottom; + min-height: 300px; + } + + .retreat-location-strap { + background-color: rgba(255, 255, 255, 0.7); + text-align: center; + margin-bottom: 0; + padding: 1em 0; + font-size: 1.2rem; + margin-top: 5vw; + + @include breakpoints.bp-min(s) { + padding: 2em 0; + margin-top: 20vw; + font-size: 1.3em; + } + } + +} + +.retreat-faq { + + dt, + dd { + line-height: 1.3em; + margin: 0 0 1em; + padding: 0.5em 0 0 2.5em; + position: relative; + + &::before { + border-radius: variables.$base-border-radius; + color: colors.$white; + font-size: 1.4em; + font-weight: normal; + left: 0; + line-height: 1em; + padding: 0.5rem 0; + position: absolute; + text-align: center; + top: 0; + width: 1.4em; + } + } + + dt { + + &::before { + background-color: colors.$pebble-pink; + content: 'Q'; + } + } + + dd { + + &::before { + background-color: colors.$pebble-green; + content: 'A'; + } + } +} diff --git a/source/_sass/_site/sections/round.scss b/source/_sass/_site/sections/round.scss new file mode 100644 index 0000000..c36fdaf --- /dev/null +++ b/source/_sass/_site/sections/round.scss @@ -0,0 +1,103 @@ +@use "../colors"; +@use "../elements/sidebar"; +@use "../responsive/utilities/mixins/breakpoints"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.round-landing { + background-image: url('../images/round/splash.jpg'); + background-repeat: no-repeat; + background-position: center bottom; + background-size: cover; + + @include breakpoints.bp-max (xs) { + height: 120%; + } +} + +.round-landing__contents { + max-width: 800px; + width: 80%; + color: colors.$white; + text-align: center; + padding-top: 5%; + margin: 0 auto; +} + +.round-landing__header { + font-size: 3rem; +} + +.round-landing__text { + font-size: 1.5rem; + width: 80%; + margin: 0 auto 2rem; +} + +@include breakpoints.bp-max (s) { + .round-landing__buttons { + .btn { + display: block; + width: 100%; + margin-bottom: 1rem; + } + + .btn + .btn { + margin-left: 0; + } + } +} + +@include breakpoints.bp-min (m) { + .round-landing__buttons { + display: -webkit-flex; + display: flex; + + .btn { + flex: 1 1 auto; + -webkit-flex: 1 1 auto; + } + } +} + +.round-landing__lab { + font-size: 1.2em; + font-weight: 300; + background-color: rgba(200, 200, 200, 0.7); + color: colors.$black; + padding: 0.5em 0.8em; + margin: 1em 0; + + a { + color: colors.$black; + text-decoration: underline; + + &:hover { + color: colors.$black; + } + } + + @include breakpoints.bp-min (m) { + position: absolute; + left: sidebar.$sidebar-width + 20px; + bottom: 20px; + width: 50%; + min-width: 300px; + text-align: left; + margin: 0; + } +} diff --git a/source/_sass/_site/sections/sdk.scss b/source/_sass/_site/sections/sdk.scss new file mode 100644 index 0000000..c81f1a6 --- /dev/null +++ b/source/_sass/_site/sections/sdk.scss @@ -0,0 +1,28 @@ +@use "../responsive/utilities/mixins/breakpoints"; + +/** + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.sdk4-landing { + background-image: url('../images/landing-page/devblog.jpg'); + background-repeat: no-repeat; + background-position: center bottom; + background-size: cover; + + @include breakpoints.bp-max (xs) { + height: 120%; + } +} diff --git a/source/_sass/app.scss b/source/_sass/app.scss index c91bbd5..f6ea3fd 100644 --- a/source/_sass/app.scss +++ b/source/_sass/app.scss @@ -14,19 +14,25 @@ * limitations under the License. */ -@import 'bourbon/bourbon'; +@use "sass:color"; +@use "sass:meta"; +@use 'bourbon/bourbon'; -@import 'colors'; +@use 'colors'; -@import 'base/base'; -@import 'responsive/responsive'; -@import 'font-awesome/font-awesome'; +@forward 'base/base'; +@forward 'responsive/responsive'; +@forward 'font-awesome/font-awesome'; -@import 'header'; -@import 'footer'; +@use 'header'; +@use 'footer'; +@use "base/variables"; +@use "bourbon/addons/font-family"; +@use "bourbon/css3/box-sizing"; +@use "responsive/utilities/variables" as utilities-variables; * { - @include box-sizing(border-box); + @include box-sizing.box-sizing(border-box); } body, @@ -37,8 +43,8 @@ html { } body { - padding-top: $header-height; - background-color: $gray-01; + padding-top: header.$header-height; + background-color: colors.$gray-01; } .anchor[id], @@ -46,8 +52,8 @@ body { &::before { content: ' '; display: block; - height: $header-height; - margin-top: -0.7 * $header-height; + height: header.$header-height; + margin-top: -0.7 * header.$header-height; visibility: hidden; } } @@ -57,17 +63,17 @@ body { } code { - background-color: $white; + background-color: colors.$white; border-radius: 2px; - color: darken($base-font-color, 20); - font-family: $monospace; - font-size: $base-font-size; + color: color.adjust(variables.$base-font-color, $lightness: -20%); + font-family: font-family.$monospace; + font-size: utilities-variables.$base-font-size; padding: 2px 4px; box-shadow: inset 0 0 2px #bbb; } a code { - color: darken($base-link-color, 10); + color: color.adjust(variables.$base-link-color, $lightness: -10%); } .container { @@ -105,7 +111,7 @@ a code { line-height: 1.1; a { - color: $base-text-color; + color: utilities-variables.$base-text-color; &:hover { text-decoration: underline; @@ -155,48 +161,48 @@ a code { overflow: hidden; } -@import 'elements/alert'; -@import 'elements/buttons'; -@import 'elements/form'; -@import 'elements/mobile-nav'; -@import 'elements/highlight'; -@import 'elements/inline-list'; -@import 'elements/markdown'; -@import 'elements/screenshot'; -@import 'elements/sidebar'; -@import 'elements/spinner'; -@import 'elements/table'; +@include meta.load-css('elements/alert'); +@include meta.load-css('elements/buttons'); +@include meta.load-css('elements/form'); +@include meta.load-css('elements/mobile-nav'); +@include meta.load-css('elements/highlight'); +@include meta.load-css('elements/inline-list'); +@include meta.load-css('elements/markdown'); +@include meta.load-css('elements/screenshot'); +@include meta.load-css('elements/sidebar'); +@include meta.load-css('elements/spinner'); +@include meta.load-css('elements/table'); // @import 'elements/terminal'; -@import 'elements/toc'; +@include meta.load-css('elements/toc'); // @import 'elements/typeahead'; // @import 'elements/video'; -@import 'elements/bigbox'; -@import 'elements/full-height'; -@import 'elements/sectionmenu'; -@import 'elements/search'; -@import 'elements/gray-box'; -@import 'elements/ribbon'; -@import 'elements/pagination'; -@import 'elements/landing-slider'; -@import 'elements/platform-choice'; -@import 'elements/dual-image'; - -@import 'sections/getting-started'; - -@import 'libs/slick'; -@import 'mmenu/jquery.mmenu.all.scss'; - -@import 'sections/events'; -@import 'sections/blog'; -@import 'sections/documentation'; -@import 'sections/examples'; -@import 'sections/guides'; -@import 'sections/retreat'; -@import 'sections/inspiration'; -@import 'sections/round'; -@import 'sections/sdk'; - -@import 'debug'; +@include meta.load-css('elements/bigbox'); +@include meta.load-css('elements/full-height'); +@include meta.load-css('elements/sectionmenu'); +@include meta.load-css('elements/search'); +@include meta.load-css('elements/gray-box'); +@include meta.load-css('elements/ribbon'); +@include meta.load-css('elements/pagination'); +@include meta.load-css('elements/landing-slider'); +@include meta.load-css('elements/platform-choice'); +@include meta.load-css('elements/dual-image'); + +@include meta.load-css('sections/getting-started'); + +@include meta.load-css('libs/slick'); +@include meta.load-css('mmenu/jquery.mmenu.all.scss'); + +@include meta.load-css('sections/events'); +@include meta.load-css('sections/blog'); +@include meta.load-css('sections/documentation'); +@include meta.load-css('sections/examples'); +@include meta.load-css('sections/guides'); +@include meta.load-css('sections/retreat'); +@include meta.load-css('sections/inspiration'); +@include meta.load-css('sections/round'); +@include meta.load-css('sections/sdk'); + +@include meta.load-css('debug'); .mm-page { height: 100%; @@ -214,11 +220,11 @@ a code { .mm-opened, .mm-opening { .mm-page { - margin-top: -1 * $header-height; + margin-top: -1 * header.$header-height; } .content { - padding-top: $header-height; + padding-top: header.$header-height; } } @@ -236,7 +242,7 @@ a code { } .modal-content { - background-color: $gray-01; + background-color: colors.$gray-01; } .header--skinny { diff --git a/source/_sass/base/_base.scss b/source/_sass/base/_base.scss index 2bf129d..9530d2c 100644 --- a/source/_sass/base/_base.scss +++ b/source/_sass/base/_base.scss @@ -18,23 +18,23 @@ // http://bitters.bourbon.io // Variables -@import 'variables'; +@use 'variables'; // Neat Settings -- uncomment if using Neat -- must be imported before Neat // @import 'grid-settings'; // Mixins -@import 'mixins/flash'; +@use 'mixins/flash'; // Extends -@import 'extends/button'; -@import 'extends/clearfix'; -@import 'extends/hide-text'; +@use 'extends/button'; +@use 'extends/clearfix'; +@use 'extends/hide-text'; // Typography and Elements -@import 'typography'; +@use 'typography'; // @import 'forms'; -@import 'tables'; -@import 'lists'; -@import 'flashes'; +@use 'tables'; +@use 'lists'; +@use 'flashes'; // @import 'buttons'; diff --git a/source/_sass/base/_flashes.scss b/source/_sass/base/_flashes.scss index 4bb1a50..2d329c4 100644 --- a/source/_sass/base/_flashes.scss +++ b/source/_sass/base/_flashes.scss @@ -1,3 +1,6 @@ +@use "mixins/flash"; +@use "variables"; + /** * Copyright 2025 Google LLC * @@ -15,17 +18,17 @@ */ %flash-alert { - @include flash($alert-color); + @include flash.flash(variables.$alert-color); } %flash-error { - @include flash($error-color); + @include flash.flash(variables.$error-color); } %flash-notice { - @include flash($notice-color); + @include flash.flash(variables.$notice-color); } %flash-success { - @include flash($success-color); + @include flash.flash(variables.$success-color); } diff --git a/source/_sass/base/_forms.scss b/source/_sass/base/_forms.scss index b1c2e37..a39e5e2 100644 --- a/source/_sass/base/_forms.scss +++ b/source/_sass/base/_forms.scss @@ -17,7 +17,7 @@ fieldset { background: lighten($base-border-color, 10); border: 1px solid $base-border-color; - margin: 0 0 ($base-line-height / 2) 0; + margin: 0 0 (calc($base-line-height / 2)) 0; padding: $base-line-height; } @@ -31,7 +31,7 @@ select { label { font-weight: bold; - margin-bottom: $base-line-height / 4; + margin-bottom: calc($base-line-height / 4); &.required:after { content: "*"; @@ -53,7 +53,7 @@ select[multiple=multiple] { box-shadow: $form-box-shadow; font-family: $form-font-family; font-size: $form-font-size; - margin-bottom: $base-line-height / 2; + margin-bottom: calc($base-line-height / 2); padding: ($base-line-height / 3) ($base-line-height / 3); width: 100%; @@ -76,14 +76,15 @@ input[type="search"] { @include appearance(none); } -input[type="checkbox"], input[type="radio"] { +input[type="checkbox"], +input[type="radio"] { display: inline; - margin-right: $base-line-height / 4; + margin-right: calc($base-line-height / 4); } input[type="file"] { - margin-bottom: $base-line-height / 2; - padding-bottom: ($base-line-height / 3); + margin-bottom: calc($base-line-height / 2); + padding-bottom: calc($base-line-height / 3); width: 100%; } diff --git a/source/_sass/base/_lists.scss b/source/_sass/base/_lists.scss index b6473ae..01588f3 100644 --- a/source/_sass/base/_lists.scss +++ b/source/_sass/base/_lists.scss @@ -1,3 +1,5 @@ +@use "variables"; + /** * Copyright 2025 Google LLC * @@ -14,30 +16,31 @@ * limitations under the License. */ -ul, ol { +ul, +ol { margin: 0; padding: 0; list-style-type: none; &%default-ul { list-style-type: disc; - margin-bottom: $base-line-height / 2; - padding-left: $base-line-height; + margin-bottom: calc(variables.$base-line-height / 2); + padding-left: variables.$base-line-height; } &%default-ol { list-style-type: decimal; - margin-bottom: $base-line-height / 2; - padding-left: $base-line-height; + margin-bottom: calc(variables.$base-line-height / 2); + padding-left: variables.$base-line-height; } } dl { - margin-bottom: $base-line-height / 2; + margin-bottom: calc(variables.$base-line-height / 2); dt { font-weight: bold; - margin-top: $base-line-height / 2; + margin-top: calc(variables.$base-line-height / 2); } dd { diff --git a/source/_sass/base/_tables.scss b/source/_sass/base/_tables.scss index a759ad4..cdc677e 100644 --- a/source/_sass/base/_tables.scss +++ b/source/_sass/base/_tables.scss @@ -1,3 +1,5 @@ +@use "variables"; + /** * Copyright 2025 Google LLC * @@ -20,14 +22,16 @@ table { th { font-weight: bold; - padding: ($base-line-height / 2) 0; + padding: calc(variables.$base-line-height / 2) 0; text-align: left; } td { - padding: ($base-line-height / 2) 0; + padding: calc(variables.$base-line-height / 2) 0; } -tr, td, th { +tr, +td, +th { vertical-align: middle; } diff --git a/source/_sass/base/_typography.scss b/source/_sass/base/_typography.scss index 7738bb5..a2c9399 100644 --- a/source/_sass/base/_typography.scss +++ b/source/_sass/base/_typography.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../bourbon/css3/transition"; +@use "variables"; + /** * Copyright 2025 Google LLC * @@ -16,69 +20,75 @@ body { -webkit-font-smoothing: antialiased; - background-color: $base-background-color; - color: $base-font-color; - font-family: $base-font-family; - font-size: $base-font-size; - line-height: $unitless-line-height; + background-color: variables.$base-background-color; + color: variables.$base-font-color; + font-family: variables.$base-font-family; + font-size: variables.$base-font-size; + line-height: variables.$unitless-line-height; } -h1, h2, h3, h4, h5, h6 { - font-family: $header-font-family; - line-height: $header-line-height; +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: variables.$header-font-family; + line-height: variables.$header-line-height; margin: 0 0 0.5em 0; text-rendering: optimizeLegibility; // Fix the character spacing for headings } h1 { - font-size: $base-font-size * 2.25; // 16 * 2.25 = 36px + font-size: variables.$base-font-size * 2.25; // 16 * 2.25 = 36px } h2 { - font-size: $base-font-size * 2; // 16 * 2 = 32px + font-size: variables.$base-font-size * 2; // 16 * 2 = 32px } h3 { - font-size: $base-font-size * 1.75; // 16 * 1.75 = 28px + font-size: variables.$base-font-size * 1.75; // 16 * 1.75 = 28px } h4 { - font-size: $base-font-size * 1.5; // 16 * 1.5 = 24px + font-size: variables.$base-font-size * 1.5; // 16 * 1.5 = 24px } h5 { - font-size: $base-font-size * 1.25; // 16 * 1.25 = 20px + font-size: variables.$base-font-size * 1.25; // 16 * 1.25 = 20px } h6 { - font-size: $base-font-size; + font-size: variables.$base-font-size; } p { - margin: 0 0 ($base-line-height * .5); + margin: 0 0 (variables.$base-line-height * .5); } a { - @include transition(color 0.1s linear); - color: $base-link-color; + @include transition.transition(color 0.1s linear); + color: variables.$base-link-color; text-decoration: none; &:hover { - color: $hover-link-color; + color: variables.$hover-link-color; } - &:active, &:focus { - color: $hover-link-color; + &:active, + &:focus { + color: variables.$hover-link-color; outline: none; } } hr { - border-bottom: 1px solid $base-border-color; + border-bottom: 1px solid variables.$base-border-color; border-left: none; border-right: none; border-top: none; - margin: $base-line-height 0; + margin: variables.$base-line-height 0; } img { @@ -87,14 +97,14 @@ img { } blockquote { - border-left: 2px solid $base-border-color; - color: lighten($base-font-color, 15); - margin: $base-line-height 0; - padding-left: $base-line-height / 2; + border-left: 2px solid variables.$base-border-color; + color: color.adjust(variables.$base-font-color, $lightness: 15%); + margin: variables.$base-line-height 0; + padding-left: calc(variables.$base-line-height / 2); } cite { - color: lighten($base-font-color, 25); + color: color.adjust(variables.$base-font-color, $lightness: 25%); font-style: italic; &:before { diff --git a/source/_sass/base/_variables.scss b/source/_sass/base/_variables.scss index 6c752a5..deb6564 100644 --- a/source/_sass/base/_variables.scss +++ b/source/_sass/base/_variables.scss @@ -1,3 +1,7 @@ +@use "../bourbon/addons/font-family"; +@use "../bourbon/functions/px-to-em"; +@use "../colors"; + /** * Copyright 2025 Google LLC * @@ -13,11 +17,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +@use 'sass:color'; // Typography $sans-serif: 'Open Sans'; -$serif: $georgia; -$monospace: 'Inconsolata'; +$serif: font-family.$georgia; +font-family.$monospace: 'Inconsolata'; $base-font-family: $sans-serif; $header-font-family: $base-font-family; @@ -26,36 +31,36 @@ $base-font-size: 15px; $base-line-height: 1.4 * $base-font-size; $unitless-line-height: 1.4; // Strip units from line-height: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Prefer_unitless_numbers_for_line-height_values $header-line-height: 1.3; -$base-border-radius: em(3); +$base-border-radius: px-to-em.em(3); // Background Color $base-background-color: #fff; // Font Colors -$base-font-color: $gray-03; -$base-accent-color: $lightblue; +$base-font-color: colors.$gray-03; +$base-accent-color: colors.$lightblue; // Link Colors $base-link-color: $base-accent-color; -$hover-link-color: darken($base-accent-color, 15); +$hover-link-color: color.adjust($base-accent-color, $lightness: -15%); $base-button-color: $base-link-color; $hover-button-color: $hover-link-color; // Border color -$base-border-color: $gray-03; +$base-border-color: colors.$gray-03; // Flash Colors -$alert-color: $yellow; -$error-color: $red; -$notice-color: $yellow; -$success-color: $green; +$alert-color: colors.$yellow; +$error-color: colors.$red; +$notice-color: colors.$yellow; +$success-color: colors.$green; // Forms $form-border-color: $base-border-color; -$form-border-color-hover: darken($base-border-color, 10); +$form-border-color-hover: color.adjust($base-border-color, $lightness: -10%); $form-border-color-focus: $base-accent-color; $form-border-radius: $base-border-radius; -$form-box-shadow: inset 0 1px 3px rgba(0,0,0,0.06); -$form-box-shadow-focus: $form-box-shadow, 0 0 5px rgba(darken($form-border-color-focus, 5), 0.7); +$form-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); +$form-box-shadow-focus: $form-box-shadow, 0 0 5px rgba(color.adjust($form-border-color-focus, $lightness: -5%), 0.7); $form-font-size: $base-font-size; $form-font-family: $base-font-family; diff --git a/source/_sass/base/extends/_button.scss b/source/_sass/base/extends/_button.scss index 99a8e8e..0fcf962 100644 --- a/source/_sass/base/extends/_button.scss +++ b/source/_sass/base/extends/_button.scss @@ -1,3 +1,5 @@ +@use "../variables"; + /** * Copyright 2025 Google LLC * @@ -16,18 +18,18 @@ %button { -webkit-font-smoothing: antialiased; - background-color: $base-button-color; - border-radius: $base-border-radius; + background-color: variables.$base-button-color; + border-radius: variables.$base-border-radius; color: white; display: inline-block; - font-size: $base-font-size; + font-size: variables.$base-font-size; font-weight: bold; line-height: 1; padding: .75em 1em; text-decoration: none; &:hover { - background-color: $hover-button-color; + background-color: variables.$hover-button-color; color: white; } } diff --git a/source/_sass/base/extends/_clearfix.scss b/source/_sass/base/extends/_clearfix.scss index a0c9a92..097c6f5 100644 --- a/source/_sass/base/extends/_clearfix.scss +++ b/source/_sass/base/extends/_clearfix.scss @@ -1,3 +1,5 @@ +@use "../../bourbon/addons/clearfix"; + /** * Copyright 2025 Google LLC * @@ -15,5 +17,5 @@ */ %clearfix { - @include clearfix; + @include clearfix.clearfix; } diff --git a/source/_sass/base/extends/_hide-text.scss b/source/_sass/base/extends/_hide-text.scss index ef26a0a..69cf801 100644 --- a/source/_sass/base/extends/_hide-text.scss +++ b/source/_sass/base/extends/_hide-text.scss @@ -1,3 +1,5 @@ +@use "../../bourbon/addons/hide-text"; + /** * Copyright 2025 Google LLC * @@ -15,5 +17,5 @@ */ %hide-text { - @include hide-text; + @include hide-text.hide-text; } diff --git a/source/_sass/base/mixins/_flash.scss b/source/_sass/base/mixins/_flash.scss index bce4f40..f251d88 100644 --- a/source/_sass/base/mixins/_flash.scss +++ b/source/_sass/base/mixins/_flash.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "../variables"; + /** * Copyright 2025 Google LLC * @@ -16,16 +19,16 @@ @mixin flash($color) { background: $color; - color: darken($color, 60); + color: color.adjust($color, $lightness: -60%); font-weight: bold; - margin-bottom: $base-line-height / 2; - padding: $base-line-height / 2; + margin-bottom: calc(variables.$base-line-height / 2); + padding: calc(variables.$base-line-height / 2); a { - color: darken($color, 70); + color: color.adjust($color, $lightness: -70%); &:hover { - color: darken($color, 90); + color: color.adjust($color, $lightness: -90%); } } } diff --git a/source/_sass/bourbon/_bourbon.scss b/source/_sass/bourbon/_bourbon.scss index eea6e21..f3f7df0 100644 --- a/source/_sass/bourbon/_bourbon.scss +++ b/source/_sass/bourbon/_bourbon.scss @@ -1,79 +1,79 @@ // Settings -@import "settings/prefixer"; -@import "settings/px-to-em"; -@import "settings/asset-pipeline"; +@use "settings/prefixer"; +@use "settings/px-to-em"; +@use "settings/asset-pipeline"; // Custom Helpers -@import "helpers/convert-units"; -@import "helpers/gradient-positions-parser"; -@import "helpers/is-num"; -@import "helpers/linear-angle-parser"; -@import "helpers/linear-gradient-parser"; -@import "helpers/linear-positions-parser"; -@import "helpers/linear-side-corner-parser"; -@import "helpers/radial-arg-parser"; -@import "helpers/radial-positions-parser"; -@import "helpers/radial-gradient-parser"; -@import "helpers/render-gradients"; -@import "helpers/shape-size-stripper"; -@import "helpers/str-to-num"; +@use "helpers/convert-units"; +@use "helpers/gradient-positions-parser"; +@use "helpers/is-num"; +@use "helpers/linear-angle-parser"; +@use "helpers/linear-gradient-parser"; +@use "helpers/linear-positions-parser"; +@use "helpers/linear-side-corner-parser"; +@use "helpers/radial-arg-parser"; +@use "helpers/radial-positions-parser"; +@use "helpers/radial-gradient-parser"; +@use "helpers/render-gradients"; +@use "helpers/shape-size-stripper"; +@use "helpers/str-to-num"; // Custom Functions -@import "functions/assign"; -@import "functions/color-lightness"; -@import "functions/flex-grid"; -@import "functions/golden-ratio"; -@import "functions/grid-width"; -@import "functions/modular-scale"; -@import "functions/px-to-em"; -@import "functions/px-to-rem"; -@import "functions/strip-units"; -@import "functions/tint-shade"; -@import "functions/transition-property-name"; -@import "functions/unpack"; +@use "functions/assign"; +@use "functions/color-lightness"; +@use "functions/flex-grid"; +@use "functions/golden-ratio"; +@use "functions/grid-width"; +@use "functions/modular-scale"; +@use "functions/px-to-em" as px-to-em2; +@use "functions/px-to-rem"; +@use "functions/strip-units"; +@use "functions/tint-shade"; +@use "functions/transition-property-name"; +@use "functions/unpack"; // CSS3 Mixins -@import "css3/animation"; -@import "css3/appearance"; -@import "css3/backface-visibility"; -@import "css3/background"; -@import "css3/background-image"; -@import "css3/border-image"; -@import "css3/border-radius"; -@import "css3/box-sizing"; -@import "css3/calc"; -@import "css3/columns"; -@import "css3/filter"; -@import "css3/flex-box"; -@import "css3/font-face"; -@import "css3/font-feature-settings"; -@import "css3/hyphens"; -@import "css3/hidpi-media-query"; -@import "css3/image-rendering"; -@import "css3/keyframes"; -@import "css3/linear-gradient"; -@import "css3/perspective"; -@import "css3/radial-gradient"; -@import "css3/transform"; -@import "css3/transition"; -@import "css3/user-select"; -@import "css3/placeholder"; +@use "css3/animation"; +@use "css3/appearance"; +@use "css3/backface-visibility"; +@use "css3/background"; +@use "css3/background-image"; +@use "css3/border-image"; +@use "css3/border-radius"; +@use "css3/box-sizing"; +@use "css3/calc"; +@use "css3/columns"; +@use "css3/filter"; +@use "css3/flex-box"; +@use "css3/font-face"; +@use "css3/font-feature-settings"; +@use "css3/hyphens"; +@use "css3/hidpi-media-query"; +@use "css3/image-rendering"; +@use "css3/keyframes"; +@use "css3/linear-gradient"; +@use "css3/perspective"; +@use "css3/radial-gradient"; +@use "css3/transform"; +@use "css3/transition"; +@use "css3/user-select"; +@use "css3/placeholder"; // Addons & other mixins -@import "addons/button"; -@import "addons/clearfix"; -@import "addons/directional-values"; -@import "addons/ellipsis"; -@import "addons/font-family"; -@import "addons/hide-text"; -@import "addons/html5-input-types"; -@import "addons/position"; -@import "addons/prefixer"; -@import "addons/retina-image"; -@import "addons/size"; -@import "addons/timing-functions"; -@import "addons/triangle"; -@import "addons/word-wrap"; +@use "addons/button"; +@use "addons/clearfix"; +@use "addons/directional-values"; +@use "addons/ellipsis"; +@use "addons/font-family"; +@use "addons/hide-text"; +@use "addons/html5-input-types"; +@use "addons/position"; +@use "addons/prefixer" as prefixer2; +@use "addons/retina-image"; +@use "addons/size"; +@use "addons/timing-functions"; +@use "addons/triangle"; +@use "addons/word-wrap"; // Soon to be deprecated Mixins -@import "bourbon-deprecated-upcoming"; +@use "bourbon-deprecated-upcoming"; diff --git a/source/_sass/bourbon/addons/_button.scss b/source/_sass/bourbon/addons/_button.scss index 14a89e4..0d037be 100644 --- a/source/_sass/bourbon/addons/_button.scss +++ b/source/_sass/bourbon/addons/_button.scss @@ -1,10 +1,15 @@ +@use "sass:color"; +@use "sass:meta"; +@use "../css3/linear-gradient"; +@use "../functions/color-lightness"; + @mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) { - @if type-of($style) == string and type-of($base-color) == color { + @if meta.type-of($style) == string and meta.type-of($base-color) == color { @include buttonstyle($style, $base-color, $text-size, $padding); } - @if type-of($style) == string and type-of($base-color) == number { + @if meta.type-of($style) == string and meta.type-of($base-color) == number { $padding: $text-size; $text-size: $base-color; $base-color: #4294f0; @@ -16,13 +21,13 @@ @include buttonstyle($style, $base-color, $text-size, $padding); } - @if type-of($style) == color and type-of($base-color) == color { + @if meta.type-of($style) == color and meta.type-of($base-color) == color { $base-color: $style; $style: simple; @include buttonstyle($style, $base-color, $text-size, $padding); } - @if type-of($style) == color and type-of($base-color) == number { + @if meta.type-of($style) == color and meta.type-of($base-color) == number { $padding: $text-size; $text-size: $base-color; $base-color: $style; @@ -35,7 +40,7 @@ @include buttonstyle($style, $base-color, $text-size, $padding); } - @if type-of($style) == number { + @if meta.type-of($style) == number { $padding: $base-color; $text-size: $style; $base-color: #4294f0; @@ -59,19 +64,19 @@ //************************************************************************// @mixin buttonstyle($type, $b-color, $t-size, $pad) { // Grayscale button - @if $type == simple and $b-color == grayscale($b-color) { + @if $type == simple and $b-color == color.grayscale($b-color) { @include simple($b-color, true, $t-size, $pad); } - @if $type == shiny and $b-color == grayscale($b-color) { + @if $type == shiny and $b-color == color.grayscale($b-color) { @include shiny($b-color, true, $t-size, $pad); } - @if $type == pill and $b-color == grayscale($b-color) { + @if $type == pill and $b-color == color.grayscale($b-color) { @include pill($b-color, true, $t-size, $pad); } - @if $type == flat and $b-color == grayscale($b-color) { + @if $type == flat and $b-color == color.grayscale($b-color) { @include flat($b-color, true, $t-size, $pad); } @@ -98,21 +103,21 @@ //************************************************************************// @mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { $color: hsl(0, 0, 100%); - $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); - $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); - $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); - $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); + $border: color.adjust($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow: color.adjust($base-color, $saturation: -8%, $lightness: 15%); + $stop-gradient: color.adjust($base-color, $saturation: 9%, $lightness: -11%); + $text-shadow: color.adjust($base-color, $saturation: 15%, $lightness: -18%); - @if is-light($base-color) { + @if color-lightness.is-light($base-color) { $color: hsl(0, 0, 20%); - $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + $text-shadow: color.adjust($base-color, $saturation: 10%, $lightness: 4%); } @if $grayscale == true { - $border: grayscale($border); - $inset-shadow: grayscale($inset-shadow); - $stop-gradient: grayscale($stop-gradient); - $text-shadow: grayscale($text-shadow); + $border: color.grayscale($border); + $inset-shadow: color.grayscale($inset-shadow); + $stop-gradient: color.grayscale($stop-gradient); + $text-shadow: color.grayscale($text-shadow); } border: 1px solid $border; @@ -122,36 +127,36 @@ display: inline-block; font-size: $textsize; font-weight: bold; - @include linear-gradient ($base-color, $stop-gradient); + @include linear-gradient.linear-gradient ($base-color, $stop-gradient); padding: $padding; text-decoration: none; text-shadow: 0 1px 0 $text-shadow; background-clip: padding-box; &:hover:not(:disabled) { - $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); - $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); - $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); + $base-color-hover: color.adjust($base-color, $saturation: -4%, $lightness: -5%); + $inset-shadow-hover: color.adjust($base-color, $saturation: -7%, $lightness: 5%); + $stop-gradient-hover: color.adjust($base-color, $saturation: 8%, $lightness: -14%); @if $grayscale == true { - $base-color-hover: grayscale($base-color-hover); - $inset-shadow-hover: grayscale($inset-shadow-hover); - $stop-gradient-hover: grayscale($stop-gradient-hover); + $base-color-hover: color.grayscale($base-color-hover); + $inset-shadow-hover: color.grayscale($inset-shadow-hover); + $stop-gradient-hover: color.grayscale($stop-gradient-hover); } box-shadow: inset 0 1px 0 0 $inset-shadow-hover; cursor: pointer; - @include linear-gradient ($base-color-hover, $stop-gradient-hover); + @include linear-gradient.linear-gradient ($base-color-hover, $stop-gradient-hover); } &:active:not(:disabled), &:focus:not(:disabled) { - $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); - $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); + $border-active: color.adjust($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow-active: color.adjust($base-color, $saturation: 7%, $lightness: -17%); @if $grayscale == true { - $border-active: grayscale($border-active); - $inset-shadow-active: grayscale($inset-shadow-active); + $border-active: color.grayscale($border-active); + $inset-shadow-active: color.grayscale($inset-shadow-active); } border: 1px solid $border-active; @@ -164,27 +169,27 @@ //************************************************************************// @mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { $color: hsl(0, 0, 100%); - $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); - $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); - $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); - $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); - $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); - $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); - $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); - - @if is-light($base-color) { + $border: color.adjust($base-color, $red: -117, $green: -111, $blue: -81); + $border-bottom: color.adjust($base-color, $red: -126, $green: -127, $blue: -122); + $fourth-stop: color.adjust($base-color, $red: -79, $green: -70, $blue: -46); + $inset-shadow: color.adjust($base-color, $red: 37, $green: 29, $blue: 12); + $second-stop: color.adjust($base-color, $red: -56, $green: -50, $blue: -33); + $text-shadow: color.adjust($base-color, $red: -140, $green: -141, $blue: -114); + $third-stop: color.adjust($base-color, $red: -86, $green: -75, $blue: -48); + + @if color-lightness.is-light($base-color) { $color: hsl(0, 0, 20%); - $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + $text-shadow: color.adjust($base-color, $saturation: 10%, $lightness: 4%); } @if $grayscale == true { - $border: grayscale($border); - $border-bottom: grayscale($border-bottom); - $fourth-stop: grayscale($fourth-stop); - $inset-shadow: grayscale($inset-shadow); - $second-stop: grayscale($second-stop); - $text-shadow: grayscale($text-shadow); - $third-stop: grayscale($third-stop); + $border: color.grayscale($border); + $border-bottom: color.grayscale($border-bottom); + $fourth-stop: color.grayscale($fourth-stop); + $inset-shadow: color.grayscale($inset-shadow); + $second-stop: color.grayscale($second-stop); + $text-shadow: color.grayscale($text-shadow); + $third-stop: color.grayscale($third-stop); } border: 1px solid $border; @@ -195,27 +200,27 @@ display: inline-block; font-size: $textsize; font-weight: bold; - @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); + @include linear-gradient.linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); padding: $padding; text-align: center; text-decoration: none; text-shadow: 0 -1px 1px $text-shadow; &:hover:not(:disabled) { - $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); - $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); - $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); - $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); + $first-stop-hover: color.adjust($base-color, $red: -13, $green: -15, $blue: -18); + $second-stop-hover: color.adjust($base-color, $red: -66, $green: -62, $blue: -51); + $third-stop-hover: color.adjust($base-color, $red: -93, $green: -85, $blue: -66); + $fourth-stop-hover: color.adjust($base-color, $red: -86, $green: -80, $blue: -63); @if $grayscale == true { - $first-stop-hover: grayscale($first-stop-hover); - $second-stop-hover: grayscale($second-stop-hover); - $third-stop-hover: grayscale($third-stop-hover); - $fourth-stop-hover: grayscale($fourth-stop-hover); + $first-stop-hover: color.grayscale($first-stop-hover); + $second-stop-hover: color.grayscale($second-stop-hover); + $third-stop-hover: color.grayscale($third-stop-hover); + $fourth-stop-hover: color.grayscale($fourth-stop-hover); } cursor: pointer; - @include linear-gradient(top, $first-stop-hover 0%, + @include linear-gradient.linear-gradient(top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%); @@ -223,10 +228,10 @@ &:active:not(:disabled), &:focus:not(:disabled) { - $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); + $inset-shadow-active: color.adjust($base-color, $red: -111, $green: -116, $blue: -122); @if $grayscale == true { - $inset-shadow-active: grayscale($inset-shadow-active); + $inset-shadow-active: color.grayscale($inset-shadow-active); } box-shadow: inset 0 0 20px 0 $inset-shadow-active; @@ -238,25 +243,25 @@ //************************************************************************// @mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { $color: hsl(0, 0, 100%); - $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); - $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); - $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); - $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); - $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); - $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); - - @if is-light($base-color) { + $border-bottom: color.adjust($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); + $border-sides: color.adjust($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); + $border-top: color.adjust($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); + $inset-shadow: color.adjust($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); + $stop-gradient: color.adjust($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); + $text-shadow: color.adjust($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); + + @if color-lightness.is-light($base-color) { $color: hsl(0, 0, 20%); - $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + $text-shadow: color.adjust($base-color, $saturation: 10%, $lightness: 4%); } @if $grayscale == true { - $border-bottom: grayscale($border-bottom); - $border-sides: grayscale($border-sides); - $border-top: grayscale($border-top); - $inset-shadow: grayscale($inset-shadow); - $stop-gradient: grayscale($stop-gradient); - $text-shadow: grayscale($text-shadow); + $border-bottom: color.grayscale($border-bottom); + $border-sides: color.grayscale($border-sides); + $border-top: color.grayscale($border-top); + $inset-shadow: color.grayscale($inset-shadow); + $stop-gradient: color.grayscale($stop-gradient); + $text-shadow: color.grayscale($text-shadow); } border: 1px solid $border-top; @@ -268,7 +273,7 @@ font-size: $textsize; font-weight: normal; line-height: 1; - @include linear-gradient ($base-color, $stop-gradient); + @include linear-gradient.linear-gradient ($base-color, $stop-gradient); padding: $padding; text-align: center; text-decoration: none; @@ -276,47 +281,47 @@ background-clip: padding-box; &:hover:not(:disabled) { - $base-color-hover: adjust-color($base-color, $lightness: -4.5%); - $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); - $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); - $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); - $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); - $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); - $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); + $base-color-hover: color.adjust($base-color, $lightness: -4.5%); + $border-bottom: color.adjust($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); + $border-sides: color.adjust($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); + $border-top: color.adjust($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); + $inset-shadow-hover: color.adjust($base-color, $saturation: -1%, $lightness: 3%); + $stop-gradient-hover: color.adjust($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); + $text-shadow-hover: color.adjust($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); @if $grayscale == true { - $base-color-hover: grayscale($base-color-hover); - $border-bottom: grayscale($border-bottom); - $border-sides: grayscale($border-sides); - $border-top: grayscale($border-top); - $inset-shadow-hover: grayscale($inset-shadow-hover); - $stop-gradient-hover: grayscale($stop-gradient-hover); - $text-shadow-hover: grayscale($text-shadow-hover); + $base-color-hover: color.grayscale($base-color-hover); + $border-bottom: color.grayscale($border-bottom); + $border-sides: color.grayscale($border-sides); + $border-top: color.grayscale($border-top); + $inset-shadow-hover: color.grayscale($inset-shadow-hover); + $stop-gradient-hover: color.grayscale($stop-gradient-hover); + $text-shadow-hover: color.grayscale($text-shadow-hover); } border: 1px solid $border-top; border-color: $border-top $border-sides $border-bottom; box-shadow: inset 0 1px 0 0 $inset-shadow-hover; cursor: pointer; - @include linear-gradient ($base-color-hover, $stop-gradient-hover); + @include linear-gradient.linear-gradient ($base-color-hover, $stop-gradient-hover); text-shadow: 0 -1px 1px $text-shadow-hover; background-clip: padding-box; } &:active:not(:disabled), &:focus:not(:disabled) { - $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); - $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); - $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); - $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); - $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); + $active-color: color.adjust($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); + $border-active: color.adjust($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); + $border-bottom-active: color.adjust($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); + $inset-shadow-active: color.adjust($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); + $text-shadow-active: color.adjust($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); @if $grayscale == true { - $active-color: grayscale($active-color); - $border-active: grayscale($border-active); - $border-bottom-active: grayscale($border-bottom-active); - $inset-shadow-active: grayscale($inset-shadow-active); - $text-shadow-active: grayscale($text-shadow-active); + $active-color: color.grayscale($active-color); + $border-active: color.grayscale($border-active); + $border-bottom-active: color.grayscale($border-bottom-active); + $inset-shadow-active: color.grayscale($inset-shadow-active); + $text-shadow-active: color.grayscale($text-shadow-active); } background: $active-color; @@ -334,7 +339,7 @@ @mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { $color: hsl(0, 0, 100%); - @if is-light($base-color) { + @if color-lightness.is-light($base-color) { $color: hsl(0, 0, 20%); } @@ -350,10 +355,10 @@ background-clip: padding-box; &:hover:not(:disabled){ - $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%); + $base-color-hover: color.adjust($base-color, $saturation: 4%, $lightness: 5%); @if $grayscale == true { - $base-color-hover: grayscale($base-color-hover); + $base-color-hover: color.grayscale($base-color-hover); } background-color: $base-color-hover; @@ -362,10 +367,10 @@ &:active:not(:disabled), &:focus:not(:disabled) { - $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%); + $base-color-active: color.adjust($base-color, $saturation: -4%, $lightness: -5%); @if $grayscale == true { - $base-color-active: grayscale($base-color-active); + $base-color-active: color.grayscale($base-color-active); } background-color: $base-color-active; diff --git a/source/_sass/bourbon/addons/_directional-values.scss b/source/_sass/bourbon/addons/_directional-values.scss index 742f103..da0177c 100644 --- a/source/_sass/bourbon/addons/_directional-values.scss +++ b/source/_sass/bourbon/addons/_directional-values.scss @@ -1,3 +1,4 @@ +@use "sass:list"; // directional-property mixins are shorthands // for writing properties like the following // @@ -21,10 +22,10 @@ @function collapse-directionals($vals) { $output: null; - $A: nth( $vals, 1 ); - $B: if( length($vals) < 2, $A, nth($vals, 2)); - $C: if( length($vals) < 3, $A, nth($vals, 3)); - $D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) )); + $A: list.nth( $vals, 1 ); + $B: if( list.length($vals) < 2, $A, list.nth($vals, 2)); + $C: if( list.length($vals) < 3, $A, list.nth($vals, 3)); + $D: if( list.length($vals) < 2, $A, list.nth($vals, if( list.length($vals) < 4, 2, 4) )); @if $A == 0 { $A: 0 } @if $B == 0 { $B: 0 } @@ -60,28 +61,28 @@ $vals: collapse-directionals($vals); @if contains-falsy($vals) { - @if nth($vals, 1) { #{$top}: nth($vals, 1); } + @if list.nth($vals, 1) { #{$top}: list.nth($vals, 1); } - @if length($vals) == 1 { - @if nth($vals, 1) { #{$right}: nth($vals, 1); } + @if list.length($vals) == 1 { + @if list.nth($vals, 1) { #{$right}: list.nth($vals, 1); } } @else { - @if nth($vals, 2) { #{$right}: nth($vals, 2); } + @if list.nth($vals, 2) { #{$right}: list.nth($vals, 2); } } // prop: top/bottom right/left - @if length($vals) == 2 { - @if nth($vals, 1) { #{$bottom}: nth($vals, 1); } - @if nth($vals, 2) { #{$left}: nth($vals, 2); } + @if list.length($vals) == 2 { + @if list.nth($vals, 1) { #{$bottom}: list.nth($vals, 1); } + @if list.nth($vals, 2) { #{$left}: list.nth($vals, 2); } // prop: top right/left bottom - } @else if length($vals) == 3 { - @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } - @if nth($vals, 2) { #{$left}: nth($vals, 2); } + } @else if list.length($vals) == 3 { + @if list.nth($vals, 3) { #{$bottom}: list.nth($vals, 3); } + @if list.nth($vals, 2) { #{$left}: list.nth($vals, 2); } // prop: top right bottom left - } @else if length($vals) == 4 { - @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } - @if nth($vals, 4) { #{$left}: nth($vals, 4); } + } @else if list.length($vals) == 4 { + @if list.nth($vals, 3) { #{$bottom}: list.nth($vals, 3); } + @if list.nth($vals, 4) { #{$left}: list.nth($vals, 4); } } // prop: top/right/bottom/left diff --git a/source/_sass/bourbon/addons/_html5-input-types.scss b/source/_sass/bourbon/addons/_html5-input-types.scss index 9e9324a..b026e47 100644 --- a/source/_sass/bourbon/addons/_html5-input-types.scss +++ b/source/_sass/bourbon/addons/_html5-input-types.scss @@ -1,3 +1,5 @@ +@use "../functions/assign"; + //************************************************************************// // Generate a variable ($all-text-inputs) with a list of all html5 // input types that have a text-based input, excluding textarea. @@ -22,15 +24,15 @@ $inputs-list: 'input[type="email"]', // Bare inputs //************************************************************************// -$all-text-inputs: assign-inputs($inputs-list); +$all-text-inputs: assign.assign-inputs($inputs-list); // Hover Pseudo-class //************************************************************************// -$all-text-inputs-hover: assign-inputs($inputs-list, hover); +$all-text-inputs-hover: assign.assign-inputs($inputs-list, hover); // Focus Pseudo-class //************************************************************************// -$all-text-inputs-focus: assign-inputs($inputs-list, focus); +$all-text-inputs-focus: assign.assign-inputs($inputs-list, focus); @@ -57,19 +59,19 @@ $inputs-button-list: 'input[type="button"]', // Bare inputs //************************************************************************// -$all-button-inputs: assign-inputs($inputs-button-list); +$all-button-inputs: assign.assign-inputs($inputs-button-list); // Hover Pseudo-class //************************************************************************// -$all-button-inputs-hover: assign-inputs($inputs-button-list, hover); +$all-button-inputs-hover: assign.assign-inputs($inputs-button-list, hover); // Focus Pseudo-class //************************************************************************// -$all-button-inputs-focus: assign-inputs($inputs-button-list, focus); +$all-button-inputs-focus: assign.assign-inputs($inputs-button-list, focus); // Active Pseudo-class //************************************************************************// -$all-button-inputs-active: assign-inputs($inputs-button-list, active); +$all-button-inputs-active: assign.assign-inputs($inputs-button-list, active); diff --git a/source/_sass/bourbon/addons/_position.scss b/source/_sass/bourbon/addons/_position.scss index 7de7518..d59f44f 100644 --- a/source/_sass/bourbon/addons/_position.scss +++ b/source/_sass/bourbon/addons/_position.scss @@ -1,32 +1,36 @@ +@use "sass:list"; +@use "sass:meta"; +@use "../functions/unpack"; + @mixin position ($position: relative, $coordinates: null null null null) { - @if type-of($position) == list { + @if meta.type-of($position) == list { $coordinates: $position; $position: relative; } - $coordinates: unpack($coordinates); + $coordinates: unpack.unpack($coordinates); - $top: nth($coordinates, 1); - $right: nth($coordinates, 2); - $bottom: nth($coordinates, 3); - $left: nth($coordinates, 4); + $top: list.nth($coordinates, 1); + $right: list.nth($coordinates, 2); + $bottom: list.nth($coordinates, 3); + $left: list.nth($coordinates, 4); position: $position; - @if ($top and $top == auto) or (type-of($top) == number) { + @if ($top and $top == auto) or (meta.type-of($top) == number) { top: $top; } - @if ($right and $right == auto) or (type-of($right) == number) { + @if ($right and $right == auto) or (meta.type-of($right) == number) { right: $right; } - @if ($bottom and $bottom == auto) or (type-of($bottom) == number) { + @if ($bottom and $bottom == auto) or (meta.type-of($bottom) == number) { bottom: $bottom; } - @if ($left and $left == auto) or (type-of($left) == number) { + @if ($left and $left == auto) or (meta.type-of($left) == number) { left: $left; } } diff --git a/source/_sass/bourbon/addons/_prefixer.scss b/source/_sass/bourbon/addons/_prefixer.scss index c32f502..c056a46 100644 --- a/source/_sass/bourbon/addons/_prefixer.scss +++ b/source/_sass/bourbon/addons/_prefixer.scss @@ -1,3 +1,5 @@ +@use "../settings/prefixer"; + //************************************************************************// // Example: @include prefixer(border-radius, $radii, webkit ms spec); //************************************************************************// @@ -6,27 +8,27 @@ @mixin prefixer ($property, $value, $prefixes) { @each $prefix in $prefixes { @if $prefix == webkit { - @if $prefix-for-webkit { + @if prefixer.$prefix-for-webkit { -webkit-#{$property}: $value; } } @else if $prefix == moz { - @if $prefix-for-mozilla { + @if prefixer.$prefix-for-mozilla { -moz-#{$property}: $value; } } @else if $prefix == ms { - @if $prefix-for-microsoft { + @if prefixer.$prefix-for-microsoft { -ms-#{$property}: $value; } } @else if $prefix == o { - @if $prefix-for-opera { + @if prefixer.$prefix-for-opera { -o-#{$property}: $value; } } @else if $prefix == spec { - @if $prefix-for-spec { + @if prefixer.$prefix-for-spec { #{$property}: $value; } } @@ -37,9 +39,9 @@ } @mixin disable-prefix-for-all() { - $prefix-for-webkit: false !global; - $prefix-for-mozilla: false !global; - $prefix-for-microsoft: false !global; - $prefix-for-opera: false !global; - $prefix-for-spec: false !global; + prefixer.$prefix-for-webkit: false; + prefixer.$prefix-for-mozilla: false; + prefixer.$prefix-for-microsoft: false; + prefixer.$prefix-for-opera: false; + prefixer.$prefix-for-spec: false; } diff --git a/source/_sass/bourbon/addons/_retina-image.scss b/source/_sass/bourbon/addons/_retina-image.scss index 3995c19..c2a1365 100644 --- a/source/_sass/bourbon/addons/_retina-image.scss +++ b/source/_sass/bourbon/addons/_retina-image.scss @@ -1,3 +1,5 @@ +@use "../css3/hidpi-media-query"; + @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) { @if $asset-pipeline { background-image: image-url("#{$filename}.#{$extension}"); @@ -6,7 +8,7 @@ background-image: url("#{$filename}.#{$extension}"); } - @include hidpi { + @include hidpi-media-query.hidpi { @if $asset-pipeline { @if $retina-filename { background-image: image-url("#{$retina-filename}.#{$extension}"); diff --git a/source/_sass/bourbon/addons/_size.scss b/source/_sass/bourbon/addons/_size.scss index a865379..a076580 100644 --- a/source/_sass/bourbon/addons/_size.scss +++ b/source/_sass/bourbon/addons/_size.scss @@ -1,16 +1,19 @@ +@use "sass:list"; +@use "sass:math"; +@use "sass:meta"; @mixin size($size) { - $height: nth($size, 1); + $height: list.nth($size, 1); $width: $height; - @if length($size) > 1 { - $height: nth($size, 2); + @if list.length($size) > 1 { + $height: list.nth($size, 2); } - @if $height == auto or (type-of($height) == number and not unitless($height)) { + @if $height == auto or (meta.type-of($height) == number and not math.is-unitless($height)) { height: $height; } - @if $width == auto or (type-of($width) == number and not unitless($width)) { + @if $width == auto or (meta.type-of($width) == number and not math.is-unitless($width)) { width: $width; } } diff --git a/source/_sass/bourbon/addons/_triangle.scss b/source/_sass/bourbon/addons/_triangle.scss index 573954e..7016f9c 100644 --- a/source/_sass/bourbon/addons/_triangle.scss +++ b/source/_sass/bourbon/addons/_triangle.scss @@ -1,81 +1,92 @@ +@use "sass:list"; @mixin triangle ($size, $color, $direction) { height: 0; width: 0; - $width: nth($size, 1); - $height: nth($size, length($size)); + $width: list.nth($size, 1); + $height: list.nth($size, list.length($size)); - $foreground-color: nth($color, 1); - $background-color: if(length($color) == 2, nth($color, 2), transparent); + $foreground-color: list.nth($color, 1); + $background-color: if(list.length($color)==2, list.nth($color, 2), transparent); - @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { + @if ($direction ==up) or ($direction ==down) or ($direction ==right) or ($direction ==left) { - $width: $width / 2; - $height: if(length($size) > 1, $height, $height/2); + $width: calc($width / 2); + $height: if(list.length($size) > 1, $height, $height/2); - @if $direction == up { + @if $direction ==up { border-left: $width solid $background-color; border-right: $width solid $background-color; border-bottom: $height solid $foreground-color; - } @else if $direction == right { + } + + @else if $direction ==right { border-top: $width solid $background-color; border-bottom: $width solid $background-color; border-left: $height solid $foreground-color; - } @else if $direction == down { + } + + @else if $direction ==down { border-left: $width solid $background-color; border-right: $width solid $background-color; border-top: $height solid $foreground-color; - } @else if $direction == left { + } + + @else if $direction ==left { border-top: $width solid $background-color; border-bottom: $width solid $background-color; border-right: $height solid $foreground-color; } } - @else if ($direction == up-right) or ($direction == up-left) { + @else if ($direction ==up-right) or ($direction ==up-left) { border-top: $height solid $foreground-color; - @if $direction == up-right { - border-left: $width solid $background-color; + @if $direction ==up-right { + border-left: $width solid $background-color; + + } - } @else if $direction == up-left { + @else if $direction ==up-left { border-right: $width solid $background-color; } } - @else if ($direction == down-right) or ($direction == down-left) { + @else if ($direction ==down-right) or ($direction ==down-left) { border-bottom: $height solid $foreground-color; - @if $direction == down-right { - border-left: $width solid $background-color; + @if $direction ==down-right { + border-left: $width solid $background-color; + + } - } @else if $direction == down-left { + @else if $direction ==down-left { border-right: $width solid $background-color; } } - @else if ($direction == inset-up) { + @else if ($direction ==inset-up) { border-width: $height $width; border-style: solid; border-color: $background-color $background-color $foreground-color; } - @else if ($direction == inset-down) { + @else if ($direction ==inset-down) { border-width: $height $width; border-style: solid; border-color: $foreground-color $background-color $background-color; } - @else if ($direction == inset-right) { + @else if ($direction ==inset-right) { border-width: $width $height; border-style: solid; border-color: $background-color $background-color $background-color $foreground-color; } - @else if ($direction == inset-left) { + @else if ($direction ==inset-left) { border-width: $width $height; border-style: solid; border-color: $background-color $foreground-color $background-color $background-color; diff --git a/source/_sass/bourbon/css3/_animation.scss b/source/_sass/bourbon/css3/_animation.scss index 08c3dbf..310637e 100644 --- a/source/_sass/bourbon/css3/_animation.scss +++ b/source/_sass/bourbon/css3/_animation.scss @@ -1,52 +1,54 @@ +@use "../addons/prefixer"; + // http://www.w3.org/TR/css3-animations/#the-animation-name-property- // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. // Official animation shorthand property. @mixin animation ($animations...) { - @include prefixer(animation, $animations, webkit moz spec); + @include prefixer.prefixer(animation, $animations, webkit moz spec); } // Individual Animation Properties @mixin animation-name ($names...) { - @include prefixer(animation-name, $names, webkit moz spec); + @include prefixer.prefixer(animation-name, $names, webkit moz spec); } @mixin animation-duration ($times...) { - @include prefixer(animation-duration, $times, webkit moz spec); + @include prefixer.prefixer(animation-duration, $times, webkit moz spec); } @mixin animation-timing-function ($motions...) { // ease | linear | ease-in | ease-out | ease-in-out - @include prefixer(animation-timing-function, $motions, webkit moz spec); + @include prefixer.prefixer(animation-timing-function, $motions, webkit moz spec); } @mixin animation-iteration-count ($values...) { // infinite | - @include prefixer(animation-iteration-count, $values, webkit moz spec); + @include prefixer.prefixer(animation-iteration-count, $values, webkit moz spec); } @mixin animation-direction ($directions...) { // normal | alternate - @include prefixer(animation-direction, $directions, webkit moz spec); + @include prefixer.prefixer(animation-direction, $directions, webkit moz spec); } @mixin animation-play-state ($states...) { // running | paused - @include prefixer(animation-play-state, $states, webkit moz spec); + @include prefixer.prefixer(animation-play-state, $states, webkit moz spec); } @mixin animation-delay ($times...) { - @include prefixer(animation-delay, $times, webkit moz spec); + @include prefixer.prefixer(animation-delay, $times, webkit moz spec); } @mixin animation-fill-mode ($modes...) { // none | forwards | backwards | both - @include prefixer(animation-fill-mode, $modes, webkit moz spec); + @include prefixer.prefixer(animation-fill-mode, $modes, webkit moz spec); } diff --git a/source/_sass/bourbon/css3/_appearance.scss b/source/_sass/bourbon/css3/_appearance.scss index 3eb16e4..828e8bc 100644 --- a/source/_sass/bourbon/css3/_appearance.scss +++ b/source/_sass/bourbon/css3/_appearance.scss @@ -1,3 +1,5 @@ +@use "../addons/prefixer"; + @mixin appearance ($value) { - @include prefixer(appearance, $value, webkit moz ms o spec); + @include prefixer.prefixer(appearance, $value, webkit moz ms o spec); } diff --git a/source/_sass/bourbon/css3/_backface-visibility.scss b/source/_sass/bourbon/css3/_backface-visibility.scss index 1161fe6..15a2154 100644 --- a/source/_sass/bourbon/css3/_backface-visibility.scss +++ b/source/_sass/bourbon/css3/_backface-visibility.scss @@ -1,6 +1,8 @@ +@use "../addons/prefixer"; + //************************************************************************// // Backface-visibility mixin //************************************************************************// @mixin backface-visibility($visibility) { - @include prefixer(backface-visibility, $visibility, webkit spec); + @include prefixer.prefixer(backface-visibility, $visibility, webkit spec); } diff --git a/source/_sass/bourbon/css3/_background-image.scss b/source/_sass/bourbon/css3/_background-image.scss index 6abe88b..d57be5d 100644 --- a/source/_sass/bourbon/css3/_background-image.scss +++ b/source/_sass/bourbon/css3/_background-image.scss @@ -1,3 +1,10 @@ +@use "sass:list"; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "../helpers/linear-gradient-parser"; +@use "../helpers/radial-gradient-parser"; + //************************************************************************// // Background-image property for adding multiple background images with // gradients, or for stringing multiple gradients together. @@ -11,9 +18,9 @@ $webkit-image: (); $spec-image: (); - @if (type-of($image) == string) { - $url-str: str-slice($image, 0, 3); - $gradient-type: str-slice($image, 0, 6); + @if (meta.type-of($image) == string) { + $url-str: string.slice($image, 0, 3); + $gradient-type: string.slice($image, 0, 6); @if $url-str == "url" { $webkit-image: $image; @@ -21,20 +28,20 @@ } @else if $gradient-type == "linear" { - $gradients: _linear-gradient-parser($image); - $webkit-image: map-get($gradients, webkit-image); - $spec-image: map-get($gradients, spec-image); + $gradients: linear-gradient-parser.linear-gradient-parser($image); + $webkit-image: map.get($gradients, webkit-image); + $spec-image: map.get($gradients, spec-image); } @else if $gradient-type == "radial" { - $gradients: _radial-gradient-parser($image); - $webkit-image: map-get($gradients, webkit-image); - $spec-image: map-get($gradients, spec-image); + $gradients: radial-gradient-parser.radial-gradient-parser($image); + $webkit-image: map.get($gradients, webkit-image); + $spec-image: map.get($gradients, spec-image); } } - $webkit-images: append($webkit-images, $webkit-image, comma); - $spec-images: append($spec-images, $spec-image, comma); + $webkit-images: list.append($webkit-images, $webkit-image, comma); + $spec-images: list.append($spec-images, $spec-image, comma); } background-image: $webkit-images; diff --git a/source/_sass/bourbon/css3/_background.scss b/source/_sass/bourbon/css3/_background.scss index 9bce930..55fbf4a 100644 --- a/source/_sass/bourbon/css3/_background.scss +++ b/source/_sass/bourbon/css3/_background.scss @@ -1,3 +1,10 @@ +@use "sass:list"; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "../helpers/linear-gradient-parser"; +@use "../helpers/radial-gradient-parser"; + //************************************************************************// // Background property for adding multiple backgrounds using shorthand // notation. @@ -10,13 +17,13 @@ @each $background in $backgrounds { $webkit-background: (); $spec-background: (); - $background-type: type-of($background); + $background-type: meta.type-of($background); @if $background-type == string or list { - $background-str: if($background-type == list, nth($background, 1), $background); + $background-str: if($background-type == list, list.nth($background, 1), $background); - $url-str: str-slice($background-str, 0, 3); - $gradient-type: str-slice($background-str, 0, 6); + $url-str: string.slice($background-str, 0, 3); + $gradient-type: string.slice($background-str, 0, 6); @if $url-str == "url" { $webkit-background: $background; @@ -24,15 +31,15 @@ } @else if $gradient-type == "linear" { - $gradients: _linear-gradient-parser("#{$background}"); - $webkit-background: map-get($gradients, webkit-image); - $spec-background: map-get($gradients, spec-image); + $gradients: linear-gradient-parser.linear-gradient-parser("#{$background}"); + $webkit-background: map.get($gradients, webkit-image); + $spec-background: map.get($gradients, spec-image); } @else if $gradient-type == "radial" { - $gradients: _radial-gradient-parser("#{$background}"); - $webkit-background: map-get($gradients, webkit-image); - $spec-background: map-get($gradients, spec-image); + $gradients: radial-gradient-parser.radial-gradient-parser("#{$background}"); + $webkit-background: map.get($gradients, webkit-image); + $spec-background: map.get($gradients, spec-image); } @else { @@ -46,8 +53,8 @@ $spec-background: $background; } - $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma); - $spec-backgrounds: append($spec-backgrounds, $spec-background, comma); + $webkit-backgrounds: list.append($webkit-backgrounds, $webkit-background, comma); + $spec-backgrounds: list.append($spec-backgrounds, $spec-background, comma); } background: $webkit-backgrounds; diff --git a/source/_sass/bourbon/css3/_border-image.scss b/source/_sass/bourbon/css3/_border-image.scss index e338c2d..13bfa6a 100644 --- a/source/_sass/bourbon/css3/_border-image.scss +++ b/source/_sass/bourbon/css3/_border-image.scss @@ -1,3 +1,10 @@ +@use "sass:list"; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "../helpers/linear-gradient-parser"; +@use "../helpers/radial-gradient-parser"; + @mixin border-image($borders...) { $webkit-borders: (); $spec-borders: (); @@ -5,13 +12,13 @@ @each $border in $borders { $webkit-border: (); $spec-border: (); - $border-type: type-of($border); + $border-type: meta.type-of($border); @if $border-type == string or list { - $border-str: if($border-type == list, nth($border, 1), $border); + $border-str: if($border-type == list, list.nth($border, 1), $border); - $url-str: str-slice($border-str, 0, 3); - $gradient-type: str-slice($border-str, 0, 6); + $url-str: string.slice($border-str, 0, 3); + $gradient-type: string.slice($border-str, 0, 6); @if $url-str == "url" { $webkit-border: $border; @@ -19,15 +26,15 @@ } @else if $gradient-type == "linear" { - $gradients: _linear-gradient-parser("#{$border}"); - $webkit-border: map-get($gradients, webkit-image); - $spec-border: map-get($gradients, spec-image); + $gradients: linear-gradient-parser.linear-gradient-parser("#{$border}"); + $webkit-border: map.get($gradients, webkit-image); + $spec-border: map.get($gradients, spec-image); } @else if $gradient-type == "radial" { - $gradients: _radial-gradient-parser("#{$border}"); - $webkit-border: map-get($gradients, webkit-image); - $spec-border: map-get($gradients, spec-image); + $gradients: radial-gradient-parser.radial-gradient-parser("#{$border}"); + $webkit-border: map.get($gradients, webkit-image); + $spec-border: map.get($gradients, spec-image); } @else { @@ -41,8 +48,8 @@ $spec-border: $border; } - $webkit-borders: append($webkit-borders, $webkit-border, comma); - $spec-borders: append($spec-borders, $spec-border, comma); + $webkit-borders: list.append($webkit-borders, $webkit-border, comma); + $spec-borders: list.append($spec-borders, $spec-border, comma); } -webkit-border-image: $webkit-borders; diff --git a/source/_sass/bourbon/css3/_border-radius.scss b/source/_sass/bourbon/css3/_border-radius.scss index 7c17190..3b8e3aa 100644 --- a/source/_sass/bourbon/css3/_border-radius.scss +++ b/source/_sass/bourbon/css3/_border-radius.scss @@ -1,22 +1,24 @@ +@use "../addons/prefixer"; + //************************************************************************// // Shorthand Border-radius mixins //************************************************************************// @mixin border-top-radius($radii) { - @include prefixer(border-top-left-radius, $radii, spec); - @include prefixer(border-top-right-radius, $radii, spec); + @include prefixer.prefixer(border-top-left-radius, $radii, spec); + @include prefixer.prefixer(border-top-right-radius, $radii, spec); } @mixin border-bottom-radius($radii) { - @include prefixer(border-bottom-left-radius, $radii, spec); - @include prefixer(border-bottom-right-radius, $radii, spec); + @include prefixer.prefixer(border-bottom-left-radius, $radii, spec); + @include prefixer.prefixer(border-bottom-right-radius, $radii, spec); } @mixin border-left-radius($radii) { - @include prefixer(border-top-left-radius, $radii, spec); - @include prefixer(border-bottom-left-radius, $radii, spec); + @include prefixer.prefixer(border-top-left-radius, $radii, spec); + @include prefixer.prefixer(border-bottom-left-radius, $radii, spec); } @mixin border-right-radius($radii) { - @include prefixer(border-top-right-radius, $radii, spec); - @include prefixer(border-bottom-right-radius, $radii, spec); + @include prefixer.prefixer(border-top-right-radius, $radii, spec); + @include prefixer.prefixer(border-bottom-right-radius, $radii, spec); } diff --git a/source/_sass/bourbon/css3/_box-sizing.scss b/source/_sass/bourbon/css3/_box-sizing.scss index f07e1d4..fd070b6 100644 --- a/source/_sass/bourbon/css3/_box-sizing.scss +++ b/source/_sass/bourbon/css3/_box-sizing.scss @@ -1,4 +1,6 @@ +@use "../addons/prefixer"; + @mixin box-sizing ($box) { // content-box | border-box | inherit - @include prefixer(box-sizing, $box, webkit moz spec); + @include prefixer.prefixer(box-sizing, $box, webkit moz spec); } diff --git a/source/_sass/bourbon/css3/_columns.scss b/source/_sass/bourbon/css3/_columns.scss index 96f601c..cb647b6 100644 --- a/source/_sass/bourbon/css3/_columns.scss +++ b/source/_sass/bourbon/css3/_columns.scss @@ -1,47 +1,49 @@ +@use "../addons/prefixer"; + @mixin columns($arg: auto) { // || - @include prefixer(columns, $arg, webkit moz spec); + @include prefixer.prefixer(columns, $arg, webkit moz spec); } @mixin column-count($int: auto) { // auto || integer - @include prefixer(column-count, $int, webkit moz spec); + @include prefixer.prefixer(column-count, $int, webkit moz spec); } @mixin column-gap($length: normal) { // normal || length - @include prefixer(column-gap, $length, webkit moz spec); + @include prefixer.prefixer(column-gap, $length, webkit moz spec); } @mixin column-fill($arg: auto) { // auto || length - @include prefixer(column-fill, $arg, webkit moz spec); + @include prefixer.prefixer(column-fill, $arg, webkit moz spec); } @mixin column-rule($arg) { // || || - @include prefixer(column-rule, $arg, webkit moz spec); + @include prefixer.prefixer(column-rule, $arg, webkit moz spec); } @mixin column-rule-color($color) { - @include prefixer(column-rule-color, $color, webkit moz spec); + @include prefixer.prefixer(column-rule-color, $color, webkit moz spec); } @mixin column-rule-style($style: none) { // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid - @include prefixer(column-rule-style, $style, webkit moz spec); + @include prefixer.prefixer(column-rule-style, $style, webkit moz spec); } @mixin column-rule-width ($width: none) { - @include prefixer(column-rule-width, $width, webkit moz spec); + @include prefixer.prefixer(column-rule-width, $width, webkit moz spec); } @mixin column-span($arg: none) { // none || all - @include prefixer(column-span, $arg, webkit moz spec); + @include prefixer.prefixer(column-span, $arg, webkit moz spec); } @mixin column-width($length: auto) { // auto || length - @include prefixer(column-width, $length, webkit moz spec); + @include prefixer.prefixer(column-width, $length, webkit moz spec); } diff --git a/source/_sass/bourbon/css3/_filter.scss b/source/_sass/bourbon/css3/_filter.scss index 8560d77..3aade26 100644 --- a/source/_sass/bourbon/css3/_filter.scss +++ b/source/_sass/bourbon/css3/_filter.scss @@ -1,5 +1,7 @@ +@use "../addons/prefixer"; + @mixin filter($function: none) { // [ - @include prefixer(perspective, $depth, webkit moz spec); + @include prefixer.prefixer(perspective, $depth, webkit moz spec); } @mixin perspective-origin($value: 50% 50%) { - @include prefixer(perspective-origin, $value, webkit moz spec); + @include prefixer.prefixer(perspective-origin, $value, webkit moz spec); } diff --git a/source/_sass/bourbon/css3/_radial-gradient.scss b/source/_sass/bourbon/css3/_radial-gradient.scss index 7a8c376..443e208 100644 --- a/source/_sass/bourbon/css3/_radial-gradient.scss +++ b/source/_sass/bourbon/css3/_radial-gradient.scss @@ -1,3 +1,9 @@ +@use "sass:list"; +@use "sass:meta"; +@use "sass:string"; +@use "../helpers/radial-arg-parser"; +@use "../helpers/shape-size-stripper"; + // Requires Sass 3.1+ @mixin radial-gradient($G1, $G2, $G3: null, $G4: null, @@ -8,22 +14,22 @@ $shape-size: null, $fallback: null) { - $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); - $G1: nth($data, 1); - $G2: nth($data, 2); - $pos: nth($data, 3); - $shape-size: nth($data, 4); + $data: radial-arg-parser.radial-arg-parser($G1, $G2, $pos, $shape-size); + $G1: list.nth($data, 1); + $G2: list.nth($data, 2); + $pos: list.nth($data, 3); + $shape-size: list.nth($data, 4); $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10; // Strip deprecated cover/contain for spec - $shape-size-spec: _shape-size-stripper($shape-size); + $shape-size-spec: shape-size-stripper.shape-size-stripper($shape-size); // Set $G1 as the default fallback color - $first-color: nth($full, 1); - $fallback-color: nth($first-color, 1); + $first-color: list.nth($full, 1); + $fallback-color: list.nth($first-color, 1); - @if (type-of($fallback) == color) or ($fallback == "transparent") { + @if (meta.type-of($fallback) == color) or ($fallback == "transparent") { $fallback-color: $fallback; } @@ -34,6 +40,6 @@ $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); background-color: $fallback-color; - background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); - background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); + background-image: -webkit-radial-gradient(string.unquote(#{$pos}#{$shape-size}#{$full})); + background-image: string.unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); } diff --git a/source/_sass/bourbon/css3/_transform.scss b/source/_sass/bourbon/css3/_transform.scss index 8cc3596..fa70c9c 100644 --- a/source/_sass/bourbon/css3/_transform.scss +++ b/source/_sass/bourbon/css3/_transform.scss @@ -1,15 +1,17 @@ +@use "../addons/prefixer"; + @mixin transform($property: none) { // none | - @include prefixer(transform, $property, webkit moz ms o spec); + @include prefixer.prefixer(transform, $property, webkit moz ms o spec); } @mixin transform-origin($axes: 50%) { // x-axis - left | center | right | length | % // y-axis - top | center | bottom | length | % // z-axis - length - @include prefixer(transform-origin, $axes, webkit moz ms o spec); + @include prefixer.prefixer(transform-origin, $axes, webkit moz ms o spec); } @mixin transform-style ($style: flat) { - @include prefixer(transform-style, $style, webkit moz ms o spec); + @include prefixer.prefixer(transform-style, $style, webkit moz ms o spec); } diff --git a/source/_sass/bourbon/css3/_transition.scss b/source/_sass/bourbon/css3/_transition.scss index 5ad4c0a..a11f7fe 100644 --- a/source/_sass/bourbon/css3/_transition.scss +++ b/source/_sass/bourbon/css3/_transition.scss @@ -1,3 +1,7 @@ +@use "sass:list"; +@use "../addons/prefixer"; +@use "../functions/transition-property-name"; + // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. // Example: @include transition (all 2s ease-in-out); // @include transition (opacity 1s ease-in 2s, width 2s ease-out); @@ -12,31 +16,31 @@ // Create lists for vendor-prefixed transform @each $list in $properties { - @if nth($list, 1) == "transform" { + @if list.nth($list, 1) == "transform" { $needs-prefixes: true; $list1: -webkit-transform; $list2: -moz-transform; $list3: (); @each $var in $list { - $list3: join($list3, $var); + $list3: list.join($list3, $var); @if $var != "transform" { - $list1: join($list1, $var); - $list2: join($list2, $var); + $list1: list.join($list1, $var); + $list2: list.join($list2, $var); } } - $webkit: append($webkit, $list1); - $moz: append($moz, $list2); - $spec: append($spec, $list3); + $webkit: list.append($webkit, $list1); + $moz: list.append($moz, $list2); + $spec: list.append($spec, $list3); } // Create lists for non-prefixed transition properties @else { - $webkit: append($webkit, $list, comma); - $moz: append($moz, $list, comma); - $spec: append($spec, $list, comma); + $webkit: list.append($webkit, $list, comma); + $moz: list.append($moz, $list, comma); + $spec: list.append($spec, $list, comma); } } @@ -46,32 +50,32 @@ transition: $spec; } @else { - @if length($properties) >= 1 { - @include prefixer(transition, $properties, webkit moz spec); + @if list.length($properties) >= 1 { + @include prefixer.prefixer(transition, $properties, webkit moz spec); } @else { $properties: all 0.15s ease-out 0s; - @include prefixer(transition, $properties, webkit moz spec); + @include prefixer.prefixer(transition, $properties, webkit moz spec); } } } @mixin transition-property ($properties...) { - -webkit-transition-property: transition-property-names($properties, 'webkit'); - -moz-transition-property: transition-property-names($properties, 'moz'); - transition-property: transition-property-names($properties, false); + -webkit-transition-property: transition-property-name.transition-property-names($properties, 'webkit'); + -moz-transition-property: transition-property-name.transition-property-names($properties, 'moz'); + transition-property: transition-property-name.transition-property-names($properties, false); } @mixin transition-duration ($times...) { - @include prefixer(transition-duration, $times, webkit moz spec); + @include prefixer.prefixer(transition-duration, $times, webkit moz spec); } @mixin transition-timing-function ($motions...) { // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() - @include prefixer(transition-timing-function, $motions, webkit moz spec); + @include prefixer.prefixer(transition-timing-function, $motions, webkit moz spec); } @mixin transition-delay ($times...) { - @include prefixer(transition-delay, $times, webkit moz spec); + @include prefixer.prefixer(transition-delay, $times, webkit moz spec); } diff --git a/source/_sass/bourbon/css3/_user-select.scss b/source/_sass/bourbon/css3/_user-select.scss index 1380aa8..d2683e1 100644 --- a/source/_sass/bourbon/css3/_user-select.scss +++ b/source/_sass/bourbon/css3/_user-select.scss @@ -1,3 +1,5 @@ +@use "../addons/prefixer"; + @mixin user-select($arg: none) { - @include prefixer(user-select, $arg, webkit moz ms spec); + @include prefixer.prefixer(user-select, $arg, webkit moz ms spec); } diff --git a/source/_sass/bourbon/functions/_assign.scss b/source/_sass/bourbon/functions/_assign.scss index 9a1db93..a31ea5b 100644 --- a/source/_sass/bourbon/functions/_assign.scss +++ b/source/_sass/bourbon/functions/_assign.scss @@ -1,10 +1,12 @@ +@use "sass:list"; +@use "sass:string"; @function assign-inputs($inputs, $pseudo: null) { $list : (); @each $input in $inputs { - $input: unquote($input); + $input: string.unquote($input); $input: if($pseudo, $input + ":" + $pseudo, $input); - $list: append($list, $input, comma); + $list: list.append($list, $input, comma); } @return $list; diff --git a/source/_sass/bourbon/functions/_color-lightness.scss b/source/_sass/bourbon/functions/_color-lightness.scss index 8c6df4e..d6f72e6 100644 --- a/source/_sass/bourbon/functions/_color-lightness.scss +++ b/source/_sass/bourbon/functions/_color-lightness.scss @@ -1,11 +1,12 @@ +@use "sass:color"; // Programatically determines whether a color is light or dark // Returns a boolean // More details here http://robots.thoughtbot.com/closer-look-color-lightness @function is-light($hex-color) { - $-local-red: red(rgba($hex-color, 1.0)); - $-local-green: green(rgba($hex-color, 1.0)); - $-local-blue: blue(rgba($hex-color, 1.0)); + $-local-red: color.red(rgba($hex-color, 1.0)); + $-local-green: color.green(rgba($hex-color, 1.0)); + $-local-blue: color.blue(rgba($hex-color, 1.0)); $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255; diff --git a/source/_sass/bourbon/functions/_flex-grid.scss b/source/_sass/bourbon/functions/_flex-grid.scss index 3bbd866..cade4b1 100644 --- a/source/_sass/bourbon/functions/_flex-grid.scss +++ b/source/_sass/bourbon/functions/_flex-grid.scss @@ -1,14 +1,15 @@ +@use "sass:math"; // Flexible grid @function flex-grid($columns, $container-columns: $fg-max-columns) { $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; - @return percentage($width / $container-width); + @return math.percentage($width / $container-width); } // Flexible gutter @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; - @return percentage($gutter / $container-width); + @return math.percentage($gutter / $container-width); } // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. diff --git a/source/_sass/bourbon/functions/_golden-ratio.scss b/source/_sass/bourbon/functions/_golden-ratio.scss index 463d14a..eaa779e 100644 --- a/source/_sass/bourbon/functions/_golden-ratio.scss +++ b/source/_sass/bourbon/functions/_golden-ratio.scss @@ -1,3 +1,5 @@ +@use "modular-scale"; + @function golden-ratio($value, $increment) { - @return modular-scale($value, $increment, $golden) + @return modular-scale.modular-scale($value, $increment, modular-scale.$golden) } diff --git a/source/_sass/bourbon/functions/_modular-scale.scss b/source/_sass/bourbon/functions/_modular-scale.scss index afc59eb..5fc2803 100644 --- a/source/_sass/bourbon/functions/_modular-scale.scss +++ b/source/_sass/bourbon/functions/_modular-scale.scss @@ -1,3 +1,4 @@ +@use "sass:list"; // Scaling Variables $golden: 1.618; $minor-second: 1.067; @@ -18,8 +19,8 @@ $major-twelfth: 3; $double-octave: 4; @function modular-scale($value, $increment, $ratio) { - $v1: nth($value, 1); - $v2: nth($value, length($value)); + $v1: list.nth($value, 1); + $v2: list.nth($value, list.length($value)); $value: $v1; // scale $v2 to just above $v1 diff --git a/source/_sass/bourbon/functions/_px-to-em.scss b/source/_sass/bourbon/functions/_px-to-em.scss index 4832245..8989ff2 100644 --- a/source/_sass/bourbon/functions/_px-to-em.scss +++ b/source/_sass/bourbon/functions/_px-to-em.scss @@ -1,13 +1,19 @@ +@use "sass:math"; +@use "../settings/px-to-em"; +@use "strip-units"; + // Convert pixels to ems // eg. for a relational value of 12px write em(12) when the parent is 16px // if the parent is another value say 24px write em(12, 24) -@function em($pxval, $base: $em-base) { - @if not unitless($pxval) { - $pxval: strip-units($pxval); +@function em($pxval, $base: px-to-em.$em-base) { + @if not math.is-unitless($pxval) { + $pxval: strip-units.strip-units($pxval); } - @if not unitless($base) { - $base: strip-units($base); + + @if not math.is-unitless($base) { + $base: strip-units.strip-units($base); } - @return ($pxval / $base) * 1em; + + @return calc($pxval / $base) * 1em; } diff --git a/source/_sass/bourbon/functions/_px-to-rem.scss b/source/_sass/bourbon/functions/_px-to-rem.scss index 96b244e..769868a 100644 --- a/source/_sass/bourbon/functions/_px-to-rem.scss +++ b/source/_sass/bourbon/functions/_px-to-rem.scss @@ -1,15 +1,21 @@ +@use "sass:math"; +@use "../settings/px-to-em"; +@use "strip-units"; + // Convert pixels to rems // eg. for a relational value of 12px write rem(12) // Assumes $em-base is the font-size of @function rem($pxval) { - @if not unitless($pxval) { - $pxval: strip-units($pxval); + @if not math.is-unitless($pxval) { + $pxval: strip-units.strip-units($pxval); } - $base: $em-base; - @if not unitless($base) { - $base: strip-units($base); + $base: px-to-em.$em-base; + + @if not math.is-unitless($base) { + $base: strip-units.strip-units($base); } - @return ($pxval / $base) * 1rem; + + @return calc($pxval / $base) * 1rem; } diff --git a/source/_sass/bourbon/functions/_strip-units.scss b/source/_sass/bourbon/functions/_strip-units.scss index 6afc6e6..513f8ca 100644 --- a/source/_sass/bourbon/functions/_strip-units.scss +++ b/source/_sass/bourbon/functions/_strip-units.scss @@ -1,5 +1,5 @@ // Srtips the units from a value. e.g. 12px -> 12 @function strip-units($val) { - @return ($val / ($val * 0 + 1)); + @return calc($val / ($val * 0 + 1px)); } diff --git a/source/_sass/bourbon/functions/_tint-shade.scss b/source/_sass/bourbon/functions/_tint-shade.scss index f717200..05ca7af 100644 --- a/source/_sass/bourbon/functions/_tint-shade.scss +++ b/source/_sass/bourbon/functions/_tint-shade.scss @@ -1,9 +1,10 @@ +@use "sass:color"; // Add percentage of white to a color @function tint($color, $percent){ - @return mix(white, $color, $percent); + @return color.mix(white, $color, $percent); } // Add percentage of black to a color @function shade($color, $percent){ - @return mix(black, $color, $percent); + @return color.mix(black, $color, $percent); } diff --git a/source/_sass/bourbon/functions/_transition-property-name.scss b/source/_sass/bourbon/functions/_transition-property-name.scss index 54cd422..a9c45f5 100644 --- a/source/_sass/bourbon/functions/_transition-property-name.scss +++ b/source/_sass/bourbon/functions/_transition-property-name.scss @@ -1,3 +1,5 @@ +@use "sass:list"; +@use "sass:string"; // Return vendor-prefixed property names if appropriate // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background //************************************************************************// @@ -5,7 +7,7 @@ $new-props: (); @each $prop in $props { - $new-props: append($new-props, transition-property-name($prop, $vendor), comma); + $new-props: list.append($new-props, transition-property-name($prop, $vendor), comma); } @return $new-props; @@ -14,7 +16,7 @@ @function transition-property-name($prop, $vendor: false) { // put other properties that need to be prefixed here aswell @if $vendor and $prop == transform { - @return unquote('-'+$vendor+'-'+$prop); + @return string.unquote('-'+$vendor+'-'+$prop); } @else { @return $prop; diff --git a/source/_sass/bourbon/functions/_unpack.scss b/source/_sass/bourbon/functions/_unpack.scss index 3775963..1ccfad0 100644 --- a/source/_sass/bourbon/functions/_unpack.scss +++ b/source/_sass/bourbon/functions/_unpack.scss @@ -1,14 +1,15 @@ +@use "sass:list"; // Convert shorthand to the 4-value syntax @function unpack($shorthand) { - @if length($shorthand) == 1 { - @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); + @if list.length($shorthand) == 1 { + @return list.nth($shorthand, 1) list.nth($shorthand, 1) list.nth($shorthand, 1) list.nth($shorthand, 1); } - @else if length($shorthand) == 2 { - @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); + @else if list.length($shorthand) == 2 { + @return list.nth($shorthand, 1) list.nth($shorthand, 2) list.nth($shorthand, 1) list.nth($shorthand, 2); } - @else if length($shorthand) == 3 { - @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); + @else if list.length($shorthand) == 3 { + @return list.nth($shorthand, 1) list.nth($shorthand, 2) list.nth($shorthand, 3) list.nth($shorthand, 2); } @else { @return $shorthand; diff --git a/source/_sass/bourbon/helpers/_convert-units.scss b/source/_sass/bourbon/helpers/_convert-units.scss index 3443db3..cc58a76 100644 --- a/source/_sass/bourbon/helpers/_convert-units.scss +++ b/source/_sass/bourbon/helpers/_convert-units.scss @@ -1,15 +1,16 @@ +@use "sass:list"; //************************************************************************// // Helper function for str-to-num fn. // Source: http://sassmeister.com/gist/9647408 //************************************************************************// -@function _convert-units($number, $unit) { +@function convert-units($number, $unit) { $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn'; $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn; - $index: index($strings, $unit); + $index: list.index($strings, $unit); @if not $index { @warn "Unknown unit `#{$unit}`."; @return false; } - @return $number * nth($units, $index); + @return $number * list.nth($units, $index); } diff --git a/source/_sass/bourbon/helpers/_gradient-positions-parser.scss b/source/_sass/bourbon/helpers/_gradient-positions-parser.scss index 07d30b6..ce060db 100644 --- a/source/_sass/bourbon/helpers/_gradient-positions-parser.scss +++ b/source/_sass/bourbon/helpers/_gradient-positions-parser.scss @@ -1,13 +1,17 @@ +@use "sass:meta"; +@use "linear-positions-parser"; +@use "radial-positions-parser"; + @function _gradient-positions-parser($gradient-type, $gradient-positions) { @if $gradient-positions and ($gradient-type == linear) - and (type-of($gradient-positions) != color) { - $gradient-positions: _linear-positions-parser($gradient-positions); + and (meta.type-of($gradient-positions) != color) { + $gradient-positions: linear-positions-parser.linear-positions-parser($gradient-positions); } @else if $gradient-positions and ($gradient-type == radial) - and (type-of($gradient-positions) != color) { - $gradient-positions: _radial-positions-parser($gradient-positions); + and (meta.type-of($gradient-positions) != color) { + $gradient-positions: radial-positions-parser.radial-positions-parser($gradient-positions); } @return $gradient-positions; } diff --git a/source/_sass/bourbon/helpers/_is-num.scss b/source/_sass/bourbon/helpers/_is-num.scss index 71459e1..383bc48 100644 --- a/source/_sass/bourbon/helpers/_is-num.scss +++ b/source/_sass/bourbon/helpers/_is-num.scss @@ -1,8 +1,9 @@ +@use "sass:list"; //************************************************************************// // Helper for linear-gradient-parser //************************************************************************// -@function _is-num($char) { +@function is-num($char) { $values: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9; - $index: index($values, $char); + $index: list.index($values, $char); @return if($index, true, false); } diff --git a/source/_sass/bourbon/helpers/_linear-angle-parser.scss b/source/_sass/bourbon/helpers/_linear-angle-parser.scss index e0401ed..f9d6eae 100644 --- a/source/_sass/bourbon/helpers/_linear-angle-parser.scss +++ b/source/_sass/bourbon/helpers/_linear-angle-parser.scss @@ -1,8 +1,11 @@ +@use "sass:string"; +@use "str-to-num"; + // Private function for linear-gradient-parser -@function _linear-angle-parser($image, $first-val, $prefix, $suffix) { +@function linear-angle-parser($image, $first-val, $prefix, $suffix) { $offset: null; - $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val)); - $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val)); + $unit-short: string.slice($first-val, string.length($first-val) - 2, string.length($first-val)); + $unit-long: string.slice($first-val, string.length($first-val) - 3, string.length($first-val)); @if ($unit-long == "grad") or ($unit-long == "turn") { @@ -15,7 +18,7 @@ } @if $offset { - $num: _str-to-num($first-val); + $num: str-to-num.str-to-num($first-val); @return ( webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix, diff --git a/source/_sass/bourbon/helpers/_linear-gradient-parser.scss b/source/_sass/bourbon/helpers/_linear-gradient-parser.scss index 12bcdcd..c24d28a 100644 --- a/source/_sass/bourbon/helpers/_linear-gradient-parser.scss +++ b/source/_sass/bourbon/helpers/_linear-gradient-parser.scss @@ -1,23 +1,29 @@ -@function _linear-gradient-parser($image) { - $image: unquote($image); +@use "sass:string"; +@use "is-num"; +@use "linear-angle-parser"; +@use "linear-positions-parser"; +@use "linear-side-corner-parser"; + +@function linear-gradient-parser($image) { + $image: string.unquote($image); $gradients: (); - $start: str-index($image, "("); - $end: str-index($image, ","); - $first-val: str-slice($image, $start + 1, $end - 1); + $start: string.index($image, "("); + $end: string.index($image, ","); + $first-val: string.slice($image, $start + 1, $end - 1); - $prefix: str-slice($image, 0, $start); - $suffix: str-slice($image, $end, str-length($image)); + $prefix: string.slice($image, 0, $start); + $suffix: string.slice($image, $end, string.length($image)); - $has-multiple-vals: str-index($first-val, " "); - $has-single-position: unquote(_position-flipper($first-val) + ""); - $has-angle: _is-num(str-slice($first-val, 0, 0)); + $has-multiple-vals: string.index($first-val, " "); + $has-single-position: string.unquote(linear-positions-parser.position-flipper($first-val) + ""); + $has-angle: is-num.is-num(string.slice($first-val, 0, 0)); @if $has-multiple-vals { - $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); + $gradients: linear-side-corner-parser.linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); } @else if $has-single-position != "" { - $pos: unquote($has-single-position + ""); + $pos: string.unquote($has-single-position + ""); $gradients: ( webkit-image: -webkit- + $image, @@ -27,7 +33,7 @@ @else if $has-angle { // Rotate degree for webkit - $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix); + $gradients: linear-angle-parser.linear-angle-parser($image, $first-val, $prefix, $suffix); } @else { diff --git a/source/_sass/bourbon/helpers/_linear-positions-parser.scss b/source/_sass/bourbon/helpers/_linear-positions-parser.scss index d26383e..3f96c4f 100644 --- a/source/_sass/bourbon/helpers/_linear-positions-parser.scss +++ b/source/_sass/bourbon/helpers/_linear-positions-parser.scss @@ -1,39 +1,42 @@ -@function _linear-positions-parser($pos) { - $type: type-of(nth($pos, 1)); +@use "sass:list"; +@use "sass:meta"; +@use "sass:string"; +@function linear-positions-parser($pos) { + $type: meta.type-of(list.nth($pos, 1)); $spec: null; $degree: null; $side: null; $corner: null; - $length: length($pos); + $length: list.length($pos); // Parse Side and corner positions @if ($length > 1) { - @if nth($pos, 1) == "to" { // Newer syntax - $side: nth($pos, 2); + @if list.nth($pos, 1) == "to" { // Newer syntax + $side: list.nth($pos, 2); @if $length == 2 { // eg. to top // Swap for backwards compatability - $degree: _position-flipper(nth($pos, 2)); + $degree: position-flipper(list.nth($pos, 2)); } @else if $length == 3 { // eg. to top left - $corner: nth($pos, 3); + $corner: list.nth($pos, 3); } } @else if $length == 2 { // Older syntax ("top left") - $side: _position-flipper(nth($pos, 1)); - $corner: _position-flipper(nth($pos, 2)); + $side: position-flipper(list.nth($pos, 1)); + $corner: position-flipper(list.nth($pos, 2)); } @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { - $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + $degree: position-flipper(#{$side}) position-flipper(#{$corner}); } @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { - $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + $degree: position-flipper(#{$side}) position-flipper(#{$corner}); } @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { - $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + $degree: position-flipper(#{$side}) position-flipper(#{$corner}); } @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { - $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + $degree: position-flipper(#{$side}) position-flipper(#{$corner}); } $spec: to $side $corner; } @@ -41,19 +44,19 @@ // Swap for backwards compatability @if $type == string { $degree: $pos; - $spec: to _position-flipper($pos); + $spec: to position-flipper($pos); } @else { $degree: -270 - $pos; //rotate the gradient opposite from spec $spec: $pos; } } - $degree: unquote($degree + ","); - $spec: unquote($spec + ","); + $degree: string.unquote($degree + ","); + $spec: string.unquote($spec + ","); @return $degree $spec; } -@function _position-flipper($pos) { +@function position-flipper($pos) { @return if($pos == left, right, null) if($pos == right, left, null) if($pos == top, bottom, null) diff --git a/source/_sass/bourbon/helpers/_linear-side-corner-parser.scss b/source/_sass/bourbon/helpers/_linear-side-corner-parser.scss index 86ad88f..5262d8e 100644 --- a/source/_sass/bourbon/helpers/_linear-side-corner-parser.scss +++ b/source/_sass/bourbon/helpers/_linear-side-corner-parser.scss @@ -1,17 +1,20 @@ +@use "sass:string"; +@use "linear-positions-parser"; + // Private function for linear-gradient-parser -@function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { - $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 ); - $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val)); +@function linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { + $val-1: string.slice($first-val, 0, $has-multiple-vals - 1 ); + $val-2: string.slice($first-val, $has-multiple-vals + 1, string.length($first-val)); $val-3: null; - $has-val-3: str-index($val-2, " "); + $has-val-3: string.index($val-2, " "); @if $has-val-3 { - $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2)); - $val-2: str-slice($val-2, 0, $has-val-3 - 1); + $val-3: string.slice($val-2, $has-val-3 + 1, string.length($val-2)); + $val-2: string.slice($val-2, 0, $has-val-3 - 1); } - $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3); - $pos: unquote($pos + ""); + $pos: linear-positions-parser.position-flipper($val-1) linear-positions-parser.position-flipper($val-2) linear-positions-parser.position-flipper($val-3); + $pos: string.unquote($pos + ""); // Use old spec for webkit @if $val-1 == "to" { diff --git a/source/_sass/bourbon/helpers/_radial-arg-parser.scss b/source/_sass/bourbon/helpers/_radial-arg-parser.scss index a3a3704..228a022 100644 --- a/source/_sass/bourbon/helpers/_radial-arg-parser.scss +++ b/source/_sass/bourbon/helpers/_radial-arg-parser.scss @@ -1,25 +1,27 @@ -@function _radial-arg-parser($G1, $G2, $pos, $shape-size) { +@use "sass:list"; +@use "sass:meta"; +@function radial-arg-parser($G1, $G2, $pos, $shape-size) { @each $value in $G1, $G2 { - $first-val: nth($value, 1); - $pos-type: type-of($first-val); + $first-val: list.nth($value, 1); + $pos-type: meta.type-of($first-val); $spec-at-index: null; // Determine if spec was passed to mixin - @if type-of($value) == list { - $spec-at-index: if(index($value, at), index($value, at), false); + @if meta.type-of($value) == list { + $spec-at-index: if(list.index($value, at), list.index($value, at), false); } @if $spec-at-index { @if $spec-at-index > 1 { @for $i from 1 through ($spec-at-index - 1) { - $shape-size: $shape-size nth($value, $i); + $shape-size: $shape-size list.nth($value, $i); } - @for $i from ($spec-at-index + 1) through length($value) { - $pos: $pos nth($value, $i); + @for $i from ($spec-at-index + 1) through list.length($value) { + $pos: $pos list.nth($value, $i); } } @else if $spec-at-index == 1 { - @for $i from ($spec-at-index + 1) through length($value) { - $pos: $pos nth($value, $i); + @for $i from ($spec-at-index + 1) through list.length($value) { + $pos: $pos list.nth($value, $i); } } $G1: null; diff --git a/source/_sass/bourbon/helpers/_radial-gradient-parser.scss b/source/_sass/bourbon/helpers/_radial-gradient-parser.scss index 6dde50f..9cbec9c 100644 --- a/source/_sass/bourbon/helpers/_radial-gradient-parser.scss +++ b/source/_sass/bourbon/helpers/_radial-gradient-parser.scss @@ -1,19 +1,21 @@ -@function _radial-gradient-parser($image) { - $image: unquote($image); +@use "sass:list"; +@use "sass:string"; +@function radial-gradient-parser($image) { + $image: string.unquote($image); $gradients: (); - $start: str-index($image, "("); - $end: str-index($image, ","); - $first-val: str-slice($image, $start + 1, $end - 1); + $start: string.index($image, "("); + $end: string.index($image, ","); + $first-val: string.slice($image, $start + 1, $end - 1); - $prefix: str-slice($image, 0, $start); - $suffix: str-slice($image, $end, str-length($image)); + $prefix: string.slice($image, 0, $start); + $suffix: string.slice($image, $end, string.length($image)); - $is-spec-syntax: str-index($first-val, "at"); + $is-spec-syntax: string.index($first-val, "at"); @if $is-spec-syntax and $is-spec-syntax > 1 { - $keyword: str-slice($first-val, 1, $is-spec-syntax - 2); - $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); - $pos: append($pos, $keyword, comma); + $keyword: string.slice($first-val, 1, $is-spec-syntax - 2); + $pos: string.slice($first-val, $is-spec-syntax + 3, string.length($first-val)); + $pos: list.append($pos, $keyword, comma); $gradients: ( webkit-image: -webkit- + $prefix + $pos + $suffix, @@ -22,7 +24,7 @@ } @else if $is-spec-syntax == 1 { - $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); + $pos: string.slice($first-val, $is-spec-syntax + 3, string.length($first-val)); $gradients: ( webkit-image: -webkit- + $prefix + $pos + $suffix, @@ -30,7 +32,7 @@ ) } - @else if str-index($image, "cover") or str-index($image, "contain") { + @else if string.index($image, "cover") or string.index($image, "contain") { @warn "Radial-gradient needs to be updated to conform to latest spec."; $gradients: ( diff --git a/source/_sass/bourbon/helpers/_radial-positions-parser.scss b/source/_sass/bourbon/helpers/_radial-positions-parser.scss index 6a5b477..6ff82cb 100644 --- a/source/_sass/bourbon/helpers/_radial-positions-parser.scss +++ b/source/_sass/bourbon/helpers/_radial-positions-parser.scss @@ -1,10 +1,14 @@ -@function _radial-positions-parser($gradient-pos) { - $shape-size: nth($gradient-pos, 1); - $pos: nth($gradient-pos, 2); - $shape-size-spec: _shape-size-stripper($shape-size); +@use "sass:list"; +@use "sass:string"; +@use "shape-size-stripper"; - $pre-spec: unquote(if($pos, "#{$pos}, ", null)) - unquote(if($shape-size, "#{$shape-size},", null)); +@function radial-positions-parser($gradient-pos) { + $shape-size: list.nth($gradient-pos, 1); + $pos: list.nth($gradient-pos, 2); + $shape-size-spec: shape-size-stripper.shape-size-stripper($shape-size); + + $pre-spec: string.unquote(if($pos, "#{$pos}, ", null)) + string.unquote(if($shape-size, "#{$shape-size},", null)); $pos-spec: if($pos, "at #{$pos}", null); $spec: "#{$shape-size-spec} #{$pos-spec}"; diff --git a/source/_sass/bourbon/helpers/_render-gradients.scss b/source/_sass/bourbon/helpers/_render-gradients.scss index 5765676..3b3aabc 100644 --- a/source/_sass/bourbon/helpers/_render-gradients.scss +++ b/source/_sass/bourbon/helpers/_render-gradients.scss @@ -1,3 +1,5 @@ +@use "sass:list"; +@use "sass:string"; // User for linear and radial gradients within background-image or border-image properties @function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { @@ -6,13 +8,13 @@ $vendor-gradients: null; @if $gradient-type == linear { @if $gradient-positions { - $pre-spec: nth($gradient-positions, 1); - $spec: nth($gradient-positions, 2); + $pre-spec: list.nth($gradient-positions, 1); + $spec: list.nth($gradient-positions, 2); } } @else if $gradient-type == radial { - $pre-spec: nth($gradient-positions, 1); - $spec: nth($gradient-positions, 2); + $pre-spec: list.nth($gradient-positions, 1); + $spec: list.nth($gradient-positions, 2); } @if $vendor { @@ -20,7 +22,7 @@ } @else if $vendor == false { $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; - $vendor-gradients: unquote($vendor-gradients); + $vendor-gradients: string.unquote($vendor-gradients); } @return $vendor-gradients; } diff --git a/source/_sass/bourbon/helpers/_shape-size-stripper.scss b/source/_sass/bourbon/helpers/_shape-size-stripper.scss index ee5eda4..6282f89 100644 --- a/source/_sass/bourbon/helpers/_shape-size-stripper.scss +++ b/source/_sass/bourbon/helpers/_shape-size-stripper.scss @@ -1,4 +1,4 @@ -@function _shape-size-stripper($shape-size) { +@function shape-size-stripper($shape-size) { $shape-size-spec: null; @each $value in $shape-size { @if ($value == "cover") or ($value == "contain") { diff --git a/source/_sass/bourbon/helpers/_str-to-num.scss b/source/_sass/bourbon/helpers/_str-to-num.scss index b3d6168..ac56fb0 100644 --- a/source/_sass/bourbon/helpers/_str-to-num.scss +++ b/source/_sass/bourbon/helpers/_str-to-num.scss @@ -1,8 +1,12 @@ +@use "sass:list"; +@use "sass:string"; +@use "convert-units"; + //************************************************************************// // Helper function for linear/radial-gradient-parsers. // Source: http://sassmeister.com/gist/9647408 //************************************************************************// -@function _str-to-num($string) { +@function str-to-num($string) { // Matrices $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9'; $numbers: 0 1 2 3 4 5 6 7 8 9; @@ -13,9 +17,9 @@ $minus: false; // Looping through all characters - @for $i from 1 through str-length($string) { - $character: str-slice($string, $i, $i); - $index: index($strings, $character); + @for $i from 1 through string.length($string) { + $character: string.slice($string, $i, $i); + $index: list.index($strings, $character); @if $character == '-' { $minus: true; @@ -28,10 +32,10 @@ @else { @if not $index { $result: if($minus, $result * -1, $result); - @return _convert-units($result, str-slice($string, $i)); + @return convert-units.convert-units($result, string.slice($string, $i)); } - $number: nth($numbers, $index); + $number: list.nth($numbers, $index); @if $divider == 0 { $result: $result * 10; diff --git a/source/_sass/colors.scss b/source/_sass/colors.scss index 3a11513..5fb00c6 100644 --- a/source/_sass/colors.scss +++ b/source/_sass/colors.scss @@ -1,3 +1,4 @@ +@use "sass:color"; /** * Copyright 2025 Google LLC * @@ -16,7 +17,7 @@ $pebble-black: #111; $pebble-blue: #16b5d8; -$pebble-blue-alt: darken(#16b5d8, 20); +$pebble-blue-alt: color.adjust(#16b5d8, $lightness: -20%); $pebble-gray: #959fa0; $pebble-green: #aed70d; $pebble-orange: #f57216; @@ -49,8 +50,8 @@ $android-green: #A4C739; $bigbox--blue: $lightblue; $bigbox--green: #22a048; -$bigbox--darkgreen: darken($bigbox--green, 20); -$bigbox--dark-blue: darken($darkerlightblue, 20); +$bigbox--darkgreen: color.adjust($bigbox--green, $lightness: -20%); +$bigbox--dark-blue: color.adjust($darkerlightblue, $lightness: -20%); $color-guides: $yellow; $color-docs: $pink; diff --git a/source/_sass/elements/alert.scss b/source/_sass/elements/alert.scss index 55cfd84..7f3a372 100644 --- a/source/_sass/elements/alert.scss +++ b/source/_sass/elements/alert.scss @@ -1,3 +1,7 @@ +@use "sass:list"; +@use "../colors"; +@use "../base/lists"; + /** * Copyright 2025 Google LLC * @@ -16,7 +20,7 @@ .alert { background-color: #ddd; - color: $white; + color: colors.$white; margin-bottom: 1em; padding: 0.5em; @@ -48,13 +52,13 @@ padding: 0.7em; } -$alert-colors: $white $green $blue $red $purple $yellow $orange $lightblue $dark-red $color-blog; +$alert-colors: colors.$white colors.$green colors.$blue colors.$red colors.$purple colors.$yellow colors.$orange colors.$lightblue colors.$dark-red colors.$color-blog; $alert-names: 'white' 'green' 'blue' 'red' 'purple' 'yellow' 'orange' 'lightblue' 'dark-red' 'blog'; @each $color in $alert-colors { - $i: index($alert-colors, $color); + $i: list.index($alert-colors, $color); - .alert--fg-#{nth($alert-names, $i)} { + .alert--fg-#{list.nth($alert-names, $i)} { color: $color; a { @@ -63,17 +67,17 @@ $alert-names: 'white' 'green' 'blue' 'red' 'purple' 'yellow' 'orange' 'l } } - .alert--bg-#{nth($alert-names, $i)} { + .alert--bg-#{list.nth($alert-names, $i)} { background-color: $color; } } .alert--error { - background-color: $dark-red; + background-color: colors.$dark-red; color: #fff; } .alert--success { - background-color: $green; + background-color: colors.$green; color: #fff; } diff --git a/source/_sass/elements/bigbox.scss b/source/_sass/elements/bigbox.scss index 763facc..a764b4f 100644 --- a/source/_sass/elements/bigbox.scss +++ b/source/_sass/elements/bigbox.scss @@ -1,3 +1,7 @@ +@use "../base/variables"; +@use "../colors"; +@use "../responsive/utilities/variables" as utilities-variables; + /** * Copyright 2025 Google LLC * @@ -21,7 +25,7 @@ position: relative; p { - font-size: 1.2 * $base-font-size; + font-size: 1.2 * utilities-variables.$base-font-size; } h2, @@ -30,7 +34,7 @@ font-weight: 600; a { - color: $base-font-color; + color: variables.$base-font-color; &:hover { text-decoration: underline; @@ -58,56 +62,56 @@ } .bigbox--lightblue { - background-color: $lightblue; - color: $white; + background-color: colors.$lightblue; + color: colors.$white; } .bigbox--blue { - background-color: $bigbox--blue; - color: $white; + background-color: colors.$bigbox--blue; + color: colors.$white; } .bigbox--dark-blue { - background-color: $bigbox--blue; - color: $white; + background-color: colors.$bigbox--blue; + color: colors.$white; } .bigbox--green { - background-color: $bigbox--green; - color: $white; + background-color: colors.$bigbox--green; + color: colors.$white; } .bigbox--dark-green { - background-color: $bigbox--darkgreen; - color: $white; + background-color: colors.$bigbox--darkgreen; + color: colors.$white; } .bigbox--orange { - background-color: $orange; - color: $white; + background-color: colors.$orange; + color: colors.$white; } .bigbox--red { - background-color: $red; - color: $white; + background-color: colors.$red; + color: colors.$white; } .bigbox--dark-red { - background-color: $dark-red; - color: $white; + background-color: colors.$dark-red; + color: colors.$white; } .bigbox--lightgray { - background-color: $gray-04; + background-color: colors.$gray-04; } .bigbox--gray { - background-color: $gray-05; + background-color: colors.$gray-05; } .bigbox--darkgray { - background-color: $gray-02; - color: $white; + background-color: colors.$gray-02; + color: colors.$white; } @@ -118,8 +122,8 @@ } .bigbox--android { - color: $white; - background-color: $android-green; + color: colors.$white; + background-color: colors.$android-green; i { font-size: 6em; @@ -129,8 +133,8 @@ .bigbox--ios { - color: $black; - background-color: $white; + color: colors.$black; + background-color: colors.$white; i { font-size: 6em; @@ -143,12 +147,12 @@ top: 0; left: 0; right: 0; - background-color: $green; - color: $white; + background-color: colors.$green; + color: colors.$white; padding: 0.50rem; &:hover { - color: $white; + color: colors.$white; text-decoration: underline; } } @@ -164,25 +168,25 @@ } .bigbox__guides-beautiful { - background-color: $blue; - color: $breakfast-room-white; + background-color: colors.$blue; + color: colors.$breakfast-room-white; background-image: url('/assets/images/landing-page/first_time_bg.png'); } .bigbox__guides-building { - background-color: $gray-02; - color: $breakfast-room-white; + background-color: colors.$gray-02; + color: colors.$breakfast-room-white; background-image: url('/assets/images/landing-page/back_for_more_bg.png'); } .bigbox__guides-publishing { - background-color: $blue; - color: $breakfast-room-white; + background-color: colors.$blue; + color: colors.$breakfast-room-white; background-image: url('/assets/images/landing-page/meta_bg.png'); } .bigbox__guides-interactive { - background-color: $gray-02; - color: $breakfast-room-white; + background-color: colors.$gray-02; + color: colors.$breakfast-room-white; background-image: url('/assets/images/landing-page/interactive_bg.png'); } diff --git a/source/_sass/elements/buttons.scss b/source/_sass/elements/buttons.scss index 6f33a35..a23fcaf 100644 --- a/source/_sass/elements/buttons.scss +++ b/source/_sass/elements/buttons.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "sass:list"; +@use "../colors"; + /** * Copyright 2025 Google LLC * @@ -15,9 +19,9 @@ */ .btn { - background-color: $white; + background-color: colors.$white; border-radius: 4px; - color: $darker-grey; + color: colors.$darker-grey; font-weight: 700; padding: 0.5em 2em; text-transform: uppercase; @@ -25,7 +29,7 @@ text-align: center; &:hover { - color: $darker-grey; + color: colors.$darker-grey; } } @@ -35,13 +39,13 @@ submit.btn { font-size: inherit; } -$btn-colors: $white $gray-02 $green $blue $red $purple $yellow $orange $lightblue $dark-red $orange-02 $android-green; +$btn-colors: colors.$white colors.$gray-02 colors.$green colors.$blue colors.$red colors.$purple colors.$yellow colors.$orange colors.$lightblue colors.$dark-red colors.$orange-02 colors.$android-green; $btn-names: 'white' gray-02 'green' 'blue' 'red' 'purple' 'yellow' 'orange' 'lightblue' 'dark-red' 'orange-02' 'android-green'; @each $color in $btn-colors { - $i: index($btn-colors, $color); + $i: list.index($btn-colors, $color); - .btn--fg-#{nth($btn-names, $i)} { + .btn--fg-#{list.nth($btn-names, $i)} { color: $color; &:hover, @@ -51,13 +55,13 @@ $btn-names: 'white' gray-02 'green' 'blue' 'red' 'purple' 'yellow' 'orang } } - .btn--bg-#{nth($btn-names, $i)} { + .btn--bg-#{list.nth($btn-names, $i)} { background-color: $color; &:hover, &:active, &:focus { - background-color: darken($color, 10); + background-color: color.adjust($color, $lightness: -10%); } } } @@ -65,36 +69,36 @@ $btn-names: 'white' gray-02 'green' 'blue' 'red' 'purple' 'yellow' 'orang // Generate a pair of button classes for each section (original and alternate). // This should be used when adding buttons in each section, in case we change // the colours in the future. -@each $color in $modifier-colors { - $i: index($modifier-colors, $color); +@each $color in colors.$modifier-colors { + $i: list.index(colors.$modifier-colors, $color); - .btn--#{nth($modifier-color-names, $i)} { + .btn--#{list.nth(colors.$modifier-color-names, $i)} { background-color: $color; - color: nth($modifier-colors-fg, $i); + color: list.nth(colors.$modifier-colors-fg, $i); &:hover, &:focus { - color: nth($modifier-colors-fg, $i); - background-color: darken($color, 10); + color: list.nth(colors.$modifier-colors-fg, $i); + background-color: color.adjust($color, $lightness: -10%); } a { - color: nth($modifier-colors-fg, $i); + color: list.nth(colors.$modifier-colors-fg, $i); } } - .btn--#{nth($modifier-color-names, $i)}--alt { - background-color: complement($color); - color: nth($modifier-colors-fg, $i); + .btn--#{list.nth(colors.$modifier-color-names, $i)}--alt { + background-color: color.complement($color); + color: list.nth(colors.$modifier-colors-fg, $i); &:hover, &:focus { - color: nth($modifier-colors-fg, $i); - background-color: darken(complement($color), 10); + color: list.nth(colors.$modifier-colors-fg, $i); + background-color: color.adjust(color.complement($color), $lightness: -10%); } a { - color: nth($modifier-colors-fg, $i); + color: list.nth(colors.$modifier-colors-fg, $i); } } } @@ -124,6 +128,6 @@ $btn-names: 'white' gray-02 'green' 'blue' 'red' 'purple' 'yellow' 'orang } .btn--ios { - color: $white; - background-color: $black; + color: colors.$white; + background-color: colors.$black; } \ No newline at end of file diff --git a/source/_sass/elements/calendar.scss b/source/_sass/elements/calendar.scss index a5729eb..1827e48 100644 --- a/source/_sass/elements/calendar.scss +++ b/source/_sass/elements/calendar.scss @@ -24,7 +24,7 @@ tbody { td { - width: 1/7 * 100%; + width: calc(1 / 7) * 100%; } } } diff --git a/source/_sass/elements/form.scss b/source/_sass/elements/form.scss index ea51a44..e915be4 100644 --- a/source/_sass/elements/form.scss +++ b/source/_sass/elements/form.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../base/variables"; +@use "../colors"; + /** * Copyright 2025 Google LLC * @@ -23,12 +27,12 @@ select, textarea { background-color: white; - border: 1px solid $gray-06; + border: 1px solid colors.$gray-06; border-left: none; border-radius: 0 5px 5px 0; - color: $gray-02; + color: colors.$gray-02; display: table-cell; - font-family: $sans-serif; + font-family: variables.$sans-serif; font-size: 15px; margin: 0; padding: 7px; @@ -57,11 +61,11 @@ .select-style { background-color: white; border-radius: 0 5px 5px 0; - border: 1px solid $gray-06; + border: 1px solid colors.$gray-06; border-left-width: 0; - color: transparentize(#444, 0.5); + color: color.adjust(#444, $alpha: -0.5); display: table-cell; - font-family: $sans-serif; + font-family: variables.$sans-serif; font-size: 15px; margin: 0; overflow: hidden; @@ -90,7 +94,7 @@ label { background-color: #fff; - border: 1px solid $gray-06; + border: 1px solid colors.$gray-06; border-right: none; border-radius: 5px 0 0 5px; color: #111; @@ -105,8 +109,8 @@ } input.mce_inline_error { - background-color: lighten($dark-red, 40); - border: 1px solid $dark-red; + background-color: color.adjust(colors.$dark-red, $lightness: 40%); + border: 1px solid colors.$dark-red; } } diff --git a/source/_sass/elements/full-height.scss b/source/_sass/elements/full-height.scss index 89e1ed5..2e778d7 100644 --- a/source/_sass/elements/full-height.scss +++ b/source/_sass/elements/full-height.scss @@ -1,3 +1,5 @@ +@use "../responsive/utilities/mixins/breakpoints"; + /** * Copyright 2025 Google LLC * @@ -18,25 +20,25 @@ height: 100%; } -@include bp(xs) { +@include breakpoints.bp(xs) { .full-height--xs { height: 100%; } } -@include bp(s) { +@include breakpoints.bp(s) { .full-height--s { height: 100%; } } -@include bp(m) { +@include breakpoints.bp(m) { .full-height--m { height: 100%; } } -@include bp(l) { +@include breakpoints.bp(l) { .full-height--l { height: 100%; } diff --git a/source/_sass/elements/gray-box.scss b/source/_sass/elements/gray-box.scss index 598dd3b..939ea45 100644 --- a/source/_sass/elements/gray-box.scss +++ b/source/_sass/elements/gray-box.scss @@ -1,3 +1,6 @@ +@use "../base/variables"; +@use "../colors"; + /** * Copyright 2025 Google LLC * @@ -15,8 +18,8 @@ */ .gray-box { - background-color: $gray-04; - border-radius: $base-border-radius; + background-color: colors.$gray-04; + border-radius: variables.$base-border-radius; margin-bottom: 1em; overflow-x: hidden; padding: 1em; @@ -38,7 +41,7 @@ } h3 { - color: $gray-02; + color: colors.$gray-02; font-size: 1.3em; font-weight: 600; text-transform: uppercase; @@ -46,7 +49,7 @@ a, a:hover, a:active { - color: $gray-02; + color: colors.$gray-02; } a:hover, @@ -61,8 +64,8 @@ } .white-box { - background-color: $white; - border-radius: $base-border-radius; + background-color: colors.$white; + border-radius: variables.$base-border-radius; margin-bottom: 1em; padding: 0.5em; } diff --git a/source/_sass/elements/highlight.scss b/source/_sass/elements/highlight.scss index 8ac17b9..f121f87 100644 --- a/source/_sass/elements/highlight.scss +++ b/source/_sass/elements/highlight.scss @@ -1,3 +1,8 @@ +@use "../base/variables"; +@use "../bourbon/addons/font-family"; +@use "../colors"; +@use "../responsive/utilities/mixins/breakpoints"; + /** * Copyright 2025 Google LLC * @@ -15,15 +20,15 @@ */ .highlight { - background-color: $gray-07; - border-radius: $base-border-radius; + background-color: colors.$gray-07; + border-radius: variables.$base-border-radius; color: #f8f8f2; - font: 13px/1.3em $monospace; + font: 13px/1.3em font-family.$monospace; margin: 0 0 0.75em; padding: 10px; position: relative; - @include bp-max (xs) { + @include breakpoints.bp-max (xs) { font-size: 12px; } @@ -38,9 +43,9 @@ } .code-copy-link { - background-color: $turquoise; - border-radius: $base-border-radius; - color: $white; + background-color: colors.$turquoise; + border-radius: variables.$base-border-radius; + color: colors.$white; opacity: 0.1; padding: 0.3em 0.3em 0.3em 0.35em; position: absolute; @@ -293,5 +298,5 @@ } .highlight--large { - font: 15px/1.3em $monospace; + font: 15px/1.3em font-family.$monospace; } diff --git a/source/_sass/elements/inline-list.scss b/source/_sass/elements/inline-list.scss index 8e70ca0..6ff9921 100644 --- a/source/_sass/elements/inline-list.scss +++ b/source/_sass/elements/inline-list.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../base/variables"; +@use "../colors"; + /** * Copyright 2025 Google LLC * @@ -30,7 +34,7 @@ ul.inline-list { } .inline-list--piped li::after { - color: lighten($base-font-color, 30); + color: color.adjust(variables.$base-font-color, $lightness: 30%); content: ' | '; display: inline; } @@ -40,7 +44,7 @@ ul.inline-list { } .inline-list--dashed li::after { - color: lighten($base-font-color, 40); + color: color.adjust(variables.$base-font-color, $lightness: 40%); content: ' — '; display: inline; } @@ -54,7 +58,7 @@ ul.inline-list { li { background-color: #444; border-radius: 2px; - color: $white; + color: colors.$white; display: inline-block; font-size: 0.65em; font-weight: bold; diff --git a/source/_sass/elements/markdown.scss b/source/_sass/elements/markdown.scss index 5ab1be3..4a9c52d 100644 --- a/source/_sass/elements/markdown.scss +++ b/source/_sass/elements/markdown.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../colors"; +@use "../base/lists"; + /** * Copyright 2025 Google LLC * @@ -21,17 +25,17 @@ } ol { - @extend %default-ol; + @extend %default-ol; } - $table-border-color: $gray-06; + $table-border-color: colors.$gray-06; $table-border: 1px solid $table-border-color; - $table-background: $white; - $table-header-background: $gray-02; - $table-header-color: $white; - $table-hover-color: darken($table-background, 5); - $table-stripe-color: darken($table-background, 4); - $table-stripe-color-hover: darken($table-stripe-color, 5); + $table-background: colors.$white; + $table-header-background: colors.$gray-02; + $table-header-color: colors.$white; + $table-hover-color: color.adjust($table-background, $lightness: -5%); + $table-stripe-color: color.adjust($table-background, $lightness: -4%); + $table-stripe-color-hover: color.adjust($table-stripe-color, $lightness: -5%); $table-padding: 0.5em; table { diff --git a/source/_sass/elements/mobile-nav.scss b/source/_sass/elements/mobile-nav.scss index 642385e..93eaf5a 100644 --- a/source/_sass/elements/mobile-nav.scss +++ b/source/_sass/elements/mobile-nav.scss @@ -1,3 +1,9 @@ +@use "sass:color"; +@use "../colors"; +@use "../header"; +@use "../responsive/utilities/mixins/breakpoints"; +@use "../responsive/utilities/variables"; + /** * Copyright 2025 Google LLC * @@ -14,15 +20,15 @@ * limitations under the License. */ -$hamburger-width: $header-height; +$hamburger-width: header.$header-height; .mobile-nav { - background-color: $gray-03; + background-color: colors.$gray-03; bottom: 0; left: 0; overflow-y: auto; position: fixed; - top: $header-height; + top: header.$header-height; width: 90%; z-index: 200; @@ -42,36 +48,36 @@ $hamburger-width: $header-height; text-transform: uppercase; &:hover { - background-color: lighten($gray-03, 10); + background-color: color.adjust(colors.$gray-03, $lightness: 10%); } } .mainmenu__item.active a { - background-color: $gray-06; - color: $gray-03; + background-color: colors.$gray-06; + color: colors.$gray-03; } } .mobile-nav__hamburger { display: none; - @include bp-max (xs) { - border-bottom: 1px solid $gray-10; + @include breakpoints.bp-max (xs) { + border-bottom: 1px solid colors.$gray-10; display: block; position: fixed; - background-color: $white; + background-color: colors.$white; left: 0; width: $hamburger-width; top: 0; - height: $header-height; - padding: $base-font-size / 1.5 0; - font-size: $base-font-size * 2; + height: header.$header-height; + padding: calc(variables.$base-font-size / 1.5) 0; + font-size: variables.$base-font-size * 2; text-align: center; - color: $gray-03; + color: colors.$gray-03; &:hover, &:active { - color: $gray-03; + color: colors.$gray-03; } } } @@ -81,33 +87,33 @@ $hamburger-width: $header-height; } .mobile-nav--tutorials { - border-left: 5px solid $color-getting-started; + border-left: 5px solid colors.$color-getting-started; } .mobile-nav--sdk { - border-left: 5px solid $color-sdk; + border-left: 5px solid colors.$color-sdk; } .mobile-nav--guides { - border-left: 5px solid $color-guides; + border-left: 5px solid colors.$color-guides; } .mobile-nav--docs { - border-left: 5px solid $color-docs; + border-left: 5px solid colors.$color-docs; } .mobile-nav--examples { - border-left: 5px solid $color-examples; + border-left: 5px solid colors.$color-examples; } .mobile-nav--community { - border-left: 5px solid $color-community; + border-left: 5px solid colors.$color-community; } .mobile-nav--blog { - border-left: 5px solid $color-blog; + border-left: 5px solid colors.$color-blog; } .mobile-nav--more { - border-left: 5px solid $color-more; + border-left: 5px solid colors.$color-more; } diff --git a/source/_sass/elements/pagination.scss b/source/_sass/elements/pagination.scss index e14a4dc..3606dcd 100644 --- a/source/_sass/elements/pagination.scss +++ b/source/_sass/elements/pagination.scss @@ -1,3 +1,6 @@ +@use "../base/variables"; +@use "../colors"; + /** * Copyright 2025 Google LLC * @@ -22,23 +25,23 @@ } a { - border: 1px solid $gray-08; - border-radius: $base-border-radius; - color: $gray-02; + border: 1px solid colors.$gray-08; + border-radius: variables.$base-border-radius; + color: colors.$gray-02; display: block; padding: 0.5rem 1rem; &:hover { // background-color: lighten($base-link-color, 20); - border-color: $base-link-color; - color: $base-link-color; + border-color: variables.$base-link-color; + color: variables.$base-link-color; } } .active a { - background-color: $base-link-color; - color: $white; + background-color: variables.$base-link-color; + color: colors.$white; font-weight: bold; - border-color: $base-link-color; + border-color: variables.$base-link-color; } } diff --git a/source/_sass/elements/platform-choice.scss b/source/_sass/elements/platform-choice.scss index 088b0c8..7ec71ee 100644 --- a/source/_sass/elements/platform-choice.scss +++ b/source/_sass/elements/platform-choice.scss @@ -1,3 +1,6 @@ +@use "../base/variables"; +@use "../colors"; + /** * Copyright 2025 Google LLC * @@ -16,7 +19,7 @@ .platform-choice { padding: 0.5em; - border-radius: $base-border-radius; + border-radius: variables.$base-border-radius; } .platform-choice--large { @@ -33,7 +36,7 @@ img { display: block; float: left; - height: $unitless-line-height * 1em; + height: variables.$unitless-line-height * 1em; margin-right: 0.5em; } @@ -63,7 +66,7 @@ } h4 { - color: $white; + color: colors.$white; font-size: 0.9em; margin: 0.5em 0 0; text-align: center; diff --git a/source/_sass/elements/ribbon.scss b/source/_sass/elements/ribbon.scss index dc6074a..e1d8250 100644 --- a/source/_sass/elements/ribbon.scss +++ b/source/_sass/elements/ribbon.scss @@ -1,3 +1,6 @@ +@use "../bourbon/css3/transform"; +@use "../colors"; + /** * Copyright 2025 Google LLC * @@ -15,8 +18,8 @@ */ .ribbon { - @include transform(rotate(45deg)); - background-color: $pebble-green; + @include transform.transform(rotate(45deg)); + background-color: colors.$pebble-green; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); color: #fff; font-size: 19px; @@ -44,22 +47,22 @@ } .ribbon--bg-white { - background-color: $white; + background-color: colors.$white; } .ribbon--fg-dark-grey { - color: $dark-grey; + color: colors.$dark-grey; } .ribbon--bg-dark-red { - background-color: $dark-red; + background-color: colors.$dark-red; } .ribbon--fg-dark-red { - color: $dark-red; + color: colors.$dark-red; } .ribbon--fg-white { - color: $white; + color: colors.$white; } diff --git a/source/_sass/elements/screenshot.scss b/source/_sass/elements/screenshot.scss index 4a9ef43..22f599f 100644 --- a/source/_sass/elements/screenshot.scss +++ b/source/_sass/elements/screenshot.scss @@ -1,3 +1,5 @@ +@use "../colors"; + /** * Copyright 2025 Google LLC * @@ -265,8 +267,8 @@ -webkit-align-items: flex-end; h4 { - background-color: $gray-02; - color: $white; + background-color: colors.$gray-02; + color: colors.$white; font-weight: normal; text-transform: uppercase; font-size: 1.2em; @@ -286,14 +288,14 @@ .screenshot-viewer--tabbed { .screenshot-viewer__tabs { h4 { - border: 2px solid $gray-02; - background-color: $gray-06; - color: $gray-02; + border: 2px solid colors.$gray-02; + background-color: colors.$gray-06; + color: colors.$gray-02; cursor: pointer; &.selected { - background-color: $gray-02; - color: $white; + background-color: colors.$gray-02; + color: colors.$white; } } } diff --git a/source/_sass/elements/search.scss b/source/_sass/elements/search.scss index 990e18c..68191d9 100644 --- a/source/_sass/elements/search.scss +++ b/source/_sass/elements/search.scss @@ -1,3 +1,12 @@ +@use "../base/variables"; +@use "../colors"; +@use "../header"; +@use "../responsive/utilities/mixins/breakpoints"; +@use "../responsive/utilities/variables" as utilities-variables; + +// THIS IS A HACK I DON'T KNOW HOW TO FIX IT PROPERLY +$font-size: 15px; + /** * Copyright 2025 Google LLC * @@ -13,33 +22,36 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +@use "sidebar"; +@use "mobile-nav"; +@use "sectionmenu"; .search { - background-color: $white; - border-bottom: 1px solid $gray-10; - height: $header-height; - left: $sidebar-width; - padding: $base-font-size / 1.2; + background-color: colors.$white; + border-bottom: 1px solid colors.$gray-10; + height: header.$header-height; + left: sidebar.$sidebar-width; + padding: calc($font-size / 1.2); position: fixed; right: 0; top: 0; z-index: 100; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; - padding-left: $hamburger-width; + padding-left: mobile-nav.$hamburger-width; } input { -webkit-appearance: textfield; border: 0; box-shadow: none; - font-size: $base-font-size * 1.2; - padding: $base-font-size / 2; + font-size: $font-size * 1.2; + padding: calc($font-size / 2); padding-left: 2em; width: 100%; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { padding-left: 0; } @@ -56,28 +68,28 @@ } .search__icon { - font-size: $base-font-size * 1.2; - left: $base-font-size / 0.6; + font-size: $font-size * 1.2; + left: calc($font-size / 0.6); position: absolute; - top: $base-font-size / 0.6; + top: calc($font-size / 0.6); - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { display: none; } } .content--narrow .search { - left: $sidebar--wide-width; + left: sidebar.$sidebar--wide-width; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; } } .content--section-menu .search { - left: $sidebar-width + $section-menu-width; + left: sidebar.$sidebar-width + sectionmenu.$section-menu-width; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; } } @@ -86,20 +98,20 @@ background-color: #fff; border-bottom: 1px solid #d9d9d9; bottom: 10%; - left: $sidebar-width; + left: sidebar.$sidebar-width; overflow-y: scroll; padding: 0 1em 1em; position: fixed; right: 0; - top: $header-height - 2; + top: header.$header-height - 2; z-index: 200; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; } h3 { - font-size: 1.2 * $base-font-size; + font-size: 1.2 * $font-size; margin: 0.5em 0; text-transform: uppercase; } @@ -111,54 +123,54 @@ .quicksearch__block { h3 { - color: $white; + color: colors.$white; padding: 0 0.25rem; } } .quicksearch__block--guides { h3 { - background-color: $color-guides; - color: $base-font-color; + background-color: colors.$color-guides; + color: variables.$base-font-color; } } .quicksearch__block--docs { h3 { - background-color: $color-docs; + background-color: colors.$color-docs; } } .quicksearch__block--community { h3 { - background-color: $color-community; + background-color: colors.$color-community; } } .quicksearch__block--more{ h3 { - background-color: $color-more; + background-color: colors.$color-more; } } .quicksearch__block--other { h3 { - background-color: $color-other; + background-color: colors.$color-other; } } .quicksearch__result { - margin-bottom: 0.5 * $base-font-size; + margin-bottom: 0.5 * $font-size; overflow: hidden; text-overflow: ellipsis; } .quicksearch__summary { - font-size: 0.9 * $base-font-size; - line-height: 0.9 * $base-line-height; + font-size: 0.9 * $font-size; + line-height: 0.9 * utilities-variables.$base-line-height; margin: 0; - max-height: 0.9 * $base-line-height; + max-height: 0.9 * utilities-variables.$base-line-height; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -169,7 +181,7 @@ } .quicksearch__result__tag { - background-color: $color-docs; + background-color: colors.$color-docs; border-radius: 2px; color: #fff; display: inline-block; @@ -183,16 +195,16 @@ margin: 0; font-size: 0.75em; text-transform: uppercase; - color: $gray-11; + color: colors.$gray-11; font-weight: bold; width: auto; display: table; } .quicksearch__result--active { - background-color: $gray-01; - border-left: 2px solid $gray-03; - border-right: 2px solid $gray-03; + background-color: colors.$gray-01; + border-left: 2px solid colors.$gray-03; + border-right: 2px solid colors.$gray-03; margin: -5px -5px 2.5px; padding: 5px; } @@ -202,21 +214,21 @@ font-weight: 300; text-align: center; padding: 1em; - color: $gray-09; + color: colors.$gray-09; } .content--narrow .quicksearch { - left: $sidebar--wide-width; + left: sidebar.$sidebar--wide-width; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; } } .content--section-menu .quicksearch { - left: $sidebar-width + $section-menu-width; + left: sidebar.$sidebar-width + sectionmenu.$section-menu-width; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; } } @@ -224,25 +236,25 @@ #search__blackout { background-color: rgba(0, 0, 0, 0.7); bottom: 0; - left: $sidebar-width; + left: sidebar.$sidebar-width; position: fixed; right: 0; - top: $header-height; + top: header.$header-height; z-index: 150; } .content--narrow #search__blackout { - left: $sidebar--wide-width; + left: sidebar.$sidebar--wide-width; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; } } .content--section-menu #search__blackout { - left: $sidebar-width + $section-menu-width; + left: sidebar.$sidebar-width + sectionmenu.$section-menu-width; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; } } diff --git a/source/_sass/elements/sectionmenu.scss b/source/_sass/elements/sectionmenu.scss index 3b36783..430a852 100644 --- a/source/_sass/elements/sectionmenu.scss +++ b/source/_sass/elements/sectionmenu.scss @@ -1,3 +1,10 @@ +@use "sass:color"; +@use "../base/variables"; +@use "../colors"; +@use "../header"; +@use "../responsive/utilities/mixins/breakpoints"; +@use "../responsive/utilities/variables" as utilities-variables; + /** * Copyright 2025 Google LLC * @@ -13,18 +20,19 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +@use "sidebar"; $section-menu-width: 240px; .sidebar__wrapper--sectionmenu { - width: $sidebar-width + $section-menu-width; + width: sidebar.$sidebar-width + $section-menu-width; } .section-menu { - border-right: 1px solid $gray-08; + border-right: 1px solid colors.$gray-08; bottom: 0; - left: $sidebar-width; - margin-top: $header-height; + left: sidebar.$sidebar-width; + margin-top: header.$header-height; position: absolute; top: 0; width: $section-menu-width; @@ -34,21 +42,21 @@ $section-menu-width: 240px; padding: 1em; } - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { display: none; } } .content--section-menu { - margin-left: $sidebar-width + $section-menu-width; + padding-left: $section-menu-width; - @include bp-max ($sidebar-hide-at) { - margin-left: 0; + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { + padding-left: 0; } } .section-menu__header { - height: $header-height; + height: header.$header-height; padding: 0 1em; position: fixed; top: 0; @@ -56,19 +64,19 @@ $section-menu-width: 240px; h3 { border-bottom: 1px solid rgba(68,68,68,0.2); - font-size: $base-font-size * 1.2; + font-size: utilities-variables.$base-font-size * 1.2; font-weight: 400; margin-top: 3px; - padding: $base-line-height / 1.2 0; + padding: calc(utilities-variables.$base-line-height / 1.2) 0; text-transform: uppercase; width: 100%; } } .documentation-menu { - background-color: $color-docs; + background-color: colors.$color-docs; border-bottom: 1px solid rgba(68, 68, 68, 0.3); - border-right: 1px solid darken($color-docs, 10); + border-right: 1px solid color.adjust(colors.$color-docs, $lightness: -10%); box-shadow: rgba(68, 68, 68, 0.3) 0 5px 5px -5px; display: none; margin: -1em; @@ -78,7 +86,7 @@ $section-menu-width: 240px; padding: 0.5em 1em; &:hover { - background-color: darken($color-docs, 5); + background-color: color.adjust(colors.$color-docs, $lightness: -5%); } } } @@ -94,11 +102,11 @@ $section-menu-width: 240px; .section-menu__item { > a { - color: $gray-02; + color: colors.$gray-02; display: inline-block; font-size: 13px; font-weight: bold; - margin: $base-line-height / 4 0; + margin: calc(utilities-variables.$base-line-height / 4) 0; padding: 0.5em; } @@ -114,7 +122,7 @@ $section-menu-width: 240px; .section-menu__subitem { > a { - color: $gray-02; + color: colors.$gray-02; display: block; font-size: 13px; font-weight: 600; @@ -139,7 +147,7 @@ $section-menu-width: 240px; .section-menu__subsubitem { > a { - color: $gray-02; + color: colors.$gray-02; display: block; font-size: 12px; font-weight: normal; @@ -158,15 +166,15 @@ $section-menu-width: 240px; &, a, .section-menu__header a { - color: $white; + color: colors.$white; } .section-menu__item.active > a, .section-menu__subitem.active > a, .section-menu__subsubitem.active > a span { - background-color: $white; - border-radius: $base-border-radius; - color: $gray-02; + background-color: colors.$white; + border-radius: variables.$base-border-radius; + color: colors.$gray-02; } } @@ -175,68 +183,68 @@ $section-menu-width: 240px; &, a, .section-menu__header a { - color: $gray-02; + color: colors.$gray-02; } .section-menu__item.active > a, .section-menu__subitem.active > a, .section-menu__subsubitem.active > a span { - background-color: $gray-02; - border-radius: $base-border-radius; - color: $white; + background-color: colors.$gray-02; + border-radius: variables.$base-border-radius; + color: colors.$white; } } .section-menu--guides { - background-color: $color-guides; - border-right-color: darken($color-guides, 10); + background-color: colors.$color-guides; + border-right-color: color.adjust(colors.$color-guides, $lightness: -10%); .section-menu__header { - background-color: $color-guides; + background-color: colors.$color-guides; } } .section-menu--docs { - background-color: $color-docs; - border-right-color: darken($color-docs, 10); + background-color: colors.$color-docs; + border-right-color: color.adjust(colors.$color-docs, $lightness: -10%); .section-menu__header { - background-color: $color-docs; + background-color: colors.$color-docs; } } .section-menu--community { - background-color: $color-community; - border-right-color: darken($color-community, 10); + background-color: colors.$color-community; + border-right-color: color.adjust(colors.$color-community, $lightness: -10%); .section-menu__header { - background-color: $color-community; + background-color: colors.$color-community; } } .section-menu--sdk { - background-color: $color-sdk; - border-right-color: darken($color-sdk, 10); + background-color: colors.$color-sdk; + border-right-color: color.adjust(colors.$color-sdk, $lightness: -10%); .section-menu__header { - background-color: $color-sdk; + background-color: colors.$color-sdk; } } .section-menu--more { - background-color: $color-more; - border-right-color: darken($color-more, 10); + background-color: colors.$color-more; + border-right-color: color.adjust(colors.$color-more, $lightness: -10%); .section-menu__header { - background-color: $color-more; + background-color: colors.$color-more; } } .section-menu--getting-started { - background-color: $color-getting-started; - border-right-color: darken($color-getting-started, 10); + background-color: colors.$color-getting-started; + border-right-color: color.adjust(colors.$color-getting-started, $lightness: -10%); .section-menu__header { - background-color: $color-getting-started; + background-color: colors.$color-getting-started; } } diff --git a/source/_sass/elements/sidebar.scss b/source/_sass/elements/sidebar.scss index d148046..c810ecc 100644 --- a/source/_sass/elements/sidebar.scss +++ b/source/_sass/elements/sidebar.scss @@ -1,3 +1,10 @@ +@use "sass:color"; +@use "../base/variables"; +@use "../colors"; +@use "../header"; +@use "../responsive/utilities/mixins/breakpoints"; +@use "../responsive/utilities/variables" as utilities-variables; + /** * Copyright 2025 Google LLC * @@ -15,7 +22,7 @@ */ $sidebar-width: 105px; -$sidebar--wide-width: $header-logo-width; +$sidebar--wide-width: header.$header-logo-width; $sidebar-hide-at: xs; .sidebar__wrapper { @@ -26,7 +33,7 @@ $sidebar-hide-at: xs; left: 0; z-index: 10; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max ($sidebar-hide-at) { display: none; } } @@ -35,12 +42,12 @@ $sidebar-hide-at: xs; background-color: #f6f6f6; bottom: 0; left: 0; - padding-top: $header-height; + padding-top: header.$header-height; position: absolute; top: 0; width: $sidebar-width; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max ($sidebar-hide-at) { display: none; } } @@ -51,20 +58,20 @@ $sidebar-hide-at: xs; .sidebar__header { background-color: #222; - border-bottom: 2px solid $black; - color: $white; - font-size: $base-font-size * 1.2; - height: $header-height; + border-bottom: 2px solid colors.$black; + color: colors.$white; + font-size: utilities-variables.$base-font-size * 1.2; + height: header.$header-height; left: 0; - padding: $base-line-height / 1.2 0; + padding: calc(utilities-variables.$base-line-height / 1.2) 0; position: absolute; text-align: center; top: 0; width: $sidebar-width; &:hover { - background-color: $black; - color: $white; + background-color: colors.$black; + color: colors.$white; } span { @@ -81,8 +88,8 @@ $sidebar-hide-at: xs; display: block; } - > a { - background-color: lighten($base-link-color, 30); + >a { + background-color: color.adjust(variables.$base-link-color, $lightness: 30%); color: #fff; } } @@ -96,7 +103,7 @@ $sidebar-hide-at: xs; margin-left: $sidebar-width; height: 100%; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max ($sidebar-hide-at) { margin-left: 0; } } @@ -104,7 +111,7 @@ $sidebar-hide-at: xs; .content--narrow { margin-left: $sidebar--wide-width; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max ($sidebar-hide-at) { margin: 0; } } @@ -113,13 +120,13 @@ $sidebar-hide-at: xs; position: absolute; left: 0; right: 0; - bottom: 3 * $base-line-height; + bottom: 3 * utilities-variables.$base-line-height; font-size: 0.85em; padding: 1em 0; text-align: center; a { - color: $gray-03; + color: colors.$gray-03; &:hover { text-decoration: underline; @@ -128,14 +135,14 @@ $sidebar-hide-at: xs; } .sidebar__footer { - background-color: $color-appstore; - border-right: 1px solid darken($color-appstore, 10); + background-color: colors.$color-appstore; + border-right: 1px solid color.adjust(colors.$color-appstore, $lightness: -10%); bottom: 0; - color: $white; + color: colors.$white; font-weight: bold; - height: 3 * $base-line-height; + height: 3 * utilities-variables.$base-line-height; left: 0; - padding: $base-line-height 0; + padding: utilities-variables.$base-line-height 0; position: absolute; right: 0; text-align: center; @@ -143,9 +150,9 @@ $sidebar-hide-at: xs; &:hover, &.active { - background-color: darken($color-appstore, 10); - border-color: darken($color-appstore, 20); - color: $white; + background-color: color.adjust(colors.$color-appstore, $lightness: -10%); + border-color: color.adjust(colors.$color-appstore, $lightness: -20%); + color: colors.$white; } } @@ -155,8 +162,8 @@ $sidebar-hide-at: xs; span { background-color: #444; - border-radius: $base-border-radius; - color: $white; + border-radius: variables.$base-border-radius; + color: colors.$white; display: none; left: 80px; margin-top: -1.2em; @@ -176,7 +183,7 @@ $sidebar-hide-at: xs; } .mainmenu { - border-right: 1px solid $gray-08; + border-right: 1px solid colors.$gray-08; height: 100%; // I would like to enable scrolling on the Y axis but it breaks the tooltips. // overflow-x: visible; @@ -191,7 +198,7 @@ $sidebar-hide-at: xs; background-position: center center; background-repeat: no-repeat; background-size: 3em; - color: $gray-02; + color: colors.$gray-02; display: block; font-size: 13px; font-weight: bold; @@ -201,7 +208,7 @@ $sidebar-hide-at: xs; position: relative; text-transform: uppercase; - @media screen and ( max-height: 640px ){ + @media screen and (max-height: 640px) { margin: 0; } diff --git a/source/_sass/elements/spinner.scss b/source/_sass/elements/spinner.scss index a965d5c..78005ca 100644 --- a/source/_sass/elements/spinner.scss +++ b/source/_sass/elements/spinner.scss @@ -1,3 +1,6 @@ +@use "../bourbon/css3/animation"; +@use "../colors"; + /** * Copyright 2025 Google LLC * @@ -32,7 +35,7 @@ // zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement .spinner { - @include animation(0.5s spinner linear infinite); + @include animation.animation(0.5s spinner linear infinite); border-bottom: 1px solid; // 4 display: inline-block; font-size: 32px; // 3 @@ -69,7 +72,7 @@ .spinner--large { font-size: 64px; } // Color overrides. -.spinner--light { color: $white; } +.spinner--light { color: colors.$white; } .spinner--dark { color: #333; } .spinner--center { diff --git a/source/_sass/elements/toc.scss b/source/_sass/elements/toc.scss index ce391c7..a4c0412 100644 --- a/source/_sass/elements/toc.scss +++ b/source/_sass/elements/toc.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "../base/variables"; + /** * Copyright 2025 Google LLC * @@ -41,6 +44,6 @@ .toc__item--active { font-weight: 600; a { - color: darken($base-link-color, 20); + color: color.adjust(variables.$base-link-color, $lightness: -20%); } } diff --git a/source/_sass/font-awesome/_bordered-pulled.scss b/source/_sass/font-awesome/_bordered-pulled.scss index 9d3fdf3..58540d2 100644 --- a/source/_sass/font-awesome/_bordered-pulled.scss +++ b/source/_sass/font-awesome/_bordered-pulled.scss @@ -1,16 +1,18 @@ +@use "variables"; + // Bordered & Pulled // ------------------------- -.#{$fa-css-prefix}-border { +.#{variables.$fa-css-prefix}-border { padding: .2em .25em .15em; - border: solid .08em $fa-border-color; + border: solid .08em variables.$fa-border-color; border-radius: .1em; } .pull-right { float: right; } .pull-left { float: left; } -.#{$fa-css-prefix} { +.#{variables.$fa-css-prefix} { &.pull-left { margin-right: .3em; } &.pull-right { margin-left: .3em; } } diff --git a/source/_sass/font-awesome/_core.scss b/source/_sass/font-awesome/_core.scss index 861ccd9..49839b0 100644 --- a/source/_sass/font-awesome/_core.scss +++ b/source/_sass/font-awesome/_core.scss @@ -1,7 +1,9 @@ +@use "variables"; + // Base Class Definition // ------------------------- -.#{$fa-css-prefix} { +.#{variables.$fa-css-prefix} { display: inline-block; font-family: FontAwesome; font-style: normal; diff --git a/source/_sass/font-awesome/_fixed-width.scss b/source/_sass/font-awesome/_fixed-width.scss index b221c98..30a58d1 100644 --- a/source/_sass/font-awesome/_fixed-width.scss +++ b/source/_sass/font-awesome/_fixed-width.scss @@ -1,6 +1,8 @@ +@use "variables"; + // Fixed Width Icons // ------------------------- -.#{$fa-css-prefix}-fw { - width: (18em / 14); +.#{variables.$fa-css-prefix}-fw { + width: calc(18em / 14); text-align: center; } diff --git a/source/_sass/font-awesome/_icons.scss b/source/_sass/font-awesome/_icons.scss index efb4435..c0e94be 100644 --- a/source/_sass/font-awesome/_icons.scss +++ b/source/_sass/font-awesome/_icons.scss @@ -1,506 +1,508 @@ +@use "variables"; + /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ -.#{$fa-css-prefix}-glass:before { content: $fa-var-glass; } -.#{$fa-css-prefix}-music:before { content: $fa-var-music; } -.#{$fa-css-prefix}-search:before { content: $fa-var-search; } -.#{$fa-css-prefix}-envelope-o:before { content: $fa-var-envelope-o; } -.#{$fa-css-prefix}-heart:before { content: $fa-var-heart; } -.#{$fa-css-prefix}-star:before { content: $fa-var-star; } -.#{$fa-css-prefix}-star-o:before { content: $fa-var-star-o; } -.#{$fa-css-prefix}-user:before { content: $fa-var-user; } -.#{$fa-css-prefix}-film:before { content: $fa-var-film; } -.#{$fa-css-prefix}-th-large:before { content: $fa-var-th-large; } -.#{$fa-css-prefix}-th:before { content: $fa-var-th; } -.#{$fa-css-prefix}-th-list:before { content: $fa-var-th-list; } -.#{$fa-css-prefix}-check:before { content: $fa-var-check; } -.#{$fa-css-prefix}-times:before { content: $fa-var-times; } -.#{$fa-css-prefix}-search-plus:before { content: $fa-var-search-plus; } -.#{$fa-css-prefix}-search-minus:before { content: $fa-var-search-minus; } -.#{$fa-css-prefix}-power-off:before { content: $fa-var-power-off; } -.#{$fa-css-prefix}-signal:before { content: $fa-var-signal; } -.#{$fa-css-prefix}-gear:before, -.#{$fa-css-prefix}-cog:before { content: $fa-var-cog; } -.#{$fa-css-prefix}-trash-o:before { content: $fa-var-trash-o; } -.#{$fa-css-prefix}-home:before { content: $fa-var-home; } -.#{$fa-css-prefix}-file-o:before { content: $fa-var-file-o; } -.#{$fa-css-prefix}-clock-o:before { content: $fa-var-clock-o; } -.#{$fa-css-prefix}-road:before { content: $fa-var-road; } -.#{$fa-css-prefix}-download:before { content: $fa-var-download; } -.#{$fa-css-prefix}-arrow-circle-o-down:before { content: $fa-var-arrow-circle-o-down; } -.#{$fa-css-prefix}-arrow-circle-o-up:before { content: $fa-var-arrow-circle-o-up; } -.#{$fa-css-prefix}-inbox:before { content: $fa-var-inbox; } -.#{$fa-css-prefix}-play-circle-o:before { content: $fa-var-play-circle-o; } -.#{$fa-css-prefix}-rotate-right:before, -.#{$fa-css-prefix}-repeat:before { content: $fa-var-repeat; } -.#{$fa-css-prefix}-refresh:before { content: $fa-var-refresh; } -.#{$fa-css-prefix}-list-alt:before { content: $fa-var-list-alt; } -.#{$fa-css-prefix}-lock:before { content: $fa-var-lock; } -.#{$fa-css-prefix}-flag:before { content: $fa-var-flag; } -.#{$fa-css-prefix}-headphones:before { content: $fa-var-headphones; } -.#{$fa-css-prefix}-volume-off:before { content: $fa-var-volume-off; } -.#{$fa-css-prefix}-volume-down:before { content: $fa-var-volume-down; } -.#{$fa-css-prefix}-volume-up:before { content: $fa-var-volume-up; } -.#{$fa-css-prefix}-qrcode:before { content: $fa-var-qrcode; } -.#{$fa-css-prefix}-barcode:before { content: $fa-var-barcode; } -.#{$fa-css-prefix}-tag:before { content: $fa-var-tag; } -.#{$fa-css-prefix}-tags:before { content: $fa-var-tags; } -.#{$fa-css-prefix}-book:before { content: $fa-var-book; } -.#{$fa-css-prefix}-bookmark:before { content: $fa-var-bookmark; } -.#{$fa-css-prefix}-print:before { content: $fa-var-print; } -.#{$fa-css-prefix}-camera:before { content: $fa-var-camera; } -.#{$fa-css-prefix}-font:before { content: $fa-var-font; } -.#{$fa-css-prefix}-bold:before { content: $fa-var-bold; } -.#{$fa-css-prefix}-italic:before { content: $fa-var-italic; } -.#{$fa-css-prefix}-text-height:before { content: $fa-var-text-height; } -.#{$fa-css-prefix}-text-width:before { content: $fa-var-text-width; } -.#{$fa-css-prefix}-align-left:before { content: $fa-var-align-left; } -.#{$fa-css-prefix}-align-center:before { content: $fa-var-align-center; } -.#{$fa-css-prefix}-align-right:before { content: $fa-var-align-right; } -.#{$fa-css-prefix}-align-justify:before { content: $fa-var-align-justify; } -.#{$fa-css-prefix}-list:before { content: $fa-var-list; } -.#{$fa-css-prefix}-dedent:before, -.#{$fa-css-prefix}-outdent:before { content: $fa-var-outdent; } -.#{$fa-css-prefix}-indent:before { content: $fa-var-indent; } -.#{$fa-css-prefix}-video-camera:before { content: $fa-var-video-camera; } -.#{$fa-css-prefix}-photo:before, -.#{$fa-css-prefix}-image:before, -.#{$fa-css-prefix}-picture-o:before { content: $fa-var-picture-o; } -.#{$fa-css-prefix}-pencil:before { content: $fa-var-pencil; } -.#{$fa-css-prefix}-map-marker:before { content: $fa-var-map-marker; } -.#{$fa-css-prefix}-adjust:before { content: $fa-var-adjust; } -.#{$fa-css-prefix}-tint:before { content: $fa-var-tint; } -.#{$fa-css-prefix}-edit:before, -.#{$fa-css-prefix}-pencil-square-o:before { content: $fa-var-pencil-square-o; } -.#{$fa-css-prefix}-share-square-o:before { content: $fa-var-share-square-o; } -.#{$fa-css-prefix}-check-square-o:before { content: $fa-var-check-square-o; } -.#{$fa-css-prefix}-arrows:before { content: $fa-var-arrows; } -.#{$fa-css-prefix}-step-backward:before { content: $fa-var-step-backward; } -.#{$fa-css-prefix}-fast-backward:before { content: $fa-var-fast-backward; } -.#{$fa-css-prefix}-backward:before { content: $fa-var-backward; } -.#{$fa-css-prefix}-play:before { content: $fa-var-play; } -.#{$fa-css-prefix}-pause:before { content: $fa-var-pause; } -.#{$fa-css-prefix}-stop:before { content: $fa-var-stop; } -.#{$fa-css-prefix}-forward:before { content: $fa-var-forward; } -.#{$fa-css-prefix}-fast-forward:before { content: $fa-var-fast-forward; } -.#{$fa-css-prefix}-step-forward:before { content: $fa-var-step-forward; } -.#{$fa-css-prefix}-eject:before { content: $fa-var-eject; } -.#{$fa-css-prefix}-chevron-left:before { content: $fa-var-chevron-left; } -.#{$fa-css-prefix}-chevron-right:before { content: $fa-var-chevron-right; } -.#{$fa-css-prefix}-plus-circle:before { content: $fa-var-plus-circle; } -.#{$fa-css-prefix}-minus-circle:before { content: $fa-var-minus-circle; } -.#{$fa-css-prefix}-times-circle:before { content: $fa-var-times-circle; } -.#{$fa-css-prefix}-check-circle:before { content: $fa-var-check-circle; } -.#{$fa-css-prefix}-question-circle:before { content: $fa-var-question-circle; } -.#{$fa-css-prefix}-info-circle:before { content: $fa-var-info-circle; } -.#{$fa-css-prefix}-crosshairs:before { content: $fa-var-crosshairs; } -.#{$fa-css-prefix}-times-circle-o:before { content: $fa-var-times-circle-o; } -.#{$fa-css-prefix}-check-circle-o:before { content: $fa-var-check-circle-o; } -.#{$fa-css-prefix}-ban:before { content: $fa-var-ban; } -.#{$fa-css-prefix}-arrow-left:before { content: $fa-var-arrow-left; } -.#{$fa-css-prefix}-arrow-right:before { content: $fa-var-arrow-right; } -.#{$fa-css-prefix}-arrow-up:before { content: $fa-var-arrow-up; } -.#{$fa-css-prefix}-arrow-down:before { content: $fa-var-arrow-down; } -.#{$fa-css-prefix}-mail-forward:before, -.#{$fa-css-prefix}-share:before { content: $fa-var-share; } -.#{$fa-css-prefix}-expand:before { content: $fa-var-expand; } -.#{$fa-css-prefix}-compress:before { content: $fa-var-compress; } -.#{$fa-css-prefix}-plus:before { content: $fa-var-plus; } -.#{$fa-css-prefix}-minus:before { content: $fa-var-minus; } -.#{$fa-css-prefix}-asterisk:before { content: $fa-var-asterisk; } -.#{$fa-css-prefix}-exclamation-circle:before { content: $fa-var-exclamation-circle; } -.#{$fa-css-prefix}-gift:before { content: $fa-var-gift; } -.#{$fa-css-prefix}-leaf:before { content: $fa-var-leaf; } -.#{$fa-css-prefix}-fire:before { content: $fa-var-fire; } -.#{$fa-css-prefix}-eye:before { content: $fa-var-eye; } -.#{$fa-css-prefix}-eye-slash:before { content: $fa-var-eye-slash; } -.#{$fa-css-prefix}-warning:before, -.#{$fa-css-prefix}-exclamation-triangle:before { content: $fa-var-exclamation-triangle; } -.#{$fa-css-prefix}-plane:before { content: $fa-var-plane; } -.#{$fa-css-prefix}-calendar:before { content: $fa-var-calendar; } -.#{$fa-css-prefix}-random:before { content: $fa-var-random; } -.#{$fa-css-prefix}-comment:before { content: $fa-var-comment; } -.#{$fa-css-prefix}-magnet:before { content: $fa-var-magnet; } -.#{$fa-css-prefix}-chevron-up:before { content: $fa-var-chevron-up; } -.#{$fa-css-prefix}-chevron-down:before { content: $fa-var-chevron-down; } -.#{$fa-css-prefix}-retweet:before { content: $fa-var-retweet; } -.#{$fa-css-prefix}-shopping-cart:before { content: $fa-var-shopping-cart; } -.#{$fa-css-prefix}-folder:before { content: $fa-var-folder; } -.#{$fa-css-prefix}-folder-open:before { content: $fa-var-folder-open; } -.#{$fa-css-prefix}-arrows-v:before { content: $fa-var-arrows-v; } -.#{$fa-css-prefix}-arrows-h:before { content: $fa-var-arrows-h; } -.#{$fa-css-prefix}-bar-chart-o:before { content: $fa-var-bar-chart-o; } -.#{$fa-css-prefix}-twitter-square:before { content: $fa-var-twitter-square; } -.#{$fa-css-prefix}-facebook-square:before { content: $fa-var-facebook-square; } -.#{$fa-css-prefix}-camera-retro:before { content: $fa-var-camera-retro; } -.#{$fa-css-prefix}-key:before { content: $fa-var-key; } -.#{$fa-css-prefix}-gears:before, -.#{$fa-css-prefix}-cogs:before { content: $fa-var-cogs; } -.#{$fa-css-prefix}-comments:before { content: $fa-var-comments; } -.#{$fa-css-prefix}-thumbs-o-up:before { content: $fa-var-thumbs-o-up; } -.#{$fa-css-prefix}-thumbs-o-down:before { content: $fa-var-thumbs-o-down; } -.#{$fa-css-prefix}-star-half:before { content: $fa-var-star-half; } -.#{$fa-css-prefix}-heart-o:before { content: $fa-var-heart-o; } -.#{$fa-css-prefix}-sign-out:before { content: $fa-var-sign-out; } -.#{$fa-css-prefix}-linkedin-square:before { content: $fa-var-linkedin-square; } -.#{$fa-css-prefix}-thumb-tack:before { content: $fa-var-thumb-tack; } -.#{$fa-css-prefix}-external-link:before { content: $fa-var-external-link; } -.#{$fa-css-prefix}-sign-in:before { content: $fa-var-sign-in; } -.#{$fa-css-prefix}-trophy:before { content: $fa-var-trophy; } -.#{$fa-css-prefix}-github-square:before { content: $fa-var-github-square; } -.#{$fa-css-prefix}-upload:before { content: $fa-var-upload; } -.#{$fa-css-prefix}-lemon-o:before { content: $fa-var-lemon-o; } -.#{$fa-css-prefix}-phone:before { content: $fa-var-phone; } -.#{$fa-css-prefix}-square-o:before { content: $fa-var-square-o; } -.#{$fa-css-prefix}-bookmark-o:before { content: $fa-var-bookmark-o; } -.#{$fa-css-prefix}-phone-square:before { content: $fa-var-phone-square; } -.#{$fa-css-prefix}-twitter:before { content: $fa-var-twitter; } -.#{$fa-css-prefix}-facebook:before { content: $fa-var-facebook; } -.#{$fa-css-prefix}-github:before { content: $fa-var-github; } -.#{$fa-css-prefix}-unlock:before { content: $fa-var-unlock; } -.#{$fa-css-prefix}-credit-card:before { content: $fa-var-credit-card; } -.#{$fa-css-prefix}-rss:before { content: $fa-var-rss; } -.#{$fa-css-prefix}-hdd-o:before { content: $fa-var-hdd-o; } -.#{$fa-css-prefix}-bullhorn:before { content: $fa-var-bullhorn; } -.#{$fa-css-prefix}-bell:before { content: $fa-var-bell; } -.#{$fa-css-prefix}-certificate:before { content: $fa-var-certificate; } -.#{$fa-css-prefix}-hand-o-right:before { content: $fa-var-hand-o-right; } -.#{$fa-css-prefix}-hand-o-left:before { content: $fa-var-hand-o-left; } -.#{$fa-css-prefix}-hand-o-up:before { content: $fa-var-hand-o-up; } -.#{$fa-css-prefix}-hand-o-down:before { content: $fa-var-hand-o-down; } -.#{$fa-css-prefix}-arrow-circle-left:before { content: $fa-var-arrow-circle-left; } -.#{$fa-css-prefix}-arrow-circle-right:before { content: $fa-var-arrow-circle-right; } -.#{$fa-css-prefix}-arrow-circle-up:before { content: $fa-var-arrow-circle-up; } -.#{$fa-css-prefix}-arrow-circle-down:before { content: $fa-var-arrow-circle-down; } -.#{$fa-css-prefix}-globe:before { content: $fa-var-globe; } -.#{$fa-css-prefix}-wrench:before { content: $fa-var-wrench; } -.#{$fa-css-prefix}-tasks:before { content: $fa-var-tasks; } -.#{$fa-css-prefix}-filter:before { content: $fa-var-filter; } -.#{$fa-css-prefix}-briefcase:before { content: $fa-var-briefcase; } -.#{$fa-css-prefix}-arrows-alt:before { content: $fa-var-arrows-alt; } -.#{$fa-css-prefix}-group:before, -.#{$fa-css-prefix}-users:before { content: $fa-var-users; } -.#{$fa-css-prefix}-chain:before, -.#{$fa-css-prefix}-link:before { content: $fa-var-link; } -.#{$fa-css-prefix}-cloud:before { content: $fa-var-cloud; } -.#{$fa-css-prefix}-flask:before { content: $fa-var-flask; } -.#{$fa-css-prefix}-cut:before, -.#{$fa-css-prefix}-scissors:before { content: $fa-var-scissors; } -.#{$fa-css-prefix}-copy:before, -.#{$fa-css-prefix}-files-o:before { content: $fa-var-files-o; } -.#{$fa-css-prefix}-paperclip:before { content: $fa-var-paperclip; } -.#{$fa-css-prefix}-save:before, -.#{$fa-css-prefix}-floppy-o:before { content: $fa-var-floppy-o; } -.#{$fa-css-prefix}-square:before { content: $fa-var-square; } -.#{$fa-css-prefix}-navicon:before, -.#{$fa-css-prefix}-reorder:before, -.#{$fa-css-prefix}-bars:before { content: $fa-var-bars; } -.#{$fa-css-prefix}-list-ul:before { content: $fa-var-list-ul; } -.#{$fa-css-prefix}-list-ol:before { content: $fa-var-list-ol; } -.#{$fa-css-prefix}-strikethrough:before { content: $fa-var-strikethrough; } -.#{$fa-css-prefix}-underline:before { content: $fa-var-underline; } -.#{$fa-css-prefix}-table:before { content: $fa-var-table; } -.#{$fa-css-prefix}-magic:before { content: $fa-var-magic; } -.#{$fa-css-prefix}-truck:before { content: $fa-var-truck; } -.#{$fa-css-prefix}-pinterest:before { content: $fa-var-pinterest; } -.#{$fa-css-prefix}-pinterest-square:before { content: $fa-var-pinterest-square; } -.#{$fa-css-prefix}-google-plus-square:before { content: $fa-var-google-plus-square; } -.#{$fa-css-prefix}-google-plus:before { content: $fa-var-google-plus; } -.#{$fa-css-prefix}-money:before { content: $fa-var-money; } -.#{$fa-css-prefix}-caret-down:before { content: $fa-var-caret-down; } -.#{$fa-css-prefix}-caret-up:before { content: $fa-var-caret-up; } -.#{$fa-css-prefix}-caret-left:before { content: $fa-var-caret-left; } -.#{$fa-css-prefix}-caret-right:before { content: $fa-var-caret-right; } -.#{$fa-css-prefix}-columns:before { content: $fa-var-columns; } -.#{$fa-css-prefix}-unsorted:before, -.#{$fa-css-prefix}-sort:before { content: $fa-var-sort; } -.#{$fa-css-prefix}-sort-down:before, -.#{$fa-css-prefix}-sort-desc:before { content: $fa-var-sort-desc; } -.#{$fa-css-prefix}-sort-up:before, -.#{$fa-css-prefix}-sort-asc:before { content: $fa-var-sort-asc; } -.#{$fa-css-prefix}-envelope:before { content: $fa-var-envelope; } -.#{$fa-css-prefix}-linkedin:before { content: $fa-var-linkedin; } -.#{$fa-css-prefix}-rotate-left:before, -.#{$fa-css-prefix}-undo:before { content: $fa-var-undo; } -.#{$fa-css-prefix}-legal:before, -.#{$fa-css-prefix}-gavel:before { content: $fa-var-gavel; } -.#{$fa-css-prefix}-dashboard:before, -.#{$fa-css-prefix}-tachometer:before { content: $fa-var-tachometer; } -.#{$fa-css-prefix}-comment-o:before { content: $fa-var-comment-o; } -.#{$fa-css-prefix}-comments-o:before { content: $fa-var-comments-o; } -.#{$fa-css-prefix}-flash:before, -.#{$fa-css-prefix}-bolt:before { content: $fa-var-bolt; } -.#{$fa-css-prefix}-sitemap:before { content: $fa-var-sitemap; } -.#{$fa-css-prefix}-umbrella:before { content: $fa-var-umbrella; } -.#{$fa-css-prefix}-paste:before, -.#{$fa-css-prefix}-clipboard:before { content: $fa-var-clipboard; } -.#{$fa-css-prefix}-lightbulb-o:before { content: $fa-var-lightbulb-o; } -.#{$fa-css-prefix}-exchange:before { content: $fa-var-exchange; } -.#{$fa-css-prefix}-cloud-download:before { content: $fa-var-cloud-download; } -.#{$fa-css-prefix}-cloud-upload:before { content: $fa-var-cloud-upload; } -.#{$fa-css-prefix}-user-md:before { content: $fa-var-user-md; } -.#{$fa-css-prefix}-stethoscope:before { content: $fa-var-stethoscope; } -.#{$fa-css-prefix}-suitcase:before { content: $fa-var-suitcase; } -.#{$fa-css-prefix}-bell-o:before { content: $fa-var-bell-o; } -.#{$fa-css-prefix}-coffee:before { content: $fa-var-coffee; } -.#{$fa-css-prefix}-cutlery:before { content: $fa-var-cutlery; } -.#{$fa-css-prefix}-file-text-o:before { content: $fa-var-file-text-o; } -.#{$fa-css-prefix}-building-o:before { content: $fa-var-building-o; } -.#{$fa-css-prefix}-hospital-o:before { content: $fa-var-hospital-o; } -.#{$fa-css-prefix}-ambulance:before { content: $fa-var-ambulance; } -.#{$fa-css-prefix}-medkit:before { content: $fa-var-medkit; } -.#{$fa-css-prefix}-fighter-jet:before { content: $fa-var-fighter-jet; } -.#{$fa-css-prefix}-beer:before { content: $fa-var-beer; } -.#{$fa-css-prefix}-h-square:before { content: $fa-var-h-square; } -.#{$fa-css-prefix}-plus-square:before { content: $fa-var-plus-square; } -.#{$fa-css-prefix}-angle-double-left:before { content: $fa-var-angle-double-left; } -.#{$fa-css-prefix}-angle-double-right:before { content: $fa-var-angle-double-right; } -.#{$fa-css-prefix}-angle-double-up:before { content: $fa-var-angle-double-up; } -.#{$fa-css-prefix}-angle-double-down:before { content: $fa-var-angle-double-down; } -.#{$fa-css-prefix}-angle-left:before { content: $fa-var-angle-left; } -.#{$fa-css-prefix}-angle-right:before { content: $fa-var-angle-right; } -.#{$fa-css-prefix}-angle-up:before { content: $fa-var-angle-up; } -.#{$fa-css-prefix}-angle-down:before { content: $fa-var-angle-down; } -.#{$fa-css-prefix}-desktop:before { content: $fa-var-desktop; } -.#{$fa-css-prefix}-laptop:before { content: $fa-var-laptop; } -.#{$fa-css-prefix}-tablet:before { content: $fa-var-tablet; } -.#{$fa-css-prefix}-mobile-phone:before, -.#{$fa-css-prefix}-mobile:before { content: $fa-var-mobile; } -.#{$fa-css-prefix}-circle-o:before { content: $fa-var-circle-o; } -.#{$fa-css-prefix}-quote-left:before { content: $fa-var-quote-left; } -.#{$fa-css-prefix}-quote-right:before { content: $fa-var-quote-right; } -.#{$fa-css-prefix}-spinner:before { content: $fa-var-spinner; } -.#{$fa-css-prefix}-circle:before { content: $fa-var-circle; } -.#{$fa-css-prefix}-mail-reply:before, -.#{$fa-css-prefix}-reply:before { content: $fa-var-reply; } -.#{$fa-css-prefix}-github-alt:before { content: $fa-var-github-alt; } -.#{$fa-css-prefix}-folder-o:before { content: $fa-var-folder-o; } -.#{$fa-css-prefix}-folder-open-o:before { content: $fa-var-folder-open-o; } -.#{$fa-css-prefix}-smile-o:before { content: $fa-var-smile-o; } -.#{$fa-css-prefix}-frown-o:before { content: $fa-var-frown-o; } -.#{$fa-css-prefix}-meh-o:before { content: $fa-var-meh-o; } -.#{$fa-css-prefix}-gamepad:before { content: $fa-var-gamepad; } -.#{$fa-css-prefix}-keyboard-o:before { content: $fa-var-keyboard-o; } -.#{$fa-css-prefix}-flag-o:before { content: $fa-var-flag-o; } -.#{$fa-css-prefix}-flag-checkered:before { content: $fa-var-flag-checkered; } -.#{$fa-css-prefix}-terminal:before { content: $fa-var-terminal; } -.#{$fa-css-prefix}-code:before { content: $fa-var-code; } -.#{$fa-css-prefix}-mail-reply-all:before, -.#{$fa-css-prefix}-reply-all:before { content: $fa-var-reply-all; } -.#{$fa-css-prefix}-star-half-empty:before, -.#{$fa-css-prefix}-star-half-full:before, -.#{$fa-css-prefix}-star-half-o:before { content: $fa-var-star-half-o; } -.#{$fa-css-prefix}-location-arrow:before { content: $fa-var-location-arrow; } -.#{$fa-css-prefix}-crop:before { content: $fa-var-crop; } -.#{$fa-css-prefix}-code-fork:before { content: $fa-var-code-fork; } -.#{$fa-css-prefix}-unlink:before, -.#{$fa-css-prefix}-chain-broken:before { content: $fa-var-chain-broken; } -.#{$fa-css-prefix}-question:before { content: $fa-var-question; } -.#{$fa-css-prefix}-info:before { content: $fa-var-info; } -.#{$fa-css-prefix}-exclamation:before { content: $fa-var-exclamation; } -.#{$fa-css-prefix}-superscript:before { content: $fa-var-superscript; } -.#{$fa-css-prefix}-subscript:before { content: $fa-var-subscript; } -.#{$fa-css-prefix}-eraser:before { content: $fa-var-eraser; } -.#{$fa-css-prefix}-puzzle-piece:before { content: $fa-var-puzzle-piece; } -.#{$fa-css-prefix}-microphone:before { content: $fa-var-microphone; } -.#{$fa-css-prefix}-microphone-slash:before { content: $fa-var-microphone-slash; } -.#{$fa-css-prefix}-shield:before { content: $fa-var-shield; } -.#{$fa-css-prefix}-calendar-o:before { content: $fa-var-calendar-o; } -.#{$fa-css-prefix}-fire-extinguisher:before { content: $fa-var-fire-extinguisher; } -.#{$fa-css-prefix}-rocket:before { content: $fa-var-rocket; } -.#{$fa-css-prefix}-maxcdn:before { content: $fa-var-maxcdn; } -.#{$fa-css-prefix}-chevron-circle-left:before { content: $fa-var-chevron-circle-left; } -.#{$fa-css-prefix}-chevron-circle-right:before { content: $fa-var-chevron-circle-right; } -.#{$fa-css-prefix}-chevron-circle-up:before { content: $fa-var-chevron-circle-up; } -.#{$fa-css-prefix}-chevron-circle-down:before { content: $fa-var-chevron-circle-down; } -.#{$fa-css-prefix}-html5:before { content: $fa-var-html5; } -.#{$fa-css-prefix}-css3:before { content: $fa-var-css3; } -.#{$fa-css-prefix}-anchor:before { content: $fa-var-anchor; } -.#{$fa-css-prefix}-unlock-alt:before { content: $fa-var-unlock-alt; } -.#{$fa-css-prefix}-bullseye:before { content: $fa-var-bullseye; } -.#{$fa-css-prefix}-ellipsis-h:before { content: $fa-var-ellipsis-h; } -.#{$fa-css-prefix}-ellipsis-v:before { content: $fa-var-ellipsis-v; } -.#{$fa-css-prefix}-rss-square:before { content: $fa-var-rss-square; } -.#{$fa-css-prefix}-play-circle:before { content: $fa-var-play-circle; } -.#{$fa-css-prefix}-ticket:before { content: $fa-var-ticket; } -.#{$fa-css-prefix}-minus-square:before { content: $fa-var-minus-square; } -.#{$fa-css-prefix}-minus-square-o:before { content: $fa-var-minus-square-o; } -.#{$fa-css-prefix}-level-up:before { content: $fa-var-level-up; } -.#{$fa-css-prefix}-level-down:before { content: $fa-var-level-down; } -.#{$fa-css-prefix}-check-square:before { content: $fa-var-check-square; } -.#{$fa-css-prefix}-pencil-square:before { content: $fa-var-pencil-square; } -.#{$fa-css-prefix}-external-link-square:before { content: $fa-var-external-link-square; } -.#{$fa-css-prefix}-share-square:before { content: $fa-var-share-square; } -.#{$fa-css-prefix}-compass:before { content: $fa-var-compass; } -.#{$fa-css-prefix}-toggle-down:before, -.#{$fa-css-prefix}-caret-square-o-down:before { content: $fa-var-caret-square-o-down; } -.#{$fa-css-prefix}-toggle-up:before, -.#{$fa-css-prefix}-caret-square-o-up:before { content: $fa-var-caret-square-o-up; } -.#{$fa-css-prefix}-toggle-right:before, -.#{$fa-css-prefix}-caret-square-o-right:before { content: $fa-var-caret-square-o-right; } -.#{$fa-css-prefix}-euro:before, -.#{$fa-css-prefix}-eur:before { content: $fa-var-eur; } -.#{$fa-css-prefix}-gbp:before { content: $fa-var-gbp; } -.#{$fa-css-prefix}-dollar:before, -.#{$fa-css-prefix}-usd:before { content: $fa-var-usd; } -.#{$fa-css-prefix}-rupee:before, -.#{$fa-css-prefix}-inr:before { content: $fa-var-inr; } -.#{$fa-css-prefix}-cny:before, -.#{$fa-css-prefix}-rmb:before, -.#{$fa-css-prefix}-yen:before, -.#{$fa-css-prefix}-jpy:before { content: $fa-var-jpy; } -.#{$fa-css-prefix}-ruble:before, -.#{$fa-css-prefix}-rouble:before, -.#{$fa-css-prefix}-rub:before { content: $fa-var-rub; } -.#{$fa-css-prefix}-won:before, -.#{$fa-css-prefix}-krw:before { content: $fa-var-krw; } -.#{$fa-css-prefix}-bitcoin:before, -.#{$fa-css-prefix}-btc:before { content: $fa-var-btc; } -.#{$fa-css-prefix}-file:before { content: $fa-var-file; } -.#{$fa-css-prefix}-file-text:before { content: $fa-var-file-text; } -.#{$fa-css-prefix}-sort-alpha-asc:before { content: $fa-var-sort-alpha-asc; } -.#{$fa-css-prefix}-sort-alpha-desc:before { content: $fa-var-sort-alpha-desc; } -.#{$fa-css-prefix}-sort-amount-asc:before { content: $fa-var-sort-amount-asc; } -.#{$fa-css-prefix}-sort-amount-desc:before { content: $fa-var-sort-amount-desc; } -.#{$fa-css-prefix}-sort-numeric-asc:before { content: $fa-var-sort-numeric-asc; } -.#{$fa-css-prefix}-sort-numeric-desc:before { content: $fa-var-sort-numeric-desc; } -.#{$fa-css-prefix}-thumbs-up:before { content: $fa-var-thumbs-up; } -.#{$fa-css-prefix}-thumbs-down:before { content: $fa-var-thumbs-down; } -.#{$fa-css-prefix}-youtube-square:before { content: $fa-var-youtube-square; } -.#{$fa-css-prefix}-youtube:before { content: $fa-var-youtube; } -.#{$fa-css-prefix}-xing:before { content: $fa-var-xing; } -.#{$fa-css-prefix}-xing-square:before { content: $fa-var-xing-square; } -.#{$fa-css-prefix}-youtube-play:before { content: $fa-var-youtube-play; } -.#{$fa-css-prefix}-dropbox:before { content: $fa-var-dropbox; } -.#{$fa-css-prefix}-stack-overflow:before { content: $fa-var-stack-overflow; } -.#{$fa-css-prefix}-instagram:before { content: $fa-var-instagram; } -.#{$fa-css-prefix}-flickr:before { content: $fa-var-flickr; } -.#{$fa-css-prefix}-adn:before { content: $fa-var-adn; } -.#{$fa-css-prefix}-bitbucket:before { content: $fa-var-bitbucket; } -.#{$fa-css-prefix}-bitbucket-square:before { content: $fa-var-bitbucket-square; } -.#{$fa-css-prefix}-tumblr:before { content: $fa-var-tumblr; } -.#{$fa-css-prefix}-tumblr-square:before { content: $fa-var-tumblr-square; } -.#{$fa-css-prefix}-long-arrow-down:before { content: $fa-var-long-arrow-down; } -.#{$fa-css-prefix}-long-arrow-up:before { content: $fa-var-long-arrow-up; } -.#{$fa-css-prefix}-long-arrow-left:before { content: $fa-var-long-arrow-left; } -.#{$fa-css-prefix}-long-arrow-right:before { content: $fa-var-long-arrow-right; } -.#{$fa-css-prefix}-apple:before { content: $fa-var-apple; } -.#{$fa-css-prefix}-windows:before { content: $fa-var-windows; } -.#{$fa-css-prefix}-android:before { content: $fa-var-android; } -.#{$fa-css-prefix}-linux:before { content: $fa-var-linux; } -.#{$fa-css-prefix}-dribbble:before { content: $fa-var-dribbble; } -.#{$fa-css-prefix}-skype:before { content: $fa-var-skype; } -.#{$fa-css-prefix}-foursquare:before { content: $fa-var-foursquare; } -.#{$fa-css-prefix}-trello:before { content: $fa-var-trello; } -.#{$fa-css-prefix}-female:before { content: $fa-var-female; } -.#{$fa-css-prefix}-male:before { content: $fa-var-male; } -.#{$fa-css-prefix}-gittip:before { content: $fa-var-gittip; } -.#{$fa-css-prefix}-sun-o:before { content: $fa-var-sun-o; } -.#{$fa-css-prefix}-moon-o:before { content: $fa-var-moon-o; } -.#{$fa-css-prefix}-archive:before { content: $fa-var-archive; } -.#{$fa-css-prefix}-bug:before { content: $fa-var-bug; } -.#{$fa-css-prefix}-vk:before { content: $fa-var-vk; } -.#{$fa-css-prefix}-weibo:before { content: $fa-var-weibo; } -.#{$fa-css-prefix}-renren:before { content: $fa-var-renren; } -.#{$fa-css-prefix}-pagelines:before { content: $fa-var-pagelines; } -.#{$fa-css-prefix}-stack-exchange:before { content: $fa-var-stack-exchange; } -.#{$fa-css-prefix}-arrow-circle-o-right:before { content: $fa-var-arrow-circle-o-right; } -.#{$fa-css-prefix}-arrow-circle-o-left:before { content: $fa-var-arrow-circle-o-left; } -.#{$fa-css-prefix}-toggle-left:before, -.#{$fa-css-prefix}-caret-square-o-left:before { content: $fa-var-caret-square-o-left; } -.#{$fa-css-prefix}-dot-circle-o:before { content: $fa-var-dot-circle-o; } -.#{$fa-css-prefix}-wheelchair:before { content: $fa-var-wheelchair; } -.#{$fa-css-prefix}-vimeo-square:before { content: $fa-var-vimeo-square; } -.#{$fa-css-prefix}-turkish-lira:before, -.#{$fa-css-prefix}-try:before { content: $fa-var-try; } -.#{$fa-css-prefix}-plus-square-o:before { content: $fa-var-plus-square-o; } -.#{$fa-css-prefix}-space-shuttle:before { content: $fa-var-space-shuttle; } -.#{$fa-css-prefix}-slack:before { content: $fa-var-slack; } -.#{$fa-css-prefix}-envelope-square:before { content: $fa-var-envelope-square; } -.#{$fa-css-prefix}-wordpress:before { content: $fa-var-wordpress; } -.#{$fa-css-prefix}-openid:before { content: $fa-var-openid; } -.#{$fa-css-prefix}-institution:before, -.#{$fa-css-prefix}-bank:before, -.#{$fa-css-prefix}-university:before { content: $fa-var-university; } -.#{$fa-css-prefix}-mortar-board:before, -.#{$fa-css-prefix}-graduation-cap:before { content: $fa-var-graduation-cap; } -.#{$fa-css-prefix}-yahoo:before { content: $fa-var-yahoo; } -.#{$fa-css-prefix}-google:before { content: $fa-var-google; } -.#{$fa-css-prefix}-reddit:before { content: $fa-var-reddit; } -.#{$fa-css-prefix}-reddit-square:before { content: $fa-var-reddit-square; } -.#{$fa-css-prefix}-stumbleupon-circle:before { content: $fa-var-stumbleupon-circle; } -.#{$fa-css-prefix}-stumbleupon:before { content: $fa-var-stumbleupon; } -.#{$fa-css-prefix}-delicious:before { content: $fa-var-delicious; } -.#{$fa-css-prefix}-digg:before { content: $fa-var-digg; } -.#{$fa-css-prefix}-pied-piper-square:before, -.#{$fa-css-prefix}-pied-piper:before { content: $fa-var-pied-piper; } -.#{$fa-css-prefix}-pied-piper-alt:before { content: $fa-var-pied-piper-alt; } -.#{$fa-css-prefix}-drupal:before { content: $fa-var-drupal; } -.#{$fa-css-prefix}-joomla:before { content: $fa-var-joomla; } -.#{$fa-css-prefix}-language:before { content: $fa-var-language; } -.#{$fa-css-prefix}-fax:before { content: $fa-var-fax; } -.#{$fa-css-prefix}-building:before { content: $fa-var-building; } -.#{$fa-css-prefix}-child:before { content: $fa-var-child; } -.#{$fa-css-prefix}-paw:before { content: $fa-var-paw; } -.#{$fa-css-prefix}-spoon:before { content: $fa-var-spoon; } -.#{$fa-css-prefix}-cube:before { content: $fa-var-cube; } -.#{$fa-css-prefix}-cubes:before { content: $fa-var-cubes; } -.#{$fa-css-prefix}-behance:before { content: $fa-var-behance; } -.#{$fa-css-prefix}-behance-square:before { content: $fa-var-behance-square; } -.#{$fa-css-prefix}-steam:before { content: $fa-var-steam; } -.#{$fa-css-prefix}-steam-square:before { content: $fa-var-steam-square; } -.#{$fa-css-prefix}-recycle:before { content: $fa-var-recycle; } -.#{$fa-css-prefix}-automobile:before, -.#{$fa-css-prefix}-car:before { content: $fa-var-car; } -.#{$fa-css-prefix}-cab:before, -.#{$fa-css-prefix}-taxi:before { content: $fa-var-taxi; } -.#{$fa-css-prefix}-tree:before { content: $fa-var-tree; } -.#{$fa-css-prefix}-spotify:before { content: $fa-var-spotify; } -.#{$fa-css-prefix}-deviantart:before { content: $fa-var-deviantart; } -.#{$fa-css-prefix}-soundcloud:before { content: $fa-var-soundcloud; } -.#{$fa-css-prefix}-database:before { content: $fa-var-database; } -.#{$fa-css-prefix}-file-pdf-o:before { content: $fa-var-file-pdf-o; } -.#{$fa-css-prefix}-file-word-o:before { content: $fa-var-file-word-o; } -.#{$fa-css-prefix}-file-excel-o:before { content: $fa-var-file-excel-o; } -.#{$fa-css-prefix}-file-powerpoint-o:before { content: $fa-var-file-powerpoint-o; } -.#{$fa-css-prefix}-file-photo-o:before, -.#{$fa-css-prefix}-file-picture-o:before, -.#{$fa-css-prefix}-file-image-o:before { content: $fa-var-file-image-o; } -.#{$fa-css-prefix}-file-zip-o:before, -.#{$fa-css-prefix}-file-archive-o:before { content: $fa-var-file-archive-o; } -.#{$fa-css-prefix}-file-sound-o:before, -.#{$fa-css-prefix}-file-audio-o:before { content: $fa-var-file-audio-o; } -.#{$fa-css-prefix}-file-movie-o:before, -.#{$fa-css-prefix}-file-video-o:before { content: $fa-var-file-video-o; } -.#{$fa-css-prefix}-file-code-o:before { content: $fa-var-file-code-o; } -.#{$fa-css-prefix}-vine:before { content: $fa-var-vine; } -.#{$fa-css-prefix}-codepen:before { content: $fa-var-codepen; } -.#{$fa-css-prefix}-jsfiddle:before { content: $fa-var-jsfiddle; } -.#{$fa-css-prefix}-life-bouy:before, -.#{$fa-css-prefix}-life-saver:before, -.#{$fa-css-prefix}-support:before, -.#{$fa-css-prefix}-life-ring:before { content: $fa-var-life-ring; } -.#{$fa-css-prefix}-circle-o-notch:before { content: $fa-var-circle-o-notch; } -.#{$fa-css-prefix}-ra:before, -.#{$fa-css-prefix}-rebel:before { content: $fa-var-rebel; } -.#{$fa-css-prefix}-ge:before, -.#{$fa-css-prefix}-empire:before { content: $fa-var-empire; } -.#{$fa-css-prefix}-git-square:before { content: $fa-var-git-square; } -.#{$fa-css-prefix}-git:before { content: $fa-var-git; } -.#{$fa-css-prefix}-hacker-news:before { content: $fa-var-hacker-news; } -.#{$fa-css-prefix}-tencent-weibo:before { content: $fa-var-tencent-weibo; } -.#{$fa-css-prefix}-qq:before { content: $fa-var-qq; } -.#{$fa-css-prefix}-wechat:before, -.#{$fa-css-prefix}-weixin:before { content: $fa-var-weixin; } -.#{$fa-css-prefix}-send:before, -.#{$fa-css-prefix}-paper-plane:before { content: $fa-var-paper-plane; } -.#{$fa-css-prefix}-send-o:before, -.#{$fa-css-prefix}-paper-plane-o:before { content: $fa-var-paper-plane-o; } -.#{$fa-css-prefix}-history:before { content: $fa-var-history; } -.#{$fa-css-prefix}-circle-thin:before { content: $fa-var-circle-thin; } -.#{$fa-css-prefix}-header:before { content: $fa-var-header; } -.#{$fa-css-prefix}-paragraph:before { content: $fa-var-paragraph; } -.#{$fa-css-prefix}-sliders:before { content: $fa-var-sliders; } -.#{$fa-css-prefix}-share-alt:before { content: $fa-var-share-alt; } -.#{$fa-css-prefix}-share-alt-square:before { content: $fa-var-share-alt-square; } -.#{$fa-css-prefix}-bomb:before { content: $fa-var-bomb; } +.#{variables.$fa-css-prefix}-glass:before { content: variables.$fa-var-glass; } +.#{variables.$fa-css-prefix}-music:before { content: variables.$fa-var-music; } +.#{variables.$fa-css-prefix}-search:before { content: variables.$fa-var-search; } +.#{variables.$fa-css-prefix}-envelope-o:before { content: variables.$fa-var-envelope-o; } +.#{variables.$fa-css-prefix}-heart:before { content: variables.$fa-var-heart; } +.#{variables.$fa-css-prefix}-star:before { content: variables.$fa-var-star; } +.#{variables.$fa-css-prefix}-star-o:before { content: variables.$fa-var-star-o; } +.#{variables.$fa-css-prefix}-user:before { content: variables.$fa-var-user; } +.#{variables.$fa-css-prefix}-film:before { content: variables.$fa-var-film; } +.#{variables.$fa-css-prefix}-th-large:before { content: variables.$fa-var-th-large; } +.#{variables.$fa-css-prefix}-th:before { content: variables.$fa-var-th; } +.#{variables.$fa-css-prefix}-th-list:before { content: variables.$fa-var-th-list; } +.#{variables.$fa-css-prefix}-check:before { content: variables.$fa-var-check; } +.#{variables.$fa-css-prefix}-times:before { content: variables.$fa-var-times; } +.#{variables.$fa-css-prefix}-search-plus:before { content: variables.$fa-var-search-plus; } +.#{variables.$fa-css-prefix}-search-minus:before { content: variables.$fa-var-search-minus; } +.#{variables.$fa-css-prefix}-power-off:before { content: variables.$fa-var-power-off; } +.#{variables.$fa-css-prefix}-signal:before { content: variables.$fa-var-signal; } +.#{variables.$fa-css-prefix}-gear:before, +.#{variables.$fa-css-prefix}-cog:before { content: variables.$fa-var-cog; } +.#{variables.$fa-css-prefix}-trash-o:before { content: variables.$fa-var-trash-o; } +.#{variables.$fa-css-prefix}-home:before { content: variables.$fa-var-home; } +.#{variables.$fa-css-prefix}-file-o:before { content: variables.$fa-var-file-o; } +.#{variables.$fa-css-prefix}-clock-o:before { content: variables.$fa-var-clock-o; } +.#{variables.$fa-css-prefix}-road:before { content: variables.$fa-var-road; } +.#{variables.$fa-css-prefix}-download:before { content: variables.$fa-var-download; } +.#{variables.$fa-css-prefix}-arrow-circle-o-down:before { content: variables.$fa-var-arrow-circle-o-down; } +.#{variables.$fa-css-prefix}-arrow-circle-o-up:before { content: variables.$fa-var-arrow-circle-o-up; } +.#{variables.$fa-css-prefix}-inbox:before { content: variables.$fa-var-inbox; } +.#{variables.$fa-css-prefix}-play-circle-o:before { content: variables.$fa-var-play-circle-o; } +.#{variables.$fa-css-prefix}-rotate-right:before, +.#{variables.$fa-css-prefix}-repeat:before { content: variables.$fa-var-repeat; } +.#{variables.$fa-css-prefix}-refresh:before { content: variables.$fa-var-refresh; } +.#{variables.$fa-css-prefix}-list-alt:before { content: variables.$fa-var-list-alt; } +.#{variables.$fa-css-prefix}-lock:before { content: variables.$fa-var-lock; } +.#{variables.$fa-css-prefix}-flag:before { content: variables.$fa-var-flag; } +.#{variables.$fa-css-prefix}-headphones:before { content: variables.$fa-var-headphones; } +.#{variables.$fa-css-prefix}-volume-off:before { content: variables.$fa-var-volume-off; } +.#{variables.$fa-css-prefix}-volume-down:before { content: variables.$fa-var-volume-down; } +.#{variables.$fa-css-prefix}-volume-up:before { content: variables.$fa-var-volume-up; } +.#{variables.$fa-css-prefix}-qrcode:before { content: variables.$fa-var-qrcode; } +.#{variables.$fa-css-prefix}-barcode:before { content: variables.$fa-var-barcode; } +.#{variables.$fa-css-prefix}-tag:before { content: variables.$fa-var-tag; } +.#{variables.$fa-css-prefix}-tags:before { content: variables.$fa-var-tags; } +.#{variables.$fa-css-prefix}-book:before { content: variables.$fa-var-book; } +.#{variables.$fa-css-prefix}-bookmark:before { content: variables.$fa-var-bookmark; } +.#{variables.$fa-css-prefix}-print:before { content: variables.$fa-var-print; } +.#{variables.$fa-css-prefix}-camera:before { content: variables.$fa-var-camera; } +.#{variables.$fa-css-prefix}-font:before { content: variables.$fa-var-font; } +.#{variables.$fa-css-prefix}-bold:before { content: variables.$fa-var-bold; } +.#{variables.$fa-css-prefix}-italic:before { content: variables.$fa-var-italic; } +.#{variables.$fa-css-prefix}-text-height:before { content: variables.$fa-var-text-height; } +.#{variables.$fa-css-prefix}-text-width:before { content: variables.$fa-var-text-width; } +.#{variables.$fa-css-prefix}-align-left:before { content: variables.$fa-var-align-left; } +.#{variables.$fa-css-prefix}-align-center:before { content: variables.$fa-var-align-center; } +.#{variables.$fa-css-prefix}-align-right:before { content: variables.$fa-var-align-right; } +.#{variables.$fa-css-prefix}-align-justify:before { content: variables.$fa-var-align-justify; } +.#{variables.$fa-css-prefix}-list:before { content: variables.$fa-var-list; } +.#{variables.$fa-css-prefix}-dedent:before, +.#{variables.$fa-css-prefix}-outdent:before { content: variables.$fa-var-outdent; } +.#{variables.$fa-css-prefix}-indent:before { content: variables.$fa-var-indent; } +.#{variables.$fa-css-prefix}-video-camera:before { content: variables.$fa-var-video-camera; } +.#{variables.$fa-css-prefix}-photo:before, +.#{variables.$fa-css-prefix}-image:before, +.#{variables.$fa-css-prefix}-picture-o:before { content: variables.$fa-var-picture-o; } +.#{variables.$fa-css-prefix}-pencil:before { content: variables.$fa-var-pencil; } +.#{variables.$fa-css-prefix}-map-marker:before { content: variables.$fa-var-map-marker; } +.#{variables.$fa-css-prefix}-adjust:before { content: variables.$fa-var-adjust; } +.#{variables.$fa-css-prefix}-tint:before { content: variables.$fa-var-tint; } +.#{variables.$fa-css-prefix}-edit:before, +.#{variables.$fa-css-prefix}-pencil-square-o:before { content: variables.$fa-var-pencil-square-o; } +.#{variables.$fa-css-prefix}-share-square-o:before { content: variables.$fa-var-share-square-o; } +.#{variables.$fa-css-prefix}-check-square-o:before { content: variables.$fa-var-check-square-o; } +.#{variables.$fa-css-prefix}-arrows:before { content: variables.$fa-var-arrows; } +.#{variables.$fa-css-prefix}-step-backward:before { content: variables.$fa-var-step-backward; } +.#{variables.$fa-css-prefix}-fast-backward:before { content: variables.$fa-var-fast-backward; } +.#{variables.$fa-css-prefix}-backward:before { content: variables.$fa-var-backward; } +.#{variables.$fa-css-prefix}-play:before { content: variables.$fa-var-play; } +.#{variables.$fa-css-prefix}-pause:before { content: variables.$fa-var-pause; } +.#{variables.$fa-css-prefix}-stop:before { content: variables.$fa-var-stop; } +.#{variables.$fa-css-prefix}-forward:before { content: variables.$fa-var-forward; } +.#{variables.$fa-css-prefix}-fast-forward:before { content: variables.$fa-var-fast-forward; } +.#{variables.$fa-css-prefix}-step-forward:before { content: variables.$fa-var-step-forward; } +.#{variables.$fa-css-prefix}-eject:before { content: variables.$fa-var-eject; } +.#{variables.$fa-css-prefix}-chevron-left:before { content: variables.$fa-var-chevron-left; } +.#{variables.$fa-css-prefix}-chevron-right:before { content: variables.$fa-var-chevron-right; } +.#{variables.$fa-css-prefix}-plus-circle:before { content: variables.$fa-var-plus-circle; } +.#{variables.$fa-css-prefix}-minus-circle:before { content: variables.$fa-var-minus-circle; } +.#{variables.$fa-css-prefix}-times-circle:before { content: variables.$fa-var-times-circle; } +.#{variables.$fa-css-prefix}-check-circle:before { content: variables.$fa-var-check-circle; } +.#{variables.$fa-css-prefix}-question-circle:before { content: variables.$fa-var-question-circle; } +.#{variables.$fa-css-prefix}-info-circle:before { content: variables.$fa-var-info-circle; } +.#{variables.$fa-css-prefix}-crosshairs:before { content: variables.$fa-var-crosshairs; } +.#{variables.$fa-css-prefix}-times-circle-o:before { content: variables.$fa-var-times-circle-o; } +.#{variables.$fa-css-prefix}-check-circle-o:before { content: variables.$fa-var-check-circle-o; } +.#{variables.$fa-css-prefix}-ban:before { content: variables.$fa-var-ban; } +.#{variables.$fa-css-prefix}-arrow-left:before { content: variables.$fa-var-arrow-left; } +.#{variables.$fa-css-prefix}-arrow-right:before { content: variables.$fa-var-arrow-right; } +.#{variables.$fa-css-prefix}-arrow-up:before { content: variables.$fa-var-arrow-up; } +.#{variables.$fa-css-prefix}-arrow-down:before { content: variables.$fa-var-arrow-down; } +.#{variables.$fa-css-prefix}-mail-forward:before, +.#{variables.$fa-css-prefix}-share:before { content: variables.$fa-var-share; } +.#{variables.$fa-css-prefix}-expand:before { content: variables.$fa-var-expand; } +.#{variables.$fa-css-prefix}-compress:before { content: variables.$fa-var-compress; } +.#{variables.$fa-css-prefix}-plus:before { content: variables.$fa-var-plus; } +.#{variables.$fa-css-prefix}-minus:before { content: variables.$fa-var-minus; } +.#{variables.$fa-css-prefix}-asterisk:before { content: variables.$fa-var-asterisk; } +.#{variables.$fa-css-prefix}-exclamation-circle:before { content: variables.$fa-var-exclamation-circle; } +.#{variables.$fa-css-prefix}-gift:before { content: variables.$fa-var-gift; } +.#{variables.$fa-css-prefix}-leaf:before { content: variables.$fa-var-leaf; } +.#{variables.$fa-css-prefix}-fire:before { content: variables.$fa-var-fire; } +.#{variables.$fa-css-prefix}-eye:before { content: variables.$fa-var-eye; } +.#{variables.$fa-css-prefix}-eye-slash:before { content: variables.$fa-var-eye-slash; } +.#{variables.$fa-css-prefix}-warning:before, +.#{variables.$fa-css-prefix}-exclamation-triangle:before { content: variables.$fa-var-exclamation-triangle; } +.#{variables.$fa-css-prefix}-plane:before { content: variables.$fa-var-plane; } +.#{variables.$fa-css-prefix}-calendar:before { content: variables.$fa-var-calendar; } +.#{variables.$fa-css-prefix}-random:before { content: variables.$fa-var-random; } +.#{variables.$fa-css-prefix}-comment:before { content: variables.$fa-var-comment; } +.#{variables.$fa-css-prefix}-magnet:before { content: variables.$fa-var-magnet; } +.#{variables.$fa-css-prefix}-chevron-up:before { content: variables.$fa-var-chevron-up; } +.#{variables.$fa-css-prefix}-chevron-down:before { content: variables.$fa-var-chevron-down; } +.#{variables.$fa-css-prefix}-retweet:before { content: variables.$fa-var-retweet; } +.#{variables.$fa-css-prefix}-shopping-cart:before { content: variables.$fa-var-shopping-cart; } +.#{variables.$fa-css-prefix}-folder:before { content: variables.$fa-var-folder; } +.#{variables.$fa-css-prefix}-folder-open:before { content: variables.$fa-var-folder-open; } +.#{variables.$fa-css-prefix}-arrows-v:before { content: variables.$fa-var-arrows-v; } +.#{variables.$fa-css-prefix}-arrows-h:before { content: variables.$fa-var-arrows-h; } +.#{variables.$fa-css-prefix}-bar-chart-o:before { content: variables.$fa-var-bar-chart-o; } +.#{variables.$fa-css-prefix}-twitter-square:before { content: variables.$fa-var-twitter-square; } +.#{variables.$fa-css-prefix}-facebook-square:before { content: variables.$fa-var-facebook-square; } +.#{variables.$fa-css-prefix}-camera-retro:before { content: variables.$fa-var-camera-retro; } +.#{variables.$fa-css-prefix}-key:before { content: variables.$fa-var-key; } +.#{variables.$fa-css-prefix}-gears:before, +.#{variables.$fa-css-prefix}-cogs:before { content: variables.$fa-var-cogs; } +.#{variables.$fa-css-prefix}-comments:before { content: variables.$fa-var-comments; } +.#{variables.$fa-css-prefix}-thumbs-o-up:before { content: variables.$fa-var-thumbs-o-up; } +.#{variables.$fa-css-prefix}-thumbs-o-down:before { content: variables.$fa-var-thumbs-o-down; } +.#{variables.$fa-css-prefix}-star-half:before { content: variables.$fa-var-star-half; } +.#{variables.$fa-css-prefix}-heart-o:before { content: variables.$fa-var-heart-o; } +.#{variables.$fa-css-prefix}-sign-out:before { content: variables.$fa-var-sign-out; } +.#{variables.$fa-css-prefix}-linkedin-square:before { content: variables.$fa-var-linkedin-square; } +.#{variables.$fa-css-prefix}-thumb-tack:before { content: variables.$fa-var-thumb-tack; } +.#{variables.$fa-css-prefix}-external-link:before { content: variables.$fa-var-external-link; } +.#{variables.$fa-css-prefix}-sign-in:before { content: variables.$fa-var-sign-in; } +.#{variables.$fa-css-prefix}-trophy:before { content: variables.$fa-var-trophy; } +.#{variables.$fa-css-prefix}-github-square:before { content: variables.$fa-var-github-square; } +.#{variables.$fa-css-prefix}-upload:before { content: variables.$fa-var-upload; } +.#{variables.$fa-css-prefix}-lemon-o:before { content: variables.$fa-var-lemon-o; } +.#{variables.$fa-css-prefix}-phone:before { content: variables.$fa-var-phone; } +.#{variables.$fa-css-prefix}-square-o:before { content: variables.$fa-var-square-o; } +.#{variables.$fa-css-prefix}-bookmark-o:before { content: variables.$fa-var-bookmark-o; } +.#{variables.$fa-css-prefix}-phone-square:before { content: variables.$fa-var-phone-square; } +.#{variables.$fa-css-prefix}-twitter:before { content: variables.$fa-var-twitter; } +.#{variables.$fa-css-prefix}-facebook:before { content: variables.$fa-var-facebook; } +.#{variables.$fa-css-prefix}-github:before { content: variables.$fa-var-github; } +.#{variables.$fa-css-prefix}-unlock:before { content: variables.$fa-var-unlock; } +.#{variables.$fa-css-prefix}-credit-card:before { content: variables.$fa-var-credit-card; } +.#{variables.$fa-css-prefix}-rss:before { content: variables.$fa-var-rss; } +.#{variables.$fa-css-prefix}-hdd-o:before { content: variables.$fa-var-hdd-o; } +.#{variables.$fa-css-prefix}-bullhorn:before { content: variables.$fa-var-bullhorn; } +.#{variables.$fa-css-prefix}-bell:before { content: variables.$fa-var-bell; } +.#{variables.$fa-css-prefix}-certificate:before { content: variables.$fa-var-certificate; } +.#{variables.$fa-css-prefix}-hand-o-right:before { content: variables.$fa-var-hand-o-right; } +.#{variables.$fa-css-prefix}-hand-o-left:before { content: variables.$fa-var-hand-o-left; } +.#{variables.$fa-css-prefix}-hand-o-up:before { content: variables.$fa-var-hand-o-up; } +.#{variables.$fa-css-prefix}-hand-o-down:before { content: variables.$fa-var-hand-o-down; } +.#{variables.$fa-css-prefix}-arrow-circle-left:before { content: variables.$fa-var-arrow-circle-left; } +.#{variables.$fa-css-prefix}-arrow-circle-right:before { content: variables.$fa-var-arrow-circle-right; } +.#{variables.$fa-css-prefix}-arrow-circle-up:before { content: variables.$fa-var-arrow-circle-up; } +.#{variables.$fa-css-prefix}-arrow-circle-down:before { content: variables.$fa-var-arrow-circle-down; } +.#{variables.$fa-css-prefix}-globe:before { content: variables.$fa-var-globe; } +.#{variables.$fa-css-prefix}-wrench:before { content: variables.$fa-var-wrench; } +.#{variables.$fa-css-prefix}-tasks:before { content: variables.$fa-var-tasks; } +.#{variables.$fa-css-prefix}-filter:before { content: variables.$fa-var-filter; } +.#{variables.$fa-css-prefix}-briefcase:before { content: variables.$fa-var-briefcase; } +.#{variables.$fa-css-prefix}-arrows-alt:before { content: variables.$fa-var-arrows-alt; } +.#{variables.$fa-css-prefix}-group:before, +.#{variables.$fa-css-prefix}-users:before { content: variables.$fa-var-users; } +.#{variables.$fa-css-prefix}-chain:before, +.#{variables.$fa-css-prefix}-link:before { content: variables.$fa-var-link; } +.#{variables.$fa-css-prefix}-cloud:before { content: variables.$fa-var-cloud; } +.#{variables.$fa-css-prefix}-flask:before { content: variables.$fa-var-flask; } +.#{variables.$fa-css-prefix}-cut:before, +.#{variables.$fa-css-prefix}-scissors:before { content: variables.$fa-var-scissors; } +.#{variables.$fa-css-prefix}-copy:before, +.#{variables.$fa-css-prefix}-files-o:before { content: variables.$fa-var-files-o; } +.#{variables.$fa-css-prefix}-paperclip:before { content: variables.$fa-var-paperclip; } +.#{variables.$fa-css-prefix}-save:before, +.#{variables.$fa-css-prefix}-floppy-o:before { content: variables.$fa-var-floppy-o; } +.#{variables.$fa-css-prefix}-square:before { content: variables.$fa-var-square; } +.#{variables.$fa-css-prefix}-navicon:before, +.#{variables.$fa-css-prefix}-reorder:before, +.#{variables.$fa-css-prefix}-bars:before { content: variables.$fa-var-bars; } +.#{variables.$fa-css-prefix}-list-ul:before { content: variables.$fa-var-list-ul; } +.#{variables.$fa-css-prefix}-list-ol:before { content: variables.$fa-var-list-ol; } +.#{variables.$fa-css-prefix}-strikethrough:before { content: variables.$fa-var-strikethrough; } +.#{variables.$fa-css-prefix}-underline:before { content: variables.$fa-var-underline; } +.#{variables.$fa-css-prefix}-table:before { content: variables.$fa-var-table; } +.#{variables.$fa-css-prefix}-magic:before { content: variables.$fa-var-magic; } +.#{variables.$fa-css-prefix}-truck:before { content: variables.$fa-var-truck; } +.#{variables.$fa-css-prefix}-pinterest:before { content: variables.$fa-var-pinterest; } +.#{variables.$fa-css-prefix}-pinterest-square:before { content: variables.$fa-var-pinterest-square; } +.#{variables.$fa-css-prefix}-google-plus-square:before { content: variables.$fa-var-google-plus-square; } +.#{variables.$fa-css-prefix}-google-plus:before { content: variables.$fa-var-google-plus; } +.#{variables.$fa-css-prefix}-money:before { content: variables.$fa-var-money; } +.#{variables.$fa-css-prefix}-caret-down:before { content: variables.$fa-var-caret-down; } +.#{variables.$fa-css-prefix}-caret-up:before { content: variables.$fa-var-caret-up; } +.#{variables.$fa-css-prefix}-caret-left:before { content: variables.$fa-var-caret-left; } +.#{variables.$fa-css-prefix}-caret-right:before { content: variables.$fa-var-caret-right; } +.#{variables.$fa-css-prefix}-columns:before { content: variables.$fa-var-columns; } +.#{variables.$fa-css-prefix}-unsorted:before, +.#{variables.$fa-css-prefix}-sort:before { content: variables.$fa-var-sort; } +.#{variables.$fa-css-prefix}-sort-down:before, +.#{variables.$fa-css-prefix}-sort-desc:before { content: variables.$fa-var-sort-desc; } +.#{variables.$fa-css-prefix}-sort-up:before, +.#{variables.$fa-css-prefix}-sort-asc:before { content: variables.$fa-var-sort-asc; } +.#{variables.$fa-css-prefix}-envelope:before { content: variables.$fa-var-envelope; } +.#{variables.$fa-css-prefix}-linkedin:before { content: variables.$fa-var-linkedin; } +.#{variables.$fa-css-prefix}-rotate-left:before, +.#{variables.$fa-css-prefix}-undo:before { content: variables.$fa-var-undo; } +.#{variables.$fa-css-prefix}-legal:before, +.#{variables.$fa-css-prefix}-gavel:before { content: variables.$fa-var-gavel; } +.#{variables.$fa-css-prefix}-dashboard:before, +.#{variables.$fa-css-prefix}-tachometer:before { content: variables.$fa-var-tachometer; } +.#{variables.$fa-css-prefix}-comment-o:before { content: variables.$fa-var-comment-o; } +.#{variables.$fa-css-prefix}-comments-o:before { content: variables.$fa-var-comments-o; } +.#{variables.$fa-css-prefix}-flash:before, +.#{variables.$fa-css-prefix}-bolt:before { content: variables.$fa-var-bolt; } +.#{variables.$fa-css-prefix}-sitemap:before { content: variables.$fa-var-sitemap; } +.#{variables.$fa-css-prefix}-umbrella:before { content: variables.$fa-var-umbrella; } +.#{variables.$fa-css-prefix}-paste:before, +.#{variables.$fa-css-prefix}-clipboard:before { content: variables.$fa-var-clipboard; } +.#{variables.$fa-css-prefix}-lightbulb-o:before { content: variables.$fa-var-lightbulb-o; } +.#{variables.$fa-css-prefix}-exchange:before { content: variables.$fa-var-exchange; } +.#{variables.$fa-css-prefix}-cloud-download:before { content: variables.$fa-var-cloud-download; } +.#{variables.$fa-css-prefix}-cloud-upload:before { content: variables.$fa-var-cloud-upload; } +.#{variables.$fa-css-prefix}-user-md:before { content: variables.$fa-var-user-md; } +.#{variables.$fa-css-prefix}-stethoscope:before { content: variables.$fa-var-stethoscope; } +.#{variables.$fa-css-prefix}-suitcase:before { content: variables.$fa-var-suitcase; } +.#{variables.$fa-css-prefix}-bell-o:before { content: variables.$fa-var-bell-o; } +.#{variables.$fa-css-prefix}-coffee:before { content: variables.$fa-var-coffee; } +.#{variables.$fa-css-prefix}-cutlery:before { content: variables.$fa-var-cutlery; } +.#{variables.$fa-css-prefix}-file-text-o:before { content: variables.$fa-var-file-text-o; } +.#{variables.$fa-css-prefix}-building-o:before { content: variables.$fa-var-building-o; } +.#{variables.$fa-css-prefix}-hospital-o:before { content: variables.$fa-var-hospital-o; } +.#{variables.$fa-css-prefix}-ambulance:before { content: variables.$fa-var-ambulance; } +.#{variables.$fa-css-prefix}-medkit:before { content: variables.$fa-var-medkit; } +.#{variables.$fa-css-prefix}-fighter-jet:before { content: variables.$fa-var-fighter-jet; } +.#{variables.$fa-css-prefix}-beer:before { content: variables.$fa-var-beer; } +.#{variables.$fa-css-prefix}-h-square:before { content: variables.$fa-var-h-square; } +.#{variables.$fa-css-prefix}-plus-square:before { content: variables.$fa-var-plus-square; } +.#{variables.$fa-css-prefix}-angle-double-left:before { content: variables.$fa-var-angle-double-left; } +.#{variables.$fa-css-prefix}-angle-double-right:before { content: variables.$fa-var-angle-double-right; } +.#{variables.$fa-css-prefix}-angle-double-up:before { content: variables.$fa-var-angle-double-up; } +.#{variables.$fa-css-prefix}-angle-double-down:before { content: variables.$fa-var-angle-double-down; } +.#{variables.$fa-css-prefix}-angle-left:before { content: variables.$fa-var-angle-left; } +.#{variables.$fa-css-prefix}-angle-right:before { content: variables.$fa-var-angle-right; } +.#{variables.$fa-css-prefix}-angle-up:before { content: variables.$fa-var-angle-up; } +.#{variables.$fa-css-prefix}-angle-down:before { content: variables.$fa-var-angle-down; } +.#{variables.$fa-css-prefix}-desktop:before { content: variables.$fa-var-desktop; } +.#{variables.$fa-css-prefix}-laptop:before { content: variables.$fa-var-laptop; } +.#{variables.$fa-css-prefix}-tablet:before { content: variables.$fa-var-tablet; } +.#{variables.$fa-css-prefix}-mobile-phone:before, +.#{variables.$fa-css-prefix}-mobile:before { content: variables.$fa-var-mobile; } +.#{variables.$fa-css-prefix}-circle-o:before { content: variables.$fa-var-circle-o; } +.#{variables.$fa-css-prefix}-quote-left:before { content: variables.$fa-var-quote-left; } +.#{variables.$fa-css-prefix}-quote-right:before { content: variables.$fa-var-quote-right; } +.#{variables.$fa-css-prefix}-spinner:before { content: variables.$fa-var-spinner; } +.#{variables.$fa-css-prefix}-circle:before { content: variables.$fa-var-circle; } +.#{variables.$fa-css-prefix}-mail-reply:before, +.#{variables.$fa-css-prefix}-reply:before { content: variables.$fa-var-reply; } +.#{variables.$fa-css-prefix}-github-alt:before { content: variables.$fa-var-github-alt; } +.#{variables.$fa-css-prefix}-folder-o:before { content: variables.$fa-var-folder-o; } +.#{variables.$fa-css-prefix}-folder-open-o:before { content: variables.$fa-var-folder-open-o; } +.#{variables.$fa-css-prefix}-smile-o:before { content: variables.$fa-var-smile-o; } +.#{variables.$fa-css-prefix}-frown-o:before { content: variables.$fa-var-frown-o; } +.#{variables.$fa-css-prefix}-meh-o:before { content: variables.$fa-var-meh-o; } +.#{variables.$fa-css-prefix}-gamepad:before { content: variables.$fa-var-gamepad; } +.#{variables.$fa-css-prefix}-keyboard-o:before { content: variables.$fa-var-keyboard-o; } +.#{variables.$fa-css-prefix}-flag-o:before { content: variables.$fa-var-flag-o; } +.#{variables.$fa-css-prefix}-flag-checkered:before { content: variables.$fa-var-flag-checkered; } +.#{variables.$fa-css-prefix}-terminal:before { content: variables.$fa-var-terminal; } +.#{variables.$fa-css-prefix}-code:before { content: variables.$fa-var-code; } +.#{variables.$fa-css-prefix}-mail-reply-all:before, +.#{variables.$fa-css-prefix}-reply-all:before { content: variables.$fa-var-reply-all; } +.#{variables.$fa-css-prefix}-star-half-empty:before, +.#{variables.$fa-css-prefix}-star-half-full:before, +.#{variables.$fa-css-prefix}-star-half-o:before { content: variables.$fa-var-star-half-o; } +.#{variables.$fa-css-prefix}-location-arrow:before { content: variables.$fa-var-location-arrow; } +.#{variables.$fa-css-prefix}-crop:before { content: variables.$fa-var-crop; } +.#{variables.$fa-css-prefix}-code-fork:before { content: variables.$fa-var-code-fork; } +.#{variables.$fa-css-prefix}-unlink:before, +.#{variables.$fa-css-prefix}-chain-broken:before { content: variables.$fa-var-chain-broken; } +.#{variables.$fa-css-prefix}-question:before { content: variables.$fa-var-question; } +.#{variables.$fa-css-prefix}-info:before { content: variables.$fa-var-info; } +.#{variables.$fa-css-prefix}-exclamation:before { content: variables.$fa-var-exclamation; } +.#{variables.$fa-css-prefix}-superscript:before { content: variables.$fa-var-superscript; } +.#{variables.$fa-css-prefix}-subscript:before { content: variables.$fa-var-subscript; } +.#{variables.$fa-css-prefix}-eraser:before { content: variables.$fa-var-eraser; } +.#{variables.$fa-css-prefix}-puzzle-piece:before { content: variables.$fa-var-puzzle-piece; } +.#{variables.$fa-css-prefix}-microphone:before { content: variables.$fa-var-microphone; } +.#{variables.$fa-css-prefix}-microphone-slash:before { content: variables.$fa-var-microphone-slash; } +.#{variables.$fa-css-prefix}-shield:before { content: variables.$fa-var-shield; } +.#{variables.$fa-css-prefix}-calendar-o:before { content: variables.$fa-var-calendar-o; } +.#{variables.$fa-css-prefix}-fire-extinguisher:before { content: variables.$fa-var-fire-extinguisher; } +.#{variables.$fa-css-prefix}-rocket:before { content: variables.$fa-var-rocket; } +.#{variables.$fa-css-prefix}-maxcdn:before { content: variables.$fa-var-maxcdn; } +.#{variables.$fa-css-prefix}-chevron-circle-left:before { content: variables.$fa-var-chevron-circle-left; } +.#{variables.$fa-css-prefix}-chevron-circle-right:before { content: variables.$fa-var-chevron-circle-right; } +.#{variables.$fa-css-prefix}-chevron-circle-up:before { content: variables.$fa-var-chevron-circle-up; } +.#{variables.$fa-css-prefix}-chevron-circle-down:before { content: variables.$fa-var-chevron-circle-down; } +.#{variables.$fa-css-prefix}-html5:before { content: variables.$fa-var-html5; } +.#{variables.$fa-css-prefix}-css3:before { content: variables.$fa-var-css3; } +.#{variables.$fa-css-prefix}-anchor:before { content: variables.$fa-var-anchor; } +.#{variables.$fa-css-prefix}-unlock-alt:before { content: variables.$fa-var-unlock-alt; } +.#{variables.$fa-css-prefix}-bullseye:before { content: variables.$fa-var-bullseye; } +.#{variables.$fa-css-prefix}-ellipsis-h:before { content: variables.$fa-var-ellipsis-h; } +.#{variables.$fa-css-prefix}-ellipsis-v:before { content: variables.$fa-var-ellipsis-v; } +.#{variables.$fa-css-prefix}-rss-square:before { content: variables.$fa-var-rss-square; } +.#{variables.$fa-css-prefix}-play-circle:before { content: variables.$fa-var-play-circle; } +.#{variables.$fa-css-prefix}-ticket:before { content: variables.$fa-var-ticket; } +.#{variables.$fa-css-prefix}-minus-square:before { content: variables.$fa-var-minus-square; } +.#{variables.$fa-css-prefix}-minus-square-o:before { content: variables.$fa-var-minus-square-o; } +.#{variables.$fa-css-prefix}-level-up:before { content: variables.$fa-var-level-up; } +.#{variables.$fa-css-prefix}-level-down:before { content: variables.$fa-var-level-down; } +.#{variables.$fa-css-prefix}-check-square:before { content: variables.$fa-var-check-square; } +.#{variables.$fa-css-prefix}-pencil-square:before { content: variables.$fa-var-pencil-square; } +.#{variables.$fa-css-prefix}-external-link-square:before { content: variables.$fa-var-external-link-square; } +.#{variables.$fa-css-prefix}-share-square:before { content: variables.$fa-var-share-square; } +.#{variables.$fa-css-prefix}-compass:before { content: variables.$fa-var-compass; } +.#{variables.$fa-css-prefix}-toggle-down:before, +.#{variables.$fa-css-prefix}-caret-square-o-down:before { content: variables.$fa-var-caret-square-o-down; } +.#{variables.$fa-css-prefix}-toggle-up:before, +.#{variables.$fa-css-prefix}-caret-square-o-up:before { content: variables.$fa-var-caret-square-o-up; } +.#{variables.$fa-css-prefix}-toggle-right:before, +.#{variables.$fa-css-prefix}-caret-square-o-right:before { content: variables.$fa-var-caret-square-o-right; } +.#{variables.$fa-css-prefix}-euro:before, +.#{variables.$fa-css-prefix}-eur:before { content: variables.$fa-var-eur; } +.#{variables.$fa-css-prefix}-gbp:before { content: variables.$fa-var-gbp; } +.#{variables.$fa-css-prefix}-dollar:before, +.#{variables.$fa-css-prefix}-usd:before { content: variables.$fa-var-usd; } +.#{variables.$fa-css-prefix}-rupee:before, +.#{variables.$fa-css-prefix}-inr:before { content: variables.$fa-var-inr; } +.#{variables.$fa-css-prefix}-cny:before, +.#{variables.$fa-css-prefix}-rmb:before, +.#{variables.$fa-css-prefix}-yen:before, +.#{variables.$fa-css-prefix}-jpy:before { content: variables.$fa-var-jpy; } +.#{variables.$fa-css-prefix}-ruble:before, +.#{variables.$fa-css-prefix}-rouble:before, +.#{variables.$fa-css-prefix}-rub:before { content: variables.$fa-var-rub; } +.#{variables.$fa-css-prefix}-won:before, +.#{variables.$fa-css-prefix}-krw:before { content: variables.$fa-var-krw; } +.#{variables.$fa-css-prefix}-bitcoin:before, +.#{variables.$fa-css-prefix}-btc:before { content: variables.$fa-var-btc; } +.#{variables.$fa-css-prefix}-file:before { content: variables.$fa-var-file; } +.#{variables.$fa-css-prefix}-file-text:before { content: variables.$fa-var-file-text; } +.#{variables.$fa-css-prefix}-sort-alpha-asc:before { content: variables.$fa-var-sort-alpha-asc; } +.#{variables.$fa-css-prefix}-sort-alpha-desc:before { content: variables.$fa-var-sort-alpha-desc; } +.#{variables.$fa-css-prefix}-sort-amount-asc:before { content: variables.$fa-var-sort-amount-asc; } +.#{variables.$fa-css-prefix}-sort-amount-desc:before { content: variables.$fa-var-sort-amount-desc; } +.#{variables.$fa-css-prefix}-sort-numeric-asc:before { content: variables.$fa-var-sort-numeric-asc; } +.#{variables.$fa-css-prefix}-sort-numeric-desc:before { content: variables.$fa-var-sort-numeric-desc; } +.#{variables.$fa-css-prefix}-thumbs-up:before { content: variables.$fa-var-thumbs-up; } +.#{variables.$fa-css-prefix}-thumbs-down:before { content: variables.$fa-var-thumbs-down; } +.#{variables.$fa-css-prefix}-youtube-square:before { content: variables.$fa-var-youtube-square; } +.#{variables.$fa-css-prefix}-youtube:before { content: variables.$fa-var-youtube; } +.#{variables.$fa-css-prefix}-xing:before { content: variables.$fa-var-xing; } +.#{variables.$fa-css-prefix}-xing-square:before { content: variables.$fa-var-xing-square; } +.#{variables.$fa-css-prefix}-youtube-play:before { content: variables.$fa-var-youtube-play; } +.#{variables.$fa-css-prefix}-dropbox:before { content: variables.$fa-var-dropbox; } +.#{variables.$fa-css-prefix}-stack-overflow:before { content: variables.$fa-var-stack-overflow; } +.#{variables.$fa-css-prefix}-instagram:before { content: variables.$fa-var-instagram; } +.#{variables.$fa-css-prefix}-flickr:before { content: variables.$fa-var-flickr; } +.#{variables.$fa-css-prefix}-adn:before { content: variables.$fa-var-adn; } +.#{variables.$fa-css-prefix}-bitbucket:before { content: variables.$fa-var-bitbucket; } +.#{variables.$fa-css-prefix}-bitbucket-square:before { content: variables.$fa-var-bitbucket-square; } +.#{variables.$fa-css-prefix}-tumblr:before { content: variables.$fa-var-tumblr; } +.#{variables.$fa-css-prefix}-tumblr-square:before { content: variables.$fa-var-tumblr-square; } +.#{variables.$fa-css-prefix}-long-arrow-down:before { content: variables.$fa-var-long-arrow-down; } +.#{variables.$fa-css-prefix}-long-arrow-up:before { content: variables.$fa-var-long-arrow-up; } +.#{variables.$fa-css-prefix}-long-arrow-left:before { content: variables.$fa-var-long-arrow-left; } +.#{variables.$fa-css-prefix}-long-arrow-right:before { content: variables.$fa-var-long-arrow-right; } +.#{variables.$fa-css-prefix}-apple:before { content: variables.$fa-var-apple; } +.#{variables.$fa-css-prefix}-windows:before { content: variables.$fa-var-windows; } +.#{variables.$fa-css-prefix}-android:before { content: variables.$fa-var-android; } +.#{variables.$fa-css-prefix}-linux:before { content: variables.$fa-var-linux; } +.#{variables.$fa-css-prefix}-dribbble:before { content: variables.$fa-var-dribbble; } +.#{variables.$fa-css-prefix}-skype:before { content: variables.$fa-var-skype; } +.#{variables.$fa-css-prefix}-foursquare:before { content: variables.$fa-var-foursquare; } +.#{variables.$fa-css-prefix}-trello:before { content: variables.$fa-var-trello; } +.#{variables.$fa-css-prefix}-female:before { content: variables.$fa-var-female; } +.#{variables.$fa-css-prefix}-male:before { content: variables.$fa-var-male; } +.#{variables.$fa-css-prefix}-gittip:before { content: variables.$fa-var-gittip; } +.#{variables.$fa-css-prefix}-sun-o:before { content: variables.$fa-var-sun-o; } +.#{variables.$fa-css-prefix}-moon-o:before { content: variables.$fa-var-moon-o; } +.#{variables.$fa-css-prefix}-archive:before { content: variables.$fa-var-archive; } +.#{variables.$fa-css-prefix}-bug:before { content: variables.$fa-var-bug; } +.#{variables.$fa-css-prefix}-vk:before { content: variables.$fa-var-vk; } +.#{variables.$fa-css-prefix}-weibo:before { content: variables.$fa-var-weibo; } +.#{variables.$fa-css-prefix}-renren:before { content: variables.$fa-var-renren; } +.#{variables.$fa-css-prefix}-pagelines:before { content: variables.$fa-var-pagelines; } +.#{variables.$fa-css-prefix}-stack-exchange:before { content: variables.$fa-var-stack-exchange; } +.#{variables.$fa-css-prefix}-arrow-circle-o-right:before { content: variables.$fa-var-arrow-circle-o-right; } +.#{variables.$fa-css-prefix}-arrow-circle-o-left:before { content: variables.$fa-var-arrow-circle-o-left; } +.#{variables.$fa-css-prefix}-toggle-left:before, +.#{variables.$fa-css-prefix}-caret-square-o-left:before { content: variables.$fa-var-caret-square-o-left; } +.#{variables.$fa-css-prefix}-dot-circle-o:before { content: variables.$fa-var-dot-circle-o; } +.#{variables.$fa-css-prefix}-wheelchair:before { content: variables.$fa-var-wheelchair; } +.#{variables.$fa-css-prefix}-vimeo-square:before { content: variables.$fa-var-vimeo-square; } +.#{variables.$fa-css-prefix}-turkish-lira:before, +.#{variables.$fa-css-prefix}-try:before { content: variables.$fa-var-try; } +.#{variables.$fa-css-prefix}-plus-square-o:before { content: variables.$fa-var-plus-square-o; } +.#{variables.$fa-css-prefix}-space-shuttle:before { content: variables.$fa-var-space-shuttle; } +.#{variables.$fa-css-prefix}-slack:before { content: variables.$fa-var-slack; } +.#{variables.$fa-css-prefix}-envelope-square:before { content: variables.$fa-var-envelope-square; } +.#{variables.$fa-css-prefix}-wordpress:before { content: variables.$fa-var-wordpress; } +.#{variables.$fa-css-prefix}-openid:before { content: variables.$fa-var-openid; } +.#{variables.$fa-css-prefix}-institution:before, +.#{variables.$fa-css-prefix}-bank:before, +.#{variables.$fa-css-prefix}-university:before { content: variables.$fa-var-university; } +.#{variables.$fa-css-prefix}-mortar-board:before, +.#{variables.$fa-css-prefix}-graduation-cap:before { content: variables.$fa-var-graduation-cap; } +.#{variables.$fa-css-prefix}-yahoo:before { content: variables.$fa-var-yahoo; } +.#{variables.$fa-css-prefix}-google:before { content: variables.$fa-var-google; } +.#{variables.$fa-css-prefix}-reddit:before { content: variables.$fa-var-reddit; } +.#{variables.$fa-css-prefix}-reddit-square:before { content: variables.$fa-var-reddit-square; } +.#{variables.$fa-css-prefix}-stumbleupon-circle:before { content: variables.$fa-var-stumbleupon-circle; } +.#{variables.$fa-css-prefix}-stumbleupon:before { content: variables.$fa-var-stumbleupon; } +.#{variables.$fa-css-prefix}-delicious:before { content: variables.$fa-var-delicious; } +.#{variables.$fa-css-prefix}-digg:before { content: variables.$fa-var-digg; } +.#{variables.$fa-css-prefix}-pied-piper-square:before, +.#{variables.$fa-css-prefix}-pied-piper:before { content: variables.$fa-var-pied-piper; } +.#{variables.$fa-css-prefix}-pied-piper-alt:before { content: variables.$fa-var-pied-piper-alt; } +.#{variables.$fa-css-prefix}-drupal:before { content: variables.$fa-var-drupal; } +.#{variables.$fa-css-prefix}-joomla:before { content: variables.$fa-var-joomla; } +.#{variables.$fa-css-prefix}-language:before { content: variables.$fa-var-language; } +.#{variables.$fa-css-prefix}-fax:before { content: variables.$fa-var-fax; } +.#{variables.$fa-css-prefix}-building:before { content: variables.$fa-var-building; } +.#{variables.$fa-css-prefix}-child:before { content: variables.$fa-var-child; } +.#{variables.$fa-css-prefix}-paw:before { content: variables.$fa-var-paw; } +.#{variables.$fa-css-prefix}-spoon:before { content: variables.$fa-var-spoon; } +.#{variables.$fa-css-prefix}-cube:before { content: variables.$fa-var-cube; } +.#{variables.$fa-css-prefix}-cubes:before { content: variables.$fa-var-cubes; } +.#{variables.$fa-css-prefix}-behance:before { content: variables.$fa-var-behance; } +.#{variables.$fa-css-prefix}-behance-square:before { content: variables.$fa-var-behance-square; } +.#{variables.$fa-css-prefix}-steam:before { content: variables.$fa-var-steam; } +.#{variables.$fa-css-prefix}-steam-square:before { content: variables.$fa-var-steam-square; } +.#{variables.$fa-css-prefix}-recycle:before { content: variables.$fa-var-recycle; } +.#{variables.$fa-css-prefix}-automobile:before, +.#{variables.$fa-css-prefix}-car:before { content: variables.$fa-var-car; } +.#{variables.$fa-css-prefix}-cab:before, +.#{variables.$fa-css-prefix}-taxi:before { content: variables.$fa-var-taxi; } +.#{variables.$fa-css-prefix}-tree:before { content: variables.$fa-var-tree; } +.#{variables.$fa-css-prefix}-spotify:before { content: variables.$fa-var-spotify; } +.#{variables.$fa-css-prefix}-deviantart:before { content: variables.$fa-var-deviantart; } +.#{variables.$fa-css-prefix}-soundcloud:before { content: variables.$fa-var-soundcloud; } +.#{variables.$fa-css-prefix}-database:before { content: variables.$fa-var-database; } +.#{variables.$fa-css-prefix}-file-pdf-o:before { content: variables.$fa-var-file-pdf-o; } +.#{variables.$fa-css-prefix}-file-word-o:before { content: variables.$fa-var-file-word-o; } +.#{variables.$fa-css-prefix}-file-excel-o:before { content: variables.$fa-var-file-excel-o; } +.#{variables.$fa-css-prefix}-file-powerpoint-o:before { content: variables.$fa-var-file-powerpoint-o; } +.#{variables.$fa-css-prefix}-file-photo-o:before, +.#{variables.$fa-css-prefix}-file-picture-o:before, +.#{variables.$fa-css-prefix}-file-image-o:before { content: variables.$fa-var-file-image-o; } +.#{variables.$fa-css-prefix}-file-zip-o:before, +.#{variables.$fa-css-prefix}-file-archive-o:before { content: variables.$fa-var-file-archive-o; } +.#{variables.$fa-css-prefix}-file-sound-o:before, +.#{variables.$fa-css-prefix}-file-audio-o:before { content: variables.$fa-var-file-audio-o; } +.#{variables.$fa-css-prefix}-file-movie-o:before, +.#{variables.$fa-css-prefix}-file-video-o:before { content: variables.$fa-var-file-video-o; } +.#{variables.$fa-css-prefix}-file-code-o:before { content: variables.$fa-var-file-code-o; } +.#{variables.$fa-css-prefix}-vine:before { content: variables.$fa-var-vine; } +.#{variables.$fa-css-prefix}-codepen:before { content: variables.$fa-var-codepen; } +.#{variables.$fa-css-prefix}-jsfiddle:before { content: variables.$fa-var-jsfiddle; } +.#{variables.$fa-css-prefix}-life-bouy:before, +.#{variables.$fa-css-prefix}-life-saver:before, +.#{variables.$fa-css-prefix}-support:before, +.#{variables.$fa-css-prefix}-life-ring:before { content: variables.$fa-var-life-ring; } +.#{variables.$fa-css-prefix}-circle-o-notch:before { content: variables.$fa-var-circle-o-notch; } +.#{variables.$fa-css-prefix}-ra:before, +.#{variables.$fa-css-prefix}-rebel:before { content: variables.$fa-var-rebel; } +.#{variables.$fa-css-prefix}-ge:before, +.#{variables.$fa-css-prefix}-empire:before { content: variables.$fa-var-empire; } +.#{variables.$fa-css-prefix}-git-square:before { content: variables.$fa-var-git-square; } +.#{variables.$fa-css-prefix}-git:before { content: variables.$fa-var-git; } +.#{variables.$fa-css-prefix}-hacker-news:before { content: variables.$fa-var-hacker-news; } +.#{variables.$fa-css-prefix}-tencent-weibo:before { content: variables.$fa-var-tencent-weibo; } +.#{variables.$fa-css-prefix}-qq:before { content: variables.$fa-var-qq; } +.#{variables.$fa-css-prefix}-wechat:before, +.#{variables.$fa-css-prefix}-weixin:before { content: variables.$fa-var-weixin; } +.#{variables.$fa-css-prefix}-send:before, +.#{variables.$fa-css-prefix}-paper-plane:before { content: variables.$fa-var-paper-plane; } +.#{variables.$fa-css-prefix}-send-o:before, +.#{variables.$fa-css-prefix}-paper-plane-o:before { content: variables.$fa-var-paper-plane-o; } +.#{variables.$fa-css-prefix}-history:before { content: variables.$fa-var-history; } +.#{variables.$fa-css-prefix}-circle-thin:before { content: variables.$fa-var-circle-thin; } +.#{variables.$fa-css-prefix}-header:before { content: variables.$fa-var-header; } +.#{variables.$fa-css-prefix}-paragraph:before { content: variables.$fa-var-paragraph; } +.#{variables.$fa-css-prefix}-sliders:before { content: variables.$fa-var-sliders; } +.#{variables.$fa-css-prefix}-share-alt:before { content: variables.$fa-var-share-alt; } +.#{variables.$fa-css-prefix}-share-alt-square:before { content: variables.$fa-var-share-alt-square; } +.#{variables.$fa-css-prefix}-bomb:before { content: variables.$fa-var-bomb; } diff --git a/source/_sass/font-awesome/_larger.scss b/source/_sass/font-awesome/_larger.scss index 41e9a81..3ebdf39 100644 --- a/source/_sass/font-awesome/_larger.scss +++ b/source/_sass/font-awesome/_larger.scss @@ -1,13 +1,27 @@ +@use "variables"; + // Icon Sizes // ------------------------- /* makes the font 33% larger relative to the icon container */ -.#{$fa-css-prefix}-lg { - font-size: (4em / 3); - line-height: (3em / 4); +.#{variables.$fa-css-prefix}-lg { + font-size: calc(4em / 3); + line-height: calc(3em / 4); vertical-align: -15%; } -.#{$fa-css-prefix}-2x { font-size: 2em; } -.#{$fa-css-prefix}-3x { font-size: 3em; } -.#{$fa-css-prefix}-4x { font-size: 4em; } -.#{$fa-css-prefix}-5x { font-size: 5em; } + +.#{variables.$fa-css-prefix}-2x { + font-size: 2em; +} + +.#{variables.$fa-css-prefix}-3x { + font-size: 3em; +} + +.#{variables.$fa-css-prefix}-4x { + font-size: 4em; +} + +.#{variables.$fa-css-prefix}-5x { + font-size: 5em; +} diff --git a/source/_sass/font-awesome/_list.scss b/source/_sass/font-awesome/_list.scss index 7d1e4d5..1981f5f 100644 --- a/source/_sass/font-awesome/_list.scss +++ b/source/_sass/font-awesome/_list.scss @@ -1,19 +1,26 @@ +@use "variables"; + // List Icons // ------------------------- -.#{$fa-css-prefix}-ul { +.#{variables.$fa-css-prefix}-ul { padding-left: 0; - margin-left: $fa-li-width; + margin-left: variables.$fa-li-width; list-style-type: none; - > li { position: relative; } + + >li { + position: relative; + } } -.#{$fa-css-prefix}-li { + +.#{variables.$fa-css-prefix}-li { position: absolute; - left: -$fa-li-width; - width: $fa-li-width; - top: (2em / 14); + left: -(variables.$fa-li-width); + width: variables.$fa-li-width; + top: calc(2em / 14); text-align: center; - &.#{$fa-css-prefix}-lg { - left: -$fa-li-width + (4em / 14); + + &.#{variables.$fa-css-prefix}-lg { + left: -(variables.$fa-li-width) + calc(4em / 14); } } diff --git a/source/_sass/font-awesome/_path.scss b/source/_sass/font-awesome/_path.scss index fd21c35..495dd10 100644 --- a/source/_sass/font-awesome/_path.scss +++ b/source/_sass/font-awesome/_path.scss @@ -1,13 +1,15 @@ +@use "variables"; + /* FONT PATH * -------------------------- */ @font-face { font-family: 'FontAwesome'; - src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); - src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), - url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), - url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), - url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); + src: url('#{variables.$fa-font-path}/fontawesome-webfont.eot?v=#{variables.$fa-version}'); + src: url('#{variables.$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{variables.$fa-version}') format('embedded-opentype'), + url('#{variables.$fa-font-path}/fontawesome-webfont.woff?v=#{variables.$fa-version}') format('woff'), + url('#{variables.$fa-font-path}/fontawesome-webfont.ttf?v=#{variables.$fa-version}') format('truetype'), + url('#{variables.$fa-font-path}/fontawesome-webfont.svg?v=#{variables.$fa-version}#fontawesomeregular') format('svg'); //src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts font-weight: normal; font-style: normal; diff --git a/source/_sass/font-awesome/_rotated-flipped.scss b/source/_sass/font-awesome/_rotated-flipped.scss index 343fa55..6bec49e 100644 --- a/source/_sass/font-awesome/_rotated-flipped.scss +++ b/source/_sass/font-awesome/_rotated-flipped.scss @@ -1,9 +1,12 @@ +@use "mixins"; +@use "variables"; + // Rotated & Flipped Icons // ------------------------- -.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } -.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } -.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } +.#{variables.$fa-css-prefix}-rotate-90 { @include mixins.fa-icon-rotate(90deg, 1); } +.#{variables.$fa-css-prefix}-rotate-180 { @include mixins.fa-icon-rotate(180deg, 2); } +.#{variables.$fa-css-prefix}-rotate-270 { @include mixins.fa-icon-rotate(270deg, 3); } -.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } -.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } +.#{variables.$fa-css-prefix}-flip-horizontal { @include mixins.fa-icon-flip(-1, 1, 0); } +.#{variables.$fa-css-prefix}-flip-vertical { @include mixins.fa-icon-flip(1, -1, 2); } diff --git a/source/_sass/font-awesome/_spinning.scss b/source/_sass/font-awesome/_spinning.scss index c378744..c1180c6 100644 --- a/source/_sass/font-awesome/_spinning.scss +++ b/source/_sass/font-awesome/_spinning.scss @@ -1,7 +1,9 @@ +@use "variables"; + // Spinning Icons // -------------------------- -.#{$fa-css-prefix}-spin { +.#{variables.$fa-css-prefix}-spin { -webkit-animation: spin 2s infinite linear; -moz-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; diff --git a/source/_sass/font-awesome/_stacked.scss b/source/_sass/font-awesome/_stacked.scss index aef7403..9fe0d51 100644 --- a/source/_sass/font-awesome/_stacked.scss +++ b/source/_sass/font-awesome/_stacked.scss @@ -1,7 +1,9 @@ +@use "variables"; + // Stacked Icons // ------------------------- -.#{$fa-css-prefix}-stack { +.#{variables.$fa-css-prefix}-stack { position: relative; display: inline-block; width: 2em; @@ -9,12 +11,12 @@ line-height: 2em; vertical-align: middle; } -.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x { +.#{variables.$fa-css-prefix}-stack-1x, .#{variables.$fa-css-prefix}-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } -.#{$fa-css-prefix}-stack-1x { line-height: inherit; } -.#{$fa-css-prefix}-stack-2x { font-size: 2em; } -.#{$fa-css-prefix}-inverse { color: $fa-inverse; } +.#{variables.$fa-css-prefix}-stack-1x { line-height: inherit; } +.#{variables.$fa-css-prefix}-stack-2x { font-size: 2em; } +.#{variables.$fa-css-prefix}-inverse { color: variables.$fa-inverse; } diff --git a/source/_sass/font-awesome/_variables.scss b/source/_sass/font-awesome/_variables.scss index ac2b505..4077fa2 100644 --- a/source/_sass/font-awesome/_variables.scss +++ b/source/_sass/font-awesome/_variables.scss @@ -1,13 +1,13 @@ // Variables // -------------------------- -$fa-font-path: "../fonts" !default; +$fa-font-path: "../fonts" !default; //$fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.1.0/fonts" !default; // for referencing Bootstrap CDN font files directly -$fa-css-prefix: fa !default; -$fa-version: "4.1.0" !default; -$fa-border-color: #eee !default; -$fa-inverse: #fff !default; -$fa-li-width: (30em / 14) !default; +$fa-css-prefix: fa !default; +$fa-version: "4.1.0" !default; +$fa-border-color: #eee !default; +$fa-inverse: #fff !default; +$fa-li-width: calc(30em / 14) !default; $fa-var-adjust: "\f042"; $fa-var-adn: "\f170"; @@ -512,4 +512,3 @@ $fa-var-yen: "\f157"; $fa-var-youtube: "\f167"; $fa-var-youtube-play: "\f16a"; $fa-var-youtube-square: "\f166"; - diff --git a/source/_sass/font-awesome/font-awesome.scss b/source/_sass/font-awesome/font-awesome.scss index 2307dbd..4aff02d 100644 --- a/source/_sass/font-awesome/font-awesome.scss +++ b/source/_sass/font-awesome/font-awesome.scss @@ -3,15 +3,15 @@ * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ -@import "variables"; -@import "mixins"; -@import "path"; -@import "core"; -@import "larger"; -@import "fixed-width"; -@import "list"; -@import "bordered-pulled"; -@import "spinning"; -@import "rotated-flipped"; -@import "stacked"; -@import "icons"; +@use "variables"; +@use "mixins"; +@use "path"; +@use "core"; +@use "larger"; +@use "fixed-width"; +@use "list"; +@use "bordered-pulled"; +@use "spinning"; +@use "rotated-flipped"; +@use "stacked"; +@use "icons"; diff --git a/source/_sass/footer.scss b/source/_sass/footer.scss index 94ed9ce..d49280a 100644 --- a/source/_sass/footer.scss +++ b/source/_sass/footer.scss @@ -1,3 +1,8 @@ +@use "sass:color"; +@use "bourbon/addons/clearfix"; +@use "bourbon/css3/transition"; +@use "responsive/utilities/mixins/breakpoints"; + /** * Copyright 2025 Google LLC * @@ -24,9 +29,9 @@ $footer-bp: s; height: auto !important; margin: 0 auto -1 * $footer-height-mobile; min-height: 100%; - @include clearfix; + @include clearfix.clearfix; - @include bp-min ($footer-bp) { + @include breakpoints.bp-min ($footer-bp) { margin: 0 auto -1 * $footer-height; } } @@ -34,7 +39,7 @@ $footer-bp: s; .push { height: $footer-height-mobile; - @include bp-min ($footer-bp) { + @include breakpoints.bp-min ($footer-bp) { height: $footer-height; } } @@ -47,7 +52,7 @@ $footer-bp: s; width: 100%; z-index: 100; - @include bp-min ($footer-bp) { + @include breakpoints.bp-min ($footer-bp) { height: $footer-height; } @@ -56,14 +61,14 @@ $footer-bp: s; } li { - @include bp-min ($footer-bp) { + @include breakpoints.bp-min ($footer-bp) { display: table-cell; width: 2%; } } a { - @include transition (all 0.2s ease-in-out); + @include transition.transition (all 0.2s ease-in-out); background-color: $footer-background-color; color: $footer-text-color; display: block; @@ -74,7 +79,7 @@ $footer-bp: s; text-transform: uppercase; &:hover { - background-color: darken($footer-background-color, 20); + background-color: color.adjust($footer-background-color, $lightness: -20%); } } } diff --git a/source/_sass/header.scss b/source/_sass/header.scss index 54f523c..0c183bd 100644 --- a/source/_sass/header.scss +++ b/source/_sass/header.scss @@ -1,3 +1,5 @@ +@use "responsive/utilities/variables"; + /** * Copyright 2025 Google LLC * @@ -14,5 +16,5 @@ * limitations under the License. */ -$header-height: 3 * $base-line-height; +$header-height: 3 * variables.$base-line-height; $header-logo-width: 226px; diff --git a/source/_sass/mmenu/addons/jquery.mmenu.buttonbars.scss b/source/_sass/mmenu/addons/jquery.mmenu.buttonbars.scss index c87d526..4a059f5 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.buttonbars.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.buttonbars.scss @@ -2,98 +2,94 @@ jQuery.mmenu buttonbars addon CSS */ -@import "../inc/variables"; - - -.mm-buttonbar -{ - border: 1px solid transparent; - border-radius: $mm_padding / 2; - text-align: center; - line-height: $mm_buttonbarHeight; - overflow: hidden; - display: block; - padding: 0; - margin: 0; - position: relative; - - @include mm_clearfix; - - > * - { - border-left: 1px solid transparent; - box-sizing: border-box; - display: block; - width: 100%; - height: 100%; - float: left; - - @include mm_ellipsis; - } - > a - { - text-decoration: none; - } - > input - { - position: absolute; - left: -1000px; - top: -1000px; - } - > input:checked + label - { - border-color: transparent !important; - } - - > *:first-child, - > input:first-child + * - { - border-left: none; - } - - - &.mm-buttonbar-2 > * - { - width: 50%; - } - &.mm-buttonbar-3 > * - { - width: 33.33%; - } - &.mm-buttonbar-4 > * - { - width: 25%; - } - &.mm-buttonbar-5 > * - { - width: 20%; - } +@use "../inc/variables"; +@use "../inc/colors"; +@use "../inc/mixins"; + + +.mm-buttonbar { + border: 1px solid transparent; + border-radius: calc(variables.$mm_padding / 2); + text-align: center; + line-height: variables.$mm_buttonbarHeight; + overflow: hidden; + display: block; + padding: 0; + margin: 0; + position: relative; + + @include mixins.mm_clearfix; + + >* { + border-left: 1px solid transparent; + box-sizing: border-box; + display: block; + width: 100%; + height: 100%; + float: left; + + @include mixins.mm_ellipsis; + } + + >a { + text-decoration: none; + } + + >input { + position: absolute; + left: -1000px; + top: -1000px; + } + + >input:checked+label { + border-color: transparent !important; + } + + >*:first-child, + >input:first-child+* { + border-left: none; + } + + + &.mm-buttonbar-2>* { + width: 50%; + } + + &.mm-buttonbar-3>* { + width: 33.33%; + } + + &.mm-buttonbar-4>* { + width: 25%; + } + + &.mm-buttonbar-5>* { + width: 20%; + } } -.mm-header .mm-buttonbar -{ - margin-top: $mm_headerHeight - ( $mm_buttonbarHeight * 2 ); - margin-left: -( $mm_btnSize - $mm_padding ); - margin-right: -( $mm_btnSize - $mm_padding ); +.mm-header .mm-buttonbar { + margin-top: variables.$mm_headerHeight - (variables.$mm_buttonbarHeight * 2); + margin-left: -(variables.$mm_btnSize - variables.$mm_padding ); + margin-right: -(variables.$mm_btnSize - variables.$mm_padding ); } -.mm-footer .mm-buttonbar -{ - border: none; - border-radius: none; - line-height: $mm_footerHeight; - margin: ( -$mm_padding ) ( -$mm_padding ) 0 ( -( $mm_padding * 2 ) ); - - > * - { - border-left: none; - } +.mm-footer .mm-buttonbar { + border: none; + border-radius: none; + line-height: variables.$mm_footerHeight; + margin: (-(variables.$mm_padding) ) (-(variables.$mm_padding) ) 0 (-(variables.$mm_padding * 2)); + + >* { + border-left: none; + } } -.mm-list > li > .mm-buttonbar -{ - margin: $mm_padding ( $mm_padding * 2 ); +.mm-list>li>.mm-buttonbar { + margin: variables.$mm_padding ( + variables.$mm_padding * 2 + ); } -@include mm_colors_buttonbars; \ No newline at end of file +@include colors.mm_colors_buttonbars; diff --git a/source/_sass/mmenu/addons/jquery.mmenu.counters.scss b/source/_sass/mmenu/addons/jquery.mmenu.counters.scss index 7968416..b833104 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.counters.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.counters.scss @@ -2,52 +2,47 @@ jQuery.mmenu counters addon CSS */ -@import "../inc/variables"; - - -em.mm-counter -{ - font: inherit; - font-size: $mm_fontSize; - font-style: normal; - text-indent: 0; - line-height: $mm_btnSize / 2; - display: block; - margin-top: -( $mm_btnSize / 4 ); - position: absolute; - right: $mm_subopenWidth; - top: 50%; - - + a.mm-subopen - { - padding-left: $mm_counterWidth; - - + a, - + span - { - margin-right: $mm_counterWidth + $mm_subopenWidth; - } - } - + a.mm-fullsubopen - { - padding-left: 0; - } +@use "../inc/variables"; +@use "../inc/colors"; + + +em.mm-counter { + font: inherit; + font-size: variables.$mm_fontSize; + font-style: normal; + text-indent: 0; + line-height: calc(variables.$mm_btnSize / 2); + display: block; + margin-top: - calc(variables.$mm_btnSize / 4); + position: absolute; + right: variables.$mm_subopenWidth; + top: 50%; + + +a.mm-subopen { + padding-left: variables.$mm_counterWidth; + + +a, + +span { + margin-right: variables.$mm_counterWidth + variables.$mm_subopenWidth; + } + } + + +a.mm-fullsubopen { + padding-left: 0; + } } // vertical submenu -.mm-vertical -{ - em.mm-counter - { - top: ( $mm_btnSize / 4 ) + 2; - margin-top: 0; - } +.mm-vertical { + em.mm-counter { + top: calc((variables.$mm_btnSize / 4) + 2px); + margin-top: 0; + } } // Search -.mm-nosubresults > em.mm-counter -{ - display: none; +.mm-nosubresults>em.mm-counter { + display: none; } -@include mm_colors_counters; \ No newline at end of file +@include colors.mm_colors_counters; diff --git a/source/_sass/mmenu/addons/jquery.mmenu.dragopen.scss b/source/_sass/mmenu/addons/jquery.mmenu.dragopen.scss index 006e5c5..cfe4c66 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.dragopen.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.dragopen.scss @@ -2,7 +2,8 @@ jQuery.mmenu dragOpen addon CSS */ -@import "../inc/variables"; +@use "../inc/variables"; +@use "../inc/mixins"; html.mm-opened.mm-dragging { @@ -12,6 +13,6 @@ html.mm-opened.mm-dragging .mm-fixed-bottom, #mm-blocker { - @include mm_webkit-prefix( "transition-duration", 0s ); + @include mixins.mm_webkit-prefix( "transition-duration", 0s ); } } \ No newline at end of file diff --git a/source/_sass/mmenu/addons/jquery.mmenu.footer.scss b/source/_sass/mmenu/addons/jquery.mmenu.footer.scss index 085424d..a69eed2 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.footer.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.footer.scss @@ -2,7 +2,8 @@ jQuery.mmenu footer addon CSS */ -@import "../inc/variables"; +@use "../inc/variables"; +@use "../inc/colors"; .mm-footer @@ -10,12 +11,12 @@ background: inherit; border-top: 1px solid transparent; text-align: center; - line-height: $mm_footerHeight - ( $mm_padding * 2 ); + line-height: variables.$mm_footerHeight - ( variables.$mm_padding * 2 ); box-sizing: border-box; width: 100%; - height: $mm_footerHeight; - padding: $mm_padding $mm_padding 0 ( $mm_padding * 2 ); + height: variables.$mm_footerHeight; + padding: variables.$mm_padding variables.$mm_padding 0 ( variables.$mm_padding * 2 ); position: absolute; z-index: 2; bottom: 0; @@ -26,9 +27,9 @@ { > .mm-panel:after { - height: $mm_footerHeight + $mm_btnSize; + height: variables.$mm_footerHeight + variables.$mm_btnSize; } } -@include mm_colors_footer; \ No newline at end of file +@include colors.mm_colors_footer; \ No newline at end of file diff --git a/source/_sass/mmenu/addons/jquery.mmenu.header.scss b/source/_sass/mmenu/addons/jquery.mmenu.header.scss index 5759dea..0d8b67a 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.header.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.header.scss @@ -2,141 +2,136 @@ jQuery.mmenu header addon CSS */ -@import "../inc/variables"; - - -.mm-header -{ - background: inherit; - border-bottom: 1px solid transparent; - text-align: center; - line-height: $mm_btnSize / 2; - - box-sizing: border-box; - width: 100%; - height: $mm_headerHeight; - padding: 0 ( $mm_btnSize + $mm_padding ); - position: absolute; - z-index: 2; - top: 0; - left: 0; - - .mm-title, - .mm-prev, - .mm-next, - .mm-close - { - padding-top: $mm_headerPaddingTop; - } - .mm-title - { - @include mm_ellipsis; - - display: inline-block; - width: 100%; - position: relative; - } - - .mm-prev, - .mm-next, - .mm-close - { - text-decoration: none; - display: block; - box-sizing: border-box; - min-width: $mm_padding; - height: 100%; - position: absolute; - top: 0; - z-index: 1; - } - .mm-prev - { - padding-left: ( $mm_padding * 2 ); - padding-right: $mm_padding; - left: 0; - } - .mm-next, - .mm-close - { - padding-left: $mm_padding; - padding-right: ( $mm_padding * 2 ); - right: 0; - } - [href] - { - &.mm-prev:before, - &.mm-next:after - { - @include mm_arrow; - } - &.mm-prev:before - { - @include mm_arrow-prev; - margin-left: 2px; - margin-right: $mm_padding / 2; - } - &.mm-next:after, - &.mm-close:after - { - margin-left: $mm_padding / 2; - margin-right: -2px; - } - &.mm-next:after - { - @include mm_arrow-next; - } - &.mm-close:after - { - content: 'x'; - } - } +@use "../inc/variables"; +@use "../inc/colors"; +@use "../inc/mixins"; + + +.mm-header { + background: inherit; + border-bottom: 1px solid transparent; + text-align: center; + line-height: calc(variables.$mm_btnSize / 2); + + box-sizing: border-box; + width: 100%; + height: variables.$mm_headerHeight; + padding: 0 (variables.$mm_btnSize + variables.$mm_padding ); + position: absolute; + z-index: 2; + top: 0; + left: 0; + + .mm-title, + .mm-prev, + .mm-next, + .mm-close { + padding-top: variables.$mm_headerPaddingTop; + } + + .mm-title { + @include mixins.mm_ellipsis; + + display: inline-block; + width: 100%; + position: relative; + } + + .mm-prev, + .mm-next, + .mm-close { + text-decoration: none; + display: block; + box-sizing: border-box; + min-width: variables.$mm_padding; + height: 100%; + position: absolute; + top: 0; + z-index: 1; + } + + .mm-prev { + padding-left: (variables.$mm_padding * 2); + padding-right: variables.$mm_padding; + left: 0; + } + + .mm-next, + .mm-close { + padding-left: variables.$mm_padding; + padding-right: (variables.$mm_padding * 2); + right: 0; + } + + [href] { + + &.mm-prev:before, + &.mm-next:after { + @include mixins.mm_arrow; + } + + &.mm-prev:before { + @include mixins.mm_arrow-prev; + margin-left: 2px; + margin-right: calc(variables.$mm_padding / 2); + } + + &.mm-next:after, + &.mm-close:after { + margin-left: calc(variables.$mm_padding / 2); + margin-right: -2px; + } + + &.mm-next:after { + @include mixins.mm_arrow-next; + } + + &.mm-close:after { + content: 'x'; + } + } } -.mm-menu.mm-hassearch .mm-header -{ - height: $mm_headerHeight - $mm_padding; - top: $mm_searchHeight; - - .mm-title, - .mm-prev, - .mm-next, - .mm-close - { - padding-top: $mm_headerPaddingTop - $mm_padding; - } +.mm-menu.mm-hassearch .mm-header { + height: variables.$mm_headerHeight - variables.$mm_padding; + top: variables.$mm_searchHeight; + + .mm-title, + .mm-prev, + .mm-next, + .mm-close { + padding-top: variables.$mm_headerPaddingTop - variables.$mm_padding; + } } -$mm_paddingBeneathHeader: $mm_padding * 2 !default; -.mm-menu.mm-hasheader -{ - li.mm-subtitle - { - display: none; - } - > .mm-panel - { - padding-top: $mm_headerHeight + $mm_paddingBeneathHeader; - &.mm-list - { - padding-top: $mm_headerHeight; - } - > .mm-list:first-child - { - margin-top: -$mm_paddingBeneathHeader; - } - } - &.mm-hassearch > .mm-panel - { - padding-top: $mm_headerHeight + $mm_searchHeight + $mm_padding; - - &.mm-list - { - padding-top: $mm_headerHeight + $mm_searchHeight - $mm_padding; - } - } +$mm_paddingBeneathHeader: variables.$mm_padding * 2 !default; + +.mm-menu.mm-hasheader { + li.mm-subtitle { + display: none; + } + + >.mm-panel { + padding-top: variables.$mm_headerHeight + $mm_paddingBeneathHeader; + + &.mm-list { + padding-top: variables.$mm_headerHeight; + } + + >.mm-list:first-child { + margin-top: -$mm_paddingBeneathHeader; + } + } + + &.mm-hassearch>.mm-panel { + padding-top: variables.$mm_headerHeight + variables.$mm_searchHeight + variables.$mm_padding; + + &.mm-list { + padding-top: variables.$mm_headerHeight + variables.$mm_searchHeight - variables.$mm_padding; + } + } } -@include mm_colors_header; \ No newline at end of file +@include colors.mm_colors_header; diff --git a/source/_sass/mmenu/addons/jquery.mmenu.labels.scss b/source/_sass/mmenu/addons/jquery.mmenu.labels.scss index 2b2f296..0994431 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.labels.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.labels.scss @@ -2,39 +2,34 @@ jQuery.mmenu labels addon CSS */ -@import "../inc/variables"; +@use "../inc/variables"; +@use "../inc/colors"; +@use "../inc/mixins"; -.mm-list -{ - li.mm-label - { - > span - { - @include mm_ellipsis; - padding: 0; - line-height: $mm_labelHeight; - } +.mm-list { + li.mm-label { + >span { + @include mixins.mm_ellipsis; + padding: 0; + line-height: variables.$mm_labelHeight; + } - &.mm-opened a.mm-subopen:after - { - @include mm_webkit-prefix( "transform", rotate( 45deg ) ); - } - } - li.mm-collapsed:not( .mm-uncollapsed ) - { - display: none; - } + &.mm-opened a.mm-subopen:after { + @include mixins.mm_webkit-prefix("transform", rotate(45deg)); + } + } + + li.mm-collapsed:not(.mm-uncollapsed) { + display: none; + } } -.mm-menu.mm-vertical .mm-list -{ - > li.mm-label - { - > a.mm-subopen:after - { - top: ( $mm_labelHeight / 2 ) - 4; - } - } +.mm-menu.mm-vertical .mm-list { + >li.mm-label { + >a.mm-subopen:after { + top: calc(variables.$mm_labelHeight / 2) - 4; + } + } } -@include mm_colors_labels; \ No newline at end of file +@include colors.mm_colors_labels; diff --git a/source/_sass/mmenu/addons/jquery.mmenu.offcanvas.scss b/source/_sass/mmenu/addons/jquery.mmenu.offcanvas.scss index 1a94d47..a18e986 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.offcanvas.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.offcanvas.scss @@ -2,7 +2,8 @@ jQuery.mmenu offcanvas addon CSS */ -@import "../inc/variables"; +@use "../inc/variables"; +@use "../inc/sizing"; // Animations @@ -11,9 +12,9 @@ box-sizing: border-box; position: relative; - -webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction; - -ms-transition: -ms-transform $mm_transitionDuration $mm_transitionFunction; - transition: transform $mm_transitionDuration $mm_transitionFunction; + -webkit-transition: -webkit-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + -ms-transition: -ms-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + transition: transform variables.$mm_transitionDuration variables.$mm_transitionFunction; } // Container, Page, Blocker @@ -67,4 +68,4 @@ html.mm-blocking } -@include mm_sizing; \ No newline at end of file +@include sizing.mm_sizing; \ No newline at end of file diff --git a/source/_sass/mmenu/addons/jquery.mmenu.searchfield.scss b/source/_sass/mmenu/addons/jquery.mmenu.searchfield.scss index 552f345..f988c61 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.searchfield.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.searchfield.scss @@ -2,7 +2,9 @@ jQuery.mmenu searchfield addon CSS */ -@import "../inc/variables"; +@use "sass:math"; +@use "../inc/variables"; +@use "../inc/colors"; .mm-search, .mm-search input @@ -13,8 +15,8 @@ { > li.mm-search { - padding: $mm_padding; - margin-top: -( $mm_padding * 2 ); + padding: variables.$mm_padding; + margin-top: -( variables.$mm_padding * 2 ); } > li.mm-subtitle + li.mm-search { @@ -23,7 +25,7 @@ } div.mm-panel > div.mm-search { - padding: 0 0 $mm_padding 0; + padding: 0 0 variables.$mm_padding 0; } .mm-menu.mm-hasheader .mm-list > li.mm-search { @@ -40,21 +42,21 @@ div.mm-panel > div.mm-search } .mm-search { - padding: $mm_padding; + padding: variables.$mm_padding; input { border: none; - border-radius: $mm_searchfieldHeight; + border-radius: variables.$mm_searchfieldHeight; font: inherit; - font-size: $mm_fontSize; - line-height: $mm_searchfieldHeight; + font-size: variables.$mm_fontSize; + line-height: variables.$mm_searchfieldHeight; outline: none; display: block; width: 100%; - height: $mm_searchfieldHeight; + height: variables.$mm_searchfieldHeight; margin: 0; - padding: 0 $mm_padding; + padding: 0 variables.$mm_padding; } input::-ms-clear { @@ -65,9 +67,9 @@ div.mm-panel > div.mm-search .mm-menu .mm-noresultsmsg { text-align: center; - font-size: round( $mm_fontSize * 1.5 ); + font-size: math.round( variables.$mm_fontSize * 1.5 ); display: none; - padding: ( $mm_btnSize * 1.5 ) 0; + padding: ( variables.$mm_btnSize * 1.5 ) 0; &:after { @@ -79,7 +81,7 @@ div.mm-panel > div.mm-search display: block; } -$mm_paddingBeneathHeader: $mm_padding * 2 !default; +$mm_paddingBeneathHeader: variables.$mm_padding * 2 !default; .mm-menu { li.mm-nosubresults > a.mm-subopen @@ -96,7 +98,7 @@ $mm_paddingBeneathHeader: $mm_padding * 2 !default; { > .mm-panel { - padding-top: $mm_searchHeight + $mm_paddingBeneathHeader; + padding-top: variables.$mm_searchHeight + $mm_paddingBeneathHeader; > .mm-list:first-child { @@ -110,7 +112,7 @@ $mm_paddingBeneathHeader: $mm_padding * 2 !default; { > div.mm-search:first-child { - margin-top: -$mm_padding; + margin-top: -(variables.$mm_padding); + .mm-list { @@ -122,4 +124,4 @@ $mm_paddingBeneathHeader: $mm_padding * 2 !default; } -@include mm_colors_searchfield; \ No newline at end of file +@include colors.mm_colors_searchfield; \ No newline at end of file diff --git a/source/_sass/mmenu/addons/jquery.mmenu.toggles.scss b/source/_sass/mmenu/addons/jquery.mmenu.toggles.scss index c8683dd..10afcd3 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.toggles.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.toggles.scss @@ -2,177 +2,167 @@ jQuery.mmenu toggles addon CSS */ -@import "../inc/variables"; +@use "../inc/variables"; +@use "../inc/colors"; +@use "../inc/mixins"; input.mm-toggle, -input.mm-check -{ - position: absolute; - left: -10000px; +input.mm-check { + position: absolute; + left: -10000px; } label.mm-toggle, -label.mm-check -{ - margin: 0; - position: absolute; - bottom: 50%; - z-index: 2; - - &:before - { - content: ''; - display: block; - } +label.mm-check { + margin: 0; + position: absolute; + bottom: 50%; + z-index: 2; + + &:before { + content: ''; + display: block; + } } // styling -label.mm-toggle -{ - border-radius: $mm_toggleHeight; - width: $mm_toggleWidth; - height: $mm_toggleHeight; - margin-bottom: -( $mm_toggleHeight / 2 ); - - &:before - { - border-radius: $mm_toggleHeight; - width: $mm_toggleHeight - 2; - height: $mm_toggleHeight - 2; - margin: 1px; - } -} -input.mm-toggle:checked ~ label.mm-toggle:before -{ - float: right; -} - -label.mm-check -{ - width: $mm_checkWidth; - height: $mm_checkHeight; - margin-bottom: -( $mm_checkHeight / 2 ); - - &:before - { - border-left: 3px solid; - border-bottom: 3px solid; - width: 40%; - height: 20%; - margin: 25% 0 0 20%; - opacity: 0.1; - - @include mm-webkit-prefix( 'transform', rotate( -45deg ) ); - } -} -input.mm-check:checked ~ label.mm-check:before -{ - opacity: 1; +label.mm-toggle { + border-radius: variables.$mm_toggleHeight; + width: variables.$mm_toggleWidth; + height: variables.$mm_toggleHeight; + margin-bottom: - calc(variables.$mm_toggleHeight / 2); + + &:before { + border-radius: variables.$mm_toggleHeight; + width: variables.$mm_toggleHeight - 2; + height: variables.$mm_toggleHeight - 2; + margin: 1px; + } +} + +input.mm-toggle:checked~label.mm-toggle:before { + float: right; +} + +label.mm-check { + width: variables.$mm_checkWidth; + height: variables.$mm_checkHeight; + margin-bottom: - calc(variables.$mm_checkHeight / 2); + + &:before { + border-left: 3px solid; + border-bottom: 3px solid; + width: 40%; + height: 20%; + margin: 25% 0 0 20%; + opacity: 0.1; + + @include mixins.mm-webkit-prefix('transform', rotate(-45deg)); + } +} + +input.mm-check:checked~label.mm-check:before { + opacity: 1; } // vertical submenu -.mm-menu.mm-vertical .mm-list -{ - > li label - { - &.mm-toggle, - &.mm-check - { - bottom: auto; - margin-bottom: 0; - } - &.mm-toggle - { - top: ( $mm_btnSize - $mm_toggleHeight ) / 2; - - } - &.mm-check - { - top: ( $mm_btnSize - $mm_checkHeight ) / 2; - } - } +.mm-menu.mm-vertical .mm-list { + >li label { + + &.mm-toggle, + &.mm-check { + bottom: auto; + margin-bottom: 0; + } + + &.mm-toggle { + top: calc((variables.$mm_btnSize - variables.$mm_toggleHeight ) / 2); + + } + + &.mm-check { + top: calc((variables.$mm_btnSize - variables.$mm_checkHeight ) / 2); + } + } } // positioning -label -{ - &.mm-toggle, - &.mm-check - { - right: $mm_padding * 2; - } -} -label.mm-toggle -{ - + a, - + span - { - margin-right: $mm_toggleWidth + ( $mm_padding * 2 ); - } -} -label.mm-check -{ - + a, - + span - { - margin-right: $mm_checkWidth + ( $mm_padding * 2 ); - } +label { + + &.mm-toggle, + &.mm-check { + right: variables.$mm_padding * 2; + } +} + +label.mm-toggle { + + +a, + +span { + margin-right: variables.$mm_toggleWidth + (variables.$mm_padding * 2); + } +} + +label.mm-check { + + +a, + +span { + margin-right: variables.$mm_checkWidth + (variables.$mm_padding * 2); + } } // positioning with subopen -a.mm-subopen + label -{ - &.mm-toggle, - &.mm-check - { - right: $mm_subopenWidth + $mm_padding; - } -} -a.mm-subopen + label.mm-toggle -{ - + a, - + span - { - margin-right: $mm_subopenWidth + $mm_toggleWidth + $mm_padding; - } -} -a.mm-subopen + label.mm-check -{ - + a, - + span - { - margin-right: $mm_subopenWidth + $mm_checkWidth + $mm_padding; - } +a.mm-subopen+label { + + &.mm-toggle, + &.mm-check { + right: variables.$mm_subopenWidth + variables.$mm_padding; + } +} + +a.mm-subopen+label.mm-toggle { + + +a, + +span { + margin-right: variables.$mm_subopenWidth + variables.$mm_toggleWidth + variables.$mm_padding; + } +} + +a.mm-subopen+label.mm-check { + + +a, + +span { + margin-right: variables.$mm_subopenWidth + variables.$mm_checkWidth + variables.$mm_padding; + } } // positioning with counter -em.mm-counter + a.mm-subopen + label -{ - &.mm-toggle, - &.mm-check - { - right: $mm_counterWidth + $mm_subopenWidth + $mm_padding; - } -} -em.mm-counter + a.mm-subopen + label.mm-toggle -{ - + a, - + span - { - margin-right: $mm_counterWidth + $mm_subopenWidth + $mm_toggleWidth + $mm_padding; - } -} -em.mm-counter + a.mm-subopen + label.mm-check -{ - + a, - + span - { - margin-right: $mm_counterWidth + $mm_subopenWidth + $mm_checkWidth + $mm_padding; - } -} - -@include mm_colors_toggles; -@include mm_colors_checks; \ No newline at end of file +em.mm-counter+a.mm-subopen+label { + + &.mm-toggle, + &.mm-check { + right: variables.$mm_counterWidth + variables.$mm_subopenWidth + variables.$mm_padding; + } +} + +em.mm-counter+a.mm-subopen+label.mm-toggle { + + +a, + +span { + margin-right: variables.$mm_counterWidth + variables.$mm_subopenWidth + variables.$mm_toggleWidth + variables.$mm_padding; + } +} + +em.mm-counter+a.mm-subopen+label.mm-check { + + +a, + +span { + margin-right: variables.$mm_counterWidth + variables.$mm_subopenWidth + variables.$mm_checkWidth + variables.$mm_padding; + } +} + +@include colors.mm_colors_toggles; +@include colors.mm_colors_checks; diff --git a/source/_sass/mmenu/extensions/jquery.mmenu.effects.scss b/source/_sass/mmenu/extensions/jquery.mmenu.effects.scss index 78f9d5f..bcd39ed 100755 --- a/source/_sass/mmenu/extensions/jquery.mmenu.effects.scss +++ b/source/_sass/mmenu/extensions/jquery.mmenu.effects.scss @@ -2,7 +2,8 @@ jQuery.mmenu effects extension CSS */ -@import "../inc/variables"; +@use "../inc/variables"; +@use "../inc/mixins"; // Slide @@ -10,18 +11,18 @@ html.mm-slide { .mm-menu { - -webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction; - transition: transform $mm_transitionDuration $mm_transitionFunction; + -webkit-transition: -webkit-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + transition: transform variables.$mm_transitionDuration variables.$mm_transitionFunction; } // Left &.mm-opened .mm-menu { - @include mm_webkit-prefix( 'transform', translateX( -$mm_subpanelOffset ) ); + @include mixins.mm_webkit-prefix( 'transform', translateX( -(variables.$mm_subpanelOffset) ) ); } &.mm-opening .mm-menu { - @include mm_webkit-prefix( 'transform', translateX( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', translateX( 0% ) ); } // Right @@ -29,11 +30,11 @@ html.mm-slide { &.mm-opened .mm-menu { - @include mm_webkit-prefix( 'transform', translateX( $mm_subpanelOffset ) ); + @include mixins.mm_webkit-prefix( 'transform', translateX( variables.$mm_subpanelOffset ) ); } &.mm-opening .mm-menu { - @include mm_webkit-prefix( 'transform', translateX( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', translateX( 0% ) ); } } @@ -42,11 +43,11 @@ html.mm-slide { &.mm-opened .mm-menu { - @include mm_webkit-prefix( 'transform', translateY( -$mm_subpanelOffset ) ); + @include mixins.mm_webkit-prefix( 'transform', translateY( -(variables.$mm_subpanelOffset) ) ); } &.mm-opening .mm-menu { - @include mm_webkit-prefix( 'transform', translateY( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', translateY( 0% ) ); } } @@ -55,11 +56,11 @@ html.mm-slide { &.mm-opened .mm-menu { - @include mm_webkit-prefix( 'transform', translateY( $mm_subpanelOffset ) ); + @include mixins.mm_webkit-prefix( 'transform', translateY( variables.$mm_subpanelOffset ) ); } &.mm-opening .mm-menu { - @include mm_webkit-prefix( 'transform', translateY( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', translateY( 0% ) ); } } } @@ -72,19 +73,19 @@ html.mm-zoom-menu { .mm-menu { - -webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction; - transition: transform $mm_transitionDuration $mm_transitionFunction; + -webkit-transition: -webkit-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + transition: transform variables.$mm_transitionDuration variables.$mm_transitionFunction; } // Left &.mm-opened .mm-menu { - @include mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateX( -$mm_subpanelOffset ) ); - @include mm_webkit-prefix( 'transform-origin', left center ); + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateX( -(variables.$mm_subpanelOffset) ) ); + @include mixins.mm_webkit-prefix( 'transform-origin', left center ); } &.mm-opening .mm-menu { - @include mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) ); } // Right @@ -92,12 +93,12 @@ html.mm-zoom-menu { &.mm-opened .mm-menu { - @include mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown) translateX( $mm_subpanelOffset ) ); - @include mm_webkit-prefix( 'transform-origin', right center ); + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown) translateX( variables.$mm_subpanelOffset ) ); + @include mixins.mm_webkit-prefix( 'transform-origin', right center ); } &.mm-opening .mm-menu { - @include mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) ); } } @@ -106,12 +107,12 @@ html.mm-zoom-menu { &.mm-opened .mm-menu { - @include mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateY( -$mm_subpanelOffset ) ); - @include mm_webkit-prefix( 'transform-origin', center top ); + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateY( -(variables.$mm_subpanelOffset) ) ); + @include mixins.mm_webkit-prefix( 'transform-origin', center top ); } &.mm-opening .mm-menu { - @include mm_webkit-prefix( 'transform', scale( 1, 1 ) translateY( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', scale( 1, 1 ) translateY( 0% ) ); } } @@ -120,12 +121,12 @@ html.mm-zoom-menu { &.mm-opened .mm-menu { - @include mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateY( $mm_subpanelOffset ) ); - @include mm_webkit-prefix( 'transform-origin', center bottom ); + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateY( variables.$mm_subpanelOffset ) ); + @include mixins.mm_webkit-prefix( 'transform-origin', center bottom ); } &.mm-opening .mm-menu { - @include mm_webkit-prefix( 'transform', scale( 1, 1 ) translateY( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', scale( 1, 1 ) translateY( 0% ) ); } } } @@ -134,19 +135,19 @@ html.mm-zoom-menu // Zoom panels html.mm-zoom-panels .mm-menu.mm-horizontal > .mm-panel { - @include mm_webkit-prefix( 'transform', scale( $mm_scaleUp, $mm_scaleUp ) translateX( 100% ) ); - @include mm_webkit-prefix( 'transform-origin', left center ); + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleUp, $mm_scaleUp ) translateX( 100% ) ); + @include mixins.mm_webkit-prefix( 'transform-origin', left center ); -webkit-transition-property: -webkit-transform, left; transition-property: transform, left; &.mm-opened { - @include mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) ); &.mm-subopened { - @include mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateX( -$mm_subpanelOffset ) ); + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateX( -(variables.$mm_subpanelOffset) ) ); } } } diff --git a/source/_sass/mmenu/extensions/jquery.mmenu.fullscreen.scss b/source/_sass/mmenu/extensions/jquery.mmenu.fullscreen.scss index e53fc60..32ce868 100755 --- a/source/_sass/mmenu/extensions/jquery.mmenu.fullscreen.scss +++ b/source/_sass/mmenu/extensions/jquery.mmenu.fullscreen.scss @@ -2,20 +2,21 @@ jQuery.mmenu fullscreen extension CSS */ -@import "../inc/variables"; +@use "../inc/variables"; +@use "../inc/sizing"; $mm_fs_class : ".mm-fullscreen"; $mm_fs_full : 1 !default; $mm_fs_min : 140px !default; $mm_fs_max : 10000px !default; -@include mm_sizing( $mm_fs_class, +@include sizing.mm_sizing( $mm_fs_class, $mm_fs_full, $mm_fs_min, $mm_fs_max ); -@include mm_sizing_right( $mm_fs_class, +@include sizing.mm_sizing_right( $mm_fs_class, $mm_fs_full, $mm_fs_min, $mm_fs_max); -@include mm_sizing_zposition( $mm_fs_class, +@include sizing.mm_sizing_zposition( $mm_fs_class, $mm_fs_full, $mm_fs_min, $mm_fs_max ); html.mm-opened#{$mm_fs_class} .mm-page diff --git a/source/_sass/mmenu/extensions/jquery.mmenu.positioning.scss b/source/_sass/mmenu/extensions/jquery.mmenu.positioning.scss index db75266..6ca5ba8 100755 --- a/source/_sass/mmenu/extensions/jquery.mmenu.positioning.scss +++ b/source/_sass/mmenu/extensions/jquery.mmenu.positioning.scss @@ -2,7 +2,9 @@ jQuery.mmenu position extension CSS */ -@import "../inc/variables"; +@use "../inc/variables"; +@use "../inc/mixins"; +@use "../inc/sizing"; // top // bottom @@ -28,7 +30,7 @@ bottom: 0; } -@include mm_sizing_right; +@include sizing.mm_sizing_right; @@ -42,7 +44,7 @@ html.mm-front .mm-page, #mm-blocker { - @include mm-webkit-prefix( 'transform', translate( 0, 0 ) !important ); + @include mixins.mm-webkit-prefix( 'transform', translate( 0, 0 ) !important ); z-index: 0; } } @@ -64,25 +66,25 @@ html.mm-opened.mm-next .mm-page &.mm-front, &.mm-next { - -webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction; - transition: transform $mm_transitionDuration $mm_transitionFunction; + -webkit-transition: -webkit-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + transition: transform variables.$mm_transitionDuration variables.$mm_transitionFunction; - @include mm-webkit-prefix( 'transform', translate( -100%, 0 ) ); + @include mixins.mm-webkit-prefix( 'transform', translate( -100%, 0 ) ); &.mm-right { - @include mm-webkit-prefix( 'transform', translate( 100%, 0 ) ); + @include mixins.mm-webkit-prefix( 'transform', translate( 100%, 0 ) ); } } &.mm-front { &.mm-top { - @include mm-webkit-prefix( 'transform', translate( 0, -100% ) ); + @include mixins.mm-webkit-prefix( 'transform', translate( 0, -100% ) ); } &.mm-bottom { - @include mm-webkit-prefix( 'transform', translate( 0, 100% ) ); + @include mixins.mm-webkit-prefix( 'transform', translate( 0, 100% ) ); } } } @@ -91,8 +93,8 @@ html.mm-opening .mm-menu &.mm-front, &.mm-next { - @include mm-webkit-prefix( 'transform', translate( 0, 0 ) ); + @include mixins.mm-webkit-prefix( 'transform', translate( 0, 0 ) ); } } -@include mm_sizing_zposition; \ No newline at end of file +@include sizing.mm_sizing_zposition; \ No newline at end of file diff --git a/source/_sass/mmenu/extensions/jquery.mmenu.themes.scss b/source/_sass/mmenu/extensions/jquery.mmenu.themes.scss index ac299bc..82fc814 100755 --- a/source/_sass/mmenu/extensions/jquery.mmenu.themes.scss +++ b/source/_sass/mmenu/extensions/jquery.mmenu.themes.scss @@ -2,42 +2,43 @@ jQuery.mmenu themes extension CSS */ -@import "../inc/variables"; +@use "../inc/variables"; +@use "../inc/colors"; @mixin mm_apply_theme() { - @include mm_colors( $mm_t_cls, + @include colors.mm_colors( $mm_t_cls, $mm_t_backgroundColor, $mm_t_pageShadow, $mm_t_textColor, $mm_t_dimmedTextColor, $mm_t_emphasizedBackgroundColor, $mm_t_highlightedBackgroundColor, $mm_t_borderColor ); - @include mm_colors_buttonbars( $mm_t_cls, + @include colors.mm_colors_buttonbars( $mm_t_cls, $mm_t_backgroundColor, $mm_t_textColor ); - @include mm_colors_checks( $mm_t_cls, + @include colors.mm_colors_checks( $mm_t_cls, $mm_t_textColor ); - @include mm_colors_counters( $mm_t_cls, + @include colors.mm_colors_counters( $mm_t_cls, $mm_t_dimmedTextColor ); - @include mm_colors_footer( $mm_t_cls, + @include colors.mm_colors_footer( $mm_t_cls, $mm_t_dimmedTextColor, $mm_t_borderColor ); - @include mm_colors_header( $mm_t_cls, + @include colors.mm_colors_header( $mm_t_cls, $mm_t_dimmedTextColor, $mm_t_borderColor ); - @include mm_colors_labels( $mm_t_cls, + @include colors.mm_colors_labels( $mm_t_cls, $mm_t_highlightedBackgroundColor ); - @include mm_colors_searchfield( $mm_t_cls, + @include colors.mm_colors_searchfield( $mm_t_cls, $mm_t_inputBackgroundColor, $mm_t_textColor, $mm_t_dimmedTextColor ); - @include mm_colors_toggles( $mm_t_cls, + @include colors.mm_colors_toggles( $mm_t_cls, $mm_t_backgroundColor, $mm_t_borderColor ); } diff --git a/source/_sass/mmenu/inc/_colors.scss b/source/_sass/mmenu/inc/_colors.scss index d05565e..660b925 100755 --- a/source/_sass/mmenu/inc/_colors.scss +++ b/source/_sass/mmenu/inc/_colors.scss @@ -1,8 +1,10 @@ +@use "variables"; + @mixin mm_colors( $cls: "", - $baseBg: $mm_backgroundColor, $pageShadow: $mm_pageShadow, - $color: $mm_textColor, $dimmedColor: $mm_dimmedTextColor, - $emphasizedBg: $mm_emphasizedBackgroundColor, $highlightedBg: $mm_highlightedBackgroundColor, - $borderColor: $mm_borderColor + $baseBg: variables.$mm_backgroundColor, $pageShadow: variables.$mm_pageShadow, + $color: variables.$mm_textColor, $dimmedColor: variables.$mm_dimmedTextColor, + $emphasizedBg: variables.$mm_emphasizedBackgroundColor, $highlightedBg: variables.$mm_highlightedBackgroundColor, + $borderColor: variables.$mm_borderColor ) { html.mm-opened#{$cls} .mm-page { @@ -68,8 +70,8 @@ } @mixin mm_colors_buttonbars( $cls: "", - $baseBg: $mm_backgroundColor, - $color: $mm_textColor + $baseBg: variables.$mm_backgroundColor, + $color: variables.$mm_textColor ) { .mm-menu#{$cls} { @@ -93,7 +95,7 @@ } @mixin mm_colors_checks( $cls: "", - $color: $mm_textColor + $color: variables.$mm_textColor ) { .mm-menu#{$cls} label.mm-check:before { @@ -102,7 +104,7 @@ } @mixin mm_colors_counters( $cls: "", - $dimmedColor: $mm_dimmedTextColor + $dimmedColor: variables.$mm_dimmedTextColor ) { .mm-menu#{$cls} em.mm-counter { @@ -111,8 +113,8 @@ } @mixin mm_colors_footer( $cls: "", - $dimmedColor: $mm_dimmedTextColor, - $borderColor: $mm_borderColor + $dimmedColor: variables.$mm_dimmedTextColor, + $borderColor: variables.$mm_borderColor ) { .mm-menu#{$cls} { @@ -125,8 +127,8 @@ } @mixin mm_colors_header( $cls: "", - $dimmedColor: $mm_dimmedTextColor, - $borderColor: $mm_borderColor + $dimmedColor: variables.$mm_dimmedTextColor, + $borderColor: variables.$mm_borderColor ) { .mm-menu#{$cls} { @@ -146,7 +148,7 @@ } @mixin mm_colors_labels( $cls: "", - $highlightedBg: $mm_highlightedBackgroundColor + $highlightedBg: variables.$mm_highlightedBackgroundColor ) { .mm-menu#{$cls} { @@ -158,8 +160,8 @@ } @mixin mm_colors_searchfield( $cls: "", - $inputBg: $mm_dimmedTextColor, $color: $mm_textColor, - $dimmedColor: $mm_dimmedTextColor + $inputBg: variables.$mm_dimmedTextColor, $color: variables.$mm_textColor, + $dimmedColor: variables.$mm_dimmedTextColor ) { .mm-menu#{$cls} { @@ -176,8 +178,8 @@ } @mixin mm_colors_toggles( $cls: "", - $buttonBg: $mm_backgroundColor, - $offBg: $mm_borderColor, $onBg: $mm_toggleCheckedColor + $buttonBg: variables.$mm_backgroundColor, + $offBg: variables.$mm_borderColor, $onBg: variables.$mm_toggleCheckedColor ) { .mm-menu#{$cls} { @@ -195,4 +197,4 @@ background: $onBg; } } -} \ No newline at end of file +} diff --git a/source/_sass/mmenu/inc/_sizing.scss b/source/_sass/mmenu/inc/_sizing.scss index feadaed..40f1980 100755 --- a/source/_sass/mmenu/inc/_sizing.scss +++ b/source/_sass/mmenu/inc/_sizing.scss @@ -1,92 +1,90 @@ +@use "sass:math"; +@use "mixins"; +@use "variables"; + // Sizing left (default) -@mixin mm_sizing( $cls: "", - $width: $mm_width, $minWidth: $mm_minWidth, $maxWidth: $mm_maxWidth -) { - .mm-menu#{$cls} - { - width: percentage( $width ); - min-width: $minWidth; - max-width: $maxWidth; - } - html.mm-opening#{$cls} - { - .mm-page, - #mm-blocker - { - @include mm-webkit-prefix( 'transform', translate( percentage( $width ), 0 ) ); - } - } - @media all and (max-width: $minWidth / $width ) { - html.mm-opening#{$cls} - { - .mm-page, - #mm-blocker - { - @include mm-webkit-prefix( 'transform', translate( $minWidth, 0 ) ); - } - } - } - @media all and (min-width: $maxWidth / $width ) { - html.mm-opening#{$cls} - { - .mm-page, - #mm-blocker - { - @include mm-webkit-prefix( 'transform', translate( $maxWidth, 0 ) ); - } - } - } +@mixin mm_sizing($cls: "", + $width: variables.$mm_width, $minWidth: variables.$mm_minWidth, $maxWidth: variables.$mm_maxWidth) { + .mm-menu#{$cls} { + width: math.percentage($width ); + min-width: $minWidth; + max-width: $maxWidth; + } + + html.mm-opening#{$cls} { + + .mm-page, + #mm-blocker { + @include mixins.mm-webkit-prefix('transform', translate(math.percentage($width ), 0)); + } + } + + @media all and (max-width: calc($minWidth / $width)) { + html.mm-opening#{$cls} { + + .mm-page, + #mm-blocker { + @include mixins.mm-webkit-prefix('transform', translate($minWidth, 0)); + } + } + } + + @media all and (min-width: calc($maxWidth / $width)) { + html.mm-opening#{$cls} { + + .mm-page, + #mm-blocker { + @include mixins.mm-webkit-prefix('transform', translate($maxWidth, 0)); + } + } + } } // Sizing right -@mixin mm_sizing_right( $cls: "", - $width: $mm_width, $minWidth: $mm_minWidth, $maxWidth: $mm_maxWidth -) { - html.mm-right.mm-opening#{$cls} - { - .mm-page, - #mm-blocker - { - @include mm-webkit-prefix( 'transform', translate( -( percentage( $width ) ), 0 ) ); - } - } - @media all and ( max-width: $minWidth / $width ) { - html.mm-right.mm-opening#{$cls} - { - .mm-page, - #mm-blocker - { - @include mm-webkit-prefix( 'transform', translate( -$minWidth, 0 ) ); - } - } - } - @media all and ( min-width: $maxWidth / $width ) { - html.mm-right.mm-opening#{$cls} - { - .mm-page, - #mm-blocker - { - @include mm-webkit-prefix( 'transform', translate( -$maxWidth, 0 ) ); - } - } - } +@mixin mm_sizing_right($cls: "", + $width: variables.$mm_width, $minWidth: variables.$mm_minWidth, $maxWidth: variables.$mm_maxWidth) { + html.mm-right.mm-opening#{$cls} { + + .mm-page, + #mm-blocker { + @include mixins.mm-webkit-prefix('transform', translate(-(math.percentage($width )), 0)); + } + } + + @media all and (max-width: calc($minWidth / $width)) { + html.mm-right.mm-opening#{$cls} { + + .mm-page, + #mm-blocker { + @include mixins.mm-webkit-prefix('transform', translate(-$minWidth, 0)); + } + } + } + + @media all and (min-width: calc($maxWidth / $width)) { + html.mm-right.mm-opening#{$cls} { + + .mm-page, + #mm-blocker { + @include mixins.mm-webkit-prefix('transform', translate(-$maxWidth, 0)); + } + } + } } // Sizing z-position -@mixin mm_sizing_zposition( $cls: "", - $height: $mm_height, $minHeight: $mm_minHeight, $maxHeight: $mm_maxHeight -) { - - // top - // bottom - .mm-menu.mm-front#{$cls} - { - &.mm-top, - &.mm-bottom - { - height: percentage( $height ); - min-height: $minHeight; - max-height: $maxHeight; - } - } +@mixin mm_sizing_zposition($cls: "", + $height: variables.$mm_height, $minHeight: variables.$mm_minHeight, $maxHeight: variables.$mm_maxHeight) { + + // top + // bottom + .mm-menu.mm-front#{$cls} { + + &.mm-top, + &.mm-bottom { + height: math.percentage($height ); + min-height: $minHeight; + max-height: $maxHeight; + } + } } diff --git a/source/_sass/mmenu/inc/_variables.scss b/source/_sass/mmenu/inc/_variables.scss index 078894f..9cf786e 100755 --- a/source/_sass/mmenu/inc/_variables.scss +++ b/source/_sass/mmenu/inc/_variables.scss @@ -19,12 +19,13 @@ $mm_subpanelOffset : 30% !default; $mm_subopenWidth : $mm_btnSize !default; // Addon sizes -$mm_buttonbarHeight : $mm_btnSize - ( $mm_padding * 2 ) !default; +$mm_buttonbarHeight : $mm_btnSize - ($mm_padding * 2) !default; $mm_counterWidth : $mm_btnSize !default; $mm_toggleHeight : $mm_btnSize - $mm_padding !default; -$mm_toggleWidth : ( $mm_toggleHeight * 2 ) - $mm_padding !default; +$mm_toggleWidth : ( + $mm_toggleHeight * 2) - $mm_padding !default; $mm_checkHeight : $mm_btnSize - $mm_padding !default; $mm_checkWidth : $mm_btnSize - $mm_padding !default; @@ -32,27 +33,25 @@ $mm_checkWidth : $mm_btnSize - $mm_padding !default; $mm_footerHeight : $mm_btnSize; $mm_headerHeight : $mm_btnSize * 1.5 !default; -$mm_headerPaddingTop : $mm_headerHeight / 2 !default; +$mm_headerPaddingTop : calc($mm_headerHeight / 2) !default; -$mm_labelHeight : ( $mm_btnSize / 2 ) + ( $mm_padding / 2 ) !default; +$mm_labelHeight : calc(($mm_btnSize / 2) + ($mm_padding / 2)) !default; $mm_searchHeight : $mm_btnSize + $mm_padding !default; -$mm_searchfieldHeight : $mm_searchHeight - ( $mm_padding * 2 ) !default; +$mm_searchfieldHeight : $mm_searchHeight - ($mm_padding * 2) !default; // Colors $mm_pageShadow : none; //0 0 20px rgba( 0, 0, 0, 0.5 ) !default; -$mm_borderColor : rgba( 0, 0, 0, 0.15 ) !default; +$mm_borderColor : rgba(0, 0, 0, 0.15) !default; $mm_backgroundColor : #222 !default; -$mm_emphasizedBackgroundColor : rgba( 0, 0, 0, 0.1 ) !default; -$mm_highlightedBackgroundColor : rgba( 255, 255, 255, 0.05 ) !default; -$mm_textColor : rgba( 255, 255, 255, 0.8 ) !default; -$mm_dimmedTextColor : rgba( 255, 255, 255, 0.5 ) !default; +$mm_emphasizedBackgroundColor : rgba(0, 0, 0, 0.1) !default; +$mm_highlightedBackgroundColor : rgba(255, 255, 255, 0.05) !default; +$mm_textColor : rgba(255, 255, 255, 0.8) !default; +$mm_dimmedTextColor : rgba(255, 255, 255, 0.5) !default; // Addon colors $mm_toggleCheckedColor : #4bd963 !default; -@import "mixins"; -@import "sizing"; -@import "colors"; \ No newline at end of file +@use "mixins"; diff --git a/source/_sass/mmenu/jquery.mmenu.all.scss b/source/_sass/mmenu/jquery.mmenu.all.scss index 2198034..b54d645 100755 --- a/source/_sass/mmenu/jquery.mmenu.all.scss +++ b/source/_sass/mmenu/jquery.mmenu.all.scss @@ -1,15 +1,15 @@ -@import "jquery.mmenu"; +@use "jquery.mmenu"; -@import "addons/jquery.mmenu.buttonbars"; -@import "addons/jquery.mmenu.counters"; -@import "addons/jquery.mmenu.dragopen"; -@import "addons/jquery.mmenu.footer"; -@import "addons/jquery.mmenu.header"; -@import "addons/jquery.mmenu.labels"; -@import "addons/jquery.mmenu.searchfield"; -@import "addons/jquery.mmenu.toggles"; +@use "addons/jquery.mmenu.buttonbars" as jquery2; +@use "addons/jquery.mmenu.counters" as jquery3; +@use "addons/jquery.mmenu.dragopen" as jquery4; +@use "addons/jquery.mmenu.footer" as jquery5; +@use "addons/jquery.mmenu.header" as jquery6; +@use "addons/jquery.mmenu.labels" as jquery7; +@use "addons/jquery.mmenu.searchfield" as jquery8; +@use "addons/jquery.mmenu.toggles" as jquery9; -@import "extensions/jquery.mmenu.effects"; -@import "extensions/jquery.mmenu.fullscreen"; -@import "extensions/jquery.mmenu.positioning"; -@import "extensions/jquery.mmenu.themes"; \ No newline at end of file +@use "extensions/jquery.mmenu.effects" as jquery10; +@use "extensions/jquery.mmenu.fullscreen" as jquery11; +@use "extensions/jquery.mmenu.positioning" as jquery12; +@use "extensions/jquery.mmenu.themes" as jquery13; \ No newline at end of file diff --git a/source/_sass/mmenu/jquery.mmenu.oncanvas.scss b/source/_sass/mmenu/jquery.mmenu.oncanvas.scss index 27a65cd..b187507 100755 --- a/source/_sass/mmenu/jquery.mmenu.oncanvas.scss +++ b/source/_sass/mmenu/jquery.mmenu.oncanvas.scss @@ -1,298 +1,272 @@ /* jQuery.mmenu panels CSS */ -@import "inc/variables"; +@use "inc/variables"; +@use "inc/sizing"; +@use "inc/colors"; +@use "inc/mixins"; // Animations -.mm-menu.mm-horizontal > .mm-panel -{ - -webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction; - transition: transform $mm_transitionDuration $mm_transitionFunction; +.mm-menu.mm-horizontal>.mm-panel { + -webkit-transition: -webkit-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + transition: transform variables.$mm_transitionDuration variables.$mm_transitionFunction; } // Generic classes -.mm-menu .mm-hidden -{ - display: none; +.mm-menu .mm-hidden { + display: none; } // Container -.mm-wrapper -{ - overflow-x: hidden; - position: relative; +.mm-wrapper { + overflow-x: hidden; + position: relative; } // Menu .mm-menu, -.mm-menu > .mm-panel -{ - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - z-index: 0; +.mm-menu>.mm-panel { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 0; } -.mm-menu -{ - background: inherit; - display: block; - overflow: hidden; - padding: 0; - - > .mm-panel - { - background: inherit; - - -webkit-overflow-scrolling: touch; - overflow: scroll; - overflow-x: hidden; - overflow-y: auto; - - box-sizing: border-box; - padding: $mm_padding * 2; - - @include mm_webkit-prefix( 'transform', translateX( 100% ) ); - - &.mm-opened - { - @include mm_webkit-prefix( 'transform', translateX( 0% ) ); - } - &.mm-subopened - { - @include mm_webkit-prefix( 'transform', translateX( -$mm_subpanelOffset ) ); - } - &.mm-highest - { - z-index: 1; - } - } - - // Lists - .mm-list - { - padding: ( $mm_btnSize / 2 ) 0; - } - > .mm-list - { - padding-bottom: 0; - - &:after - { - content: ''; - display: block; - height: $mm_btnSize; - } - } + +.mm-menu { + background: inherit; + display: block; + overflow: hidden; + padding: 0; + + >.mm-panel { + background: inherit; + + -webkit-overflow-scrolling: touch; + overflow: scroll; + overflow-x: hidden; + overflow-y: auto; + + box-sizing: border-box; + padding: variables.$mm_padding * 2; + + @include mixins.mm_webkit-prefix('transform', translateX(100%)); + + &.mm-opened { + @include mixins.mm_webkit-prefix('transform', translateX(0%)); + } + + &.mm-subopened { + @include mixins.mm_webkit-prefix('transform', translateX(-(variables.$mm_subpanelOffset) )); + } + + &.mm-highest { + z-index: 1; + } + } + + // Lists + .mm-list { + padding: calc(variables.$mm_btnSize / 2) 0; + } + + >.mm-list { + padding-bottom: 0; + + &:after { + content: ''; + display: block; + height: variables.$mm_btnSize; + } + } } -.mm-panel > .mm-list -{ - margin-left: -( $mm_padding * 2 ); - margin-right: -( $mm_padding * 2 ); - - &:first-child - { - padding-top: 0; - } + +.mm-panel>.mm-list { + margin-left: -(variables.$mm_padding * 2); + margin-right: -(variables.$mm_padding * 2); + + &:first-child { + padding-top: 0; + } } .mm-list, -.mm-list > li -{ - list-style: none; - display: block; - padding: 0; - margin: 0; +.mm-list>li { + list-style: none; + display: block; + padding: 0; + margin: 0; +} + +.mm-list { + font: inherit; + font-size: variables.$mm_fontSize; + + a, + a:hover { + text-decoration: none; + } + + >li { + position: relative; + + >a, + >span { + @include mixins.mm_ellipsis; + + color: inherit; + line-height: calc(variables.$mm_btnSize - (variables.$mm_padding * 2)); + display: block; + padding: variables.$mm_padding variables.$mm_padding variables.$mm_padding ( + variables.$mm_padding * 2 + ); + margin: 0; + } +} + +>li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults) { + @include mixins.mm_border-bottom; + + &:after { + width: auto; + margin-left: (variables.$mm_padding * 2); + position: relative; + left: auto; + } +} + +// subopen/close +a.mm-subopen { + @include mixins.mm_border-left; + + background: rgba(3, 2, 1, 0); + width: variables.$mm_subopenWidth; + height: 100%; + padding: 0; + position: absolute; + right: 0; + top: 0; + z-index: 2; + + &.mm-fullsubopen { + width: 100%; + + &:before { + border-left: none; + } + } + + +a, + +span { + padding-right: calc(variables.$mm_padding / 2); + margin-right: variables.$mm_subopenWidth; + } +} + +>li.mm-selected { + >a.mm-subopen { + background: transparent; + } + + >a.mm-fullsubopen { + + +a, + +span { + padding-right: calc(variables.$mm_btnSize + (variables.$mm_padding / 2)); + margin-right: 0; + } + } +} + +a.mm-subclose { + text-indent: calc(variables.$mm_btnSize - (variables.$mm_padding * 2)); + padding-top: calc((variables.$mm_btnSize / 2) + variables.$mm_padding); + margin-top: - calc(variables.$mm_btnSize / 2); +} + +// Labels +>li.mm-label { + @include mixins.mm_ellipsis; + + font-size: 10px; + text-transform: uppercase; + text-indent: variables.$mm_padding * 2; + line-height: variables.$mm_labelHeight; + padding-right: calc(variables.$mm_padding / 2); +} + +// Spacers +>li.mm-spacer { + padding-top: variables.$mm_btnSize; + + &.mm-label { + padding-top: variables.$mm_labelHeight; + } +} + +// Arrows +a.mm-subopen:after, +a.mm-subclose:before { + @include mixins.mm_arrow; + + margin-bottom: -5px; + position: absolute; + bottom: 50%; +} + +a.mm-subopen:after { + @include mixins.mm_arrow-next; + + right: 18px; +} + +a.mm-subclose:before { + @include mixins.mm_arrow-prev; + + margin-bottom: -(variables.$mm_padding * 2) + 5; + left: 22px; } -.mm-list -{ - font: inherit; - font-size: $mm_fontSize; - - a, - a:hover - { - text-decoration: none; - } - - > li - { - position: relative; - - > a, - > span - { - @include mm_ellipsis; - - color: inherit; - line-height: $mm_btnSize - ( $mm_padding * 2 ); - display: block; - padding: $mm_padding $mm_padding $mm_padding ( $mm_padding * 2 ); - margin: 0; - } - } - - > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults) - { - @include mm_border-bottom; - - &:after - { - width: auto; - margin-left: ( $mm_padding * 2 ); - position: relative; - left: auto; - } - } - - // subopen/close - a.mm-subopen - { - @include mm_border-left; - - background: rgba( 3, 2, 1, 0 ); - width: $mm_subopenWidth; - height: 100%; - padding: 0; - position: absolute; - right: 0; - top: 0; - z-index: 2; - - &.mm-fullsubopen - { - width: 100%; - - &:before - { - border-left: none; - } - } - - + a, - + span - { - padding-right: ( $mm_padding / 2 ); - margin-right: $mm_subopenWidth; - } - } - - > li.mm-selected - { - > a.mm-subopen - { - background: transparent; - } - > a.mm-fullsubopen - { - + a, - + span - { - padding-right: $mm_btnSize + ( $mm_padding / 2 ); - margin-right: 0; - } - } - } - - a.mm-subclose - { - text-indent: $mm_btnSize - ( $mm_padding * 2 ); - padding-top: ( $mm_btnSize / 2 ) + $mm_padding; - margin-top: -( $mm_btnSize / 2 ); - } - - // Labels - > li.mm-label - { - @include mm_ellipsis; - - font-size: 10px; - text-transform: uppercase; - text-indent: $mm_padding * 2; - line-height: $mm_labelHeight; - padding-right: $mm_padding / 2; - } - - // Spacers - > li.mm-spacer - { - padding-top: $mm_btnSize; - - &.mm-label - { - padding-top: $mm_labelHeight; - } - } - - // Arrows - a.mm-subopen:after, - a.mm-subclose:before - { - @include mm_arrow; - - margin-bottom: -5px; - position: absolute; - bottom: 50%; - } - a.mm-subopen:after - { - @include mm_arrow-next; - - right: 18px; - } - a.mm-subclose:before - { - @include mm_arrow-prev; - - margin-bottom: -( $mm_padding * 2 ) + 5; - left: 22px; - } } // vertical submenu -.mm-menu.mm-vertical .mm-list -{ - .mm-panel - { - display: none; - padding: $mm_padding 0 $mm_padding $mm_padding; - - li:last-child:after - { - border-color: transparent; - } - } - li.mm-opened > .mm-panel - { - display: block; - } - > li - { - > a.mm-subopen - { - height: $mm_btnSize; - &:after - { - top: ( $mm_btnSize / 2 ) - 4; - bottom: auto; - } - } - &.mm-opened - { - > a.mm-subopen:after - { - @include mm_webkit-prefix( "transform", rotate( 45deg ) ); - } - } - &.mm-label > a.mm-subopen - { - height: $mm_labelHeight; - } - } +.mm-menu.mm-vertical .mm-list { + .mm-panel { + display: none; + padding: variables.$mm_padding 0 variables.$mm_padding variables.$mm_padding; + + li:last-child:after { + border-color: transparent; + } + } + + li.mm-opened>.mm-panel { + display: block; + } + + >li { + >a.mm-subopen { + height: variables.$mm_btnSize; + + &:after { + top: calc((variables.$mm_btnSize / 2) - 4px); + bottom: auto; + } + } + + &.mm-opened { + >a.mm-subopen:after { + @include mixins.mm_webkit-prefix("transform", rotate(45deg)); + } + } + + &.mm-label>a.mm-subopen { + height: variables.$mm_labelHeight; + } + } } -@include mm_colors; \ No newline at end of file +@include colors.mm_colors; diff --git a/source/_sass/mmenu/jquery.mmenu.scss b/source/_sass/mmenu/jquery.mmenu.scss index ed6efe3..0764685 100755 --- a/source/_sass/mmenu/jquery.mmenu.scss +++ b/source/_sass/mmenu/jquery.mmenu.scss @@ -2,5 +2,5 @@ jQuery.mmenu CSS */ -@import "jquery.mmenu.oncanvas"; -@import "addons/jquery.mmenu.offcanvas"; +@use "jquery.mmenu.oncanvas"; +@use "addons/jquery.mmenu.offcanvas" as jquery2; diff --git a/source/_sass/responsive/partials/_grid.scss b/source/_sass/responsive/partials/_grid.scss index f51becd..7be3124 100755 --- a/source/_sass/responsive/partials/_grid.scss +++ b/source/_sass/responsive/partials/_grid.scss @@ -1,84 +1,89 @@ +@use "../utilities/mixins/breakpoints"; +@use "../utilities/mixins/grid"; +@use "../utilities/variables"; +@use "../../base/extends/clearfix"; + /**Manages width in a single place */ -.container { - margin: 0 auto; - max-width: $grid-container-max-width; - width: $grid-container-width; - - &.fixed, - .fixed & { - width: $grid-container-max-width; - } -} - -.container--full { - width: 100%; - height: 100%; - - &.fixed, - .fixed & { - width: $grid-container-max-width; - } -} - -.row { - @extend .clearfix; -} - -/**Columns */ -[class*=col-] { - display: block; - width: 100%; - float: left; - min-height: 1px; - - [dir="rtl"] & { - float: right; - } - - &[class*=offset], - &[class*=push], - &[class*=pull] { - position: relative; - } -} - -.no-gutter.pad-gutter > [class*=col-] { - padding: 0 $grid-column-gutter/2; -} - -/* + .container { + margin: 0 auto; + max-width: variables.$grid-container-max-width; + width: variables.$grid-container-width; + + &.fixed, + .fixed & { + width: variables.$grid-container-max-width; + } + } + + .container--full { + width: 100%; + height: 100%; + + &.fixed, + .fixed & { + width: variables.$grid-container-max-width; + } + } + + .row { + @extend %clearfix; + } + + /**Columns */ + [class*=col-] { + display: block; + width: 100%; + float: left; + min-height: 1px; + + [dir="rtl"] & { + float: right; + } + + &[class*=offset], + &[class*=push], + &[class*=pull] { + position: relative; + } + } + + .no-gutter.pad-gutter>[class*=col-] { + padding: 0 calc(variables.$grid-column-gutter / 2); + } + + /* * Extra small */ -@include grid-base(xs); + @include grid.grid-base(xs); -@include grid-columns(xs); + @include grid.grid-columns(xs); -/* + /* * Small */ -@include bp-min(s) { + @include breakpoints.bp-min(s) { - @include grid-base(s); + @include grid.grid-base(s); - @include grid-columns(s); -} + @include grid.grid-columns(s); + } -/* + /* * Medium */ -@include bp-min(m) { + @include breakpoints.bp-min(m) { - @include grid-base(m); + @include grid.grid-base(m); - @include grid-columns(m); -} + @include grid.grid-columns(m); + } -/* + /* * Large */ -@include bp-min(l) { + @include breakpoints.bp-min(l) { - @include grid-base(l); + @include grid.grid-base(l); - @include grid-columns(l); -} + @include grid.grid-columns(l); + } diff --git a/source/_sass/responsive/partials/_helpers-layout.scss b/source/_sass/responsive/partials/_helpers-layout.scss index 9e03161..a52fd93 100755 --- a/source/_sass/responsive/partials/_helpers-layout.scss +++ b/source/_sass/responsive/partials/_helpers-layout.scss @@ -1,3 +1,9 @@ +@use "../utilities/mixins/grid-state"; +@use "../utilities/mixins/layout"; +@use "../utilities/mixins/push-pull"; +@use "../utilities/mixins/text-align"; +@use "../../base/extends/clearfix"; + /* * Clearfix: contain floats * @@ -40,10 +46,10 @@ } } // XS, S, M, L viewports. -@include push-pull(xs); -@include push-pull(s); -@include push-pull(m); -@include push-pull(l); +@include push-pull.push-pull(xs); +@include push-pull.push-pull(s); +@include push-pull.push-pull(m); +@include push-pull.push-pull(l); /* * Layout helpers @@ -61,10 +67,10 @@ } // XS, S, M, L viewports. -@include layout(xs); -@include layout(s); -@include layout(m); -@include layout(l); +@include layout.layout(xs); +@include layout.layout(s); +@include layout.layout(m); +@include layout.layout(l); /* * Text align helpers @@ -82,10 +88,10 @@ } // XS, S, M, L viewports. -@include text-align(xs); -@include text-align(s); -@include text-align(m); -@include text-align(l); +@include text-align.text-align(xs); +@include text-align.text-align(s); +@include text-align.text-align(m); +@include text-align.text-align(l); // Grid state detection. .grid-state-indicator { @@ -101,6 +107,6 @@ } } // Breakpoint driven changes -@include grid-state(s, 1px); -@include grid-state(m, 2px); -@include grid-state(l, 3px); +@include grid-state.grid-state(s, 1px); +@include grid-state.grid-state(m, 2px); +@include grid-state.grid-state(l, 3px); diff --git a/source/_sass/responsive/partials/_helpers-visibility.scss b/source/_sass/responsive/partials/_helpers-visibility.scss index d1053f0..4e79ac2 100755 --- a/source/_sass/responsive/partials/_helpers-visibility.scss +++ b/source/_sass/responsive/partials/_helpers-visibility.scss @@ -1,3 +1,5 @@ +@use "../utilities/mixins/visibility"; + /* * Image replacement */ @@ -87,7 +89,7 @@ } // XS, S, M, L viewports. -@include visibility(xs); -@include visibility(s); -@include visibility(m); -@include visibility(l); +@include visibility.visibility(xs); +@include visibility.visibility(s); +@include visibility.visibility(m); +@include visibility.visibility(l); diff --git a/source/_sass/responsive/partials/_modal.scss b/source/_sass/responsive/partials/_modal.scss index 1af1126..f9f5f1b 100755 --- a/source/_sass/responsive/partials/_modal.scss +++ b/source/_sass/responsive/partials/_modal.scss @@ -1,3 +1,5 @@ +@use "../utilities/variables"; + .modal-on, .modal-lock > body { touch-action: none; @@ -104,7 +106,7 @@ x::-ms-reveal, max-height: 100%; overflow: auto; padding: 1em; - background-color: $modal-content-background-color; + background-color: variables.$modal-content-background-color; text-align: left; [dir="rtl"] & { @@ -139,7 +141,7 @@ x::-ms-reveal, padding: .83em; font-size: 1.5em; font-weight: bold; - color: $modal-control-color; + color: variables.$modal-control-color; [dir="rtl"] & { right: auto; @@ -155,7 +157,7 @@ x::-ms-reveal, display: block; width: 2em; padding: .5em; - color: $modal-control-color; + color: variables.$modal-control-color; font-size: 2em; font-weight: bold; text-align: center; diff --git a/source/_sass/responsive/responsive.scss b/source/_sass/responsive/responsive.scss index d163eee..e47aa34 100755 --- a/source/_sass/responsive/responsive.scss +++ b/source/_sass/responsive/responsive.scss @@ -1,12 +1,12 @@ // Utilities -@import "utilities/variables"; -@import "utilities/mixins/breakpoints"; -@import "utilities/mixins/grid"; -@import "utilities/mixins/push-pull"; -@import "utilities/mixins/grid-state"; -@import "utilities/mixins/layout"; -@import "utilities/mixins/text-align"; -@import "utilities/mixins/visibility"; +@forward "utilities/variables"; +@forward "utilities/mixins/breakpoints"; +@forward "utilities/mixins/grid"; +@forward "utilities/mixins/push-pull"; +@forward "utilities/mixins/grid-state"; +@forward "utilities/mixins/layout"; +@forward "utilities/mixins/text-align"; +@forward "utilities/mixins/visibility"; // Base Styles // @import "partials/copyright"; @@ -14,7 +14,7 @@ // @import "partials/base"; // Grid System -@import "partials/grid"; +@use "partials/grid" as grid2; // CSS Components // @import "partials/alerts"; @@ -29,13 +29,13 @@ // @import "partials/autosize"; // @import "partials/carousel"; // @import "partials/dropdown"; -@import "partials/modal"; +@forward "partials/modal"; // @import "partials/tablelist"; // @import "partials/tabs"; // Helpers -@import "partials/helpers-layout"; -@import "partials/helpers-visibility"; +@forward "partials/helpers-layout"; +@forward "partials/helpers-visibility"; // Print Styles -@import "partials/print"; +@forward "partials/print"; diff --git a/source/_sass/responsive/utilities/_variables.scss b/source/_sass/responsive/utilities/_variables.scss index dd47af2..fcf3812 100755 --- a/source/_sass/responsive/utilities/_variables.scss +++ b/source/_sass/responsive/utilities/_variables.scss @@ -1,6 +1,6 @@ // General Styles $base-font-size: 100% !default; -$base-line-height: 1.4 !default; +$base-line-height: 21px !default; $base-text-color: #222 !default; // Selected text diff --git a/source/_sass/responsive/utilities/mixins/_breakpoints.scss b/source/_sass/responsive/utilities/mixins/_breakpoints.scss index 0123b5a..5eb8620 100755 --- a/source/_sass/responsive/utilities/mixins/_breakpoints.scss +++ b/source/_sass/responsive/utilities/mixins/_breakpoints.scss @@ -1,22 +1,24 @@ -// Media Query Breakpoints +@use "../variables"; + +// Media Query Breakpoints @mixin bp($point) { @if $point == xs { - @media (max-width: $grid-breakpoint-xs-max) { + @media (max-width: variables.$grid-breakpoint-xs-max) { @content; } } @else if $point == s { - @media (min-width: $grid-breakpoint-s-min) and (max-width: $grid-breakpoint-s-max) { + @media (min-width: variables.$grid-breakpoint-s-min) and (max-width: variables.$grid-breakpoint-s-max) { @content; } } @else if $point == m { - @media (min-width: $grid-breakpoint-m-min) and (max-width: $grid-breakpoint-m-max) { + @media (min-width: variables.$grid-breakpoint-m-min) and (max-width: variables.$grid-breakpoint-m-max) { @content; } } @else if $point == l { - @media (min-width: $grid-breakpoint-l-min) { + @media (min-width: variables.$grid-breakpoint-l-min) { @content; } } @@ -25,17 +27,17 @@ // Minimum width. @mixin bp-min($point) { @if $point == s { - @media (min-width: $grid-breakpoint-s-min) { + @media (min-width: variables.$grid-breakpoint-s-min) { @content; } } @else if $point == m { - @media (min-width: $grid-breakpoint-m-min) { + @media (min-width: variables.$grid-breakpoint-m-min) { @content; } } @else if $point == l { - @media (min-width: $grid-breakpoint-l-min) { + @media (min-width: variables.$grid-breakpoint-l-min) { @content; } } @@ -44,18 +46,18 @@ // Max width. @mixin bp-max($point) { @if $point == xs { - @media (max-width: $grid-breakpoint-xs-max) { + @media (max-width: variables.$grid-breakpoint-xs-max) { @content; } } @else if $point == s { - @media (max-width: $grid-breakpoint-s-max) { + @media (max-width: variables.$grid-breakpoint-s-max) { @content; } } @else if $point == m { - @media (max-width: $grid-breakpoint-m-max) { + @media (max-width: variables.$grid-breakpoint-m-max) { @content; } } -} \ No newline at end of file +} diff --git a/source/_sass/responsive/utilities/mixins/_grid-state.scss b/source/_sass/responsive/utilities/mixins/_grid-state.scss index 601d676..052cb31 100755 --- a/source/_sass/responsive/utilities/mixins/_grid-state.scss +++ b/source/_sass/responsive/utilities/mixins/_grid-state.scss @@ -1,8 +1,10 @@ -//== +@use "breakpoints"; + +//== // Creates grid state classes for each breakpoint. //## @mixin grid-state($bp, $width) { - @include bp-min($bp) { + @include breakpoints.bp-min($bp) { .grid-state-indicator { width: $width; } diff --git a/source/_sass/responsive/utilities/mixins/_grid.scss b/source/_sass/responsive/utilities/mixins/_grid.scss index b47af06..4e1bdb4 100755 --- a/source/_sass/responsive/utilities/mixins/_grid.scss +++ b/source/_sass/responsive/utilities/mixins/_grid.scss @@ -1,157 +1,168 @@ +@use "../variables"; +@use "breakpoints"; + //== // Grid System - Base //## @mixin grid-base($bp) { - // Large doesn't need an "only" since it operates on min width. - @if $bp != l { - @include bp-max($bp) { - - [class*=col-] { - // Reset classes for each level. - &.reset-#{$bp}-only { - clear: both; - margin-left: 0 !important; - - [dir="rtl"] & { - margin-right: 0 !important; - } - } - } + + // Large doesn't need an "only" since it operates on min width. + @if $bp !=l { + @include breakpoints.bp-max($bp) { + + [class*=col-] { + + // Reset classes for each level. + &.reset-#{$bp}-only { + clear: both; + margin-left: 0 !important; + + [dir="rtl"] & { + margin-right: 0 !important; + } } + } } - // Set the margin for each following column. - [class*=col-#{$bp}] + [class*=col-#{$bp}] { - margin-left: $grid-column-gutter; + } - [dir="rtl"] & { - margin-left: 0; - margin-right: $grid-column-gutter; - } + // Set the margin for each following column. + [class*=col-#{$bp}]+[class*=col-#{$bp}] { + margin-left: variables.$grid-column-gutter; + + [dir="rtl"] & { + margin-left: 0; + margin-right: variables.$grid-column-gutter; } + } - .no-gutter > [class*=col-#{$bp}] { - margin-left: 0; + .no-gutter>[class*=col-#{$bp}] { + margin-left: 0; - [dir="rtl"] & { - margin-left: 0; - margin-right: 0; - } + [dir="rtl"] & { + margin-left: 0; + margin-right: 0; } + } - [class*=col-] { - // Global reset classes. - &.reset-#{$bp} { - clear: both; - margin-left: 0 !important; + [class*=col-] { - [dir="rtl"] & { - margin-right: 0 !important; - } - } + // Global reset classes. + &.reset-#{$bp} { + clear: both; + margin-left: 0 !important; + + [dir="rtl"] & { + margin-right: 0 !important; + } } + } } //== // Grid System - Columns //## @mixin grid-columns($bp) { - // Calculate column width and width with gutter. - $column-width: (100% / $grid-column-count); - $column-width-with-gutter: (100% - ($grid-column-gutter * ($grid-column-count - 1 ))) / $grid-column-count; + // Calculate column width and width with gutter. + $column-width: calc(100% / variables.$grid-column-count); + $column-width-with-gutter: calc((100% - (variables.$grid-column-gutter * (variables.$grid-column-count - 1))) / variables.$grid-column-count); + + // Loop through and set width. + @for $i from 1 to (variables.$grid-column-count + 1) { + $temp-width: $column-width-with-gutter * $i + (variables.$grid-column-gutter * $i); + + .col-#{$bp}-#{$i} { + width: $temp-width - variables.$grid-column-gutter; + } - // Loop through and set width. - @for $i from 1 to ($grid-column-count + 1) { - $temp-width: $column-width-with-gutter * $i + ($grid-column-gutter * $i); + // We don't want add offsets etc to full width columns. + @if $i !=variables.$grid-column-count { + .offset-#{$bp}-#{$i} { + margin-left: $temp-width; - .col-#{$bp}-#{$i} { - width: $temp-width - $grid-column-gutter; + [dir="rtl"] & { + margin-left: 0; + margin-right: $temp-width; } - // We don't want add offsets etc to full width columns. - @if $i != $grid-column-count { - .offset-#{$bp}-#{$i} { - margin-left: $temp-width; - - [dir="rtl"] & { - margin-left: 0; - margin-right: $temp-width; - } - } - - [class*=col-] + .offset-#{$bp}-#{$i} { - margin-left: $temp-width + $grid-column-gutter; - - [dir="rtl"] & { - margin-left: 0; - margin-right: $temp-width + $grid-column-gutter; - } - } - - .push-#{$bp}-#{$i} { - left: $temp-width; - - [dir="rtl"] & { - left: auto; - right: $temp-width; - } - } - - .pull-#{$bp}-#{$i} { - right: $temp-width; - - [dir="rtl"] & { - right: auto; - left: $temp-width; - } - } + } + + [class*=col-]+.offset-#{$bp}-#{$i} { + margin-left: $temp-width + variables.$grid-column-gutter; + + [dir="rtl"] & { + margin-left: 0; + margin-right: $temp-width + variables.$grid-column-gutter; } - @else { - // Ensure that the gutter is reset on full width columns. - .col-#{$bp}-#{$i}, - [class*=col-] + [class*=col-#{$bp}-#{$i}] { - margin-left: 0; - - [dir="rtl"] & { - margin-right: 0; - } - } + } + + .push-#{$bp}-#{$i} { + left: $temp-width; + + [dir="rtl"] & { + left: auto; + right: $temp-width; } + } + + .pull-#{$bp}-#{$i} { + right: $temp-width; + + [dir="rtl"] & { + right: auto; + left: $temp-width; + } + } + } + + @else { + + // Ensure that the gutter is reset on full width columns. + .col-#{$bp}-#{$i}, + [class*=col-]+[class*=col-#{$bp}-#{$i}] { + margin-left: 0; + + [dir="rtl"] & { + margin-right: 0; + } + } } - // Loop through and build the "no-gutter" columns. - .no-gutter { - @for $i from 1 to ($grid-column-count + 1) { - $temp-width: $column-width * $i; - - > .col-#{$bp}-#{$i} { - width: $temp-width; - } - - > .offset-#{$bp}-#{$i} { - margin-left: $temp-width; - - [dir="rtl"] & { - margin-left: 0; - margin-right: $temp-width; - } - } - - > .push-#{$bp}-#{$i} { - left: $temp-width; - - [dir="rtl"] & { - left: auto; - right: $temp-width; - } - } - - > .pull-#{$bp}-#{$i} { - right: $temp-width; - - [dir="rtl"] & { - right: auto; - left: $temp-width; - } - } + } + + // Loop through and build the "no-gutter" columns. + .no-gutter { + @for $i from 1 to (variables.$grid-column-count + 1) { + $temp-width: $column-width * $i; + + >.col-#{$bp}-#{$i} { + width: $temp-width; + } + + >.offset-#{$bp}-#{$i} { + margin-left: $temp-width; + + [dir="rtl"] & { + margin-left: 0; + margin-right: $temp-width; + } + } + + >.push-#{$bp}-#{$i} { + left: $temp-width; + + [dir="rtl"] & { + left: auto; + right: $temp-width; + } + } + + >.pull-#{$bp}-#{$i} { + right: $temp-width; + + [dir="rtl"] & { + right: auto; + left: $temp-width; } + } } + } } diff --git a/source/_sass/responsive/utilities/mixins/_layout.scss b/source/_sass/responsive/utilities/mixins/_layout.scss index c9f887d..48bc408 100755 --- a/source/_sass/responsive/utilities/mixins/_layout.scss +++ b/source/_sass/responsive/utilities/mixins/_layout.scss @@ -1,4 +1,6 @@ -@mixin layout($bp) { +@use "breakpoints"; + +@mixin layout($bp) { // XS doesn't have a min value. @if $bp == xs { @@ -14,7 +16,7 @@ display: inline; } - @include bp-max($bp) { + @include breakpoints.bp-max($bp) { .block-#{$bp}-only { display: block !important; } @@ -30,7 +32,7 @@ } @else { - @include bp-min($bp) { + @include breakpoints.bp-min($bp) { .block-#{$bp} { display: block !important; @@ -45,7 +47,7 @@ } // Large doesn't need an "only" since it operates on min width. @if $bp != l { - @include bp-max($bp) { + @include breakpoints.bp-max($bp) { .block-#{$bp}-only { display: block !important; } diff --git a/source/_sass/responsive/utilities/mixins/_push-pull.scss b/source/_sass/responsive/utilities/mixins/_push-pull.scss index 9542d93..d9037a1 100755 --- a/source/_sass/responsive/utilities/mixins/_push-pull.scss +++ b/source/_sass/responsive/utilities/mixins/_push-pull.scss @@ -1,4 +1,6 @@ -//== +@use "breakpoints"; + +//== // Creates float classes for each breakpoint. //## @mixin push-pull($bp) { @@ -21,7 +23,7 @@ } } - @include bp-max($bp) { + @include breakpoints.bp-max($bp) { .push-#{$bp}-only { float: right !important; @@ -41,7 +43,7 @@ } @else { - @include bp-min($bp) { + @include breakpoints.bp-min($bp) { .push-#{$bp} { float: right !important; @@ -60,7 +62,7 @@ } // Large doesn't need an "only" since it operates on min width. @if $bp != l { - @include bp-max($bp) { + @include breakpoints.bp-max($bp) { .push-#{$bp}-only { float: right !important; diff --git a/source/_sass/responsive/utilities/mixins/_text-align.scss b/source/_sass/responsive/utilities/mixins/_text-align.scss index 1efc689..0a92937 100755 --- a/source/_sass/responsive/utilities/mixins/_text-align.scss +++ b/source/_sass/responsive/utilities/mixins/_text-align.scss @@ -1,4 +1,6 @@ -//== +@use "breakpoints"; + +//== // Creates text align classes for each breakpoint. //## @mixin text-align($bp) { @@ -17,7 +19,7 @@ text-align: center !important; } - @include bp-max($bp) { + @include breakpoints.bp-max($bp) { .text-#{$bp}-left-only { text-align: left !important; } @@ -33,7 +35,7 @@ } @else { - @include bp-min($bp) { + @include breakpoints.bp-min($bp) { .text-#{$bp}-left { text-align: left !important; @@ -48,7 +50,7 @@ } // Large doesn't need an "only" since it operates on min width. @if $bp != l { - @include bp-max($bp) { + @include breakpoints.bp-max($bp) { .text-#{$bp}-left { text-align: left !important; } diff --git a/source/_sass/responsive/utilities/mixins/_visibility.scss b/source/_sass/responsive/utilities/mixins/_visibility.scss index 3c53be8..74f6cc4 100755 --- a/source/_sass/responsive/utilities/mixins/_visibility.scss +++ b/source/_sass/responsive/utilities/mixins/_visibility.scss @@ -1,8 +1,10 @@ -//== +@use "breakpoints"; + +//== // Creates visibility classes for each breakpoint. //## @mixin visibility($bp) { - @include bp($bp) { + @include breakpoints.bp($bp) { .hidden-#{$bp} { display: none !important; diff --git a/source/_sass/sections/blog.scss b/source/_sass/sections/blog.scss index 7cae00c..5c82d81 100644 --- a/source/_sass/sections/blog.scss +++ b/source/_sass/sections/blog.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../colors"; +@use "../responsive/utilities/mixins/breakpoints"; + /** * Copyright 2025 Google LLC * @@ -15,8 +19,8 @@ */ .blog__meta { - border-bottom: 1px solid $gray-09; - border-top: 1px solid $gray-09; + border-bottom: 1px solid colors.$gray-09; + border-top: 1px solid colors.$gray-09; padding: 0.5em; margin-bottom: 1em; } @@ -51,7 +55,7 @@ font-size: 0.9em; a { - color: darken($gray-09, 20); + color: color.adjust(colors.$gray-09, $lightness: -20%); } } @@ -63,7 +67,7 @@ } p { - color: $gray-09; + color: colors.$gray-09; font-size: 0.85em; text-align: center; } @@ -73,7 +77,7 @@ float: left; max-width: 43em; - @include bp-min (m) { + @include breakpoints.bp-min (m) { width: 83%; } } diff --git a/source/_sass/sections/documentation.scss b/source/_sass/sections/documentation.scss index 237eb55..45b31f9 100644 --- a/source/_sass/sections/documentation.scss +++ b/source/_sass/sections/documentation.scss @@ -1,3 +1,10 @@ +@use "sass:color"; +@use "sass:meta"; +@use "../base/variables"; +@use "../base/lists"; +@use "../colors"; +@use "../header"; + /** * Copyright 2025 Google LLC * @@ -14,20 +21,20 @@ * limitations under the License. */ -$docs-header-color: $gray-06; +$docs-header-color: colors.$gray-06; .documentation { max-width: 43em; a, a code { - color: darken($base-link-color, 20); + color: color.adjust(variables.$base-link-color, $lightness: -20%); font-weight: 600; } a:hover, a:active { - color: darken($base-link-color, 40); + color: color.adjust(variables.$base-link-color, $lightness: -40%); } } @@ -53,7 +60,7 @@ $docs-header-color: $gray-06; &:hover, &:active, &:focus { - color: $gray-02; + color: colors.$gray-02; } } } @@ -79,8 +86,8 @@ $docs-header-color: $gray-06; &::before { content: ' '; display: block; - height: $header-height; - margin-top: -1 * $header-height; + height: header.$header-height; + margin-top: -1 * header.$header-height; visibility: hidden; } @@ -103,23 +110,23 @@ $docs-header-color: $gray-06; } a { - background-color: lighten($docs-header-color, 8); + background-color: color.adjust($docs-header-color, $lightness: 8%); border-radius: 4px 4px 0 0; - color: lighten($gray-02, 10); + color: color.adjust(colors.$gray-02, $lightness: 10%); display: block; padding: 0.4em 0.8em; text-transform: uppercase; &.active { background-color: $docs-header-color; - color: $gray-02; + color: colors.$gray-02; } } } .docs__item__header { background-color: $docs-header-color; - color: $gray-02; + color: colors.$gray-02; font-size: 0.9em; font-weight: 600; padding: 0.5em; @@ -127,12 +134,12 @@ $docs-header-color: $gray-06; a, a:hover, a:active { - color: $gray-02; + color: colors.$gray-02; } } .docs__item__name { - color: $gray-02; + color: colors.$gray-02; font-weight: bold; } @@ -151,7 +158,7 @@ $docs-header-color: $gray-06; padding: 0.5em; h4 { - border-bottom: 1px solid $color-docs; + border-bottom: 1px solid colors.$color-docs; text-transform: uppercase; font-weight: 600; font-size: 1.2em; @@ -179,7 +186,7 @@ $docs-header-color: $gray-06; } .docs__item--missing { - border: 1px solid $gray-09; + border: 1px solid colors.$gray-09; padding: 0.5em; p { @@ -188,10 +195,10 @@ $docs-header-color: $gray-06; } .alert--docs-notes { - background-color: $gray-05; - border-bottom: 2px solid $color-docs; - border-top: 2px solid $color-docs; - color: $gray-03; + background-color: colors.$gray-05; + border-bottom: 2px solid colors.$color-docs; + border-top: 2px solid colors.$color-docs; + color: colors.$gray-03; margin: 0 -0.5em 1em; h5 { @@ -205,13 +212,13 @@ $docs-header-color: $gray-06; &::before { content: ' '; display: block; - height: $header-height; - margin-top: -1 * $header-height; + height: header.$header-height; + margin-top: -1 * header.$header-height; visibility: hidden; } } -@import 'sections/documentation/c'; -@import 'sections/documentation/android'; -@import 'sections/documentation/ios'; -@import 'sections/documentation/js'; \ No newline at end of file +@include meta.load-css('documentation/c'); +@include meta.load-css('documentation/android'); +@include meta.load-css('documentation/ios'); +@include meta.load-css('documentation/js'); diff --git a/source/_sass/sections/events.scss b/source/_sass/sections/events.scss index 7d878fc..01fed64 100644 --- a/source/_sass/sections/events.scss +++ b/source/_sass/sections/events.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../base/variables"; +@use "../colors"; + /** * Copyright 2025 Google LLC * @@ -22,7 +26,7 @@ .events__calendar { width: 100%; - background-color: $white; + background-color: colors.$white; margin-bottom: 1em; th, @@ -33,9 +37,9 @@ .calendar__month, .calendar__arrow { - background-color: $gray-09; + background-color: colors.$gray-09; font-weight: 700; - color: $white; + color: colors.$white; } .calendar__arrow { @@ -43,7 +47,7 @@ padding: 0; a { - color: $white; + color: colors.$white; } } @@ -59,22 +63,22 @@ } .calendar__day--past { - color: $gray-06; + color: colors.$gray-06; } .calendar__day--event { - background-color: $green; + background-color: colors.$green; color: #fff; } .calendar__day--past-event { - background-color: $gray-06; + background-color: colors.$gray-06; color: #fff; } td { padding: 0.25em; - width: 1/7 * 100%; + width: calc(1 / 7) * 100%; } } @@ -91,20 +95,20 @@ .event__meta { font-size: 0.9em; - color: darken($gray-09, 20); + color: color.adjust(colors.$gray-09, $lightness: -20%); margin-bottom: 0.5em; } } .event--highlighted { padding: 0 10px; - border-left: 10px solid $color-community; + border-left: 10px solid colors.$color-community; margin-left: -20px; } .event--past { a { - color: lighten($base-link-color, 15); + color: color.adjust(variables.$base-link-color, $lightness: 15%); } } } diff --git a/source/_sass/sections/examples.scss b/source/_sass/sections/examples.scss index b69fa70..fe2d6d7 100644 --- a/source/_sass/sections/examples.scss +++ b/source/_sass/sections/examples.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "../colors"; + /** * Copyright 2025 Google LLC * @@ -27,9 +30,9 @@ } .examples__tag { - background-color: $color-examples; + background-color: colors.$color-examples; border-radius: 3px; - color: $white; + color: colors.$white; display: inline-block; font-size: 0.75em; line-height: 1; @@ -42,17 +45,17 @@ &:hover, &:active, &:focus { - color: $white; - background-color: darken($color-examples, 20); + color: colors.$white; + background-color: color.adjust(colors.$color-examples, $lightness: -20%); } } .examples__filters--selected { .examples__tag { - background-color: lighten($color-examples, 20); + background-color: color.adjust(colors.$color-examples, $lightness: 20%); &.selected { - background-color: $color-examples; + background-color: colors.$color-examples; } } } @@ -62,5 +65,5 @@ margin-bottom: 0.5em; font-size: 0.8em; text-transform: uppercase; - color: $gray-09; + color: colors.$gray-09; } diff --git a/source/_sass/sections/guides.scss b/source/_sass/sections/guides.scss index 7b7fb66..315261b 100644 --- a/source/_sass/sections/guides.scss +++ b/source/_sass/sections/guides.scss @@ -1,3 +1,5 @@ +@use "../colors"; + /** * Copyright 2025 Google LLC * @@ -48,5 +50,5 @@ table td hr { margin: 0; - border-bottom-color: $gray-06; + border-bottom-color: colors.$gray-06; } diff --git a/source/_sass/sections/inspiration.scss b/source/_sass/sections/inspiration.scss index a195861..f1caf31 100644 --- a/source/_sass/sections/inspiration.scss +++ b/source/_sass/sections/inspiration.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../base/variables"; +@use "../colors"; + /** * Copyright 2025 Google LLC * @@ -16,7 +20,7 @@ .inspiration-page { h2 { - color: $purple; + color: colors.$purple; font-size: 1.5rem; margin: 1rem 0 0; text-transform: uppercase; @@ -26,7 +30,7 @@ blockquote { font-size: 1.3rem; border: 0; - color: lighten($base-font-color, 20); + color: color.adjust(variables.$base-font-color, $lightness: 20%); margin: 0; padding: 0; diff --git a/source/_sass/sections/retreat.scss b/source/_sass/sections/retreat.scss index b624219..f7f9951 100644 --- a/source/_sass/sections/retreat.scss +++ b/source/_sass/sections/retreat.scss @@ -1,3 +1,10 @@ +@use "sass:color"; +@use "../base/variables"; +@use "../bourbon/css3/flex-box"; +@use "../colors"; +@use "../header"; +@use "../responsive/utilities/mixins/breakpoints"; + /** * Copyright 2025 Google LLC * @@ -13,6 +20,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +@use "../elements/sidebar"; +@use "../elements/sectionmenu"; $banner-blue: #066AC4; @@ -34,8 +43,8 @@ $banner-blue: #066AC4; &::before { content: ' '; display: block; - height: $header-height + 60px; - margin-top: -1 * ($header-height + 60px); + height: header.$header-height + 60px; + margin-top: -1 * (header.$header-height + 60px); visibility: hidden; } } @@ -52,7 +61,7 @@ $banner-blue: #066AC4; width: 100%; max-height: 620px; - @include bp-max (xs) { + @include breakpoints.bp-max (xs) { padding-top: 3rem; } @@ -66,15 +75,15 @@ $banner-blue: #066AC4; } .retreat-nav { - background-color: transparentize(#222, 0.3); - left: $sidebar-width + $section-menu-width; + background-color: color.adjust(#222, $alpha: -0.3); + left: sidebar.$sidebar-width + sectionmenu.$section-menu-width; position: fixed; text-align: center; - top: $header-height; + top: header.$header-height; right: 0; z-index: 100; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; width: 100%; } @@ -85,11 +94,11 @@ $banner-blue: #066AC4; } ul { - @include display(flex); + @include flex-box.display(flex); } li { - @include flex(1 0 auto); + @include flex-box.flex(1 0 auto); display: block; &:last-child > a { @@ -103,7 +112,7 @@ $banner-blue: #066AC4; &:hover, &:focus { - background-color: transparentize(darken($banner-blue, 30), 0.3); + background-color: color.adjust(color.adjust($banner-blue, $lightness: -30%), $alpha: -0.3); } } } @@ -127,7 +136,7 @@ $banner-blue: #066AC4; font-size: 1.2rem; margin-top: 5vw; - @include bp-min(s) { + @include breakpoints.bp-min(s) { padding: 2em 0; margin-top: 20vw; font-size: 1.3em; @@ -146,8 +155,8 @@ $banner-blue: #066AC4; position: relative; &::before { - border-radius: $base-border-radius; - color: $white; + border-radius: variables.$base-border-radius; + color: colors.$white; font-size: 1.4em; font-weight: normal; left: 0; @@ -163,7 +172,7 @@ $banner-blue: #066AC4; dt { &::before { - background-color: $pebble-pink; + background-color: colors.$pebble-pink; content: 'Q'; } } @@ -171,7 +180,7 @@ $banner-blue: #066AC4; dd { &::before { - background-color: $pebble-green; + background-color: colors.$pebble-green; content: 'A'; } } diff --git a/source/_sass/sections/round.scss b/source/_sass/sections/round.scss index 4f821c5..5afbd0f 100644 --- a/source/_sass/sections/round.scss +++ b/source/_sass/sections/round.scss @@ -1,3 +1,6 @@ +@use "../colors"; +@use "../responsive/utilities/mixins/breakpoints"; + /** * Copyright 2025 Google LLC * @@ -13,6 +16,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +@use "../elements/sidebar"; .round-landing { background-image: url('../images/round/splash.jpg'); @@ -20,7 +24,7 @@ background-position: center bottom; background-size: cover; - @include bp-max (xs) { + @include breakpoints.bp-max (xs) { height: 120%; } } @@ -28,7 +32,7 @@ .round-landing__contents { max-width: 800px; width: 80%; - color: $white; + color: colors.$white; text-align: center; padding-top: 5%; margin: 0 auto; @@ -44,7 +48,7 @@ margin: 0 auto 2rem; } -@include bp-max (s) { +@include breakpoints.bp-max (s) { .round-landing__buttons { .btn { display: block; @@ -58,7 +62,7 @@ } } -@include bp-min (m) { +@include breakpoints.bp-min (m) { .round-landing__buttons { display: -webkit-flex; display: flex; @@ -74,22 +78,22 @@ font-size: 1.2em; font-weight: 300; background-color: rgba(200, 200, 200, 0.7); - color: $black; + color: colors.$black; padding: 0.5em 0.8em; margin: 1em 0; a { - color: $black; + color: colors.$black; text-decoration: underline; &:hover { - color: $black; + color: colors.$black; } } - @include bp-min (m) { + @include breakpoints.bp-min (m) { position: absolute; - left: $sidebar-width + 20px; + left: sidebar.$sidebar-width + 20px; bottom: 20px; width: 50%; min-width: 300px; diff --git a/source/_sass/sections/sdk.scss b/source/_sass/sections/sdk.scss index b4c2db5..c81f1a6 100644 --- a/source/_sass/sections/sdk.scss +++ b/source/_sass/sections/sdk.scss @@ -1,3 +1,5 @@ +@use "../responsive/utilities/mixins/breakpoints"; + /** * Copyright 2025 Google LLC * @@ -20,7 +22,7 @@ background-position: center bottom; background-size: cover; - @include bp-max (xs) { + @include breakpoints.bp-max (xs) { height: 120%; } } diff --git a/source/assets/css/main.scss b/source/assets/css/main.scss index 83609e2..95b44c4 100644 --- a/source/assets/css/main.scss +++ b/source/assets/css/main.scss @@ -16,4 +16,4 @@ * limitations under the License. */ -@import 'app'; +@use 'app'; diff --git a/source/blog/index.html b/source/blog/index.html index 687d13f..1e6280c 100644 --- a/source/blog/index.html +++ b/source/blog/index.html @@ -5,7 +5,7 @@ # you may not use this file except in compliance with the License. # You may obtain a copy of the License at # -# http://www.apache.org/licenses/LICENSE-2.0 +# http://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, @@ -13,7 +13,6 @@ # See the License for the specific language governing permissions and # limitations under the License. -permalink: /feed.xml title: Blog layout: blog/master tag: all @@ -26,19 +25,19 @@

    A Wristed Development

    {% for post in paginator.posts %} - {% include blog/index-post.html post=post %} + {% include blog/index-post.html post=post %} {% endfor %} diff --git a/source/docs/pebblekit-android/index.md b/source/docs/pebblekit-android/index.md index 4f1c14e..9a14a6d 100644 --- a/source/docs/pebblekit-android/index.md +++ b/source/docs/pebblekit-android/index.md @@ -13,7 +13,6 @@ # See the License for the specific language governing permissions and # limitations under the License. -permalink: /feed.xml layout: docs/markdown title: PebbleKit Android Documentation docs_language: pebblekit_android diff --git a/source/docs/pebblekit-ios/index.md b/source/docs/pebblekit-ios/index.md index cb485bd..68a079b 100644 --- a/source/docs/pebblekit-ios/index.md +++ b/source/docs/pebblekit-ios/index.md @@ -13,7 +13,6 @@ # See the License for the specific language governing permissions and # limitations under the License. -permalink: /feed.xml layout: docs/markdown title: PebbleKit iOS Documentation docs_language: pebblekit_ios diff --git a/source/docs/pebblekit-js/index.html b/source/docs/pebblekit-js/index.html index c1f801d..637b4d6 100644 --- a/source/docs/pebblekit-js/index.html +++ b/source/docs/pebblekit-js/index.html @@ -5,7 +5,7 @@ # you may not use this file except in compliance with the License. # You may obtain a copy of the License at # -# http://www.apache.org/licenses/LICENSE-2.0 +# http://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, @@ -13,7 +13,6 @@ # See the License for the specific language governing permissions and # limitations under the License. -permalink: /feed.xml layout: docs title: PebbleKit JavaScript Documentation docs_language: pebblekit_js @@ -24,14 +23,14 @@

    {{ page.title }}

    - PebbleKit JS is a JavaScript component of the Pebble SDK which runs - within the Pebble mobile application. It provides access to GPS, - storage and Internet connectivity to applications running on Pebble - smartwatches. + PebbleKit JS is a JavaScript component of the Pebble SDK which runs + within the Pebble mobile application. It provides access to GPS, + storage and Internet connectivity to applications running on Pebble + smartwatches.

    - This does not relate to JavaScript running on the watch. For embedded + This does not relate to JavaScript running on the watch. For embedded JavaScript see Rocky.js.
    @@ -41,12 +40,12 @@

    {{ page.title }}

    {% for module in site.data.docs_tree.pebblekit_js %} - {% if module['kind'] == "member" or module['kind'] == "namespace" %} -
    -

    {{ module.name }}

    -

    {{ module.summary | markdownify }}

    -
    - {% endif %} + {% if module['kind'] == "member" or module['kind'] == "namespace" %} +
    +

    {{ module.name }}

    +

    {{ module.summary | markdownify }}

    +
    + {% endif %} {% endfor %}
    diff --git a/source/docs/rockyjs/index.html b/source/docs/rockyjs/index.html index 00b38dc..8efadd9 100644 --- a/source/docs/rockyjs/index.html +++ b/source/docs/rockyjs/index.html @@ -5,7 +5,7 @@ # you may not use this file except in compliance with the License. # You may obtain a copy of the License at # -# http://www.apache.org/licenses/LICENSE-2.0 +# http://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, @@ -13,7 +13,6 @@ # See the License for the specific language governing permissions and # limitations under the License. -permalink: /feed.xml layout: docs title: Pebble Rocky.js API Documentation docs_language: rockyjs @@ -37,25 +36,25 @@

    {{ page.title }}

    {% for module in site.data.docs_tree.rockyjs %} - {% if module['kind'] == "member" or module['kind'] == "namespace" %} -
    -

    {{ module.name }}

    -

    {{ module.summary | markdownify }}

    -
    - {% endif %} + {% if module['kind'] == "member" or module['kind'] == "namespace" %} +
    +

    {{ module.name }}

    +

    {{ module.summary | markdownify }}

    +
    + {% endif %} {% endfor %}

    The JavaScript API also includes the following global functions:

    {% for module in site.data.docs_tree.rockyjs %} - {% if module.kind == "function" %} -
    -
    - {% include docs/js/function.html child=module global=true %} -
    + {% if module.kind == "function" %} +
    +
    + {% include docs/js/function.html child=module global=true %}
    - {% endif %} +
    + {% endif %} {% endfor %}