bitstyles 0.8.0

data/scss/bitstyles/objects/_typography.scss

@@ -0,0 +1,92 @@
+// Typography
+//
+// These typographic classes mimic the html elements `<h1>`..`<h6>` — use the semantically correct
+// element in markup, then apply the correct class to achieve the correct visual appearance.
+// Note the `.o-h0` has been added as an additional layer above `.o-h1`, use to acheive an extra-large
+// 'hero' (using Bootstrap nomenclature) text.
+//
+// Markup:
+// <h1 class="o-h0">Header 0</h1>
+// <h2 class="o-h1">Header 1</h2>
+// <h3 class="o-h2">Header 2</h3>
+// <h4 class="o-h3">Header 3</h4>
+// <h5 class="o-h4">Header 4</h5>
+// <h6 class="o-h5">Header 5</h6>
+// <h6 class="o-h5">Header 6</h6>
+// <h1 class="o-h6">Header 6</h1>
+// <h2 class="o-h5">Header 5</h2>
+// <h3 class="o-h4">Header 4</h3>
+// <h4 class="o-h3">Header 3</h4>
+// <h5 class="o-h2">Header 2</h5>
+// <h6 class="o-h1">Header 1</h6>
+// <h6 class="o-h0">Header 0</h6>
+//
+// Styleguide 1.20
+
+.#{$bitstyles-namespace}o-h0,
+.#{$bitstyles-namespace}o-h1,
+.#{$bitstyles-namespace}o-h2,
+.#{$bitstyles-namespace}o-h3,
+.#{$bitstyles-namespace}o-h4,
+.#{$bitstyles-namespace}o-h5,
+.#{$bitstyles-namespace}o-h6 {
+  @include generic-heading;
+}
+
+.#{$bitstyles-namespace}o-h0 {
+  @include font-size($bitstyles-font-size-h0-small);
+}
+
+.#{$bitstyles-namespace}o-h1 {
+  @include font-size($bitstyles-font-size-h1-small);
+}
+
+.#{$bitstyles-namespace}o-h2 {
+  @include font-size($bitstyles-font-size-h2-small);
+}
+
+.#{$bitstyles-namespace}o-h3 {
+  @include font-size($bitstyles-font-size-h3-small);
+}
+
+.#{$bitstyles-namespace}o-h4 {
+  @include font-size($bitstyles-font-size-h4-small);
+}
+
+.#{$bitstyles-namespace}o-h5 {
+  @include font-size($bitstyles-font-size-h5-small);
+}
+
+.#{$bitstyles-namespace}o-h6 {
+  @include font-size($bitstyles-font-size-h6-small);
+}
+
+@include media-query($bitstyles-typography-breakpoint) {
+  .#{$bitstyles-namespace}o-h0 {
+    @include font-size($bitstyles-font-size-h0, $bitstyles-font-size-base);
+  }
+
+  .#{$bitstyles-namespace}o-h1 {
+    @include font-size($bitstyles-font-size-h1, $bitstyles-font-size-base);
+  }
+
+  .#{$bitstyles-namespace}o-h2 {
+    @include font-size($bitstyles-font-size-h2, $bitstyles-font-size-base);
+  }
+
+  .#{$bitstyles-namespace}o-h3 {
+    @include font-size($bitstyles-font-size-h3, $bitstyles-font-size-base);
+  }
+
+  .#{$bitstyles-namespace}o-h4 {
+    @include font-size($bitstyles-font-size-h4, $bitstyles-font-size-base);
+  }
+
+  .#{$bitstyles-namespace}o-h5 {
+    @include font-size($bitstyles-font-size-h5, $bitstyles-font-size-base);
+  }
+
+  .#{$bitstyles-namespace}o-h6 {
+    @include font-size($bitstyles-font-size-h6, $bitstyles-font-size-base);
+  }
+}

data/scss/bitstyles/objects/_vertical-center.scss

@@ -0,0 +1,16 @@
+/** @define vertical-center */
+//
+// Vertical Centre
+//
+// Centres an element vertically (not horizontally). Uses absolute positioning, therefore outside the document flow.
+//
+// markup:
+// <div class="background-grey min-height-block">
+//   <p class="o-vertical-center">Vertically-centred content here</p>
+// </div>
+//
+// Styleguide 1.12
+
+.#{$bitstyles-namespace}o-vertical-center {
+  @include vertical-center;
+}

