@mescius/wijmo.styles 5.20232.939

package/parts/_grid.scss

@@ -0,0 +1,414 @@
+/*!
+    *
+    * 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.grid
+.wj-flexgrid {
+    width: 100%;
+    cursor: default;
+    overflow: hidden;
+
+    .wj-row {
+        position: absolute; // avoid flicker in Chrome: TFS 261344
+        top: 0;
+    }
+
+    .wj-colheaders .wj-header {
+        .wj-btn.wj-btn-glyph.wj-elem-pin {
+            opacity: .9; // pinned
+            &:not(.wj-state-pinned) { // un-pinned
+                opacity: .4;
+                .wj-glyph-pin {
+                    transform: rotate(-45deg);  
+                }
+            }
+        }
+        &.wj-state-multi-selected { // selected column headers
+            border-bottom: 2px solid $wj-sel-bkg;
+        }
+        &.wj-colgroup { // merged column headers
+            display: flex;
+            align-items: center; // vertical alignment
+            &.wj-align-right {
+                justify-content: flex-end;
+            }
+            &.wj-align-center {
+                justify-content: center;
+            }
+        }
+        &.wj-big-header:after { // headers before zero-width columns
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            right: 2px;
+            border-right: $wj-cell-bdr-vrt;
+            content: '';
+        }
+    }
+
+    .wj-rowheaders .wj-header {
+        &.wj-state-multi-selected { // selected row headers
+            border-right: 2px solid $wj-sel-bkg;
+        }
+        &.wj-big-header:after { // headers before zero-height rows
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 2px;
+            border-bottom: $wj-cell-bdr-hrz;
+            content: '';
+        }
+    }
+
+    .wj-topleft .wj-header {
+        &.wj-big-header:after { // headers before zero-width columns
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            right: 2px;
+            border-right: $wj-cell-bdr-vrt;
+            content: '';
+        }        
+    }
+
+    .wj-frozen-clone .wj-cell { // frozen cell clones (in container with pointer-events:none)
+        pointer-events: auto; // TFS 367568
+        a {
+            //pointer-events: auto;
+            display: inline-block; // TFS 352484: https://coderwall.com/p/s8pjpg/reseting-pointer-events-on-ie11
+            // NOTE: position: relative; also works
+        }
+    }
+
+    .wj-marquee { // selection marquee
+        position: absolute;
+        //border: 2px solid $wj-sel-bkg; // affects scrollbars (TFS 269673)
+        //outline: 3px solid $wj-sel-bkg; // no effect on scrollbars
+        //outline-offset: -1px; // not supported in IE (TFS 380448)
+        box-shadow: 0 0 0 1px $wj-sel-bkg, inset 0 0 0 1px $wj-sel-bkg; // TFS 379342
+        pointer-events: none;
+    }
+
+    .wj-marker { // resize row/col marker
+        position: absolute;
+        background: $wj-accent-bkg;
+        opacity: 0.5;
+        pointer-events: none;
+        z-index: 1000;
+    }
+
+    .wj-state-sticky .wj-header {
+        opacity: 0.75;
+    }
+
+    .wj-grid-editor {
+        width: 100%;
+        height: 100%;
+        border: none;
+        margin: 0;
+        padding: 0;
+        background: inherit;
+        color: inherit;
+        overflow: hidden;
+        resize: none;
+    }
+
+    .wj-focus-header-cell  {
+        @extend .wj-marquee
+    }
+    
+    .wj-cell {
+        .wj-btn.wj-btn-glyph { // dataMap drop-downs, filters, details
+            padding: 0 4px;
+            min-width: 1.5em;
+            color: inherit;
+            background: transparent;
+            opacity: .4;
+
+            &:hover, &:focus {
+                opacity: 1;
+                transition-duration: $wj-tdn-focus;
+            }
+
+            &.wj-right {
+                float: right;
+                order: 2; // TFS 438977
+                &:nth-child(1) {
+                    order: 5
+                }
+                &:nth-child(2) {
+                    order: 4
+                }
+                &:nth-child(3) {
+                    order: 3
+                }
+            }
+
+            &.wj-elem-detail {
+                min-width: 1em; // TFS 352604
+                padding: 0;
+            }
+
+            > span {
+                opacity: 1;
+            }
+        }
+        &.wj-hasdropdown { // TFS 430002
+            display: flex; // WJM-19430
+            & > div { //WJM-234003
+                flex-grow: 1;
+            }
+            .wj-btn.wj-btn-glyph.wj-right {
+                height: 100%;
+            }
+        }
+
+        &.wj-radio-map label { // dataMap radio buttons
+            display: inline-block;
+            font-weight: inherit;
+            margin: 0 1em 0 0; // space to click the cell between labels
+            input[type=radio] {
+                margin: 0 4px 0 0;
+                outline: none;
+                &:not(:checked) {
+                    opacity: .4;
+                }
+            }
+        }
+
+        // fix for 461333 (https://stackoverflow.com/questions/27536428/inline-block-element-height-issue)
+        &.wj-detail .wj-content.wj-flexgrid {
+            vertical-align: top;
+        }
+        &.wj-frozen-row.wj-detail{
+            z-index: 2;
+        }
+        &.wj-detail{
+            z-index: 0;
+        }
+
+        // fix for C1WEB-27716 (auto-size rows and boolean cells)
+        label {
+            display: inline-block;
+            max-width: 100%;
+            margin: 0;
+            font-weight: inherit;
+            line-height: 1em; // WJM-19514
+            input[type=checkbox] {
+                margin: 0px 6px 0px 0px;
+            }
+        }
+    }
+
+    &.wj-rtl {
+        .wj-cell {
+            border-left: $wj-cell-bdr-vrt;
+            border-right: none;
+
+            .wj-btn.wj-btn-glyph.wj-right {
+                float: left;
+            }
+        }
+
+        .wj-frozen-col {
+            border-left: $wj-cell-frz-bdr-vrt;
+            border-right: none;
+        }
+
+        .wj-colheaders .wj-header {
+            &.wj-filter-on, &.wj-filter-off { // workaround for IE11 bug: TFS 408397
+               white-space: normal;
+               word-break: break-all;
+            }
+           
+            &.wj-big-header:after { // headers before zero-width columns
+                left: 2px;
+                right: unset;
+            }
+
+            .wj-sort-index {
+                padding: 0 .2em 0 0;
+            }
+        }
+
+        .wj-rowheaders .wj-header {
+            &.wj-state-multi-selected { // selected row headers
+                border-left: 2px solid $wj-sel-bkg;
+                border-right: none;
+            }
+        }
+
+        .wj-topleft .wj-header {
+            &.wj-big-header:after { // headers before zero-width columns
+                left: 2px;
+                right: unset;
+            }
+        }
+    }
+
+    // honor preserveWhiteSpace property (TFS 403505)
+    &.wj-whitespace-pre {
+        .wj-cell {
+            white-space: pre;
+        }
+        .wj-cell.wj-wrap {
+            white-space: pre-wrap;
+        }
+        .wj-cell.wj-multiline {
+            white-space: pre-wrap; //pre-line; // TFS 440414
+        }
+    }
+
+    // don't float buttons while measuring (TFS 418083)
+    [wj-state-measuring].wj-cell .wj-btn.wj-btn-glyph.wj-right {
+        float: none;
+    }    
+}
+
+// moved to top level for backward compatibility
+.wj-cell {
+    position: absolute;
+    overflow: hidden;
+    white-space: nowrap;
+    padding: $wj-cell-pdg;
+    border-right: $wj-cell-bdr-vrt;
+    border-bottom: $wj-cell-bdr-hrz;
+    background: $wj-cell;
+    outline: none;
+
+    &:not(.wj-hasdropdown) {
+        text-overflow: ellipsis;
+    }
+
+    &.wj-alt {
+        background: $wj-cell-alt; // alternate cell background
+        &.wj-frozen { // frozen cell fore and backgrounds
+            @include backgradient($wj-cell-frz-alt, false);
+        }
+    }
+
+    &.wj-header {
+        @include backgradient($wj-hdr-bkg, $wj-hdr-grd);
+        color: $wj-hdr-txt;
+        font-weight: bold;
+
+        &.wj-state-multi-selected { // selected headers
+            background: $wj-hdr-hvr;
+            color: $wj-hdr-txt;
+            font-weight: bold;
+        }
+
+        .wj-sort-index { // sort index in multi-column sorts
+            display: inline-block; // TFS 400500
+            font-weight: normal;
+            font-size: 80%;
+            vertical-align: top;
+            color: $wj-sel-bkg;
+            padding: 0 0 0 .2em;
+            opacity: 1;
+        }
+    }
+
+    &.wj-frozen { // frozen cell fore and backgrounds
+        @include backgradient($wj-cell-frz, false);
+
+        @if $wj-cell-frz-txt != $wj-txt { // TFS 359692
+            color: $wj-cell-frz-txt;
+        }
+    }
+
+    &.wj-last-frozen-row { // frozen row bottom edge
+        border-bottom: $wj-cell-frz-bdr-hrz;
+    }
+
+    &.wj-frozen-col { // frozen column right edge
+        border-right: $wj-cell-frz-bdr-vrt;
+    }
+
+    &.wj-group {
+        background: $wj-cell-grp-bkg;
+        color: $wj-cell-grp-txt;
+    }
+
+    &.wj-state-invalid {
+        border: 1.2px solid $wj-invalid;
+
+        &.wj-header {
+            background: rgba(255, 180, 180, 1); // TFS 306815
+        }
+
+        &:not(.wj-header):after {
+            position: absolute;
+            content: '';
+            width: 0;
+            right: 0;
+            top: -6px;
+            border: 6px solid transparent;
+            border-right-color: $wj-invalid;
+        }
+    }
+
+    &.wj-header.wj-state-dragsrc {
+        opacity: 0.5; // header cell being dragged
+    }
+
+    &.wj-wrap { // soft breaks
+        white-space: normal;
+        text-overflow: clip;
+        word-wrap: break-word; // TFS 407942
+    }
+
+    &.wj-multiline { // hard breaks
+        white-space: pre; // or pre-line?
+        text-overflow: clip;
+        word-wrap: break-word; // TFS 407942
+    }
+
+    &.wj-wrap.wj-multiline { // soft and hard breaks
+        white-space: pre-wrap;
+        text-overflow: clip;
+    }
+
+    &.wj-align-left {
+        text-align: left;
+    }
+
+    &.wj-align-right {
+        text-align: right;
+    }
+
+    &.wj-align-center {
+        text-align: center;
+    }
+
+    &.wj-align-justify {
+        text-align: justify;
+    }
+
+    &.wj-align-justify-all {
+        text-align: justify;
+        text-align-last: justify;
+        text-justify: distribute; // required for IE11
+    }
+}
+
+.wj-cells .wj-cell { // selection selector is stronger
+    &.wj-state-selected {
+        background: $wj-sel-bkg;
+        color: $wj-sel-txt;
+    }
+
+    &.wj-state-multi-selected {
+        background: $wj-msel-bkg;
+        color: $wj-msel-txt;
+    }
+}

package/parts/_grid_cellmaker.scss

@@ -0,0 +1,113 @@
+/*!
+    *
+    * 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.grid
+.wj-flexgrid .wj-cell {
+
+    // maker content
+    .wj-cell-maker {
+        width: 100%;
+        height: 100%;
+    }
+
+    // maker buttons
+    &:not([wj-state-measuring]) // WJM19444: no absolute positioning while measuring
+    button.wj-cell-maker { 
+        position: absolute;
+        left: 0;
+        top: 0;
+        color: $wj-txt;
+    }
+
+    // maker links
+    &.wj-state-selected, 
+    &.wj-state-multi-selected {
+        a.wj-cell-maker {
+            color: inherit;
+        }
+    }
+    
+    // maker images
+    img.wj-cell-maker {
+        width: unset;
+    }
+
+    // spark lines, bars, etc
+    .wj-cell-maker svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+        stroke: #376092;
+        fill: #376092;
+
+        rect, circle {
+            stroke-width: 0;
+        }
+
+        line {
+            stroke-width: 2px;
+
+            &.x-axis {
+                stroke-width: 0.5px;
+                stroke-opacity: 0.5;
+            }
+        }
+
+        .wj-marker  {
+            fill: #d00000;
+            opacity: 1;
+        }
+    }
+
+    // rating
+    &.wj-cell-maker.wj-radio-map {
+        label {
+            position: relative;
+            width: 1em;
+            transform: scale(0.1);
+            color: orange;
+            margin: 0 1em 0 0; // space to click the cell between labels
+
+            input, input:not(:checked) { // hide input elements
+                opacity: 0;
+            }
+
+            &:after { // show rating symbol (star)
+                position: absolute;
+                transform: scale(20); // twice the original size: big stars
+                cursor: pointer;
+                content: '\2605'; // \272a \2606 \272e \2729 https://www.htmlsymbols.xyz/star-symbols
+                height: 100%; // WJM-22009
+            }
+
+            &:hover { // hovering over label (symbol)
+                opacity: 1;
+                color: orangered;
+                transition: color 600ms;
+            }
+
+            &.wj-chk-hidden {
+                opacity: 0; // hide this label and
+                margin: 0 0 0 -1em; // position before the first one
+            }
+            
+            &.wj-chk-off:not(:hover):not(.wj-chk-hidden) { // dim options after the checked one
+                opacity: .15;
+            }
+        }
+        
+        &[aria-readonly=true] label { // no hover effects on read-only grids
+            pointer-events: none;
+        }
+    }
+}

package/parts/_grid_filter.scss

@@ -0,0 +1,87 @@
+/*!
+    *
+    * 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.grid.filter
+.wj-flexgrid {
+    .wj-cell.wj-filter-on .wj-elem-filter { // show filter on
+        opacity: .9;
+    }
+
+    .wj-cell.wj-filter-off .wj-elem-filter { // hide filter off
+        opacity: .5;
+    }
+}
+
+.wj-columnfiltereditor {
+    padding: 10px;
+    min-width: 240px; // TFS 435129
+    max-width: 400px;
+
+    .wj-filtertype {
+        text-align: right;
+        margin: 14px 0px;
+        font-size: 12px;
+    }
+
+    .wj-control {
+        margin-bottom: 6px;
+        width: 100%;
+    }
+
+    .wj-valuefilter-editor,
+    .wj-conditionfilter-editor {
+        margin-top: 1em;
+    }
+
+    .wj-conditionfilter-editor > div > label { //WJM-25857  
+        display: block;
+        margin-bottom: 0px;
+        font-weight: normal;
+    }
+
+    .wj-listbox {
+        height: 150px;
+
+        &:not(.wj-state-focused) {
+            .wj-listbox-item.wj-state-selected {
+                color: inherit;
+                background: transparent;
+
+                &:hover {
+                    background: $wj-item-hvr;
+                    transition-duration: $wj-tdn-focus;
+                }
+            }
+        }
+
+    }
+
+    label { // TFS 399740
+        display: inline-block;
+        width: auto;
+    }
+
+    a {
+        color: inherit;
+        font-size: inherit;
+        font-weight: bold;
+
+        &.wj-state-disabled {
+            text-decoration: none;
+        }
+    }
+
+    .wj-sort-buttons .wj-btn {
+        min-width: 95px;
+    }
+}

package/parts/_grid_grouppanel.scss

@@ -0,0 +1,80 @@
+/*!
+    *
+    * 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.grid.grouppanel
+.wj-grouppanel {
+    display: block;
+    background: $wj-cell-grp-bkg;
+    padding: 15px;
+    min-height: 1em; // workaround for IE11 bug (reported by OutSystems)
+
+    .wj-groupmarker {
+        margin-right: 10px;
+        padding: 6px 16px;
+        border: $wj-cell-bdr;
+        cursor: pointer;
+
+        &:hover {
+            background: $wj-hdr-hvr;
+        }
+
+        .wj-glyph-drag {
+            margin: 0 10px 0 0;
+        }
+
+        .wj-filter {
+            margin: 0 0 0 10px;
+            cursor: pointer;
+            opacity: .5;
+
+            &:hover, &.wj-filter-on {
+                opacity: 1;
+            }
+        }
+
+        .wj-remove {
+            cursor: pointer;
+            opacity: .5;
+            padding: 12px 0 12px 12px;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+
+        span {
+            opacity: .5;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+    }
+
+    &.wj-rtl {
+        .wj-groupmarker {
+            .wj-glyph-drag {
+                margin: 0 0 0 10px;
+            }
+
+            .wj-filter {
+                margin: 0 10px 0 0;
+            }
+
+            .wj-remove {
+                padding: 12px 12px 12px 0;
+            }
+        }
+    }
+}
+