ionic-framework/dist/css/themes/ionic-ios7.css

/** 
 * Nav controllers and header bar animations
 */
/*
.content-slide-in {
  &.ng-enter, > .ng-enter {
    -webkit-transition: 0.5s ease-in-out all;
    -webkit-transform:translate3d(100%,0,0) ;
    box-shadow: -1px 0px 10px rgba(0,0,0,0.6);
  }
  &.ng-enter-active, > .ng-enter-active {
    -webkit-transform:translate3d(0,0,0) ;
  }
  &.ng-leave, > .ng-leave {
    -webkit-transition: 0.5s ease-in-out all;
    -webkit-transform:translate3d(0%,0,0);
  }
  &.ng-leave-active, > .ng-leave-active {
    -webkit-transform:translate3d(-10%,0,0);
    opacity: 0.8;
  }
}
*/
.content-slide-out.ng-enter, .content-slide-out > .ng-enter {
  z-index: 1;
  -webkit-transition: 0.5s ease-in-out all;
  -webkit-transform: translate3d(-100%, 0, 0);
  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
.content-slide-out.ng-enter-active, .content-slide-out > .ng-enter-active {
  -webkit-transform: translate3d(0, 0, 0); }
.content-slide-out.ng-leave, .content-slide-out > .ng-leave {
  z-index: 0;
  -webkit-transition: 0.5s ease-in-out all;
  -webkit-transform: translate3d(0%, 0, 0); }
.content-slide-out.ng-leave-active, .content-slide-out > .ng-leave-active {
  -webkit-transform: translate3d(10%, 0, 0);
  opacity: 0.8; }

.bar-title-in-add {
  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  -webkit-transform: translate3d(100%, 0, 0);
  opacity: 0; }

.bar-title-in-add-active {
  -webkit-transform: translate3d(0px, 0, 0);
  opacity: 1; }

.bar-title-out-add {
  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }

.bar-title-out-add-active {
  -webkit-transform: translate3d(-100%, 0, 0);
  opacity: 0; }

.bar-button-in {
  opacity: 0; }

.bar-button-in-add {
  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  -webkit-transform: translate3d(50%, 0, 0);
  opacity: 0; }

.bar-button-in-active {
  -webkit-transform: translate3d(0px, 0, 0);
  opacity: 1; }

/**
 * Tab controller animations
 */
.fade-in-out.ng-enter, .fade-in-out > .ng-enter {
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out; }
.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active {
  opacity: 1; }
.fade-in-out.ng-leave, .fade-in-out > .ng-leave {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out; }
.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active {
  opacity: 0; }

/* the overall container of the toggle */
.toggle {
  display: inline-block; }

/* hide the actual checkbox */
.toggle input {
  display: none; }

.toggle .track {
  /* the background of the toggle's track area */
  /* also the track appearance when the toggle is "off" */
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 54px;
  height: 32px;
  border: solid 2px #dddddd;
  border-radius: 20px;
  background-color: white;
  cursor: pointer;
  transition: 0.4s ease; }

.toggle .handle {
  /* the handle (circle) thats inside the toggle's track area */
  /* also the appearance when the handle is "off" */
  position: absolute;
  display: block;
  width: auto;
  /* override defaults */
  height: auto;
  /* override defaults */
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 4px 5px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  background-color: white;
  left: 0;
  top: 0;
  bottom: 0;
  right: 20px;
  transition: 0.2s ease;
  transition-property: left, right;
  transition-delay: 0s, .05s; }

.toggle :checked + .track {
  /* When the toggle is "on" */
  /* the track when the toggle is "on" */
  border-color: #4bd863;
  background-color: #ccc;
  box-shadow: inset 0 0 0 20px #4bd863;
  transition: 0.2s ease;
  /* the handle when the toggle is "on" */ }
  .toggle :checked + .track .handle {
    background-color: white;
    right: 0;
    left: 20px;
    -webkit-transform: none;
    transition-delay: .05s, 0s; }