// wijmo.input .wj-content { &.wj-dropdown, &.wj-inputnumber, &.wj-inputmask, &.wj-calendar-outer, &.wj-pager { vertical-align: middle; // so labeledinput.css works in IE display: inline-table; // so height:100% works properly even without tag border-collapse: separate; } //&:not(.wj-dropdown-panel):not(.wj-listbox):not(.wj-flexgrid):not(.wj-calendar-outer):not(.wj-multi-autocomplete) { // border: $input-bdr; //} } // input group (used in DropDown, InputNumber) .wj-control { .wj-template { position: relative; display: table-cell; // to work in Firefox, TFS 307664 } .wj-template, .wj-input { height: 100%; } .wj-input-group { display: table; border-collapse: separate; width: 100%; height: 100%; .wj-input-group-btn { display: table-cell; width: 1%; height: 100%; min-width: 26px; white-space: nowrap; vertical-align: top; &:last-child:not(:first-child) > .wj-btn { border-left: $wj-btn-grp-bdr; } &:first-child:not(:last-child) > .wj-btn { border-right: $wj-btn-grp-bdr; } } .wj-form-control { display: table-cell; padding: 4px 8px; color: inherit; // TFS 347871 border: none; width: 100%; height: 100%; min-height: 2em; // for compatibility with legacy wijmo.css &:enabled { // TFS 376384 background: transparent; // $wj-bkg; } } } .wj-btn-group { display: inline-block; border: $wj-btn-grp-bdr; border-radius: $wj-bdr-rad; overflow: hidden; > *:not(:first-child) { border-left: $wj-btn-grp-bdr; } > .wj-form-control { padding: $wj-item-pdg; background: transparent; border: none; &:not(:first-child) { border-left: $wj-btn-grp-bdr; } } } .wj-btn-group > .wj-btn, .wj-input-group-btn > .wj-btn { height: 100%; min-height: 2em; // to avoid blank space in IE9 and some versions of Chrome @include backgradient($wj-btn-bkg, $wj-btn-grd); &:focus, &:hover { @include backgradient($wj-btn-hvr, $wj-btn-grd); transition-duration: $wj-tdn-focus; } &.wj-btn-default { background: transparent; color: $wj-txt; &:focus, &:hover { @include backgradient($wj-btn-hvr, $wj-btn-grd); transition-duration: $wj-tdn-focus; } } } // adjust group borders in RTL controls &.wj-rtl { .wj-input-group-btn { &:last-child:not(:first-child) > .wj-btn { border-right: $wj-btn-grp-bdr; border-left: none; } &:first-child:not(:last-child) > .wj-btn { border-left: $wj-btn-grp-bdr; border-right: none; } } .wj-btn-group { > *:not(:first-child) { border-right: $wj-btn-grp-bdr; border-left: none; } > .wj-form-control { &:not(:first-child) { border-right: $wj-btn-grp-bdr; border-left: none; } } } } } // input number .wj-inputnumber { input.wj-form-control { text-align: right; } } // listbox .wj-listbox { overflow: auto; cursor: default; .wj-listbox-item { padding: $wj-item-pdg; &.wj-separator { height: 1px; margin: 3px 0; padding: 0; background: rgba(0,0,0,.1); } &.wj-header { opacity: 1; position: sticky; top: 0; } &.wj-state-selected { transform: scale(1); // workaround for Chrome 70 bug (TFS 349534) } &:not(.wj-state-selected):not(.wj-state-disabled):not(.wj-separator):hover { background: $wj-item-hvr; transition-duration: $wj-tdn-focus; } label { font-weight: normal; margin: 0; } } } // nested listboxes (in multi-select dropdown) .wj-listbox.wj-dropdown-panel > .wj-listbox { width: 100%; border: none; background: inherit; color: inherit; } // calendar .wj-calendar { .wj-header { font-size: 90%; } .wj-day-today { font-weight: bold; } .wj-day-othermonth { opacity: 0.65; } .wj-calendar-outer { display: block; padding: 10px; width: 100%; height: auto; cursor: default; } .wj-calendar-header { display: block; padding: 0 0 15px 0; width: 100%; .wj-month-select { display: inline-block; cursor: pointer; } .wj-btn-group { float: right; margin-bottom: 7px; .wj-btn { padding: 2px 8px 0 8px; } } } .wj-calendar-month { width: 100%; border-collapse: collapse; font: inherit; td { width: 14.29%; } } .wj-calendar-year { width: 100%; border-collapse: collapse; font: inherit; td { width: 25%; } tr:not(.wj-header) td { height: 3em; } } td { text-align: center; padding: $wj-item-pdg; border: none; } &.wj-dropdown-panel { width: 23em; } &.wj-rtl { .wj-calendar-header { .wj-btn-group { float: left; .wj-btn { .wj-glyph-right, .wj-glyph-left { transform: scale(-1, 1); } } } } } } .wj-dropdown-panel .wj-calendar-outer { border: none; background: none; > .wj-content { display: block; } } .wj-yearpicker { max-height: 12em; display: grid; grid-template-columns: repeat(4, 1fr); width: 4em; // grid fall-back text-align: center; .wj-listbox-item { text-align: center; display: inline-block; // grid fall-back width: 4em; } } // color picker .wj-colorpicker { width: 420px; height: 200px; padding: 4px; .wj-colorbox { position: relative; width: 100%; height: 100%; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } } // input color .wj-inputcolor { .wj-input-group input.wj-form-control { padding-left: 24px; } .wj-inputcolorbox { position: absolute; left: 6px; top: 6px; bottom: 6px; width: 12px; border: 1px solid black; } &.wj-rtl { .wj-input-group input.wj-form-control { padding-left: 4px; padding-right: 24px; } .wj-inputcolorbox { left: auto; right: 6px; } } } // autocomplete .wj-listbox.wj-dropdown-panel { .wj-autocomplete-match { font-weight: bold; } } // multi-autocomplete .wj-multi-autocomplete { width: 100%; padding: 5px; .wj-input { float: left; } .wj-input-group .wj-form-control { margin-top: 5px; height: auto; } .wj-token { @include backgradient($wj-btn-bkg, $wj-btn-grd); color: $wj-btn-txt; border: $wj-bdr; border-radius: $wj-bdr-rad; margin: 5px; vertical-align: middle; float: left; cursor: default; &:focus, &:hover, &.wj-token-active { // REVIEW: use wj-state-active instead? @include backgradient($wj-btn-hvr, $wj-btn-grd); transition-duration: $wj-tdn-focus; } .wj-token-label { padding: $wj-item-pdg; display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; max-width: 500px; } .wj-token-close { padding: $wj-item-pdg; color: $wj-btn-txt; vertical-align: middle; cursor: pointer; text-decoration: none; &:hover, &:focus { opacity: .5; transition-duration: $wj-tdn-focus; } } } .wj-token-helper { position: absolute; left: -10000px; } } // popups/dialogs .wj-popup { //@include backgradient($wj-bkg, $wj-bkg-grd); background: $wj-bkg; // no gradient on popup background box-shadow: $wj-box-shadow; margin: 2px 0; .wj-dialog-header { width: 100%; @include backgradient($wj-hdr-bkg, $wj-hdr-grd); color: $wj-hdr-txt; font-weight: bold; font-size: 120%; padding: 1em; } .wj-dialog-body { padding: 1em; } .wj-dialog-footer { text-align: right; margin-top: 1em; padding: 1em; } } .wj-popup-backdrop { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,.5); } // menu .wj-menu .wj-form-control { cursor: pointer; } .wj-listbox.wj-menu-items { .wj-listbox-item:not(.wj-state-disabled):not(.wj-separator) { cursor: pointer; } .wj-listbox-item.wj-subitems { position: relative; &:after { content: ''; position: absolute; top: 50%; transform: translate(0, -50%); opacity: .75; border-top: .4em solid transparent; border-bottom: .4em solid transparent; border-left: .5em solid; } } &:not(.wj-rtl) .wj-listbox-item.wj-subitems { padding-right: 1.8em; &:after { right: .55em; } } &.wj-rtl .wj-listbox-item.wj-subitems { padding-left: 1.8em; &:after { left: .55em; transform: translate(0, -50%) scale(-1, 1) } } } // pager .wj-pager { .wj-input-group { .wj-input-group-btn > .wj-btn { min-width: 40px; } .wj-form-control { text-align: center; border-left: 1px solid rgba(0,0,0,0.2); border-right: 1px solid rgba(0,0,0,0.2); } } }