huoran
/
dq_webcode
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
22 Commits
1 Branch
1 Tag
2.1 MiB
Tag: Branch: Tree: 750da6a90a
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '750da6a90a'
${ noResults }
dq_webcode/theme/tabs.css

832 lines
24 KiB
Raw Normal View History Unescape

no message
3 years ago
/* BEM support Func
-------------------------- */
/* Element Chalk Variables */
/* Transition
-------------------------- */
/* Color
-------------------------- */
/* 53a8ff */
/* 66b1ff */
/* 79bbff */
/* 8cc5ff */
/* a0cfff */
/* b3d8ff */
/* c6e2ff */
/* d9ecff */
/* ecf5ff */
/* Link
-------------------------- */
/* Border
-------------------------- */
/* Fill
-------------------------- */
/* Typography
-------------------------- */
/* Size
-------------------------- */
/* z-index
-------------------------- */
/* Disable base
-------------------------- */
/* Icon
-------------------------- */
/* Checkbox
-------------------------- */
/* Radio
-------------------------- */
/* Select
-------------------------- */
/* Alert
-------------------------- */
/* MessageBox
-------------------------- */
/* Message
-------------------------- */
/* Notification
-------------------------- */
/* Input
-------------------------- */
/* Cascader
-------------------------- */
/* Group
-------------------------- */
/* Tab
-------------------------- */
/* Button
-------------------------- */
/* cascader
-------------------------- */
/* Switch
-------------------------- */
/* Dialog
-------------------------- */
/* Table
-------------------------- */
/* Pagination
-------------------------- */
/* Popup
-------------------------- */
/* Popover
-------------------------- */
/* Tooltip
-------------------------- */
/* Tag
-------------------------- */
/* Tree
-------------------------- */
/* Dropdown
-------------------------- */
/* Badge
-------------------------- */
/* Card
--------------------------*/
/* Slider
--------------------------*/
/* Steps
--------------------------*/
/* Menu
--------------------------*/
/* Rate
--------------------------*/
/* DatePicker
--------------------------*/
/* Loading
--------------------------*/
/* Scrollbar
--------------------------*/
/* Carousel
--------------------------*/
/* Collapse
--------------------------*/
/* Transfer
--------------------------*/
/* Header
--------------------------*/
/* Footer
--------------------------*/
/* Main
--------------------------*/
/* Timeline
--------------------------*/
/* Backtop
--------------------------*/
/* Link
--------------------------*/
/* Calendar
--------------------------*/
/* Form
-------------------------- */
/* Avatar
--------------------------*/
/* Break-point
--------------------------*/
/* Break-points
-------------------------- */
/* Scrollbar
-------------------------- */
/* Placeholder
-------------------------- */
/* BEM
-------------------------- */
/* Element Chalk Variables */
/* Transition
-------------------------- */
/* Color
-------------------------- */
/* 53a8ff */
/* 66b1ff */
/* 79bbff */
/* 8cc5ff */
/* a0cfff */
/* b3d8ff */
/* c6e2ff */
/* d9ecff */
/* ecf5ff */
/* Link
-------------------------- */
/* Border
-------------------------- */
/* Fill
-------------------------- */
/* Typography
-------------------------- */
/* Size
-------------------------- */
/* z-index
-------------------------- */
/* Disable base
-------------------------- */
/* Icon
-------------------------- */
/* Checkbox
-------------------------- */
/* Radio
-------------------------- */
/* Select
-------------------------- */
/* Alert
-------------------------- */
/* MessageBox
-------------------------- */
/* Message
-------------------------- */
/* Notification
-------------------------- */
/* Input
-------------------------- */
/* Cascader
-------------------------- */
/* Group
-------------------------- */
/* Tab
-------------------------- */
/* Button
-------------------------- */
/* cascader
-------------------------- */
/* Switch
-------------------------- */
/* Dialog
-------------------------- */
/* Table
-------------------------- */
/* Pagination
-------------------------- */
/* Popup
-------------------------- */
/* Popover
-------------------------- */
/* Tooltip
-------------------------- */
/* Tag
-------------------------- */
/* Tree
-------------------------- */
/* Dropdown
-------------------------- */
/* Badge
-------------------------- */
/* Card
--------------------------*/
/* Slider
--------------------------*/
/* Steps
--------------------------*/
/* Menu
--------------------------*/
/* Rate
--------------------------*/
/* DatePicker
--------------------------*/
/* Loading
--------------------------*/
/* Scrollbar
--------------------------*/
/* Carousel
--------------------------*/
/* Collapse
--------------------------*/
/* Transfer
--------------------------*/
/* Header
--------------------------*/
/* Footer
--------------------------*/
/* Main
--------------------------*/
/* Timeline
--------------------------*/
/* Backtop
--------------------------*/
/* Link
--------------------------*/
/* Calendar
--------------------------*/
/* Form
-------------------------- */
/* Avatar
--------------------------*/
/* Break-point
--------------------------*/
.el-tabs__header {
padding: 0;
position: relative;
margin: 0 0 15px; }
.el-tabs__active-bar {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background-color: #00B9FF;
z-index: 1;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
list-style: none; }
.el-tabs__new-tab {
float: right;
border: 1px solid #d3dce6;
height: 18px;
width: 18px;
line-height: 18px;
margin: 12px 0 9px 10px;
border-radius: 3px;
text-align: center;
font-size: 12px;
color: #d3dce6;
cursor: pointer;
-webkit-transition: all .15s;
transition: all .15s; }
.el-tabs__new-tab .el-icon-plus {
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8); }
.el-tabs__new-tab:hover {
color: #00B9FF; }
.el-tabs__nav-wrap {
overflow: hidden;
margin-bottom: -1px;
position: relative; }
.el-tabs__nav-wrap::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #E4E7ED;
z-index: 1; }
.el-tabs__nav-wrap.is-scrollable {
padding: 0 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.el-tabs__nav-scroll {
overflow: hidden; }
.el-tabs__nav-next, .el-tabs__nav-prev {
position: absolute;
cursor: pointer;
line-height: 44px;
font-size: 12px;
color: #909399; }
.el-tabs__nav-next {
right: 0; }
.el-tabs__nav-prev {
left: 0; }
.el-tabs__nav {
white-space: nowrap;
position: relative;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
float: left;
z-index: 2; }
.el-tabs__nav.is-stretch {
min-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.el-tabs__nav.is-stretch > * {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center; }
.el-tabs__item {
padding: 0 20px;
height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 40px;
display: inline-block;
list-style: none;
font-size: 14px;
font-weight: 500;
color: #303133;
position: relative; }
.el-tabs__item:focus, .el-tabs__item:focus:active {
outline: none; }
.el-tabs__item:focus.is-active.is-focus:not(:active) {
-webkit-box-shadow: 0 0 2px 2px #00B9FF inset;
box-shadow: 0 0 2px 2px #00B9FF inset;
border-radius: 3px; }
.el-tabs__item .el-icon-close {
border-radius: 50%;
text-align: center;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
margin-left: 5px; }
.el-tabs__item .el-icon-close:before {
-webkit-transform: scale(0.9);
transform: scale(0.9);
display: inline-block; }
.el-tabs__item .el-icon-close:hover {
background-color: #C0C4CC;
color: #FFFFFF; }
.el-tabs__item.is-active {
color: #00B9FF; }
.el-tabs__item:hover {
color: #00B9FF;
cursor: pointer; }
.el-tabs__item.is-disabled {
color: #C0C4CC;
cursor: default; }
.el-tabs__content {
overflow: hidden;
position: relative; }
.el-tabs--card > .el-tabs__header {
border-bottom: 1px solid #E4E7ED; }
.el-tabs--card > .el-tabs__header .el-tabs__nav-wrap::after {
content: none; }
.el-tabs--card > .el-tabs__header .el-tabs__nav {
border: 1px solid #E4E7ED;
border-bottom: none;
border-radius: 4px 4px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.el-tabs--card > .el-tabs__header .el-tabs__active-bar {
display: none; }
.el-tabs--card > .el-tabs__header .el-tabs__item .el-icon-close {
position: relative;
font-size: 12px;
width: 0;
height: 14px;
vertical-align: middle;
line-height: 15px;
overflow: hidden;
top: -1px;
right: -2px;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%; }
.el-tabs--card > .el-tabs__header .el-tabs__item {
border-bottom: 1px solid transparent;
border-left: 1px solid #E4E7ED;
-webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
.el-tabs--card > .el-tabs__header .el-tabs__item:first-child {
border-left: none; }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover {
padding-left: 13px;
padding-right: 13px; }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close {
width: 14px; }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
border-bottom-color: #FFFFFF; }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
padding-left: 20px;
padding-right: 20px; }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close {
width: 14px; }
.el-tabs--border-card {
background: #FFFFFF;
border: 1px solid #DCDFE6;
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); }
.el-tabs--border-card > .el-tabs__content {
padding: 15px; }
.el-tabs--border-card > .el-tabs__header {
background-color: #F5F7FA;
border-bottom: 1px solid #E4E7ED;
margin: 0; }
.el-tabs--border-card > .el-tabs__header .el-tabs__nav-wrap::after {
content: none; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item {
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
border: 1px solid transparent;
margin-top: -1px;
color: #909399; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
margin-left: -1px; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item {
margin-left: -1px; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
color: #00B9FF;
background-color: #FFFFFF;
border-right-color: #DCDFE6;
border-left-color: #DCDFE6; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
color: #00B9FF; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-disabled {
color: #C0C4CC; }
.el-tabs--border-card > .el-tabs__header .is-scrollable .el-tabs__item:first-child {
margin-left: 0; }
.el-tabs--top .el-tabs__item.is-top:nth-child(2),
.el-tabs--top .el-tabs__item.is-bottom:nth-child(2), .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
padding-left: 0; }
.el-tabs--top .el-tabs__item.is-top:last-child,
.el-tabs--top .el-tabs__item.is-bottom:last-child, .el-tabs--bottom .el-tabs__item.is-top:last-child,
.el-tabs--bottom .el-tabs__item.is-bottom:last-child {
padding-right: 0; }
.el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2),
.el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2),
.el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2) {
padding-left: 20px; }
.el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child,
.el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:last-child,
.el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:last-child {
padding-right: 20px; }
.el-tabs--bottom .el-tabs__header.is-bottom {
margin-bottom: 0;
margin-top: 10px; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__header.is-bottom {
border-bottom: 0;
border-top: 1px solid #DCDFE6; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__nav-wrap.is-bottom {
margin-top: -1px;
margin-bottom: 0; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom:not(.is-active) {
border: 1px solid transparent; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom {
margin: 0 -1px -1px -1px; }
.el-tabs--left, .el-tabs--right {
overflow: hidden; }
.el-tabs--left .el-tabs__header.is-left,
.el-tabs--left .el-tabs__header.is-right,
.el-tabs--left .el-tabs__nav-wrap.is-left,
.el-tabs--left .el-tabs__nav-wrap.is-right,
.el-tabs--left .el-tabs__nav-scroll, .el-tabs--right .el-tabs__header.is-left,
.el-tabs--right .el-tabs__header.is-right,
.el-tabs--right .el-tabs__nav-wrap.is-left,
.el-tabs--right .el-tabs__nav-wrap.is-right,
.el-tabs--right .el-tabs__nav-scroll {
height: 100%; }
.el-tabs--left .el-tabs__active-bar.is-left,
.el-tabs--left .el-tabs__active-bar.is-right, .el-tabs--right .el-tabs__active-bar.is-left,
.el-tabs--right .el-tabs__active-bar.is-right {
top: 0;
bottom: auto;
width: 2px;
height: auto; }
.el-tabs--left .el-tabs__nav-wrap.is-left,
.el-tabs--left .el-tabs__nav-wrap.is-right, .el-tabs--right .el-tabs__nav-wrap.is-left,
.el-tabs--right .el-tabs__nav-wrap.is-right {
margin-bottom: 0; }
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
.el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next {
height: 30px;
line-height: 30px;
width: 100%;
text-align: center;
cursor: pointer; }
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev i,
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next i, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev i,
.el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next i {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg); }
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev {
left: auto;
top: 0; }
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next {
right: auto;
bottom: 0; }
.el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable,
.el-tabs--left .el-tabs__nav-wrap.is-right.is-scrollable, .el-tabs--right .el-tabs__nav-wrap.is-left.is-scrollable,
.el-tabs--right .el-tabs__nav-wrap.is-right.is-scrollable {
padding: 30px 0; }
.el-tabs--left .el-tabs__nav-wrap.is-left::after,
.el-tabs--left .el-tabs__nav-wrap.is-right::after, .el-tabs--right .el-tabs__nav-wrap.is-left::after,
.el-tabs--right .el-tabs__nav-wrap.is-right::after {
height: 100%;
width: 2px;
bottom: auto;
top: 0; }
.el-tabs--left .el-tabs__nav.is-left,
.el-tabs--left .el-tabs__nav.is-right, .el-tabs--right .el-tabs__nav.is-left,
.el-tabs--right .el-tabs__nav.is-right {
float: none; }
.el-tabs--left .el-tabs__item.is-left,
.el-tabs--left .el-tabs__item.is-right, .el-tabs--right .el-tabs__item.is-left,
.el-tabs--right .el-tabs__item.is-right {
display: block; }
.el-tabs--left .el-tabs__header.is-left {
float: left;
margin-bottom: 0;
margin-right: 10px; }
.el-tabs--left .el-tabs__nav-wrap.is-left {
margin-right: -1px; }
.el-tabs--left .el-tabs__nav-wrap.is-left::after {
left: auto;
right: 0; }
.el-tabs--left .el-tabs__active-bar.is-left {
right: 0;
left: auto; }
.el-tabs--left .el-tabs__item.is-left {
text-align: right; }
.el-tabs--left.el-tabs--card .el-tabs__active-bar.is-left {
display: none; }
.el-tabs--left.el-tabs--card .el-tabs__item.is-left {
border-left: none;
border-right: 1px solid #E4E7ED;
border-bottom: none;
border-top: 1px solid #E4E7ED;
text-align: left; }
.el-tabs--left.el-tabs--card .el-tabs__item.is-left:first-child {
border-right: 1px solid #E4E7ED;
border-top: none; }
.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active {
border: 1px solid #E4E7ED;
border-right-color: #fff;
border-left: none;
border-bottom: none; }
.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:first-child {
border-top: none; }
.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:last-child {
border-bottom: none; }
.el-tabs--left.el-tabs--card .el-tabs__nav {
border-radius: 4px 0 0 4px;
border-bottom: 1px solid #E4E7ED;
border-right: none; }
.el-tabs--left.el-tabs--card .el-tabs__new-tab {
float: none; }
.el-tabs--left.el-tabs--border-card .el-tabs__header.is-left {
border-right: 1px solid #dfe4ed; }
.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left {
border: 1px solid transparent;
margin: -1px 0 -1px -1px; }
.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active {
border-color: transparent;
border-top-color: #d1dbe5;
border-bottom-color: #d1dbe5; }
.el-tabs--right .el-tabs__header.is-right {
float: right;
margin-bottom: 0;
margin-left: 10px; }
.el-tabs--right .el-tabs__nav-wrap.is-right {
margin-left: -1px; }
.el-tabs--right .el-tabs__nav-wrap.is-right::after {
left: 0;
right: auto; }
.el-tabs--right .el-tabs__active-bar.is-right {
left: 0; }
.el-tabs--right.el-tabs--card .el-tabs__active-bar.is-right {
display: none; }
.el-tabs--right.el-tabs--card .el-tabs__item.is-right {
border-bottom: none;
border-top: 1px solid #E4E7ED; }
.el-tabs--right.el-tabs--card .el-tabs__item.is-right:first-child {
border-left: 1px solid #E4E7ED;
border-top: none; }
.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active {
border: 1px solid #E4E7ED;
border-left-color: #fff;
border-right: none;
border-bottom: none; }
.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:first-child {
border-top: none; }
.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:last-child {
border-bottom: none; }
.el-tabs--right.el-tabs--card .el-tabs__nav {
border-radius: 0 4px 4px 0;
border-bottom: 1px solid #E4E7ED;
border-left: none; }
.el-tabs--right.el-tabs--border-card .el-tabs__header.is-right {
border-left: 1px solid #dfe4ed; }
.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right {
border: 1px solid transparent;
margin: -1px -1px -1px 0; }
.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right.is-active {
border-color: transparent;
border-top-color: #d1dbe5;
border-bottom-color: #d1dbe5; }
.slideInRight-transition,
.slideInLeft-transition {
display: inline-block; }
.slideInRight-enter {
-webkit-animation: slideInRight-enter .3s;
animation: slideInRight-enter .3s; }
.slideInRight-leave {
position: absolute;
left: 0;
right: 0;
-webkit-animation: slideInRight-leave .3s;
animation: slideInRight-leave .3s; }
.slideInLeft-enter {
-webkit-animation: slideInLeft-enter .3s;
animation: slideInLeft-enter .3s; }
.slideInLeft-leave {
position: absolute;
left: 0;
right: 0;
-webkit-animation: slideInLeft-leave .3s;
animation: slideInLeft-leave .3s; }
@-webkit-keyframes slideInRight-enter {
0% {
opacity: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%); }
to {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes slideInRight-enter {
0% {
opacity: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%); }
to {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0); } }
@-webkit-keyframes slideInRight-leave {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1; }
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0; } }
@keyframes slideInRight-leave {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1; }
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0; } }
@-webkit-keyframes slideInLeft-enter {
0% {
opacity: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
to {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes slideInLeft-enter {
0% {
opacity: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
to {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0); } }
@-webkit-keyframes slideInLeft-leave {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1; }
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0; } }
@keyframes slideInLeft-leave {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1; }
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0; } }