New Forms CSS for Canvas

Fixes: CNVS-15541

New forms CSS, built from scratch to make it easier
for Canvas developers to build responsive, accessible,
and beautifully laid-out form UIs.
The new forms CSS is:

- Responsive. Everything should scale down nicely for
  smaller screen sizes.
- Accessibile out of the box. Revamped :focus styles
  for the high-contrast UI.
- Browser tested on IE10/11, Firefox, Webkit and iOS
- Interoperable. All forms components should work
  together in almost any configuration. Plenty of examples
  are included for building all types of form UI.
- Backwards-compatible. The existing Bootstrap 2.x
  forms are not affected by this commit. Everything is
  scoped under new .ic- classes.
- Easy on the eye: new custom checkboxes and radio
  buttons, as well as updated form message boxes for
  warning, error, and success states.

QA Test Plan:

- Go to /styleguide and click on Forms CSS on the left
  menu.
- Test each example.
- Please note that this work should not affect any current
  forms in Canvas. Unless a form element has one of the new
  .ic- classes, it won't inherit any of the new styles.

Change-Id: I9d9c2c13b6c8ce714433f47efe86343528738fbc
Reviewed-on: https://gerrit.instructure.com/46841
Tested-by: Jenkins
Reviewed-by: Colleen Palmer <colleen@instructure.com>
Product-Review: Colleen Palmer <colleen@instructure.com>
QA-Review: Nathan Rogowski <nathan@instructure.com>

app/stylesheets/base/_variables.scss

@@ -307,3 +307,8 @@ $ic-text-color: $canvas-dark;
 // textColor is a deprecated Bootstrap 2 variable. Please use $ic-text-color!
 $textColor: $ic-text-color; // deprecated - do not use
 
+/// Form-related variables
+//==============================
+$ic-horizontal-form-offset: $ic-sp*19;
+$ic-label-line-height: 1.3;
+$ic-radio-checkbox-left-offset: 22px;

app/stylesheets/base/mixins/_breakpoints.scss

