Merge pull request #127 from koester/unified-transitions

Unified transitions

src/components/_accordion.scss

@@ -1,53 +1,49 @@
-@mixin transition($transition){
-    -webkit-transition: max-height $transition, padding $transition, opacity $transition;
-    -moz-transition: max-height $transition, padding $transition, opacity $transition;
-    -o-transition: max-height $transition, padding $transition, opacity $transition;
-    transition: max-height $transition, padding $transition, opacity $transition;
-}
-
 .collapsible {
-    display: flex;
-    flex-direction: column;
-    &:nth-of-type(1) {
-        border-top: 1px solid $muted-light;
+  display: flex;
+  flex-direction: column;
+
+  &:nth-of-type(1) {
+    border-top: 1px solid $muted-light;
+  }
+
+  .collapsible-body {
+    max-height: 0px;
+    opacity: 0;
+    overflow: hidden;
+    padding: 0rem 0.75rem;
+    margin: 0;
+    background-color: lighten($white-dark, 80%);
+    border-bottom: 1px solid $muted-light;
+    @include transition;
+  }
+
+  input {
+    display: none;
+
+    &:checked + label {
+      color: $primary;
     }
 
-    .collapsible-body {
-        max-height: 0px;
-        opacity: 0;
-        overflow: hidden;
-        padding: 0rem 0.75rem;
-        margin:0;
-        background-color: lighten($white-dark,80%);
-        border-bottom: 1px solid $muted-light;        
-        @include transition(#{"0.25s ease"});
+    &[id^="collapsible"]:checked~div.collapsible-body {
+      opacity: 1;
+      max-height: 960px;
+      padding: 0.75rem 0.75rem;
+      margin: 0;
     }
+  }
 
-    input {
-        display: none;
-    }
+  label {
+    display: inline-block;
+    margin: 0 0 -1px;
+    padding: 0.75rem 0.75rem;
+    font-weight: 600;
+    text-align: center;
+    color: $primary;
+    border-bottom: 1px solid $muted-light;
 
-    label {
-        display: inline-block;
-        margin: 0 0 -1px;
-        padding: 0.75rem 0.75rem;
-        font-weight: 600;
-        text-align: center;
-        color: $primary;
-        border-bottom: 1px solid $muted-light;
-    }
-
-    label:hover {
-        color: $muted;
-        cursor: pointer;
-    }
-    input:checked+label {
-        color: $primary;
-    }
-    input[id ^="collapsible"]:checked ~ div.collapsible-body {
-        opacity: 1;
-        max-height: 960px;
-        padding: 0.75rem 0.75rem;
-        margin: 0;
+    &:hover {
+      color: $muted;
+      cursor: pointer;
     }
+  }
 }

src/components/_buttons.scss

@@ -3,7 +3,7 @@ button,
 [type="button"] {
   align-self: center;
   background: transparent;
-  transition: all .5s ease, background-color .1s ease;
+  @include transition();
   color: $primary;
   display: inline;
   outline: none;

src/components/_modals.scss

@@ -28,14 +28,15 @@
     position: fixed;
     z-index: 11;
     max-width: 960px;
+    @include translate(0, -500%);
+    @include transition(transform);
+
     @include resp(medium) {
       max-width: 85%;
     }
     @include resp(xsmall) {
       max-width: 90%;
     }
-    @include translate(0, -500%);
-    @include transition-transform(0.3s ease-out);
   }
 
   .btn-close{

src/components/_popovers.scss

@@ -26,7 +26,7 @@
     text-align: center;
     color: $white;
     background: $light-dark;
-    transition: opacity .25s ease-out;
+    @include transition(opacity);
     transform: translateX(-50%) translateY(-100%);
     @include border-style();
     border: 2px solid $primary;

src/core/_config.scss

@@ -170,19 +170,24 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
   }
 }
 
-@mixin transition-transform($transition) {
-  -webkit-transition: -webkit-transform $transition;
-  -moz-transition: -moz-transform $transition;
-  -o-transition: -o-transform $transition;
-  transition: transform $transition;
-}
-
 @mixin translate($x, $y) {
   -webkit-transform: translate($x, $y);
   -ms-transform: translate($x, $y);
   transform: translate($x, $y);
 }
 
+/*
+  Add global transition styles to selector
+  @param string
+  @default all | 235ms | ease-in-out | 0
+*/
+@mixin transition($name:all, $duration:235ms, $animation:ease-in-out, $delay:0s){
+  -webkit-transition: $name $duration $animation $delay;
+  -moz-transition: $name $duration $animation $delay;
+  -o-transition: $name $duration $animation $delay;
+  transition: $name $duration $animation $delay;
+}
+
 /**
   Set the shadow type for a component
   @param    string
@@ -193,15 +198,15 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
     box-shadow: $shadow-hover;
     @include translate(0, 2px);
   } @else if $type == small {
-    transition: all .5s ease;
+    @include transition($animation: ease);
     box-shadow: $shadow-small;
   } @else if $type == regular {
-    transition: all .5s ease;
+    @include transition($animation: ease);
     box-shadow: $shadow-regular;
   } @else if $type == large {
-    transition: all .5s ease;
+    @include transition($animation: ease);
     box-shadow: $shadow-large;
   } @else {
-    @error "@mixin shadow(input) does not exist"
+    @error "wrong $type. available types: small | regular | large | hover"
   }
 }