Files
sogo/UI/WebServerResources/scss/components/tabs/demoStaticTabs/style.css

86 lines
1.4 KiB
CSS

#tab1-content {
background-color: #3F51B5;
}
#tab2-content {
background-color: #673AB7;
}
#tab3-content {
background-color: #00796B;
}
/*
* Animation styles
*/
.tabpanel-container {
display: block;
position: relative;
background: white;
border: 0px solid black;
height: 300px;
overflow: hidden;
}
[role="tabpanel"] {
color: white;
width: 100%;
height: 100%;
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
position:absolute;
}
[role="tabpanel"].ng-leave.ng-leave-active,
[role="tabpanel"].ng-enter {
top:-300px;
}
[role="tabpanel"].ng-leave,
[role="tabpanel"].ng-enter.ng-enter-active {
top:0;
}
[role="tabpanel"].ng-leave {
z-index: 100;
}
.tabpanel-container [role="tabpanel"] {
padding:20px;
}
.after-tabs-area {
padding: 25px;
}
.after-tabs-area > span {
margin-top:25px;
padding-right: 15px;
vertical-align: middle;
line-height: 30px;
height: 35px;
}
.after-tabs-area > md-checkbox {
margin-top:26px;
margin-left:0px;
}
.md-header {
background-color: #1976D2 !important;
}
md-tab {
color: #90caf9 !important;
}
md-tab.active,
md-tab:focus {
color: white !important;
}
md-tab[disabled] {
opacity: 0.5;
}
.md-header .md-ripple {
border-color: #FFFF8D !important;
}
md-tabs-ink-bar {
background-color: #FFFF8D !important;
}