@mescius/wijmo.styles 5.20232.939

package/parts/_labeled_input.scss

@@ -0,0 +1,248 @@
+/*!
+    *
+    * 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
+    *
+    */
+
+// wj-labeled-input: adapted from MDL styles 
+//
+// The wj-labeled-input class should be used in a DIV element that contains:
+//
+// 1) A Wijmo input control
+// 2) Always followed by a label element, and
+// 3) An optional error element
+//
+// For example:
+// <div class="wj-labeled-input">
+//     <div id="name" autocomplete="name" required accesskey="n"></div>
+//     <label for="name"><span class="accesskey">N</span>ame</label>
+//     <div class="wj-error" tabindex="-1">We do need your name...</div>
+// </div>
+
+// labeled input container
+.wj-labeled-input {
+    position: relative;
+    display: inline-block;
+    width: 12em;
+    max-width: 100%;
+    margin: 0 20px;
+    padding: 20px 0;
+    
+    &, *, *:after, *:before { // TFS 443339
+        box-sizing: border-box;
+        box-sizing: border-box;
+    }
+
+    &.wide {
+        // wide fields
+        width: 20em;
+    }
+
+    .accesskey {
+        // underline access keys
+        text-decoration: underline;
+        font-size: unset;
+    }
+
+    .wj-control.wj-content {
+        // labeled Wijmo controls
+        margin: 0;
+        width: 100%;
+        background-color: transparent;
+        border: none;
+        border-bottom: 1px solid rgba(0, 0, 0, .1);
+
+        button {
+            // buttons in Wijmo controls
+            opacity: 0.75;
+            border-color: rgba(0, 0, 0, .1);
+        }
+    }
+
+    .wj-inputnumber.wj-state-empty:not(.wj-state-focused) .wj-btn {
+        display: none; // no spinner buttons on empty/unfocused InputNumber controls
+    }
+
+    // label in the container (must come after the control)
+    label {
+        font-size: 16px;
+        top: 24px;
+        bottom: 0;
+        margin: 0;
+        pointer-events: none;
+        position: absolute;
+        display: block;
+        width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-align: left;
+        color: rgba(0, 0, 0, 0.258824);
+        transition-duration: .2s;
+        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    }
+
+    label:after {
+        // underline label
+        content: '';
+        background-color: $wj-sel-bkg;
+        bottom: 20px;
+        height: 2px;
+        left: 45%;
+        position: absolute;
+        transition-duration: .2s;
+        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+        visibility: hidden;
+        width: 10px;
+    }
+
+    .wj-state-focused+label:after {
+        // show underline when focused
+        left: 0;
+        visibility: visible;
+        width: 100%;
+    }
+
+    .wj-error {
+        // error messages
+        color: $wj-invalid;
+        position: absolute;
+        font-size: 12px;
+        margin-top: 3px;
+        visibility: hidden;
+        display: block;
+    }
+
+    .wj-control.wj-state-invalid~.wj-error {
+        visibility: visible;
+    }
+
+    .wj-state-invalid+label {
+        color: $wj-invalid;
+
+        &:after {
+            background-color: $wj-invalid;
+        }
+    }
+
+    // checkboxes
+    input[type=checkbox],
+    input[type=radio] {
+        display: none; // hide real checkbox
+
+        +label {
+            position: relative;
+            padding: .25em 0 0 1.8em;
+            pointer-events: all;
+            font-size: unset;
+            top: 0;
+            overflow: visible;
+
+            &:after {
+                // unchecked checkbox
+                content: '';
+                position: absolute;
+                display: block;
+                visibility: visible;
+                text-align: center;
+                left: 0;
+                top: .25em;
+                width: 1.3em;
+                height: 1.3em;
+                color: white;
+                background: #ddd;
+                transition: all 0.3s;
+            }
+
+            &:hover:after {
+                box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
+            }
+        }
+
+        &:checked+label:after {
+            // checked checkbox
+            content: '\2714';
+            background: $wj-sel-bkg;
+        }
+    }
+
+    // radios
+    input[type=radio] {
+        +label:after {
+            // radio
+            border-radius: 1em;
+            transform: scale(1.1);
+        }
+
+        &:checked+label:after {
+            // checked radio
+            content: '';
+            background: white;
+            border: .45em solid $wj-sel-bkg;
+        }
+    }
+
+    // switches
+    &.switch input[type=checkbox] {
+        +label {
+            padding-left: 3.1em;
+
+            &:before {
+                // track
+                content: '';
+                position: absolute;
+                display: block;
+                visibility: visible;
+                left: 0;
+                top: .5em;
+                width: 2.5em;
+                height: 1em;
+                border-radius: 1em;
+                background: #ddd;
+                transition: all 0.3s;
+            }
+
+            &:after {
+                // thumb
+                content: '';
+                left: 0;
+                top: 0.25em;
+                width: 1.5em;
+                height: 1.5em;
+                border-radius: 1em;
+                border: 1px solid #bbb;
+                background: white;
+                transition: all 0.3s;
+            }
+        }
+
+        &:checked+label:before {
+            // checked track
+            background: $wj-sel-bkg;
+            opacity: .4;
+        }
+
+        &:checked+label:after {
+            // checked thumb
+            margin-left: 1.25em;
+            border: 1px solid $wj-sel-bkg;
+            background: $wj-sel-bkg;
+        }
+    }
+}
+
+// move label out of the way when control is focused or not empty
+.wj-static-labels .wj-labeled-input :not(.wj-state-focused)+label,
+.wj-labeled-input .wj-state-focused+label,
+.wj-labeled-input :not(.wj-state-empty)+label {
+    font-size: 12px;
+    top: 4px;
+    color: $wj-sel-bkg;
+    visibility: visible;
+}

package/parts/_nav.scss

@@ -0,0 +1,283 @@
+/*!
+    *
+    * 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.nav
+
+// tabpanel
+.wj-tabpanel {
+    display: block;
+
+    >div { // root
+
+        >.wj-tabpanes {
+            overflow: auto;
+            border-top: 1px solid #ddd;
+            @include prefix(user-select, text, webkit moz ms);
+
+            >.wj-tabpane:not(.wj-state-active) { // hide inactive panes
+                display: none; 
+            }
+        }
+
+        >.wj-tabheaders>.wj-tabheader {
+            position: relative;
+            cursor: pointer;
+            display: inline-block;
+            text-align: center;
+            padding: 8px 12px;
+            text-decoration: none;
+            color: inherit;
+            font-weight: bold;
+            text-transform: uppercase;
+
+            &.wj-state-active {
+                background: $wj-bkg;
+                color: $wj-sel-bkg;
+            }
+
+            &:not(.wj-state-active):not(.wj-state-disabled):focus {
+                background: rgba(0, 0, 0, .1);
+            }
+
+            &:after {
+                content: '';
+                position: absolute;
+                background: $wj-sel-bkg;
+                height: 2.5px;
+                left: 45%;
+                width: 10%;
+                bottom: 0;
+                visibility: hidden;
+            }
+
+            &.wj-state-active:after {
+                left: 0;
+                width: 100%;
+                visibility: visible;
+            }
+        }
+    }
+
+    &.wj-animated { // animate tab headers
+        >div {
+            >.wj-tabheaders>.wj-tabheader {
+                &.wj-state-active:after {
+                    transition-duration: .2s;
+                }
+            }
+        }
+    }
+}
+
+// accordion
+.wj-accordion {
+    overflow: auto;
+
+    // content
+    >.wj-content {
+        border: none;
+        overflow: hidden;
+        display: none;
+    }
+
+    >.wj-header.wj-state-active+.wj-content {
+        display: block;
+    }
+
+    // header
+    >.wj-header {
+        display: block;
+        text-decoration: none;
+        padding: 12px;
+        font-size: 120%;
+        cursor: pointer;
+
+        &.wj-state-active {
+            background: $wj-sel-bkg;
+            color: $wj-sel-txt;
+        }
+
+        &:focus {
+            outline: 2px solid $wj-accent-bkg;
+            outline-offset: -2px;
+        }
+    }
+
+    &.wj-show-icons>.wj-header {
+        &:before { // collapsed glyph
+            content: '';
+            float: left;
+            margin: .4em .5em .4em 0;
+            opacity: .5;
+            white-space: normal;
+            border-top: .4em solid transparent;
+            border-bottom: .4em solid transparent;
+            border-left: .5em solid;
+        }
+
+        &.wj-state-active:before { // expanded glyph
+            border-top: .5em solid;
+            border-left: .4em solid transparent;
+            border-right: .4em solid transparent;
+        }
+    }
+
+    // RTL icons
+    &.wj-rtl.wj-show-icons>.wj-header:before {
+        float: right;
+        margin: .4em 0 .4em .5em;
+        transform: scaleX(-1);
+    }
+}
+
+// treeview
+.wj-treeview {
+    width: 100%;
+    overflow: auto;
+    //background: transparent;
+    border: none;
+
+    .wj-nodelist {
+        display: block;
+        position: relative;
+
+        .wj-nodelist {
+            padding-left: 1em;
+        }
+    }
+
+    .wj-node {
+        cursor: pointer;
+        white-space: nowrap;
+        padding: $wj-item-pdg;
+
+        &:before {
+            content: '';
+            position: relative;
+            display: inline-block;
+            border-top: .5em solid;
+            border-right: .45em solid transparent;
+            border-left: .45em solid transparent;
+            top: -1px;
+            margin-right: 4px;
+            opacity: 0.75;
+        }
+
+        &.wj-state-selected {
+            color: inherit;
+            background: rgba(0, 0, 0, 0.05);
+        }
+
+        &.wj-state-collapsed:before,
+        &.wj-state-collapsing:before {
+            transform: rotate(-90deg);
+        }
+
+        &.wj-state-collapsed.wj-state-loading:before {
+            animation-name: wjLazyNodeLoading;
+            animation-duration: .6s;
+            animation-direction: alternate;
+            animation-iteration-count: infinite;
+        }
+
+        &.wj-state-empty:before {
+            visibility: hidden;
+        }
+
+        &.wj-state-collapsed+.wj-nodelist {
+            display: none;
+        }
+
+        img {
+            padding-right: 4px;
+        }
+
+        .wj-node-check {
+            margin-right: 4px;
+        }
+
+        .wj-node-text {
+            // TFS 280472: https://bugzilla.mozilla.org/show_bug.cgi?id=389348
+            display: inline-block;
+        }
+    }
+
+    .wj-marker {
+        position: absolute;
+        background: $wj-accent-bkg;
+        opacity: 0.5;
+        pointer-events: none;
+    }
+
+    &.wj-state-loading * {
+        cursor: wait;
+    }
+
+    // animated trees
+    &.wj-animated {
+        .wj-node {
+            &:before {
+                transition: all .3s cubic-bezier(.4, 0, .2, 1);
+            }
+
+            &.wj-state-collapsed:before,
+            &.wj-state-collapsing:before {
+                transition: all .3s cubic-bezier(.4, 0, .2, 1);                
+            }
+        }
+    }
+
+    // RTL trees
+    &.wj-rtl {
+        .wj-nodelist {
+            .wj-nodelist {
+                padding-left: unset;
+                padding-right: 1em;
+            }
+
+            .wj-node:before {
+                margin-right: unset;
+                margin-left: 4px;
+            }
+
+            .wj-node.wj-state-collapsed:before,
+            .wj-node.wj-state-collapsing:before {
+                transform: rotate(+90deg);
+            }
+        }
+
+        .wj-node {
+            img {
+                padding-right: unset;
+                padding-left: 4px;
+            }
+
+            .wj-node-check {
+                margin-right: unset;
+                margin-left: 4px;
+            }
+        }
+    }
+}
+
+@keyframes wjLazyNodeLoading {
+    from {
+        opacity: 1;
+        transform: scale(1.1);
+    }
+
+    to {
+        opacity: 0.5;
+        transform: scale(0.5);
+    }
+}