update SCSS docs

soumak77 · soumak77 · commit a33f86a4f317 · 2016-08-26T14:58:29.000-07:00
diff --git a/docs/partials/scss/accordion.html b/docs/partials/scss/accordion.html
@@ -1,10 +1,8 @@
 $accordion-border: 1px solid $gray-dark;
-
 $accordion-title-background: $gray-light;
 $accordion-title-background-hover: smartscale($accordion-title-background, 5%);
 $accordion-title-background-active: smartscale($accordion-title-background, 3%);
 $accordion-title-color: isitlight($accordion-title-background);
 $accordion-title-color-active: isitlight($accordion-title-background);
-
 $accordion-title-padding: $global-padding;
-$accordion-content-padding: $global-padding; 
+$accordion-content-padding: $global-padding;
diff --git a/docs/partials/scss/action-sheet.html b/docs/partials/scss/action-sheet.html
@@ -7,8 +7,6 @@
 $actionsheet-shadow: 0 -3px 10px rgba(black, 0.25);
 $actionsheet-padding: $global-padding;
 $actionsheet-tail-size: 10px;
-
 $actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25);
-
 $actionsheet-link-color: #000;
-$actionsheet-link-background-hover: smartscale($actionsheet-background); 
+$actionsheet-link-background-hover: smartscale($actionsheet-background);
diff --git a/docs/partials/scss/block-list.html b/docs/partials/scss/block-list.html
@@ -1,18 +1,14 @@
 $blocklist-background: #fff;
 $blocklist-fullbleed: true;
 $blocklist-fontsize: 1rem;
-
 $blocklist-item-padding: 0.8rem 1rem;
 $blocklist-item-color: isitlight($blocklist-background, #000, #fff);
 $blocklist-item-background-hover: smartscale($blocklist-background, 4.5%);
 $blocklist-item-color-disabled: #999;
 $blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%);
-
 $blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%);
 $blocklist-item-icon-size: 0.8;
-
 $blocklist-header-fontsize: 0.8em;
 $blocklist-header-color: smartscale($blocklist-item-color, 40%);
 $blocklist-header-uppercase: true;
-
-$blocklist-check-icons: true; 
+$blocklist-check-icons: true;
diff --git a/docs/partials/scss/breakpoints.html b/docs/partials/scss/breakpoints.html
@@ -1,11 +1,8 @@
-// These are our named breakpoints. You can use them in our breakpoint function like this: @include breakpoint(medium) { // Medium and larger styles }
 $breakpoints: (
   small: rem-calc(0),
   medium: rem-calc(640),
   large: rem-calc(1200),
   xlarge: rem-calc(1440),
   xxlarge: rem-calc(1920),
 );
-
-// All of the names in this list will be output as classes in your CSS, like small-12, medium-6, and so on.
-$breakpoint-classes: (small medium large); 
+$breakpoint-classes: (small medium large);
diff --git a/docs/partials/scss/button-group.html b/docs/partials/scss/button-group.html
@@ -1,3 +1,3 @@
 $btngroup-background: $primary-color;
 $btngroup-color: #fff;
-$btngroup-radius: $button-radius; 
+$btngroup-radius: $button-radius;
diff --git a/docs/partials/scss/button.html b/docs/partials/scss/button.html
@@ -13,4 +13,5 @@
 );
 $button-font-size: 0.9rem;
 $button-opacity-disabled: 0.5;