data/scss/bitstyles/objects/_visuallyhidden.scss

@@ -0,0 +1,30 @@
+/** @define visuallyhidden */
+//
+// Visuallyhidden
+//
+// Hide an element visually while leaving it readable & accessible by google & screenreaders.
+// Use to give more complete & understandable labels for UI e.g. display only 'next' on a button,
+// but use `.visuallyhidden` to hide a span containing a more descriptive label.
+// Available at every breakpoint set in `$visuallyhidden-breakpoints`.
+//
+// markup:
+// <button class="o-button">
+//   <span class="o-button__label">Next</span>
+//   <span class="o-visuallyhidden">articles</span>
+// </button>
+//
+// Styleguide 1.14
+
+@import '../settings/visuallyhidden';
+
+.#{$bitstyles-namespace}o-visuallyhidden {
+  @include visuallyhidden;
+}
+
+@each $breakpoint in $visuallyhidden-breakpoints {
+  @include media-query($breakpoint) {
+    .#{$bitstyles-namespace}o-visuallyhidden\@#{$breakpoint} {
+      @include visuallyhidden;
+    }
+  }
+}

data/scss/bitstyles/settings/_bordered-header.scss

@@ -0,0 +1,3 @@
+$bitstyles-bordered-header-line-min-width: 20% !default;
+$bitstyles-bordered-header-gutter: 1em !default;
+$bitstyles-bordered-header-border: 1px solid $bitstyles-color-gray-20 !default;

data/scss/bitstyles/settings/_button--icon.scss

@@ -0,0 +1,5 @@
+$bitstyles-button-icon-padding: 1rem !default;
+$bitstyles-button-icon-color: $bitstyles-color-white !default;
+$bitstyles-button-icon-background-color: $bitstyles-color-black !default;
+$bitstyles-button-icon-border: 0 !default;
+$bitstyles-button-icon-border-radius: $bitstyles-border-radius-round !default;

data/scss/bitstyles/settings/_button.scss

@@ -0,0 +1,18 @@
+$bitstyles-button-padding-vertical: 0.6rem !default;
+$bitstyles-button-padding-horizontal: 1.5rem !default;
+
+$bitstyles-button-background-color: $bitstyles-color-black !default;
+$bitstyles-button-color: $bitstyles-color-white !default;
+$bitstyles-button-background-color-hover: $bitstyles-color-white !default;
+$bitstyles-button-color-hover: $bitstyles-color-black !default;
+
+$bitstyles-button-background-color-disabled: $bitstyles-color-gray-30 !default;
+$bitstyles-button-border-color-disabled: $bitstyles-color-gray-30 !default;
+$bitstyles-button-color-disabled: $bitstyles-color-gray-70 !default;
+
+$bitstyles-button-border: 1px solid !default;
+$bitstyles-button-border-radius: 0.25rem !default;
+
+$bitstyles-button-transition: color $bitstyles-transition-duration $bitstyles-transition-easing, background-color $bitstyles-transition-duration $bitstyles-transition-easing !default;
+
+$bitstyles-button-icon-spacing: $bitstyles-spacing-horizontal / 2 !default;

data/scss/bitstyles/settings/_content.scss

@@ -0,0 +1,5 @@
+$bitstyles-content-max-width: 45rem !default;
+$bitstyles-content-horizontal-padding: $bitstyles-spacing !default;
+
+$bitstyles-content-horizontal-padding-large: $bitstyles-spacing * 2 !default;
+$bitstyles-content-large-breakpoint: 'large' !default; // The breakpoint at which we implement the above horizontal-padding value.

data/scss/bitstyles/settings/_global.animation.scss

@@ -0,0 +1,3 @@
+$bitstyles-transition-easing: ease-in-out !default;
+$bitstyles-transition-duration: 0.15s !default;
+$bitstyles-transition-duration-long: 0.5s !default;

data/scss/bitstyles/settings/_global.breakpoints.scss

