bitstyles 0.8.0

data/styleguide/assets/javascripts/expander.js

@@ -0,0 +1,40 @@
+/* jshint devel:true */
+const initExpander = () => {
+  const expanderButtonElement = document.getElementById('expander_button');
+
+  if (expanderButtonElement === null) {
+    return;
+  }
+
+  const expanderBodyElement = document.getElementById(expanderButtonElement.getAttribute('aria-controls')); // eslint-disable-line max-len
+  const HIDDEN_ATTRIBUTE = 'aria-hidden';
+  const EXPANDED_ATTRIBUTE = 'aria-expanded';
+
+  let isExpanded = expanderBodyElement.getAttribute(EXPANDED_ATTRIBUTE);
+
+  function hideBody() {
+    expanderBodyElement.setAttribute(HIDDEN_ATTRIBUTE, true);
+    expanderButtonElement.setAttribute(EXPANDED_ATTRIBUTE, false);
+    expanderButtonElement.focus();
+    isExpanded = false;
+  }
+
+  function showBody() {
+    expanderBodyElement.setAttribute(HIDDEN_ATTRIBUTE, false);
+    expanderButtonElement.setAttribute(EXPANDED_ATTRIBUTE, true);
+    expanderBodyElement.focus();
+    isExpanded = true;
+  }
+
+  function toggleBody() {
+    if (isExpanded) {
+      hideBody();
+    } else {
+      showBody();
+    }
+  }
+
+  expanderButtonElement.addEventListener('click', toggleBody);
+};
+
+window.addEventListener('styleguide:onRendered', initExpander);

data/styleguide/assets/javascripts/modal.js

@@ -0,0 +1,55 @@
+/* jshint devel:true */
+/* global A11yDialog:true */
+/* eslint prefer-arrow-callback: ["error", { "allowNamedFunctions": true }] */
+window.addEventListener('styleguide:onRendered', function initModal() {
+  const dialogElement = document.getElementById('dialog_1');
+
+  if (dialogElement === null) {
+    return;
+  }
+
+  const dialog = new A11yDialog(dialogElement);
+  const bodyElement = document.querySelector('body');
+  const cancelButtonElement = document.getElementById('#cancel_button');
+  const okButtonElement = document.getElementById('#ok_button');
+
+  const BODY_CLASS = 't-no-overflow';
+  const CANCEL_CLASS = 'c-modal--animation-cancel';
+  const OK_CLASS = 'c-modal--animation-ok';
+
+  const DIALOG_SHOW_EVENT = 'dialog:show';
+  const DIALOG_HIDE_EVENT = 'dialog:hide';
+  const CLICK_EVENT = 'click';
+  const TRANSITION_END_EVENT = 'transitionend';
+
+  dialogElement.addEventListener(DIALOG_SHOW_EVENT, function dialogShow() {
+    bodyElement.classList.add(BODY_CLASS);
+  });
+
+  dialogElement.addEventListener(DIALOG_HIDE_EVENT, function dialogHide() {
+    bodyElement.classList.remove(BODY_CLASS);
+  });
+
+  dialogElement.addEventListener(TRANSITION_END_EVENT, function removeAnimationClasses() {
+    // Ensure the element is really not visible — some browsers fire before visibility == hidden,
+    // so the modal flies back across the screen.
+    window.setTimeout(function delayedRemoveAnimationClasses() {
+      dialogElement.classList.remove(OK_CLASS);
+      dialogElement.classList.remove(CANCEL_CLASS);
+    }, 100);
+  });
+
+  if (okButtonElement !== null) {
+    okButtonElement.addEventListener(CLICK_EVENT, function onOkClick() {
+      dialogElement.classList.add(OK_CLASS);
+      dialog.hide();
+    });
+  }
+
+  if (cancelButtonElement !== null) {
+    cancelButtonElement.addEventListener(CLICK_EVENT, function onCancelClick() {
+      dialogElement.classList.add(CANCEL_CLASS);
+      dialog.hide();
+    });
+  }
+});

data/styleguide/assets/javascripts/styleguide-init.js

@@ -0,0 +1,6 @@
+/* eslint-disable prefer-arrow-callback */
+
+window.addEventListener('styleguide:onRendered', function onStyleguideRendered() {
+  // informs Backstop.js (visual regression test runner) that content is rendered.
+  console.log('styleguideRendered'); // eslint-disable-line no-console
+});

data/styleguide/assets/stylesheets/styleguide-extras.css

@@ -0,0 +1,17 @@
+.background-grey {
+  background: #ccc;
+  outline: 1px #0f0 solid;
+  margin-bottom: 0;
+}
+
+.floated-element {
+  float: left;
+  width: 50%;
+  min-height: 5rem;
+  outline: 1px solid #f00;
+}
+
+.min-height-block {
+  position: relative;
+  min-height: 50vh;
+}

metadata

