npm - @mescius/wijmo.styles - Versions diffs - 5.20232.939 - Mend

@mescius/wijmo.styles 5.20232.939

Files changed (663) hide show

package/parts/_input.scss ADDED Viewed

@@ -0,0 +1,696 @@
+/*!
+    *
+    * Wijmo Library 5.20232.939
+    * 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
+    *
+    */
+// wijmo.input
+.wj-content {
+    &.wj-dropdown,
+    &.wj-inputnumber,
+    &.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 <!DOCTYPE html> 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: $wj-bkg;
+    color: $wj-txt;
+    .wj-control {
+        background: transparent; // inherit doesn't work in IE11
+        color: inherit;
+    }
+    &.wj-content>.wj-content {
+        border: none;
+    }
+}
+// input group (used in DropDown, InputNumber)
+.wj-control {
+    .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: 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;
+            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: $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;
+            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 {
+            color: $wj-txt;
+            &:enabled {
+                background: transparent; // TFS 376384
+            }
+            &: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;
+        }
+        // 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: $wj-item-hvr;
+            transition-duration: $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;
+            }
+        }
+    }
+}
+// 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;
+        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 {
+        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;
+            }
+        }
+        .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 {
+            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-state-invalid {
+            opacity: 0.65;
+        }
+    }
+    &.wj-calendar-multimonth { // Calendars with monthCount > 1
+        display: inline-flex;
+        flex-wrap: wrap;
+        border: $wj-bdr;
+        border-radius: $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;
+        }
+    }
+    &.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-rtl { // RTL calendars
+        .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 {
+    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: $wj-bkg;
+    .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;
+        }
+    }
+}
+// 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-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 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; // can't assume PopupPosition.Above/Below...
+    .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;
+        //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, .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);
+        }
+    }
+}