@@ -0,0 +1,12 @@
+$bitstyles-breakpoint-boundary-width:            0.0625em !default;
+$bitstyles-breakpoint-small-medium-boundary:     45em !default;
+$bitstyles-breakpoint-medium-large-boundary:     64em !default;
+
+$bitstyles-breakpoints: (
+  'small':               'screen and (max-width: #{$bitstyles-breakpoint-small-medium-boundary - $bitstyles-breakpoint-boundary-width})',
+  'medium':              'screen and (min-width: #{$bitstyles-breakpoint-small-medium-boundary}) and (max-width: #{$bitstyles-breakpoint-medium-large-boundary - $bitstyles-breakpoint-boundary-width})',
+  'medium-and-up':       'screen and (min-width: #{$bitstyles-breakpoint-small-medium-boundary})',
+  'small-and-medium':    'screen and (max-width: #{$bitstyles-breakpoint-medium-large-boundary - $bitstyles-breakpoint-boundary-width})',
+  'large':               'screen and (min-width: #{$bitstyles-breakpoint-medium-large-boundary})',
+  'hidpi':               '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)'
+) !default;

data/scss/bitstyles/settings/_global.color-base.scss

@@ -0,0 +1,14 @@
+// Monochrome
+$bitstyles-color-black:           #000 !default;
+$bitstyles-color-white:           #fff !default;
+
+// Greys
+$bitstyles-color-gray-10:         #e5e5e5 !default;
+$bitstyles-color-gray-20:         #ccc !default;
+$bitstyles-color-gray-30:         #b2b2b2 !default;
+$bitstyles-color-gray-40:         #999 !default;
+$bitstyles-color-gray-50:         #7f7f7f !default;
+$bitstyles-color-gray-60:         #666 !default;
+$bitstyles-color-gray-70:         #4c4c4c !default;
+$bitstyles-color-gray-80:         #333 !default;
+$bitstyles-color-gray-90:         #191919 !default;

data/scss/bitstyles/settings/_global.color-theme.scss

@@ -0,0 +1,11 @@
+$bitstyles-colors-theme: (
+  'primary':     $bitstyles-color-gray-70,
+  'secondary':   $bitstyles-color-gray-20,
+  'text':        $bitstyles-color-gray-80,
+  'background':  $bitstyles-color-white,
+  'positive':    #0f0,
+  'error':       #f00
+) !default;
+
+$foreground-colors: ('primary', 'secondary', 'error');
+$background-colors: ('background', 'secondary');

data/scss/bitstyles/settings/_global.layout.scss

@@ -0,0 +1,7 @@
+$bitstyles-spacing: 1rem !default;
+$bitstyles-spacing-vertical: $bitstyles-spacing !default;
+$bitstyles-spacing-horizontal: $bitstyles-spacing !default;
+
+$bitstyles-global-z: topbar !default;
+
+$bitstyles-border-radius-round: 9999rem !default;

data/scss/bitstyles/settings/_global.setup.scss

@@ -0,0 +1 @@
+$bitstyles-namespace: null !default; // Defining a namespace will prepend it to every selector name

data/scss/bitstyles/settings/_global.typography.scss

@@ -0,0 +1,28 @@
+$bitstyles-font-family-header: serif !default;
+$bitstyles-font-family-header-loaded: serif !default;
+$bitstyles-font-family-body: helvetica, sans-serif !default;
+$bitstyles-font-family-body-loaded: helvetica, sans-serif !default;
+
+$bitstyles-font-weight-light: 300 !default;
+$bitstyles-font-weight-normal: 400 !default;
+$bitstyles-font-weight-bold: 700 !default;
+
+$bitstyles-typography-breakpoint: medium-and-up !default;
+
+$bitstyles-font-size-base-small: 16px !default;
+$bitstyles-font-size-h0-small: 32px !default;
+$bitstyles-font-size-h1-small: 24px !default;
+$bitstyles-font-size-h2-small: 20px !default;
+$bitstyles-font-size-h3-small: 18px !default;
+$bitstyles-font-size-h4-small: $bitstyles-font-size-base-small !default;
+$bitstyles-font-size-h5-small: $bitstyles-font-size-base-small !default;
+$bitstyles-font-size-h6-small: $bitstyles-font-size-base-small !default;
+
+$bitstyles-font-size-base: 18px !default;
+$bitstyles-font-size-h0: 86px !default;
+$bitstyles-font-size-h1: 40px !default;
+$bitstyles-font-size-h2: 28px !default;
+$bitstyles-font-size-h3: 20px !default;
+$bitstyles-font-size-h4: $bitstyles-font-size-base !default;
+$bitstyles-font-size-h5: $bitstyles-font-size-base !default;
+$bitstyles-font-size-h6: $bitstyles-font-size-base !default;

