Update toast style

This commit is contained in:
the1812 2018-12-02 21:39:52 +08:00
parent 86948d9def
commit d9f0122cd4
4 changed files with 12 additions and 11 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
.toast-card-container{position:fixed;left:16px;bottom:16px;display:flex;flex-direction:column;align-items:start;z-index:100001;}.toast-card{background:#fff;min-width:240px;max-width:60vw;box-shadow:0 4px 16px 1px rgba(0,0,0,.3);transition:all 0.3s cubic-bezier(0.18,0.89,0.32,1.28);transform:translateY(16px);transform-origin:bottom;opacity:0;overflow:hidden;display:flex;flex-direction:column;border-left-width:4px;border-left-style:solid;}.toast-card.visible{min-height:96px;transform:scale(1) translateY(0);opacity:1;margin-top:16px;}.toast-card-header{display:flex;align-items:center;}.toast-card-title{font-size:18px;color:#000;opacity:0.5;margin:16px;font-weight:bold;flex:1 1 auto;}svg.toast-card-dismiss{height:24px;width:24px;flex:0 0 auto;padding:16px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .2s ease-out;transform-origin:center;}svg.toast-card-dismiss:hover{transform:scale(1.2);}svg.toast-card-dismiss:active{transform:scale(1.1);}svg.toast-card-dismiss path{fill:#000;opacity:0.5;}.toast-card-message{color:#000;font-size:14px;margin:16px;margin-top:0;white-space:pre-wrap;}.toast-card.toast-default{border-left-color:#444;}.toast-card.toast-error{border-left-color:#f44336;}.toast-card.toast-info{border-left-color:#2196F3;}.toast-card.toast-success{border-left-color:#8BC34A;}.toast-card span,.toast-card .link{display:inline-block;padding:4px 6px;margin:0 2px;background-color:rgba(0,0,0,.1);border-radius:4px;text-decoration:none;color:#000;transition:all .2s ease-out;}.toast-card .link:hover{background-color:rgba(0,0,0,.2);}.toast-card .link:active{background-color:rgba(0,0,0,.1);}
.toast-card-container{position:fixed;left:16px;bottom:16px;display:flex;flex-direction:column;align-items:start;z-index:100001;}.toast-card{background:#fff;min-width:240px;max-width:60vw;min-height:0;max-height:0;box-shadow:0 4px 16px 1px rgba(0,0,0,.3);transition:all .3s cubic-bezier(0,0.65,0.58,1);transform:translateX(-150%);transform-origin:left;overflow:hidden;display:flex;flex-direction:column;border-left-width:4px;border-left-style:solid;}.toast-card.visible{min-height:96px;max-height:unset;transform:translateX(0);margin-top:16px;}.toast-card-header{display:flex;align-items:center;}.toast-card-title{font-size:18px;color:#000;opacity:0.5;margin:16px;font-weight:bold;flex:1 1 auto;}svg.toast-card-dismiss{height:24px;width:24px;flex:0 0 auto;padding:16px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .2s ease-out;transform-origin:center;}svg.toast-card-dismiss:hover{transform:scale(1.2);}svg.toast-card-dismiss:active{transform:scale(1.1);}svg.toast-card-dismiss path{fill:#000;opacity:0.5;}.toast-card-message{color:#000;font-size:14px;margin:16px;margin-top:0;white-space:pre-wrap;}.toast-card.toast-default{border-left-color:#444;}.toast-card.toast-error{border-left-color:#f44336;}.toast-card.toast-info{border-left-color:#2196F3;}.toast-card.toast-success{border-left-color:#8BC34A;}.toast-card span,.toast-card .link{display:inline-block;padding:4px 6px;margin:0 2px;background-color:rgba(0,0,0,.1);border-radius:4px;text-decoration:none;color:#000;transition:all .2s ease-out;}.toast-card .link:hover{background-color:rgba(0,0,0,.2);}.toast-card .link:active{background-color:rgba(0,0,0,.1);}

View File

@ -13,11 +13,12 @@
background: #fff;
min-width: 240px;
max-width: 60vw;
min-height: 0;
max-height: 0;
box-shadow: 0 4px 16px 1px rgba(0,0,0,.3);
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
transform: translateY(16px);
transform-origin: bottom;
opacity: 0;
transition: all .3s cubic-bezier(0, 0.65, 0.58, 1);
transform: translateX(-150%);
transform-origin: left;
overflow: hidden;
display: flex;
flex-direction: column;
@ -27,8 +28,8 @@
.toast-card.visible
{
min-height: 96px;
transform: scale(1) translateY(0);
opacity: 1;
max-height: unset;
transform: translateX(0);
margin-top: 16px;
}
.toast-card-header