-$button-tag-selector: false; 
+$button-tag-selector: false;
+$button-icon-spacing: 0.5em;
diff --git a/docs/partials/scss/card.html b/docs/partials/scss/card.html
@@ -5,5 +5,4 @@
 $card-shadow: 0 1px 2px rgba(#000, 0.2);
 $card-padding: $global-padding;
 $card-margin: 0.5rem;
-
-$card-divider-background: smartscale($card-background, 7%); 
+$card-divider-background: smartscale($card-background, 7%);
diff --git a/docs/partials/scss/compatibility.html b/docs/partials/scss/compatibility.html
@@ -0,0 +1,6 @@
+$nosupport-overlay: #000000;
+$nosupport-background: $alert-color;
+$nosupport-color: isitlight($nosupport-background);
+$nosupport-top: 15%;
+$nosupport-width: 50%;
+$nosupport-font: Arial, Helvetica, sans-serif !important;
diff --git a/docs/partials/scss/extras.html b/docs/partials/scss/extras.html
@@ -3,6 +3,5 @@
 $closebutton-lineheight: 0.5;
 $closebutton-color: #999;
 $closebutton-color-hover: #333;
-
 $thumbnail-padding: 0.5rem;
-$thumbnail-shadow: 0 3px 15px rgba(black, 0.25); 
+$thumbnail-shadow: 0 3px 15px rgba(black, 0.25);
diff --git a/docs/partials/scss/forms.html b/docs/partials/scss/forms.html
@@ -1,8 +1,5 @@
-// Basic form variables
 $form-fontsize: 1rem;
 $form-padding: 0.5rem;
-
-// Text fields
 $input-color: #000;
 $input-color-hover: $input-color;
 $input-color-focus: $input-color;
@@ -14,37 +11,27 @@
 $input-border-hover: 1px solid #bbb;
 $input-border-focus: 1px solid #999;
 $input-cursor-disabled: not-allowed;
-
-// Select menus
 $select-color: #000;
 $select-background: #fafafa;
 $select-background-hover: smartscale($select-background, 4%);
 $select-arrow: true;
 $select-arrow-color: $select-color;
-
-// Labels
 $form-label-fontsize: 0.9rem;
 $form-label-margin: 0.5rem;
 $form-label-color: #333;
-
-// Inline labels
 $inlinelabel-color: #333;
 $inlinelabel-background: #eee;
 $inlinelabel-border: $input-border;
-
-// Range slider
 $slider-background: #ddd;
 $slider-height: 1rem;
 $slider-radius: 0px;
 $slider-thumb-height: 1.5rem;
 $slider-thumb-color: $primary-color;
 $slider-thumb-radius: 0px;
-
-// Progress and meter
 $meter-height: 1.5rem;
 $meter-background: #ccc;
 $meter-fill: $primary-color;
 $meter-fill-high: $success-color;
 $meter-fill-medium: #e7cf00;
 $meter-fill-low: $alert-color;
-$meter-radius: 0; 
+$meter-radius: 0;
diff --git a/docs/partials/scss/global.html b/docs/partials/scss/global.html
@@ -1,33 +1,15 @@
-// This sets 1rem to be 16px
 $rem-base: 16px;
-
-// The default font-size is set to 100% of the browser style sheet (usually 16px)
-// for compatibility with browser-based text zoom or user-set defaults.
-
-// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
-// If you want your base font-size to be different and not have it affect the grid breakpoints,
-// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
 $base-font-size: 100%;
-
-$base-line-height is 24px while $base-font-size is 16px
 $base-line-height: 1.5;
-
-// Text selector helpers
 $headers: "h1,h2,h3,h4,h5,h6";
-
-// We use these to define default font weights
 $font-weight-normal: normal;
 $font-weight-bold: bold;
-
-// We use these to control various global styles
 $body-background: #fff;
 $body-font-color: #222;
 $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
 $body-font-weight: $font-weight-normal;
 $body-font-style: normal;
 $body-antialiased: true;
-
-// Application Colors
 $primary-color: #00558b;
 $secondary-color: #f1f1f1;
 $alert-color: #F04124;
@@ -38,11 +20,9 @@
 $gray: #dfdfdf;
 $gray-dark: darken($gray, 8);
 $gray-light: lighten($gray, 8);
-
-// We use these to make sure border radius matches unless we want it different.
 $global-radius: 4px;
 $global-rounded: 1000px;
-
-// We use this for default spacing
 $global-padding: 1rem;
-$global-spacing: rem-calc(15); 
+$global-spacing: rem-calc(15);
+$icon-classes: ('iconic', 'ionicons', 'material-icons', 'open-iconic');
+$loader-classes: ('sk-loader');
diff --git a/docs/partials/scss/grid.html b/docs/partials/scss/grid.html
@@ -1,4 +1,5 @@
 $container-width: rem-calc(900);
 $block-padding: $global-padding;
+$block-spacing: $global-spacing;
 $total-columns: 12;
-$block-grid-max-size: 6; 
+$block-grid-max-size: 6;
diff --git a/docs/partials/scss/icon.html b/docs/partials/scss/icon.html
@@ -2,3 +2,10 @@
 $icon-primary-stroke: $primary-color;
 $icon-accent-fill: $icon-primary-fill;
 $icon-accent-stroke: $icon-accent-fill;
+$icon-sizes: (
+  tiny: 0.5,
+  small: 1,
+  medium: 2,
+  large: 4
+);
+$icon-default-size: 1rem;
diff --git a/docs/partials/scss/includes.html b/docs/partials/scss/includes.html
@@ -1,21 +1,21 @@
-// Change any value in this map from "true" to "false" to disable that component's CSS class output. You'll still be able to use the component's mixins, but none of our pre-written classes will be in your CSS.
-
 $include-css: (
   accordion: true,
   action-sheet: true,
   block-list: true,
   button: true,
   button-group: true,
   card: true,
+  compatibility: true,
   coloring: true,
   extras: true,
   forms: true,
   grid: true,
-  iconic: true,
+  icon: true,
   label: true,
   badge: true,
   list: true,
   menu-bar: true,
+  loader: true,
   modal: true,
   motion: true,
   notification: true,
@@ -26,5 +26,5 @@
   tabs: true,
   title-bar: true,
   typography: true,
-  utilities: true,
-); 
+  utilities: true
+);
diff --git a/docs/partials/scss/label.html b/docs/partials/scss/label.html
@@ -1,10 +1,11 @@
 $label-fontsize: 0.8rem;
 $label-padding: ($global-padding / 3) ($global-padding / 2);
