bitstyles 0.8.0

data/scss/bitstyles/base/_typography.scss

@@ -0,0 +1,354 @@
+/* stylelint-disable selector-no-type */
+html {
+  font-family: $bitstyles-font-family-body;
+  font-size: px-to-em($bitstyles-font-size-base-small);
+  line-height: 1.5;
+  color: map-get($bitstyles-colors-theme, 'text');
+  background: map-get($bitstyles-colors-theme, 'background');
+
+  &.fonts-loaded {
+    font-family: $bitstyles-font-family-body-loaded;
+  }
+}
+
+// Headers
+//
+// Semantic headers, `<h1>` being the most important in a section or page, `<h6>` being the least.
+//
+// markup:
+// <h1>Header 1</h1>
+// <h2>Header 2</h2>
+// <h3>Header 3</h3>
+// <h4>Header 4</h4>
+// <h5>Header 5</h5>
+// <h6>Header 6</h6>
+//
+// Styleguide 4.1
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @include generic-heading;
+}
+
+h1 {
+  @include font-size($bitstyles-font-size-h1-small);
+}
+
+h2 {
+  @include font-size($bitstyles-font-size-h2-small);
+}
+
+h3 {
+  @include font-size($bitstyles-font-size-h3-small);
+}
+
+h4 {
+  @include font-size($bitstyles-font-size-h4-small);
+}
+
+h5 {
+  @include font-size($bitstyles-font-size-h5-small);
+}
+
+h6 {
+  @include font-size($bitstyles-font-size-h6-small);
+}
+
+@include media-query($bitstyles-typography-breakpoint) {
+  html {
+    font-size: px-to-em($bitstyles-font-size-base, $bitstyles-font-size-base);
+  }
+
+  h1 {
+    @include font-size($bitstyles-font-size-h1, $bitstyles-font-size-base);
+  }
+
+  h2 {
+    @include font-size($bitstyles-font-size-h2, $bitstyles-font-size-base);
+  }
+
+  h3 {
+    @include font-size($bitstyles-font-size-h3, $bitstyles-font-size-base);
+  }
+
+  h4 {
+    @include font-size($bitstyles-font-size-h4, $bitstyles-font-size-base);
+  }
+
+  h5 {
+    @include font-size($bitstyles-font-size-h5, $bitstyles-font-size-base);
+  }
+
+  h6 {
+    @include font-size($bitstyles-font-size-h6, $bitstyles-font-size-base);
+  }
+}
+
+// Paragraphs
+//
+// A paragraph of text.
+//
+// markup:
+// <p>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer. Gummies cheesecake oat cake sugar plum icing cupcake tiramisu bonbon. Cotton candy chupa chups tootsie roll chupa chups cotton candy liquorice jelly gingerbread. Pastry gummi bears liquorice tart cotton candy marshmallow. Ice cream cotton candy chocolate cake cookie. Bonbon candy jelly-o sugar plum cotton candy carrot cake icing ice cream. Sweet chocolate marzipan. Candy canes danish cake carrot cake bonbon. Gummi bears sesame snaps tart bear claw pie chocolate bar. Ice cream candy canes sugar plum cookie. Macaroon biscuit biscuit carrot cake liquorice. Muffin pudding gingerbread powder jelly-o chocolate bar powder jelly beans toffee.</p>
+//
+// Styleguide 4.2
+
+p {
+  margin: 0 0 $bitstyles-spacing;
+}
+
+// Address
+//
+// Address element. Often used to indicate authorship and contact information.
+//
+// markup:
+// <address>Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</address
+//
+// Styleguide 4.4
+address {
+  font-style: normal;
+}
+
+// Definition list
+//
+// Used to define terms.
+//
+// markup:
+// <dl>
+//   <dt>Gummies cheesecake oat cake sugar plum icing cupcake tiramisu bonbon.</dt>
+//   <dd>Gummies cheesecake oat cake sugar plum icing cupcake tiramisu bonbon.</dd>
+// </dl>
+//
+// Styleguide 4.5
+
+dt {
+  font-weight: $bitstyles-font-weight-bold;
+}
+
+// List - Unordered
+//
+// An unordered list.
+//
+// markup:
+// <ul>
+//   <li>Pie cotton candy chupa chups.</li>
+//   <li>Liquorice cheesecake wafer.</li>
+//   <li>Gummies cheesecake oat cake sugar.</li>
+// </ul>
+//
+// Styleguide 4.6
+
+// List - Ordered
+//
+// An unordered list.
+//
+// markup:
+// <ol>
+//   <li>Pie cotton candy chupa chups.</li>
+//   <li>Liquorice cheesecake wafer.</li>
+//   <li>Gummies cheesecake oat cake sugar.</li>
+// </ol>
+//
+// Styleguide 4.7
+
+// Blockquote
+//
+// Quoted text.
+//
+// markup:
+// <blockquote>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer. Gummies cheesecake oat cake sugar plum icing cupcake tiramisu bonbon. Cotton candy chupa chups tootsie roll chupa chups cotton candy liquorice jelly</blockquote>
+//
+// Styleguide 4.8
+
+// Typographic styles
+//
+// Inline elements that have a default typographic representation in a browser.
+//
+// Styleguide 4.9
+
+// strong
+//
+// markup:
+// <strong>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer. Gummies cheesecake oat cake sugar plum icing cupcake tiramisu bonbon. Cotton candy chupa chups tootsie roll chupa chups cotton candy liquorice jelly</strong>
+//
+// Styleguide 4.9.1
+
+// em
+//
+// markup:
+// <em>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</em>
+//
+// Styleguide 4.9.2
+
+// pre
+//
+// markup:
+// <pre>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</pre>
+//
+// Styleguide 4.9.3
+
+// code
+//
+// markup:
+// <code>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</code>
+//
+// Styleguide 4.9.4
+
+// kbd
+//
+// markup:
+// <kbd>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</kbd>
+//
+// Styleguide 4.9.5
+
+// samp
+//
+// markup:
+// <samp>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</samp>
+//
+// Styleguide 4.9.6
+
+// var
+//
+// markup:
+// <var>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</var>
+//
+// Styleguide 4.9.7
+
+// cite
+//
+// markup:
+// <cite>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</cite>
+//
+// Styleguide 4.9.8
+
+// del
+//
+// markup:
+// <del>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</del>
+//
+// Styleguide 4.9.9
+
+// abbr
+//
+// markup:
+// <abbr>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</abbr>
+//
+// Styleguide 4.9.10
+
+// i
+//
+// markup:
+// <i>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</i>
+//
+// Styleguide 4.9.11
+
+// b
+//
+// markup:
+// <b>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</b>
+//
+// Styleguide 4.9.12
+
+// ins
+//
+// markup:
+// <ins>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</ins>
+//
+// Styleguide 4.9.13
+
+// dfn
+//
+// markup:
+// <dfn>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</dfn>
+//
+// Styleguide 4.9.14
+
+// small
+//
+// markup:
+// <small>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</small>
+//
+// Styleguide 4.9.15
+
+// sub
+//
+// markup:
+// <sub>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</sub>
+//
+// Styleguide 4.9.16
+
+// sup
+//
+// markup:
+// <sup>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</sup>
+//
+// Styleguide 4.9.17
+
+// big
+//
+// markup:
+// <big>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</big>
+//
+// Styleguide 4.9.18
+
+// s
+//
+// markup:
+// <s>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</s>
+//
+// Styleguide 4.9.19
+
+// strike
+//
+// markup:
+// <strike>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</strike>
+//
+// Styleguide 4.9.20
+
+// q
+//
+// markup:
+// <q>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</q>
+//
+// Styleguide 4.9.21
+
+// time
+//
+// markup:
+// <time>20:57</time>
+//
+// Styleguide 4.9.22
+
+// Table
+//
+// markup:
+// <table>
+//   <caption>Awesome caption</caption>
+//   <thead>
+//     <tr>
+//       <th>Header content 1</th>
+//       <th>Header content 2</th>
+//     </tr>
+//   </thead>
+//   <tfoot>
+//     <tr>
+//       <td>Footer content 1</td>
+//       <td>Footer content 2</td>
+//     </tr>
+//   </tfoot>
+//   <tbody>
+//     <tr>
+//       <td>Body content 1</td>
+//       <td>Body content 2</td>
+//     </tr>
+//   </tbody>
+// </table>
+//
+// Styleguide 4.10
+
+/* stylelint-enable selector-no-type */

