fix: tabs
This commit is contained in:
parent
003cd1caea
commit
168b69ac8c
1 changed files with 63 additions and 63 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue