UNPKG

yqcloud-ui

Version:

An enterprise-class UI design language and React-based implementation

1,132 lines (1,131 loc) 35.8 kB
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ /* stylelint-disable no-duplicate-selectors */ /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ .ant-btn-raised .ant-ripple { background-color: rgba(0, 0, 0, 0.1); } .ant-btn-raised.ant-btn-primary .ant-ripple, .ant-btn-raised.ant-btn-dashed .ant-ripple, .ant-btn-raised.ant-btn-danger .ant-ripple { background-color: rgba(255, 255, 255, 0.3); } .ant-btn-raised-loading .ant-ripple-wrapper { background-color: rgba(255, 255, 255, 0.15); } .ant-btn-raised.ripple-primary .ant-ripple { background-color: rgba(33, 150, 243, 0.1); } .ant-btn { line-height: 32px; display: inline-block; font-weight: 400; text-align: center; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background-image: none; border: none; white-space: nowrap; padding: 0 15px; font-size: 12px; border-radius: 4px; height: 32px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -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); position: relative; text-transform: uppercase; letter-spacing: .01em; -webkit-box-sizing: border-box; box-sizing: border-box; color: #04173F; background-color: transparent; border-color: #CCD3D9; } .ant-btn > .icon { margin-right: 4px; font-size: 18px; } .ant-btn, .ant-btn:active, .ant-btn:focus { outline: 0; } .ant-btn:not([disabled]):hover { text-decoration: none; } .ant-btn:not([disabled]):active { outline: 0; -webkit-transition: none; transition: none; } .ant-btn.disabled, .ant-btn[disabled] { cursor: not-allowed; } .ant-btn.disabled > *, .ant-btn[disabled] > * { pointer-events: none; } .ant-btn.ant-btn-lg { padding: 0 15px; font-size: 15px; border-radius: 4px; height: 40px; line-height: 40px; } .ant-btn.ant-btn-lg > .icon { margin-right: 5px; font-size: 20px; } .ant-btn.ant-btn-lg.ant-btn-dashed { line-height: 36px; } .ant-btn.ant-btn-lg.ant-btn-dashed > .icon { line-height: 36px; } .ant-btn.ant-btn-sm { padding: 0 7px; font-size: 9px; border-radius: 4px; height: 28px; line-height: 28px; } .ant-btn.ant-btn-sm > .icon { margin-right: 3.5px; font-size: 16px; } .ant-btn.ant-btn-sm.ant-btn-dashed { line-height: 24px; } .ant-btn.ant-btn-sm.ant-btn-dashed > .icon { line-height: 24px; } .ant-btn > a:only-child { color: currentColor; } .ant-btn > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .ant-btn > i.icon { color: currentColor; } .ant-btn div.btn-loading > span { background: #04173F; } .ant-btn.disabled, .ant-btn[disabled], .ant-btn.disabled:hover, .ant-btn[disabled]:hover, .ant-btn.disabled:focus, .ant-btn[disabled]:focus, .ant-btn.disabled:active, .ant-btn[disabled]:active, .ant-btn.disabled.active, .ant-btn[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: transparent; border-color: #CCD3D9; } .ant-btn.disabled > a:only-child, .ant-btn[disabled] > a:only-child, .ant-btn.disabled:hover > a:only-child, .ant-btn[disabled]:hover > a:only-child, .ant-btn.disabled:focus > a:only-child, .ant-btn[disabled]:focus > a:only-child, .ant-btn.disabled:active > a:only-child, .ant-btn[disabled]:active > a:only-child, .ant-btn.disabled.active > a:only-child, .ant-btn[disabled].active > a:only-child { color: currentColor; } .ant-btn.disabled > a:only-child:after, .ant-btn[disabled] > a:only-child:after, .ant-btn.disabled:hover > a:only-child:after, .ant-btn[disabled]:hover > a:only-child:after, .ant-btn.disabled:focus > a:only-child:after, .ant-btn[disabled]:focus > a:only-child:after, .ant-btn.disabled:active > a:only-child:after, .ant-btn[disabled]:active > a:only-child:after, .ant-btn.disabled.active > a:only-child:after, .ant-btn[disabled].active > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .ant-btn.disabled > i.icon, .ant-btn[disabled] > i.icon, .ant-btn.disabled:hover > i.icon, .ant-btn[disabled]:hover > i.icon, .ant-btn.disabled:focus > i.icon, .ant-btn[disabled]:focus > i.icon, .ant-btn.disabled:active > i.icon, .ant-btn[disabled]:active > i.icon, .ant-btn.disabled.active > i.icon, .ant-btn[disabled].active > i.icon { color: currentColor; } .ant-btn:hover, .ant-btn:focus, .ant-btn:active, .ant-btn.active { text-decoration: none; } .ant-btn > i.icon { pointer-events: none; display: inline-block; vertical-align: top; line-height: inherit; } .ant-btn > span { display: inline-block; } .ant-btn > i.icon + span, .ant-btn > span + i.icon { margin-left: 4px; } .ant-btn > div.btn-loading { display: inline-block; width: 32px; margin-right: 4px; } .ant-btn > div.btn-loading > span { background: #000; border-color: #000; display: inline-block; border-radius: 50%; width: 7px; height: 7px; } .ant-btn > div.btn-loading .dot1 { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-animation: btn-loading 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.07s infinite normal; animation: btn-loading 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.07s infinite normal; } .ant-btn > div.btn-loading .dot2 { margin: 0 3px; opacity: 0.9; -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); -webkit-animation: btn-loading 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.17s infinite normal; animation: btn-loading 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.17s infinite normal; } .ant-btn > div.btn-loading .dot3 { opacity: 0.9; -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); -webkit-animation: btn-loading 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.27s infinite normal; animation: btn-loading 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.27s infinite normal; } .ant-btn-flat.ant-btn-primary { color: #2196f3; background-color: transparent; border-color: transparent; } .ant-btn-flat.ant-btn-primary > a:only-child { color: currentColor; } .ant-btn-flat.ant-btn-primary > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .ant-btn-flat.ant-btn-primary > i.icon { color: currentColor; } .ant-btn-flat.ant-btn-primary.disabled, .ant-btn-flat.ant-btn-primary[disabled], .ant-btn-flat.ant-btn-primary.disabled:hover, .ant-btn-flat.ant-btn-primary[disabled]:hover, .ant-btn-flat.ant-btn-primary.disabled:focus, .ant-btn-flat.ant-btn-primary[disabled]:focus, .ant-btn-flat.ant-btn-primary.disabled:active, .ant-btn-flat.ant-btn-primary[disabled]:active, .ant-btn-flat.ant-btn-primary.disabled.active, .ant-btn-flat.ant-btn-primary[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: transparent; border-color: #CCD3D9; } .ant-btn-flat.ant-btn-primary.disabled > a:only-child, .ant-btn-flat.ant-btn-primary[disabled] > a:only-child, .ant-btn-flat.ant-btn-primary.disabled:hover > a:only-child, .ant-btn-flat.ant-btn-primary[disabled]:hover > a:only-child, .ant-btn-flat.ant-btn-primary.disabled:focus > a:only-child, .ant-btn-flat.ant-btn-primary[disabled]:focus > a:only-child, .ant-btn-flat.ant-btn-primary.disabled:active > a:only-child, .ant-btn-flat.ant-btn-primary[disabled]:active > a:only-child, .ant-btn-flat.ant-btn-primary.disabled.active > a:only-child, .ant-btn-flat.ant-btn-primary[disabled].active > a:only-child { color: currentColor; } .ant-btn-flat.ant-btn-primary.disabled > a:only-child:after, .ant-btn-flat.ant-btn-primary[disabled] > a:only-child:after, .ant-btn-flat.ant-btn-primary.disabled:hover > a:only-child:after, .ant-btn-flat.ant-btn-primary[disabled]:hover > a:only-child:after, .ant-btn-flat.ant-btn-primary.disabled:focus > a:only-child:after, .ant-btn-flat.ant-btn-primary[disabled]:focus > a:only-child:after, .ant-btn-flat.ant-btn-primary.disabled:active > a:only-child:after, .ant-btn-flat.ant-btn-primary[disabled]:active > a:only-child:after, .ant-btn-flat.ant-btn-primary.disabled.active > a:only-child:after, .ant-btn-flat.ant-btn-primary[disabled].active > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .ant-btn-flat.ant-btn-primary.disabled > i.icon, .ant-btn-flat.ant-btn-primary[disabled] > i.icon, .ant-btn-flat.ant-btn-primary.disabled:hover > i.icon, .ant-btn-flat.ant-btn-primary[disabled]:hover > i.icon, .ant-btn-flat.ant-btn-primary.disabled:focus > i.icon, .ant-btn-flat.ant-btn-primary[disabled]:focus > i.icon, .ant-btn-flat.ant-btn-primary.disabled:active > i.icon, .ant-btn-flat.ant-btn-primary[disabled]:active > i.icon, .ant-btn-flat.ant-btn-primary.disabled.active > i.icon, .ant-btn-flat.ant-btn-primary[disabled].active > i.icon { color: currentColor; } .ant-btn-flat.ant-btn-primary div.btn-loading > span { background: #2196f3; } .ant-btn-group .ant-btn-flat.ant-btn-primary:not(:first-child):not(:last-child) { border-right-color: #4db5ff; border-left-color: #4db5ff; } .ant-btn-group .ant-btn-flat.ant-btn-primary:not(:first-child):not(:last-child):disabled { border-color: #CCD3D9; } .ant-btn-group .ant-btn-flat.ant-btn-primary:first-child:not(:last-child) { border-right-color: #4db5ff; } .ant-btn-group .ant-btn-flat.ant-btn-primary:first-child:not(:last-child)[disabled] { border-right-color: #CCD3D9; } .ant-btn-group .ant-btn-flat.ant-btn-primary:last-child:not(:first-child), .ant-btn-group .ant-btn-flat.ant-btn-primary + .ant-btn-flat.ant-btn-primary { border-left-color: #4db5ff; } .ant-btn-group .ant-btn-flat.ant-btn-primary:last-child:not(:first-child)[disabled], .ant-btn-group .ant-btn-flat.ant-btn-primary + .ant-btn-flat.ant-btn-primary[disabled] { border-left-color: #CCD3D9; } .ant-btn-raised.ant-btn-primary { color: #fff; background-color: #2196f3; border-color: #2196f3; } .ant-btn-raised.ant-btn-primary > a:only-child { color: currentColor; } .ant-btn-raised.ant-btn-primary > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .ant-btn-raised.ant-btn-primary > i.icon { color: currentColor; } .ant-btn-raised.ant-btn-primary.disabled, .ant-btn-raised.ant-btn-primary[disabled], .ant-btn-raised.ant-btn-primary.disabled:hover, .ant-btn-raised.ant-btn-primary[disabled]:hover, .ant-btn-raised.ant-btn-primary.disabled:focus, .ant-btn-raised.ant-btn-primary[disabled]:focus, .ant-btn-raised.ant-btn-primary.disabled:active, .ant-btn-raised.ant-btn-primary[disabled]:active, .ant-btn-raised.ant-btn-primary.disabled.active, .ant-btn-raised.ant-btn-primary[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: transparent; border-color: #CCD3D9; } .ant-btn-raised.ant-btn-primary.disabled > a:only-child, .ant-btn-raised.ant-btn-primary[disabled] > a:only-child, .ant-btn-raised.ant-btn-primary.disabled:hover > a:only-child, .ant-btn-raised.ant-btn-primary[disabled]:hover > a:only-child, .ant-btn-raised.ant-btn-primary.disabled:focus > a:only-child, .ant-btn-raised.ant-btn-primary[disabled]:focus > a:only-child, .ant-btn-raised.ant-btn-primary.disabled:active > a:only-child, .ant-btn-raised.ant-btn-primary[disabled]:active > a:only-child, .ant-btn-raised.ant-btn-primary.disabled.active > a:only-child, .ant-btn-raised.ant-btn-primary[disabled].active > a:only-child { color: currentColor; } .ant-btn-raised.ant-btn-primary.disabled > a:only-child:after, .ant-btn-raised.ant-btn-primary[disabled] > a:only-child:after, .ant-btn-raised.ant-btn-primary.disabled:hover > a:only-child:after, .ant-btn-raised.ant-btn-primary[disabled]:hover > a:only-child:after, .ant-btn-raised.ant-btn-primary.disabled:focus > a:only-child:after, .ant-btn-raised.ant-btn-primary[disabled]:focus > a:only-child:after, .ant-btn-raised.ant-btn-primary.disabled:active > a:only-child:after, .ant-btn-raised.ant-btn-primary[disabled]:active > a:only-child:after, .ant-btn-raised.ant-btn-primary.disabled.active > a:only-child:after, .ant-btn-raised.ant-btn-primary[disabled].active > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .ant-btn-raised.ant-btn-primary.disabled > i.icon, .ant-btn-raised.ant-btn-primary[disabled] > i.icon, .ant-btn-raised.ant-btn-primary.disabled:hover > i.icon, .ant-btn-raised.ant-btn-primary[disabled]:hover > i.icon, .ant-btn-raised.ant-btn-primary.disabled:focus > i.icon, .ant-btn-raised.ant-btn-primary[disabled]:focus > i.icon, .ant-btn-raised.ant-btn-primary.disabled:active > i.icon, .ant-btn-raised.ant-btn-primary[disabled]:active > i.icon, .ant-btn-raised.ant-btn-primary.disabled.active > i.icon, .ant-btn-raised.ant-btn-primary[disabled].active > i.icon { color: currentColor; } .ant-btn-raised.ant-btn-primary div.btn-loading > span { background: #fff; } .ant-btn-group .ant-btn-raised.ant-btn-primary:not(:first-child):not(:last-child) { border-right-color: #4db5ff; border-left-color: #4db5ff; } .ant-btn-group .ant-btn-raised.ant-btn-primary:first-child:not(:last-child) { border-right-color: #4db5ff; } .ant-btn-group .ant-btn-raised.ant-btn-primary:first-child:not(:last-child)[disabled] { border-right-color: #CCD3D9; } .ant-btn-group .ant-btn-raised.ant-btn-primary:last-child:not(:first-child), .ant-btn-group .ant-btn-raised.ant-btn-primary + .ant-btn-raised.ant-btn-primary { border-left-color: #4db5ff; } .ant-btn-group .ant-btn-raised.ant-btn-primary:last-child:not(:first-child)[disabled], .ant-btn-group .ant-btn-raised.ant-btn-primary + .ant-btn-raised.ant-btn-primary[disabled] { border-left-color: #CCD3D9; } .ant-btn-ghost { color: #04173F; background-color: transparent; border-color: #CCD3D9; } .ant-btn-ghost > a:only-child { color: currentColor; } .ant-btn-ghost > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .ant-btn-ghost > i.icon { color: currentColor; } .ant-btn-ghost div.btn-loading > span { background: #04173F; } .ant-btn-ghost.disabled, .ant-btn-ghost[disabled], .ant-btn-ghost.disabled:hover, .ant-btn-ghost[disabled]:hover, .ant-btn-ghost.disabled:focus, .ant-btn-ghost[disabled]:focus, .ant-btn-ghost.disabled:active, .ant-btn-ghost[disabled]:active, .ant-btn-ghost.disabled.active, .ant-btn-ghost[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: transparent; border-color: #CCD3D9; } .ant-btn-ghost.disabled > a:only-child, .ant-btn-ghost[disabled] > a:only-child, .ant-btn-ghost.disabled:hover > a:only-child, .ant-btn-ghost[disabled]:hover > a:only-child, .ant-btn-ghost.disabled:focus > a:only-child, .ant-btn-ghost[disabled]:focus > a:only-child, .ant-btn-ghost.disabled:active > a:only-child, .ant-btn-ghost[disabled]:active > a:only-child, .ant-btn-ghost.disabled.active > a:only-child, .ant-btn-ghost[disabled].active > a:only-child { color: currentColor; } .ant-btn-ghost.disabled > a:only-child:after, .ant-btn-ghost[disabled] > a:only-child:after, .ant-btn-ghost.disabled:hover > a:only-child:after, .ant-btn-ghost[disabled]:hover > a:only-child:after, .ant-btn-ghost.disabled:focus > a:only-child:after, .ant-btn-ghost[disabled]:focus > a:only-child:after, .ant-btn-ghost.disabled:active > a:only-child:after, .ant-btn-ghost[disabled]:active > a:only-child:after, .ant-btn-ghost.disabled.active > a:only-child:after, .ant-btn-ghost[disabled].active > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .ant-btn-ghost.disabled > i.icon, .ant-btn-ghost[disabled] > i.icon, .ant-btn-ghost.disabled:hover > i.icon, .ant-btn-ghost[disabled]:hover > i.icon, .ant-btn-ghost.disabled:focus > i.icon, .ant-btn-ghost[disabled]:focus > i.icon, .ant-btn-ghost.disabled:active > i.icon, .ant-btn-ghost[disabled]:active > i.icon, .ant-btn-ghost.disabled.active > i.icon, .ant-btn-ghost[disabled].active > i.icon { color: currentColor; } .ant-btn-dashed { color: #04173F; background-color: transparent; border-color: #CCD3D9; border-style: dashed; line-height: 28px; } .ant-btn-dashed > a:only-child { color: currentColor; } .ant-btn-dashed > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .ant-btn-dashed > i.icon { color: currentColor; } .ant-btn-dashed div.btn-loading > span { background: #04173F; } .ant-btn-dashed.disabled, .ant-btn-dashed[disabled], .ant-btn-dashed.disabled:hover, .ant-btn-dashed[disabled]:hover, .ant-btn-dashed.disabled:focus, .ant-btn-dashed[disabled]:focus, .ant-btn-dashed.disabled:active, .ant-btn-dashed[disabled]:active, .ant-btn-dashed.disabled.active, .ant-btn-dashed[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: transparent; border-color: #CCD3D9; } .ant-btn-dashed.disabled > a:only-child, .ant-btn-dashed[disabled] > a:only-child, .ant-btn-dashed.disabled:hover > a:only-child, .ant-btn-dashed[disabled]:hover > a:only-child, .ant-btn-dashed.disabled:focus > a:only-child, .ant-btn-dashed[disabled]:focus > a:only-child, .ant-btn-dashed.disabled:active > a:only-child, .ant-btn-dashed[disabled]:active > a:only-child, .ant-btn-dashed.disabled.active > a:only-child, .ant-btn-dashed[disabled].active > a:only-child { color: currentColor; } .ant-btn-dashed.disabled > a:only-child:after, .ant-btn-dashed[disabled] > a:only-child:after, .ant-btn-dashed.disabled:hover > a:only-child:after, .ant-btn-dashed[disabled]:hover > a:only-child:after, .ant-btn-dashed.disabled:focus > a:only-child:after, .ant-btn-dashed[disabled]:focus > a:only-child:after, .ant-btn-dashed.disabled:active > a:only-child:after, .ant-btn-dashed[disabled]:active > a:only-child:after, .ant-btn-dashed.disabled.active > a:only-child:after, .ant-btn-dashed[disabled].active > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .ant-btn-dashed.disabled > i.icon, .ant-btn-dashed[disabled] > i.icon, .ant-btn-dashed.disabled:hover > i.icon, .ant-btn-dashed[disabled]:hover > i.icon, .ant-btn-dashed.disabled:focus > i.icon, .ant-btn-dashed[disabled]:focus > i.icon, .ant-btn-dashed.disabled:active > i.icon, .ant-btn-dashed[disabled]:active > i.icon, .ant-btn-dashed.disabled.active > i.icon, .ant-btn-dashed[disabled].active > i.icon { color: currentColor; } .ant-btn-danger { color: #d50000; background-color: rgba(0, 0, 0, 0); border-color: #CCD3D9; } .ant-btn-danger > a:only-child { color: currentColor; } .ant-btn-danger > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .ant-btn-danger > i.icon { color: currentColor; } .ant-btn-danger div.btn-loading > span { background: #d50000; } .ant-btn-danger.disabled, .ant-btn-danger[disabled], .ant-btn-danger.disabled:hover, .ant-btn-danger[disabled]:hover, .ant-btn-danger.disabled:focus, .ant-btn-danger[disabled]:focus, .ant-btn-danger.disabled:active, .ant-btn-danger[disabled]:active, .ant-btn-danger.disabled.active, .ant-btn-danger[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: transparent; border-color: #CCD3D9; } .ant-btn-danger.disabled > a:only-child, .ant-btn-danger[disabled] > a:only-child, .ant-btn-danger.disabled:hover > a:only-child, .ant-btn-danger[disabled]:hover > a:only-child, .ant-btn-danger.disabled:focus > a:only-child, .ant-btn-danger[disabled]:focus > a:only-child, .ant-btn-danger.disabled:active > a:only-child, .ant-btn-danger[disabled]:active > a:only-child, .ant-btn-danger.disabled.active > a:only-child, .ant-btn-danger[disabled].active > a:only-child { color: currentColor; } .ant-btn-danger.disabled > a:only-child:after, .ant-btn-danger[disabled] > a:only-child:after, .ant-btn-danger.disabled:hover > a:only-child:after, .ant-btn-danger[disabled]:hover > a:only-child:after, .ant-btn-danger.disabled:focus > a:only-child:after, .ant-btn-danger[disabled]:focus > a:only-child:after, .ant-btn-danger.disabled:active > a:only-child:after, .ant-btn-danger[disabled]:active > a:only-child:after, .ant-btn-danger.disabled.active > a:only-child:after, .ant-btn-danger[disabled].active > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .ant-btn-danger.disabled > i.icon, .ant-btn-danger[disabled] > i.icon, .ant-btn-danger.disabled:hover > i.icon, .ant-btn-danger[disabled]:hover > i.icon, .ant-btn-danger.disabled:focus > i.icon, .ant-btn-danger[disabled]:focus > i.icon, .ant-btn-danger.disabled:active > i.icon, .ant-btn-danger[disabled]:active > i.icon, .ant-btn-danger.disabled.active > i.icon, .ant-btn-danger[disabled].active > i.icon { color: currentColor; } .ant-btn-circle, .ant-btn-circle-outline { width: 34px; padding: 0; font-size: 14px; border-radius: 50%; height: 34px; } .ant-btn-circle.ant-btn-lg, .ant-btn-circle-outline.ant-btn-lg { width: 40px; padding: 0; font-size: 17px; border-radius: 50%; height: 40px; } .ant-btn-circle.ant-btn-lg > .icon, .ant-btn-circle-outline.ant-btn-lg > .icon { font-size: 20px; margin-right: 0; } .ant-btn-circle.ant-btn-sm, .ant-btn-circle-outline.ant-btn-sm { width: 28px; padding: 0; font-size: 12px; border-radius: 50%; height: 28px; } .ant-btn-circle.ant-btn-sm > .icon, .ant-btn-circle-outline.ant-btn-sm > .icon { font-size: 16px; margin-right: 0; } .ant-btn-circle > .icon, .ant-btn-circle-outline > .icon { line-height: 1.5; } .ant-btn-circle > i.icon, .ant-btn-circle-outline > i.icon { margin: 0; } .ant-btn:before { position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; background: #fff; opacity: 0.35; content: ''; border-radius: inherit; z-index: 1; -webkit-transition: opacity .2s; transition: opacity .2s; pointer-events: none; display: none; } .ant-btn .icon { -webkit-transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .ant-btn.ant-btn-loading:not(.ant-btn-circle):not(.ant-btn-circle-outline):not(.ant-btn-icon-only) { pointer-events: none; } .ant-btn-group { position: relative; display: inline-block; } .ant-btn-group > .ant-btn { position: relative; line-height: 32px; } .ant-btn-group > .ant-btn:hover, .ant-btn-group > .ant-btn:focus, .ant-btn-group > .ant-btn:active, .ant-btn-group > .ant-btn.active { z-index: 2; } .ant-btn-group > .ant-btn:disabled { z-index: 0; } .ant-btn-group-lg > .ant-btn { padding: 0 15px; font-size: 15px; border-radius: 4px; height: 40px; line-height: 40px; } .ant-btn-group-lg > .ant-btn > .icon { margin-right: 5px; font-size: 20px; line-height: 40px; } .ant-btn-group-sm > .ant-btn { padding: 0 7px; font-size: 12px; border-radius: 4px; height: 28px; line-height: 28px; } .ant-btn-group-sm > .ant-btn > .icon { font-size: 16px; margin-right: 3.5px; line-height: 28px; } .ant-btn-group .ant-btn + .ant-btn, .ant-btn + .ant-btn-group, .ant-btn-group span + .ant-btn, .ant-btn-group .ant-btn + span, .ant-btn-group + .ant-btn, .ant-btn-group + .ant-btn-group { margin-left: -1px; } .ant-btn-group .ant-btn:not(:first-child):not(:last-child) { border-radius: 0; } .ant-btn-group > .ant-btn:first-child, .ant-btn-group > span:first-child > .ant-btn { margin-left: 0; } .ant-btn-group > .ant-btn:first-child:not(:last-child), .ant-btn-group > span:first-child:not(:last-child) > .ant-btn { border-bottom-right-radius: 0; border-top-right-radius: 0; } .ant-btn-group > .ant-btn:last-child:not(:first-child), .ant-btn-group > span:last-child:not(:first-child) > .ant-btn { border-bottom-left-radius: 0; border-top-left-radius: 0; } .ant-btn-group > .ant-btn-group { float: left; } .ant-btn-group > .ant-btn-group:not(:first-child):not(:last-child) > .ant-btn { border-radius: 0; } .ant-btn-group > .ant-btn-group:first-child:not(:last-child) > .ant-btn:last-child { border-bottom-right-radius: 0; border-top-right-radius: 0; padding-right: 8px; } .ant-btn-group > .ant-btn-group:last-child:not(:first-child) > .ant-btn:first-child { border-bottom-left-radius: 0; border-top-left-radius: 0; padding-left: 8px; } .ant-btn:not(.ant-btn-circle):not(.ant-btn-circle-outline).ant-btn-icon-only { padding-left: 8px; padding-right: 8px; } .ant-btn:focus > span, .ant-btn:active > span { position: relative; } .ant-btn-clicked:after { content: ''; position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; border-radius: inherit; border: 0 solid #2196f3; opacity: 0.4; display: block; } .ant-btn-danger.ant-btn-clicked:after { border-color: #d50000; } .ant-btn-background-ghost { background: transparent !important; border-color: #fff; color: #fff; } .ant-btn-background-ghost.ant-btn-primary { color: #2196f3; background-color: transparent; border-color: #2196f3; } .ant-btn-background-ghost.ant-btn-primary > a:only-child { color: currentColor; } .ant-btn-background-ghost.ant-btn-primary > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .ant-btn-background-ghost.ant-btn-primary > i.icon { color: currentColor; } .ant-btn-background-ghost.ant-btn-primary.disabled, .ant-btn-background-ghost.ant-btn-primary[disabled], .ant-btn-background-ghost.ant-btn-primary.disabled:hover, .ant-btn-background-ghost.ant-btn-primary[disabled]:hover, .ant-btn-background-ghost.ant-btn-primary.disabled:focus, .ant-btn-background-ghost.ant-btn-primary[disabled]:focus, .ant-btn-background-ghost.ant-btn-primary.disabled:active, .ant-btn-background-ghost.ant-btn-primary[disabled]:active, .ant-btn-background-ghost.ant-btn-primary.disabled.active, .ant-btn-background-ghost.ant-btn-primary[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: transparent; border-color: #CCD3D9; } .ant-btn-background-ghost.ant-btn-primary.disabled > a:only-child, .ant-btn-background-ghost.ant-btn-primary[disabled] > a:only-child, .ant-btn-background-ghost.ant-btn-primary.disabled:hover > a:only-child, .ant-btn-background-ghost.ant-btn-primary[disabled]:hover > a:only-child, .ant-btn-background-ghost.ant-btn-primary.disabled:focus > a:only-child, .ant-btn-background-ghost.ant-btn-primary[disabled]:focus > a:only-child, .ant-btn-background-ghost.ant-btn-primary.disabled:active > a:only-child, .ant-btn-background-ghost.ant-btn-primary[disabled]:active > a:only-child, .ant-btn-background-ghost.ant-btn-primary.disabled.active > a:only-child, .ant-btn-background-ghost.ant-btn-primary[disabled].active > a:only-child { color: currentColor; } .ant-btn-background-ghost.ant-btn-primary.disabled > a:only-child:after, .ant-btn-background-ghost.ant-btn-primary[disabled] > a:only-child:after, .ant-btn-background-ghost.ant-btn-primary.disabled:hover > a:only-child:after, .ant-btn-background-ghost.ant-btn-primary[disabled]:hover > a:only-child:after, .ant-btn-background-ghost.ant-btn-primary.disabled:focus > a:only-child:after, .ant-btn-background-ghost.ant-btn-primary[disabled]:focus > a:only-child:after, .ant-btn-background-ghost.ant-btn-primary.disabled:active > a:only-child:after, .ant-btn-background-ghost.ant-btn-primary[disabled]:active > a:only-child:after, .ant-btn-background-ghost.ant-btn-primary.disabled.active > a:only-child:after, .ant-btn-background-ghost.ant-btn-primary[disabled].active > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .ant-btn-background-ghost.ant-btn-primary.disabled > i.icon, .ant-btn-background-ghost.ant-btn-primary[disabled] > i.icon, .ant-btn-background-ghost.ant-btn-primary.disabled:hover > i.icon, .ant-btn-background-ghost.ant-btn-primary[disabled]:hover > i.icon, .ant-btn-background-ghost.ant-btn-primary.disabled:focus > i.icon, .ant-btn-background-ghost.ant-btn-primary[disabled]:focus > i.icon, .ant-btn-background-ghost.ant-btn-primary.disabled:active > i.icon, .ant-btn-background-ghost.ant-btn-primary[disabled]:active > i.icon, .ant-btn-background-ghost.ant-btn-primary.disabled.active > i.icon, .ant-btn-background-ghost.ant-btn-primary[disabled].active > i.icon { color: currentColor; } .ant-btn-background-ghost.ant-btn-danger { color: #d50000; background-color: transparent; border-color: #d50000; } .ant-btn-background-ghost.ant-btn-danger > a:only-child { color: currentColor; } .ant-btn-background-ghost.ant-btn-danger > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .ant-btn-background-ghost.ant-btn-danger > i.icon { color: currentColor; } .ant-btn-background-ghost.ant-btn-danger.disabled, .ant-btn-background-ghost.ant-btn-danger[disabled], .ant-btn-background-ghost.ant-btn-danger.disabled:hover, .ant-btn-background-ghost.ant-btn-danger[disabled]:hover, .ant-btn-background-ghost.ant-btn-danger.disabled:focus, .ant-btn-background-ghost.ant-btn-danger[disabled]:focus, .ant-btn-background-ghost.ant-btn-danger.disabled:active, .ant-btn-background-ghost.ant-btn-danger[disabled]:active, .ant-btn-background-ghost.ant-btn-danger.disabled.active, .ant-btn-background-ghost.ant-btn-danger[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: transparent; border-color: #CCD3D9; } .ant-btn-background-ghost.ant-btn-danger.disabled > a:only-child, .ant-btn-background-ghost.ant-btn-danger[disabled] > a:only-child, .ant-btn-background-ghost.ant-btn-danger.disabled:hover > a:only-child, .ant-btn-background-ghost.ant-btn-danger[disabled]:hover > a:only-child, .ant-btn-background-ghost.ant-btn-danger.disabled:focus > a:only-child, .ant-btn-background-ghost.ant-btn-danger[disabled]:focus > a:only-child, .ant-btn-background-ghost.ant-btn-danger.disabled:active > a:only-child, .ant-btn-background-ghost.ant-btn-danger[disabled]:active > a:only-child, .ant-btn-background-ghost.ant-btn-danger.disabled.active > a:only-child, .ant-btn-background-ghost.ant-btn-danger[disabled].active > a:only-child { color: currentColor; } .ant-btn-background-ghost.ant-btn-danger.disabled > a:only-child:after, .ant-btn-background-ghost.ant-btn-danger[disabled] > a:only-child:after, .ant-btn-background-ghost.ant-btn-danger.disabled:hover > a:only-child:after, .ant-btn-background-ghost.ant-btn-danger[disabled]:hover > a:only-child:after, .ant-btn-background-ghost.ant-btn-danger.disabled:focus > a:only-child:after, .ant-btn-background-ghost.ant-btn-danger[disabled]:focus > a:only-child:after, .ant-btn-background-ghost.ant-btn-danger.disabled:active > a:only-child:after, .ant-btn-background-ghost.ant-btn-danger[disabled]:active > a:only-child:after, .ant-btn-background-ghost.ant-btn-danger.disabled.active > a:only-child:after, .ant-btn-background-ghost.ant-btn-danger[disabled].active > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .ant-btn-background-ghost.ant-btn-danger.disabled > i.icon, .ant-btn-background-ghost.ant-btn-danger[disabled] > i.icon, .ant-btn-background-ghost.ant-btn-danger.disabled:hover > i.icon, .ant-btn-background-ghost.ant-btn-danger[disabled]:hover > i.icon, .ant-btn-background-ghost.ant-btn-danger.disabled:focus > i.icon, .ant-btn-background-ghost.ant-btn-danger[disabled]:focus > i.icon, .ant-btn-background-ghost.ant-btn-danger.disabled:active > i.icon, .ant-btn-background-ghost.ant-btn-danger[disabled]:active > i.icon, .ant-btn-background-ghost.ant-btn-danger.disabled.active > i.icon, .ant-btn-background-ghost.ant-btn-danger[disabled].active > i.icon { color: currentColor; } .ant-btn-two-chinese-chars:first-letter { letter-spacing: .34em; } .ant-btn-two-chinese-chars > * { letter-spacing: .34em; margin-right: -0.34em; } .ant-btn-raised { color: #818999; -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -webkit-transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important; transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important; transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important; transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important; } .ant-btn-raised:not([disabled]):active { -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } .ant-btn-raised:disabled { border-color: #CCD3D9; } .ant-btn-border { color: #2196f3; border: 1px solid #2196f3; } .ant-btn-border .ant-ripple { background-color: #E9F5FE; } .ant-btn-border:disabled { border-color: #CCD3D9; } .ant-btn-flat.ant-btn-loading { background: rgba(0, 0, 0, 0.04); -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); border-color: #2196f3; } .ant-btn-raised.ant-btn-loading { -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); border-color: #2196f3; } .ant-btn-flat { border-color: #acb3bf; color: #818999; } .ant-btn-flat:hover { background: rgba(0, 0, 0, 0.08); } .ant-btn-orange { color: #ff9500; } .ant-btn-gules { color: #d0021b; } @-webkit-keyframes buttonEffect { to { opacity: 0; top: -6px; left: -6px; bottom: -6px; right: -6px; border-width: 6px; } } @keyframes buttonEffect { to { opacity: 0; top: -6px; left: -6px; bottom: -6px; right: -6px; border-width: 6px; } } a.ant-btn { line-height: 30px; } a.ant-btn-lg { line-height: 38px; } a.ant-btn-sm { line-height: 26px; } @-webkit-keyframes btn-loading { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.9; } 33.3% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 66.6% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.9; } 100% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.9; } } @keyframes btn-loading { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.9; } 33.3% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 66.6% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.9; } 100% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.9; } }