UNPKG

uiw

Version:

A high quality UI Toolkit, A Component Library for React 16+.

2,314 lines (2,281 loc) 101 kB
.w-overlay { position: fixed; overflow: auto; top: 0; right: 0; left: 0; outline: 0; bottom: 0; z-index: 999; -webkit-overflow-scrolling: touch; text-align: center; height: 100%; width: 100%; display: none; } .w-overlay.open { z-index: 9999; } .w-overlay-open { overflow: hidden; } .w-overlay-content { position: relative; outline: 0; display: inline-block; vertical-align: middle; text-align: left; margin: 20px 0; z-index: 20; } .w-overlay-inline { position: absolute; overflow: visible; overflow: initial; } .w-overlay-inline .w-overlay-container { position: relative; } .w-overlay-inline .w-overlay-backdrop { position: absolute; } .w-overlay-container { position: absolute; overflow: auto; z-index: 99999; top: 0; left: 0; right: 0; bottom: 0; } .w-overlay-container:before { content: ' '; display: inline-block; height: 100%; width: 1px; vertical-align: middle; } .w-overlay-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 1; z-index: 20; background-color: rgba(16, 22, 26, 0.7); overflow: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .w-overlay-enter .w-overlay-backdrop { opacity: 0; } .w-overlay-enter-active .w-overlay-backdrop { opacity: 1; transition: opacity 300ms ease-in; } .w-overlay-exit .w-overlay-backdrop { opacity: 1; } .w-overlay-exit-active .w-overlay-backdrop { opacity: 0; transition: opacity 300ms ease-in; } .w-overlay-enter .w-overlay-content { transform: scale(0.5); opacity: 0; } .w-overlay-enter-active .w-overlay-content { opacity: 1; transform: translate(0); transition: transform 300ms ease, opacity 300ms ease; } .w-overlay-exit .w-overlay-content { opacity: 1; transform: translate(0); transition: transform 300ms ease, opacity 300ms ease; } .w-overlay-exit-active .w-overlay-content { transform: scale(0.5); opacity: 0; } .w-overlay-enter, .w-overlay-enter-done, .w-overlay-exit { display: inherit; } .w-icon, .w-icon svg { height: 1em; width: 1em; } .w-icon { display: inline-flex; align-self: center; position: relative; transition: color 0.3s; box-sizing: inherit; } .w-icon-baseline { top: 0.125em; } .w-icon-spin svg { -webkit-animation: loading-circle 1s infinite linear; animation: loading-circle 1s infinite linear; } @-webkit-keyframes loading-circle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes loading-circle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .w-btn { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; border: none; border-radius: 3px; cursor: pointer; padding: 5px 7px; position: relative; vertical-align: middle; text-align: left; line-height: 14px; font-size: 14px; min-width: 30px; min-height: 30px; text-align: center; color: #fff; transition: background-color 0.5s, opacity 1s; } .w-btn > *:not(:last-child) { margin-right: 5px; } .w-btn + .w-btn:not(.block) { margin-left: 5px; } .w-btn.block { display: block; width: 100%; } .w-btn.disabled, .w-btn[disabled] { cursor: not-allowed; } .w-btn-primary { color: #fff; background-color: #008ef0; z-index: 1; } .w-btn-primary:hover { background-color: #0070bd; } .w-btn-primary:focus, .w-btn-primary.focus { outline: 0; box-shadow: 0 0 0 2px rgba(0, 142, 240, 0.26); } .w-btn-primary:hover { color: #fff; background-color: #0070bd; z-index: 2; } .w-btn-primary:active, .w-btn-primary.active { color: #fff; background-color: #00528a; background-image: none; } .w-btn-primary.disabled, .w-btn-primary[disabled] { background-color: #57baff; z-index: 0; } .w-btn-primary.w-btn-basic { background-color: transparent !important; box-shadow: inset 0 0 0 #000; color: #008ef0; } .w-btn-primary.w-btn-basic:hover { background-color: #c7e8ff !important; } .w-btn-primary.w-btn-basic:active, .w-btn-primary.w-btn-basic.active { color: #008ef0; background-color: #94d3ff !important; background-image: none; } .w-btn-primary.w-btn-basic.disabled, .w-btn-primary.w-btn-basic[disabled] { background-color: transparent !important; color: #24a6ff; } .w-btn-success { color: #fff; background-color: #28a745; z-index: 1; } .w-btn-success:hover { background-color: #1e7e34; } .w-btn-success:focus, .w-btn-success.focus { outline: 0; box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.26); } .w-btn-success:hover { color: #fff; background-color: #1e7e34; z-index: 2; } .w-btn-success:active, .w-btn-success.active { color: #fff; background-color: #145523; background-image: none; } .w-btn-success.disabled, .w-btn-success[disabled] { background-color: #5dd879; z-index: 0; } .w-btn-success.w-btn-basic { background-color: transparent !important; box-shadow: inset 0 0 0 #000; color: #28a745; } .w-btn-success.w-btn-basic:hover { background-color: #b7eec4 !important; } .w-btn-success.w-btn-basic:active, .w-btn-success.w-btn-basic.active { color: #28a745; background-color: #8ee4a2 !important; background-image: none; } .w-btn-success.w-btn-basic.disabled, .w-btn-success.w-btn-basic[disabled] { background-color: transparent !important; color: #34ce57; } .w-btn-warning { color: #fff; background-color: #ffc107; z-index: 1; } .w-btn-warning:hover { background-color: #d39e00; } .w-btn-warning:focus, .w-btn-warning.focus { outline: 0; box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.26); } .w-btn-warning:hover { color: #fff; background-color: #d39e00; z-index: 2; } .w-btn-warning:active, .w-btn-warning.active { color: #fff; background-color: #a07800; background-image: none; } .w-btn-warning.disabled, .w-btn-warning[disabled] { background-color: #ffdb6d; z-index: 0; } .w-btn-warning.w-btn-basic { background-color: transparent !important; box-shadow: inset 0 0 0 #000; color: #ffc107; } .w-btn-warning.w-btn-basic:hover { background-color: #fff7dd !important; } .w-btn-warning.w-btn-basic:active, .w-btn-warning.w-btn-basic.active { color: #ffc107; background-color: #ffeaaa !important; background-image: none; } .w-btn-warning.w-btn-basic.disabled, .w-btn-warning.w-btn-basic[disabled] { background-color: transparent !important; color: #ffce3a; } .w-btn-danger { color: #fff; background-color: #dc3545; z-index: 1; } .w-btn-danger:hover { background-color: #bd2130; } .w-btn-danger:focus, .w-btn-danger.focus { outline: 0; box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.26); } .w-btn-danger:hover { color: #fff; background-color: #bd2130; z-index: 2; } .w-btn-danger:active, .w-btn-danger.active { color: #fff; background-color: #921925; background-image: none; } .w-btn-danger.disabled, .w-btn-danger[disabled] { background-color: #eb8c95; z-index: 0; } .w-btn-danger.w-btn-basic { background-color: transparent !important; box-shadow: inset 0 0 0 #000; color: #dc3545; } .w-btn-danger.w-btn-basic:hover { background-color: #fceced !important; } .w-btn-danger.w-btn-basic:active, .w-btn-danger.w-btn-basic.active { color: #dc3545; background-color: #f4c0c5 !important; background-image: none; } .w-btn-danger.w-btn-basic.disabled, .w-btn-danger.w-btn-basic[disabled] { background-color: transparent !important; color: #e4606d; } .w-btn-light { box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.17), inset 1px -1px 0 0 rgba(0, 0, 0, 0.17), inset -1px 0px 0 0 rgba(0, 0, 0, 0.17); color: #393e48; background-color: #f8f9fa; z-index: 1; } .w-btn-light:hover { background-color: #dae0e5; } .w-btn-light:focus, .w-btn-light.focus { outline: 0; box-shadow: 0 0 0 2px rgba(248, 249, 250, 0.26); } .w-btn-light:hover { color: #393e48; background-color: #dae0e5; z-index: 2; } .w-btn-light:active, .w-btn-light.active { color: #393e48; background-color: #bcc6cf; background-image: none; } .w-btn-light.disabled, .w-btn-light[disabled] { background-color: #ffffff; z-index: 0; } .w-btn-light.w-btn-basic { background-color: transparent !important; box-shadow: inset 0 0 0 #000; color: #f8f9fa; } .w-btn-light.w-btn-basic:hover { background-color: #ffffff !important; } .w-btn-light.w-btn-basic:active, .w-btn-light.w-btn-basic.active { color: #f8f9fa; background-color: #ffffff !important; background-image: none; } .w-btn-light.w-btn-basic.disabled, .w-btn-light.w-btn-basic[disabled] { background-color: transparent !important; color: #ffffff; } .w-btn-light:focus, .w-btn-light.focus { outline: 0; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.17), inset 1px -1px 0 0 rgba(0, 0, 0, 0.17), inset -1px 0px 0 0 rgba(0, 0, 0, 0.17), 0 0 0 2px rgba(0, 0, 0, 0.1); } .w-btn-light.w-btn-basic { color: #9199a7; } .w-btn-light.w-btn-basic:focus, .w-btn-light.w-btn-basic.focus { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.17); } .w-btn-light.w-btn-basic:hover { background-color: #ecedf0 !important; } .w-btn-light.w-btn-basic:active, .w-btn-light.w-btn-basic.active { color: #9199a7; background-color: #d5d8dd !important; background-image: none; } .w-btn-light.w-btn-basic.disabled, .w-btn-light.w-btn-basic[disabled] { background-color: transparent !important; color: #adb3be; } .w-btn-light.disabled, .w-btn-light[disabled] { color: #666f81; z-index: 0; } .w-btn-dark { color: #fff; background-color: #393e48; z-index: 1; } .w-btn-dark:hover { background-color: #22252c; } .w-btn-dark:focus, .w-btn-dark.focus { outline: 0; box-shadow: 0 0 0 2px rgba(57, 62, 72, 0.26); } .w-btn-dark:hover { color: #fff; background-color: #22252c; z-index: 2; } .w-btn-dark:active, .w-btn-dark.active { color: #fff; background-color: #0c0d0f; background-image: none; } .w-btn-dark.disabled, .w-btn-dark[disabled] { background-color: #666f81; z-index: 0; } .w-btn-dark.w-btn-basic { background-color: transparent !important; box-shadow: inset 0 0 0 #000; color: #393e48; } .w-btn-dark.w-btn-basic:hover { background-color: #a2a8b5 !important; } .w-btn-dark.w-btn-basic:active, .w-btn-dark.w-btn-basic.active { color: #393e48; background-color: #858e9f !important; background-image: none; } .w-btn-dark.w-btn-basic.disabled, .w-btn-dark.w-btn-basic[disabled] { background-color: transparent !important; color: #505764; } .w-btn-link { color: #008ef0; background-color: transparent; z-index: 1; } .w-btn-link:hover { background-color: rgba(0, 0, 0, 0); } .w-btn-link:focus, .w-btn-link.focus { outline: 0; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0); } .w-btn-link:hover { color: #008ef0; background-color: rgba(0, 0, 0, 0); z-index: 2; } .w-btn-link:active, .w-btn-link.active { color: #008ef0; background-color: rgba(0, 0, 0, 0); background-image: none; } .w-btn-link.disabled, .w-btn-link[disabled] { background-color: rgba(51, 51, 51, 0); z-index: 0; } .w-btn-link.w-btn-basic { background-color: transparent !important; box-shadow: inset 0 0 0 #000; color: transparent; } .w-btn-link.w-btn-basic:hover { background-color: rgba(107, 107, 107, 0) !important; } .w-btn-link.w-btn-basic:active, .w-btn-link.w-btn-basic.active { color: transparent; background-color: rgba(82, 82, 82, 0) !important; background-image: none; } .w-btn-link.w-btn-basic.disabled, .w-btn-link.w-btn-basic[disabled] { background-color: transparent !important; color: rgba(26, 26, 26, 0); } .w-btn-link:hover:not([disabled]) { color: #006ab3; text-decoration: underline; } .w-btn-link:not([disabled]):active, .w-btn-link:not([disabled]).active { color: #002d4d; box-shadow: none; text-decoration: underline; } .w-btn-link.disabled, .w-btn-link[disabled] { z-index: 0; } .w-btn .w-icon { font-size: 16px; } .w-btn-size-large { font-size: 16px; line-height: 16px; min-height: 36px; } .w-btn-size-large .w-icon { font-size: 20px; } .w-btn-size-small { padding: 0 6px; min-width: 20px; font-size: 12px; line-height: 24px; min-height: 24px; } .w-btn-size-small .w-icon { font-size: 14px; } .w-btn .w-icon:not(:last-child) { margin-right: 5px; } .w-btn-loading.w-btn-light::before { border: 1.2px solid #666f81; } .w-btn-loading::before { content: ''; display: inline-block; width: 1em; height: 1em; border-radius: 50%; border: 1.2px solid #fff; color: #fff; margin: 0 3px 0 0; -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 30%, 0% 30%); clip-path: polygon(0% 0%, 100% 0, 100% 30%, 0% 30%); -webkit-animation: rotate 0.5s linear infinite; animation: rotate 0.5s linear infinite; } @-webkit-keyframes rotate { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } } @keyframes rotate { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } } .w-modal { z-index: 1001; } .w-modal-inner { padding-bottom: 20px; background: #f9f9f9; min-width: 320px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2), 0 18px 46px 6px rgba(16, 22, 26, 0.2); } .w-modal-header { display: flex; align-items: center; min-height: 40px; padding-left: 13px; padding-right: 5px; background-color: #fff; border-radius: 5px 5px 0 0; box-shadow: 0 1px 0 rgba(16, 22, 26, 0.15); font-size: 16px; } .w-modal-header > .w-icon { margin-right: 10px; color: #393e48; } .w-modal-header h4 { margin: 0; padding: 0; flex: 1 1 auto; font-weight: bold; min-height: 22px; } .w-modal-body, .w-modal-footer { margin: 0 20px; } .w-modal-body { padding-top: 20px; font-size: 14px; } .w-modal-footer { display: flex; margin-top: 15px; flex-direction: row-reverse; } .w-modal-footer .w-btn + .w-btn { margin-right: 10px; } .w-alert .w-modal-header, .w-alert .w-modal-body { display: table-cell; } .w-alert .w-modal-header { background-color: transparent; padding: 20px 0 0 20px; box-shadow: 0 0 0 0; padding-right: 0; } .w-alert .w-modal-header > .w-icon { font-size: 40px; margin-right: 0; } .w-alert .w-modal-body { padding-right: 20px; padding-left: 20px; vertical-align: top; } .w-alert.primary .w-modal-header > .w-icon { color: #008ef0; } .w-alert.success .w-modal-header > .w-icon { color: #28a745; } .w-alert.warning .w-modal-header > .w-icon { color: #ffc107; } .w-alert.danger .w-modal-header > .w-icon { color: #dc3545; } .w-alert .w-modal-inner .w-modal-header > button { min-width: 18px; min-height: 18px; padding: 5px 5px; position: absolute; right: 10px; top: 10px; } .w-alert .w-modal-shown-title.w-modal-inner .w-modal-header { display: flex; padding-top: 15px; padding-right: 10px; } .w-alert .w-modal-shown-title.w-modal-inner .w-modal-header > .w-icon { font-size: 40px; position: absolute; top: 18px; } .w-alert .w-modal-shown-title.w-modal-inner .w-modal-header > button > .w-icon { font-size: 14px; } .w-alert .w-modal-shown-title.w-modal-inner .w-modal-body { padding-top: 5px; } .w-alert .w-modal-shown-icon .w-modal-header > h4 { padding-left: 60px; } .w-alert .w-modal-shown-title.w-modal-shown-icon .w-modal-body { padding-left: 80px; } .w-avatar { display: inline-block; text-align: center; background: #ccc; color: #fff; vertical-align: middle; white-space: nowrap; position: relative; overflow: hidden; font-size: 18px; width: 30px; height: 30px; border-radius: 3px; display: inline-flex; justify-content: center; } .w-avatar + .w-avatar { margin-left: 5px; } .w-avatar-mini { height: 18px; width: 18px; font-size: 12px; } .w-avatar-small { height: 24px; width: 24px; font-size: 12px; } .w-avatar-large { height: 40px; width: 40px; font-size: 24px; } .w-avatar-circle { border-radius: 50%; } .w-avatar > img { width: 100%; height: 100%; display: block; } .w-back-top { position: fixed; bottom: 50px; right: 50px; cursor: pointer; z-index: 1006; transition: all 1s; } .w-back-top.no-fixed { cursor: auto; position: static; } .w-back-top-hide { transition: all 1s; opacity: 0; height: 0px; } .w-back-top-show { opacity: 1; } .w-badge { position: relative; display: inline-block; line-height: 1; vertical-align: middle; } sup.w-badge-count { position: absolute; transform: translateX(-50%); top: -10px; height: 16px; border-radius: 10px; min-width: 16px; background: #f04134; color: #fff; line-height: 16px; text-align: center; padding: 0 5px; font-size: 12px; white-space: nowrap; transform-origin: -10% center; font-family: tahoma; box-shadow: 0 0 0 1px #fff; } .w-badge.nowrap sup.w-badge-count { top: auto; display: block; position: relative; transform: none !important; overflow: hidden; } .w-badge sup.dot { position: absolute; transform: translateX(-50%); transform-origin: 0 center; overflow: hidden; color: transparent; top: -4px; height: 6px; width: 6px; padding: 0; border-radius: 100%; background: #f04134; z-index: 10; box-shadow: 0 0 0 1px #fff; } .w-badge-dot { line-height: inherit; vertical-align: baseline; font-size: 14px; margin: 0 4px; width: 6px; height: 6px; display: inline-block; border-radius: 50%; vertical-align: middle; position: relative; top: -1px; } .w-badge-processing .w-badge-dot { position: relative; background-color: #007bff; } .w-badge-processing .w-badge-dot:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: inherit; content: ''; -webkit-animation: wStatusProcessing 1.2s infinite ease-in-out; animation: wStatusProcessing 1.2s infinite ease-in-out; } @-webkit-keyframes wStatusProcessing { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(2.8); opacity: 0; } } @keyframes wStatusProcessing { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(2.8); opacity: 0; } } .w-breadcrumb-item { display: inline-flex; } .w-breadcrumb-item + .w-breadcrumb-item::before, .w-breadcrumb-item + .w-breadcrumb-item .w-breadcrumb-separator { padding-right: 8px; padding-left: 8px; color: #6e6e6e; } .w-breadcrumb-item + .w-breadcrumb-item::before { display: inline-block; content: attr(data-separator); } .w-breadcrumb-item + .w-breadcrumb-item.no-before:before { display: none; } .w-breadcrumb-item + .w-breadcrumb-item.no-separator { margin-left: 6px; } .w-breadcrumb-item + .w-breadcrumb-item.no-separator:before { display: none; } .w-breadcrumb-item.active { color: #6e6e6e; } .w-breadcrumb { display: inline-flex; font-size: 14px; } .w-btn-group > .w-btn { border-radius: 0; box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.17), inset -1px 0 0 0 rgba(0, 0, 0, 0.17), inset -1px 0px 0 0 rgba(0, 0, 0, 0.17); } .w-btn-group > .w-btn:last-child { border-radius: 0 3px 3px 0; } .w-btn-group > .w-btn:first-child { border-radius: 3px 0 0 3px; } .w-btn-group > .w-btn:first-child:last-child { border-radius: 3px !important; } .w-btn-group > .w-btn:focus { z-index: 2; } .w-btn-group .w-btn + .w-btn { margin-left: -1px !important; } .w-btn-group .w-btn:not(.w-btn-light):first-child { box-shadow: inset -1px 0px 0 0 rgba(0, 0, 0, 0.17) !important; } .w-btn-group .w-btn:not(.w-btn-light):last-child { box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.17), inset 0px 0 0 0 rgba(0, 0, 0, 0.17); } .w-btn-group .w-btn-light { box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.17), inset 1px -1px 0 0 rgba(0, 0, 0, 0.17), inset -1px 0px 0 0 rgba(0, 0, 0, 0.17) !important; } .w-btn-group-vertical .w-btn:not(.w-btn-light) { box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.17), inset 0 1px 0 0 rgba(0, 0, 0, 0.17) !important; } .w-btn-group-vertical .w-btn:not(.w-btn-light):first-child { box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.17), inset 0 0 0 0 rgba(0, 0, 0, 0.17) !important; } .w-btn-group-vertical .w-btn { width: 100%; } .w-btn-group-vertical .w-btn + .w-btn { margin-left: 0 !important; margin-top: -1px !important; } .w-btn-group-vertical .w-btn:last-child { border-radius: 0 0 3px 3px; } .w-btn-group-vertical .w-btn:first-child { border-radius: 3px 3px 0 0; } .w-overlay.w-overlay-trigger { position: absolute; top: auto; left: auto; right: auto; bottom: auto; overflow: inherit; width: auto; height: auto; } .w-overlay.w-overlay-trigger .w-overlay-container { position: relative; overflow: inherit; } .w-overlay.w-overlay-trigger .w-overlay-container::before { display: none; } .w-overlay.w-overlay-trigger .w-overlay-content { margin: 0; } .w-overlay.w-overlay-trigger.rightTop .w-overlay-content { transform-origin: left top; } .w-overlay.w-overlay-trigger.right .w-overlay-content { transform-origin: left center; } .w-overlay.w-overlay-trigger.rightBottom .w-overlay-content { transform-origin: left bottom; } .w-overlay.w-overlay-trigger.topLeft .w-overlay-content { transform-origin: bottom left; } .w-overlay.w-overlay-trigger.top .w-overlay-content { transform-origin: bottom center; } .w-overlay.w-overlay-trigger.topRight .w-overlay-content { transform-origin: bottom right; } .w-overlay.w-overlay-trigger.leftTop .w-overlay-content { transform-origin: right top; } .w-overlay.w-overlay-trigger.left .w-overlay-content { transform-origin: right center; } .w-overlay.w-overlay-trigger.leftBottom .w-overlay-content { transform-origin: right bottom; } .w-overlay.w-overlay-trigger.bottomLeft .w-overlay-content { transform-origin: top left; } .w-overlay.w-overlay-trigger.bottom .w-overlay-content { transform-origin: top center; } .w-overlay.w-overlay-trigger.bottomRight .w-overlay-content { transform-origin: top right; } .w-overlay-trigger-disabled { cursor: not-allowed; } .w-popover { position: relative; display: inline-block; outline: 0; } .w-popover-arrow { position: absolute; width: 30px; height: 30px; border-color: transparent; z-index: 21; } .w-popover-inner { font-size: 12px; display: block; text-align: left; text-decoration: none; background-color: #fff; border-radius: 4px; min-height: 23px; box-shadow: rgba(16, 22, 26, 0.1) 0px 0px 0px 1px, rgba(16, 22, 26, 0.2) 0px 2px 4px, rgba(16, 22, 26, 0.2) 0px 8px 24px; } .w-popover.right .w-popover-arrow, .w-popover.rightTop .w-popover-arrow, .w-popover.rightBottom .w-popover-arrow { left: 2px; margin-top: -15px; top: 50%; } .w-popover.left .w-popover-arrow, .w-popover.leftTop .w-popover-arrow, .w-popover.leftBottom .w-popover-arrow { transform: rotate(180deg); margin-top: -15px; right: 2px; top: 50%; } .w-popover.leftTop .w-popover-arrow, .w-popover.rightTop .w-popover-arrow { top: 15px; } .w-popover.leftBottom .w-popover-arrow, .w-popover.rightBottom .w-popover-arrow { bottom: 0; top: auto; } .w-popover.top .w-popover-arrow, .w-popover.topLeft .w-popover-arrow, .w-popover.topRight .w-popover-arrow { transform: rotate(-90deg); bottom: 2px; left: 50%; margin-left: -15px; } .w-popover.bottom .w-popover-arrow, .w-popover.bottomLeft .w-popover-arrow, .w-popover.bottomRight .w-popover-arrow { transform: rotate(90deg); left: 50%; margin-left: -15px; top: 2px; } .w-popover.bottomLeft .w-popover-arrow, .w-popover.topLeft .w-popover-arrow { left: 15px; } .w-popover.bottomRight .w-popover-arrow, .w-popover.topRight .w-popover-arrow { right: 0; left: auto; } .w-popover.top, .w-popover.topLeft, .w-popover.topRight { padding-bottom: 13px; } .w-popover.bottom, .w-popover.bottomLeft, .w-popover.bottomRight { padding-top: 13px; } .w-popover.right, .w-popover.rightTop, .w-popover.rightBottom { padding-left: 13px; } .w-popover.left, .w-popover.leftTop, .w-popover.leftBottom { padding-right: 13px; } .w-popover.no-arrow { padding: 0 !important; } .w-input { position: relative; font-size: 14px; line-height: 14px; width: 100%; } .w-input-inner { outline: none; border: none; border-radius: 3px; box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2); box-sizing: border-box; background: #fff; height: 30px; margin: 0 !important; padding: 0 10px; vertical-align: middle; line-height: 30px; color: #393e48; font-weight: 400; font-size: inherit; transition: box-shadow 0.3s cubic-bezier(0.4, 1, 0.75, 0.9); -webkit-appearance: none; -moz-appearance: none; appearance: none; } .w-input-inner:not(:first-child) { padding-left: 26px; } .w-input-inner:focus { box-shadow: 0 0 0 1px #393e48, 0 0 0 3px rgba(57, 62, 72, 0.17), inset 0 1px 1px rgba(16, 22, 26, 0.2); } .w-input-inner:hover { box-shadow: 0 0 0 1px #6e6e6e, 0 0 0 3px rgba(57, 62, 72, 0), inset 0 1px 1px rgba(16, 22, 26, 0.2); } .w-input-inner:focus.w-input-inner:hover { box-shadow: 0 0 0 1px #6e6e6e, 0 0 0 3px rgba(57, 62, 72, 0.17), inset 0 1px 1px rgba(16, 22, 26, 0.2); } .w-input-inner:disabled { box-shadow: none; background: #dddddd; opacity: 0.75; color: #a5a5a5; cursor: not-allowed; resize: none; } .w-input .w-input-inner { width: 100%; } .w-input > .w-icon { position: absolute; margin: 0 7px 0 7px; transform: translateY(-50%); top: 50%; } .w-input-addon-after { position: absolute; top: 3px; right: 3px; display: flex; bottom: 3px; } .w-input-addon-after > * { display: flex !important; align-items: center; } .w-input-large { font-size: 16px; } .w-input-large .w-input-inner { line-height: 36px; height: 36px; } .w-input-small { min-width: 20px; } .w-input-small .w-input-inner { line-height: 24px; height: 24px; padding: 0 6px; } .w-input-small .w-input-inner:not(:first-child) { padding-left: 26px; } .w-input-small .w-input-addon-after > * { line-height: 16px; min-height: 16px; } .w-timepicker { display: flex; } .w-timepicker::after { content: ''; display: block; clear: both; } .w-timepicker-spinner { max-height: 189px; flex: 1 1; overflow: hidden; font-size: 14px; } .w-timepicker-spinner:hover { overflow: auto; } .w-timepicker-spinner > ul { list-style: none; min-width: 56px; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 162px !important; } .w-timepicker-spinner > ul > li + li { margin-top: 0 !important; } .w-timepicker-spinner > ul > li { cursor: pointer; text-align: center; padding: 5px 0; transition: all 0.3s; color: #393e48; } .w-timepicker-spinner > ul > li:hover:not(.disabled) { background-color: #f6f8fa; } .w-timepicker-spinner > ul > li:active:not(.disabled) { background-color: #e1e5e8; } .w-timepicker-spinner > ul > li.selected { background-color: #f1f1f1; font-weight: bold; color: #000; } .w-timepicker-spinner > ul > li.disabled { color: #d4d4d4; cursor: not-allowed; } .w-timepicker-spinner > ul > li.disabled.hide { display: none; } .w-timepicker-spinner + .w-timepicker-spinner ul { border-left: 1px solid #e9e9e9; } .w-timepicker { overflow: hidden; border-radius: 4px; } .w-timepicker-input.disabled .w-timepicker-close-btn { display: none !important; } .w-timepicker-input .w-timepicker-close-btn { display: none; min-height: 0; min-height: initial; color: #a5a5a5; } .w-timepicker-input .w-timepicker-close-btn:hover { color: #393e48; background-color: transparent !important; } .w-datepicker-weekday, .w-datepicker-week { display: flex; width: 100%; } .w-datepicker-weekday > div, .w-datepicker-week > div { display: table-cell; flex: 1 1; min-width: 26px; min-height: 26px; vertical-align: middle; text-align: center; } .w-datepicker-weekday > div { font-weight: bold; } .w-datepicker-weekday > div.end, .w-datepicker-week > div.end { color: #6f6f6f; } .w-datepicker-week > div { border-radius: 3px; cursor: pointer; } .w-datepicker-week > div.prev, .w-datepicker-week > div.next { color: #d3d3d3; } .w-datepicker-week > div > div { transition: background-color 0.3s, color 0.3s; margin: 0 2px; border-radius: 3px; line-height: 22px; } .w-datepicker-week > div.today > div { background-color: #eaeaea; } .w-datepicker-week > div.selected > div, .w-datepicker-week > div.selected:hover > div { color: #fff; background-color: #2ea3f4; } .w-datepicker-week > div:hover > div { background-color: #eaeaea; color: #393e48; } .w-datepicker-week > div:active > div { background-color: #d2d2d2; } .w-datepicker-week > div.disabled > div, .w-datepicker-week > div.disabled:hover > div { color: #d3d3d3; cursor: not-allowed; background-color: #f5f5f5; } .w-datepicker-week > div.disabled.today > div, .w-datepicker-week > div.disabled:hover.today > div { background-color: rgba(189, 189, 189, 0.47); color: #fff; } .w-datepicker-week > div.disabled.selected > div, .w-datepicker-week > div.disabled:hover.selected > div { background-color: rgba(46, 163, 244, 0.47); color: #fff; } .w-datepicker-body { padding-top: 5px; } .w-datepicker-month, .w-datepicker-year { text-align: center; max-width: 100%; padding: 7px 0 5px 0; } .w-datepicker-month > div, .w-datepicker-year > div { display: inline-block; width: 50%; line-height: 22px; margin: 3px 0; } .w-datepicker-month > div > span, .w-datepicker-year > div > span { display: inline-block; padding: 1px 6px; border-radius: 3px; cursor: pointer; } .w-datepicker-month > div.selected > span, .w-datepicker-year > div.selected > span { color: #fff; background-color: #2ea3f4; } .w-datepicker-month > div > span:hover, .w-datepicker-year > div > span:hover { background-color: #dcf0fd; color: #2ea3f4; } .w-datepicker-month > div.paging, .w-datepicker-year > div.paging { color: rgba(0, 0, 0, 0.25); } .w-datepicker-year > div { width: 33.333%; } .w-datepicker-caption { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: center; padding: 0 0 3px 0; border-bottom: 1px solid #ececec; } .w-datepicker-caption-pane { transition: background-color 0.3s; display: inline-block; border-radius: 3px; padding: 1px 5px; font-weight: bold; cursor: pointer; } .w-datepicker-caption-pane:hover { background-color: #eaeaea; } .w-datepicker-caption-pane:active { background-color: #d2d2d2; } .w-datepicker-caption-pane.year + .w-datepicker-caption-pane.month { margin-left: 5px; } .w-datepicker-caption-pane.prev, .w-datepicker-caption-pane.next { z-index: 30; position: relative; padding: 1px 8px 6px 8px; } .w-datepicker-caption-pane.prev::after, .w-datepicker-caption-pane.next::after, .w-datepicker-caption-pane.prev::before, .w-datepicker-caption-pane.next::before { content: ''; display: block; height: 8px; width: 2px; border-radius: 2px; background-color: #333; } .w-datepicker-caption-pane.prev::after, .w-datepicker-caption-pane.next::after { margin-top: -4px; } .w-datepicker-caption-pane.prev::before, .w-datepicker-caption-pane.next::before { margin-top: 4px; } .w-datepicker-caption-pane.prev::after, .w-datepicker-caption-pane.next::before { transform: rotate(-45deg); } .w-datepicker-caption-pane.prev::before, .w-datepicker-caption-pane.next::after { transform: rotate(45deg); } .w-datepicker-caption-pane.prev { float: left; } .w-datepicker-caption-pane.next { float: right; } .w-datepicker-caption-today { cursor: pointer; background: #dedede; border-radius: 3px; display: inline-block; height: 10px; width: 10px; overflow: hidden; margin: 0 0 0 2px; transition: background-color 0.3s; } .w-datepicker-caption-today::before { content: ''; display: block; height: 4px; width: 4px; border-radius: 3px; margin: 3px 0 0 3px; background-color: #a0a0a0; } .w-datepicker-caption-today:hover { background-color: #2ea3f4; } .w-datepicker-caption-today:hover::before { background-color: #fff; } .w-datepicker-caption-today:active { background-color: #007cd2; } .w-datepicker-caption-today:active::before { background-color: #fff; } .w-datepicker { vertical-align: top; display: inline-block; position: relative; border-radius: 3px; background: #fff; color: #393e48; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 14px; line-height: 21px; padding: 5px; min-width: 192px; max-width: 192px; box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.2); } .w-datepicker-timepicker { padding-bottom: 2px; border: 1px solid #e9e9e9; border-top: 0; border-radius: 0 0 4px 4px !important; } .w-datepicker-time-btn { cursor: pointer; margin-top: 2px; transition: background-color 0.3s; display: inline-block; border-radius: 3px; padding: 1px 5px; } .w-datepicker-time-btn:hover { background-color: #eaeaea; } .w-datepicker-time-btn:active { background-color: #d2d2d2; } .w-calendar-inner { text-align: right; padding: 5px; } .w-calendar-panel { width: 100%; height: 90px; line-height: 16px; overflow-y: auto; text-align: left; } .w-calendar-panel > * { overflow: hidden; white-space: nowrap; width: 100%; text-overflow: ellipsis; font-size: 12px; } .w-calendar-caption { font-size: 26px; font-weight: 200; width: 100%; display: inline-block; } .w-calendar-title, .w-calendar-btn-group { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .w-calendar-btn-group { float: right; } .w-calendar-btn-group > .w-calendar-btn { font-size: 16px; padding: 2px 3px; position: relative; top: -3px; } .w-calendar-btn-group > .w-icon, .w-calendar-btn-group > .w-calendar-btn { cursor: pointer; border-radius: 3px; transition: all 0.3s; } .w-calendar-btn-group > .w-icon:hover, .w-calendar-btn-group > .w-calendar-btn:hover { background-color: #ececec; } .w-calendar-btn-group > .w-icon:active, .w-calendar-btn-group > .w-calendar-btn:active { background-color: #dedddd; } .w-calendar-btn-group > .w-icon, .w-calendar-btn-group > .w-calendar-btn { vertical-align: middle; margin-top: -6px; } .w-calendar-btn-group > .w-icon > svg, .w-calendar-btn-group > .w-calendar-btn > svg { width: 18px; height: 18px; margin: 4px 0px 0px 4px; } .w-calendar-btn-group > .w-icon:last-child, .w-calendar-btn-group > .w-calendar-btn:last-child { transform: rotate(-90deg); } .w-calendar-btn-group > .w-icon:first-child, .w-calendar-btn-group > .w-calendar-btn:first-child { transform: rotate(90deg); } .w-calendar-day { padding-right: 5px; } .w-calendar .w-datepicker-body { padding: 0 0 0 0; } .w-calendar .w-datepicker-week:last-child > div { border-bottom: 0; } .w-calendar .w-datepicker-week > div { border-radius: 0; border-right: 1px solid #ececec; border-bottom: 1px solid #ececec; } .w-calendar .w-datepicker-week > div:last-child { border-right: 0; } .w-calendar .w-datepicker-week > div > div { margin: 0; border-radius: 0; } .w-calendar .w-datepicker-weekday > div { background-color: #ececec; height: 32px; line-height: 32px; } .w-card { background: #fff; border-radius: 5px; font-size: 14px; line-height: 1.5; position: relative; transition: all 0.3s; } .w-card:not(.w-card-no-hover):hover, .w-card.active { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); border-color: rgba(0, 0, 0, 0.2); } .w-card-bordered { border: 1px solid #e9e9e9; } .w-card-head { height: 40px; line-height: 40px; padding: 0 14px; border-radius: 2px 2px 0 0; zoom: 1; } .w-card-head + .w-card-body { border-top: 1px solid #e9e9e9; } .w-card-head-title { font-size: 14px; text-overflow: ellipsis; max-width: 100%; overflow: hidden; white-space: nowrap; color: rgba(0, 0, 0, 0.85); font-weight: 500; display: inline-block; } .w-card-extra { position: absolute; right: 16px; top: 0; } .w-card-body { padding: 14px; } .w-card-body + .w-card-footer { border-top: 1px solid rgba(0, 0, 0, 0.05); } .w-card-footer { padding: 8px 10px; } .w-card-footer a { color: rgba(0, 0, 0, 0.4); } .w-radio { vertical-align: middle; display: inline-block; font-size: 12px; } .w-radio input[type='radio'] { outline: none; position: relative; width: 16px; height: 16px; background-clip: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: -0.15px 0.6px 0 0; border-radius: 50%; background-color: #fff; border: 1px solid #d7d7d7; transition: border 0.25s, box-shadow 0.25s; } .w-radio input[type='radio']:not(:checked):not(:disabled):not(.disabled):hover, .w-radio input[type='radio']:not(:checked):not(:disabled):not(.disabled):focus { box-shadow: 0 0 0 2px rgba(0, 142, 240, 0.25); } .w-radio input[type='radio'], .w-radio-text { vertical-align: middle; } .w-radio input[type='radio']:checked { border: 5px solid #008ef0; } .w-radio input[type='radio']:checked:focus { box-shadow: 0 0 0 2px rgba(0, 142, 240, 0.25); } .w-radio.disabled { color: #c7c7c7; cursor: not-allowed; } .w-radio.disabled input[type='radio'] { cursor: not-allowed; } .w-radio.disabled input[type='radio']:checked { border: 5px solid #cecece; } .w-radio.disabled:not(.checked) input[type='radio'] { background-color: #efefef; } .w-radio-text { display: inline-block; margin-left: 4px; margin-right: 5px; font-size: 14px; } .w-radio-group { font-size: 0; } .w-checkbox { vertical-align: middle; font-size: 0; cursor: pointer; white-space: nowrap; } .w-checkbox input[type='checkbox'] { outline: none; width: 14px; height: 14px; font-size: 14px; line-height: 14px; border-radius: 2px; background-clip: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0 !important; background-color: #d7d7d7; transition: background-color 0.3s, box-shadow 0.3s; } .w-checkbox input[type='checkbox']:after { content: ''; box-sizing: inherit; } .w-checkbox input[type='checkbox']:not(:checked):not(:disabled):not(.disabled):focus, .w-checkbox input[type='checkbox']:not(:checked):not(:disabled):not(.disabled):hover { box-shadow: inset 0 1px 2px rgba(16, 22, 26, 0.35); } .w-checkbox.disabled, .w-checkbox.disabled input[type='checkbox'] { cursor: not-allowed; } .w-checkbox.disabled input[type='checkbox'] { opacity: 0.5; } .w-checkbox.disabled .w-checkbox-text { color: #6e6e6e; } .w-checkbox.indeterminate input[type='checkbox'], .w-checkbox.indeterminate input[type='checkbox']:checked { background-color: transparent; box-shadow: inset 0 0 0 1px #008ef0; } .w-checkbox.indeterminate input[type='checkbox']:after, .w-checkbox.indeterminate input[type='checkbox']:checked:after { display: inline-block; background-color: #008df8; box-sizing: inherit; transform: rotate(0); position: relative; top: -1px; right: -3px; border-width: 0; border-radius: 2px; height: 8px; width: 8px; } .w-checkbox input[type='checkbox'], .w-checkbox-text { vertical-align: middle; } .w-checkbox input[type='checkbox']:checked { background-color: #008ef0; } .w-checkbox input[type='checkbox']:checked:after { transition: background-color 0.2s ease-in; display: inline-block; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(33deg); position: relative; top: -1px; right: -4px; height: 10px; width: 6px; } .w-checkbox-text { display: inline-block; padding-left: 4px; margin-right: 5px; font-size: 14px; line-height: 14px; } .w-collapse { border-radius: 4px; line-height: 16px; font-size: 14px; background-color: #fff; border: 1px solid #d9d9d9; overflow: hidden; } .w-collapse > .w-collapse-item:last-child .w-collapse-header, .w-collapse > .w-collapse-item:last-child { border-radius: 0 0 5px 5px; } .w-collapse-title { flex: 1 1; } .w-collapse-header { padding: 8px 10px; color: rgba(0, 0, 0, 0.85); background-color: #fafafa; cursor: pointer; position: relative; transition: all 0.3s; z-index: 1; display: flex; } .w-collapse-header > .w-icon:first-child { margin-top: -2px; margin-right: 5px; transform: scale(0.85) rotate(-90deg); transition: transform 0.24s; } .w-collapse-header > .w-icon:first-child svg { display: block; } .w-collapse-header > * { vertical-align: middle; display: inline-block; } .w-collapse-active .w-collapse-header > .w-icon:first-child { transform: scale(0.85) rotate(0); } .w-collapse-panel { overflow: hidden; color: rgba(0, 0, 0, 0.65); padding: 0 10px; } .w-collapse-panel:before, .w-collapse-panel:after { content: ''; height: 10px; display: block; overflow: hidden; } .w-collapse-panel:before { border-top: 1px solid #d9d9d9; margin: 0 -10px; z-index: 1; position: relative; } .w-collapse-panel:after { border-bottom: 1px solid #d9d9d9; margin: 0 -10px; z-index: 1; position: relative; } .w-collapse > .w-collapse-item:last-child .w-collapse-panel:after { border-bottom: 0 solid #d9d9d9; } .w-collapse > .w-collapse-item:not(.w-collapse-active):last-child .w-collapse-panel:before { border-top: 0 solid #d9d9d9; } .w-collapse-disabled .w-collapse-header { cursor: not-allowed; color: rgba(0, 0, 0, 0.25); background-color: #f7f7f7; } .w-collapse.w-noborder .w-collapse-header { background-color: transparent; } .w-collapse.w-noborder { border: 0; } .w-collapse.w-noborder .w-collapse-item .w-collapse-panel:after, .w-collapse.w-noborder .w-collapse-item .w-collapse-panel:before { border: 0; } .w-collapse.w-noborder .w-collapse-item:last-child { border: 0; } .w-copy-to-clipboard { cursor: pointer; } .w-copy-to-clipboard-select { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; display: none; } .w-dateinput { display: inline-block; } .w-dateinput-popover { box-shadow: 0 0 0 0; } .w-dateinput.disabled .w-dateinput-close-btn { display: none; } .w-dateinput-close-btn { display: flex; margin: 0 3px; color: #a5a5a5; cursor: pointer; } .w-dateinput-close-btn:hover { color: #393e48; } .w-descriptions table { display: table !important; margin-bottom: 0 !important; margin: 0; border-spacing: 0; border-collapse: collapse; table-layout: fixed; width: 100%; } .w-descriptions { background: #fff; } .w-descriptions-title { font-weight: bold; text-align: left; margin-bottom: 8px; color: rgba(0, 0, 0, 0.85); font-size: 16px; line-height: 1.5; } .w-descriptions .w-descriptions-row:nth-child(2n) { background-color: transparent; } .w-descriptions-item-label { font-size: 14px; white-space: nowrap; font-weight: normal; } .w-descriptions-item-label::after { position: relative; top: -0.5px; margin: 0 8px 0 2px; content: ' '; } .w-descriptions-item-colon::after { content: ':'; } .w-descriptions-item-colon { color: rgba(0, 0, 0, 0.95); } .w-descriptions-item-content { font-size: 14px; color: rgba(0, 0, 0, 0.65); } .w-descriptions-small.w-descriptions-bordered tbody tr th, .w-descriptions-small.w-descriptions-bordered tbody .w-descriptions-row td { padding: 4px 8px; } .w-descriptions-large.w-descriptions-bordered tbody tr th, .w-descriptions-large.w-descriptions-bordered tbody .w-descriptions-row td { padding: 14px 16px; } .w-descriptions-bordered { overflow: hidden; border-radius: 3px; border: 1px solid #dfe2e5; } .w-descriptions-bordered tbody tr th { padding: 8px 12px; background-color: #fafafa; font-weight: normal; } .w-descriptions-bordered tbody tr th, .w-descriptions-bordered tbody tr td { border-top: 1px solid #dfe2e5; border-right: 1px solid #dfe2e5; } .w-descriptions-bordered tbody:first-child tr:first-child th, .w-descriptions-bordered tbody:first-child tr:first-child td { border-top: 0; } .w-descriptions:not(.w-descriptions-bordered) .w-descriptions-row td { padding-bottom: 8px; } .w-descriptions-bordered .w-descriptions-row td { padding: 8px 12px; } .w-descriptions-bordered .w-descriptions-title { margin-bottom: 0; padding: 7px 12px; } .w-descriptions-bordered .w-descriptions-item-label:last-child, .w-descriptions-bordered .w-descriptions-item-content:last-child { border-right: none; } .w-divider { font-size: 16px; line-height: 1.5; box-sizing: border-box; margin: 0; padding: 0; list-style: none; background: #e8e8e8; } .w-divider, .w-divider-vertical { margin: 0 8px; display: inline-block; height: 0.9em; width: 1px; vertical-align: middle; position: relative; top: -0.06em; } .w-divider-horizontal { display: block; height: 1px; width: 100%; margin: 16px 0; } .w-divider-horizontal.w-divider-with-text { display: table; white-space: nowrap; text-align: center; background: transparent; font-weight: 500; color: #353535; margin: 16px 0; } .w-divider-horizontal.w-divider-with-text:before, .w-divider-horizontal.w-divider-with-text:after { content: ''; display: table-cell; position: relative; top: 50%; width: 50%; border-top: 1px solid #e8e8e8; transform: translateY(50%); } .w-divider-left.w-divider-with-text::before, .w-divider-right.w-divider-with-text::after { width: 5%; } .w-divider-left.w-divider-with-text::after, .w-divider-right.w-divider-with-text::before { width: 95%; } .w-divider-dashed.w-divider-with-text::before, .w-divider-dashed.w-divider-with-text::after { border-top-style: dashed; } .w-divider-inner-text { display: inline-block; padding: 0 10px; } .w-divider-dashed:not(.w-divider-with-text) { background: none; border-top: 1px dashed #e8e8e8; } .w-drawer-wrapper { box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 0 46px 6px rgba(16, 22, 26, 0.2); background-color: #fff; position: fixed; margin: 0 !important; display: flex; flex-direction: column; } .w-drawer-header { display: flex; align-items: center; min-height: 40px; padding-left: 13px; padding-right: 5px; background-color: #fff; border-radius: 5px 5px 0 0; box-shadow: 0 1px 0 rgba(16, 22, 26, 0.15); font-size: 16px; } .w-drawer-header > .w-icon { margin-right: 10px; color: #393e48; } .w-drawer-header h4 { margin: 0; padding: 0; flex: 1 1 auto; } .w-drawer-body { flex: 1 1 auto; overflow: auto; line-height: 18px; } .w-drawer-footer { box-shadow: 0 -1px 0 rgba(16, 22, 26, 0.15); min-height: 40px; padding-left: 13px; padding-right: 5px; display: flex; align-items: center; } .w-drawer-body-inner { padding: 15px; } .w-drawer.top .w-drawer-wrapper, .w-drawer.bottom .w-drawer-wrapper { left: 0; right: 0; } .w-drawer.top .w-drawer-wrapper { top: 0; } .w-drawer.bottom .w-drawer-wrapper { bottom: 0; } .w-drawer.right .w-drawer-wrapper, .w-drawer.left .w-drawer-wrapper { bottom: 0; top: 0; } .w-drawer.right .w-drawer-wrapper { right: 0; } .w-drawer.left .w-drawer-wrapper { left: 0; } .w-drawer.w-overlay-enter .w-overlay-content { opacity: 1; } .w-drawer.w-overlay-enter-active .w-overlay-content { transition: all 0.2s cubic-bezier(0.4, 1, 0.75, 0.9); } .w-drawer.w-overlay-exit .w-overlay-content { opacity: 1; } .w-drawer.w-overlay-exit-active .w-overlay-content { transition: all 0.2s cubic-bezier(0.4, 1, 0.75, 0.9); } .w-drawer.right.w-overlay-enter .w-overlay-content { transform: translateX(100%); } .w-drawer.right.w-overlay-enter-active .w-overlay-content { transform: translateX(0); } .w-drawer.right.w-overlay-exit .w-overlay-content { transform: translateX(0); } .w-drawer.right.w-overlay-exit-active .w-overlay-content { transform: translateX(100%); } .w-drawer.left.w-overlay-enter .w-overlay-content { transform: translateX(-100%); } .w-drawer.left.w-overlay-enter-active .w-overlay-content { transform: translateX(0); } .w-drawer.left.w-overlay-exit .w-overlay-content { transform: translateX(0); } .w-drawer.left.w-overlay-exit-active .w-overlay-content { transform: translateX(-100%); } .w-drawer.top.w-overlay-enter .w-overlay-content { transform: translateY(-100%); } .w-drawer.top.w-overlay-enter-active .w-overlay-content { transform: translateY(0); } .w-drawer.top.w-overlay-exit .w-overlay-content { transform: translateY(0); } .w-drawer.top.w-overlay-exit-active .w-overlay-content { transform: translateY(-100%); } .w-drawer.bottom.w-overlay-enter .w-overlay-content { transform: translateY(100%); } .w-drawer.bottom.w-overlay-enter-active .w-overlay-content { transform: translateY(0); } .w-drawer.bottom.w-overlay-exit .w-overlay-content { transform: translateY(0); } .w-drawer.bottom.w-overlay-exit-active .w-overlay-content { transform: translateY(100%); } .w-fileinput input { padding: 5px; } .w-col { min-width: 0; box-sizing: border-box; flex: 0 0 auto; flex-grow: 1; flex-basis: 0; max-width: 100%; } .w-col-fixed { flex: 0 1 auto; } .w-col-align-top { align-self: flex-start; } .w-col-align-middle { align-self: center; } .w-col-align-bottom { align-self: flex-end; } .w-col-align-baseline { align-self: baseline; } .w-col-grow-1 { flex-grow: 1; } .w-col-grow-2 { flex-grow: 2; } .w-col-grow-3 { flex-grow: 3; } .w-col-grow-4 { flex-grow: 4; } .w-col-grow-5 { flex-grow: 5; } .w-col-grow-6 { flex-grow: 6; } .w-col-grow-7 { flex-grow: 7; } .w-col-grow-8 { flex-grow: 8; } .w-col-grow-9 { flex-grow: 9; } .w-col-grow-10 { flex-grow: 10; } .w-col-grow-11 { flex-grow: 11; } .w-col-1 { flex-basis: 4.16666667%; max-width: 4.16666667%; } .w-col-2 { flex-basis: 8.33333333%; max-width: 8.33333333%; } .w-col-3 { flex-basis: 12.5%; max-width: 12.5%; } .w-col-4 { flex-basis: 16.66666667%; max-width: 16.66666667%; } .w-col-5 { flex-basis: 20.83333333%; max-width: 2