UNPKG

bee-complex-grid

Version:
1,566 lines (1,438 loc) 82.7 kB
@charset "UTF-8"; /* FormGroup */ /* Navlayout */ /* FormGroup */ /* Navlayout */ .u-form-control { position: relative; display: inline-block; padding: 0 12px; width: 100%; height: 30px; cursor: text; font-size: 14px; line-height: 1.5; color: #424242; background-color: #fff; background-image: none; border: 1px solid #bdbdbd; border-radius: 3px; transition: all .3s; } .u-form-control:focus { border-color: #66afe9; outline: 0; } .u-form-control::-ms-clear, .u-form-control ::-ms-reveal { display: none; } .u-form-control[disabled] { background: #eee; border-color: #e0e0e0; color: #BDBDBD; cursor: not-allowed; } .u-form-control.lg { height: 38px; font-size: 14px; } .u-form-control.sm { font-size: 12px; height: 24px; } .u-form-control-search-wrapper { position: absolute; top: 0; left: 0; height: 28px; padding: 4px; width: 100%; } .u-form-control-search-wrapper .u-form-control-search-action { color: #ccc; position: absolute; top: 2px; right: 2px; width: 32px; height: 32px; line-height: 32px; text-align: center; font-size: 14px; text-decoration: none; } .u-form-control-search-wrapper .u-form-control-search-action .uf { transition: all .3s; font-size: 12px; color: #ccc; } .u-form-control-search-wrapper .u-form-control-search-action .uf.uf-search:before { content: "\e603"; } .u-form-control-affix-wrapper { position: relative; display: inline-block; width: 100%; } .u-form-control-affix-wrapper .u-form-control-prefix, .u-form-control-affix-wrapper .u-form-control-suffix { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; line-height: 0; right: 7px; color: rgba(0, 0, 0, 0.65); } /* FormGroup */ /* Navlayout */ .u-checkbox { display: inline-block; position: relative; margin: 0 5px; height: 18px; line-height: 18px; font-size: 14px; } .u-checkbox.disabled .u-checkbox-label { cursor: not-allowed; opacity: 0.5; } .u-checkbox input[type='checkbox'] { display: none; cursor: pointer; } .u-checkbox input[disabled] { cursor: not-allowed; } .u-checkbox.is-checked .u-checkbox-label:before { -moz-box-shadow: inset 0 0 0 10px rgb(30,136,229); -webkit-box-shadow: inset 0 0 0 10px rgb(30,136,229); box-shadow: inset 0 0 0 10px rgb(30,136,229); border-color: rgb(30,136,229); } .u-checkbox.is-checked .u-checkbox-label:after { color: #fff; content: "\e658"; line-height: 18px; font-size: 14px; } .u-checkbox .u-checkbox-label { cursor: pointer; display: inline-block; padding-left: 25px; } .u-checkbox .u-checkbox-label:before { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid; background-color: #fff; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; content: ''; font-family: 'uf'; display: inline-block; width: 18px; height: 18px; left: 0; top: 0; text-align: center; position: absolute; } .u-checkbox .u-checkbox-label:after { content: ''; font-family: 'uf'; display: inline-block; width: 18px; height: 18px; left: 0; top: 0; text-align: center; position: absolute; } .u-checkbox.u-checkbox-indeterminate .u-checkbox-label:after { color: #fff; content: "\e6ce"; line-height: 18px; font-size: 14px; } .u-checkbox.u-checkbox-indeterminate .u-checkbox-label:before { box-shadow: inset 0 0 0 10px #1e88e5; border-color: #1e88e5; } .u-checkbox.u-checkbox-success.is-checked .u-checkbox-label:before { -moz-box-shadow: inset 0 0 0 10px rgb(76,175,80); -webkit-box-shadow: inset 0 0 0 10px rgb(76,175,80); box-shadow: inset 0 0 0 10px rgb(76,175,80); border-color: rgb(76,175,80); } .u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before { -moz-box-shadow: inset 0 0 0 10px rgb(255,152,0); -webkit-box-shadow: inset 0 0 0 10px rgb(255,152,0); box-shadow: inset 0 0 0 10px rgb(255,152,0); border-color: rgb(255,152,0); } .u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before { -moz-box-shadow: inset 0 0 0 10px rgb(244,67,54); -webkit-box-shadow: inset 0 0 0 10px rgb(244,67,54); box-shadow: inset 0 0 0 10px rgb(244,67,54); border-color: rgb(244,67,54); } .u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before { -moz-box-shadow: inset 0 0 0 10px rgb(97,97,97); -webkit-box-shadow: inset 0 0 0 10px rgb(97,97,97); box-shadow: inset 0 0 0 10px rgb(97,97,97); border-color: rgb(97,97,97); } .u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before { -moz-box-shadow: inset 0 0 0 10px rgb(0,188,212); -webkit-box-shadow: inset 0 0 0 10px rgb(0,188,212); box-shadow: inset 0 0 0 10px rgb(0,188,212); border-color: rgb(0,188,212); } /* FormGroup */ /* Navlayout */ /* keyframes 定义 */ @-webkit-keyframes uSlideUpIn { 0% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } 100% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes uSlideUpIn { 0% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } 100% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(1); transform: scaleY(1); } } @-webkit-keyframes uSlideUpOut { 0% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } } @keyframes uSlideUpOut { 0% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } } @-webkit-keyframes uSlideDownIn { 0% { opacity: 0; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes uSlideDownIn { 0% { opacity: 0; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(1); transform: scaleY(1); } } @-webkit-keyframes uSlideDownOut { 0% { opacity: 1; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } } @keyframes uSlideDownOut { 0% { opacity: 1; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } } @-webkit-keyframes uSlideLeftIn { 0% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } 100% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes uSlideLeftIn { 0% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } 100% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } } @-webkit-keyframes uSlideLeftOut { 0% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } } @keyframes uSlideLeftOut { 0% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } } @-webkit-keyframes uSlideRightIn { 0% { opacity: 0; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } 100% { opacity: 1; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes uSlideRightIn { 0% { opacity: 0; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } 100% { opacity: 1; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } } @-webkit-keyframes uSlideRightOut { 0% { opacity: 1; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } } @keyframes uSlideRightOut { 0% { opacity: 1; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } } @-webkit-keyframes uSwingIn { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 20% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 40% { -webkit-transform: translateX(10px); transform: translateX(10px); } 60% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 80% { -webkit-transform: translateX(5px); transform: translateX(5px); } } @keyframes uSwingIn { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 20% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 40% { -webkit-transform: translateX(10px); transform: translateX(10px); } 60% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 80% { -webkit-transform: translateX(5px); transform: translateX(5px); } } @-webkit-keyframes uZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.2); transform: scale(0.2); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes uZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.2); transform: scale(0.2); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes uZoomOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.2); transform: scale(0.2); } } @keyframes uZoomOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.2); transform: scale(0.2); } } @-webkit-keyframes uZoomBigIn { 0% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes uZoomBigIn { 0% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes uZoomBigOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes uZoomBigOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } } @-webkit-keyframes uZoomUpIn { 0% { opacity: 0; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(1); transform: scale(1); } } @keyframes uZoomUpIn { 0% { opacity: 0; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes uZoomUpOut { 0% { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes uZoomUpOut { 0% { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(0.8); transform: scale(0.8); } } @-webkit-keyframes uZoomLeftIn { 0% { opacity: 0; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale(1); transform: scale(1); } } @keyframes uZoomLeftIn { 0% { opacity: 0; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes uZoomLeftOut { 0% { -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes uZoomLeftOut { 0% { -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale(0.8); transform: scale(0.8); } } @-webkit-keyframes uZoomRightIn { 0% { opacity: 0; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(1); transform: scale(1); } } @keyframes uZoomRightIn { 0% { opacity: 0; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes uZoomRightOut { 0% { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes uZoomRightOut { 0% { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(0.8); transform: scale(0.8); } } @-webkit-keyframes uZoomDownIn { 0% { opacity: 0; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scale(1); transform: scale(1); } } @keyframes uZoomDownIn { 0% { opacity: 0; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes uZoomDownOut { 0% { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes uZoomDownOut { 0% { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes rcMenuOpenZoomIn { 0% { opacity: 0; transform: scale(0, 0); } 100% { opacity: 1; transform: scale(1, 1); } } @keyframes rcMenuOpenZoomOut { 0% { transform: scale(1, 1); } 100% { opacity: 0; transform: scale(0, 0); } } @keyframes rcMenuOpenSlideUpIn { 0% { opacity: 0; transform-origin: 0% 0%; transform: scaleY(0); } 100% { opacity: 1; transform-origin: 0% 0%; transform: scaleY(1); } } @keyframes rcMenuOpenSlideUpOut { 0% { opacity: 1; transform-origin: 0% 0%; transform: scaleY(1); } 100% { opacity: 0; transform-origin: 0% 0%; transform: scaleY(0); } } ul { margin: 0; padding: 0; list-style: none; } .u-select { box-sizing: border-box; display: inline-block; position: relative; color: #666; width: 100%; font-size: 12px; } .u-select :root .u-select-arrow { -webkit-filter: none; filter: none; } .u-select :root .u-select-arrow { font-size: 12px; } .u-select .u-select-arrow * { display: none; } .u-select .u-select-arrow { font-style: normal; vertical-align: baseline; text-align: center; text-transform: none; text-rendering: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 50%; right: 8px; line-height: 1; margin-top: -6px; display: inline-block; font-size: 12px; font-size: 9px \9; -webkit-transform: scale(0.75) rotate(0deg); -ms-transform: scale(0.75) rotate(0deg); transform: scale(0.75) rotate(0deg); /* IE6-IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)"; zoom: 1; } .u-select .u-select-arrow:before { display: block; font-family: "uf"; content: "\e609"; -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } .u-select .u-select-selection { outline: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-sizing: border-box; display: block; background-color: #fff; border-radius: 4px; border: 1px solid #d9d9d9; -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .u-select .u-select-selection :hover { border-color: #40a5ed; } .u-select > ul > li > a { padding: 0; background-color: #fff; } .u-select-focused .u-select-selection, .u-select-selection:focus, .u-select-selection:active { border-color: #40a5ed; outline: 0; box-shadow: none; } .u-select-selection-clear { display: inline-block; font-style: normal; vertical-align: baseline; text-align: center; text-transform: none; text-rendering: auto; opacity: 0; position: absolute; right: 8px; z-index: 1; background: #fff; top: 50%; font-size: 12px; color: #ccc; width: 12px; height: 12px; margin-top: -6px; line-height: 12px; cursor: pointer; -webkit-transition: color 0.3s ease, opacity 0.15s ease; transition: color 0.3s ease, opacity 0.15s ease; } .u-select-selection-clear:before { display: block; font-family: 'uf'; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\E62E"; } .u-select-selection-clear:hover { color: #999; } .u-select-selection:hover .u-select-selection-clear { opacity: 1; } .u-select-selection-selected-value { float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; padding-right: 14px; } .u-select-disabled { color: #ccc; } .u-select-disabled .u-select-selection { background: #f7f7f7; cursor: not-allowed; } .u-select-disabled .u-select-selection:hover, .u-select-disabled .u-select-selection:focus, .u-select-disabled .u-select-selection:active { border-color: #d9d9d9; box-shadow: none; } .u-select-disabled .u-select-selection-clear { display: none; visibility: hidden; pointer-events: none; } .u-select-disabled .u-select-selection--multiple .u-select-selection-choice { background: #e9e9e9; color: #aaa; padding-right: 10px; } .u-select-disabled .u-select-selection--multiple .u-select-selection-choice-remove { display: none; } .u-select-disabled .u-select-selection-choice-remove { color: #ccc; cursor: default; } .u-select-disabled .u-select-selection-choice-remove:hover { color: #ccc; } .u-select-selection--single { height: 30px; position: relative; cursor: pointer; } .u-select-selection-rendered { display: block; margin-left: 8px; margin-right: 8px; position: relative; line-height: 28px; } .u-select-selection-rendered:after { content: '.'; visibility: hidden; pointer-events: none; display: inline-block; width: 0; } .u-select-lg .u-select-selection--single { height: 38px; } .u-select-lg .u-select-selection-rendered { line-height: 36px; } .u-select-lg .u-select-selection--multiple { min-height: 32px; } .u-select-lg .u-select-selection--multiple .u-select-selection-rendered li { height: 24px; line-height: 24px; } .u-select-sm .u-select-selection { border-radius: 2px; } .u-select-sm .u-select-selection--single { height: 24px; } .u-select-sm .u-select-selection-rendered { line-height: 22px; } .u-select-sm .u-select-selection--multiple { min-height: 22px; } .u-select-sm .u-select-selection--multiple .u-select-selection-rendered li { height: 14px; line-height: 14px; } .u-select-search-field-wrap { display: inline-block; position: relative; } .u-select-selection-placeholder, .u-select-search-field-placeholder { position: absolute; top: 50%; left: 0; right: 9px; color: #ccc; line-height: 20px; height: 20px; max-width: 100%; margin-top: -10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u-select-search-field-placeholder { left: 8px; } .u-select-search--inline { position: absolute; width: 100%; height: 100%; } .u-select-search--inline .u-select-search-field-wrap { width: 100%; height: 100%; } .u-select-search--inline .u-select-search-field { border: 0; font-size: 100%; height: 100%; width: 100%; background: transparent; outline: 0; border-radius: 4px; } .u-select-search--inline .u-select-search-field-mirror { position: absolute; top: 0; left: -9999px; white-space: pre; pointer-events: none; } .u-select-search--inline > i { float: right; } .u-select-selection--multiple { min-height: 28px; cursor: text; padding-bottom: 3px; zoom: 1; } .u-select-selection--multiple:before, .u-select-selection--multiple:after { content: " "; display: table; } .u-select-selection--multiple:after { clear: both; visibility: hidden; font-size: 0; height: 0; } .u-select-selection--multiple .u-select-search--inline { float: left; position: static; width: auto; padding: 0; } .u-select-selection--multiple .u-select-search--inline .u-select-search-field { width: 0.75em; } .u-select-selection--multiple .u-select-selection-rendered { margin-left: 5px; margin-bottom: -3px; height: auto; } .u-select-selection--multiple > ul > li, .u-select-selection--multiple .u-select-selection-rendered > ul > li { margin-top: 3px; height: 20px; line-height: 20px; } .u-select-selection--multiple .u-select-selection-choice { background-color: #f3f3f3; border-radius: 4px; cursor: default; float: left; padding: 0 16px; margin-right: 4px; max-width: 99%; position: relative; overflow: hidden; -webkit-transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); padding: 0 20px 0 10px; } .u-select-selection--multiple .u-select-selection-choice-disabled { padding: 0 10px; } .u-select-selection--multiple .u-select-selection-choice-content { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; -webkit-transition: margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .u-select-selection--multiple .u-select-selection-choice-remove { font-style: normal; vertical-align: baseline; text-align: center; text-transform: none; text-rendering: auto; line-height: 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #999; line-height: inherit; cursor: pointer; font-weight: bold; -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); display: inline-block; font-size: 12px; font-size: 8px \9; -webkit-transform: scale(0.66667) rotate(0deg); -ms-transform: scale(0.66667) rotate(0deg); transform: scale(0.66667) rotate(0deg); /* IE6-IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)"; zoom: 1; position: absolute; right: 4px; padding: 0 0 0 8px; } .u-select-selection--multiple .u-select-selection-choice-remove:before { display: block; font-family: "uf"; } .u-select-selection--multiple .u-select-selection-choice-remove { -webkit-filter: none; filter: none; } .u-select-selection--multiple .u-select-selection-choice-remove { font-size: 12px; } .u-select-selection--multiple .u-select-selection-choice-remove:hover { color: #404040; } .u-select-selection--multiple .u-select-selection-choice-remove:before { font-family: 'uf'; content: "\e602"; } .u-select-open .u-select-arrow { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; -ms-transform: rotate(180deg); } .u-select-open .u-select-arrow:before { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .u-select-open .u-select-selection { border-color: #40a5ed; outline: 0; border-color: #66afe9; outline: 0; } .u-select-combobox .u-select-arrow { display: none; } .u-select-combobox .u-select-search--inline { height: 100%; width: 100%; float: none; } .u-select-combobox .u-select-search-field-wrap { width: 100%; height: 100%; } .u-select-combobox .u-select-search-field { width: 100%; height: 100%; position: relative; z-index: 1; -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); box-shadow: none; } .u-select-dropdown { background-color: white; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); border-radius: 4px; box-sizing: border-box; z-index: 1800; left: -9999px; top: -9999px; position: absolute; outline: none; overflow: hidden; font-size: 12px; -webkit-animation: moveFromTop 300ms ease-in; animation: uSlideUpIn 300ms ease; } .u-select-dropdown.slide-up-enter.slide-up-enter-active.u-select-dropdown-placement-bottomLeft, .u-select-dropdown.slide-up-appear.slide-up-appear-active.u-select-dropdown-placement-bottomLeft { -webkit-animation-name: uSlideUpIn; animation-name: uSlideUpIn; } .u-select-dropdown.slide-up-enter.slide-up-enter-active.u-select-dropdown-placement-topLeft, .u-select-dropdown.slide-up-appear.slide-up-appear-active.u-select-dropdown-placement-topLeft { -webkit-animation-name: uSlideDownIn; animation-name: uSlideDownIn; } .u-select-dropdown.slide-up-leave.slide-up-leave-active.u-select-dropdown-placement-bottomLeft { -webkit-animation-name: uSlideUpOut; animation-name: uSlideUpOut; } .u-select-dropdown.slide-up-leave.slide-up-leave-active.u-select-dropdown-placement-topLeft { -webkit-animation-name: uSlideDownOut; animation-name: uSlideDownOut; } .u-select-dropdown.u-select-dropdown-hidden { display: none; } .u-select-dropdown .u-select-dropdown-menu { outline: none; margin-bottom: 0; padding-left: 0; list-style: none; max-height: 250px; overflow: auto; } .u-select-dropdown .u-select-dropdown-menu-item-group-list { margin: 0; padding: 0; } .u-select-dropdown .u-select-dropdown-menu-item-group-list > .u-select-dropdown-menu-item { padding-left: 24px; } .u-select-dropdown .u-select-dropdown-menu-item-group-title { color: #999; line-height: 1.5; padding: 8px 16px; } .u-select-dropdown .u-select-dropdown-menu-item { position: relative; display: block; padding: 7px 16px; font-weight: normal; color: #666; cursor: pointer; white-space: nowrap; overflow: hidden; -webkit-transition: background 0.3s ease; transition: background 0.3s ease; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u-select-dropdown .u-select-dropdown-menu-item:hover, .u-select-dropdown .u-select-dropdown-menu-item-active { background-color: #e7f4fd; } .u-select-dropdown .u-select-dropdown-menu-item-disabled { color: #ccc; cursor: not-allowed; } .u-select-dropdown .u-select-dropdown-menu-item-disabled:hover { color: #ccc; background-color: #fff; cursor: not-allowed; } .u-select-dropdown .u-select-dropdown-menu-item-selected, .u-select-dropdown .u-select-dropdown-menu-item-selected:hover { background-color: #f7f7f7; font-weight: bold; color: #666; } .u-select-dropdown .u-select-dropdown-menu-item-divider { height: 1px; margin: 1px 0; overflow: hidden; background-color: #e5e5e5; line-height: 0; } .u-select-dropdown.u-select-dropdown--multiple .u-select-dropdown-menu-item:after { font-family: 'uf'; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e658"; color: transparent; display: inline-block; font-size: 12px; font-size: 10px \9; -webkit-transform: scale(0.83333) rotate(0deg); -ms-transform: scale(0.83333) rotate(0deg); transform: scale(0.83333) rotate(0deg); /* IE6-IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)"; zoom: 1; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 16px; font-weight: bold; text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0; } .u-select-dropdown.u-select-dropdown--multiple .u-select-dropdown-menu-item:hover:after { color: #ddd; } .u-select-dropdown.u-select-dropdown--multiple .u-select-dropdown-menu-item-disabled:after { display: none; } .u-select-dropdown.u-select-dropdown--multiple .u-select-dropdown-menu-item-selected:after, .u-select-dropdown.u-select-dropdown--multiple .u-select-dropdown-menu-item-selected:hover:after { color: #108ee9; display: inline-block; } :root .u-select-dropdown.u-select-dropdown--multiple .u-select-dropdown-menu-item:after { -webkit-filter: none; filter: none; } :root .u-select-dropdown.u-select-dropdown--multiple .u-select-dropdown-menu-item:after { font-size: 12px; } .u-select-dropdown-container-open .u-select-dropdown, .u-select-dropdown-open .u-select-dropdown { display: block; } .u-input-search-wrapper { display: inline-block; position: relative; } .u-input-search-wrapper .u-input-search { -webkit-transition: all .3s ease; transition: all .3s ease; } .u-input-search-wrapper .u-input-search-icon { position: absolute; right: 8px; cursor: pointer; -webkit-transition: all .3s ease; transition: all .3s ease; font-size: 14px; height: 20px; line-height: 20px; top: 50%; margin-top: -10px; } .u-input-search-wrapper .u-input-search-icon:hover { color: #108ee9; } .u-input-search-wrapper:hover .u-input-search:not[disabled] { border: 1px solid #108ee9; } .u-search-input-wrapper { display: inline-block; vertical-align: middle; } .u-search-input.u-input-group .u-input:first-child, .u-search-input.u-input-group .u-select:first-child { border-radius: 4px; position: absolute; top: -1px; width: 100%; } .u-search-input.u-input-group .u-input:first-child { padding-right: 36px; } .u-search-input .u-search-btn { color: #666; background-color: #f7f7f7; 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; } .u-search-input .u-search-btn > a:only-child { color: currentColor; } .u-search-input .u-search-btn > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .u-search-input .u-search-btn:hover > a:only-child, .u-search-input .u-search-btn:focus > a:only-child { color: currentColor; } .u-search-input .u-search-btn:hover > a:only-child:after, .u-search-input .u-search-btn:focus > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .u-search-input .u-search-btn:active, .u-search-input .u-search-btn.active { color: #0f87dd; background-color: #f7f7f7; border-color: #0f87dd; } .u-search-input .u-search-btn:active > a:only-child, .u-search-input .u-search-btn.active > a:only-child { color: currentColor; } .u-search-input .u-search-btn:active > a:only-child:after, .u-search-input .u-search-btn.active > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .u-search-input .u-search-btn:hover, .u-search-input .u-search-btn:focus { color: #40a5ed; background-color: #f7f7f7; border-color: #40a5ed; } .u-search-input .u-search-btn:active, .u-search-input .u-search-btn:hover, .u-search-input .u-search-btn:focus { background: #fff; } .u-search-input .u-search-btn:hover { border-color: #d9d9d9; } .u-search-input .u-search-btn[disabled] { color: #ccc; background-color: #f7f7f7; border-color: #d9d9d9; } .u-search-input .u-search-btn[disabled]:hover, .u-search-input .u-search-btn[disabled]:focus, .u-search-input .u-search-btn[disabled]:active, .u-search-input .u-search-btn[disabled].active { color: #ccc; background-color: #f7f7f7; border-color: #d9d9d9; } .u-search-input .u-search-btn[disabled] > a:only-child, .u-search-input .u-search-btn[disabled]:hover > a:only-child, .u-search-input .u-search-btn[disabled]:focus > a:only-child, .u-search-input .u-search-btn[disabled]:active > a:only-child, .u-search-input .u-search-btn[disabled].active > a:only-child { color: currentColor; } .u-search-input .u-search-btn[disabled] > a:only-child:after, .u-search-input .u-search-btn[disabled]:hover > a:only-child:after, .u-search-input .u-search-btn[disabled]:focus > a:only-child:after, .u-search-input .u-search-btn[disabled]:active > a:only-child:after, .u-search-input .u-search-btn[disabled].active > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .u-search-input .u-search-btn.disabled { color: #ccc; background-color: #f7f7f7; border-color: #d9d9d9; } .u-search-input .u-search-btn.disabled:hover, .u-search-input .u-search-btn.disabled:focus, .u-search-input .u-search-btn.disabled:active, .u-search-input .u-search-btn.disabled.active { color: #ccc; background-color: #f7f7f7; border-color: #d9d9d9; } .u-search-input .u-search-btn.disabled > a:only-child, .u-search-input .u-search-btn.disabled:hover > a:only-child, .u-search-input .u-search-btn.disabled:focus > a:only-child, .u-search-input .u-search-btn.disabled:active > a:only-child, .u-search-input .u-search-btn.disabled.active > a:only-child { color: currentColor; } .u-search-input .u-search-btn.disabled > a:only-child:after, .u-search-input .u-search-btn.disabled:hover > a:only-child:after, .u-search-input .u-search-btn.disabled:focus > a:only-child:after, .u-search-input .u-search-btn.disabled:active > a:only-child:after, .u-search-input .u-search-btn.disabled.active > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .u-search-input.u-search-input-focus .u-search-btn-noempty, .u-search-input:hover .u-search-btn-noempty { color: #fff; background-color: #108ee9; border-color: #108ee9; } .u-search-input.u-search-input-focus .u-search-btn-noempty > a:only-child, .u-search-input:hover .u-search-btn-noempty > a:only-child { color: currentColor; } .u-search-input.u-search-input-focus .u-search-btn-noempty > a:only-child:after, .u-search-input:hover .u-search-btn-noempty > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .u-search-input.u-search-input-focus .u-search-btn-noempty:focus, .u-search-input.u-search-input-focus .u-search-btn-noempty:hover, .u-search-input:hover .u-search-btn-noempty:focus, .u-search-input:hover .u-search-btn-noempty:hover { color: #fff; background-color: #40a5ed; border-color: #40a5ed; } .u-search-input.u-search-input-focus .u-search-btn-noempty:hover > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty:focus > a:only-child, .u-search-input:hover .u-search-btn-noempty:hover > a:only-child, .u-search-input:hover .u-search-btn-noempty:focus > a:only-child { color: currentColor; } .u-search-input.u-search-input-focus .u-search-btn-noempty:hover > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty:focus > a:only-child:after, .u-search-input:hover .u-search-btn-noempty:hover > a:only-child:after, .u-search-input:hover .u-search-btn-noempty:focus > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .u-search-input.u-search-input-focus .u-search-btn-noempty:active, .u-search-input.u-search-input-focus .u-search-btn-noempty.active, .u-search-input:hover .u-search-btn-noempty:active, .u-search-input:hover .u-search-btn-noempty.active { color: #fff; background-color: #0f87dd; border-color: #0f87dd; } .u-search-input.u-search-input-focus .u-search-btn-noempty:active > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty.active > a:only-child, .u-search-input:hover .u-search-btn-noempty:active > a:only-child, .u-search-input:hover .u-search-btn-noempty.active > a:only-child { color: currentColor; } .u-search-input.u-search-input-focus .u-search-btn-noempty:active > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty.active > a:only-child:after, .u-search-input:hover .u-search-btn-noempty:active > a:only-child:after, .u-search-input:hover .u-search-btn-noempty.active > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .u-search-input .u-select-combobox .u-select-selection-rendered { margin-right: 29px; } .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled], .u-search-input:hover .u-search-btn-noempty.disabled, .u-search-input:hover .u-search-btn-noempty[disabled] { color: #ccc; background-color: #f7f7f7; border-color: #d9d9d9; } .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:hover, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:focus, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:active, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled.active, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:hover, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:focus, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:active, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled].active, .u-search-input:hover .u-search-btn-noempty.disabled:hover, .u-search-input:hover .u-search-btn-noempty.disabled:focus, .u-search-input:hover .u-search-btn-noempty.disabled:active, .u-search-input:hover .u-search-btn-noempty.disabled.active, .u-search-input:hover .u-search-btn-noempty[disabled]:hover, .u-search-input:hover .u-search-btn-noempty[disabled]:focus, .u-search-input:hover .u-search-btn-noempty[disabled]:active, .u-search-input:hover .u-search-btn-noempty[disabled].active { color: #ccc; background-color: #f7f7f7; border-color: #d9d9d9; } .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:hover > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:focus > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:active > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled.active > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled] > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:hover > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:focus > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:active > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled].active > a:only-child, .u-search-input:hover .u-search-btn-noempty.disabled > a:only-child, .u-search-input:hover .u-search-btn-noempty.disabled:hover > a:only-child, .u-search-input:hover .u-search-btn-noempty.disabled:focus > a:only-child, .u-search-input:hover .u-search-btn-noempty.disabled:active > a:only-child, .u-search-input:hover .u-search-btn-noempty.disabled.active > a:only-child, .u-search-input:hover .u-search-btn-noempty[disabled] > a:only-child, .u-search-input:hover .u-search-btn-noempty[disabled]:hover > a:only-child, .u-search-input:hover .u-search-btn-noempty[disabled]:focus > a:only-child, .u-search-input:hover .u-search-btn-noempty[disabled]:active > a:only-child, .u-search-input:hover .u-search-btn-noempty[disabled].active > a:only-child { color: currentColor; } .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:hover > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:focus > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:active > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled.active > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled] > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:hover > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:focus > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:active > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled].active > a:only-child:after, .u-search-input:hover .u-search-btn-noempty.disabled > a:only-child:after, .u-search-input:hover .u-search-btn-noempty.disabled:hover > a:only-child:after, .u-search-input:hover .u-search-btn-noempty.disabled:focus > a:only-child:after, .u-search-input:hover .u-search-btn-noempty.disabled:active > a:only-child:after, .u-search-input:hover .u-search-btn-noempty.disabled.active > a:only-child:after, .u-search-input:hover .u-search-btn-noempty[disabled] > a:only-child:after, .u-search-input:hover .u-search-btn-noempty[disabled]:hover > a:only-child:after, .u-search-input:hover .u-search-btn-noempty[disabled]:focus > a:only-child:after, .u-search-input:hover .u-search-btn-noempty[disabled]:active > a:only-child:after, .u-search-input:hover .u-search-btn-noempty[disabled].active > a:only-child:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } @-webkit-keyframes uSlideUpIn { 0% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } 100% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(1); transform: scaleY(1); } } /* FormGroup */ /* Navlayout */ .u-popover { position: absolute; top: 0; left: 0; z-index: 1540; display: none; padding: 1px; font-style: normal; font-weight: 400; letter-spacing: normal; line-break: auto; line-height: 1.42857143; text-align: left; text-decoration: none; text-shadow: none; text-transform: none; white-space: normal; word-break: normal; word-spacing: normal; word-wrap: normal; font-size: 14px; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .u-popover > .arrow, .u-popover > .arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } .u-popover > .arrow { border-width: 10px; } .u-popover > .arrow:after { border-width: 10px; content: ""; } .u-popover.top, .u-popover.top-right, .u-popover.top-left { margin-top: -10px; } .u-popover.top .arrow, .u-popover.top-right .arrow, .u-popover.top-left .arrow { left: 50%; margin-left: -11px; border-bottom-width: 0; border-top-color: #999; bottom: -11px; } .u-popover.top .arrow:after, .u-popover.top-right .arrow:after, .u-popover.top-left .arrow:after { content: " "; bottom: 1px; margin-left: -10px; border-bottom-width: 0; border-top-color: #fff; } .u-popover.top-right .arrow { left: auto; right: 20px; } .u-popover.top-left .arrow { left: 20px; } .u-popover.right, .u-popover.right-top, .u-popover.right-bottom { margin-left: 10px; } .u-popover.right .arrow, .u-popover.right-top .arrow, .u-popover.right-bottom .arrow { top: 50%; left: -11px; margin-top: -11px; border-left-width: 0; border-right-color: #999; } .u-popover.right .arrow:after, .u-popover.right-top .arrow:after, .u-popover.right-bottom .arrow:after { content: " "; left: 1px; bottom: -10px; border-left-width: 0; border-right-color: #fff; } .u-popover.right-top .arrow { top: 20px; } .u-popover.right-bottom .arrow { top: auto; bottom: 10px; } .u-popover.left, .u-popover.left-top, .u-popover.left-bottom { margin-left: -10px; } .u-popover.left .arrow, .u-popover.left-top .arrow, .u-popover.left-bottom .arrow { top: 50%; right: -11px; margin-top: -11px; border-right-width: 0; border-left-color: #999; } .u-popover.