data/scss/bitstyles/components/_expander.scss

@@ -0,0 +1,45 @@
+// Expander
+//
+// Needs JS to function. The toggle is an interactive element of some kind (button, link),
+// the body is the content you want to be revealed — it starts at zero height,
+// expands to size of content once active.
+//
+// Use the `.o-button` classes on the `.c-expander-toggle` to set size & appearance.
+//
+// markup:
+// <p>
+//   <button class="c-expander-toggle o-button" aria-expanded="false" aria-controls="expander-0" id="expander_button">
+//     Toggle content
+//     <svg class="o-icon c-expander-toggle__indicator">
+//       <use xlink:href="assets/images/icons.svg#icon-arrow-up"></use>
+//     </svg>
+//   </button>
+// </p>
+// <p>Other content</p>
+// <div class="c-expander-body" id="expander-0" aria-hidden="true">
+//   <p>Pudding oat cake brownie. Gummies jelly beans apple pie. Donut sugar plum cotton candy sesame snaps muffin oat cake. Lemon drops carrot cake croissant gingerbread danish. Gingerbread liquorice soufflé croissant dessert sweet roll candy sweet roll. Pastry chocolate bar donut tiramisu marshmallow donut. Brownie chupa chups macaroon cupcake. Marzipan soufflé jelly sweet roll sesame snaps chocolate bar cake cotton candy brownie.</p>
+//   <p>Powder sweet roll sesame snaps. Sweet roll fruitcake ice cream cheesecake croissant. Candy cupcake cake brownie muffin oat cake gummi bears bear claw. Chupa chups liquorice jelly cotton candy gummies gummies. Jujubes lemon drops candy gummi bears cake cake fruitcake tart pastry. Cake topping candy canes. Lollipop dragée icing chocolate cake sugar plum. Jujubes halvah tootsie roll chocolate gingerbread sweet roll danish. Biscuit bonbon sweet.</p>
+// </div>
+//
+// Styleguide 6.3
+
+.#{$bitstyles-namespace}c-expander-toggle__indicator {
+  transform: rotate(180deg);
+  transition: transform $bitstyles-transition-duration $bitstyles-transition-easing;
+
+  .#{$bitstyles-namespace}c-expander-toggle[aria-expanded="true"] & {
+    transform: rotate(0deg); /* stylelint-disable-line length-zero-no-unit */
+  }
+}
+
+.#{$bitstyles-namespace}c-expander-body {
+  height: auto;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height $bitstyles-transition-duration-long $bitstyles-transition-easing;
+
+  &[aria-hidden="false"] {
+    max-height: 999rem;
+    max-height: 200vh; // stylelint-disable-line declaration-block-no-duplicate-properties
+  }
+}

