Merge branch 'feature/23-custom-select'

README.md

@@ -16,3 +16,5 @@ Illusion is an opinionated, mobile-first, progressive enhanced, accessible, SCSS
 - [Custom Management](https://www.custommanagement.nl)
 - [Brouwer Tours](https://www.brouwertours.nl)
 - [Anton Goudsmit](http://antongoudsmit.nl)
+- [GGNet](http://ggnet.test/)
+- [Brouwer Tours](https://www.brouwertours.nl/)

docs/_scss/_shame.scss

@@ -28,8 +28,6 @@ header {
     width: 220%;
     height: 220%;
     background: linear-gradient(248deg, $color1, $color2, $color3);
-    transform: translate(0, 0);
-    animation: headerAnimate 20s ease infinite;
   }
 
   h1 {
@@ -43,18 +41,6 @@ header {
   }
 }
 
-@keyframes headerAnimate {
-  0% {
-    transform: translate(0, 0);
-  }
-  50% {
-    transform: translate(-50%, 0);
-  }
-  100% {
-    transform: translate(0, 0);
-  }
-}
-
 nav {
   @include clearfix;
   padding: $spacing-m 0;

docs/examples/index.html

@@ -64,6 +64,18 @@ <h2 id="form">Form example</h2>
                 </select>
             </div>
 
+            <div class="form__group">
+                <label class="form__label" for="car2">This is a custom styleable select</label>
+                <div class="custom-select">
+                    <select id="car2" name="car">
+                        <option value="volvo">Volvo</option>
+                        <option value="saab">Saab</option>
+                        <option value="mercedes">Mercedes</option>
+                        <option value="audi">Audi</option>
+                    </select>
+                </div>
+            </div>
+
             <div class="form__group">
                 <fieldset>
                     <legend>Select option</legend>

scss/atoms/_body.scss

@@ -7,10 +7,10 @@
 
   body {
     margin: $illusion-extendalize-body-margin;
-    font-family: $font-family;
-    font-size: $font-size;
-    line-height: $line-height;
-    font-weight: $weight-normal;
-    color: $color-type;
+    font-family: $illusion-extendalize-body-font-family;
+    font-size: $illusion-extendalize-body-font-size;
+    line-height: $illusion-extendalize-body-line-height;
+    font-weight: $illusion-extendalize-body-font-weight;
+    color: $illusion-extendalize-body-color;
   }
 }

scss/atoms/_boxsizing.scss

@@ -4,7 +4,7 @@
    */
 
   html {
-    box-sizing: border-box;
+    box-sizing: $illusion-extendalize-html-box-sizing;
   }
 
   *, *:before, *:after {

scss/illusion.scss

@@ -17,5 +17,6 @@
 
 // Molecules
 @import "molecules/body-fallback";
+@import "molecules/custom-select";
 @import "molecules/form";
 @import "molecules/multiple-choice";

scss/molecules/_custom-select.scss

@@ -0,0 +1,113 @@
+@if ($illusion-form == true and $illusion-custom-select != false) or $illusion-custom-select == true {
+
+  /* Highly based on https://github.com/filamentgroup/select-css */
+
+  // Custom select container
+  .custom-select {
+    position: $illusion-custom-select-position;
+    display: $illusion-custom-select-display;
+  }
+
+  // Native select invisible except for content
+  .custom-select select {
+    width: $illusion-custom-select-width;
+    margin: $illusion-custom-select-margin;
+    padding: $illusion-custom-select-padding;
+    outline: $illusion-custom-select-outline;
+    height: $illusion-custom-select-height;
+    box-sizing: $illusion-custom-select-box-sizing;
+    font-size: $illusion-custom-select-font-size;
+  }
+
+  // Custom arrow
+  .custom-select:after {
+    content: $illusion-custom-select-arrow-content;
+    position: $illusion-custom-select-arrow-position;
+    top: $illusion-custom-select-arrow-top;
+    right: $illusion-custom-select-arrow-right;
+    z-index: $illusion-custom-select-arrow-z-index;
+    pointer-events: $illusion-custom-select-arrow-pointer-events;
+    width: $illusion-custom-select-arrow-width;
+    height: $illusion-custom-select-arrow-height;
+    border-left: $illusion-custom-select-arrow-border-horizontal;
+    border-right: $illusion-custom-select-arrow-border-horizontal;
+    border-top: $illusion-custom-select-arrow-border-top;
+    margin-top: $illusion-custom-select-arrow-margin-top;
+    display: none;
+  }
+
+  // Custom styling when appearance is supported
+  /* autoprefixer: ignore next */
+  @supports (-webkit-appearance: none) or (appearance: none) or ((-moz-appearance: none) and (mask-type: alpha)) {
+
+    // Display custom arrow
+    /* autoprefixer: on */
+    .custom-select:after {
+      display: $illusion-custom-select-arrow-display;
+    }
+
+    // Select styling
+    .custom-select select {
+      padding-right: $illusion-custom-select-padding-right;
+      background: none;
+      appearance: none;
+  }
+  }
+
+  // IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance.
+  // Targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5
+
+  // The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's
+  // fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
+
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+
+    // Hide native arrow
+    .custom-select select::-ms-expand {
+      display: none;
+    }
+
+    .custom-select select:focus::-ms-value {
+      background: $illusion-custom-select-ms-focus-background;
+      color: $illusion-custom-select-ms-focus-color;
+    }
+
+    // Display custom arrow
+    .custom-select:after {
+      display: $illusion-custom-select-arrow-display;
+    }
+
+    // Styling select
+    .custom-select select {
+      padding-right: $illusion-custom-select-padding-right; // make room for the arrow
+      background: none;
+    }
+  }
+
+  @if ($illusion-custom-select-theme != false) or $illusion-custom-select-theme == true {
+    // Theming custom-select
+    .custom-select {
+      border: $illusion-custom-select-border;
+    }
+
+    .custom-select select {
+      font-family: $illusion-custom-select-font-family;
+      font-weight: $illusion-custom-select-font-weight;
+      color: $illusion-custom-select-color;
+      border: none;
+      line-height: $illusion-custom-select-line-height;
+      padding-top: $illusion-custom-select-padding-top;
+      padding-bottom: $illusion-custom-select-padding-bottom;
+      padding-left: $illusion-custom-select-padding-left;
+    }
+
+    // Focus style
+    .custom-select select:focus {
+      &:focus {
+        outline: $illusion-custom-select-focus-outline;
+        outline-offset: $illusion-custom-select-focus-outline-offset;
+      }
+    }
+  }
+}
+

scss/molecules/_form.scss

@@ -32,6 +32,9 @@
     padding: $illusion-form-input-padding;
     border: $illusion-form-input-border;
     line-height: $illusion-form-input-line-height;
+    min-height: $illusion-form-input-min-height;
+    font-family: $illusion-form-input-font-family;
+    font-weight: $illusion-form-input-font-weight;
 
     &:focus {
       outline: $illusion-form-input-focus-outline;

scss/tools/_tools.scss

@@ -5,13 +5,25 @@
 @import "variables/type";
 
 @import "variables/body-fallback";
+@import "variables/button";
+@import "variables/clearfix";
+@import "variables/collapse";
 @import "variables/color";
+@import "variables/content-block";
+@import "variables/coverall";
 @import "variables/extendalize";
 @import "variables/flexbox";
 @import "variables/form";
+@import "variables/gallery";
 @import "variables/grid";
+@import "variables/pseudo";
+@import "variables/ratio-block";
+@import "variables/reset";
+@import "variables/shift";
+@import "variables/span";
 @import "variables/svg";
 @import "variables/transition";
+@import "variables/triangle";
 
 
 // Functions

scss/tools/mixins/_breakpoint.scss

@@ -1,7 +1,7 @@
 // Breakpoint
 // Sets a temporary global $inside-breakpoint variable to be used inside other mixins
 
-@mixin breakpoint($width, $width--max: false) {
+@mixin breakpoint($width, $width--max: $illusion-breakpoint-width-max) {
   $inside-breakpoint: $width !global;
   @if $width--max == false {
     @media screen and (min-width: $width) {

scss/tools/mixins/_button.scss

@@ -7,7 +7,7 @@
 // 3. Line buttons vertically
 // 4. Appear clickable
 
-@mixin button-structure($appearance: none, $display: inline-block, $vertical-align: middle, $cursor: pointer) {
+@mixin button-structure($appearance: $illusion-button-appearance, $display: $illusion-button-display, $vertical-align: $illusion-button-vertical-align, $cursor: $illusion-button-cursor) {
   @if $appearance != false {
     -webkit-appearance: $appearance; // 1
   }

scss/tools/mixins/_clearfix.scss

@@ -2,7 +2,7 @@
 // Also clearing top-margin
 // Still using single colon for better browser compatibility
 
-@mixin clearfix($reset: false) {
+@mixin clearfix($reset: $illusion-clearfix-reset) {
   @if $reset == false {
     &:before,
     &:after {

scss/tools/mixins/_collapse.scss

@@ -3,7 +3,7 @@
 // Use as direct child of `@include span` element
 // Make sure there's no padding on the parent element
 
-@mixin collapse($sides: both, $multiplier: 1, $fromto: false, $gutter: false) {
+@mixin collapse($sides: $illusion-collapse-sides, $multiplier: $illusion-collapse-multiplier, $fromto: $illusion-collapse-fromto, $gutter: $illusion-collapse-gutter) {
 
   // Give a warning when $multiplier is not dividable by 0.5
   @if ($multiplier % 0.5 != 0) {

scss/tools/mixins/_container.scss

@@ -1,6 +1,6 @@
 // Container
 
-@mixin container($type: $illusion-grid-container-type, $align: center) {
+@mixin container($type: $illusion-grid-container-type, $align: $illusion-grid-container-align) {
 
   // Set default styling
   max-width: $illusion-grid-maxwidth + (largestGutter() * 2);

scss/tools/mixins/_content-block.scss

@@ -1,6 +1,6 @@
 // Content block
 
-@mixin content-block($spacing: $line-height, $location: bottom ) {
+@mixin content-block($spacing: $illusion-content-block-spacing, $location: $illusion-content-block-location ) {
   @if $location == top {
     margin-top: $spacing;
 

scss/tools/mixins/_coverall.scss

@@ -1,6 +1,6 @@
 // Cover the entire parent element
 
-@mixin coverall($offset: 0, $top: true, $right: true, $bottom: true, $left: true, $position: absolute, $reset: false) {
+@mixin coverall($offset: $illusion-coverall-offset, $top: $illusion-coverall-top, $right: $illusion-coverall-right, $bottom: $illusion-coverall-bottom, $left: $illusion-coverall-left, $position: $illusion-coverall-position, $reset: $illusion-coverall-reset) {
   @if $position != false {
     position: $position;
   }
@@ -25,10 +25,10 @@
     left: $left;
   }
   @if $reset == true {
-    position: relative;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
+    position: $illusion-coverall-reset-position;
+    top: $illusion-coverall-reset-top;
+    right: $illusion-coverall-reset-right;
+    bottom: $illusion-coverall-reset-bottom;
+    left: $illusion-coverall-reset-left;
   }
 }

scss/tools/mixins/_flexbox.scss

@@ -8,8 +8,8 @@
 // Because we're adding .flexbox and .flexboxlegacy classes flexbox will only work when JS is enabled
 // This is a good thing since we're not sure what we're showing / hiding with JS that might mess with flexbox
 
-@mixin flexbox($horizontal: $flexbox-horizontal, $vertical: $flexbox-vertical) {
-  @if $flexbox == true { // 1
+@mixin flexbox($horizontal: $illusion-flexbox-horizontal, $vertical: $illusion-flexbox-vertical) {
+  @if $illusion-flexbox == true { // 1
     @at-root { // 2
       .flexbox &, // 3
       .flexboxlegacy & { // 3

scss/tools/mixins/_fluid-type.scss

@@ -1,6 +1,6 @@
 // Fluid type
 
-@mixin fluid-type($min-value: $fluid-type-min-value, $max-value: $fluid-type-max-value, $min-screen: $fluid-type-min-screen, $max-screen: $fluid-type-max-screen) {
+@mixin fluid-type($min-value: $illusion-fluid-type-min-value, $max-value: $illusion-fluid-type-max-value, $min-screen: $illusion-fluid-type-min-screen, $max-screen: $illusion-fluid-type-max-screen) {
   font-size: $min-value;
 
   @media screen and (min-width: $min-screen) {

scss/tools/mixins/_gallery.scss

@@ -1,6 +1,6 @@
 // Gallery mixin
 
-@mixin gallery($span: null, $fromto: false, $multiplier: 1, $bottom: true, $defaults: true, $gutter: false) {
+@mixin gallery($span: $illusion-gallery-span, $fromto: $illusion-gallery-fromto, $multiplier: $illusion-gallery-multiplier, $bottom: $illusion-gallery-bottom, $defaults: $illusion-gallery-defaults, $gutter: $illusion-gallery-gutter) {
 
   // Span values
   $spanColumns: nth($span, 1);

scss/tools/mixins/_pseudo.scss

@@ -1,11 +1,11 @@
 // Pseudo elements
 
-@mixin pseudo($pseudo: after, $parent-position: relative, $position: absolute, $content: " ", $display: block) {
+@mixin pseudo($illusion-pseudo: $illusion-pseudo, $parent-position: $illusion-pseudo-parent-position, $position: $illusion-pseudo-position, $content: $illusion-pseudo-content, $display: $illusion-pseudo-display) {
   @if $parent-position != false {
     position: $parent-position;
   }
 
-  &:#{$pseudo} {
+  &:#{$illusion-pseudo} {
     @if $position != false {
       position: $position;
     }

scss/tools/mixins/_ratio-block.scss

@@ -1,6 +1,6 @@
 // Aspect ratio blocks
 
-@mixin ratio-block($ratio: 16 by 9, $overflow: hidden) {
+@mixin ratio-block($ratio: $illusion-ratio-block, $overflow: $illusion-ratio-block-overflow, $after: $illusion-ratio-block-after) {
 
   // Variables
   $width: nth($ratio, 1);
@@ -12,15 +12,17 @@
   }
 
   &:before {
-    display: block;
-    float: left;
-    content: " ";
+    display: $illusion-ratio-block-before-display;
+    float: $illusion-ratio-block-before-float;
+    content: $illusion-ratio-block-before-content;
     padding-top: $percent;
   }
 
-  &:after {
-    content: " ";
-    clear: left;
-    display: table;
+  @if $after != false {
+    &:after {
+      content: $illusion-ratio-block-after-content;
+      clear: $illusion-ratio-block-after-clear;
+      display: $illusion-ratio-block-after-display;
+    }
   }
 }

scss/tools/mixins/_reset.scss

@@ -1,6 +1,6 @@
 // Reset elements
 
-@mixin reset($margin: 0, $padding: 0, $list-style: none, $border: none, $background: transparent) {
+@mixin reset($margin: $illusion-reset-margin, $padding: $illusion-reset-padding, $list-style: $illusion-reset-list-style, $border: $illusion-reset-border, $background: $illusion-reset-background) {
   @if $margin != false {
     margin: $margin;
   }