doggystyle 0.1.0

data/core/mixins/_browsers.scss

@@ -0,0 +1,155 @@
+$browsers : ie edge firefox chrome opera;
+
+// Usage : @include browsers(ie 9 10) { ... }
+// Usage : @include browsers(ie 9, firefox) { ... }
+// Usage : @include browsers(ie) { ... }
+// Usage : @include browsers(edge 12, ie 11) { ... }
+
+/// @link https://github.com/saadeghi/browser-hack-sass-mixins/blob/master/_hacks.scss
+
+@mixin browsers($args...) {
+
+  // This checks to see if the current selector is html.
+  // This can not be converted into a shorthanded if statement.
+  $selector : null;
+  @if not is-selector(html) { $selector : &; }
+  $selector : string-replace(#{$selector}, 'html', '');
+
+  @each $settings in _arglist-to-list($args...) {
+
+    $browsers-list : ();
+    $versions-list : ();
+    $not : true;
+
+    @each $setting in $settings {
+      @if is-string($setting) and contains($browsers, $setting) {
+        $browsers-list : append($browsers-list, $setting);
+      }
+      @elseif is-bool($setting) {
+        $not : $setting;
+      }
+      @elseif is-number($setting) == number or is-list($setting){
+        @each $version in $setting {
+          $versions-list : append($versions-list, $version);
+        }
+      }
+    }
+
+    @if length($browsers-list) > 1 and length($versions-list) > 0 {
+      @error 'You can not check the same version for 2 browsers in a single argument. Try seperating the arguments using a comma (,)';
+    } @else {
+      @if length($browsers-list) > 0 {
+        @if length($versions-list) > 0 {
+          @each $version in $versions-list {
+            @if $not {
+              @at-root html[data-browser^=#{$browsers-list}][data-browser$='#{$version}'] #{$selector} { @content }
+            } @else {
+              @at-root html:not([data-browser^=#{$browsers-list}][data-browser$='#{$version}']) #{$selector} { @content }
+            }
+          }
+        } @else {
+          @each $browser in $browsers-list {
+            @if $not {
+              @at-root html[data-browser^=#{$browser}] #{$selector} { @content }
+              // Fallback hacks should the Browser not be installed
+              @if $browser == edge {
+                @supports (-ms-accelerator:true) {
+                  #{$selector} {
+                    @content;
+                  }
+                }
+              }
+              @elseif $browser == ie {
+                @media all and (-ms-high-contrast:none){
+                  *::-ms-backdrop, #{$selector} {
+                    @content;
+                  }
+                }
+              }
+              @elseif $browser == firefox {
+                #{$selector ',  x:-moz-any-link'}{
+                  @content;
+                }
+              }
+              @elseif $browser == chrome {
+                @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
+                  //@content;
+                }
+              }
+              @elseif $browser == safari {
+                @supports (overflow:-webkit-marquee) and (justify-content:inherit){
+                  #{$selector} {
+                    @content;
+                  }
+                }
+              }
+            } @else {
+              @at-root html:not([data-browser^=#{$browser}]) {
+                #{$selector} { @content }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// Usage : @include ie(9 10) { ... }
+// Usage : @include ie { ... }
+@mixin ie($version:null) {
+  @include browsers(ie $version) { @content };
+}
+
+@mixin edge($version:null) {
+  // TODO: When the browser plugin can detect edge version numbers, remove the next line
+  @include warning('As of March 2016: The plugin used to detect browser versions can not currently output the Edge browser version.
+    This mixin will exclude all version numbers for now.')
+  $version : null;
+  @include browsers(edge $version) { @content };
+}
+
+@mixin safari($version:null) {
+  @include browsers(safari $version) { @content };
+}
+
+@mixin firefox($version:null) {
+  @include browsers(firefox $version) { @content };
+}
+
+@mixin chrome($version:null) {
+  @include browsers(chrome $version) { @content };
+}
+
+@mixin opera($version:null) {
+  @include browsers(opera $version) { @content };
+}
+
+//////
+@mixin not-ie($version:null) {
+  @include browsers(ie $version false) { @content };
+}
+
+@mixin not-edge($version:null) {
+  // TODO: When the browser plugin can detect edge version numbers, remove the next line
+  @include warning('As of March 2016: The plugin used to detect browser versions can not currently output the Edge browser version.
+    This mixin will exclude all version numbers for now.')
+  $version : null;
+  @include browsers(edge $version false) { @content };
+}
+
+@mixin not-safari($version:null) {
+  @include browsers(safari $version false) { @content };
+}
+
+@mixin not-firefox($version:null) {
+  @include browsers(firefox $version false) { @content };
+}
+
+@mixin not-chrome($version:null) {
+  @include browsers(chrome $version false) { @content };
+}
+
+@mixin not-opera($version:null) {
+  @include browsers(opera $version false) { @content };
+}

data/core/mixins/_bulletpoint.scss

@@ -0,0 +1,12 @@
+@mixin bulletpoint($colour:$red, $size:8, $sudo:before) { position:relative;
+  &:#{$sudo} { content:"";
+    position:absolute;
+    display:block;
+    @include size($size);
+    @include border-radius(circle);
+    background-color:$colour;
+    left:0;
+    top:addUnit($size/2);
+    @content;
+  }
+}

data/core/mixins/_center.scss

@@ -0,0 +1,3 @@
+@mixin center($width:null) {
+  position:absolute; left:50%; margin-left:- addUnit($width/2); width:addUnit($width); 
+}

data/core/mixins/_clearfix.scss

@@ -0,0 +1,7 @@
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}

data/core/mixins/_columns.scss

@@ -0,0 +1,22 @@
+// Columns for text
+@mixin cols($count:2, $spacing:$pad, $width:20em, $target:null) {
+  @include column-count($count);
+  @if $count == 1 {
+    @include column-width(auto);
+    @include column-gap(auto);
+  } @else {
+    @if $width != null { @include column-width($width); }
+    @if $spacing != null { @include column-gap($spacing); }
+    @if $target == null { 
+      -webkit-column-break-inside:avoid; page-break-inside:avoid; break-inside:avoid; 
+    } @else {
+      #{$target} { -webkit-column-break-inside:avoid; page-break-inside:avoid; break-inside:avoid; 
+        @if $spacing != null { margin-bottom:$spacing; }
+      }
+    }
+  }
+}
+
+@mixin columns($arg...) { 
+  @include cols($args...);
+}

data/core/mixins/_custom-property.scss

@@ -0,0 +1,15 @@
+@mixin custom-property($properties, $values:null, $at-root:false) {
+
+    $map : if(type-of($properties) == map, $properties, map-zip($properties, $values));
+
+    @each $property, $value in $map {
+      @if $at-root {
+        @at-root(without:media) & {
+          --#{$property}:$value;
+        }
+      } @else {
+        --#{$property}:$value;
+      }
+    }
+
+}

data/core/mixins/_devices.scss

@@ -0,0 +1,97 @@
+$devices : mobile tablet desktop;
+
+@mixin devices($args...) {
+
+  // This checks to see if the current selector is html.
+  // This can not be converted into a shorthanded if statement.
+  $selector : null;
+  @if not is-selector(html) and not is-selector(body) { $selector : &; }
+
+  $selector : str-replace(#{&}, 'body', '');
+
+  @each $settings in _arglist-to-list($args...) {
+
+    $devices-list : ();
+    $types-list : ();
+    $not : true;
+    $space : false;
+
+    @each $setting in $settings {
+      @if is-string($setting) {
+        @if $setting == 'space' {
+          $space : true;
+        } @elseif contains($devices, $setting) and length($devices-list) < 2 {
+          $devices-list : append($devices-list, $setting);
+        } @else {
+          $types-list : append($types-list, $setting);
+        }
+      } @elseif is-bool($setting) {
+        $not : $setting;
+      }
+    }
+
+    @if length($devices-list) > 1 and length($types-list) > 0 {
+      @error 'You can not check the same version for 2 browsers in a single argument. Try seperating the arguments using a comma (,)';
+    } @else {
+      @if length($devices-list) > 0 {
+        @if length($types-list) > 0 {
+          @each $type in $types-list {
+            // @at-root #{if(not $no-body, body, null)}#{$devices-list}.#{$type} #{$selector} { @content; }
+            @if $not {
+              @at-root body.#{$devices-list}.#{$type} #{$selector} { @content; }
+            } @else {
+              @at-root body:not(.#{$devices-list}).#{$type} #{$selector} { @content; }
+            }
+          }
+        } @else {
+          @each $device in $devices-list {
+            @if $not {
+              @at-root body.#{$device}#{if($space, ' ', '')}#{$selector}{ @content; }
+            } @else {
+              @at-root body:not(.#{$device})#{if($space, ' ', '')}#{$selector}{ @content; }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// Usage : @include mobile { ... }
+// Usage : @include mobile(samgsung) { ... }
+
+@mixin mobile($type:null) {
+  @include devices(mobile $type) { @content };
+}
+
+@mixin tablet($type:null) {
+  @include devices(tablet $type) { @content };
+}
+
+@mixin desktop($type:null) {
+  @include devices(desktop $type) { @content };
+}
+
+@mixin not-mobile($type:null) {
+  @include devices(mobile $type false) { @content };
+}
+
+@mixin not-tablet($type:null) {
+  @include devices(tablet $type false) { @content };
+}
+
+@mixin not-desktop($type:null) {
+  @include devices(desktop $type false) { @content };
+}
+
+
+/// Add specical styling for specific classes that sit on the body of the page.
+/// for example, iphone devices specifcally.
+/// @todo Add checks and validation
+@mixin identify($class) {
+
+  $selector : null;
+  @if not is-selector(html) and not is-selector(body){ $selector : &; }
+
+  @at-root body.#{$class} #{$selector} { @content }
+}

data/core/mixins/_dropdown.scss

@@ -0,0 +1,38 @@
+@mixin dropdown($height:40, $background:$grey, $select:null, $hover:null, $colour:null, $borders:null, $arrow:null, $target:".dropdown") {
+  $select:if($select == null, darken($background, 10), $select);
+  $hover:if($hover == null, darken($select, 10), $hover);
+  $colour:if($colour == null, light-or-dark($background, $white, $colour), $colour);
+  $borders:if($borders == null, darken($select, 10), $borders);
+
+  $arrow:if($arrow == null, 10, $arrow);
+  #{$target} { position:relative; width:100%; height:$height + px; color:$colour; font-size:$fs; @extend .font1; z-index:2;
+    select { background-color:white; height:$height + px; color:light-or-dark($background, $white, $colour); padding:0 $pad0; background-color:$background; width:100%;  border:none; font-size:$size; }
+    div[role="label"] { @include vertical("span"); padding:0 $pad0;  color:light-or-dark($background, $white, black); @include ani(background-color color); @extend %unselectable, %pointer, %no-wrap; overflow:hidden; background-color:$background; text-transform: capitalize; position:absolute; top:0; left:0; z-index:1; top:0; left:0; width:100%; height:$height + px; display:flex; align-items: center; justify-content: left;
+      &:after { content:""; border-top:solid 3 + px light-or-dark($background, lighten($background,40), darken($background,30)); border-right:solid 3 + px light-or-dark($background, lighten($background,40), darken($background,30)); position:absolute; top:50%; margin-top:-$arrow/2 + px; right:$padding - $arrow/2 + px; @include rotate(45deg); @include size($arrow); @include ani(rotate border-color margin-top)}
+      &:before { content:""; background-color:$background; @include ani(background-color); position:absolute; top:0; right:0; width:$height + px; height:$height + px; }
+    }
+    ul { height:0; width:100%;overflow: auto; overflow-x:hidden; position:relative; top:$height + px; @include ani(height 0 0.5);
+      &::-webkit-scrollbar { width:5px; height:50%; display:none; z-index:2; }
+      &::-webkit-scrollbar-track { background-color:$background; }
+      &::-webkit-scrollbar-thumb { background-color:darken($background,30); }
+      &.clicked { @include ani(height); }
+      li { @include vertical("span"); width:100%; min-height:$height + px; height:auto; padding:0 $pad; background-color:$background; border-bottom:1 + px solid $borders; text-transform: capitalize; @include ani(background-color color); @extend %unselectable, %pointer; display:flex; align-items: center; justify-content: left;
+        &:hover { background-color:$hover; color:light-or-dark($hover, $white, $colour)}
+        &.selected { background-color:$select; color:light-or-dark($select, $white, $colour); @extend %unselectable, %pointerevents, %cursor; }
+        &.disabled { background-color:lighten($background,4); color:col($colour 0.5); @extend %unselectable, %pointerevents, %cursor;}
+        &:last-of-type { border-bottom:0;}
+      }
+    }
+    // Hoverii
+    &.hover { z-index:999; 
+      div[role="label"] { background-color:$select; color:light-or-dark($select, $white, $colour);
+        &:after { @include rotate(135); margin-top:-$arrow/2 + px; border-top-color:white; border-right-color:white; }
+        &:before { background-color:$select; }
+      }
+      ul { height:50vh;
+        &::-webkit-scrollbar { display:block; }                
+      }
+    }
+    @content;
+  }
+}

data/core/mixins/_fake-radius.scss

@@ -0,0 +1,99 @@
+/// Create a set of border-radius svg sprites with advance settings
+///
+/// @author Mark Notton
+///
+/// @access public
+
+@mixin fake-radius($settings...) {
+
+  $count : 0;
+  
+  $corner-settings: (
+    top-left : (
+      color : null,
+      width : null,
+      height : null
+    ),
+    top-right : (
+      color : null,
+      width : null,
+      height : null
+    ),
+    bottom-left : (
+      color : null,
+      width : null,
+      height : null
+    ),
+    bottom-right : (
+      color : null,
+      width : null,
+      height : null
+    ),
+  );
+
+  $corners : to-list($corner-settings, keys);
+
+  @debug $corners;
+
+  @each $settings in _arglist-to-list($settings...) {
+    $count : $count + 1; 
+
+    @each $setting in $settings {
+
+      // If the settings contains one of the corners types, only focus on that one corner for the remaining settings.
+      @if is-string($setting) and contains($corners, $setting) {
+        $corner : $setting;
+        
+        @each $setting in $settings {
+          @if is-colour($setting) and map-deep-get($corner-settings, $corner, color) == null {
+            $corner-settings : map-deep-set($corner-settings, $corner, color, colour($setting, true));
+          }
+          @elseif is-number($setting) {
+            @if map-deep-get($corner-settings, $corner, width) == null {
+              $corner-settings : map-deep-set($corner-settings, $corner, width, $setting);
+            } @else {
+              $corner-settings : map-deep-set($corner-settings, $corner, height, $setting);
+            }
+          }
+        }
+
+        // Default colour if not supplied
+        @if map-deep-get($corner-settings, $corner, color) == null {
+          $corner-settings : map-deep-set($corner-settings, $corner, color, colour(red, true));
+        }
+        
+        // If not units were found at all, revert the width back to a default radius setting
+        @if map-deep-get($corner-settings, $corner, width) == null {
+          $corner-settings : map-deep-set($corner-settings, $corner, width, $border-radius);
+        }
+
+        // If a second unit was not supplied, the height would be set to null. As a fallback, set height to width
+        @if map-deep-get($corner-settings, $corner, height) == null {
+          $corner-settings : map-deep-set($corner-settings, $corner, height, map-deep-get($corner-settings, $corner, width));
+        }
+
+      }
+      @else {
+        
+      
+      }
+    }
+  
+  }
+  @debug $corner-settings;
+
+  $svg : "<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>";
+  $svg : $svg + "<rect id='top-left' x='0%' y='0%' width='20' height='20' fill='green'/>";
+  $svg : $svg + "<rect id='top-right' x='-100%' y='0%' width='20' height='20' fill='green' transform='scale(-1,1)'/>";
+  $svg : $svg + "<rect id='bottom-left' x='0%' y='-100%' width='20' height='20' fill='blue' transform='scale(1,-1)'/>";
+  $svg : $svg + "<rect id='bottom-right' x='-100%' y='-100%' width='20' height='20' fill='yellow' transform='scale(-1,-1)'/>";
+  $svg : $svg + "</svg>";
+
+  $sudo : before;
+
+
+  &#{_sudo($sudo)} { 
+    @extend %sudo; 
+    background-image:svg($svg); 
+  }
+}