vui-design/src/style/components/input-group.less

A high quality UI Toolkit based on Vue.js

@vui-input-group: ~"@{vui}-input-group";
@vui-input-group-compact: ~"@{vui}-input-group-compact";


.vui-input-group {  }
.vui-input-group:before,
.vui-input-group:after { content:""; display:block; width:100%; height:0; overflow:hidden; visibility:hidden; clear:both; }


.vui-input-group .vui-button { float:left; }
.vui-input-group .vui-button:not(:last-child) { margin-right:10px; }

.vui-input-group .vui-input { float:left; width:auto; }
.vui-input-group .vui-input:not(:last-child) { margin-right:10px; }

.vui-input-group .vui-input-number { float:left; width:auto; }
.vui-input-group .vui-input-number:not(:last-child) { margin-right:10px; }

.vui-input-group .vui-select { float:left; width:auto; }
.vui-input-group .vui-select:not(:last-child) { margin-right:10px; }

.vui-input-group .vui-cascader { float:left; width:auto; }
.vui-input-group .vui-cascader:not(:last-child) { margin-right:12px; }


.vui-input-group-compact .vui-button:not(:last-child) { margin-right:-1px; }
.vui-input-group-compact .vui-button:first-child { border-top-right-radius:0; border-bottom-right-radius:0; }
.vui-input-group-compact .vui-button:last-child { border-top-left-radius:0; border-bottom-left-radius:0; }
.vui-input-group-compact .vui-button:not(:first-child):not(:last-child) { border-radius:0; }

.vui-input-group-compact .vui-input:not(:last-child) { margin-right:-1px; }
.vui-input-group-compact .vui-input:first-child .vui-input-input input { border-top-right-radius:0; border-bottom-right-radius:0; }
.vui-input-group-compact .vui-input:last-child .vui-input-input input { border-top-left-radius:0; border-bottom-left-radius:0; }
.vui-input-group-compact .vui-input:not(:first-child):not(:last-child) .vui-input-input input { border-radius:0; }

.vui-input-group-compact .vui-input-number:not(:last-child) { margin-right:-1px; }
.vui-input-group-compact .vui-input-number:first-child { border-top-right-radius:0; border-bottom-right-radius:0; }
.vui-input-group-compact .vui-input-number:last-child { border-top-left-radius:0; border-bottom-left-radius:0; }
.vui-input-group-compact .vui-input-number:not(:first-child):not(:last-child) { border-radius:0; }

.vui-input-group-compact .vui-select:not(:last-child) { margin-right:-1px; }
.vui-input-group-compact .vui-select:first-child .vui-select-selection { border-top-right-radius:0; border-bottom-right-radius:0; }
.vui-input-group-compact .vui-select:last-child .vui-select-selection { border-top-left-radius:0; border-bottom-left-radius:0; }
.vui-input-group-compact .vui-select:not(:first-child):not(:last-child) .vui-select-selection { border-radius:0; }

.vui-input-group-compact .vui-cascader:not(:last-child) { margin-right:-1px; }
.vui-input-group-compact .vui-cascader:first-child .vui-cascader-selection { border-top-right-radius:0; border-bottom-right-radius:0; }
.vui-input-group-compact .vui-cascader:last-child .vui-cascader-selection { border-top-left-radius:0; border-bottom-left-radius:0; }
.vui-input-group-compact .vui-cascader:not(:first-child):not(:last-child) .vui-cascader-selection { border-radius:0; }