bullframe.css 3.8.0 → 4.0.0

package/src/scss/utilities/_utility-layout.scss

@@ -1,196 +1,195 @@
-// micro-clearfix
-// http://nicolasgallagher.com/micro-clearfix-hack/
-.bf-clearfix:before,
-.bf-clearfix:after {
-  content: ' ';
-  display: table;
-}
-
-.bf-clearfix:after {
-  clear: both;
-}
-
-.bf-hide {
-  display: none !important;
-}
-
-// assistive text for screen reader only (e.g. form labels)
-.bf-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.bf-text-hide {
-  font: 0/0 a !important;
-  color: transparent !important;
-  text-shadow: none !important;
-  background-color: transparent !important;
-  border: 0 !important;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-/*
-// taken from https://github.com/h5bp/html5-boilerplate/blob/v7.3.0/dist/css/main.css
-// 
-* Hide only visually, but have it available for screen readers:
-* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
-*
-* 1. For long content, line feeds are not interpreted as spaces and small width
-*    causes content to wrap 1 word per line:
-*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
-*/
-.bf-sr-only {
-  border: 0 !important;
-  clip: rect(0, 0, 0, 0) !important;
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  white-space: nowrap !important;
-  width: 1px !important;
-}
-
-/*
-// taken from https://github.com/h5bp/html5-boilerplate/blob/v7.3.0/dist/css/main.css
-// 
-* Extends the .sr-only class to allow the element
-* to be focusable when navigated to via the keyboard:
-* https://www.drupal.org/node/897638
-*/
-.bf-sr-only.focusable:active,
-.bf-sr-only.focusable:focus {
-  clip: auto !important;
-  height: auto !important;
-  margin: 0 !important;
-  overflow: visible !important;
-  position: static !important;
-  white-space: inherit !important;
-  width: auto !important;
-}
-
-.bf-invisible {
-  visibility: hidden !important;
-}
-
-.bf-visible {
-  visibility: visible !important;
-}
-
-.bf-display-block {
-  display: block !important;
-}
-
-.bf-display-block-center {
-  display: block !important;
-  margin-left: auto !important;
-  margin-right: auto !important;
-  text-align: center !important;
-}
-
-.bf-display-inline {
-  display: inline !important;
-}
-
-.bf-display-inline-block {
-  display: inline-block !important;
-}
-
-
-// IE10+
-// https://caniuse.com/#feat=flexbox
-
-.bf-display-flex {
-  display: flex !important;
-}
-
-.bf-display-inline-flex {
-  display: inline-flex !important;
-}
-
-.bf-display-flex--justify-start {
-  justify-content: flex-start !important;
-}
-
-.bf-display-flex--justify-end {
-  justify-content: flex-end !important;
-}
-
-.bf-display-flex--justify-center {
-  justify-content: center !important;
-}
-
-.bf-display-flex--wrap {
-  flex-wrap: wrap !important;
-}
-
-.bf-display-flex--nowrap {
-  flex-wrap: nowrap !important;
-}
-
-.bf-float-left {
-  float: left !important;
-}
-
-.bf-float-right {
-  float: right !important;
-}
-
-
-// ≠ IE
-// https://caniuse.com/css-sticky
-.bf-position-fixed {
-  position: fixed !important;
-}
-
-.bf-position-sticky {
-  position: sticky !important;
-  top: 0 !important;
-}
-
-// https://css-tricks.com/centering-css-complete-guide
-// Is the element of unknown width and height?
-// ! 'transform' is IE10 + https://caniuse.com/#feat=transforms2d
-.bf-align-center-unknown {
-  position: relative !important;
-}
-
-.bf-align-center-unknown--item {
-  position: absolute !important;
-  top: 50% !important;
-  left: 50% !important;
-  transform: translate(-50%, -50%) !important;
-}
-
-// align items horizontally and vertically
-// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
-.bf-align-center-flex {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.bf-width-25 {
-  width: 25% !important;
-}
-
-.bf-width-33 {
-  width: 33.33333333333333% !important;
-}
-
-.bf-width-50 {
-  width: 50% !important;
-}
-
-.bf-width-75 {
-  width: 75% !important;
-}
-
-.bf-width-100 {
-  width: 100% !important;
-}
-
-.bf-width-auto {
-  width: auto !important;
-}
+// micro-clearfix
+// http://nicolasgallagher.com/micro-clearfix-hack/
+.bf-clearfix:before,
+.bf-clearfix:after {
+  content: ' ';
+  display: table;
+}
+
+.bf-clearfix:after {
+  clear: both;
+}
+
+.bf-hide {
+  display: none !important;
+}
+
+// assistive text for screen reader only (e.g. form labels)
+.bf-hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+.bf-text-hide {
+  /* stylelint-disable-next-line */
+  font: 0/0 a !important;
+  color: transparent !important;
+  text-shadow: none !important;
+  background-color: transparent !important;
+  border: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+/*
+// taken from https://github.com/h5bp/html5-boilerplate/blob/v7.3.0/dist/css/main.css
+// 
+* Hide only visually, but have it available for screen readers:
+* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+*
+* 1. For long content, line feeds are not interpreted as spaces and small width
+*    causes content to wrap 1 word per line:
+*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+*/
+.bf-sr-only {
+  border: 0 !important;
+  clip: rect(0, 0, 0, 0) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 1px !important;
+}
+
+/*
+// taken from https://github.com/h5bp/html5-boilerplate/blob/v7.3.0/dist/css/main.css
+// 
+* Extends the .sr-only class to allow the element
+* to be focusable when navigated to via the keyboard:
+* https://www.drupal.org/node/897638
+*/
+.bf-sr-only.focusable:active,
+.bf-sr-only.focusable:focus {
+  clip: auto !important;
+  height: auto !important;
+  margin: 0 !important;
+  overflow: visible !important;
+  position: static !important;
+  white-space: inherit !important;
+  width: auto !important;
+}
+
+.bf-invisible {
+  visibility: hidden !important;
+}
+
+.bf-visible {
+  visibility: visible !important;
+}
+
+.bf-display-block {
+  display: block !important;
+}
+
+.bf-display-block-center {
+  display: block !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  text-align: center !important;
+}
+
+.bf-display-inline {
+  display: inline !important;
+}
+
+.bf-display-inline-block {
+  display: inline-block !important;
+}
+
+// IE10+
+// https://caniuse.com/#feat=flexbox
+
+.bf-display-flex {
+  display: flex !important;
+}
+
+.bf-display-inline-flex {
+  display: inline-flex !important;
+}
+
+.bf-display-flex--justify-start {
+  justify-content: flex-start !important;
+}
+
+.bf-display-flex--justify-end {
+  justify-content: flex-end !important;
+}
+
+.bf-display-flex--justify-center {
+  justify-content: center !important;
+}
+
+.bf-display-flex--wrap {
+  flex-wrap: wrap !important;
+}
+
+.bf-display-flex--nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.bf-float-left {
+  float: left !important;
+}
+
+.bf-float-right {
+  float: right !important;
+}
+
+// ≠ IE
+// https://caniuse.com/css-sticky
+.bf-position-fixed {
+  position: fixed !important;
+}
+
+.bf-position-sticky {
+  position: sticky !important;
+  top: 0 !important;
+}
+
+// https://css-tricks.com/centering-css-complete-guide
+// Is the element of unknown width and height?
+// ! 'transform' is IE10 + https://caniuse.com/#feat=transforms2d
+.bf-align-center-unknown {
+  position: relative !important;
+}
+
+.bf-align-center-unknown--item {
+  position: absolute !important;
+  top: 50% !important;
+  left: 50% !important;
+  transform: translate(-50%, -50%) !important;
+}
+
+// align items horizontally and vertically
+// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+.bf-align-center-flex {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bf-width-25 {
+  width: 25% !important;
+}
+
+.bf-width-33 {
+  width: 33.33333333333333% !important;
+}
+
+.bf-width-50 {
+  width: 50% !important;
+}
+
+.bf-width-75 {
+  width: 75% !important;
+}
+
+.bf-width-100 {
+  width: 100% !important;
+}
+
+.bf-width-auto {
+  width: auto !important;
+}

package/src/scss/utilities/_utility-lists.scss

@@ -1,17 +1,17 @@
-// this is useful for navbars
-.bf-list-unstyled,
-menu ul.bf-list-unstyled,
-menu ol.bf-list-unstyled,
-ul.bf-list-unstyled ul,
-ul.bf-list-unstyled ol,
-ol.bf-list-unstyled ol,
-ol.bf-list-unstyled ul,
-dd.bf-list-unstyled {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-dt {
-  font-weight: 700;
-}
+// this is useful for navbars
+.bf-list-unstyled,
+menu ul.bf-list-unstyled,
+menu ol.bf-list-unstyled,
+ul.bf-list-unstyled ul,
+ul.bf-list-unstyled ol,
+ol.bf-list-unstyled ol,
+ol.bf-list-unstyled ul,
+dd.bf-list-unstyled {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+dt {
+  font-weight: 700;
+}

package/src/scss/utilities/_utility-print.scss

@@ -1,111 +1,101 @@
-// taken from https://github.com/h5bp/main.css/blob/v2.1.0/dist/_print.css
-
-/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
-/* ==========================================================================
-   Print styles.
-   Inlined to avoid the additional HTTP request:
-   https://www.phpied.com/delay-loading-your-print-css/
-   ========================================================================== */
-
-@media print {
-  *,
-  *::before,
-  *::after {
-    background: #fff !important;
-    color: #000 !important;
-    /* Black prints faster */
-    box-shadow: none !important;
-    text-shadow: none !important;
-  }
-
-  a,
-  a:visited {
-    text-decoration: underline;
-  }
-
-  a[href]::after {
-    content: ' (' attr(href) ')';
-  }
-
-  abbr[title]::after {
-    content: ' (' attr(title) ')';
-  }
-
-  /*
-   * Don't show links that are fragment identifiers,
-   * or use the `javascript:` pseudo protocol
-   */
-  a[href^='#']::after,
-  a[href^='javascript:']::after {
-    content: '';
-  }
-
-  pre {
-    white-space: pre-wrap !important;
-  }
-
-  pre,
-  blockquote {
-    border: 1px solid #999;
-    page-break-inside: avoid;
-  }
-
-  /*
-   * Printing Tables:
-   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
-   */
-  thead {
-    display: table-header-group;
-  }
-
-  tr,
-  img {
-    page-break-inside: avoid;
-  }
-
-  p,
-  h2,
-  h3 {
-    orphans: 3;
-    widows: 3;
-  }
-
-  h2,
-  h3 {
-    page-break-after: avoid;
-  }
-}
-
-// the rulesets below target bullframe.css
-
-@media print {
-  // adjust the grid system making the layout always fixed
-  body,
-  .bf-container {
-    min-width: 992px !important;
-  }
-
-  // a few fixes for '_utility_tables.scss'
-  //
-  // a <table> with a responsive container (.table-responsive) is cut
-  // horizontally because there an overflow-x is applied
-  // let's re-set the overflow of that container on 'auto'
-  // and let the <table> element flows without a fixed/flexible with
-
-  .bf-table-responsive {
-    overflow: auto;
-  }
-
-  .bf-table-responsive table {
-    width: auto;
-  }
-
-  .bf-table-responsive table,
-  .bf-table {
-    border-collapse: collapse !important;
-  }
-}
-
-// Need more?
-//
-// This project looks promising https://github.com/BafS/Gutenberg
+/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
+/* ==========================================================================
+   Print styles.
+   Inlined to avoid the additional HTTP request:
+   https://www.phpied.com/delay-loading-your-print-css/
+   ========================================================================== */
+
+@media print {
+  *,
+  *::before,
+  *::after {
+    background: #fff !important;
+    color: #000 !important;
+    /* Black prints faster */
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  a[href]::after {
+    content: ' (' attr(href) ')';
+  }
+
+  abbr[title]::after {
+    content: ' (' attr(title) ')';
+  }
+
+  /*
+     * Don't show links that are fragment identifiers,
+     * or use the `javascript:` pseudo protocol
+     */
+  a[href^='#']::after,
+  a[href^='javascript:']::after {
+    content: '';
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}
+
+// the rulesets below target bullframe.css
+
+@media print {
+  // adjust the grid system making the layout always fixed
+  body,
+  .bf-container {
+    min-width: 992px !important;
+  }
+
+  // a few fixes for '_utility_tables.scss'
+  //
+  // a <table> with a responsive container (.table-responsive) is cut
+  // horizontally because there an overflow-x is applied
+  // let's re-set the overflow of that container on 'auto'
+  // and let the <table> element flows without a fixed/flexible with
+
+  .bf-table-responsive {
+    overflow: auto;
+  }
+
+  .bf-table-responsive table {
+    width: auto;
+  }
+
+  .bf-table-responsive table,
+  .bf-table {
+    border-collapse: collapse !important;
+  }
+}
+
+// Need more?
+//
+// This project looks promising https://github.com/BafS/Gutenberg