@foeewni/web-core 2.2.4 → 2.2.7

package/src/components/form/buttons.scss

@@ -9,33 +9,34 @@ Form `type=submit`s, `button`s are by default uncolorized, please use one of the
 
 ```html_example
 <div class="row">
-  <div class="col-md-4">
+  <div class="col-md-6">
     <h4>Primary palette</h4>
     <button class="btn btn-primary btn-block">.btn-primary</button>
     <button class="btn btn-secondary btn-block">.btn-secondary</button>
     <button class="btn btn-offwhite btn-block">.btn-offwhite</button>
     <button class="btn btn-dark btn-block">.btn-dark</button>
     <button class="btn btn-extradark btn-block">.btn-extradark</button>
+    <button class="btn btn-sunset btn-block">.btn-sunset</button>
+    <button class="btn btn-accent btn-block">.btn-accent</button>
+    <button class="btn btn-join btn-block">.btn-join</button>
+    <button class="btn btn-donate btn-block">.btn-donate</button>
     <a href="#" class="btn btn-primary btn-block">Link as button</a>
   </div>
 
-  <div class="col-md-4">
+  <div class="col-md-6">
     <h4>Outlined</h4>
     <button class="btn btn-outline-primary btn-block">.btn-outline-primary</button>
     <button class="btn btn-outline-secondary btn-block">.btn-outline-secondary</button>
     <button class="btn btn-outline-offwhite btn-block">.btn-outline-offwhite</button>
     <button class="btn btn-outline-dark btn-block">.btn-outline-dark</button>
     <button class="btn btn-outline-extradark btn-block">.btn-outline-extradark</button>
+    <button class="btn btn-outline-sunset btn-block">.btn-outline-sunset</button>
+    <button class="btn btn-outline-accent btn-block">.btn-outline-accent</button>
+    <button class="btn btn-outline-join btn-block">.btn-outline-join</button>
+    <button class="btn btn-outline-donate btn-block">.btn-outline-donate</button>
     <a href="#" class="btn btn-outline-primary btn-block">Link as button</a>
   </div>
 
-  <div class="col-md-4">
-    <h4>Secondary palette</h4>
-    <button class="btn btn-accent btn-block">.btn-accent</button>
-    <button class="btn btn-join btn-block">.btn-join</button>
-    <button class="btn btn-donate btn-block">.btn-donate</button>
-  </div>
-
 </div>
 
 ```
@@ -52,9 +53,6 @@ input[type=button],
 button {
   &:not(.btn) {
     @extend .btn;
-
-    text-transform: uppercase;
-    font-weight: bold;
   }
 }
 
@@ -62,17 +60,9 @@ input[type=reset] {
   &:not(.btn) {
     @extend .btn;
     @extend .btn-danger;
-
-    text-transform: uppercase;
-    font-weight: bold;
   }
 }
 
-.btn:not(.btn-sm) {
-  text-transform: uppercase;
-  font-weight: bold;
-}
-
 @include media-breakpoint-down(sm) {
   .btn {
     font-size: .8rem;

package/src/components/form/inputs.scss

@@ -180,10 +180,10 @@ textarea {
   background-color: transparent;
   background-position: center;
   background-repeat: no-repeat;
-  border: 1px solid $foe-accent;
+  border: 2px solid $foe-accent;
   display: inline-block;
-  width: 1.45em;
-  height: 1.45em;
+  width: 1.5em;
+  height: 1.5em;
   padding: .5em;
   margin-right: $spacer/2;
   vertical-align: bottom;

package/src/components/tools/data-scroll-to.js

@@ -15,6 +15,7 @@ Usage:
 
 */
 
+import screenService from '../../utils/js/screen.service';
 
 // Enables smooth scrolling between anchors
 (($) => {
@@ -55,11 +56,17 @@ Usage:
     $target = $target.length ? $target : $(`[name="${hash.substr(1)}"]`);
 
     if ($target.length) {
-      // Calculate headers
-      const headerHeight = ($('.foe-header').length) ? $('.foe-header').height() : 0;
-      const navHeight = ($('.foe-secondary-nav').length) ? $('.foe-secondary-nav').height() : 0;
-      const paddingFromTop = 20;
-      let finalScrollPosition = ($target.offset().top - (headerHeight + navHeight) - paddingFromTop);
+      // Header when scrolled is always compressed, unless if the page is at the very start
+      // if we grab the height at the start of the document, it will be bigger than what
+      // it will be when the header is compressed.
+
+      // Grab the value from our scss variables
+      const headerHeight = screenService.getHeaderHeight();
+
+      // See if the target specifies a scroll padding, useful for elements without an internal padding
+      const extraPadding = parseInt($target.attr('data-scroll-to-padding') || 20, 10);
+
+      let finalScrollPosition = ($target.offset().top - (headerHeight + extraPadding));
 
       // Compensate admin bars if user is logged in
       if ($('body').hasClass('user-logged-in')) {

package/src/fonts.js

@@ -20,7 +20,7 @@ Our type system is comprised of two fonts:
 To use them on your CSS please import the webfonts through Google Fonts
 
 ```
-<link id="fonts" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=Libre+Franklin:ital,wght@0,400;0,700;1,400;1,700&display=swap" />
+<link id="fonts" rel="stylesheet" crossorigin="anonymous" href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=Libre+Franklin:ital,wght@0,400;0,700;1,400;1,700&display=swap" />
 ```
 
 @TODO: Document Fontawesome
@@ -130,6 +130,7 @@ const fonts = window.document.createElement('link');
 // eslint-disable-next-line max-len
 const href = 'https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=Libre+Franklin:ital,wght@0,400;0,700;1,400;1,700&display=swap';
 fonts.setAttribute('rel', 'stylesheet');
+fonts.setAttribute('crossorigin', 'anonymous');
 fonts.setAttribute('href', href);
 document.head.appendChild(fonts);
 

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

@@ -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

@@ -13,6 +13,7 @@ $foe-light:           #7ae1bd !default;
 $foe-secondary:         $foe-light !default;
 $foe-dark:            #3b867f !default;
 $foe-extradark:       #232f4a !default;
+$foe-sunset:          #ea5c5c !default;
 
 $foe-white:           #f3f3f7 !default;
 $foe-gray:            #b1b8c0 !default;
@@ -200,6 +201,7 @@ $theme-colors: map-merge(
     "accent":     $foe-accent,
     "dark":       $foe-dark,
     "extradark":  $foe-extradark,
+    "sunset":     $foe-sunset,
     "donate":     $foe-donate,
     "join":       $foe-join,
     "offwhite":   $foe-offwhite,
@@ -388,9 +390,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);
@@ -423,7 +425,8 @@ $font-size-sm:                ($font-size-base * .7);
 
 $font-weight-light:           300;
 $font-weight-normal:          400;
-$font-weight-bold:            700;
+$font-weight-bold:            600;
+$font-weight-heavy:           700;
 
 $font-weight-base:            $font-weight-normal;
 $line-height-base:            1.5;
@@ -525,7 +528,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;
@@ -557,7 +560,7 @@ $btn-line-height-lg:          $input-btn-line-height-lg;
 
 $btn-border-width:            $input-btn-border-width;
 
-$btn-font-weight:             $font-weight-normal;
+$btn-font-weight:             $font-weight-bold;
 $btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
 $btn-focus-width:             $input-btn-focus-width;
 $btn-focus-box-shadow:        $input-btn-focus-box-shadow;
@@ -1141,6 +1144,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;