@foeewni/web-core 2.2.3 → 2.2.6

package/src/utils/js/screen.service.js

@@ -13,7 +13,7 @@ export default {
   },
 
   getHalfScrollTop: function getHalfScrollTop() {
-    return exports.default.getScrollTop() + (window.innerHeight / 2);
+    return this.getScrollTop() + (window.innerHeight / 2);
   },
 
   getDocumentHeight: function getDocumentHeight() {
@@ -24,14 +24,14 @@ export default {
   },
 
   getScrollFromScreens: function getScrollFromScreens(screens) {
-    const height = exports.default.getViewportHeight();
+    const height = this.getViewportHeight();
 
     return height * screens;
   },
 
 
   getScrollFromPerc: function getScrollFromPerc(perc) {
-    const height = exports.default.getDocumentHeight();
+    const height = this.getDocumentHeight();
 
     return height / 100 * perc;
   },
@@ -45,8 +45,8 @@ export default {
     const { top } = $(el).offset();
     const height = el.clientHeight;
     const bottom = top + height;
-    const scroll = exports.default.getScrollTop();
-    const viewHeight = exports.default.getViewportHeight();
+    const scroll = this.getScrollTop();
+    const viewHeight = this.getViewportHeight();
     return !(bottom < scroll || top - viewHeight >= scroll);
   },
 
@@ -69,4 +69,14 @@ export default {
 
     return breakpoints[breakpointIndex].size;
   },
+
+  getHeaderHeight: function getHeaderHeight() {
+    const $ = window.jQuery;
+    const breakpoint = this.getCurrentBreakpoint();
+
+    if ($('.foe-header').length) {
+      return parseInt(scss[`foe-header-height-${breakpoint}`], 10);
+    }
+    return 0;
+  },
 };

package/src/utils/scss/exporter.scss

@@ -13,4 +13,8 @@
   @each $screen, $size in $container-max-widths {
     container-#{$screen}: $size;
   }
+
+  @each $screen, $size in $foe-header-heights {
+    foe-header-height-#{$screen}: $size;
+  }
 }

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

@@ -388,9 +388,9 @@ $line-height-sm:              1.5;
 $border-width:                1px;
 $border-color:                $gray-300;
 
-$border-radius:               .1rem;
-$border-radius-lg:            .1rem;
-$border-radius-sm:            .1rem;
+$border-radius:               .1rem * 3;
+$border-radius-lg:            .1rem * 4;
+$border-radius-sm:            .1rem * 2;
 
 $box-shadow-sm:               0 .125rem .25rem rgba($black, .075);
 $box-shadow:                  0 .5rem 1rem rgba($black, .15);
@@ -525,7 +525,7 @@ $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, .25);
+$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-padding-y-sm:      .25rem;
@@ -1141,6 +1141,18 @@ $foe-nav-logo-height-medium: $foe-nav-height-medium*3/5;
 $foe-nav-logo-height-large:  $foe-nav-height-large*3/5;
 $foe-nav-logo-height-large-scrolled: $foe-nav-height-large-scrolled*3/5; // Hence can be the same size of navbar when scrolled
 
+// Manually add in all header variants based on bootstrap-named breakpoints.
+// Likely prone to change in the Bootstrap 5+ refactor.
+
+// @TODO / @REFACTOR / @BS5
+$foe-header-heights: (
+  xs: $foe-nav-height-small,
+  sm: $foe-nav-height-small,
+  md: $foe-nav-height-medium,
+  lg: $foe-nav-height-large-scrolled,
+  xl: $foe-nav-height-large-scrolled,
+  xxl: $foe-nav-height-large-scrolled
+);
 
 // CTA button
 $foe-nav-cta-height-small: 35px;