data/scss/bitstyles/components/_modal.scss

@@ -0,0 +1,170 @@
+/* @define modal */
+// Modal
+//
+// Needs JS to function. This is a modal overlay which animates in & out.
+//
+// Uses [A11y-dialog.js](https://github.com/edenspiekermann/a11y-dialog) so it’s really accessible —
+// it requires semantic markup, landmark roles and aria attributes in order to function, and keeps
+// those all updated with the component’s current state.
+//
+// Add `data-a11y-dialog-show="dialog_ID"` to a button to make that the trigger to open a modal.
+//
+// Can be closed by clicking the darkened overlay, the close button in the top right (or any button
+// with the `data-a11y-dialog-hide` attribute), or hitting the escape key.
+//
+// Sizing is controlled by the usual layout classes e.g. `.l-content`, except at smaller screensizes
+// where the modal becomes fullwidth.
+//
+// markup:
+//   <main aria-label="Content" id="main" class="l-content">
+//     <p>Icing powder pie jelly beans soufflé biscuit cupcake fruitcake. Jelly beans bear claw candy canes. Chupa chups gingerbread dessert gingerbread jelly-o icing topping. Marshmallow tiramisu tiramisu cheesecake. Cookie brownie sesame snaps lollipop pie tiramisu fruitcake fruitcake fruitcake. Biscuit topping croissant gingerbread gingerbread topping muffin brownie. Jelly toffee danish fruitcake. Liquorice fruitcake bonbon. Bear claw pudding bonbon jujubes. Danish icing sweet. Biscuit jelly marzipan pie tart. Sugar plum danish gingerbread powder cupcake ice cream sugar plum. Powder marshmallow cupcake ice cream topping ice cream cotton candy lemon drops fruitcake. Chocolate cake wafer jelly beans cupcake lemon drops.</p>
+//     <p class="t-text-align--center"><button class="o-link" data-a11y-dialog-show="dialog_1">open dialogue</button></p>
+//     <p>Icing powder pie jelly beans soufflé biscuit cupcake fruitcake. Jelly beans bear claw candy canes. Chupa chups gingerbread dessert gingerbread jelly-o icing topping. Marshmallow tiramisu tiramisu cheesecake. Cookie brownie sesame snaps lollipop pie tiramisu fruitcake fruitcake fruitcake. Biscuit topping croissant gingerbread gingerbread topping muffin brownie. Jelly toffee danish fruitcake. Liquorice fruitcake bonbon. Bear claw pudding bonbon jujubes. Danish icing sweet. Biscuit jelly marzipan pie tart. Sugar plum danish gingerbread powder cupcake ice cream sugar plum. Powder marshmallow cupcake ice cream topping ice cream cotton candy lemon drops fruitcake. Chocolate cake wafer jelly beans cupcake lemon drops.</p>
+//   </main>
+//   <div class="c-modal" id="dialog_1" aria-hidden="true">
+//     <div class="c-modal__overlay" tabindex="-1" data-a11y-dialog-hide></div>
+//     <div class="l-content c-modal__content" role="dialog" aria-labelledby="dialog-title">
+//       <div role="document">
+//         <h1 class="o-h1" id="dialog-title" tabindex="0">Dialog Title</h1>
+//         <p>Icing powder pie jelly beans soufflé biscuit cupcake fruitcake. Jelly beans bear claw candy canes. Chupa chups gingerbread dessert gingerbread jelly-o icing topping. Marshmallow tiramisu tiramisu cheesecake. Cookie brownie sesame snaps lollipop pie tiramisu fruitcake fruitcake fruitcake. Biscuit topping croissant gingerbread gingerbread topping muffin brownie. Jelly toffee danish fruitcake. Liquorice fruitcake bonbon. Bear claw pudding bonbon jujubes. Danish icing sweet. Biscuit jelly marzipan pie tart. Sugar plum danish gingerbread powder cupcake ice cream sugar plum. Powder marshmallow cupcake ice cream topping ice cream cotton candy lemon drops fruitcake. Chocolate cake wafer jelly beans cupcake lemon drops.</p>
+//         <p>Gummies cake topping ice cream dessert. Jelly beans marzipan toffee biscuit cookie lollipop cake pie. Apple pie sweet bonbon candy jujubes. Gummi bears biscuit cheesecake marshmallow chupa chups danish carrot cake. Cookie croissant ice cream bonbon ice cream. Cotton candy halvah bear claw. Pudding apple pie tootsie roll gummi bears halvah icing jelly-o jelly beans. Jujubes lemon drops macaroon wafer tart dragée. Gummies danish lollipop cupcake oat cake. Ice cream candy canes brownie chocolate bar pie macaroon biscuit tootsie roll. Tootsie roll carrot cake fruitcake. Wafer chupa chups jelly beans. Pie cake jujubes caramels wafer.</p>
+//         <button class="o-button c-modal__close" type="button" data-a11y-dialog-hide aria-label="Close this dialog window">
+//           &times;
+//         </button>
+//       </div>
+//     </div>
+//   </div>
+//
+// Styleguide 6.1
+
+@import '../settings/modal';
+
+@mixin modal-is-hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.#{$bitstyles-namespace}c-modal__overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  background: $bitstyles-modal-overlay-color;
+  transition: all $bitstyles-modal-transition-duration $bitstyles-modal-transition-easing;
+  -webkit-backface-visibility: hidden; // stylelint-disable-line property-no-vendor-prefix
+  backface-visibility: hidden;
+  will-change: $bitstyles-modal-will-change;
+  cursor: pointer;
+
+  [aria-hidden="true"] & {
+    @include modal-is-hidden;
+
+    transition: all $bitstyles-modal-transition-duration $bitstyles-modal-transition-easing, visibility 0 $bitstyles-modal-transition-easing $bitstyles-modal-transition-duration;
+  }
+}
+
+.#{$bitstyles-namespace}c-modal__content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 20;
+  width: 100%;
+  height: 100%;
+  max-height: 100vh;
+  padding-top: $bitstyles-spacing;
+  padding-bottom: $bitstyles-spacing;
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
+  background-color: $bitstyles-modal-background-color;
+  border-radius: $bitstyles-modal-border-radius;
+  transform: translate(-50%, -50%);
+  transform-origin: 50% 50%;
+  transition: all $bitstyles-modal-transition-duration-smallscreen $bitstyles-modal-transition-easing;
+  -webkit-backface-visibility: hidden; // stylelint-disable-line property-no-vendor-prefix
+  backface-visibility: hidden;
+  will-change: $bitstyles-modal-will-change;
+
+  [aria-hidden="true"] & {
+    @include modal-is-hidden;
+
+    transform: translate(-50%, 50%);
+    transition: all $bitstyles-modal-transition-duration-smallscreen $bitstyles-modal-transition-easing, visibility 0 $bitstyles-modal-transition-easing $bitstyles-modal-transition-duration;
+  }
+}
+
+@include media-query($bitstyles-modal-breakpoint) {
+  .#{$bitstyles-namespace}c-modal__content {
+    width: calc(100% - 2 * #{$bitstyles-spacing});
+    height: auto;
+    transition: all $bitstyles-modal-transition-duration $bitstyles-modal-transition-easing, visibility 0 $bitstyles-modal-transition-easing;
+
+    [aria-hidden="true"] & {
+      transform: translate(-50%, -50%) scale(0.875);
+      transition: all $bitstyles-modal-transition-duration $bitstyles-modal-transition-easing, visibility 0 $bitstyles-modal-transition-easing $bitstyles-modal-transition-duration;
+    }
+  }
+}
+
+.#{$bitstyles-namespace}c-modal__close {
+  position: absolute;
+  top: $bitstyles-spacing;
+  right: $bitstyles-spacing;
+}
+
+// Modal dialog
+//
+// Needs JS to function. This is a modal dialog overlay which animates in & out.
+//
+// As with the standard modal it uses [A11y-dialog.js](https://github.com/edenspiekermann/a11y-dialog) so it’s really accessible —
+// it requires semantic markup, landmark roles and aria attributes in order to function, and keeps
+// those all updated with the component’s current state.
+//
+// Add `data-a11y-dialog-show="dialog_ID"` to a button to make that the trigger to open a modal.
+//
+// Can be closed by clicking the darkened overlay, hitting the escape key, or by selecting one of the cancel/ok buttons.
+// Different animations can be defined for each of the options.
+//
+// Sizing is controlled by the usual layout classes e.g. `.l-content`, except at smaller screensizes
+// where the modal becomes fullwidth.
+//
+// markup:
+//   <main aria-label="Content" id="main" class="l-content">
+//     <p>Icing powder pie jelly beans soufflé biscuit cupcake fruitcake. Jelly beans bear claw candy canes. Chupa chups gingerbread dessert gingerbread jelly-o icing topping. Marshmallow tiramisu tiramisu cheesecake. Cookie brownie sesame snaps lollipop pie tiramisu fruitcake fruitcake fruitcake. Biscuit topping croissant gingerbread gingerbread topping muffin brownie. Jelly toffee danish fruitcake. Liquorice fruitcake bonbon. Bear claw pudding bonbon jujubes. Danish icing sweet. Biscuit jelly marzipan pie tart. Sugar plum danish gingerbread powder cupcake ice cream sugar plum. Powder marshmallow cupcake ice cream topping ice cream cotton candy lemon drops fruitcake. Chocolate cake wafer jelly beans cupcake lemon drops.</p>
+//     <p class="t-text-align--center"><button class="o-link" data-a11y-dialog-show="dialog_1">open dialogue</button></p>
+//     <p>Icing powder pie jelly beans soufflé biscuit cupcake fruitcake. Jelly beans bear claw candy canes. Chupa chups gingerbread dessert gingerbread jelly-o icing topping. Marshmallow tiramisu tiramisu cheesecake. Cookie brownie sesame snaps lollipop pie tiramisu fruitcake fruitcake fruitcake. Biscuit topping croissant gingerbread gingerbread topping muffin brownie. Jelly toffee danish fruitcake. Liquorice fruitcake bonbon. Bear claw pudding bonbon jujubes. Danish icing sweet. Biscuit jelly marzipan pie tart. Sugar plum danish gingerbread powder cupcake ice cream sugar plum. Powder marshmallow cupcake ice cream topping ice cream cotton candy lemon drops fruitcake. Chocolate cake wafer jelly beans cupcake lemon drops.</p>
+//   </main>
+//   <div class="c-modal" id="dialog_1" aria-hidden="true">
+//     <div class="c-modal__overlay" tabindex="-1" data-a11y-dialog-hide></div>
+//     <div class="l-content c-modal__content" role="dialog" aria-labelledby="dialog-title">
+//       <div role="document">
+//         <h1 class="o-h1" id="dialog-title" tabindex="0">Dialog Title</h1>
+//         <p>Icing powder pie jelly beans soufflé biscuit cupcake fruitcake. Jelly beans bear claw candy canes. Chupa chups gingerbread dessert gingerbread jelly-o icing topping. Marshmallow tiramisu tiramisu cheesecake. Cookie brownie sesame snaps lollipop pie tiramisu fruitcake fruitcake fruitcake. Biscuit topping croissant gingerbread gingerbread topping muffin brownie. Jelly toffee danish fruitcake. Liquorice fruitcake bonbon. Bear claw pudding bonbon jujubes. Danish icing sweet. Biscuit jelly marzipan pie tart. Sugar plum danish gingerbread powder cupcake ice cream sugar plum. Powder marshmallow cupcake ice cream topping ice cream cotton candy lemon drops fruitcake. Chocolate cake wafer jelly beans cupcake lemon drops.</p>
+//         <p>Gummies cake topping ice cream dessert. Jelly beans marzipan toffee biscuit cookie lollipop cake pie. Apple pie sweet bonbon candy jujubes. Gummi bears biscuit cheesecake marshmallow chupa chups danish carrot cake. Cookie croissant ice cream bonbon ice cream. Cotton candy halvah bear claw. Pudding apple pie tootsie roll gummi bears halvah icing jelly-o jelly beans. Jujubes lemon drops macaroon wafer tart dragée. Gummies danish lollipop cupcake oat cake. Ice cream candy canes brownie chocolate bar pie macaroon biscuit tootsie roll. Tootsie roll carrot cake fruitcake. Wafer chupa chups jelly beans. Pie cake jujubes caramels wafer.</p>
+//         <button class="o-button" type="button" id="#cancel_button">Cancel</button>
+//         <button class="o-button" type="button" id="#ok_button">Ok</button>
+//       </div>
+//     </div>
+//   </div>
+//
+// Styleguide 6.2
+
+@mixin modal-variation($state) {
+  .#{$bitstyles-namespace}c-modal--animation-#{$state} {
+    &[aria-hidden="true"] {
+      .#{$bitstyles-namespace}c-modal__content {
+        @content;
+      }
+    }
+  }
+}
+
+@include modal-variation(cancel) {
+  transform: translate(-50%, 50%);
+}
+
+@include modal-variation(ok) {
+  opacity: 1;
+  transform: translate(-50%, -200%);
+}

data/scss/bitstyles/generic/_box-sizing.scss

@@ -0,0 +1,16 @@
+// Can be used to apply the border-box box model to all elements instead of the default content-box,
+// while still allowing components to change.
+//
+// No styleguide reference.
+
+/* stylelint-disable selector-no-type */
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+/* stylelint-enable selector-no-type */