@@ -1,16 +1,16 @@
 // Breakpoints
 @mixin breakpoint($breakpoint) {
   @if $breakpoint == mini-tablet {
-    @media only screen and (min-width: 480px) { @content; }
+    @media only screen and (min-width: 500px) { @content; }
   }
   @else if $breakpoint == tablet {
     @media only screen and (min-width: 768px) { @content; }
   }
   @else if $breakpoint == desktop {
-    @media only screen and (min-width: 940px) { @content; }
+    @media only screen and (min-width: 992px) { @content; }
   }
   @else if $breakpoint == wide {
-    @media only screen and (min-width: 1024px) { @content; }
+    @media only screen and (min-width: 1200px) { @content; }
   }
   @else if $breakpoint == short {
     @media only screen and (max-height: 600px) { @content; }

app/stylesheets/components/_forms.scss

@@ -1,7 +1,7 @@
 @import "base/environment";
 
 /*
-@styleguide Forms
+Old Forms
 
 ## Inline
 

app/stylesheets/components/_ic-toggle.scss

@@ -156,11 +156,21 @@ The SCSS above would give you the toggle below.
       }
     }
 
+    &:focus ~ label .ic-Toggle__switch:after {
+      @if $use_high_contrast {
+        outline: 1px dotted $ic-Toggle-off-color;
+        outline-offset: -3px;
+      }
+      @else {
+        outline: 2px solid rgba($ic-Toggle-on-color, 0.25);
+        outline-offset: -2px;  
+      }
+    }
+
     &:hover ~label { color: darken($ic-Toggle-off-color, 5%); }
 
     &:checked {
       ~ label {
-        &:hover { color: darken($ic-Toggle-on-color, 3%); }
 
         .ic-Toggle__switch {
           background-color: $ic-Toggle-on-color;
@@ -181,7 +191,6 @@ The SCSS above would give you the toggle below.
   }
 
   label {
-    .ic-Toggle__label-text { flex: 1; }
 
     .ic-Toggle__switch {
       transition: background-color 0.3s $ic-Toggle-transition;
@@ -199,14 +208,14 @@ The SCSS above would give you the toggle below.
 }
 
 @mixin ic-Toggle-appearance (
-  $ic-Toggle-width: 134px,
-  $ic-Toggle-height: 36px,
+  $ic-Toggle-width: 112px,
+  $ic-Toggle-height: 30px,
   $ic-Toggle-border-radius: 4px,
   $ic-Toggle-offset: 2px,
   $ic-Toggle-label-font-size: 14px,
   $ic-Toggle-switch-font-size: 12px,
-  $ic-Toggle-shadow: 0 2px 4px rgba(black, 0.4),
-  $ic-Toggle-bottom-padding: 6px
+  $ic-Toggle-shadow: 0 2px 6px rgba(black, 0.4),
+  $ic-Toggle-bottom-padding: 0
 ){
 
   $ic-Toggle-switch-width: $ic-Toggle-width/2;
@@ -267,6 +276,8 @@ The SCSS above would give you the toggle below.
 
 .ic-Toggle {
   position: relative;
+  width: 100%;
+  box-sizing: border-box;
 
   *, *:before, *:after { box-sizing: border-box; }
 
@@ -305,10 +316,12 @@ The SCSS above would give you the toggle below.
     padding: 0 !important;
     vertical-align: baseline !important;
     line-height: normal !important;
+    font-weight: 500;
 
     .ic-Toggle__label-text {
       flex: 1;
-      padding-left: 32px;
+      padding-right: $ic-sp;
+      line-height: $ic-label-line-height;
     }
 
     .ic-Toggle__switch {

app/stylesheets/components/_main.scss

@@ -33,4 +33,5 @@
 @import "element-toggler";
 @import "ic-toggle";
 @import "utilities/c-modal-form";
+@import "ic-forms";
 

app/stylesheets/pages/styleguide/_styleguide_app.scss

@@ -48,6 +48,16 @@
   padding: $ic-sp*2;
   color: darken($canvas-neutral, 15%);
 }
+/////
+////// React Modal
+/////
+.ReactModal__Content.ReactModal__Content--canvas.ReactModal__Content--demo-styleguide .ReactModal__Layout {
+  transform: none;
+  opacity: 1;
+  width: 100%;
+  max-width: 697px;
+}
+
 /////
 ////// Styles for Colors
 /////
@@ -88,3 +98,4 @@
   .Colorguide-color--light      {@include colorguide(#ffffff);}
   .Colorguide-color--dark       {@include colorguide(#333333);}  
 }
+

app/stylesheets/vendor/bootstrap/_forms.scss

@@ -383,7 +383,7 @@ select:focus:required:invalid {
 // ------------
 
 /*
-@styleguide Forms: Form Actions
+Forms: Form Actions
 
 This is the standard form actions button bar at the bottom of every content form. Buttons may vary, but the styling or the container and button positions should be consistent
 

app/stylesheets/vendor/flexboxgrid.scss

@@ -165,6 +165,8 @@ Because it is, and you can use flexbox.
 
 */
 
+@import "base/environment";
+
 $c-grid-sp: 16px;
 $c-grid-columns: 12;
 
@@ -237,14 +239,14 @@ $c-grid-columns: 12;
 
 @include grid-for-size('xs');
 
-@media only screen and (min-width: 48em) {
+@include breakpoint(mini-tablet) {
   @include grid-for-size('sm');
 }
 
-@media only screen and (min-width: 62em) {
+@include breakpoint(tablet) {
   @include grid-for-size('md');
 }
 
-@media only screen and (min-width: 75em) {
+@include breakpoint(desktop) {
   @include grid-for-size('lg');
 }

doc/styleguide/template.mustache

@@ -24,7 +24,7 @@
       <a class="Sg-header__Subnavigation-item" href="#tab_navigation">Tabs</a>
     </section>  
     <section class="Sg-Navigation--Scaffold isHidden">
-      <a class="Sg-header__Subnavigation-item" href="#form_table">Forms</a>
+      <a class="Sg-header__Subnavigation-item" href="#forms">Forms</a>
       <a class="Sg-header__Subnavigation-item" href="#grid">Grid</a>
       <a class="Sg-header__Subnavigation-item" href="#tables">Tables</a>
       <a class="Sg-header__Subnavigation-item" href="#toggle">Toggle</a>

public/images/forms/ic-checkbox-bg.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 48" width="16" height="48" enable-background="new 0 0 16 48" xml:space="preserve">
+<polyline fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="11.4,4 6.9,8.7 4.6,6.2 3,7.9 6.9,12 13,5.6 11.4,4 "/>
+<polyline fill-rule="evenodd" clip-rule="evenodd" fill="#333333" points="11.4,20 6.9,24.7 4.6,22.2 3,23.9 6.9,28 13,21.6 
+	11.4,20 "/>
+</svg>

public/images/forms/ic-icon-arrow-down.svg

@@ -0,0 +1,4 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 170" enable-background="new 0 0 300 170" xml:space="preserve">
+  <polygon fill="#333333" points="150,170 300,0 0,0 "/>
+</svg>