fix: tabs

This commit is contained in:
Shivam Mishra 2020-07-01 20:53:08 +05:30
parent 003cd1caea
commit 168b69ac8c

View file

@ -7,45 +7,45 @@
#alert-container .desk-alert {
box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1), 0px 2px 6px rgba(17, 43, 66, 0.08);
width: 400px;
min-height: 50px;
width: 400px;
min-height: 50px;
max-height: 200px;
background-color: $white;
-webkit-animation-name: backInRight;
animation-name: backInRight;
animation-duration: 600ms;
background-color: $white;
-webkit-animation-name: backInRight;
animation-name: backInRight;
animation-duration: 600ms;
// word-break: break-all;
overflow-y: auto;
position: relative;
// transform: translateX(calc(100% + 20px));
// transition: transform 300ms ease;
padding: 0px;
border-radius: var(--border-radius-md);
padding: 0px;
border-radius: var(--border-radius-md);
.alert-message-container {
padding: 16px 40px 16px 16px;
.icon {
margin-right: 10px;
}
.alert-title-container {
display: flex;
align-items: center;
}
padding: 16px 40px 16px 16px;
.icon {
margin-right: 10px;
}
.alert-title-container {
display: flex;
align-items: center;
}
.alert-message {
font-weight: 500;
color: var(--grey-900);
line-height: 20px;
}
.alert-message {
font-weight: 500;
color: var(--grey-900);
line-height: 20px;
}
.alert-subtitle {
font-size: 13px;
padding-left: 34px;
}
.alert-subtitle {
font-size: 13px;
padding-left: 34px;
}
}
.close {
@ -68,53 +68,53 @@
border-right: 1px solid $border-color;
padding: 7px;
outline: none;
font-size: 12px;
font-weight: 500;
color: $text-muted;
&:hover {
color: var(--grey-900)
}
font-size: 12px;
font-weight: 500;
color: $text-muted;
&:hover {
color: var(--grey-900)
}
&:last-child {
border-right: none;
}
}
}
&.out {
-webkit-animation-name: backOutRight;
animation-name: backOutRight;
animation-duration: 1.6s;
}
}
&.out {
-webkit-animation-name: backOutRight;
animation-name: backOutRight;
animation-duration: 1.6s;
}
}
@keyframes backInRight {
0% {
-webkit-transform: translateX(2000px) scale(0.8);
transform: translateX(2000px) scale(0.8);
opacity: 0.7;
}
0% {
-webkit-transform: translateX(2000px) scale(0.8);
transform: translateX(2000px) scale(0.8);
opacity: 0.7;
}
80% {
-webkit-transform: translateX(0px) scale(0.8);
transform: translateX(0px) scale(0.8);
opacity: 0.7;
}
80% {
-webkit-transform: translateX(0px) scale(0.8);
transform: translateX(0px) scale(0.8);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes backOutRight {
0% { opacity: 1; }
0% { opacity: 1; }
100% {
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
opacity: 0.7;
}
100% {
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
opacity: 0.7;
}
}