bullframe.css 3.8.1 → 4.0.1

package/src/scss/forms/_forms-styling.scss

@@ -1,121 +1,119 @@
-[type='email'],
-[type='number'],
-[type='password'],
-[type='tel'],
-[type='search'],
-[type='text'],
-[type='date'],
-[type='datetime-local'],
-[type='month'],
-[type='time'],
-[type='week'],
-[type='time'],
-[type='url'],
-input[list],
-select,
-textarea {
-  background-color: $bf-white;
-  border: 1px solid $bf-gray;
-  padding: $bf-spacing-md-px ($bf-spacing-lg-px * .75);
-  padding: $bf-spacing-md-rem ($bf-spacing-lg-rem * .75);
-}
-
-// Old browsers and Opera Mini don't fully support all type of inputs
-// e.g. [type="range"]
-// so, let's try to add styles carefully and selective
-[type='email'],
-[type='number'],
-[type='password'],
-[type='tel'],
-[type='search'],
-[type='text'],
-[type='date'],
-[type='datetime-local'],
-[type='month'],
-[type='time'],
-[type='week'],
-[type='time'],
-[type='url'],
-input[list],
-select,
-textarea,
-[type='radio'],
-[type='checkbox'] {
-  &:active,
-  &:focus {
-    transition: border .2s, background-color .2s, box-shadow .2s;
-    border-color: $bf-blue;
-    box-shadow: 0 0 0 3px rgba(0, 86, 179, .25);
-  }
-}
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  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);
-  background: $bf-gray-light;
-  transition: color .2s, background .2s, box-shadow .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);
-  }
-}
-
-// disabled groups
-fieldset[disabled] button,
-fieldset[disabled] input,
-fieldset[disabled] input:after,
-fieldset[disabled] input:before,
-fieldset[disabled] input:checked,
-fieldset[disabled] select,
-fieldset[disabled] textarea,
-fieldset[disabled] label,
-
-// disabled singles
-button[disabled],
-input[disabled],
-input[disabled]:after,
-input[disabled]:before,
-input[disabled]:checked,
-select[disabled],
-textarea[disabled],
-label[disabled],
-
-// pseudo class
-button:disabled,
-input:disabled,
-input:disabled:after,
-input:disabled:before,
-input:disabled:checked,
-select:disabled,
-textarea:disabled,
-label:disabled,
-
-// aria 
-button[aria-disabled="true"],
-input[aria-disabled="true"],
-input[aria-disabled="true"]:after,
-input[aria-disabled="true"]:before,
-input[aria-disabled="true"]:checked,
-select[aria-disabled="true"],
-textarea[aria-disabled="true"],
-label[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;
-}
+[type='email'],
+[type='number'],
+[type='password'],
+[type='tel'],
+[type='search'],
+[type='text'],
+[type='date'],
+[type='datetime-local'],
+[type='month'],
+[type='week'],
+[type='time'],
+[type='url'],
+input[list],
+select,
+textarea {
+  background-color: $bf-white;
+  border: 1px solid $bf-gray;
+  padding: $bf-spacing-md-px ($bf-spacing-lg-px * 0.75);
+  padding: $bf-spacing-md-rem ($bf-spacing-lg-rem * 0.75);
+}
+
+// Old browsers and Opera Mini don't fully support all type of inputs
+// e.g. [type="range"]
+// so, let's try to add styles carefully and selective
+[type='email'],
+[type='number'],
+[type='password'],
+[type='tel'],
+[type='search'],
+[type='text'],
+[type='date'],
+[type='datetime-local'],
+[type='month'],
+[type='week'],
+[type='time'],
+[type='url'],
+input[list],
+select,
+textarea,
+[type='radio'],
+[type='checkbox'] {
+  &:active,
+  &:focus {
+    transition: border 0.2s, background-color 0.2s, box-shadow 0.2s;
+    border-color: $bf-blue;
+    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.25);
+  }
+}
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  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);
+  background: $bf-gray-light;
+  transition: color 0.2s, background 0.2s, box-shadow 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);
+  }
+}
+
+// disabled groups
+fieldset[disabled] button,
+fieldset[disabled] input,
+fieldset[disabled] input:after,
+fieldset[disabled] input:before,
+fieldset[disabled] input:checked,
+fieldset[disabled] select,
+fieldset[disabled] textarea,
+fieldset[disabled] label,
+
+// disabled singles
+button[disabled],
+input[disabled],
+input[disabled]:after,
+input[disabled]:before,
+input[disabled]:checked,
+select[disabled],
+textarea[disabled],
+label[disabled],
+
+// pseudo class
+button:disabled,
+input:disabled,
+input:disabled:after,
+input:disabled:before,
+input:disabled:checked,
+select:disabled,
+textarea:disabled,
+label:disabled,
+
+// aria 
+button[aria-disabled="true"],
+input[aria-disabled="true"],
+input[aria-disabled="true"]:after,
+input[aria-disabled="true"]:before,
+input[aria-disabled="true"]:checked,
+select[aria-disabled="true"],
+textarea[aria-disabled="true"],
+label[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;
+}

package/src/scss/miscellaneous/_misc-focus.scss

@@ -85,7 +85,6 @@ button,
 [type='month'],
 [type='time'],
 [type='week'],
-[type='time'],
 [type='url'],
 [type='radio'],
 [type='checkbox'],

package/src/scss/miscellaneous/_misc-layout.scss