@@ -0,0 +1,192 @@
+--- !ruby/object:Gem::Specification
+name: bitstyles
+version: !ruby/object:Gem::Version
+  version: 0.8.0
+platform: ruby
+authors:
+- Darren Cadwallader
+- Charlie Owen
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2016-11-10 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.12'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.12'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '10.0'
+description: 
+email:
+- info@bitcrowd.net
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .eslintignore
+- .eslintrc
+- .github/PULL_REQUEST_TEMPLATE.md
+- .gitignore
+- .nvmrc
+- .stylelintrc
+- CODE_OF_CONDUCT.md
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- bin/console
+- bin/setup
+- bitstyles.gemspec
+- bower.json
+- build/.gitignore
+- lib/bitstyles.rb
+- lib/bitstyles/engine.rb
+- lib/bitstyles/version.rb
+- package.json
+- postcss_build.json
+- postcss_lint.json
+- scripts/styleguide.sh
+- scss/bitstyles.scss
+- scss/bitstyles/base/_figure.scss
+- scss/bitstyles/base/_forms.scss
+- scss/bitstyles/base/_hr.scss
+- scss/bitstyles/base/_images.scss
+- scss/bitstyles/base/_link.scss
+- scss/bitstyles/base/_media.scss
+- scss/bitstyles/base/_typography.scss
+- scss/bitstyles/components/_expander.scss
+- scss/bitstyles/components/_modal.scss
+- scss/bitstyles/generic/_box-sizing.scss
+- scss/bitstyles/generic/_normalize.scss
+- scss/bitstyles/layout/_content.scss
+- scss/bitstyles/layout/_grid.scss
+- scss/bitstyles/layout/_topbar.scss
+- scss/bitstyles/layout/_width.scss
+- scss/bitstyles/objects/_absolute-center.scss
+- scss/bitstyles/objects/_absolute-cover.scss
+- scss/bitstyles/objects/_block.scss
+- scss/bitstyles/objects/_bordered-header.scss
+- scss/bitstyles/objects/_break-long-words.scss
+- scss/bitstyles/objects/_button--icon.scss
+- scss/bitstyles/objects/_button.scss
+- scss/bitstyles/objects/_clearfix.scss
+- scss/bitstyles/objects/_expander.scss
+- scss/bitstyles/objects/_fixed-ratio.scss
+- scss/bitstyles/objects/_flex.scss
+- scss/bitstyles/objects/_hidden.scss
+- scss/bitstyles/objects/_icon.scss
+- scss/bitstyles/objects/_input.scss
+- scss/bitstyles/objects/_label.scss
+- scss/bitstyles/objects/_link.scss
+- scss/bitstyles/objects/_list-reset.scss
+- scss/bitstyles/objects/_media.scss
+- scss/bitstyles/objects/_truncate-with-ellipsis.scss
+- scss/bitstyles/objects/_typography.scss
+- scss/bitstyles/objects/_vertical-center.scss
+- scss/bitstyles/objects/_visuallyhidden.scss
+- scss/bitstyles/settings/_bordered-header.scss
+- scss/bitstyles/settings/_button--icon.scss
+- scss/bitstyles/settings/_button.scss
+- scss/bitstyles/settings/_content.scss
+- scss/bitstyles/settings/_global.animation.scss
+- scss/bitstyles/settings/_global.breakpoints.scss
+- scss/bitstyles/settings/_global.color-base.scss
+- scss/bitstyles/settings/_global.color-theme.scss
+- scss/bitstyles/settings/_global.layout.scss
+- scss/bitstyles/settings/_global.setup.scss
+- scss/bitstyles/settings/_global.typography.scss
+- scss/bitstyles/settings/_grid.scss
+- scss/bitstyles/settings/_hidden.scss
+- scss/bitstyles/settings/_icon.scss
+- scss/bitstyles/settings/_input.scss
+- scss/bitstyles/settings/_link.scss
+- scss/bitstyles/settings/_modal.scss
+- scss/bitstyles/settings/_topbar.scss
+- scss/bitstyles/settings/_visuallyhidden.scss
+- scss/bitstyles/settings/_width.scss
+- scss/bitstyles/tools/_absolute-center.scss
+- scss/bitstyles/tools/_absolute-cover.scss
+- scss/bitstyles/tools/_block.scss
+- scss/bitstyles/tools/_break-long-words.scss
+- scss/bitstyles/tools/_clearfix.scss
+- scss/bitstyles/tools/_fixed-ratio.scss
+- scss/bitstyles/tools/_flex.scss
+- scss/bitstyles/tools/_font-face.scss
+- scss/bitstyles/tools/_hidden.scss
+- scss/bitstyles/tools/_list-reset.scss
+- scss/bitstyles/tools/_media-query.scss
+- scss/bitstyles/tools/_media.scss
+- scss/bitstyles/tools/_truncate-with-ellipsis.scss
+- scss/bitstyles/tools/_typography-conversions.scss
+- scss/bitstyles/tools/_typography.scss
+- scss/bitstyles/tools/_vertical-center.scss
+- scss/bitstyles/tools/_visuallyhidden.scss
+- scss/bitstyles/tools/_width.scss
+- scss/bitstyles/tools/_zindex.scss
+- scss/bitstyles/trumps/_background-color.scss
+- scss/bitstyles/trumps/_color.scss
+- scss/bitstyles/trumps/_margin.scss
+- scss/bitstyles/trumps/_no-margin.scss
+- scss/bitstyles/trumps/_no-padding.scss
+- scss/bitstyles/trumps/_padding.scss
+- scss/bitstyles/trumps/_text-align.scss
+- scss/bitstyles/trumps/_text-style.scss
+- scss/bitstyles/trumps/_text-weight.scss
+- styleguide/assets/images/icons.svg
+- styleguide/assets/images/placeholder_16-9.png
+- styleguide/assets/images/placeholder_button.png
+- styleguide/assets/javascripts/a11y-dialog.js
+- styleguide/assets/javascripts/expander.js
+- styleguide/assets/javascripts/modal.js
+- styleguide/assets/javascripts/styleguide-init.js
+- styleguide/assets/stylesheets/styleguide-extras.css
+homepage: https://github.com/bitcrowd/bitstyles
+licenses:
+- ISC
+metadata:
+  allowed_push_host: https://rubygems.org
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.5
+signing_key: 
+specification_version: 4
+summary: The CSS library of Bitcrowd GmbH.
+test_files: []
+has_rdoc: