@mescius/wijmo.styles 5.20232.939

package/misc/_glyphs.scss

@@ -0,0 +1,303 @@
+/*!
+    *
+    * 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
+    *
+    */
+
+// glyphs
+// https://css-tricks.com/the-shapes-of-css/
+.wj-glyph {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    text-align: center;
+    opacity: .75;
+    white-space: normal; // TFS 418680
+    cursor: pointer;
+}
+
+.wj-glyph-asterisk {
+    @extend .wj-glyph;
+    &:after {
+        content: '\2731\fe0e'
+    }
+}
+
+.wj-glyph-calendar {
+    @extend .wj-glyph;
+    width: 1em;
+    height: 1em;
+    border: .1em solid;
+    border-top: .3em solid;
+    top: .15em; // TFS 440092
+    &:after { // no text: TFS 379685
+        position: absolute;
+        left: .3em;
+        top: .1em;
+        width: .2em;
+        height: .4em;
+        border-right: .1em solid;
+        border-top: .07em solid;
+        opacity: 0.7;
+        content: ' ';
+    }  
+}
+
+.wj-glyph-check {
+    @extend .wj-glyph;
+    &:after {
+        font-weight: bold;
+        content: '\2714\fe0e';
+    }
+}
+
+.wj-glyph-circle {
+    @extend .wj-glyph;
+    border: .3em solid;
+    border-radius: 50%;
+    top: -.1em; // TFS 440092
+}
+
+.wj-glyph-clipboard {
+    @extend .wj-glyph;
+    &:after {
+        content: '\1f4cb\fe0e'
+    }
+}
+
+.wj-glyph-clock {
+    @extend .wj-glyph;
+    width: 1em;
+    height: 1em;
+    border: .1em solid;
+    border-radius: 50%;
+    top: .15em; // TFS 440092
+    &:after {
+        position: absolute;
+        border-left: .1em solid;
+        border-bottom: .1em solid;
+        width: .25em;
+        height: .3em;
+        top: .2em;
+        left: .35em;
+        content: ' ';
+    }
+}
+
+.wj-glyph-diamond {
+    @extend .wj-glyph;
+    &:after {
+        content: '\25c6\fe0e'
+    }
+}
+
+.wj-glyph-dimension {
+    @extend .wj-glyph;
+    &:after {
+        content: '\27c0\fe0e'
+    }
+}
+
+.wj-glyph-down {
+    @extend .wj-glyph;
+    border-top: .5em solid;
+    border-right: .4em solid transparent;
+    border-left: .4em solid transparent;
+}
+
+.wj-glyph-down-left {
+    @extend .wj-glyph;
+    border-top: .65em solid transparent;
+    border-left: .65em solid;
+}
+
+.wj-glyph-down-right {
+    @extend .wj-glyph;
+    top: -2px;
+    border-bottom: .65em solid;
+    border-left: .65em solid transparent;
+}
+
+.wj-glyph-drag {
+    @extend .wj-glyph;
+    width: 1em;
+    height: 1em;
+    &:after {
+        position: absolute;
+        top: 0.15em;
+        left: 0.1em;
+        width: 1em;
+        height: 1em;
+        background: radial-gradient(#000 1px, transparent 2px);
+        background-size: 0.33em 0.33em;
+        content: ' ';
+    }
+}
+
+.wj-glyph-file {
+    @extend .wj-glyph;
+    border-left: .7em solid;
+    height: .85em;
+    &:after {
+        position: absolute;
+        transform: translateX(-100%);
+        border-top: .3em solid transparent;
+        border-left: .3em solid white;
+        content: ' ';
+    }
+}
+
+.wj-glyph-left {
+    @extend .wj-glyph;
+    top: 1px;
+    border-top: .4em solid transparent;
+    border-right: .5em solid;
+    border-bottom: .4em solid transparent;
+}
+
+.wj-glyph-measure {
+    @extend .wj-glyph;
+    &:after {
+        content: '\1f4ca\fe0e'
+    }
+}
+
+.wj-glyph-pin {
+    @extend .wj-glyph;
+    top: -.1em;
+    left: .1em;
+    width: .4em;
+    border-top: .6em solid;
+    &:before {
+        position: absolute;
+        border-left: .7em solid;
+        height: .1em;
+        left: -.15em;
+        top: -.1em;
+        content: ' ';
+    }
+    &:after {
+        position: absolute;
+        border-left: .15em solid;
+        height: .5em;
+        left: .15em;
+        top: -.1em;
+        content: ' ';
+    }
+}
+
+.wj-glyph-plus, .wj-glyph-minus {
+    @extend .wj-glyph;
+    border-top: .25em solid;
+    width: .9em;
+    top: -.3em;
+}
+.wj-glyph-plus:after {
+    position: absolute;
+    box-sizing: border-box;
+    border-left: .25em solid;
+    width: .25em;
+    height: .95em;
+    left: .33em;
+    top: -.6em;
+    content: ' ';
+}
+
+.wj-glyph-pencil {
+    @extend .wj-glyph;
+    &:after {
+        content: '\270e\fe0e'
+    }
+}
+
+.wj-glyph-right {
+    @extend .wj-glyph;
+    top: 1px;
+    border-top: .4em solid transparent;
+    border-bottom: .4em solid transparent;
+    border-left: .5em solid;
+}
+
+.wj-glyph-square {
+    @extend .wj-glyph;
+    border: .25em solid;
+}
+
+.wj-glyph-step-backward {
+    @extend .wj-glyph;
+    border-top: .4em solid transparent;
+    border-right: .5em solid;
+    border-bottom: .4em solid transparent;
+    top: .12em; // TFS 440092
+    &:after {
+        position: absolute;
+        border-left: .2em solid;
+        height: .75em;
+        transform: translate(-100%,-50%);
+        content: ' ';
+    }
+}
+[dir=rtl] .wj-glyph-step-backward:after {
+    transform: translate(0, -50%);
+}
+
+.wj-glyph-step-forward {
+    @extend .wj-glyph;
+    border-top: .4em solid transparent;
+    border-bottom: .4em solid transparent;
+    border-left: .5em solid;
+    &:after {
+        position: absolute;
+        border-left: .2em solid;
+        height: .75em;
+        transform: translateY(-50%);
+        content: ' ';
+    }
+}
+[dir=rtl] .wj-glyph-step-forward:after {
+    transform: translate(100%, -50%);
+}
+
+.wj-glyph-up {
+    @extend .wj-glyph;
+    border-right: .4em solid transparent;
+    border-bottom: .5em solid;
+    border-left: .4em solid transparent;
+}
+
+.wj-glyph-up-left {
+    @extend .wj-glyph;
+    border-bottom: .65em solid transparent;
+    border-left: .65em solid;
+}
+
+.wj-glyph-up-right {
+    @extend .wj-glyph;
+    border-top: .65em solid;
+    border-left: .65em solid transparent;
+}
+
+.wj-glyph-filter {
+    @extend .wj-glyph;
+    top: -.1em;
+    width: .5em;
+    border-top: .5em solid;
+    border-right: .4em solid transparent;
+    border-left: .4em solid transparent;
+    &:after {
+        position: absolute;
+        border-left: .25em solid; // TFS 457654
+        left: -.125em;
+        top: -.2em;
+        height: .4em;
+        content: ' ';
+    }
+}
+

package/misc/_mixins.scss

@@ -0,0 +1,75 @@
+/*!
+    *
+    * 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
+    *
+    */
+
+// darken a color or return an almost transparent black 
+@function safedarken($color, $amount) {
+    @if type-of($color) == 'color' and $color != transparent {
+        @return darken($color, $amount);
+    } @else {
+        @return rgba(0, 0, 0, .08);
+    }
+}
+
+// lighten a color or return an almost transparent white
+@function safelighten($color, $amount) {
+    @if type-of($color) == 'color' and $color != transparent {
+        @return lighten($color, $amount);
+    }
+    @else {
+        @return rgba(255, 255, 255, 0.08);
+    }
+}
+
+// darken light colors, lighten dark colors
+@function safechangecolor($color, $amount) {
+    @if type-of($color) == 'color' and lightness($color) > 50% {
+        @return safedarken($color, $amount);
+    }
+    @else {
+        @return safelighten($color, $amount);
+    }
+}
+
+// create a background with an optional gradient
+@mixin backgradient($color, $gradient, $transparentColor: null, $replacementColor: null) {
+    // if color is null, render nothing (e.g. backgradient($wj-cell-frz, true))
+    @if $color {
+        // is color is the same as the background, darken slightly
+        @if $transparentColor == transparent {
+            $color: $replacementColor;
+        }
+        // output the background
+        background: $color;
+        // output the optional gradient
+        @if $gradient {
+            @if type-of($color) == 'color' and lightness($color) > 50% {
+                $otherColor: safedarken($color, 12%);
+                background-image: linear-gradient($color, $otherColor);
+            }
+            @else {
+                $otherColor: safelighten($color, 12%);
+                background-image: linear-gradient($color, $otherColor);
+            }
+        }
+    }
+}
+
+// add prefixes to a property
+// https://css-tricks.com/snippets/sass/mixin-prefix-properties/
+@mixin prefix($property, $value, $prefixes: ()) {
+    #{$property}: $value;
+
+    @each $prefix in $prefixes {
+        #{'-' + $prefix + '-' + $property}: $value;
+    }
+}

package/misc/_variables.scss

@@ -0,0 +1,74 @@
+/*!
+    *
+    * 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
+    *
+    */
+
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+$wj-bkg: white !default; // content background
+$wj-txt: black !default; // content foreground
+$wj-bdr-clr: rgba(0,0,0,.2) !default; // content border color
+$wj-bdr-wid: 1px !default; // content border width
+$wj-bdr: $wj-bdr-wid solid $wj-bdr-clr !default; // content border
+$wj-bdr-rad: 4px !default; // content border radius
+$wj-box-shadow: 0 6px 13px rgba(0,0,0,.2) !default; // box shadow for drop-downs/dialogs
+$wj-invalid: red !default; // invalid state markers
+$wj-item-pdg: 4px 6px 3px 6px !default; // item padding (listbox items, grid cells, etc)
+$wj-item-hvr: rgba(0,0,0,.05) !default; // item hover
+$wj-tdn-focus: .4s !default; // focus/hover transition duration
+$wj-disabled-opacity: .6 !default; // opacity for disabled controls/items
+$wj-disabled-bkg: safechangecolor($wj-bkg, 6%) !default; // background for disabled controls/items
+
+$wj-hdr-bkg: #eee !default; // header element background
+$wj-hdr-hvr: safedarken($wj-hdr-bkg, 5%) !default; // header element hover background
+$wj-hdr-txt: #444 !default; // header element foreground
+
+$wj-btn-bkg: #eee !default; // button background
+$wj-btn-hvr: safedarken($wj-btn-bkg, 5%) !default; // button hover background
+$wj-btn-txt: $wj-txt !default; // button text
+$wj-btn-grp-bdr: $wj-bdr !default; // button group border
+
+$wj-sel-bkg: #0085c7 !default; // selected element background
+$wj-sel-txt: white !default; // selected element foreground
+$wj-msel-bkg: #80adbf !default; // extended selection background
+$wj-msel-txt: white !default; // extended selection foreground
+$wj-accent-bkg: $wj-sel-bkg !default; // accent background (like drag markers)
+$wj-accent-txt: $wj-sel-txt !default; // accent background (like drag markers)
+
+$wj-cell: $wj-bkg !default; // cell background
+$wj-cell-alt: safedarken($wj-cell, 3%) !default; // alternating cell background
+$wj-cell-frz: null !default; // frozen cell background
+$wj-cell-frz-alt: null !default; // alternating frozen cell background
+$wj-cell-frz-txt: $wj-txt !default; // frozen cell foreground
+$wj-cell-pdg: $wj-item-pdg !default; // cell padding
+$wj-cell-bdr-clr: rgba(0,0,0,.2) !default; // cell border color
+$wj-cell-bdr: 1px solid $wj-cell-bdr-clr !default; // cell border
+$wj-cell-bdr-vrt: $wj-cell-bdr !default; // cell vertical border
+$wj-cell-bdr-hrz: $wj-cell-bdr !default; // cell horizontal border
+$wj-cell-grp-bkg: safedarken($wj-hdr-bkg, 5%) !default; // group row background
+$wj-cell-grp-txt: $wj-hdr-txt !default; // group row foreground
+$wj-cell-frz-bdr-clr: safedarken($wj-hdr-bkg, 30%) !default; // frozen cell border color
+$wj-cell-frz-bdr: 1px solid $wj-cell-frz-bdr-clr !default; // frozen cell border
+$wj-cell-frz-bdr-vrt: $wj-cell-frz-bdr !default; // frozen area vertical border
+$wj-cell-frz-bdr-hrz: $wj-cell-frz-bdr !default; // frozen area horizontal border
+
+$wj-tooltip: $wj-bkg !default; // tooltip background
+$wj-tooltip-txt: $wj-txt !default; // tooltip text
+$wj-error-tooltip: red !default; // error tooltip background
+$wj-error-tooltip-txt: white !default; // error tooltip text
+
+$wj-bkg-grd: false !default; // content background gradient
+$wj-btn-grd: false !default; // button background gradient
+$wj-hdr-grd: false !default; // header background gradient
+$wj-input-grd: false !default; // input element background gradient

package/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "@mescius/wijmo.styles",
+    "version": "5.20232.939",
+    "description": "UI library for pure JS, Angular, React, Vue and more...",
+    "author": "MESCIUS inc",
+    "license": "Commercial",
+    "main": "./index.js",
+    "types": "./index.d.ts",
+    "homepage": "https://developer.mescius.com/wijmo",
+    "bugs": {
+        "url": "https://developer.mescius.com/forums/wijmo"
+    },
+    "keywords": [
+        "control",
+        "component",
+        "ui",
+        "control library",
+        "component library",
+        "ui library",
+        "control-library",
+        "component-library",
+        "ui-library",
+        "grid",
+        "data grid",
+        "data-grid",
+        "datagrid",
+        "angular grid",
+        "react grid",
+        "vue grid",
+        "angular-grid",
+        "react-grid",
+        "vue-grid"
+    ]
+}

package/parts/_barcode.scss

@@ -0,0 +1,137 @@
+/*!
+    *
+    * 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.barcode.*
+
+.wj-barcode {
+    // width: 100%;
+    height: 60px;
+    display: inline-block;
+
+    &.wj-state-invalid {
+        border: 1.2px solid $wj-invalid;
+    }
+}
+
+.wj-barcode-qrcode {
+    width: 100px;
+    height: 100px;
+}
+
+// no width - variable width barcode
+// .wj-barcode-codabar {
+//     width: 155px;
+// }
+
+.wj-barcode-ean8 {
+    width: 85px;
+}
+
+.wj-barcode-ean13 {
+    width: 140px;
+}
+
+// no width - variable width barcode
+// .wj-barcode-code39 {
+//     width: 150px;
+// }
+
+// no width - variable width barcode
+// .wj-barcode-code128 {
+//     width: 180px;
+// }
+
+// no width - variable width barcode
+// .wj-barcode-gs1_128 {
+//     width: 180px;
+// }
+
+.wj-barcode-upca {
+    width: 115px;
+}
+
+.wj-barcode-upce0 {
+    width: 70px;
+}
+
+.wj-barcode-upce1 {
+    width: 70px;
+}
+
+.wj-barcode-gs1databar-omnidirectional {
+    width: 100px;
+}
+
+.wj-barcode-gs1databar-truncated {
+    width: 100px;
+}
+
+.wj-barcode-gs1databar-stacked {
+    width: 60px;
+}
+
+.wj-barcode-gs1databar-stacked-omnidirectional {
+    width: 60px;
+}
+
+.wj-barcode-gs1databar-limited {
+    width: 85px;
+}
+
+// no width - variable width barcode
+// .wj-barcode-gs1databar-expanded {
+//     width: 240px;
+// }
+
+// no width - variable width barcode
+// .wj-barcode-gs1databar-expanded-stacked {
+//     width: 105px;
+// }
+
+// no width - variable width barcode
+// .wj-barcode-pdf417 {
+//     width: 110px;
+// }
+
+.wj-barcode-micropdf417 {
+    width: 105px;
+}
+
+.wj-barcode-datamatrix {
+    width: 85px;
+    height: 85px;
+}
+
+.wj-barcode-code49 {
+    width: 85px;
+}
+
+// no width - variable width barcode
+// .wj-barcode-code93 {
+//     width: 90px;
+// }
+
+.wj-barcode-itf14 {
+    width: 170px;
+}
+
+// no width - variable width barcode
+// .wj-barcode-interleaved2of5 {
+//     width: 130px;
+// }
+
+.wj-barcode-japanese-postal {
+    width: 140px;
+    height: 40px;
+}
+