Default to 200ms for all transitions and animations [#157670024]

Signed-off-by: Steven Locke <slocke@pivotal.io>

spec/pivotal-ui-react/modals/modals_spec.js

@@ -29,14 +29,14 @@ describe('BaseModal', () => {
   it('renders a hidden backdrop', () => {
     expect('.pui-modal-backdrop').not.toHaveClass('pui-modal-show');
     expect('.pui-modal-backdrop').toHaveCss({
-      visibility: 'hidden', transition: 'opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s'
+      visibility: 'hidden', transition: 'opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s'
     });
     expect('.pui-modal-backdrop').toHaveAttr('aria-hidden', 'true');
   });
 
   it('renders a hidden dialog', () => {
     expect('.pui-modal-dialog').not.toHaveClass('pui-modal-show');
-    expect('.pui-modal-dialog').toHaveCss({transition: 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s'});
+    expect('.pui-modal-dialog').toHaveCss({transition: 'transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s'});
   });
 
   it('renders a close button', () => {

src/css/collapse/collapse.scss

@@ -166,13 +166,4 @@ tr.pui-collapsible.in, tr.collapse.in {
 
 tbody.pui-collapsible.in, tbody.collapse.in {
   display: table-row-group;
-}
-
-.pui-collapsing, .collapsing {
-  position: relative;
-  height: 0;
-  overflow: hidden;
-  @include transition-property(height, visibility);
-  @include transition-duration(.35s);
-  @include transition-timing-function(ease);
 }

src/css/common/common.scss

@@ -126,7 +126,7 @@ button.pui-close, button.close {
 
 .fade {
   opacity: 0;
-  @include transition(opacity .15s linear);
+  @include transition(opacity .2s linear);
   &.in {
     opacity: 1;
   }

src/css/links/links.scss

@@ -5,8 +5,6 @@ a {
   color: $link-color;
   text-decoration: none;
   @include transition-pui();
-
-  transition: all 150ms ease-out;
 }
 
 a:hover {

src/css/mixins.scss

@@ -1,6 +1,6 @@
 /* Transition mixins */
 
-@mixin transition-pui($type:all, $speed:300ms, $ease: ease-out) {
+@mixin transition-pui($type:all, $speed:200ms, $ease: ease-out) {
   -webkit-transition: $type $speed $ease;
   -moz-transition: $type $speed $ease;
   transition: $type $speed $ease;

src/css/radio/radio.scss

@@ -67,6 +67,6 @@
     opacity: 0;
     width: 4px;
     height: 4px;
-    transition: width ease-out .15s, height ease-out .15s;
+    transition: width ease-out .2s, height ease-out .2s;
   }
 }

src/css/tabs/tabs.scss

@@ -189,56 +189,6 @@
   }
 }
 
-.tab-highlight {
-  .nav {
-    > li {
-      position: relative;
-      overflow: hidden;
-
-      + li {
-        margin-top: -$tab-highlight-border-width;
-      }
-
-      > a {
-        padding: 15px;
-        color: $tab-highlight-tab-color;
-        background-color: $tab-highlight-bg-color;
-        transition: background-color 150ms ease-out;
-      }
-
-      > a:hover {
-        z-index: 100;
-        background-color: $tab-highlight-hover-bg-color;
-      }
-    }
-
-    > li.active {
-      a {
-        z-index: 50;
-      }
-
-      > a,
-      > a:hover {
-        color: $tab-highlight-tab-active-color;
-        background-color: $tab-highlight-tab-hover-bg-color;
-        border-width: 0;
-        cursor: default;
-      }
-    }
-
-    .tab-title {
-      font-size: $nav-tabs-title-font-size;
-    }
-  }
-
-  //content area of tabs
-  .tab-content {
-    border-top: $tab-highlight-border-width solid $tab-highlight-border-color;
-    padding: 0;
-    margin-left: -20px;
-  }
-}
-
 $tab-border-size: 1px;
 $tab-padding: $base-unit ($base-unit*2);
 $tab-action-padding: ($base-unit/2) ($base-unit*2);
@@ -438,41 +388,6 @@ $tab-action-padding: ($base-unit/2) ($base-unit*2);
   }
 }
 
-.tabs-images {
-  .nav-tabs-images {
-    text-align: center;
-    li {
-      a[data-toggle=tab] {
-        display: inline-block;
-        width: 130px;
-        height: 130px;
-        margin: 0 30px;
-        @include button-shadow;
-        background-color: $neutral-8;
-        border-radius: 130px;
-        transition: all 300ms ease;
-        color: $neutral-5;
-
-        .icon-svg {
-          .icon {
-            fill: currentColor;
-          }
-        }
-      }
-    }
-  }
-
-  .nav-tabs-images li {
-    &.active a,
-    &:hover a,
-    &:focus a,
-    &:active a {
-      background-color: $teal-3;
-      color: $neutral-11;
-    }
-  }
-}
-
 .tab-simple-small-screen, .tab-simple-alt-small-screen, .tab-left-small-screen {
   .tab-title > a.disabled {
     color: $nav-disabled-link-color;

src/react/back-to-top/back-to-top.js

@@ -23,7 +23,7 @@ export class BackToTop extends mixin(React.PureComponent).with(Animation) {
     scrollableId: PropTypes.string
   };
 
-  static FADE_DURATION = 300;
+  static FADE_DURATION = 200;
   static VISIBILITY_HEIGHT = 400;
   static SCROLL_DURATION = 200;
 

src/react/collapsible/collapsible.js

@@ -26,7 +26,7 @@ class CollapsibleComponent extends mixin(React.Component).with(Animation) {
   };
 
   static defaultProps = {
-    delay: 400
+    delay: 200
   };
 
   componentDidMount() {

src/react/modals/modals.js

@@ -23,7 +23,7 @@ export class BaseModal extends PureComponent {
   };
 
   static defaultProps = {
-    animationDuration: 300,
+    animationDuration: 200,
     animationEasing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
     getActiveElement: () => global.document.activeElement
   };