+$label-margin: 0 0 ($global-spacing / 2) 0;
 $label-radius: 0;
 $label-background: $primary-color;
 $label-color: isitlight($primary-color);
-
+$badge-margin: 0 0 ($global-spacing / 2) 0;
 $badge-fontsize: 0.8em;
 $badge-diameter: 1.5rem;
 $badge-background: $primary-color;
-$badge-color: #fff; 
+$badge-color: #fff;
diff --git a/docs/partials/scss/loader.html b/docs/partials/scss/loader.html
@@ -0,0 +1,7 @@
+$loader-sizes: (
+  tiny: 0.5,
+  small: 1,
+  medium: 2,
+  large: 4
+);
+$loader-default-size: 1rem;
diff --git a/docs/partials/scss/menu-bar.html b/docs/partials/scss/menu-bar.html
@@ -5,7 +5,6 @@
 $menubar-color: isitlight($menubar-background);
 $menubar-color-hover: $menubar-color;
 $menubar-color-active: $menubar-color-hover;
-
 $menubar-item-padding: $global-padding;
 $menubar-icon-size: 25px;
-$menubar-icon-spacing: $menubar-item-padding; 
+$menubar-icon-spacing: $menubar-item-padding;
diff --git a/docs/partials/scss/modal.html b/docs/partials/scss/modal.html
@@ -9,6 +9,5 @@
   medium: 600px,
   large: 800px,
 );
-
 $modal-overlay-class: 'modal-overlay';