data/scss/bitstyles/settings/_grid.scss

@@ -0,0 +1 @@
+$bitstyles-grid-gutter: $bitstyles-spacing-horizontal !default;

data/scss/bitstyles/settings/_hidden.scss

@@ -0,0 +1 @@
+$hidden-breakpoints: (small, large) !default;

data/scss/bitstyles/settings/_icon.scss

@@ -0,0 +1,5 @@
+$bitstyles-icon-sizes: (
+  'small'     1rem,
+  'medium'    2rem,
+  'large'     3rem
+) !default;

data/scss/bitstyles/settings/_input.scss

@@ -0,0 +1,12 @@
+$bitstyles-input-color: map-get($bitstyles-colors-theme, 'text') !default;
+$bitstyles-input-padding: $bitstyles-spacing / 2 !default;
+$bitstyles-input-border: 1px solid $bitstyles-color-gray-30 !default;
+$bitstyles-input-border-radius: 5px !default;
+$bitstyles-input-border-active: 1px solid $bitstyles-color-gray-50 !default;
+$bitstyles-input-background: $bitstyles-color-white !default;
+$bitstyles-input-placeholder-color: $bitstyles-color-gray-50 !default;
+
+$bitstyles-input-background-color-disabled: $bitstyles-color-gray-10 !default;
+$bitstyles-input-color-disabled: map-get($bitstyles-colors-theme, 'text') !default;
+
+$bitstyles-input-checkbox-size: 1rem;

data/scss/bitstyles/settings/_link.scss

@@ -0,0 +1,4 @@
+$bitstyles-color-link:            $bitstyles-color-gray-50 !default;
+$bitstyles-color-link-visited:    $bitstyles-color-gray-70 !default;
+$bitstyles-color-link-hover:      $bitstyles-color-gray-20 !default;
+$bitstyles-link-transition: color $bitstyles-transition-duration $bitstyles-transition-easing !default;

data/scss/bitstyles/settings/_modal.scss

@@ -0,0 +1,9 @@
+$bitstyles-modal-background-color: #d9d9d9 !default;
+$bitstyles-modal-overlay-color: rgba($bitstyles-color-black, 0.7) !default;
+$bitstyles-modal-transition-easing: ease-in-out !default;
+$bitstyles-modal-transition-duration: 0.3s !default;
+$bitstyles-modal-transition-duration-smallscreen: 0.25s !default;
+$bitstyles-modal-transition-delay: 0.05s !default;
+$bitstyles-modal-will-change: opacity, transform, visibility !default;
+$bitstyles-modal-border-radius: 0 !default;
+$bitstyles-modal-breakpoint: medium-and-up !default;

data/scss/bitstyles/settings/_topbar.scss

@@ -0,0 +1,2 @@
+$bitstyles-topbar-vertical-padding: $bitstyles-spacing !default;
+$bitstyles-topbar-horizontal-padding: $bitstyles-spacing * 2 !default;

data/scss/bitstyles/settings/_visuallyhidden.scss

@@ -0,0 +1 @@
+$visuallyhidden-breakpoints: () !default;

data/scss/bitstyles/settings/_width.scss

@@ -0,0 +1,12 @@
+// These column variables can be lists — (10, 12) will give multiple grid systems: every permutation of 10 columns
+// (1/10, 2/10, 3/10… 9/10, 10/10) and 12 columns (1/12, 2/12, 3/12… 11/12, 12/12).
+// We normally only need one grid system (i.e. one set of columns).
+$bitstyles-widths: (12) !default;
+
+// If a breakpoint is defined here and the name matches one defined in
+// settings/layout, layout/widths will generate a grid layout for that
+// breakpoint.
+// If this is empty, no responsive breakpoints will be generated.
+$bitstyles-widths-breakpoints: (
+  'medium-and-up'
+) !default;

data/scss/bitstyles/tools/_absolute-center.scss

