Merge pull request #834 from paulcpederson/bugs-fix

Final round of fixes for v1.0.0-beta.7

CHANGELOG.md

@@ -9,6 +9,11 @@
 - card captions should use the `<figcaption>` element (#827)
 - update instagram icon (#812)
 - `input-minimal` now has a transparent background (#804)
+- content shouldn't scroll behind modal when open (#766)
+- revert to using fonts.com service (#819)
+- fix inputs in dark theme (#829)
+- fix multiline tooltips in Edge (#773)
+- fix focus state of checkboxes in firefox (#802)
 
 ### Breaking
 - :warning: No longer support IE9 (this impacts only block groups, radio inputs, selects, drawers, and the loader)

docs/source/assets/css/all.scss

@@ -19,24 +19,11 @@ $include-calcite-icons: false;
   background: url('../img/docs/banner.svg') no-repeat center center $off-white;
 }
 
-.text-gradient {
-  background-size: 100% 100%;
-  background-image: linear-gradient(110deg, #005e95 10%, #9bc19c 90%);
-  -webkit-text-fill-color: transparent;
-  -webkit-background-clip: text;
-  -moz-background-clip: text;
-  background-clip: text;
-}
-
 .huge-text {
-  font-size: 5vw;
+  font-size: calc(4vw + 16px);
   line-height: 1.25;
 }
 
-.site-search {
-  margin-top: .25rem;
-}
-
 // Sub-Nav test Classes
 .sub-nav {
   background-color: $darker-blue;

docs/source/documentation/grid/_scroll-show-and-hide.md

@@ -1 +1 @@
-Some layouts call for elements to appear or disappear as the user scrolls down the page. An element with the `scroll-show` class will appear when it reaches a point specified by the `data-top=x` attribute, appearing when it comes within the given value of the top of the screen.
+Some layouts call for elements to appear or disappear as the user scrolls down the page. An element with the `scroll-show` class will appear when it reaches a point specified by the `data-top=x` attribute, appearing when it comes within the given value of the top of the screen.

docs/source/documentation/grid/_scroll-sticky.md

@@ -1 +1,9 @@
 Elements that become position fixed as they reach a certain position in the viewport are refered to as 'sticky'. The `js-sticky` class takes an `data-top=x` attribute that defines the point from the top of the window the sticky element will stick.
+
+For example, the following `<div>` will become fixed when it is 46 pixels from the top of the viewport:
+
+```
+<div class="js-sticky" data-top="46">
+  <a href="#" class="btn btn-clear">Back to Top</a>
+</div>
+```

docs/source/documentation/javascript/_overview.md

@@ -6,4 +6,6 @@ Currently, the following components and patterns rely on `calcite-web.js`:
 - [Modals](../patterns/#modals)
 - [Tabs](../patterns/#tabs)
 - [Accordions](../patterns/#accordions)
-- [Drawers](../patterns/#drawers)
+- [Drawers](../patterns/#drawers)
+
+The JavaScript library also includes helpers for "sticky" positioning and scroll events. You can read more about these in the [interactive layout helpers](../grid/#interactive-layout-helpers) section of the documentation.

docs/source/index.html

@@ -7,7 +7,7 @@
   <header class="bg-banner" role="banner">
     <div class="grid-container">
       <div class="column-24 padding-leader-4 padding-trailer-4">
-        <h1 class="text-center text-gradient huge-text avenir-light">Calcite Web</h1>
+        <h1 class="text-center text-blue huge-text avenir-light">Calcite Web</h1>
         <p class="text-center text-darker-gray font-size-2">A Responsive HTML, CSS, and JS Framework for Esri</p>
       </div>
     </div>

lib/js/helpers/classy.js

@@ -14,7 +14,8 @@ export function has (domNode, className) {
 export function add (domNode, classes) {
   classes.split(' ').forEach(function (c) {
     if (!has(domNode, c)) {
-      domNode.setAttribute('class', domNode.getAttribute('class') + ' ' + c);
+      var existingClass = domNode.getAttribute('class') || '';
+      domNode.setAttribute('class', existingClass + ' ' + c);
     }
   });
 }

lib/js/patterns/modal.js

@@ -17,6 +17,7 @@ import bus from '../helpers/bus';
 
 function modal () {
   // Cool nodes
+  var html = document.documentElement;
   var wrapper = document.querySelector('.wrapper');
   var footer = document.querySelector('.footer');
   var toggles = dom.findElements('.js-modal-toggle');
@@ -46,11 +47,15 @@ function modal () {
     modal.removeAttribute('tabindex');
     event.add(document, 'focusin', fenceModal);
     classy.add(modal, 'is-active');
+    classy.add(html, 'drawer-no-overflow');
     aria.hide(dependentNodes());
     modal.focus();
   }
 
   function closeModal (modalId) {
+    if (classy.has(html, 'drawer-no-overflow')) {
+      classy.remove(html, 'drawer-no-overflow');
+    }
     if (!modalId) return classy.removeActive(modals);
     var modal = document.querySelector(`.js-modal[data-modal="${modalId}"]`);
     classy.remove(modal, 'is-active');

lib/sass/calcite-web/components/_form.scss

@@ -189,7 +189,7 @@
 
   ::-ms-value {
     border: none;
-    background-color: white;
+    background-color: transparent;
   }
 
   ::-ms-browse {
@@ -220,7 +220,8 @@
     &:focus {
       box-shadow: none;
       border: none;
-      outline: auto;
+      outline: 1px dotted; // IE, FF, and Edge browsers don't understand 'auto', so set backup
+      outline: auto -webkit-focus-ring-color;
     }
   }
   input[type='checkbox'] {

lib/sass/calcite-web/components/_tooltip.scss

@@ -173,6 +173,7 @@
 
   .tooltip-multiline {
     &:after {
+      width: 22em;
       width: -moz-max-content;
       width: -webkit-max-content;
       max-width: $multiline-max-width;

lib/sass/calcite-web/patterns/_drawers.scss

@@ -63,12 +63,12 @@ $opacity-transition: opacity 200ms linear;
   @include transition-prefixed($transform-transition);
   @include transform(translate3d($drawer-width,0,0));
 }
+
 @mixin drawer-right-is-active() {
   @include transition-prefixed($transform-transition);
   @include transform(translate3d(-$drawer-width,0,0));
 }
 
-
 @if $include-drawers == true {
   .drawer { @include drawer();}
   .drawer-nav { @include drawer-nav();}
@@ -107,4 +107,5 @@ $opacity-transition: opacity 200ms linear;
       }
     }
   }
+  .drawer-no-overflow { overflow: hidden; }
 }

lib/sass/calcite-web/type/_config.scss

@@ -30,7 +30,7 @@ $indent:             1em;
 
 // Header Family
 $avenir-tracking:    0;
-$avenir-family:      'Avenir Next', 'Helvetica Neue', sans-serif;
+$avenir-family:      'Avenir Next W01', 'Avenir Next W00', 'Avenir Next', 'Avenir', 'Helvetica Neue', sans-serif;
 
 // Code Family
 $code-tracking:      0;