/*! * * Wijmo Library 5.20261.50 * https://developer.mescius.com/wijmo * * Copyright(c) MESCIUS inc. All rights reserved. * * Licensed under the End-User License Agreement For MESCIUS Wijmo Software. * us.sales@mescius.com * https://developer.mescius.com/wijmo/licensing * */ @use "../misc/mixins"; @use "../misc/variables"; // wijmo.input .wj-content { &.wj-dropdown, &.wj-inputnumber { vertical-align: middle; // so _labeled_input works in IE display: inline-flex; // WJM-36072: fix combobox NVDA table read issue border-collapse: separate; .wj-template { position: relative; flex: 1; } } &.wj-inputmask, &.wj-calendar-outer, &.wj-pager { vertical-align: middle; // so _labeled_input works in IE display: inline-table; // so height:100% works properly even without tag border-collapse: separate; } } // inputmask: custom edit height in Firefox (TFS 307664, 395028) .wj-control.wj-inputmask { display: inline-flex; .wj-input { width: 100%; // WJM-20593 } .wj-input-group { display: flex; } } // drop-down panel .wj-dropdown-panel { display: block; background: variables.$wj-bkg; color: variables.$wj-txt; // used in drop-downs and other controls pointer-events: auto; // TFS 390659 box-shadow: variables.$wj-box-shadow; .wj-control { background: transparent; // inherit doesn't work in IE11 color: inherit; } &.wj-content > .wj-content { border: none; } } .wj-control { // WJM-34923, chrome has this style as part of its useragent stylesheet input[type="tel"] { direction: ltr; } .wj-template { position: relative; display: table-cell; // TFS 307664, 457702 } .wj-template, .wj-input { height: 100%; //display: table-cell; // to work in Firefox, TFS 395028 } .wj-input-group { display: flex; border-collapse: separate; width: 100%; height: 100%; .wj-input-group-btn { display: inline-block; flex-shrink: 0; width: auto; height: auto; min-width: 26px; white-space: nowrap; vertical-align: top; &:last-child:not(:first-child) > .wj-btn { border-left: variables.$wj-btn-grp-bdr; } &:first-child:not(:last-child) > .wj-btn { border-right: variables.$wj-btn-grp-bdr; } } .wj-form-control { display: table-cell; padding: 4px 8px; border: none; width: 100%; height: 100%; color: inherit; // TFS 347871 background: transparent; // TFS 443372 (inherit doesn't work in IE11) min-height: 2em; // for compatibility with legacy wijmo.css } button, input { margin: 0; } } .wj-btn-group { display: inline-block; border: variables.$wj-btn-grp-bdr; border-radius: variables.$wj-bdr-rad; overflow: hidden; > *:not(:first-child) { border-left: variables.$wj-btn-grp-bdr; } > .wj-form-control { padding: variables.$wj-item-pdg; border: none; &:not(:first-child) { border-left: variables.$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 mixins.backgradient(variables.$wj-btn-bkg, variables.$wj-btn-grd); &:focus, &:hover { @include mixins.backgradient(variables.$wj-btn-hvr, variables.$wj-btn-grd); transition-duration: variables.$wj-tdn-focus; } &.wj-btn-default { color: variables.$wj-txt; &:enabled { background: transparent; // TFS 376384 } &:focus, &:hover { @include mixins.backgradient(variables.$wj-btn-hvr, variables.$wj-btn-grd); transition-duration: variables.$wj-tdn-focus; } } } // adjust group borders in RTL controls &.wj-rtl { .wj-input-group-btn { &:last-child:not(:first-child) > .wj-btn { border-right: variables.$wj-btn-grp-bdr; border-left: none; } &:first-child:not(:last-child) > .wj-btn { border-left: variables.$wj-btn-grp-bdr; border-right: none; } } .wj-btn-group { > *:not(:first-child) { border-right: variables.$wj-btn-grp-bdr; border-left: none; } > .wj-form-control { &:not(:first-child) { border-right: variables.$wj-btn-grp-bdr; border-left: none; } } } } } // input number .wj-inputnumber { input.wj-form-control { text-align: right; } } @mixin wj-checkbox-base { appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; position: relative; flex-shrink: 0; //Fix WJM-36661 width: 13px; height: 13px; display: inline-block; margin: 4px; border: 1px solid #767676; border-radius: 2px; background: #ffffff; box-sizing: border-box; @media screen and (-ms-high-contrast: active) { border-width: 1px; } } @mixin wj-checkbox-checkmark { content: ""; position: absolute; left: 50%; top: 55%; width: 5px; height: 9px; border: solid white; border-width: 0 2px 2px 0; transform: translate(-50%, -70%) rotate(40deg); box-sizing: inherit; } @mixin wj-checkbox-indeterminate { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 0; border-top: 2px solid white; transform: translate(-50%, -50%); box-sizing: border-box; forced-color-adjust: none; } .wj-custom-checkbox { @include wj-checkbox-base; &:checked { background: #0075ff; border-color: #0075ff; &::after { @include wj-checkbox-checkmark; } } &[data-indeterminate="true"] { background: #0075ff; border-color: #0075ff; &::after { @include wj-checkbox-indeterminate; } } } // listbox .wj-listbox { overflow: auto; cursor: default; .wj-listbox-item { padding: variables.$wj-item-pdg; &.wj-separator { height: 1px; margin: 3px 0; padding: 0; background: rgba(variables.$wj-txt, 0.1); @media (forced-colors: active) { background: WindowText; } } &.wj-header { opacity: 1; position: sticky; z-index: 1; top: 0; } // workaround for Chrome 70 bug (TFS 349534, 396676) // seems like Chrome fixed this bug, so remove workaround (TFS 403024) //&.wj-state-selected { // transform: scale(1); //} &:not(.wj-state-selected):not(.wj-state-disabled):not(.wj-separator):hover { background: variables.$wj-item-hvr; transition-duration: variables.$wj-tdn-focus; } > label { display: flex; // inline-flex; this causes problems (in Blazor at least) align-content: flex-start; align-items: baseline; // TFS 403513 margin: 0; font-weight: normal; > input[type="checkbox"] { margin: 4px; } } } .wj-checklist-base { @include wj-checkbox-base; } [aria-selected="true"] .wj-checklist-base { background: #0075ff; border-color: #0075ff; } .wj-checklist-mark { @include wj-checkbox-checkmark; display: none; } .wj-state-checked .wj-checklist-mark { display: block; } .wj-checklist-item:focus-within .wj-checklist-base { box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.3); } .wj-state-disabled { .wj-checklist-base { background-color: #eee; border-color: #ccc; } .wj-checklist-mark { border-color: #999; } } } .wj-state-disabled { .wj-listbox-item { &.wj-state-selected { background-color: #021a28; color: white; } } } // multi-select listbox .wj-multiselectlistbox { .wj-template { display: flex; flex-direction: column; max-height: inherit; min-height: inherit; height: auto; } .wj-content { display: block; border: none; border-radius: 0; } .wj-form-control { border: none; width: 100%; color: inherit; background: transparent; padding: 5px 8px; } } .wj-dropdown-panel > .wj-multiselectlistbox { display: block; } // calendar .wj-calendar { max-width: 100vw; // make sure it fits on mobile devices (TFS 390662) overflow: auto; // do not overflow the container/page (WJM-19509) .wj-header { font-size: 90%; } .wj-day-today { font-weight: bold; } .wj-day-othermonth:not(.wj-state-selected):not(.wj-state-multi-selected):not(.wj-state-last-selected) { opacity: 0.65; } .wj-calendar-outer { display: block; padding: 10px; cursor: default; } .wj-calendar-header { display: flex; // TFS 469691 justify-content: space-between; align-items: center; flex-grow: 0; flex-shrink: 0; // important for IE margin-bottom: 7px; min-width: 19em; // TFS 469691 .wj-month-select { display: inline-block; margin: 6px; font-weight: bold; cursor: pointer; .wj-glyph-down { opacity: 0.5; } &:focus-visible { outline: 2px solid variables.$wj-sel-bkg; outline-offset: 2px; } } .wj-btn-group { //float: right; // TFS 469691 .wj-btn { padding: 2px 8px 0 8px; } span { pointer-events: none; // TFS 472508 } } } .wj-calendar-month { width: 100%; border-collapse: collapse; font: inherit; td.wj-state-focus:focus { outline: 2px solid rgb(100 100 100); outline-offset: -1px; } td { width: 14.29%; &:not(.wj-state-selected):hover { background-color: variables.$wj-btn-hvr; &.wj-state-multi-selected { color: variables.$wj-txt; } } } } .wj-calendar-year { width: 100%; border-collapse: collapse; font: inherit; td.wj-state-focus:focus { outline: 2px solid rgb(100, 100, 100); outline-offset: -1px; } td { width: 25%; abbr { all: unset; } &:not(.wj-state-selected):hover { background-color: variables.$wj-btn-hvr; } } tr:not(.wj-header) td { height: 3em; } .wj-select-year:focus { outline: 2px solid variables.$wj-sel-bkg; } } td, th { text-align: center; padding: variables.$wj-item-pdg; border: none; &.wj-state-invalid { opacity: 0.65; } } &.wj-rtl { // RTL calendars .wj-calendar-header { .wj-btn-group { float: left; .wj-btn { .wj-glyph-right, .wj-glyph-left { transform: scale(-1, 1); //wjm-35743 } } } } } &.wj-calendar-multimonth { // Calendars with monthCount > 1 display: inline-flex; flex-wrap: wrap; border: variables.$wj-bdr; border-radius: variables.$wj-bdr-rad; .wj-calendar-outer { @extend .wj-outer-flex; } .wj-content { border-color: rgba(0, 0, 0, 0.05); border-radius: 0; } .wj-calendar { display: flex; } // RTL calendars case WJM-18847 .wj-calendar-header { .wj-btn-group { .wj-btn { .wj-glyph-right, .wj-glyph-left { transform: scale(1, -1); } } } } } &.wj-btns-outside { // Calendars with showMonthPicker == Outside position: relative; .wj-calendar-header { //margin-left: 1em; // make room for the buttons .wj-btn-group { // remove group borders border: none; button { display: none; // hide today button position: absolute; z-index: 1; top: 0; //height: auto; // align buttons to top of the host min-width: 1em; // make buttons thin and let them extend from top to bottom padding: 0; border: none; opacity: 0.5; &[wj-part="btn-prev"] { left: 0; display: block; // TFS 468116 } &[wj-part="btn-next"] { right: 0; display: block; // TFS 468116 } } } } } &.wj-state-disabled { .wj-day-othermonth:not(.wj-state-selected):not(.wj-state-multi-selected):not(.wj-state-last-selected) { opacity: 0.9; } .wj-state-selected { background-color: #021a28; } } @media (forced-colors: active) { .wj-state-selected { outline: 2px solid WindowText; outline-offset: -2px; } .wj-state-multi-selected { outline: 2px solid Highlight; outline-offset: -2px; } .wj-calendar-month td.wj-state-focus:focus, .wj-calendar-year tbody td.wj-state-focus:focus { outline: 1px solid WindowText; outline-offset: -1px; } .wj-calendar-header .wj-month-select:focus { outline: 1px solid WindowText; } .wj-calendar-year .wj-select-year:focus { outline: 1px solid WindowText; } .wj-btn:focus { outline: 1px solid Highlight; outline-offset: -1px; transition-duration: unset !important; } .wj-calendar-month td:hover, .wj-calendar-year td:hover { outline: 1px solid WindowText; outline-offset: -1px; } .wj-calendar-button:focus { outline: 1px solid WindowText; outline-offset: -1px; transition-duration: unset !important; } } } .wj-dropdown-panel .wj-calendar-outer { background: none; > .wj-content { display: block; } } .wj-yearpicker { max-height: 12em; min-width: 18em; display: grid; grid-template-columns: repeat(4, 1fr); width: 4em; // grid fall-back align-items: center; justify-items: center; text-align: center; .wj-listbox-item { text-align: center; display: inline-block; // grid fall-back width: 4em; } } .wj-outer-flex { display: flex; flex-direction: column; min-width: 21em; flex-shrink: 0; } // input date .wj-inputdate-dropdown { display: flex; background: variables.$wj-bkg; flex-direction: column; .wj-inputdate-dropdown-container { display: flex; .wj-calendar-outer { @extend .wj-outer-flex; // TFS 456066 } > .wj-calendar { flex-grow: 1; border: none; } > .wj-listbox { flex-grow: 1; margin: 10px; min-width: 8em; max-height: 16em; .wj-listbox-item { white-space: nowrap; } .wj-state-selected:focus { outline: 2px solid rgb(100 100 100); outline-offset: -1px; } } } .wj-calendar-confirmation-button-container { margin: 10px; display: flex; justify-content: flex-end; .wj-btn { @include mixins.wjButton( variables.$wj-btn-bkg, variables.$wj-btn-grd, variables.$wj-btn-txt, variables.$wj-btn-hvr, variables.$wj-tdn-focus, variables.$wj-disabled-opacity ); margin-left: 10px; } :focus { outline: none; } // button-styled links a.wj-btn, button.wj-btn:not(.wj-btn-default) { // not for buttons in input controls @include mixins.wjButtonStyledLinks(variables.$wj-bdr-rad); } } } // input date time .wj-inputdatetime { .wj-input-group-btn > .wj-btn.wj-btn-default.wj-show-dropdown-button { @include mixins.backgradient(variables.$wj-btn-hvr, variables.$wj-btn-grd); @media (forced-colors: active) { background-color: Highlight; } } } // 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); &:focus-visible { outline: 2px solid #1a73e8; } } div[role="gridcell"]:focus, div[role="columnheader"]:focus { outline: 2px solid #050cef; transform: scale(0.92); } .wj-colorpicker-cursor { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%); border: 2px solid #f0f0f0; border-radius: 50px; box-shadow: 0px 0px 4px 2px #0f0f0f; transition: border-color 0.2s, box-shadow 0.2s; } .palette-grid { display: flex; flex-direction: column; align-items: flex-start; height: 80%; } .palette-row { display: flex; flex-direction: row; width: 100%; height: 13%; } .palette-gridcell { cursor: pointer; width: 10%; margin-right: 2px; } .palette-grid > .palette-row:first-child { margin-bottom: 4px; } } // 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-state-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 mixins.backgradient(variables.$wj-btn-bkg, variables.$wj-btn-grd); color: variables.$wj-btn-txt; border: variables.$wj-bdr; border-radius: variables.$wj-bdr-rad; margin: 5px; vertical-align: middle; float: left; cursor: default; &:focus, &:hover, &.wj-token-active { // REVIEW: use wj-state-active instead? @include mixins.backgradient(variables.$wj-btn-hvr, variables.$wj-btn-grd); transition-duration: variables.$wj-tdn-focus; } .wj-token-label { padding: variables.$wj-item-pdg; display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; max-width: 500px; } .wj-token-close { padding: variables.$wj-item-pdg; color: variables.$wj-btn-txt; vertical-align: middle; cursor: pointer; text-decoration: none; &:hover, &:focus { opacity: 0.5; transition-duration: variables.$wj-tdn-focus; } } } .wj-token-helper { position: absolute; left: -10000px; color: inherit; background: transparent; } } // popups/dialogs .wj-popup { //@include backgradient($wj-bkg, $wj-bkg-grd); background: variables.$wj-bkg; // no gradient on popup background box-shadow: variables.$wj-box-shadow; //margin: 2px 0; // can't assume PopupPosition.Above/Below... .wj-dialog-header { width: 100%; @include mixins.backgradient(variables.$wj-hdr-bkg, variables.$wj-hdr-grd); color: variables.$wj-hdr-txt; font-weight: bold; font-size: 120%; padding: 1em; //cursor: default; // TFS 439479 (NO: TFS 470569) } .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, 0.5); } // menu .wj-menu .wj-form-control { cursor: pointer; } .wj-menu.wj-state-focused { outline: 2px solid variables.$wj-sel-bkg; outline-offset: -1px; } @media (forced-colors: active) { .wj-menu.wj-state-focused { outline: 2px solid Highlight; outline-offset: -1px; } } .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: 0.75; border-top: 0.4em solid transparent; border-bottom: 0.4em solid transparent; border-left: 0.5em solid; } } &:not(.wj-rtl) .wj-listbox-item.wj-subitems { padding-right: 1.8em; &:after { right: 0.55em; } } &.wj-rtl .wj-listbox-item.wj-subitems { padding-left: 1.8em; &:after { left: 0.55em; transform: translate(0, -50%) scale(-1, 1); } } } // pager .wj-pager { user-select: auto; -webkit-user-select: auto; .wj-input-group { .wj-input-group-btn > .wj-btn { min-width: 40px; padding: 0em 1em; } span[wj-part="txt-curr"] { display: table-cell; text-align: center; vertical-align: middle; border-left: 1px solid variables.$wj-bdr-clr; border-right: 1px solid variables.$wj-bdr-clr; padding: 0.5em 0.8em 0.4em 0.8em; width: 100%; height: 100%; min-height: 2em; } span[wj-part|="btn"]:focus-within > .wj-btn:focus-visible { transition-property: none; outline: 0.2em solid; outline-offset: -0.2em; } span[wj-part="txt-curr"]:focus-visible { outline: 0.15em solid; outline-offset: -0.15em; background-color: variables.$wj-bkg; } // To let Navigation glyph work in OS contrast themes. @media (forced-colors: active) { span[wj-part|="btn"] button.wj-btn.wj-btn-default[tabindex] { &:active, &:hover { transition-property: none; background-color: Canvas; } border: 1px solid ButtonText; border-right-color: ButtonText; border-left-color: ButtonText; } span[wj-part="txt-curr"]:focus-visible, span[wj-part|="btn"]:focus-within > .wj-btn:focus-visible { outline-color: Highlight; } } } }