-$modal-overlay-background: rgba(#333, 0.7); 
+$modal-overlay-background: rgba(#333, 0.7);
diff --git a/docs/partials/scss/motion.html b/docs/partials/scss/motion.html
@@ -1,4 +1,3 @@
-// Classes to use when triggering in/out animations
 $motion-class: (
   in: "ng-enter",
   out: "ng-leave",
@@ -19,28 +18,17 @@
   in: "ng-hide-remove-active",
   out: "ng-hide-add-active",
 );
-
-// Set if movement-based transitions should also fade the element in and out
 $motion-slide-and-fade: false;
 $motion-hinge-and-fade: true;
 $motion-scale-and-fade: true;
 $motion-spin-and-fade: true;
-
-// Default speed for transitions and animations
 $motion-duration-default: 500ms;
-
-// Slow and fast modifiders
 $motion-duration-slow: 750ms;
 $motion-duration-fast: 250ms;
 $motion-stagger-duration-default: 150ms;
 $motion-stagger-duration-short: 50ms;
 $motion-stagger-duration-long: 300ms;
-
-// Default timing function for transitions and animations
 $motion-timing-default: ease;
-
-// Built-in and custom easing functions
-// Every item in this map becomes a CSS class
 $motion-timings: (
   linear: linear,
   ease: ease,
@@ -51,9 +39,6 @@
   bounceOut: cubic-bezier(0.485, 0.155, 0.515, 0.845),
   bounceInOut: cubic-bezier(0.760, -0.245, 0.240, 1.245),
 );
-
-// Default delay for all transitions and animations
 $motion-delay-default: 0;
-// Short and long delay modifiers
 $motion-delay-short: 300ms;
-$motion-delay-long: 700ms; 
+$motion-delay-long: 700ms;
diff --git a/docs/partials/scss/notification.html b/docs/partials/scss/notification.html
@@ -1,13 +1,10 @@
 $notification-default-position: right top;
 $notification-width: rem-calc(400);
 $notification-offset: $global-padding;
-
 $notification-background: $primary-color;
 $notification-color: white;
 $notification-padding: $global-padding;
 $notification-radius: 4px;
-
 $notification-icon-size: 60px;
 $notification-icon-margin: $global-padding;
 $notification-icon-align: top;
- 
diff --git a/docs/partials/scss/off-canvas.html b/docs/partials/scss/off-canvas.html
@@ -1,10 +1,8 @@
 $offcanvas-size-horizontal: 250px;
 $offcanvas-size-vertical: 250px;
-
 $offcanvas-background: #fff;
 $offcanvas-color: isitlight($offcanvas-background);
 $offcanvas-padding: 0;
 $offcanvas-shadow: 3px 0 10px rgba(black, 0.25);
 $offcanvas-animation-speed: 0.25s;
-
-$offcanvas-frame-selector: '.grid-frame'; 
+$offcanvas-frame-selector: '.grid-frame';
diff --git a/docs/partials/scss/panel.html b/docs/partials/scss/panel.html
@@ -1,9 +1,5 @@
 $panel-size-horizontal: 300px;
 $panel-size-vertical: 300px;
 $panel-padding: 0;
-
 $panel-background: #fff;
 $panel-shadow: 3px 0 10px rgba(black, 0.25);
-
-// DEPRECATED: these variables will be removed in a future version.
-$panel-animation-speed: 0.25s; 
diff --git a/docs/partials/scss/popup.html b/docs/partials/scss/popup.html
@@ -2,4 +2,4 @@
 $popup-background: #fff;
 $popup-border: 0;
 $popup-radius: 0;
-$popup-shadow: 0 0 10px rgba(#000, 0.25); 
+$popup-shadow: 0 0 10px rgba(#000, 0.25);
diff --git a/docs/partials/scss/switch.html b/docs/partials/scss/switch.html
@@ -5,6 +5,5 @@
 $switch-border: 0;
 $switch-radius: 9999px;
 $switch-animation-speed: 0.15s;
-
 $switch-paddle-color: white;
-$switch-paddle-offset: 4px; 
+$switch-paddle-offset: 4px;
diff --git a/docs/partials/scss/tabs.html b/docs/partials/scss/tabs.html
diff --git a/docs/partials/scss/title-bar.html b/docs/partials/scss/title-bar.html
diff --git a/docs/partials/scss/typography.html b/docs/partials/scss/typography.html
diff --git a/docs/templates/compatibility.html b/docs/templates/compatibility.html
diff --git a/docs/templates/loader.html b/docs/templates/loader.html
