bullframe.css 3.8.0 → 4.0.0

package/src/scss/mixins/_mixin-texts.scss

@@ -1,37 +1,38 @@
-@mixin 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;
-}
-
-@mixin bf-text-truncate {
-  max-width: 100% !important;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  white-space: nowrap !important;
-  word-wrap: normal !important;
-}
-
-// truncate a multiline text via line-clamp
-//
-// no IE support
-// https://caniuse.com/css-line-clamp 
-// 
-// demo https://codepen.io/devam-soni/pen/PoqaKWm
-
-@mixin bf-text-truncate--multiline-2 {
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  display: -webkit-box !important;
-  -webkit-line-clamp: 2 !important;
-  -webkit-box-orient: vertical !important;
-}
-
-@mixin bf-text-truncate--multiline-3 {
-  @include bf-text-truncate--multiline-2;
-  -webkit-line-clamp: 3 !important;
-}
+@mixin 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;
+}
+
+@mixin bf-text-truncate {
+  max-width: 100% !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+  word-wrap: normal !important;
+}
+
+// truncate a multiline text via line-clamp
+//
+// no IE support
+// https://caniuse.com/css-line-clamp
+//
+// demo https://codepen.io/devam-soni/pen/PoqaKWm
+
+@mixin bf-text-truncate--multiline-2 {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  display: -webkit-box !important;
+  -webkit-line-clamp: 2 !important;
+  -webkit-box-orient: vertical !important;
+}
+
+@mixin bf-text-truncate--multiline-3 {
+  @include bf-text-truncate--multiline-2;
+  -webkit-line-clamp: 3 !important;
+}

package/src/scss/typography/_typography-blockquotes.scss

@@ -1,23 +1,23 @@
-blockquote {
-  margin: 0 0 $bf-spacing-xl-px 0;
-  margin-bottom: $bf-spacing-xl-rem;
-  padding-left: 0;
-  font-style: italic;
-}
-
-blockquote p {
-  margin-bottom: 0;
-}
-
-blockquote small {
-  color: $bf-gray;
-  display: block;
-}
-
-blockquote small:before {
-  content: '\2014 \00A0';
-}
-
-q {
-  quotes: '\201C''\201D''\2018''\2019';
-}
+blockquote {
+  margin: 0 0 $bf-spacing-xl-px 0;
+  margin-bottom: $bf-spacing-xl-rem;
+  padding-left: 0;
+  font-style: italic;
+}
+
+blockquote p {
+  margin-bottom: 0;
+}
+
+blockquote small {
+  color: $bf-gray;
+  display: block;
+}
+
+blockquote small:before {
+  content: '\2014 \00A0';
+}
+
+q {
+  quotes: '\201C''\201D''\2018''\2019';
+}

package/src/scss/typography/_typography-headings.scss

@@ -1,44 +1,44 @@
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 0;
-
-  font-weight: 700; // fallback
-  font-weight: 600;
-  font-family: inherit;
-  color: inherit;
-  line-height: 1.25;
-  margin-bottom: $bf-spacing-lg-px;
-  margin-bottom: $bf-spacing-lg-rem;
-
-
-}
-
-h1 {
-  font-size: 36px;
-  font-size: 3.6rem;
-}
-
-h2 {
-  font-size: 30px;
-  font-size: 3rem;
-}
-
-h3 {
-  font-size: 24px;
-  font-size: 2.4rem;
-}
-
-h4 {
-  font-size: 20px;
-  font-size: 2rem;
-}
-
-h5,
-h6 {
-  font-size: 16px;
-  font-size: 1.6rem;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+
+  font-weight: 700; // fallback
+  font-weight: 600;
+  font-family: inherit;
+  color: inherit;
+  line-height: 1.25;
+  margin-bottom: $bf-spacing-lg-px;
+  margin-bottom: $bf-spacing-lg-rem;
+
+
+}
+
+h1 {
+  font-size: 36px;
+  font-size: 3.6rem;
+}
+
+h2 {
+  font-size: 30px;
+  font-size: 3rem;
+}
+
+h3 {
+  font-size: 24px;
+  font-size: 2.4rem;
+}
+
+h4 {
+  font-size: 20px;
+  font-size: 2rem;
+}
+
+h5,
+h6 {
+  font-size: 16px;
+  font-size: 1.6rem;
 }

