@foeewni/web-core 2.5.3 → 2.7.0

package/src/components/form/inputs.scss

@@ -149,6 +149,12 @@ input {
 
     &:not(.form-control-sm):not(.form-control-lg) {
       @extend .form-control;
+
+      &:focus,
+      &.focus {
+        outline: $foe-element-default-outline;
+        outline-offset: $foe-element-default-outline-offset;
+      }
     }
   }
 }
@@ -158,6 +164,12 @@ select {
 
   &:not(.form-control-sm):not(.form-control-lg) {
     @extend .form-control;
+
+    &:focus,
+    &.focus {
+      outline: $foe-element-default-outline;
+      outline-offset: $foe-element-default-outline-offset;
+    }
   }
 }
 
@@ -165,6 +177,12 @@ textarea {
   @extend .form-control;
 
   margin-bottom: $spacer;
+
+  &:focus,
+  &.focus {
+    outline: $foe-element-default-outline;
+    outline-offset: $foe-element-default-outline-offset;
+  }
 }
 
 %checkradio-label {
@@ -254,10 +272,21 @@ textarea {
 // Stylelint goes nuts on + selectors like this
 /* stylelint-disable no-descending-specificity */
 input[type=checkbox] {
-  display: none;
+  // display: none; //this wasn't accessible by tabbing so changing for the below
+  // using advice from https://stackoverflow.com/questions/51207650/how-to-use-keyboard-tab-on-hidden-radio-buttons
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
 
   + label {
     @extend %checkradio-label;
+
+    &:focus,
+    &.focus {
+      outline: $foe-element-default-outline;
+      outline-offset: $foe-element-default-outline-offset;
+      box-shadow: 0 0 0 $foe-element-default-focus-width $foe-element-default-focus-color;
+    }
   }
 
   + label::before {
@@ -279,10 +308,18 @@ input[type=checkbox] {
   &:checked:disabled + label::before {
     @extend %checkradio-picker-checked-disabled;
   }
+
+  &:focus + label {
+    outline: $foe-element-default-outline;
+    outline-offset: $foe-element-default-outline-offset;
+    box-shadow: 0 0 0 $foe-element-default-focus-width $foe-element-default-focus-color;
+  }
 }
 
 input[type=radio] {
-  display: none;
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
 
   + label {
     @extend %checkradio-label;
@@ -307,6 +344,12 @@ input[type=radio] {
   &:checked:disabled + label::before {
     @extend %checkradio-picker-checked-disabled;
   }
+
+  &:focus + label {
+    outline: $foe-element-default-outline;
+    outline-offset: $foe-element-default-outline-offset;
+    box-shadow: 0 0 0 $foe-element-default-focus-width $foe-element-default-focus-color;
+  }
 }
 /* stylelint-enable no-descending-specificity */
 

package/src/components/navigation/_nav-items.scss

@@ -45,7 +45,9 @@
 
         &:focus {
           background-color: transparent;
-          outline: 0 none transparent;
+          box-shadow: 0 0 0 $foe-element-default-focus-width $foe-element-default-focus-color;
+          outline: $foe-element-default-outline;
+          outline-offset: $foe-element-default-outline-offset;
         }
 
         &:hover {

package/src/components/typography/blockquotes.scss

@@ -79,6 +79,7 @@ blockquote {
     font-size: 1rem;
     line-height: 1.3rem;
     font-weight: 400;
+    font-style: italic;
     color: $gray-500;
     display: block;
     text-align: right;

package/src/fonts.js

@@ -32,6 +32,7 @@ To use them on your CSS please import the webfonts through Google Fonts
 // Note, single line deep imports are needed here, for some reason fontawesome messes up
 // with normal imports and webpack ends up bundling the whole library (1.25mb!)
 import { library, dom } from '@fortawesome/fontawesome-svg-core';
+
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons/faEnvelope';
 import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
@@ -40,19 +41,6 @@ import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons/faExt
 import { faArrowAltCircleUp } from '@fortawesome/free-solid-svg-icons/faArrowAltCircleUp';
 import { faShare } from '@fortawesome/free-solid-svg-icons/faShare';
 import { faLink } from '@fortawesome/free-solid-svg-icons/faLink';
-import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter';
-import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook';
-import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF';
-import { faPinterest } from '@fortawesome/free-brands-svg-icons/faPinterest';
-import { faLinkedin } from '@fortawesome/free-brands-svg-icons/faLinkedin';
-import { faInstagram } from '@fortawesome/free-brands-svg-icons/faInstagram';
-import { faYoutube } from '@fortawesome/free-brands-svg-icons/faYoutube';
-import { faTumblr } from '@fortawesome/free-brands-svg-icons/faTumblr';
-import { faWhatsapp } from '@fortawesome/free-brands-svg-icons/faWhatsapp';
-import { faFacebookMessenger } from '@fortawesome/free-brands-svg-icons/faFacebookMessenger';
-import { faTelegram } from '@fortawesome/free-brands-svg-icons/faTelegram';
-import { faTelegramPlane } from '@fortawesome/free-brands-svg-icons/faTelegramPlane';
-import { faTiktok } from '@fortawesome/free-brands-svg-icons/faTiktok';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp';
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
@@ -76,6 +64,23 @@ import { faSave } from '@fortawesome/free-solid-svg-icons/faSave';
 import { faSignInAlt } from '@fortawesome/free-solid-svg-icons/faSignInAlt';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
 
+import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter';
+import { faXTwitter } from '@fortawesome/free-brands-svg-icons/faXTwitter';
+import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook';
+import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF';
+import { faPinterest } from '@fortawesome/free-brands-svg-icons/faPinterest';
+import { faLinkedin } from '@fortawesome/free-brands-svg-icons/faLinkedin';
+import { faInstagram } from '@fortawesome/free-brands-svg-icons/faInstagram';
+import { faYoutube } from '@fortawesome/free-brands-svg-icons/faYoutube';
+import { faTumblr } from '@fortawesome/free-brands-svg-icons/faTumblr';
+import { faWhatsapp } from '@fortawesome/free-brands-svg-icons/faWhatsapp';
+import { faFacebookMessenger } from '@fortawesome/free-brands-svg-icons/faFacebookMessenger';
+import { faTelegram } from '@fortawesome/free-brands-svg-icons/faTelegram';
+import { faTelegramPlane } from '@fortawesome/free-brands-svg-icons/faTelegramPlane';
+import { faTiktok } from '@fortawesome/free-brands-svg-icons/faTiktok';
+import { faBluesky } from '@fortawesome/free-brands-svg-icons/faBluesky';
+import { faThreads } from '@fortawesome/free-brands-svg-icons/faThreads';
+
 
 // Add actually used FA icons
 library.add(
@@ -88,6 +93,7 @@ library.add(
   faShare,
   faLink,
   faTwitter,
+  faXTwitter,
   faFacebook,
   faFacebookF,
   faPinterest,
@@ -121,7 +127,9 @@ library.add(
   faSave,
   faTrashAlt,
   faCloudUploadAlt,
-  faSignInAlt
+  faSignInAlt,
+  faBluesky,
+  faThreads
 );
 
 // Look for Google fonts and append them if they are not there already

package/src/utils/scss/helpers/_variables.scss

@@ -407,6 +407,12 @@ $transition-base:             all .2s ease-in-out;
 $transition-fade:             opacity .15s linear;
 $transition-collapse:         height .35s ease;
 
+$foe-element-default-focus-width: .125rem;
+$foe-element-default-focus-color: $black;
+
+$foe-element-default-outline: .125rem solid $white;
+$foe-element-default-outline-offset: .125rem;
+
 
 // Fonts
 //
@@ -527,9 +533,9 @@ $input-btn-padding-y:         .5rem;
 $input-btn-padding-x:         .75rem;
 $input-btn-line-height:       $line-height-base;
 
-$input-btn-focus-width:       .2rem;
-$input-btn-focus-color:       rgba($component-active-bg, .75);
-$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color;
+$input-btn-focus-width:       $foe-element-default-focus-width;
+$input-btn-focus-color:       $foe-element-default-focus-color;
+$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !important; //to override bootstrap default in button-variant mixin
 
 $input-btn-padding-y-sm:      .25rem;
 $input-btn-padding-x-sm:      .5rem;