@@ -0,0 +1,13 @@
+// Absolute Center
+//
+// Vertically & horizontally centred element.
+// Absolutely positioned, so centred relative to nearest relatively-positioned parent.
+//
+// Styleguide 2.1
+
+@mixin absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

data/scss/bitstyles/tools/_absolute-cover.scss

@@ -0,0 +1,13 @@
+// Absolute Cover
+//
+// An element that covers its nearest relatively-positioned parent from edge to edge.
+//
+// Styleguide 2.2
+
+@mixin absolute-cover($distance: 0) {
+  position: absolute;
+  top: $distance;
+  right: $distance;
+  bottom: $distance;
+  left: $distance;
+}

data/scss/bitstyles/tools/_block.scss

@@ -0,0 +1,9 @@
+// Block
+//
+// Display an element as a block.
+//
+// Styleguide 2.16
+
+@mixin block {
+  display: block;
+}

data/scss/bitstyles/tools/_break-long-words.scss

@@ -0,0 +1,11 @@
+// Break long words
+//
+// Forces text content within an element to break if longer than the element is wide.
+//
+// Styleguide 2.3
+
+@mixin break-long-words {
+  overflow-wrap: break-word;
+  word-break: break-word; // all 3 are required for cross-browser reasonablness. Without, some browsers force-break *everything*
+  word-wrap: break-word;
+}

data/scss/bitstyles/tools/_clearfix.scss

@@ -0,0 +1,13 @@
+// Clearfix
+//
+// Apply to a floated element (or its parent) to ensure following elements are cleared.
+//
+// Styleguide 2.4
+
+@mixin clearfix {
+  &::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+}

data/scss/bitstyles/tools/_fixed-ratio.scss

@@ -0,0 +1,27 @@
+// Fixed Ratio
+//
+// An element that has intrinsic shape — width will be 100%, height will be limited to keep 16:9 aspect ratio.
+//
+// Styleguide 2.5
+
+@mixin fixed-ratio {
+  position: relative;
+  display: block;
+  width: 100%;
+  overflow: hidden;
+
+  &::before {
+    display: block;
+    padding-top: 56.25%;
+    content: '';
+  }
+}
+
+@mixin fixed-ratio__inner {
+  @include absolute-cover;
+
+  display: block;
+  width: 100%;
+  height: auto;
+  min-height: 100%;
+}

data/scss/bitstyles/tools/_flex.scss

@@ -0,0 +1,15 @@
+// Flex
+//
+// Simple flex layout.
+// Make one of the children `.o-flex__primary` to make it take as much space as is available.
+//
+// Styleguide 2.17
+
+@mixin flex {
+  display: flex;
+  align-items: stretch;
+}
+
+@mixin flex__primary {
+  flex: 1 0 auto;
+}

data/scss/bitstyles/tools/_font-face.scss

@@ -0,0 +1,21 @@
+// Webfont
+//
+// Helper mixin to output a widely cross-browser-compatible `@font-face` declaration.
+//
+// ```@include webfont(Roboto, italic, 700, 'fonts/roboto-bold-italic');```
+//
+// Styleguide 2.15
+
+@mixin webfont($font-family, $font-style, $font-weight, $font-url) {
+  @font-face {
+    font-family: $font-family;
+    font-style: $font-style;
+    font-weight: $font-weight;
+    src: font-url('#{$font-url}.eot');
+    src:
+      font-url('#{$font-url}.eot?#iefix') format('embedded-opentype'),
+      font-url('#{$font-url}.woff2') format('woff2'),
+      font-url('#{$font-url}.woff') format('woff'),
+      font-url('#{$font-url}.ttf') format('truetype');
+  }
+}

data/scss/bitstyles/tools/_hidden.scss

@@ -0,0 +1,11 @@
+// Hidden
+//
+// Fully hides an element & its children — does not affect document flow, does not get read by google or screenreaders.
+//
+// Styleguide 2.6
+
+@mixin hidden {
+  /* stylelint-disable declaration-no-important */
+  display: none !important;
+  /* stylelint-enable declaration-no-important */
+}

data/scss/bitstyles/tools/_list-reset.scss

