UNPKG

wetrade-design

Version:

一款多语言支持Vue3的UI框架

2,222 lines 59.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 */ /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ /** gray-sp */ /** blue-sp */ /** green-sp */ /** red-sp */ /** orange-sp */ /** 品牌橙 */ /** 日落黄 */ /** 柠檬黄 */ /** 新生绿 */ /** 绿色 */ /** 碧涛青 */ /** 海蔚蓝 */ /** 品牌蓝色 */ /** 宝石蓝 */ /** 星空紫 */ /** 罗兰紫 */ /** 青春紫 */ /** 品红 */ /** 红色 */ /** 灰色 */ /** 保留ant色板 */ /** 绿色 */ /** 品牌蓝 */ .wd-btn { line-height: 18px; position: relative; display: inline-flex; align-items: center; justify-content: center; font-weight: 400; white-space: nowrap; text-align: center; background-image: none; border: 1px solid transparent; cursor: pointer; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-user-select: none; -moz-user-select: none; user-select: none; touch-action: manipulation; height: 32px; padding: 6px 15px; font-size: 12px; border-radius: 4px; color: #1E1E29; border-color: #EBEDF2; background: transparent; } .wd-btn > .wdicon { line-height: 1; } .wd-btn, .wd-btn:active, .wd-btn:focus { outline: 0; } .wd-btn:not([disabled]):hover { text-decoration: none; } .wd-btn:not([disabled]):active { outline: 0; box-shadow: none; } .wd-btn[disabled] { cursor: not-allowed; } .wd-btn[disabled] > * { pointer-events: none; } .wd-btn-lg { height: 40px; padding: 10px 19px; font-size: 14px; border-radius: 6px; } .wd-btn-bg { height: 36px; padding: 8px 17px; font-size: 14px; border-radius: 6px; } .wd-btn-sm { height: 28px; padding: 4px 7px; font-size: 12px; border-radius: 4px; } .wd-btn-xs { height: 24px; padding: 2px 7px; font-size: 12px; border-radius: 4px; } .wd-btn-xs.wd-btn > .wdicon + span, .wd-btn-xs.wd-btn > span + .wdicon { margin-left: 2px; } .wd-btn-xs.wd-btn > span[role='img'] { margin-right: 2px; } .wd-btn > a:only-child { color: currentcolor; } .wd-btn > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn:hover { color: #4f90ff; border-color: #4f90ff; background: transparent; } .wd-btn:hover > a:only-child { color: currentcolor; } .wd-btn:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn:active { color: #144bcc; border-color: #144bcc; background: transparent; } .wd-btn:active > a:only-child { color: currentcolor; } .wd-btn:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn[disabled], .wd-btn[disabled]:hover, .wd-btn[disabled]:active { color: #C7CBD6; border-color: #EBEDF2; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn[disabled] > a:only-child, .wd-btn[disabled]:hover > a:only-child, .wd-btn[disabled]:active > a:only-child { color: currentcolor; } .wd-btn[disabled] > a:only-child::after, .wd-btn[disabled]:hover > a:only-child::after, .wd-btn[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn[disabled], .wd-btn[disabled]:hover, .wd-btn[disabled]:active { color: #C7CBD6; border-color: #EBEDF2; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn[disabled] > a:only-child, .wd-btn[disabled]:hover > a:only-child, .wd-btn[disabled]:active > a:only-child { color: currentcolor; } .wd-btn[disabled] > a:only-child::after, .wd-btn[disabled]:hover > a:only-child::after, .wd-btn[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn:hover, .wd-btn:active { text-decoration: none; background: transparent; } .wd-btn > span { display: inline-block; } .wd-btn > span[role='img'] { margin-right: 4px; } .wd-btn-primary { color: #fff; border-color: #2469F2; background: #2469F2; } .wd-btn-primary > a:only-child { color: currentcolor; } .wd-btn-primary > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-primary:hover { color: #fff; border-color: #2469F2; background: #2469F2; } .wd-btn-primary:hover > a:only-child { color: currentcolor; } .wd-btn-primary:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-primary:active { color: #fff; border-color: #4A84F7; background: #4A84F7; } .wd-btn-primary:active > a:only-child { color: currentcolor; } .wd-btn-primary:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-primary[disabled], .wd-btn-primary[disabled]:hover, .wd-btn-primary[disabled]:active { color: #C7CBD6; border-color: #EBEDF2; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-primary[disabled] > a:only-child, .wd-btn-primary[disabled]:hover > a:only-child, .wd-btn-primary[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-primary[disabled] > a:only-child::after, .wd-btn-primary[disabled]:hover > a:only-child::after, .wd-btn-primary[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-primary[disabled], .wd-btn-primary[disabled]:hover, .wd-btn-primary[disabled]:active { color: #656B80; border-color: #93BEFB; background: #93BEFB; text-shadow: none; box-shadow: none; } .wd-btn-primary[disabled] > a:only-child, .wd-btn-primary[disabled]:hover > a:only-child, .wd-btn-primary[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-primary[disabled] > a:only-child::after, .wd-btn-primary[disabled]:hover > a:only-child::after, .wd-btn-primary[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-group .wd-btn-primary:not(:first-child):not(:last-child) { border-right-color: #4f90ff; border-left-color: #4f90ff; } .wd-btn-group .wd-btn-primary:not(:first-child):not(:last-child):disabled { border-color: #EBEDF2; } .wd-btn-group .wd-btn-primary:first-child:not(:last-child) { border-right-color: #4f90ff; } .wd-btn-group .wd-btn-primary:first-child:not(:last-child)[disabled] { border-right-color: #EBEDF2; } .wd-btn-group .wd-btn-primary:last-child:not(:first-child), .wd-btn-group .wd-btn-primary + .wd-btn-primary { border-left-color: #4f90ff; } .wd-btn-group .wd-btn-primary:last-child:not(:first-child)[disabled], .wd-btn-group .wd-btn-primary + .wd-btn-primary[disabled] { border-left-color: #EBEDF2; } .wd-btn-ghost { color: #1E1E29; border-color: #EBEDF2; background: transparent; } .wd-btn-ghost > a:only-child { color: currentcolor; } .wd-btn-ghost > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-ghost:hover { color: #4f90ff; border-color: #4f90ff; background: transparent; } .wd-btn-ghost:hover > a:only-child { color: currentcolor; } .wd-btn-ghost:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-ghost:active { color: #144bcc; border-color: #144bcc; background: transparent; } .wd-btn-ghost:active > a:only-child { color: currentcolor; } .wd-btn-ghost:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-ghost[disabled], .wd-btn-ghost[disabled]:hover, .wd-btn-ghost[disabled]:active { color: #C7CBD6; border-color: #EBEDF2; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-ghost[disabled] > a:only-child, .wd-btn-ghost[disabled]:hover > a:only-child, .wd-btn-ghost[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-ghost[disabled] > a:only-child::after, .wd-btn-ghost[disabled]:hover > a:only-child::after, .wd-btn-ghost[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-secondary { color: #0F3CB7; border-color: #ECF3FD; background: #ECF3FD; border: none; } .wd-btn-secondary > a:only-child { color: currentcolor; } .wd-btn-secondary > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-secondary:hover { color: #0F3CB7; border-color: #D4E0FA; background: #D4E0FA; } .wd-btn-secondary:hover > a:only-child { color: currentcolor; } .wd-btn-secondary:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-secondary:active { color: #0F3CB7; border-color: #93BEFB; background: #93BEFB; } .wd-btn-secondary:active > a:only-child { color: currentcolor; } .wd-btn-secondary:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-secondary[disabled], .wd-btn-secondary[disabled]:hover, .wd-btn-secondary[disabled]:active { color: #C7CBD6; border-color: #EBEDF2; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-secondary[disabled] > a:only-child, .wd-btn-secondary[disabled]:hover > a:only-child, .wd-btn-secondary[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-secondary[disabled] > a:only-child::after, .wd-btn-secondary[disabled]:hover > a:only-child::after, .wd-btn-secondary[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-secondary[disabled], .wd-btn-secondary[disabled]:hover, .wd-btn-secondary[disabled]:active { color: #93BEFB; border-color: transparent; background: #ECF3FD; text-shadow: none; box-shadow: none; } .wd-btn-secondary[disabled] > a:only-child, .wd-btn-secondary[disabled]:hover > a:only-child, .wd-btn-secondary[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-secondary[disabled] > a:only-child::after, .wd-btn-secondary[disabled]:hover > a:only-child::after, .wd-btn-secondary[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-solid { color: #656B80; border-color: transparent; background: #FBFCFD; } .wd-btn-icon-solid > a:only-child { color: currentcolor; } .wd-btn-icon-solid > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-solid[disabled], .wd-btn-icon-solid[disabled]:hover, .wd-btn-icon-solid[disabled]:active { color: #C7CBD6; border-color: transparent; background: #FBFCFD; text-shadow: none; box-shadow: none; } .wd-btn-icon-solid[disabled] > a:only-child, .wd-btn-icon-solid[disabled]:hover > a:only-child, .wd-btn-icon-solid[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-icon-solid[disabled] > a:only-child::after, .wd-btn-icon-solid[disabled]:hover > a:only-child::after, .wd-btn-icon-solid[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-solid:hover { color: #1E1E29; border-color: transparent; background: rgba(129, 135, 153, 0.1); } .wd-btn-icon-solid:hover > a:only-child { color: currentcolor; } .wd-btn-icon-solid:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-solid:active { color: #1E1E29; border-color: transparent; background: rgba(129, 135, 153, 0.2); } .wd-btn-icon-solid:active > a:only-child { color: currentcolor; } .wd-btn-icon-solid:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-primary { color: #0F3CB7; border-color: #0F3CB7; background: transparent; } .wd-btn-icon-primary > a:only-child { color: currentcolor; } .wd-btn-icon-primary > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-primary[disabled], .wd-btn-icon-primary[disabled]:hover, .wd-btn-icon-primary[disabled]:active { color: #93BEFB; border-color: #93BEFB; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-icon-primary[disabled] > a:only-child, .wd-btn-icon-primary[disabled]:hover > a:only-child, .wd-btn-icon-primary[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-icon-primary[disabled] > a:only-child::after, .wd-btn-icon-primary[disabled]:hover > a:only-child::after, .wd-btn-icon-primary[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-primary:hover { color: #2469F2; border-color: #2469F2; background: transparent; } .wd-btn-icon-primary:hover > a:only-child { color: currentcolor; } .wd-btn-icon-primary:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-primary:active { color: #4A84F7; border-color: #4A84F7; background: transparent; } .wd-btn-icon-primary:active > a:only-child { color: currentcolor; } .wd-btn-icon-primary:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-neutral { color: #656B80; border-color: #656B80; background: transparent; } .wd-btn-icon-neutral > a:only-child { color: currentcolor; } .wd-btn-icon-neutral > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-neutral[disabled], .wd-btn-icon-neutral[disabled]:hover, .wd-btn-icon-neutral[disabled]:active { color: #C7CBD6; border-color: #C7CBD6; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-icon-neutral[disabled] > a:only-child, .wd-btn-icon-neutral[disabled]:hover > a:only-child, .wd-btn-icon-neutral[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-icon-neutral[disabled] > a:only-child::after, .wd-btn-icon-neutral[disabled]:hover > a:only-child::after, .wd-btn-icon-neutral[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-neutral:hover { color: #1E1E29; border-color: #1E1E29; background: transparent; } .wd-btn-icon-neutral:hover > a:only-child { color: currentcolor; } .wd-btn-icon-neutral:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-neutral:active { color: #1E1E29; border-color: #1E1E29; background: transparent; } .wd-btn-icon-neutral:active > a:only-child { color: currentcolor; } .wd-btn-icon-neutral:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-hot { color: #0F3CB7; border-color: transparent; background: transparent; } .wd-btn-icon-hot > a:only-child { color: currentcolor; } .wd-btn-icon-hot > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-hot[disabled], .wd-btn-icon-hot[disabled]:hover, .wd-btn-icon-hot[disabled]:active { color: #93BEFB; border-color: transparent; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-icon-hot[disabled] > a:only-child, .wd-btn-icon-hot[disabled]:hover > a:only-child, .wd-btn-icon-hot[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-icon-hot[disabled] > a:only-child::after, .wd-btn-icon-hot[disabled]:hover > a:only-child::after, .wd-btn-icon-hot[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-hot:hover { color: #2469F2; border-color: transparent; background: #ECF3FD; } .wd-btn-icon-hot:hover > a:only-child { color: currentcolor; } .wd-btn-icon-hot:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-hot:active { color: #4A84F7; border-color: transparent; background: #D4E0FA; } .wd-btn-icon-hot:active > a:only-child { color: currentcolor; } .wd-btn-icon-hot:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-default { color: #656B80; border-color: transparent; background: transparent; } .wd-btn-icon-default > a:only-child { color: currentcolor; } .wd-btn-icon-default > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-default[disabled], .wd-btn-icon-default[disabled]:hover, .wd-btn-icon-default[disabled]:active { color: #C7CBD6; border-color: transparent; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-icon-default[disabled] > a:only-child, .wd-btn-icon-default[disabled]:hover > a:only-child, .wd-btn-icon-default[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-icon-default[disabled] > a:only-child::after, .wd-btn-icon-default[disabled]:hover > a:only-child::after, .wd-btn-icon-default[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-default:hover { color: #1E1E29; border-color: transparent; background: rgba(129, 135, 153, 0.1); } .wd-btn-icon-default:hover > a:only-child { color: currentcolor; } .wd-btn-icon-default:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-default:active { color: #1E1E29; border-color: transparent; background: rgba(129, 135, 153, 0.2); } .wd-btn-icon-default:active > a:only-child { color: currentcolor; } .wd-btn-icon-default:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-gray { color: #0F3CB7; border-color: #FBFCFD; background: #FBFCFD; } .wd-btn-icon-gray > a:only-child { color: currentcolor; } .wd-btn-icon-gray > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-gray[disabled], .wd-btn-icon-gray[disabled]:hover, .wd-btn-icon-gray[disabled]:active { color: #C7CBD6; border-color: #FBFCFD; background: #FBFCFD; text-shadow: none; box-shadow: none; } .wd-btn-icon-gray[disabled] > a:only-child, .wd-btn-icon-gray[disabled]:hover > a:only-child, .wd-btn-icon-gray[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-icon-gray[disabled] > a:only-child::after, .wd-btn-icon-gray[disabled]:hover > a:only-child::after, .wd-btn-icon-gray[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-gray:hover { color: #0F3CB7; border-color: #FBFCFD; background: #F5F6F8; } .wd-btn-icon-gray:hover > a:only-child { color: currentcolor; } .wd-btn-icon-gray:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-gray:active { color: #0F3CB7; border-color: #FBFCFD; background: #ECF3FD; } .wd-btn-icon-gray:active > a:only-child { color: currentcolor; } .wd-btn-icon-gray:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-danger { color: #fff; border-color: #f5222d; background: #f5222d; } .wd-btn-danger > a:only-child { color: currentcolor; } .wd-btn-danger > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-danger:hover { color: #fff; border-color: #F21D41; background: #F21D41; } .wd-btn-danger:hover > a:only-child { color: currentcolor; } .wd-btn-danger:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-danger:active { color: #fff; border-color: #FF738A; background: #FF738A; } .wd-btn-danger:active > a:only-child { color: currentcolor; } .wd-btn-danger:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-danger[disabled], .wd-btn-danger[disabled]:hover, .wd-btn-danger[disabled]:active { color: #C7CBD6; border-color: #EBEDF2; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-danger[disabled] > a:only-child, .wd-btn-danger[disabled]:hover > a:only-child, .wd-btn-danger[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-danger[disabled] > a:only-child::after, .wd-btn-danger[disabled]:hover > a:only-child::after, .wd-btn-danger[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-danger[disabled], .wd-btn-danger[disabled]:hover, .wd-btn-danger[disabled]:active { color: #fff; border-color: #FFB2BE; background: #FFB2BE; text-shadow: none; box-shadow: none; } .wd-btn-danger[disabled] > a:only-child, .wd-btn-danger[disabled]:hover > a:only-child, .wd-btn-danger[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-danger[disabled] > a:only-child::after, .wd-btn-danger[disabled]:hover > a:only-child::after, .wd-btn-danger[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-link { color: #0F3CB7; border-color: transparent; background: transparent; box-shadow: none; } .wd-btn-link > a:only-child { color: currentcolor; } .wd-btn-link > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-link:hover { color: #4f90ff; border-color: #4f90ff; background: transparent; } .wd-btn-link:hover > a:only-child { color: currentcolor; } .wd-btn-link:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-link:active { color: #144bcc; border-color: #144bcc; background: transparent; } .wd-btn-link:active > a:only-child { color: currentcolor; } .wd-btn-link:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-link[disabled], .wd-btn-link[disabled]:hover, .wd-btn-link[disabled]:active { color: #C7CBD6; border-color: #EBEDF2; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-link[disabled] > a:only-child, .wd-btn-link[disabled]:hover > a:only-child, .wd-btn-link[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-link[disabled] > a:only-child::after, .wd-btn-link[disabled]:hover > a:only-child::after, .wd-btn-link[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-link:hover { background-color: rgba(129, 135, 153, 0.1); } .wd-btn-link:active { background-color: rgba(129, 135, 153, 0.2); } .wd-btn-link:hover { color: #2469F2; border-color: transparent; } .wd-btn-link:active { color: #2469F2; border-color: transparent; } .wd-btn-link[disabled], .wd-btn-link[disabled]:hover, .wd-btn-link[disabled]:active { color: #93BEFB; border-color: transparent; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-link[disabled] > a:only-child, .wd-btn-link[disabled]:hover > a:only-child, .wd-btn-link[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-link[disabled] > a:only-child::after, .wd-btn-link[disabled]:hover > a:only-child::after, .wd-btn-link[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-text { color: #1E1E29; border-color: transparent; background: transparent; box-shadow: none; } .wd-btn-text > a:only-child { color: currentcolor; } .wd-btn-text > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-text:hover { color: #4f90ff; border-color: #4f90ff; background: transparent; } .wd-btn-text:hover > a:only-child { color: currentcolor; } .wd-btn-text:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-text:active { color: #144bcc; border-color: #144bcc; background: transparent; } .wd-btn-text:active > a:only-child { color: currentcolor; } .wd-btn-text:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-text[disabled], .wd-btn-text[disabled]:hover, .wd-btn-text[disabled]:active { color: #C7CBD6; border-color: #EBEDF2; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-text[disabled] > a:only-child, .wd-btn-text[disabled]:hover > a:only-child, .wd-btn-text[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-text[disabled] > a:only-child::after, .wd-btn-text[disabled]:hover > a:only-child::after, .wd-btn-text[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-text:hover { color: #656B80; background: rgba(129, 135, 153, 0.1); } .wd-btn-text:active { color: #1E1E29; background: rgba(129, 135, 153, 0.2); } .wd-btn-text:hover, .wd-btn-text:active { border-color: transparent; } .wd-btn-text[disabled], .wd-btn-text[disabled]:hover, .wd-btn-text[disabled]:active { color: #C7CBD6; border-color: transparent; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-text[disabled] > a:only-child, .wd-btn-text[disabled]:hover > a:only-child, .wd-btn-text[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-text[disabled] > a:only-child::after, .wd-btn-text[disabled]:hover > a:only-child::after, .wd-btn-text[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-no-padding { padding: 0; line-height: 22px; height: 22px; font-size: 15px; } .wd-btn-no-padding.wd-btn-xs { line-height: 18px; height: 18px; font-size: 12px; } .wd-btn-no-padding.wd-btn-sm { font-size: 14px; } .wd-btn-no-padding:hover, .wd-btn-no-padding:active { background-color: transparent; } .wd-btn-warning { color: #fff; border-color: #FF7925; background: #FF7925; } .wd-btn-warning > a:only-child { color: currentcolor; } .wd-btn-warning > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-warning:hover { color: #fff; border-color: #F95C09; background: #F95C09; } .wd-btn-warning:hover > a:only-child { color: currentcolor; } .wd-btn-warning:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-warning:active { color: #fff; border-color: #FF9D47; background: #FF9D47; } .wd-btn-warning:active > a:only-child { color: currentcolor; } .wd-btn-warning:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-warning[disabled], .wd-btn-warning[disabled]:hover, .wd-btn-warning[disabled]:active { color: #C7CBD6; border-color: #EBEDF2; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-warning[disabled] > a:only-child, .wd-btn-warning[disabled]:hover > a:only-child, .wd-btn-warning[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-warning[disabled] > a:only-child::after, .wd-btn-warning[disabled]:hover > a:only-child::after, .wd-btn-warning[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-warning[disabled], .wd-btn-warning[disabled]:hover, .wd-btn-warning[disabled]:active { color: #fff; border-color: #FFDCAD; background: #FFDCAD; text-shadow: none; box-shadow: none; } .wd-btn-warning[disabled] > a:only-child, .wd-btn-warning[disabled]:hover > a:only-child, .wd-btn-warning[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-warning[disabled] > a:only-child::after, .wd-btn-warning[disabled]:hover > a:only-child::after, .wd-btn-warning[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous { color: #f5222d; border-color: #f5222d; background: transparent; } .wd-btn-dangerous > a:only-child { color: currentcolor; } .wd-btn-dangerous > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous:hover { color: #ff4d4f; border-color: #ff4d4f; background: transparent; } .wd-btn-dangerous:hover > a:only-child { color: currentcolor; } .wd-btn-dangerous:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous:active { color: #cf1322; border-color: #cf1322; background: transparent; } .wd-btn-dangerous:active > a:only-child { color: currentcolor; } .wd-btn-dangerous:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous[disabled], .wd-btn-dangerous[disabled]:hover, .wd-btn-dangerous[disabled]:active { color: #C7CBD6; border-color: #EBEDF2; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-dangerous[disabled] > a:only-child, .wd-btn-dangerous[disabled]:hover > a:only-child, .wd-btn-dangerous[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-dangerous[disabled] > a:only-child::after, .wd-btn-dangerous[disabled]:hover > a:only-child::after, .wd-btn-dangerous[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-primary { color: #fff; border-color: #f5222d; background: #f5222d; } .wd-btn-dangerous.wd-btn-primary > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-primary > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-primary:hover { color: #fff; border-color: #F21D41; background: #F21D41; } .wd-btn-dangerous.wd-btn-primary:hover > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-primary:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-primary:active { color: #fff; border-color: #FF738A; background: #FF738A; } .wd-btn-dangerous.wd-btn-primary:active > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-primary:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-primary[disabled], .wd-btn-dangerous.wd-btn-primary[disabled]:hover, .wd-btn-dangerous.wd-btn-primary[disabled]:active { color: #C7CBD6; border-color: #EBEDF2; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-dangerous.wd-btn-primary[disabled] > a:only-child, .wd-btn-dangerous.wd-btn-primary[disabled]:hover > a:only-child, .wd-btn-dangerous.wd-btn-primary[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-primary[disabled] > a:only-child::after, .wd-btn-dangerous.wd-btn-primary[disabled]:hover > a:only-child::after, .wd-btn-dangerous.wd-btn-primary[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-primary[disabled], .wd-btn-dangerous.wd-btn-primary[disabled]:hover, .wd-btn-dangerous.wd-btn-primary[disabled]:active { color: #fff; border-color: #FFB2BE; background: #FFB2BE; text-shadow: none; box-shadow: none; } .wd-btn-dangerous.wd-btn-primary[disabled] > a:only-child, .wd-btn-dangerous.wd-btn-primary[disabled]:hover > a:only-child, .wd-btn-dangerous.wd-btn-primary[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-primary[disabled] > a:only-child::after, .wd-btn-dangerous.wd-btn-primary[disabled]:hover > a:only-child::after, .wd-btn-dangerous.wd-btn-primary[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-link { color: #f5222d; border-color: transparent; background: transparent; box-shadow: none; } .wd-btn-dangerous.wd-btn-link > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-link > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-link:hover { color: #4f90ff; border-color: #4f90ff; background: transparent; } .wd-btn-dangerous.wd-btn-link:hover > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-link:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-link:active { color: #144bcc; border-color: #144bcc; background: transparent; } .wd-btn-dangerous.wd-btn-link:active > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-link:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-link[disabled], .wd-btn-dangerous.wd-btn-link[disabled]:hover, .wd-btn-dangerous.wd-btn-link[disabled]:active { color: #C7CBD6; border-color: #EBEDF2; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-dangerous.wd-btn-link[disabled] > a:only-child, .wd-btn-dangerous.wd-btn-link[disabled]:hover > a:only-child, .wd-btn-dangerous.wd-btn-link[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-link[disabled] > a:only-child::after, .wd-btn-dangerous.wd-btn-link[disabled]:hover > a:only-child::after, .wd-btn-dangerous.wd-btn-link[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-link:hover { color: #ff4d4f; border-color: transparent; background: transparent; } .wd-btn-dangerous.wd-btn-link:hover > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-link:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-link:active { color: #cf1322; border-color: transparent; background: transparent; } .wd-btn-dangerous.wd-btn-link:active > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-link:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-link[disabled], .wd-btn-dangerous.wd-btn-link[disabled]:hover, .wd-btn-dangerous.wd-btn-link[disabled]:active { color: #C7CBD6; border-color: transparent; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-dangerous.wd-btn-link[disabled] > a:only-child, .wd-btn-dangerous.wd-btn-link[disabled]:hover > a:only-child, .wd-btn-dangerous.wd-btn-link[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-link[disabled] > a:only-child::after, .wd-btn-dangerous.wd-btn-link[disabled]:hover > a:only-child::after, .wd-btn-dangerous.wd-btn-link[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-text { color: #f5222d; border-color: transparent; background: transparent; box-shadow: none; } .wd-btn-dangerous.wd-btn-text > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-text > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-text:hover { color: #4f90ff; border-color: #4f90ff; background: transparent; } .wd-btn-dangerous.wd-btn-text:hover > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-text:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-text:active { color: #144bcc; border-color: #144bcc; background: transparent; } .wd-btn-dangerous.wd-btn-text:active > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-text:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-text[disabled], .wd-btn-dangerous.wd-btn-text[disabled]:hover, .wd-btn-dangerous.wd-btn-text[disabled]:active { color: #C7CBD6; border-color: #EBEDF2; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-dangerous.wd-btn-text[disabled] > a:only-child, .wd-btn-dangerous.wd-btn-text[disabled]:hover > a:only-child, .wd-btn-dangerous.wd-btn-text[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-text[disabled] > a:only-child::after, .wd-btn-dangerous.wd-btn-text[disabled]:hover > a:only-child::after, .wd-btn-dangerous.wd-btn-text[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-text:hover { color: #ff4d4f; border-color: transparent; background: rgba(129, 135, 153, 0.1); } .wd-btn-dangerous.wd-btn-text:hover > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-text:hover > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-dangerous.wd-btn-text[disabled], .wd-btn-dangerous.wd-btn-text[disabled]:hover, .wd-btn-dangerous.wd-btn-text[disabled]:active { color: #C7CBD6; border-color: transparent; background: transparent; text-shadow: none; box-shadow: none; } .wd-btn-dangerous.wd-btn-text[disabled] > a:only-child, .wd-btn-dangerous.wd-btn-text[disabled]:hover > a:only-child, .wd-btn-dangerous.wd-btn-text[disabled]:active > a:only-child { color: currentcolor; } .wd-btn-dangerous.wd-btn-text[disabled] > a:only-child::after, .wd-btn-dangerous.wd-btn-text[disabled]:hover > a:only-child::after, .wd-btn-dangerous.wd-btn-text[disabled]:active > a:only-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; content: ''; } .wd-btn-icon-only { width: 32px; height: 32px; padding: 6px 0; font-size: 18px; border-radius: 4px; } .wd-btn-icon-only > * { font-size: 18px; } .wd-btn-icon-only.wd-btn-lg { width: 40px; height: 40px; padding: 10px 0; font-size: 22px; border-radius: 6px; } .wd-btn-icon-only.wd-btn-lg > * { font-size: 22px; } .wd-btn-icon-only.wd-btn-bg { width: 36px; height: 36px; padding: 8px 0; font-size: 20px; border-radius: 6px; } .wd-btn-icon-only.wd-btn-bg > * { font-size: 20px; } .wd-btn-icon-only.wd-btn-sm { width: 28px; height: 28px; padding: 4px 0; font-size: 16px; border-radius: 4px; } .wd-btn-icon-only.wd-btn-sm > * { font-size: 16px; } .wd-btn-icon-only.wd-btn-xs { width: 24px; height: 24px; padding: 2px 0; font-size: 14px; border-radius: 4px; } .wd-btn-icon-only.wd-btn-xs > * { font-size: 14px; } .wd-btn-icon-only > .wdicon { display: flex; justify-content: center; } a.wd-btn-icon-only { vertical-align: -1px; } a.wd-btn-icon-only > .wdicon { display: inline; } .wd-btn-round { height: 32px; padding: 6px 16px; font-size: 14px; border-radius: 32px; } .wd-btn-round.wd-btn-lg { height: 40px; padding: 10px 20px; font-size: 16px; border-radius: 40px; } .wd-btn-round.wd-btn-bg { height: 36px; padding: 8px 18px; font-size: 14px; border-radius: 36px; } .wd-btn-round.wd-btn-sm { height: 28px; padding: 4px 14px; font-size: 14px; border-radius: 28px; } .wd-btn-round.wd-btn-xs { height: 24px; padding: 2px 12px; font-size: 14px; border-radius: 24px; } .wd-btn-round.wd-btn-icon-only { width: auto; } .wd-btn-circle { min-width: 32px; padding-right: 0; padding-left: 0; text-align: center; border-radius: 50%; } .wd-btn-circle.wd-btn-lg { min-width: 40px; border-radius: 50%; } .wd-btn-circle.wd-btn-bg { min-width: 36px; border-radius: 50%; } .wd-btn-circle.wd-btn-sm { min-width: 28px; border-radius: 50%; } .wd-btn-circle.wd-btn-xs { min-width: 24px; border-radius: 50%; } .wd-btn::before { position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; z-index: 1; display: none; background: #fff; border-radius: inherit; opacity: 0.35; transition: opacity 0.2s; content: ''; pointer-events: none; } .wd-btn .wdicon { transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .wd-btn .wdicon.wdicon-plus > svg, .wd-btn .wdicon.wdicon-minus > svg { shape-rendering: optimizespeed; } .wd-btn.wd-btn-loading { position: relative; cursor: default; } .wd-btn.wd-btn-loading.wd-btn .wd-btn-loading-icon { font-size: 14px; } .wd-btn.wd-btn-loading.wd-btn-lg .wd-btn-loading-icon, .wd-btn.wd-btn-loading.wd-btn-bg .wd-btn-loading-icon { font-size: 16px; } .wd-btn.wd-btn-loading.wd-btn-sm .wd-btn-loading-icon { font-size: 14px; } .wd-btn.wd-btn-loading.wd-btn-xs .wd-btn-loading-icon { margin-right: 2px; } .wd-btn > .wd-btn-loading-icon { transition: width 0.05s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.05s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0); margin-right: 4px; } .wd-btn > .wd-btn-loading-icon .wdicon { animation: none; } .wd-btn > .wd-btn-loading-icon .wdicon svg { animation: loadingCircle 2s infinite linear; } .wd-btn > .wd-btn-loading-icon:only-child .wdicon { padding-right: 0; } .wd-btn-group { position: relative; display: inline-flex; } .wd-btn-group > .wd-btn, .wd-btn-group > span > .wd-btn { position: relative; } .wd-btn-group > .wd-btn:hover, .wd-btn-group > span > .wd-btn:hover, .wd-btn-group > .wd-btn:active, .wd-btn-group > span > .wd-btn:active { z-index: 2; } .wd-btn-group > .wd-btn[disabled], .wd-btn-group > span > .wd-btn[disabled] { z-index: 0; } .wd-btn-group .wd-btn-icon-only { font-size: 14px; } .wd-btn-group-lg > .wd-btn, .wd-btn-group-lg > span > .wd-btn { height: 40px; padding: 10px 19px; font-size: 16px; border-radius: 0; } .wd-btn-group-lg .wd-btn.wd-btn-icon-only { width: 40px; height: 40px; padding-right: 0; padding-left: 0; } .wd-btn-group-bg > .wd-btn, .wd-btn-group-bg > span > .wd-btn { height: 36px; padding: 8px 17px; font-size: 14px; border-radius: 4px; } .wd-btn-group-bg .wd-btn.wd-btn-icon-only { width: 36px; height: 36px; padding-right: 0; padding-left: 0; } .wd-btn-group-sm > .wd-btn, .wd-btn-group-sm > span > .wd-btn { height: 28px; padding: 4px 7px; font-size: 12px; border-radius: 0; } .wd-btn-group-sm > .wd-btn > .wdicon, .wd-btn-group-sm > span > .wd-btn > .wdicon { font-size: 12px; } .wd-btn-group-sm .wd-btn.wd-btn-icon-only { width: 28px; height: 28px; padding-right: 0; padding-left: 0; } .wd-btn-group-xs > .wd-btn, .wd-btn-group-xs > span > .wd-btn { height: 24px; padding: 2px 7px; font-size: 12px; border-radius: 0; } .wd-btn-group-xs > .wd-btn > .wdicon, .wd-btn-group-xs > span > .wd-btn > .wdicon { font-size: 12px; } .wd-btn-group-xs .wd-btn.wd-btn-icon-only { width: 24px; height: 24px; padding-right: 0; padding-left: 0; } .wd-btn-group .wd-btn + .wd-btn, .wd-btn + .wd-btn-group, .wd-btn-group span + .wd-btn, .wd-btn-group .wd-btn + span, .wd-btn-group > span + span, .wd-btn-group + .wd-btn, .wd-btn-group + .wd-btn-group { margin-left: -1px; } .wd-btn-group .wd-btn-primary + .wd-btn:not(.wd-btn-primary):not([disabled]) { border-left-color: transparent; } .wd-btn-group .wd-btn { border-radius: 0; } .wd-btn-group > .wd-btn:first-child, .wd-btn-group > span:first-child > .wd-btn { margin-left: 0; } .wd-btn-group > .wd-btn:only-child { border-radius: 6px; } .wd-btn-group > span:only-child > .wd-btn { border-radius: 6px; } .wd-btn-group > .wd-btn:first-child:not(:last-child), .wd-btn-group > span:first-child:not(:last-child) > .wd-btn { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .wd-btn-group > .wd-btn:last-child:not(:first-child), .wd-btn-group > span:last-child:not(:first-child) > .wd-btn { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .wd-btn-group-sm > .wd-btn:only-child { border-radius: 4px; } .wd-btn-group-sm > span:only-child > .wd-btn { border-radius: 4px; } .wd-btn-group-sm > .wd-btn:first-child:not(:last-child), .wd-btn-group-sm > span:first-child:not(:last-child) > .wd-btn { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .wd-btn-group-sm > .wd-btn:last-child:not(:first-child), .wd-btn-group-sm > span:last-child:not(:first-child) > .wd-btn { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .wd-btn-group > .wd-btn-group { float: left; } .wd-btn-group > .wd-btn-group:not(:first-child):not(:last-child) > .wd-btn { border-radius: 0; } .wd-btn-group > .wd-btn-group:first-child:not(:last-child) > .wd-btn:last-child { padding-right: 8px; border-top-right-radius: 0; border-bottom-right-radius: 0; } .wd-btn-group > .wd-btn-group:last-child:not(:first-child) > .wd-btn:first-child { padding-left: 8px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .wd-btn-rtl.wd-btn-group .wd-btn + .wd-btn, .wd-btn-rtl.wd-btn + .wd-btn-group, .wd-btn-rtl.wd-btn-group span + .wd-btn, .wd-btn-rtl.wd-btn-group .wd-btn + span, .wd-btn-rtl.wd-btn-group > span + span, .wd-btn-rtl.wd-btn-group + .wd-btn, .wd-btn-rtl.wd-btn-group + .wd-btn-group, .wd-btn-group-rtl.wd-btn-group .wd-btn + .wd-btn, .wd-btn-group-rtl.wd-btn + .wd-btn-group, .wd-btn-group-rtl.wd-btn-group span + .wd-btn, .wd-btn-group-rtl.wd-btn-group .wd-btn + span, .wd-btn-group-rtl.wd-btn-group > span + span, .wd-btn-group-rtl.wd-btn-group + .wd-btn, .wd-btn-group-rtl.wd-btn-group + .wd-btn-group { margin-right: -1px; margin-left: auto; } .wd-btn-group.wd-btn-group-rtl { direction: rtl; } .wd-btn-group-rtl.wd-btn-group > .wd-btn:first-child:not(:last-child), .wd-btn-group-rtl.wd-btn-group > span:first-child:not(:last-child) > .wd-btn { border-radius: 0 6px 6px 0; } .wd-btn-group-rtl.wd-btn-group > .wd-btn:last-child:not(:first-child), .wd-btn-group-rtl.wd-btn-group > span:last-child:not(:first-child) > .wd-btn { border-radius: 6px 0 0 6px; } .wd-btn-group-rtl.wd-btn-group-sm > .wd-btn:first-child:not(:last-child), .wd-btn-group-rtl.wd-btn-group-sm > span:first-child:not(:last-child) > .wd-btn { border-radius: 0 4px 4px 0; } .wd-btn-group-rtl.wd-btn-group-sm > .wd-btn:last-child:not(:first-child), .wd-btn-group-rtl.wd-btn-group-sm > span:last-child:not(:first-child) > .wd-btn { border-radius: 4px 0 0 4px; } .wd-btn:focus > span, .wd-btn:active > span { position: relative; } .wd-btn > .wdicon + span, .wd-btn > span + .wdicon { margin-left: 4px; } .wd-btn.wd-btn-background-ghost { color: #fff; border-color: #fff; } .wd-btn.wd-btn-background-ghost, .wd-btn.wd-btn-background-ghost:hover, .wd-btn.wd-btn-background-ghost:active, .wd-btn.wd-btn-background-ghost:focus { background: transparent; } .wd-btn.wd-btn-background-ghost:hover, .wd-btn.wd-btn-background-gho