linear-react-components-ui 1.1.27-rc.1 → 2.0.0-beta.1

package/lib/assets/styles/effects.scss

@@ -1,821 +0,0 @@
-//Efeito Utilizado no Dialog
-@keyframes slideInFromTop {
-  from {
-    transform: translateY(-60%);
-    -webkit-font-smoothing: subpixel-antialiased;
-  }
-  to {
-    transform: translateY(0);
-    -webkit-font-smoothing: subpixel-antialiased;
-  }
-}
-
-//slideInFromTopSlow
-
-@keyframes slideInFromTopSlow {
-  0% {
-    transform: translateY(-100%);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-
-//Slide from bottom
-.slideDownReturn {
-  -webkit-animation-name: slideDownReturn;
-  animation-name: slideDownReturn;
-}
-@-webkit-keyframes slideDownReturn {
-  0% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateY(100%);
-    transform: translateY(100%);
-  }
-
-  30% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateY(0%);
-    transform: translateY(0%);
-  }
-}
-@keyframes slideDownReturn {
-  0% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateY(100%);
-    transform: translateY(100%);
-  }
-
-  30% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateY(0%);
-    transform: translateY(0%);
-  }
-}
-
-//Slide from left
-
-.slideLeftReturn {
-  -webkit-animation-name: slideLeftReturn;
-  animation-name: slideLeftReturn;
-}
-@-webkit-keyframes slideLeftReturn {
-  0% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(-100%);
-    transform: translateX(-100%);
-  }
-
-  30% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-}
-@keyframes slideLeftReturn {
-  0% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(-100%);
-    transform: translateX(-100%);
-  }
-
-  30% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-}
-
-//Slide from right
-
-.slideRightReturn {
-  -webkit-animation-name: slideRightReturn;
-  animation-name: slideRightReturn;
-}
-@-webkit-keyframes slideRightReturn {
-  0% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(100%);
-    transform: translateX(100%);
-  }
-
-  30% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-}
-@keyframes slideRightReturn {
-  0% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(100%);
-    transform: translateX(100%);
-  }
-
-  30% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-}
-
-//Efeito Revelação - Transparencia.
-@keyframes revealelement {
-  0% {
-    color: transparent;
-    opacity: 0.0;
-  }
-  50% {
-    color: inherit;
-    opacity: 0.3;
-  }
-  100% {
-    color: inherit;
-    opacity: 1;
-  }
-}
-
-@-moz-keyframes revealelement {
-  0% {
-    -moz-color: transparent;
-    -moz-height: 0%;
-    -moz-opacity: 0.0;
-  }
-  50% {
-    -moz-color: inherit;
-    -moz-height: auto;
-    -moz-opacity: 0.3;
-  }
-  100% {
-    -moz-color: inherit;
-    -moz-opacity: 1;
-  }
-}
-
-@-webkit-keyframes revealelement {
-  0% {
-    color: transparent;
-    height: 0%;
-    opacity: 0.0;
-  }
-  50% {
-    color: inherit;
-    height: auto;
-    opacity: 0.3;
-  }
-  100% {
-    color: inherit;
-    opacity: 1;
-  }
-}
-
-@keyframes transparent-effect {
-  0% {
-    color: transparent;
-    height: 0%;
-    opacity: 0.3;
-  }
-  50% {
-    color: transparent;
-    height: auto;
-    opacity: 0.7;
-  }
-  100% {
-    color: inherit;
-    opacity: 1;
-  }
-}
-
-//Efeito Blink Aplicado no checkbox
-@keyframes blink-effect {
-  from {
-    box-shadow: 0 0 0 0 $component-selected-color,
-    inset 0 0 0 1px $component-selected-color,
-    inset 0 0 0 16px #fff,
-    inset 0 0 0 16px $component-selected-color;
-  }
-  to {
-    box-shadow: 0 0 0 1px $component-selected-color,
-    inset 0 0 0 1px $component-selected-color,
-    inset 0 0 0 16px #fff,
-    inset 0 0 0 16px $component-selected-color;
-  }
-}
-
-@keyframes show-notification {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate(0, -100%);
-    transform: translate(0, -100%);
-  }
-  10% {
-    opacity: 1;
-    -webkit-transform: translate(0, 0);
-    transform: translate(0, 0);
-  }
-  90% {
-    opacity: 1;
-    -webkit-transform: translate(0, 0);
-    transform: translate(0, 0);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform: translate(0, -100%);
-    transform: translate(0, -100%);
-  }
-}
-
-@keyframes show-notification {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate(0, -100%);
-    transform: translate(0, -100%);
-  }
-  10% {
-    opacity: 1;
-    -webkit-transform: translate(0, 0);
-    transform: translate(0, 0);
-  }
-  90% {
-    opacity: 1;
-    -webkit-transform: translate(0, 0);
-    transform: translate(0, 0);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform: translate(0, -100%);
-    transform: translate(0, -100%);
-  }
-}
-
-//Efeito left
-@-webkit-keyframes nav-anim-left {
-  0% {
-    left: 100%;
-  }
-  100% {
-    left: -3%;
-  }
-}
- 
-@-moz-keyframes nav-anim-left {
-  0% {
-    left: 100%;
-  }
-  100% {
-    left: -3%;
-  }
-}
- 
-@-o-keyframes nav-anim-left {
-  0% {
-    left: 100%;
-  }
-  100% {
-    left: -3%;
-  }
-}
- 
-@keyframes nav-anim-left {
-  0% {
-    left: 100%;
-  }
-  100% {
-    left: -3%;
-  }
-}
-.swashIn {
-  animation-name: swashIn;
-}
-@keyframes swashIn {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 50%;
-    transform: scale(0, 0);
-  }
-
-  90% {
-    opacity: 1;
-    transform-origin: 50% 50%;
-    transform: scale(0.9, 0.9);
-  }
-
-  100% {
-    opacity: 1;
-    transform-origin: 50% 50%;
-    transform: scale(1, 1);
-  }
-}
-.tinUpIn {
-  animation-name: tinUpIn;
-}
-@keyframes tinUpIn {
-  0% {
-    opacity: 0;
-    transform: scale(1, 1) translateY(-900%);
-  }
-
-  50%, 70%, 90% {
-    opacity: 1;
-    transform: scale(1.1, 1.1) translateY(0);
-  }
-
-  60%, 80%, 100% {
-    opacity: 1;
-    transform: scale(1, 1) translateY(0);
-  }
-}
-.tinRightIn {
-  animation-name: tinRightIn;
-}
-@keyframes tinRightIn {
-  0% {
-    opacity: 0;
-    transform: scale(1, 1) translateX(900%);
-  }
-
-  50%, 70%, 90% {
-    opacity: 1;
-    transform: scale(1.1, 1.1) translateX(0);
-  }
-
-  60%, 80%, 100% {
-    opacity: 1;
-    transform: scale(1, 1) translateX(0);
-  }
-}
-.tinLeftIn {
-  animation-name: tinLeftIn;
-}
-@keyframes tinLeftIn {
-  0% {
-    opacity: 0;
-    transform: scale(1, 1) translateX(-900%);
-  }
-
-  50%, 70%, 90% {
-    opacity: 1;
-    transform: scale(1.1, 1.1) translateX(0);
-  }
-
-  60%, 80%, 100% {
-    opacity: 1;
-    transform: scale(1, 1) translateX(0);
-  }
-}
-.perspectiveDown {
-  animation-name: perspectiveDown;
-}
-@keyframes perspectiveDown {
-  0% {
-    transform-origin: 0 100%;
-    transform: perspective(800px) rotateX(0deg);
-  }
-
-  100% {
-    transform-origin: 0 100%;
-    transform: perspective(800px) rotateX(-180deg);
-  }
-}
-.perspectiveUp {
-  animation-name: perspectiveUp;
-}
-@keyframes perspectiveUp {
-  0% {
-    transform-origin: 0 0;
-    transform: perspective(800px) rotateX(0deg);
-  }
-
-  100% {
-    transform-origin: 0 0;
-    transform: perspective(800px) rotateX(180deg);
-  }
-}
-.puffIn {
-  animation-name: puffIn;
-}
-@keyframes puffIn {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 50%;
-    transform: scale(2,2);
-    filter: blur(2px);
-  }
-
-  100% {
-    opacity: 1;
-    transform-origin: 50% 50%;
-    transform: scale(1,1);
-    filter: blur(0px);
-  }
-}
-.vanishIn {
-  animation-name: vanishIn;
-}
-@keyframes vanishIn {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 50%;
-    transform: scale(2, 2);
-    filter: blur(90px);
-  }
-
-  100% {
-    opacity: 1;
-    transform-origin: 50% 50%;
-    transform: scale(1, 1);
-    filter: blur(0px);
-  }
-}
-.vanishOut {
-  animation-name: vanishOut;
-}
-@keyframes vanishOut {
-  0% {
-    opacity: 1;
-    transform-origin: 50% 50%;
-    transform: scale(1, 1);
-    filter: blur(0px);
-  }
-
-  100% {
-    opacity: 0;
-    transform-origin: 50% 50%;
-    transform: scale(2, 2);
-    filter: blur(20px);
-  }
-}
-.boingInUp {
-  animation-name: boingInUp;
-}
-@keyframes boingInUp {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 0%;
-    transform: perspective(800px) rotateX(-90deg);
-  }
-  
-  50% {
-    opacity: 1;
-    transform-origin: 50% 0%;
-    transform: perspective(800px) rotateX(50deg);
-  }
-
-  100% {
-    opacity: 1;
-    transform-origin: 50% 0%;
-    transform: perspective(800px) rotateX(0deg);
-  }
-}
-.slideDown {
-  animation-name: slideDown;
-}
-@keyframes slideDown {
-  0% {
-    transform-origin: 0 0;
-    transform: translateY(0%);
-  }
-
-  10% {
-    transform-origin: 0 0;
-    transform: translateY(5%);
-  }
-}
-.slideLeft {
-  animation-name: slideLeft;
-}
-@keyframes slideLeft {
-  0% {
-    transform-origin: 0 0;
-    transform: translateX(0%);
-  }
-
-  10% {
-    transform-origin: 0 0;
-    transform: translateX(-2%);
-  }
-}
-
-@-moz-keyframes slideLeft {
-  0% {
-    -moz-transform-origin: 0 0;
-    -moz-transform: translateX(0%);
-  }
-
-  10% {
-    -moz-transform-origin: 0 0;
-    -moz-transform: translateX(-2%);
-  }
-}
-
-@-webkit-keyframes slideLeft {
-  0% {
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: translateX(0%);
-  }
-
-  10% {
-    -webkit-transform-origin: 0 0;
-    -webkit-transform: translateX(-2%);
-  }
-}
-
-.slideRight {
-  animation-name: slideRight;
-}
-@keyframes slideRight {
-  0% {
-    transform-origin: 0 0;
-    transform: translateX(0%);
-  }
-
-  100% {
-    transform-origin: 0 0;
-    transform: translateX(100%);
-  }
-}
-%hvr-grow {
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: perspective(1px) translateZ(0);
-  transform: perspective(1px) translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-property: transform;
-  transition-property: transform;
-}
-
-%hvr-grow:hover, %hvr-grow:focus, %hvr-grow:active {
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
-}
-
-%hvr-fade {
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: perspective(1px) translateZ(0);
-  transform: perspective(1px) translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  overflow: hidden;
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-property: color, background-color;
-  transition-property: color, background-color;
-}
-
-%hvr-fade:hover, %hvr-fade:focus, %hvr-fade:active {
-  background-color: #0c3652;
-  color: white;
-}
-
-.hvr-forward {
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: perspective(1px) translateZ(0);
-  transform: perspective(1px) translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-property: transform;
-  transition-property: transform;
-}
-
-.hvr-forward:hover, .hvr-forward:focus, .hvr-forward:active {
-  -webkit-transform: translateX(8px);
-  transform: translateX(8px);
-}
-
-/* Back Pulse */
-@-webkit-keyframes hvr-back-pulse {
-  50% {
-    background-color: rgba(32, 152, 209, 0.75);
-  }
-}
-@keyframes hvr-back-pulse {
-  50% {
-    background-color: rgba(32, 152, 209, 0.75);
-  }
-}
-%hvr-back-pulse {
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  overflow: hidden;
-  -webkit-transition-duration: 0.5s;
-  transition-duration: 0.5s;
-  -webkit-transition-property: color, background-color;
-  transition-property: color, background-color;
-}
-
-%hvr-back-pulse:hover, %hvr-back-pulse:focus, %hvr-back-pulse:active {
-  -webkit-animation-name: hvr-back-pulse;
-  animation-name: hvr-back-pulse;
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
-  -webkit-animation-delay: 0.5s;
-  animation-delay: 0.5s;
-  -webkit-animation-timing-function: linear;
-  animation-timing-function: linear;
-  -webkit-animation-iteration-count: 2;
-  animation-iteration-count: 2;
-  background-color: #2098D1;
-  background-color: #2098d1;
-  color: white;
-}
-
-/* Bubble Float Left */
-.hvr-bubble-float-left {
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: perspective(1px) translateZ(0);
-  transform: perspective(1px) translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  position: relative;
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-property: transform;
-  transition-property: transform;
-}
-
-.hvr-bubble-float-left:before {
-  position: absolute;
-  z-index: -1;
-  content: '';
-  top: calc(50% - 10px);
-  left: 0;
-  border-style: solid;
-  border-width: 10px 10px 10px 0;
-  border-color: transparent #e1e1e1 transparent transparent;
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-property: transform;
-  transition-property: transform;
-}
-
-.hvr-bubble-float-left:hover, .hvr-bubble-float-left:focus, .hvr-bubble-float-left:active {
-  -webkit-transform: translateX(10px);
-  transform: translateX(10px);
-}
-
-.hvr-bubble-float-left:hover:before, .hvr-bubble-float-left:focus:before, .hvr-bubble-float-left:active:before {
-  -webkit-transform: translateX(-10px);
-  transform: translateX(-10px);
-}
-
-/* Wobble Horizontal */
-@-webkit-keyframes hvr-wobble-horizontal {
-  16.65% {
-    -webkit-transform: translateX(8px);
-    transform: translateX(8px);
-  }
-  33.3% {
-    -webkit-transform: translateX(-6px);
-    transform: translateX(-6px);
-  }
-  49.95% {
-    -webkit-transform: translateX(4px);
-    transform: translateX(4px);
-  }
-  66.6% {
-    -webkit-transform: translateX(-2px);
-    transform: translateX(-2px);
-  }
-  83.25% {
-    -webkit-transform: translateX(1px);
-    transform: translateX(1px);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-}
-@keyframes hvr-wobble-horizontal {
-  16.65% {
-    -webkit-transform: translateX(8px);
-    transform: translateX(8px);
-  }
-  33.3% {
-    -webkit-transform: translateX(-6px);
-    transform: translateX(-6px);
-  }
-  49.95% {
-    -webkit-transform: translateX(4px);
-    transform: translateX(4px);
-  }
-  66.6% {
-    -webkit-transform: translateX(-2px);
-    transform: translateX(-2px);
-  }
-  83.25% {
-    -webkit-transform: translateX(1px);
-    transform: translateX(1px);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-}
-.hvr-wobble-horizontal {
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: perspective(1px) translateZ(0);
-  transform: perspective(1px) translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-}
-
-.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
-  -webkit-animation-name: hvr-wobble-horizontal;
-  animation-name: hvr-wobble-horizontal;
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
-  -webkit-animation-timing-function: ease-in-out;
-  animation-timing-function: ease-in-out;
-  -webkit-animation-iteration-count: 1;
-  animation-iteration-count: 1;
-}
-
-%hvr-menu-item {
-  vertical-align: middle;
-  -webkit-transform: perspective(1px) translateZ(0);
-  transform: perspective(1px) translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-property: transform;
-  transition-property: transform;
-}
-
-%hvr-menu-item:hover, %hvr-menu-item:focus, %hvr-menu-item:active {
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
-}
-
-
-.hvr-grow {
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: perspective(1px) translateZ(0);
-  transform: perspective(1px) translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-property: transform;
-  transition-property: transform;
-}
-
-.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
-}
-
-// SlideWithPosition
-@keyframes slideWithPositionFromLeft {
-  from {
-    left: -100%;
-  }
-  to {
-    left: 100%;
-  }
-}
-
-@keyframes slideWithPositionRightToLeft {
-  from {
-    left: 100%;
-    opacity: 0;
-  }
-  to {
-    left: 0;
-    opacity: 1;
-  }
-}
-
-@keyframes slideRightToLeftWithFade {
-  from {
-    opacity: 0;
-    transform: translateX(2%);
-  } to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideLeftToRightWithFade {
-  from {
-    opacity: 0;
-    transform: translateX(-2%);
-  } to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}