@@ -0,0 +1,17 @@
+// List reset
+//
+// Removes the default bullet points from a list, along with any margins and
+// padding.
+//
+// Optional parameters to prevent removal of margins and padding.
+//
+// Styleguide 2.13
+
+@mixin list-reset($spacing: true) {
+  @if $spacing {
+    padding: 0;
+    margin: 0;
+  }
+
+  list-style-type: none;
+}

data/scss/bitstyles/tools/_media-query.scss

@@ -0,0 +1,30 @@
+// Media Query
+//
+// Helper function to ease usage of media-queries. Uses the breakpoints listed in $breakpoint sass variable.
+//
+// Usage:
+//
+// `
+// @media-query(breakpoint-name) {
+//    .selector {
+//       …styles here…
+//    }
+// }
+// `
+//
+// Styleguide 2.11
+
+@mixin media-query($mq, $breakpoints: $bitstyles-breakpoints) {
+
+  $breakpoint-condition: map-get($breakpoints, $mq);
+
+  @if ($breakpoint-condition) {
+    @media #{$breakpoint-condition} {
+      @content;
+    }
+  }
+
+  @else {
+    @error "Oops! Breakpoint ‘#{$mq}’ does not exist.";
+  }
+}

data/scss/bitstyles/tools/_media.scss

@@ -0,0 +1,15 @@
+// Media
+//
+// Nicole Sullivan’s OOCSS media object.
+//
+// Styleguide 2.18
+
+@mixin media {
+  display: block;
+  overflow: hidden;
+}
+
+@mixin media__feature {
+  float: left;
+  margin-right: $bitstyles-spacing;
+}

data/scss/bitstyles/tools/_truncate-with-ellipsis.scss

@@ -0,0 +1,13 @@
+// Truncate with ellipsis(…)
+//
+// If an element is single-line inline or inline-block, this will truncate its content
+// and display an ellipsis (…) at the end of the line.
+//
+// Styleguide 2.9
+
+@mixin truncate-with-ellipsis($truncation-boundary: 100%) {
+  max-width: $truncation-boundary;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

data/scss/bitstyles/tools/_typography-conversions.scss

@@ -0,0 +1,18 @@
+// Px to Rem sizing
+//
+// Converts pixels to rems — use to define font-sizes etc.
+//
+// Styleguide 2.12.1
+
+@function px-to-rem($pixel-size, $root-size: $bitstyles-font-size-base-small) {
+  @return ($pixel-size / $root-size) * 1rem;
+}
+
+// em sizing
+//
+// Converts pixels to ems — use to define font-sizes etc.
+//
+// Styleguide 2.12.2
+@function px-to-em($pixels, $browser-context: $bitstyles-font-size-base-small) {
+  @return ($pixels / $browser-context) + 0em; // stylelint-disable-line length-zero-no-unit
+}

data/scss/bitstyles/tools/_typography.scss

@@ -0,0 +1,17 @@
+@mixin generic-heading {
+  margin: 0 0 $bitstyles-spacing;
+  font-family: $bitstyles-font-family-header;
+  font-weight: $bitstyles-font-weight-bold;
+  text-rendering: optimizeLegibility;
+
+  .fonts-loaded & {
+    font-family: $bitstyles-font-family-header-loaded;
+  }
+}
+
+@mixin font-size($pixel-size, $browser-context: $bitstyles-font-size-base-small) {
+  /* stylelint-disable declaration-block-no-duplicate-properties */
+  font-size: $pixel-size;
+  font-size: px-to-rem($pixel-size, $browser-context);
+  /* stylelint-enable declaration-block-no-duplicate-properties */
+}

data/scss/bitstyles/tools/_vertical-center.scss

@@ -0,0 +1,11 @@
+// Vertical Center
+//
+// Vertically centres an element relative to its parent.
+//
+// Styleguide 2.8
+
+@mixin vertical-center {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}

data/scss/bitstyles/tools/_visuallyhidden.scss

@@ -0,0 +1,18 @@
+// Visuallyhidden
+//
+// Hides an element, but leaves it still readable by screenreaders & google.
+//
+// Styleguide 2.7
+
+@mixin visuallyhidden {
+  /* stylelint-disable declaration-no-important */
+  position: absolute !important;
+  /* stylelint-enable declaration-no-important */
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+}