UNPKG

@mdsfe/mds-ui

Version:

A set of enterprise-class Vue UI components.

1,191 lines (1,190 loc) 36.5 kB
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ /* stylelint-disable declaration-bang-space-before */ /* stylelint-disable declaration-bang-space-before */ .mds-input-affix-wrapper.mds-input-search .mds-input:not(:last-child) { padding-right: 45px; } .mds-input-search-icon { cursor: pointer; transition: all .3s; font-size: 14px; } .mds-input-search-icon:hover { color: #0364ff; } .mds-search-input-wrapper { display: inline-block; vertical-align: middle; } .mds-input-search .mds-input-group-addon { border: none; } .mds-search-input.mds-input-group .mds-input:first-child, .mds-search-input.mds-input-group .mds-select:first-child { border-radius: 4px; position: absolute; top: -1px; width: 100%; } .mds-search-input.mds-input-group .mds-input:first-child { padding-right: 36px; } .mds-search-input .mds-search-btn { color: #666666; background-color: #fff; border-color: #d9d9d9; border-radius: 0 3px 3px 0; left: -1px; position: relative; border-width: 0 0 0 1px; z-index: 2; padding-left: 8px; padding-right: 8px; } .mds-search-input .mds-search-btn > a:only-child { color: currentColor; } .mds-search-input .mds-search-btn > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .mds-search-input .mds-search-btn:hover, .mds-search-input .mds-search-btn:focus { color: #0364ff; background-color: #fff; border-color: #0364ff; } .mds-search-input .mds-search-btn:hover > a:only-child, .mds-search-input .mds-search-btn:focus > a:only-child { color: currentColor; } .mds-search-input .mds-search-btn:hover > a:only-child:after, .mds-search-input .mds-search-btn:focus > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .mds-search-input .mds-search-btn:active, .mds-search-input .mds-search-btn.active { color: #0252dd; background-color: #fff; border-color: #0252dd; } .mds-search-input .mds-search-btn:active > a:only-child, .mds-search-input .mds-search-btn.active > a:only-child { color: currentColor; } .mds-search-input .mds-search-btn:active > a:only-child:after, .mds-search-input .mds-search-btn.active > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .mds-search-input .mds-search-btn.disabled, .mds-search-input .mds-search-btn[disabled], .mds-search-input .mds-search-btn.disabled:hover, .mds-search-input .mds-search-btn[disabled]:hover, .mds-search-input .mds-search-btn.disabled:focus, .mds-search-input .mds-search-btn[disabled]:focus, .mds-search-input .mds-search-btn.disabled:active, .mds-search-input .mds-search-btn[disabled]:active, .mds-search-input .mds-search-btn.disabled.active, .mds-search-input .mds-search-btn[disabled].active { color: rgba(0, 0, 0, 0.2); background-color: #f7f7f7; border-color: #d9d9d9; } .mds-search-input .mds-search-btn.disabled > a:only-child, .mds-search-input .mds-search-btn[disabled] > a:only-child, .mds-search-input .mds-search-btn.disabled:hover > a:only-child, .mds-search-input .mds-search-btn[disabled]:hover > a:only-child, .mds-search-input .mds-search-btn.disabled:focus > a:only-child, .mds-search-input .mds-search-btn[disabled]:focus > a:only-child, .mds-search-input .mds-search-btn.disabled:active > a:only-child, .mds-search-input .mds-search-btn[disabled]:active > a:only-child, .mds-search-input .mds-search-btn.disabled.active > a:only-child, .mds-search-input .mds-search-btn[disabled].active > a:only-child { color: currentColor; } .mds-search-input .mds-search-btn.disabled > a:only-child:after, .mds-search-input .mds-search-btn[disabled] > a:only-child:after, .mds-search-input .mds-search-btn.disabled:hover > a:only-child:after, .mds-search-input .mds-search-btn[disabled]:hover > a:only-child:after, .mds-search-input .mds-search-btn.disabled:focus > a:only-child:after, .mds-search-input .mds-search-btn[disabled]:focus > a:only-child:after, .mds-search-input .mds-search-btn.disabled:active > a:only-child:after, .mds-search-input .mds-search-btn[disabled]:active > a:only-child:after, .mds-search-input .mds-search-btn.disabled.active > a:only-child:after, .mds-search-input .mds-search-btn[disabled].active > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .mds-search-input .mds-search-btn > a:only-child { color: currentColor; } .mds-search-input .mds-search-btn > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .mds-search-input .mds-search-btn:hover, .mds-search-input .mds-search-btn:focus, .mds-search-input .mds-search-btn:active, .mds-search-input .mds-search-btn.active { background: #fff; } .mds-search-input .mds-search-btn:hover { border-color: #d9d9d9; } .mds-search-input.mds-search-input-focus .mds-search-btn-noempty, .mds-search-input:hover .mds-search-btn-noempty { color: #fff; background-color: #0364ff; border-color: #0364ff; } .mds-search-input.mds-search-input-focus .mds-search-btn-noempty > a:only-child, .mds-search-input:hover .mds-search-btn-noempty > a:only-child { color: currentColor; } .mds-search-input.mds-search-input-focus .mds-search-btn-noempty > a:only-child:after, .mds-search-input:hover .mds-search-btn-noempty > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .mds-search-input.mds-search-input-focus .mds-search-btn-noempty:hover, .mds-search-input:hover .mds-search-btn-noempty:hover, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty:focus, .mds-search-input:hover .mds-search-btn-noempty:focus { color: #fff; background-color: #3f89ff; border-color: #1770FF; } .mds-search-input.mds-search-input-focus .mds-search-btn-noempty:hover > a:only-child, .mds-search-input:hover .mds-search-btn-noempty:hover > a:only-child, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty:focus > a:only-child, .mds-search-input:hover .mds-search-btn-noempty:focus > a:only-child { color: currentColor; } .mds-search-input.mds-search-input-focus .mds-search-btn-noempty:hover > a:only-child:after, .mds-search-input:hover .mds-search-btn-noempty:hover > a:only-child:after, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty:focus > a:only-child:after, .mds-search-input:hover .mds-search-btn-noempty:focus > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .mds-search-input.mds-search-input-focus .mds-search-btn-noempty:active, .mds-search-input:hover .mds-search-btn-noempty:active, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.active, .mds-search-input:hover .mds-search-btn-noempty.active { color: #fff; background-color: #0252dd; border-color: #125ACC; } .mds-search-input.mds-search-input-focus .mds-search-btn-noempty:active > a:only-child, .mds-search-input:hover .mds-search-btn-noempty:active > a:only-child, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.active > a:only-child, .mds-search-input:hover .mds-search-btn-noempty.active > a:only-child { color: currentColor; } .mds-search-input.mds-search-input-focus .mds-search-btn-noempty:active > a:only-child:after, .mds-search-input:hover .mds-search-btn-noempty:active > a:only-child:after, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.active > a:only-child:after, .mds-search-input:hover .mds-search-btn-noempty.active > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.disabled, .mds-search-input:hover .mds-search-btn-noempty.disabled, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty[disabled], .mds-search-input:hover .mds-search-btn-noempty[disabled], .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.disabled:hover, .mds-search-input:hover .mds-search-btn-noempty.disabled:hover, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty[disabled]:hover, .mds-search-input:hover .mds-search-btn-noempty[disabled]:hover, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.disabled:focus, .mds-search-input:hover .mds-search-btn-noempty.disabled:focus, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty[disabled]:focus, .mds-search-input:hover .mds-search-btn-noempty[disabled]:focus, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.disabled:active, .mds-search-input:hover .mds-search-btn-noempty.disabled:active, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty[disabled]:active, .mds-search-input:hover .mds-search-btn-noempty[disabled]:active, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.disabled.active, .mds-search-input:hover .mds-search-btn-noempty.disabled.active, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty[disabled].active, .mds-search-input:hover .mds-search-btn-noempty[disabled].active { color: rgba(0, 0, 0, 0.2); background-color: #f7f7f7; border-color: #d9d9d9; } .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.disabled > a:only-child, .mds-search-input:hover .mds-search-btn-noempty.disabled > a:only-child, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty[disabled] > a:only-child, .mds-search-input:hover .mds-search-btn-noempty[disabled] > a:only-child, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.disabled:hover > a:only-child, .mds-search-input:hover .mds-search-btn-noempty.disabled:hover > a:only-child, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty[disabled]:hover > a:only-child, .mds-search-input:hover .mds-search-btn-noempty[disabled]:hover > a:only-child, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.disabled:focus > a:only-child, .mds-search-input:hover .mds-search-btn-noempty.disabled:focus > a:only-child, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty[disabled]:focus > a:only-child, .mds-search-input:hover .mds-search-btn-noempty[disabled]:focus > a:only-child, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.disabled:active > a:only-child, .mds-search-input:hover .mds-search-btn-noempty.disabled:active > a:only-child, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty[disabled]:active > a:only-child, .mds-search-input:hover .mds-search-btn-noempty[disabled]:active > a:only-child, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.disabled.active > a:only-child, .mds-search-input:hover .mds-search-btn-noempty.disabled.active > a:only-child, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty[disabled].active > a:only-child, .mds-search-input:hover .mds-search-btn-noempty[disabled].active > a:only-child { color: currentColor; } .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.disabled > a:only-child:after, .mds-search-input:hover .mds-search-btn-noempty.disabled > a:only-child:after, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty[disabled] > a:only-child:after, .mds-search-input:hover .mds-search-btn-noempty[disabled] > a:only-child:after, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.disabled:hover > a:only-child:after, .mds-search-input:hover .mds-search-btn-noempty.disabled:hover > a:only-child:after, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty[disabled]:hover > a:only-child:after, .mds-search-input:hover .mds-search-btn-noempty[disabled]:hover > a:only-child:after, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.disabled:focus > a:only-child:after, .mds-search-input:hover .mds-search-btn-noempty.disabled:focus > a:only-child:after, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty[disabled]:focus > a:only-child:after, .mds-search-input:hover .mds-search-btn-noempty[disabled]:focus > a:only-child:after, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.disabled:active > a:only-child:after, .mds-search-input:hover .mds-search-btn-noempty.disabled:active > a:only-child:after, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty[disabled]:active > a:only-child:after, .mds-search-input:hover .mds-search-btn-noempty[disabled]:active > a:only-child:after, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty.disabled.active > a:only-child:after, .mds-search-input:hover .mds-search-btn-noempty.disabled.active > a:only-child:after, .mds-search-input.mds-search-input-focus .mds-search-btn-noempty[disabled].active > a:only-child:after, .mds-search-input:hover .mds-search-btn-noempty[disabled].active > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .mds-search-input.mds-search-input-focus .mds-search-btn-noempty:focus, .mds-search-input:hover .mds-search-btn-noempty:focus { border-color: #0152dd !important; } .mds-search-input .mds-select-combobox .mds-select-selection__rendered { margin-right: 29px; } .mds-input { position: relative; display: inline-block; padding: 4px 12px; width: 100%; height: 36px; font-size: 14px; line-height: 1.5; color: #354052; background-color: #fff; background-image: none; border: 1px solid #D8DCE6; border-radius: 2px; transition: all .3s; } .mds-input::-moz-placeholder { color: #A9ABBA; opacity: 1; } .mds-input:-ms-input-placeholder { color: #A9ABBA; } .mds-input::-webkit-input-placeholder { color: #A9ABBA; } .mds-input:hover { border-color: #0364ff; } .mds-input:focus { border-color: #3f89ff; outline: 0; } .mds-input-disabled { background-color: #FAFAFD; opacity: 1; cursor: not-allowed; color: rgba(0, 0, 0, 0.2); } .mds-input-disabled:hover { border-color: #d9d9d9; } textarea.mds-input { max-width: 100%; height: auto; vertical-align: bottom; transition: all .3s, height 0s; } .mds-input-lg { padding: 6px 12px; height: 40px; } .mds-input-sm { padding: 1px 12px; height: 32px; font-size: 12px; } .mds-input-mni { height: 28px; font-size: 12px; } .mds-input-group { font-size: 0; position: relative; display: table; border-collapse: separate; border-spacing: 0; width: 100%; } .mds-input-group[class*="col-"] { float: none; padding-left: 0; padding-right: 0; } .mds-input-group > [class*="col-"] { padding-right: 8px; } .mds-input-group > [class*="col-"]:last-child { padding-right: 0; } .mds-input-group-addon, .mds-input-group-wrap, .mds-input-group > .mds-input { display: table-cell; } .mds-input-group-addon:not(:first-child):not(:last-child), .mds-input-group-wrap:not(:first-child):not(:last-child), .mds-input-group > .mds-input:not(:first-child):not(:last-child) { border-radius: 0; } .mds-input-group-addon, .mds-input-group-wrap { width: 1px; white-space: nowrap; vertical-align: middle; } .mds-input-group-wrap > * { display: block !important; } .mds-input-group .mds-input { float: left; width: 100%; margin-bottom: 0; } .mds-input-group .mds-input:focus { z-index: 1; } .mds-input-group-addon { padding: 0px 12px; font-size: 14px; font-weight: normal; line-height: 1; color: #A9ABBA; text-align: center; background-color: #FCFCFD; border: 1px solid #d9d9d9; border-radius: 4px; position: relative; transition: all .3s; } .mds-input-group-addon .mds-btn { border: none; margin: 0px -12px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .mds-input-group-addon .mds-select { margin: -5px -12px; } .mds-input-group-addon .mds-select .mds-select-selection { background-color: inherit; margin: -1px; border: 1px solid transparent; box-shadow: none; } .mds-input-group-addon .mds-select-open .mds-select-selection, .mds-input-group-addon .mds-select-focused .mds-select-selection { color: #0364ff; } .mds-input-group-addon > i:only-child:after { position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; } .mds-input-group-blue-addon { padding: 4px 12px; font-size: 14px; font-weight: normal; line-height: 1; color: #fff; text-align: center; background-color: #0364FF; border-radius: 4px; position: relative; transition: all .3s; border-bottom-left-radius: 0; border-top-left-radius: 0; display: table-cell; border-left: 0; width: 1px; white-space: nowrap; vertical-align: middle; } .mds-input-group-blue-addon .mds-select { margin: -5px -12px; } .mds-input-group-blue-addon .mds-select .mds-select-selection { background-color: inherit; margin: -1px; border: 1px solid transparent; box-shadow: none; } .mds-input-group-blue-addon .mds-select-open .mds-select-selection, .mds-input-group-blue-addon .mds-select-focused .mds-select-selection { color: #0364ff; } .mds-input-group-blue-addon > i:only-child:after { position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; } .mds-input-group > .mds-input:first-child, .mds-input-group-addon:first-child { border-bottom-right-radius: 0; border-top-right-radius: 0; } .mds-input-group > .mds-input:first-child .mds-select .mds-select-selection, .mds-input-group-addon:first-child .mds-select .mds-select-selection { border-bottom-right-radius: 0; border-top-right-radius: 0; } .mds-input-group > .mds-input-affix-wrapper:not(:first-child) .mds-input { border-bottom-left-radius: 0; border-top-left-radius: 0; } .mds-input-group > .mds-input-affix-wrapper:not(:last-child) .mds-input { border-bottom-right-radius: 0; border-top-right-radius: 0; } .mds-input-group-addon:first-child { border-right: 0; } .mds-input-group-addon:last-child { border-left: 0; } .mds-input-group > .mds-input:last-child, .mds-input-group-addon:last-child { border-bottom-left-radius: 0; border-top-left-radius: 0; } .mds-input-group > .mds-input:last-child .mds-select .mds-select-selection, .mds-input-group-addon:last-child .mds-select .mds-select-selection { border-bottom-left-radius: 0; border-top-left-radius: 0; } .mds-input-group-lg .mds-input, .mds-input-group-lg > .mds-input-group-addon { padding: 6px 12px; height: 40px; } .mds-input-group-sm .mds-input, .mds-input-group-sm > .mds-input-group-addon { padding: 1px 12px; height: 32px; font-size: 12px; } .mds-input-group-mni .mds-input, .mds-input-group-mni > .mds-input-group-addon { height: 28px; font-size: 12px; } .mds-input-group-lg .mds-select-selection--single { height: 40px; } .mds-input-group-sm .mds-select-selection--single { height: 32px; } .mds-input-group-mni .mds-select-selection--single { height: 28px; } .mds-input-group .mds-input-affix-wrapper { display: table-cell; width: 100%; float: left; } .mds-input-group.mds-input-group-compact, .mds-input-group.mds-input-group-conjoined { display: block; zoom: 1; } .mds-input-group.mds-input-group-compact:before, .mds-input-group.mds-input-group-conjoined:before, .mds-input-group.mds-input-group-compact:after, .mds-input-group.mds-input-group-conjoined:after { content: " "; display: table; } .mds-input-group.mds-input-group-compact:after, .mds-input-group.mds-input-group-conjoined:after { clear: both; visibility: hidden; font-size: 0; height: 0; } .mds-input-group.mds-input-group-compact > *, .mds-input-group.mds-input-group-conjoined > * { border-radius: 0; border-right-width: 0; vertical-align: top; float: none; display: inline-block; } .mds-input-group.mds-input-group-compact .mds-input, .mds-input-group.mds-input-group-conjoined .mds-input { float: none; z-index: auto; } .mds-input-group.mds-input-group-compact > .mds-select > .mds-select-selection, .mds-input-group.mds-input-group-conjoined > .mds-select > .mds-select-selection, .mds-input-group.mds-input-group-compact > .mds-calendar-picker .mds-input, .mds-input-group.mds-input-group-conjoined > .mds-calendar-picker .mds-input, .mds-input-group.mds-input-group-compact > .mds-select-auto-complete .mds-input, .mds-input-group.mds-input-group-conjoined > .mds-select-auto-complete .mds-input, .mds-input-group.mds-input-group-compact > .mds-cascader-picker .mds-input, .mds-input-group.mds-input-group-conjoined > .mds-cascader-picker .mds-input, .mds-input-group.mds-input-group-compact > .mds-mention-wrapper .mds-mention-editor, .mds-input-group.mds-input-group-conjoined > .mds-mention-wrapper .mds-mention-editor, .mds-input-group.mds-input-group-compact > .mds-time-picker .mds-time-picker-input, .mds-input-group.mds-input-group-conjoined > .mds-time-picker .mds-time-picker-input { border-radius: 0; border-right-width: 0; } .mds-input-group.mds-input-group-compact > *:first-child, .mds-input-group.mds-input-group-conjoined > *:first-child, .mds-input-group.mds-input-group-compact > .mds-select:first-child > .mds-select-selection, .mds-input-group.mds-input-group-conjoined > .mds-select:first-child > .mds-select-selection, .mds-input-group.mds-input-group-compact > .mds-calendar-picker:first-child .mds-input, .mds-input-group.mds-input-group-conjoined > .mds-calendar-picker:first-child .mds-input, .mds-input-group.mds-input-group-compact > .mds-select-auto-complete:first-child .mds-input, .mds-input-group.mds-input-group-conjoined > .mds-select-auto-complete:first-child .mds-input, .mds-input-group.mds-input-group-compact > .mds-cascader-picker:first-child .mds-input, .mds-input-group.mds-input-group-conjoined > .mds-cascader-picker:first-child .mds-input, .mds-input-group.mds-input-group-compact > .mds-mention-wrapper:first-child .mds-mention-editor, .mds-input-group.mds-input-group-conjoined > .mds-mention-wrapper:first-child .mds-mention-editor, .mds-input-group.mds-input-group-compact > .mds-time-picker:first-child .mds-time-picker-input, .mds-input-group.mds-input-group-conjoined > .mds-time-picker:first-child .mds-time-picker-input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .mds-input-group.mds-input-group-compact > *:last-child, .mds-input-group.mds-input-group-conjoined > *:last-child, .mds-input-group.mds-input-group-compact > .mds-select:last-child > .mds-select-selection, .mds-input-group.mds-input-group-conjoined > .mds-select:last-child > .mds-select-selection, .mds-input-group.mds-input-group-compact > .mds-calendar-picker:last-child .mds-input, .mds-input-group.mds-input-group-conjoined > .mds-calendar-picker:last-child .mds-input, .mds-input-group.mds-input-group-compact > .mds-select-auto-complete:last-child .mds-input, .mds-input-group.mds-input-group-conjoined > .mds-select-auto-complete:last-child .mds-input, .mds-input-group.mds-input-group-compact > .mds-cascader-picker:last-child .mds-input, .mds-input-group.mds-input-group-conjoined > .mds-cascader-picker:last-child .mds-input, .mds-input-group.mds-input-group-compact > .mds-mention-wrapper:last-child .mds-mention-editor, .mds-input-group.mds-input-group-conjoined > .mds-mention-wrapper:last-child .mds-mention-editor, .mds-input-group.mds-input-group-compact > .mds-time-picker:last-child .mds-time-picker-input, .mds-input-group.mds-input-group-conjoined > .mds-time-picker:last-child .mds-time-picker-input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right-width: 1px; } .mds-input-group.mds-input-group-conjoined { position: relative; } .mds-input-group.mds-input-group-conjoined input { text-align: center; } .mds-input-group.mds-input-group-conjoined .rowLine { width: 12px; height: 1px; position: absolute; left: 75px; top: 50%; background: #D8DCE6; z-index: 3; } .mds-input-group.mds-input-group-conjoined > *:last-child { border-left: none; } .mds-input-group.mds-input-group-conjoined > *:last-child::before { content: ''; position: relative; top: 0; left: 0; width: 9px; height: 1px; background: #A9ABBA; } .mds-input-group-wrapper { display: inline-block; vertical-align: top; width: 100%; } .mds-input-affix-wrapper { position: relative; display: inline-block; width: 100%; } .mds-input-affix-wrapper .mds-input { z-index: 1; } .mds-input-affix-wrapper:hover .mds-input:not(.mds-input-disabled) { border-color: #0364ff; } .mds-input-affix-wrapper .mds-input-clearable { cursor: pointer; min-width: 25px; color: #A9ABBA; } .mds-input-affix-wrapper .mds-input-prefix, .mds-input-affix-wrapper .mds-input-suffix { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; line-height: 0; color: #666666; } .mds-input-affix-wrapper .mds-input-showLimit { color: #909399; font-size: 12px; vertical-align: middle; line-height: 14px; vertical-align: bottom; } .mds-input-affix-wrapper .mds-input-prefix { left: 12px; } .mds-input-affix-wrapper .mds-input-suffix { right: 8px; } .mds-input-affix-wrapper .mds-input:not(:first-child) { padding-left: 29px; } .mds-input-affix-wrapper .mds-input:not(:last-child) { padding-right: 29px; } .mds-input-affix-wrapper .mds-input { min-height: 100%; } .mds-input-content { position: relative; } .mds-input-textarea { resize: vertical; } .disable .mds-input:hover { border-color: #d8dce6 !important; } .disable .mds-input-show-limit { color: #d8dce6 !important; background-color: #fafafd; } .mds-input-show-limit { color: #999; font-size: 12px; line-height: 1; display: block; text-align: right; margin-top: 4px; } .mds-input-show-limit--inside { position: absolute; right: 8px; bottom: 8px; background: rgba(255, 255, 255, 0.7); padding: 0 4px; pointer-events: none; } .mds-input-textarea-wrapper { position: relative; width: 100%; } /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ /* stylelint-disable declaration-bang-space-before */ /* stylelint-disable declaration-bang-space-before */ .mds-input-affix-wrapper.mds-input-search .mds-input:not(:last-child) { padding-right: 45px; } .mds-pagination { font-size: 0; } .mds-pagination * { font-size: 14px; } .mds-pagination:after { content: " "; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .mds-pagination-total-text { display: inline-block; vertical-align: middle; height: 32px; line-height: 32px; margin-right: 8px; } .mds-pagination-item { cursor: pointer; border-radius: 2px; user-select: none; min-width: 32px; height: 32px; line-height: 32px; text-align: center; list-style: none; display: inline-block; vertical-align: middle; border: 1px solid #d8dce6; background-color: #fff; margin-right: 8px; font-family: Arial; outline: 0; } .mds-pagination-item a { text-decoration: none; color: #354052; transition: none; margin: 0 6px; } .mds-pagination-item:focus, .mds-pagination-item:hover { transition: all .3s; border-color: #1770FF ; } .mds-pagination-item:focus a, .mds-pagination-item:hover a { color: #1770FF; } .mds-pagination-item:active { transition: all .3s; border-color: #125ACC ; } .mds-pagination-item:active a { color: #125ACC; } .mds-pagination-item-active { background-color: #0364FF; border-color: #0364FF; } .mds-pagination-item-active:focus, .mds-pagination-item-active:hover { background-color: #0364FF; border-color: #0364FF; } .mds-pagination-item-active a, .mds-pagination-item-active:focus a, .mds-pagination-item-active:hover a { color: #fff; } .mds-pagination-jump-prev, .mds-pagination-jump-next { outline: 0; } .mds-pagination-jump-prev:after, .mds-pagination-jump-next:after { content: "\2022\2022\2022"; display: block; letter-spacing: 2px; color: rgba(0, 0, 0, 0.2); text-align: center; } .mds-pagination-jump-prev:focus:after, .mds-pagination-jump-next:focus:after, .mds-pagination-jump-prev:hover:after, .mds-pagination-jump-next:hover:after { color: #0364ff; letter-spacing: -1px; font-family: "mdsicon"; } .mds-pagination-prev, .mds-pagination-jump-prev, .mds-pagination-jump-next { margin-right: 8px; } .mds-pagination-prev, .mds-pagination-next, .mds-pagination-jump-prev, .mds-pagination-jump-next { font-family: Arial; cursor: pointer; color: #666666; border-radius: 2px; list-style: none; min-width: 32px; height: 32px; line-height: 32px; text-align: center; transition: all .3s; display: inline-block; vertical-align: middle; } .mds-pagination-prev, .mds-pagination-next { outline: 0; } .mds-pagination-prev a, .mds-pagination-next a { color: #354052; user-select: none; } .mds-pagination-prev:hover a, .mds-pagination-next:hover a { color: #0364ff; } .mds-pagination-prev .mds-pagination-item-link, .mds-pagination-next .mds-pagination-item-link { border: 1px solid #d8dce6; background-color: #fff; border-radius: 2px; outline: none; display: block; transition: all .3s; } .mds-pagination-prev .mds-pagination-item-link:before, .mds-pagination-next .mds-pagination-item-link:before { font-size: 14px; display: block; height: 30px; line-height: 30px; font-family: "mdsicon"; text-align: center; font-weight: 500; } .mds-pagination-prev:focus .mds-pagination-item-link, .mds-pagination-next:focus .mds-pagination-item-link, .mds-pagination-prev:hover .mds-pagination-item-link, .mds-pagination-next:hover .mds-pagination-item-link { border-color: #0364ff; color: #0364ff; } .mds-pagination-disabled, .mds-pagination-disabled:hover, .mds-pagination-disabled:focus { cursor: not-allowed; } .mds-pagination-disabled a, .mds-pagination-disabled:hover a, .mds-pagination-disabled:focus a, .mds-pagination-disabled .mds-pagination-item-link, .mds-pagination-disabled:hover .mds-pagination-item-link, .mds-pagination-disabled:focus .mds-pagination-item-link { border-color: #d8dce6; color: #cccccc; cursor: not-allowed; } .mds-pagination-disabled li { cursor: not-allowed !important; background-color: #FAFAFD; } .mds-pagination-disabled .mds-pagination-jump-next { background-color: #fff; } .mds-pagination-disabled .mds-pagination-jump-prev { background-color: #fff; } .mds-pagination-disabled .mds-pagination-item:hover, .mds-pagination-disabled .mds-pagination-item:focus { border-color: #d8dce6; } .mds-pagination-disabled .mds-pagination-item-active { background: #ccc; border: 0px none; } .mds-pagination-disabled .mds-pagination-item-active a { color: #fff; } .mds-pagination-slash { margin: 0 10px 0 5px; } .mds-pagination-options { display: inline-block; vertical-align: middle; margin-left: 16px; } .mds-pagination-options-size-changer { display: inline-block; margin-right: 8px; } .mds-pagination-options-quick-jumper { display: inline-block; height: 32px; line-height: 32px; color: #354052; } .mds-pagination-options-quick-jumper input { height: 32px !important; line-height: 32px; position: relative; display: inline-block; padding: 4px 12px; width: 100%; height: 36px; font-size: 14px; line-height: 1.5; color: #354052; background-color: #fff; background-image: none; border: 1px solid #D8DCE6; border-radius: 2px; transition: all .3s; margin: 0 8px; width: 50px; } .mds-pagination-options-quick-jumper input::-moz-placeholder { color: #A9ABBA; opacity: 1; } .mds-pagination-options-quick-jumper input:-ms-input-placeholder { color: #A9ABBA; } .mds-pagination-options-quick-jumper input::-webkit-input-placeholder { color: #A9ABBA; } .mds-pagination-options-quick-jumper input:hover { border-color: #0364ff; } .mds-pagination-options-quick-jumper input:focus { border-color: #3f89ff; outline: 0; } .mds-pagination-options-quick-jumper input-disabled { background-color: #FAFAFD; opacity: 1; cursor: not-allowed; color: rgba(0, 0, 0, 0.2); } .mds-pagination-options-quick-jumper input-disabled:hover { border-color: #d9d9d9; } textarea.mds-pagination-options-quick-jumper input { max-width: 100%; height: auto; vertical-align: bottom; transition: all .3s, height 0s; } .mds-pagination-options-quick-jumper input-lg { padding: 6px 12px; height: 40px; } .mds-pagination-options-quick-jumper input-sm { padding: 1px 12px; height: 32px; font-size: 12px; } .mds-pagination-options-quick-jumper input-mni { height: 28px; font-size: 12px; } .mds-pagination-more { margin-left: 16px; vertical-align: middle; display: inline-block; background: #fff!important; line-height: 34px; height: 32px; font-size: 14px; color: #7F8FA4; } .mds-pagination-more b { color: #354052; } .mds-pagination-total { margin-right: 16px; vertical-align: middle; display: inline-block; background: #fff!important; line-height: 34px; height: 32px; font-size: 14px; color: #7F8FA4; } .mds-pagination-total b { color: #354052; } .mds-pagination-simple .mds-pagination-prev, .mds-pagination-simple .mds-pagination-next { height: 24px; line-height: 24px; vertical-align: top; } .mds-pagination-simple .mds-pagination-prev .mds-pagination-item-link, .mds-pagination-simple .mds-pagination-next .mds-pagination-item-link { border: 0; height: 24px; } .mds-pagination-simple .mds-pagination-prev .mds-pagination-item-link:after, .mds-pagination-simple .mds-pagination-next .mds-pagination-item-link:after { line-height: 24px; font-size: 16px; } .mds-pagination-simple .mds-pagination-simple-pager { display: inline-block; margin-right: 8px; } .mds-pagination-simple .mds-pagination-simple-pager input { margin-right: 8px; box-sizing: border-box; background-color: #fff; border-radius: 2px; border: 1px solid #d8dce6; outline: none; padding: 0 6px; width: 48px; height: 24px; text-align: center; transition: border-color 0.3s; } .mds-pagination-simple .mds-pagination-simple-pager input:hover { border-color: #0364ff; } .mds-pagination-simple .mds-pagination-simple-pager span { margin-left: 16px; } .mds-pagination-simple .mds-pagination-simple-pager .total { font-size: 14px; font-family: HelveticaNeue; color: #354052; } .mds-pagination-pagesize-changer { display: inline-block; vertical-align: middle; } .mds-pagination-pagesize-changer, .mds-pagination-pagesize-changer .mds-select, .mds-pagination-pagesize-changer .mds-input { height: 32px; } .mds-pagination.mini .mds-pagination-total-text, .mds-pagination.mini .mds-pagination-simple-pager { height: 24px; line-height: 24px; } .mds-pagination.mini .mds-pagination-item { border: 0; margin: 0; min-width: 20px; height: 20px; line-height: 20px; } .mds-pagination.mini .mds-pagination-item a { font-size: 12px; } .mds-pagination.mini .mds-pagination-prev, .mds-pagination.mini .mds-pagination-next { margin: 0; min-width: 20px; height: 24px; line-height: 24px; } .mds-pagination.mini .mds-pagination-prev i:before, .mds-pagination.mini .mds-pagination-next i:before { height: 24px; line-height: 24px; } .mds-pagination.mini .mds-pagination-prev .mds-pagination-item-link, .mds-pagination.mini .mds-pagination-next .mds-pagination-item-link { border: 0; } .mds-pagination.mini .mds-pagination-prev .mds-pagination-item-link:after, .mds-pagination.mini .mds-pagination-next .mds-pagination-item-link:after { height: 24px; line-height: 24px; } .mds-pagination.mini .mds-pagination-jump-prev, .mds-pagination.mini .mds-pagination-jump-next { height: 24px; line-height: 24px; } .mds-pagination.mini .mds-pagination-more { height: 24px; line-height: 26px; font-size: 12px; } .mds-pagination.mini .mds-pagination-more b { font-size: 12px; } .mds-pagination.mini .mds-pagination-options { margin-left: 8px; } .mds-pagination.mini .mds-pagination-options-quick-jumper { height: 20px; line-height: 20px; } .mds-pagination.mini .mds-pagination-options-quick-jumper input { padding: 1px 12px; height: 32px; font-size: 12px; width: 44px; } .total-seat-right { margin-left: 20px; margin-right: 0; } @media only screen and (max-width: 1024px) { .mds-pagination-item-after-jump-prev, .mds-pagination-item-before-jump-next { display: none; } } /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ /* stylelint-disable declaration-bang-space-before */ /* stylelint-disable declaration-bang-space-before */