package/src/scss/typography/_typography-html-body.scss

@@ -1,72 +1,72 @@
-html {
-  text-size-adjust: 100%;
-
-  // resize the base font-size and get an easy math for rem units
-  // https://snook.ca/archives/html_and_css/font-size-with-rem
-  font-size: 62.5%;
-
-  color: #222;
-
-  // set a default font-family and line-height
-  font-family: sans-serif;
-  line-height: 1.15;
-
-  // ! this is not a standard feature, is webkit only
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
-
-  // remove a tap background when a link or interactive element is focused
-  // if is touch
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-body {
-  margin: 0;
-  font-size: $bf-body-font-size-px; // '16px' by default
-  font-size: $bf-body-font-size-rem; // '1.6rem' by default
-  line-height: $bf-body-line-height; // '1.5' by default
-
-  // this is useful to inherit values for some elements (e.g. forms)
-  font-weight: 400;
-  text-align: left;
-
-  // native font stack for optimum text rendering on every device and OS
-  // this stack mimics the system font UI
-  // a web apps looks like a native app (e.g. Android = Roboto font)
-  // Read more:
-  // https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
-  font-family: 
-
-		// Safari for OS X and iOS (San Francisco) -apple-system,
-    // Chrome < 56 for OS X (San Francisco)
-    BlinkMacSystemFont,
-    // Windows
-    'Segoe UI',
-    // Android
-    Roboto,
-    // Linux with KDE
-    Oxygen-Sans,
-    // Ubuntu (all variants)
-    Ubuntu,
-    // Linux with GNOME Shell
-    Cantarell,
-    // macOS 1.10 and below
-    'Helvetica Neue',
-    Helvetica,
-
-    // Basic web fallback
-    Arial,
-    'Noto Sans', sans-serif,
-
-    // emoji fonts
-    'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-
-  // this enable font ligatures
-  text-rendering: optimizeLegibility;
-
-  // break very long texts by default, especially on old browsers
-  // e.g. big <h1> or <h2> headlines
-  word-wrap: break-word;
-
-  background-color: $bf-white;
-}
+html {
+  text-size-adjust: 100%;
+
+  // resize the base font-size and get an easy math for rem units
+  // https://snook.ca/archives/html_and_css/font-size-with-rem
+  font-size: 62.5%;
+
+  color: #222;
+
+  // set a default font-family and line-height
+  font-family: sans-serif;
+  line-height: 1.15;
+
+  // ! this is not a standard feature, is webkit only
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
+
+  // remove a tap background when a link or interactive element is focused
+  // if is touch
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+  margin: 0;
+  font-size: $bf-body-font-size-px; // '16px' by default
+  font-size: $bf-body-font-size-rem; // '1.6rem' by default
+  line-height: $bf-body-line-height; // '1.5' by default
+
+  // this is useful to inherit values for some elements (e.g. forms)
+  font-weight: 400;
+  text-align: left;
+
+  // native font stack for optimum text rendering on every device and OS
+  // this stack mimics the system font UI
+  // a web apps looks like a native app (e.g. Android = Roboto font)
+  // Read more:
+  // https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
+  font-family: 
+
+		// Safari for OS X and iOS (San Francisco) -apple-system,
+    // Chrome < 56 for OS X (San Francisco)
+    BlinkMacSystemFont,
+    // Windows
+    'Segoe UI',
+    // Android
+    Roboto,
+    // Linux with KDE
+    Oxygen-Sans,
+    // Ubuntu (all variants)
+    Ubuntu,
+    // Linux with GNOME Shell
+    Cantarell,
+    // macOS 1.10 and below
+    'Helvetica Neue',
+    Helvetica,
+
+    // Basic web fallback
+    Arial,
+    'Noto Sans', sans-serif,
+
+    // emoji fonts
+    'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
+  // this enable font ligatures
+  text-rendering: optimizeLegibility;
+
+  // break very long texts by default, especially on old browsers
+  // e.g. big <h1> or <h2> headlines
+  word-wrap: break-word;
+
+  background-color: $bf-white;
+}

package/src/scss/typography/_typography-misc.scss

@@ -13,7 +13,6 @@ abbr[data-original-title] {
   cursor: help;
   text-decoration: underline; // 2
   text-decoration: underline dotted; // 2
-  cursor: help; // 2
   border-bottom: 0; // 2
 }
 
@@ -36,6 +35,7 @@ strong {
 }
 
 // Add the correct font weight in Chrome, Edge, and Safari
+/* stylelint-disable-next-line */
 b,
 strong {
   font-weight: bolder;
@@ -55,12 +55,12 @@ sup {
 
 sup {
   top: -8px;
-  top: -.8rem;
+  top: -0.8rem;
 }
 
 sub {
   bottom: -4px;
-  bottom: -.4rem;
+  bottom: -0.4rem;
 }
 
 small {

package/src/scss/typography/_typography-monospaced-elements.scss

@@ -1,56 +1,50 @@
-pre {
-  margin: 0 0 $bf-spacing-xl-px 0;
-  margin: 0 0 $bf-spacing-xl-rem 0;
-}
-
-pre {
-  display: block;
-  overflow: auto;
-  word-break: break-all; // webkit
-  word-wrap: break-word;
-  white-space: pre;
-  hyphens: none;
-
-  // this is a not standard CSS property, so it's for IE only
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style
-  //
-  // Disable auto-hiding scrollbar in legacy Edge
-  // https://github.com/twbs/bootstrap/pull/30685
-  -ms-overflow-style: auto;
-
-  display: block;
-}
-
-pre,
-code,
-kbd,
-samp {
-  font-family: 
-
-  /* macOS 1.10+ */ 'Menlo', /* Windows 6+ */ 'Consolas',
-  /* Android 4+ */ 'Roboto Mono', /* Ubuntu 1.10+ */ 'Ubuntu Monospace',
-  /* KDE Plasma 5+ */ 'Noto Mono', /* KDE Plasma 4+ */ 'Oxygen Mono',
-  /* Linux/OpenOffice fallback */ 'Liberation Mono', 
-  
-  /* fallback */ monospace,
-  /* emoji fonts */ 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-    'Noto Color Emoji';
-
-  // a monospaced text font should looks bigger, so a smaller font-size
-  // is preferred
-  font-size: .875em;
-}
-
-code {
-  word-wrap: break-word;
-}
-
-a > code {
-  color: inherit;
-}
-
-pre code {
-  font-size: inherit;
-  color: inherit;
-  word-break: normal;
-}
+pre {
+  margin: 0 0 $bf-spacing-xl-px 0;
+  margin: 0 0 $bf-spacing-xl-rem 0;
+
+  display: block;
+  overflow: auto;
+  word-break: break-all; // webkit
+  word-wrap: break-word;
+  white-space: pre;
+  hyphens: none;
+
+  // this is a not standard CSS property, so it's for IE only
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style
+  //
+  // Disable auto-hiding scrollbar in legacy Edge
+  // https://github.com/twbs/bootstrap/pull/30685
+  -ms-overflow-style: auto;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: 
+
+  /* macOS 1.10+ */ 'Menlo', /* Windows 6+ */ 'Consolas',
+    /* Android 4+ */ 'Roboto Mono', /* Ubuntu 1.10+ */ 'Ubuntu Monospace',
+    /* KDE Plasma 5+ */ 'Noto Mono', /* KDE Plasma 4+ */ 'Oxygen Mono',
+    /* Linux/OpenOffice fallback */ 'Liberation Mono', /* fallback */ monospace,
+    /* emoji fonts */ 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+
+  // a monospaced text font should looks bigger, so a smaller font-size
+  // is preferred
+  font-size: 0.875em;
+}
+
+code {
+  word-wrap: break-word;
+}
+
+a > code {
+  color: inherit;
+}
+
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}

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

@@ -1,71 +1,71 @@
-.bf-btn {
-  display: inline-block;
-  cursor: pointer;
-  color: $bf-dark;
-  padding: ($bf-spacing-xl-px / 3) (($bf-spacing-xl-px / 3) * 2); // 8px 16px
-  padding: ($bf-spacing-xl-rem / 3) (($bf-spacing-xl-rem / 3) * 2);
-  line-height: normal;
-  text-align: center;
-  margin: 0;
-  background-clip: padding-box;
-  vertical-align: baseline;
-  overflow: visible;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  user-select: none;
-
-  // ! IE9+
-  // https://caniuse.com/#feat=border-radius
-  border-radius: $bf-spacing-sm-px;
-  border-radius: $bf-spacing-sm-rem;
-
-  border: 0;
-  background-image: none; // FF mobile
-  background: $bf-gray-light;
-  transition: all .2s;
-
-  &:hover,
-  &:active,
-  &:focus {
-    text-decoration: none;
-    color: $bf-dark;
-    background: darken($bf-gray-light, 10%);
-  }
-
-  &:active,
-  &:focus {
-    box-shadow: 0 0 0 3px rgba(0, 0, 0, .15);
-  }
-
-  &:focus {
-    outline: 0;
-  }
-
-  &.bf-btn--primary {
-    color: $bf-white;
-    background: $bf-blue;
-
-    &:hover,
-    &:active,
-    &:focus {
-      color: $bf-white;
-      background: darken($bf-blue, 10%);
-    }
-
-    &:active,
-    &:focus {
-      box-shadow: 0 0 0 3px rgba(0, 86, 179, .25);
-    }
-  }
-}
-
-fieldset[disabled] .bf-btn,
-.bf-btn[disabled],
-.bf-btn:disabled,
-.bf-btn[aria-disabled='true'] {
-  cursor: default !important; // fallback
-  cursor: not-allowed !important;
-  pointer-events: none !important;
-  user-select: none !important;
-  box-shadow: none !important;
-  opacity: .5 !important;
-}
+.bf-btn {
+  display: inline-block;
+  cursor: pointer;
+  color: $bf-dark;
+  padding: calc($bf-spacing-xl-px / 3) (calc($bf-spacing-xl-px / 3) * 2); // 8px 16px
+  padding: calc($bf-spacing-xl-rem / 3) (calc($bf-spacing-xl-rem / 3) * 2);
+  line-height: normal;
+  text-align: center;
+  margin: 0;
+  background-clip: padding-box;
+  vertical-align: baseline;
+  overflow: visible;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  user-select: none;
+
+  // ! IE9+
+  // https://caniuse.com/#feat=border-radius
+  border-radius: $bf-spacing-sm-px;
+  border-radius: $bf-spacing-sm-rem;
+
+  border: 0;
+  background-image: none; // FF mobile
+  background-color: $bf-gray-light;
+  transition: all 0.2s;
+
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: none;
+    color: $bf-dark;
+    background: darken($bf-gray-light, 10%);
+  }
+
+  &:active,
+  &:focus {
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  &.bf-btn--primary {
+    color: $bf-white;
+    background: $bf-blue;
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: $bf-white;
+      background: darken($bf-blue, 10%);
+    }
+
+    &:active,
+    &:focus {
+      box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.25);
+    }
+  }
+}
+
+fieldset[disabled] .bf-btn,
+.bf-btn[disabled],
+.bf-btn:disabled,
+.bf-btn[aria-disabled='true'] {
+  cursor: default !important; // fallback
+  cursor: not-allowed !important;
+  pointer-events: none !important;
+  user-select: none !important;
+  box-shadow: none !important;
+  opacity: 0.5 !important;
+}