@@ -1,6 +1,3 @@
-// known issues in IE8 and IE9 with box-sizing
-// https://css-tricks.com/box-sizing/#article-header-id-5
-
 *,
 *::before,
 *::after {
@@ -27,27 +24,7 @@ template {
   display: none;
 }
 
-// Remove the tapping delay in IE 10
-a,
-area,
-button,
-input,
-label,
-select,
-summary,
-textarea,
-[tabindex] {
-  -ms-touch-action: manipulation;
-}
-
-// Always hide an element with the `hidden` HTML attribute (from PureCSS).
-// Needed for proper display in IE 10-. */
+// Always hide an element with the `hidden` HTML attribute
 [hidden] {
   display: none !important;
 }
-
-// Fix IE 10 on Windows Phone 8 Viewport only
-// https://getbootstrap.com/docs/3.3/getting-started/#support-ie10-width
-@-ms-viewport {
-  width: device-width;
-}

package/src/scss/mixins/_mixin-grid-flex.scss

@@ -1,83 +1,83 @@
-// This is IE10+ 
-// https://caniuse.com/flexbox
-
-@mixin flex-container {
-  display: flex !important;
-  flex-wrap: wrap !important;
-}
-
-@mixin flex-100 {
-  flex: 0 0 100% !important;
-}
-
-@mixin flex-80 {
-  flex: 0 0 80% !important;
-}
-
-@mixin flex-75 {
-  flex: 0 0 75% !important;
-}
-
-@mixin flex-70 {
-  flex: 0 0 70% !important;
-}
-
-@mixin flex-66 {
-  flex: 0 0 66.6666% !important;
-}
-
-@mixin flex-65 {
-  flex: 0 0 65% !important;
-}
-
-@mixin flex-60 {
-  flex: 0 0 60% !important;
-}
-
-@mixin flex-55 {
-  flex: 0 0 55% !important;
-}
-
-@mixin flex-50 {
-  flex: 0 0 50% !important;
-}
-
-@mixin flex-45 {
-  flex: 0 0 45% !important;
-}
-
-@mixin flex-40 {
-  flex: 0 0 40% !important;
-}
-
-@mixin flex-33 {
-  flex: 0 0 33.3333% !important;
-}
-
-@mixin flex-30 {
-  flex: 0 0 30% !important;
-}
-
-@mixin flex-25 {
-  flex: 0 0 25% !important;
-}
-
-@mixin flex-20 {
-  flex: 0 0 20% !important;
-}
-
-@mixin flex-17 {
-  flex: 0 0 17% !important;
-}
-
-@mixin flex-16 {
-  flex: 0 0 16.6666% !important;
-}
-
-@mixin flex-15 {
-  flex: 0 0 15% !important;
-}
-
-@mixin flex-11 {
-  flex: 0 0 11% !important;
-}
+// This is IE10+ 
+// https://caniuse.com/flexbox
+
+@mixin flex-container {
+  display: flex !important;
+  flex-wrap: wrap !important;
+}
+
+@mixin flex-100 {
+  flex: 0 0 100% !important;
+}
+
+@mixin flex-80 {
+  flex: 0 0 80% !important;
+}
+
+@mixin flex-75 {
+  flex: 0 0 75% !important;
+}
+
+@mixin flex-70 {
+  flex: 0 0 70% !important;
+}
+
+@mixin flex-66 {
+  flex: 0 0 66.6666% !important;
+}
+
+@mixin flex-65 {
+  flex: 0 0 65% !important;
+}
+
+@mixin flex-60 {
+  flex: 0 0 60% !important;
+}
+
+@mixin flex-55 {
+  flex: 0 0 55% !important;
+}
+
+@mixin flex-50 {
+  flex: 0 0 50% !important;
+}
+
+@mixin flex-45 {
+  flex: 0 0 45% !important;
+}
+
+@mixin flex-40 {
+  flex: 0 0 40% !important;
+}
+
+@mixin flex-33 {
+  flex: 0 0 33.3333% !important;
+}
+
+@mixin flex-30 {
+  flex: 0 0 30% !important;
+}
+
+@mixin flex-25 {
+  flex: 0 0 25% !important;
+}
+
+@mixin flex-20 {
+  flex: 0 0 20% !important;
+}
+
+@mixin flex-17 {
+  flex: 0 0 17% !important;
+}
+
+@mixin flex-16 {
+  flex: 0 0 16.6666% !important;
+}
+
+@mixin flex-15 {
+  flex: 0 0 15% !important;
+}
+
+@mixin flex-11 {
+  flex: 0 0 11% !important;
+}

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

@@ -1,42 +1,42 @@
-@mixin bf-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-@mixin bf-sr-only {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-}
-
-@mixin bf-sr-only-focusable {
-  &:active,
-  &:focus {
-    @include bf-sr-only();
-    clip: auto !important;
-    height: auto !important;
-    margin: 0 !important;
-    overflow: visible !important;
-    position: static !important;
-    white-space: inherit !important;
-    width: auto !important;
-  }
-}
-
-@mixin bf-clearfix {
-  &::before,
-  &::after {
-    content: ' ';
-    display: table !important;
-  }
-
-  &::after {
-    clear: both !important;
-  }
-}
+@mixin bf-hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+@mixin bf-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+@mixin bf-sr-only-focusable {
+  &:active,
+  &:focus {
+    @include bf-sr-only();
+    clip: auto !important;
+    height: auto !important;
+    margin: 0 !important;
+    overflow: visible !important;
+    position: static !important;
+    white-space: inherit !important;
+    width: auto !important;
+  }
+}
+
+@mixin bf-clearfix {
+  &::before,
+  &::after {
+    content: ' ';
+    display: table !important;
+  }
+
+  &::after {
+    clear: both !important;
+  }
+}

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';
+}