Merge pull request #2645 from cmgustavo/bug/ux-animation-03
Fix scroll after animation. Removes unused attributes
This commit is contained in:
Matias Alejo Garcia
commit
d816c08dc8
2 changed files with 86 additions and 38 deletions
|
|
@ -123,7 +123,6 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, inpu
|
|||
.page, .main {
|
||||
height:100%;
|
||||
background-color: #fff;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.button.small.side-bar {
|
||||
|
|
@ -505,21 +504,17 @@ ul.pagination li.current a {
|
|||
input {
|
||||
border-radius: 2px;
|
||||
background: #EDEDED;
|
||||
-moz-box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.09), inset 1px 1px 0px 0px rgba(0,0,0,0.05);
|
||||
box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.09), inset 1px 1px 0px 0px rgba(0,0,0,0.05);
|
||||
color: #2C3E42;
|
||||
padding: 1.2rem 0.7rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea {
|
||||
input[type="color"], input[type="date"], input[type="datetime-local"], input[type="datetime"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], textarea {
|
||||
color: #B7C2CD;
|
||||
margin-bottom: 1.5rem;
|
||||
height: 35px;
|
||||
background: transparent;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
padding-left: 0.1rem;
|
||||
font-size: 13px;
|
||||
|
|
@ -530,14 +525,13 @@ input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus
|
|||
color: #4B6178;
|
||||
border-color: #CED5DC;
|
||||
background: transparent;
|
||||
transition: none !important;
|
||||
-webkit-transition: none !important;
|
||||
}
|
||||
|
||||
input[type="text"][disabled], input[type="text"][readonly], fieldset[disabled] input[type="text"], input[type="password"][disabled], input[type="password"][readonly], fieldset[disabled] input[type="password"], input[type="date"][disabled], input[type="date"][readonly], fieldset[disabled] input[type="date"], input[type="datetime"][disabled], input[type="datetime"][readonly], fieldset[disabled] input[type="datetime"], input[type="datetime-local"][disabled], input[type="datetime-local"][readonly], fieldset[disabled] input[type="datetime-local"], input[type="month"][disabled], input[type="month"][readonly], fieldset[disabled] input[type="month"], input[type="week"][disabled], input[type="week"][readonly], fieldset[disabled] input[type="week"], input[type="email"][disabled], input[type="email"][readonly], fieldset[disabled] input[type="email"], input[type="number"][disabled], input[type="number"][readonly], fieldset[disabled] input[type="number"], input[type="search"][disabled], input[type="search"][readonly], fieldset[disabled] input[type="search"], input[type="tel"][disabled], input[type="tel"][readonly], fieldset[disabled] input[type="tel"], input[type="time"][disabled], input[type="time"][readonly], fieldset[disabled] input[type="time"], input[type="url"][disabled], input[type="url"][readonly], fieldset[disabled] input[type="url"], input[type="color"][disabled], input[type="color"][readonly], fieldset[disabled] input[type="color"], textarea[disabled], textarea[readonly], fieldset[disabled] textarea {
|
||||
background-color: #E4E8EC;
|
||||
color: #2C3E50;
|
||||
padding-left: 0.5rem;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
select {
|
||||
|
|
|
|||
|
|
@ -573,26 +573,61 @@ a.pin-button:active {
|
|||
.reveal-modal .fade .in,
|
||||
.reveal-modal.fade.full.in,
|
||||
.reveal-modal.fade.full.out,
|
||||
.reveal-modal.fade.full {
|
||||
/*CSS transitions*/
|
||||
-o-transition-property: none !important;
|
||||
-moz-transition-property: none !important;
|
||||
-ms-transition-property: none !important;
|
||||
-webkit-transition-property: none !important;
|
||||
transition-property: none !important;
|
||||
/*CSS transforms*/
|
||||
-o-transform: none !important;
|
||||
-moz-transform: none !important;
|
||||
-ms-transform: none !important;
|
||||
-webkit-transform: none !important;
|
||||
transform: none !important;
|
||||
/*CSS animations*/
|
||||
-webkit-animation: none !important;
|
||||
-moz-animation: none !important;
|
||||
-o-animation: none !important;
|
||||
-ms-animation: none !important;
|
||||
animation: none !important;
|
||||
|
||||
.reveal-modal.fade.full,
|
||||
input[type="color"],
|
||||
input[type="date"],
|
||||
input[type="datetime-local"],
|
||||
input[type="datetime"],
|
||||
input[type="email"],
|
||||
input[type="month"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="text"],
|
||||
input[type="time"],
|
||||
input[type="url"],
|
||||
input[type="week"],
|
||||
textarea,
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="date"]:focus,
|
||||
input[type="datetime"]:focus,
|
||||
input[type="datetime-local"]:focus,
|
||||
input[type="month"]:focus,
|
||||
input[type="week"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="color"]:focus,
|
||||
textarea:focus
|
||||
{
|
||||
opacity: 1;
|
||||
/*CSS transitions*/
|
||||
-o-transition-property: none !important;
|
||||
-moz-transition-property: none !important;
|
||||
-ms-transition-property: none !important;
|
||||
-webkit-transition-property: none !important;
|
||||
transition-property: none !important;
|
||||
/*CSS transforms*/
|
||||
-o-transform: none !important;
|
||||
-moz-transform: none !important;
|
||||
-ms-transform: none !important;
|
||||
-webkit-transform: none !important;
|
||||
transform: none !important;
|
||||
/*CSS animations*/
|
||||
-webkit-animation: none !important;
|
||||
-moz-animation: none !important;
|
||||
-o-animation: none !important;
|
||||
-ms-animation: none !important;
|
||||
animation: none !important;
|
||||
/*CSS box-shadow*/
|
||||
-webkit-box-shadow: none !important;
|
||||
-moz-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.popup-tx-status {
|
||||
|
|
@ -658,46 +693,65 @@ a.pin-button:active {
|
|||
color: #B7C2CD;
|
||||
}
|
||||
|
||||
.animation-left, .animation-right {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.animation-left.ng-enter, .animation-left.ng-leave,
|
||||
.animation-right.ng-enter, .animation-right.ng-leave {
|
||||
-webkit-transition: all ease-in-out 250ms;
|
||||
transition: all ease-in-out 250ms;
|
||||
-webkit-transition: all ease 300ms;
|
||||
transition: all ease 300ms;
|
||||
}
|
||||
|
||||
.animation-left.ng-enter {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
-webkit-transition-delay: 0.001s;
|
||||
transition-delay: 0.001s;
|
||||
-webkit-transition-delay: 0.01s;
|
||||
transition-delay: 0.01s;
|
||||
opacity: 0;
|
||||
}
|
||||
.animation-right.ng-enter {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
-webkit-transition-delay: 0.001s;
|
||||
transition-delay: 0.001s;
|
||||
-webkit-transition-delay: 0.01s;
|
||||
transition-delay: 0.01s;
|
||||
opacity: 0;
|
||||
}
|
||||
.animation-left.ng-enter.ng-enter-active,
|
||||
.animation-right.ng-enter.ng-enter-active {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.animation-left.ng-leave,
|
||||
.animation-right.ng-leave {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
.animation-left.ng-leave.animation-left.ng-leave-active {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
-webkit-transition-delay: 0.001s;
|
||||
transition-delay: 0.001s;
|
||||
-webkit-transition-delay: 0.01s;
|
||||
transition-delay: 0.01s;
|
||||
opacity: 0;
|
||||
}
|
||||
.animation-right.ng-leave.animation-right.ng-leave-active {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
-webkit-transition-delay: 0.001s;
|
||||
transition-delay: 0.001s;
|
||||
-webkit-transition-delay: 0.01s;
|
||||
transition-delay: 0.01s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tab-view {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue