datafolder 1.0.0

package/static/w2ui/src/less/src/tooltip.less

@@ -0,0 +1,948 @@
+/* general overlay */
+.w2ui-overlay {
+    --tip-size: 10px;
+    * { box-sizing: border-box; }
+
+    position: fixed;
+    z-index: 1700;
+    opacity: 0;
+    transition: opacity 0.1s;
+    border-radius: 4px;
+
+    .w2ui-draggable {
+        cursor: move;
+    }
+
+    .w2ui-overlay-body {
+        display: inline-block;
+        border-radius: 2px;
+        padding: 4px 8px;
+        margin: 0px;
+        font-size: 13px;
+        font-family: OpenSans;
+
+        box-shadow: 0 0 10px #00000042;
+
+        color: white;
+        border: 1px solid #555;
+        background-color: #69717a;
+        text-shadow: 0px 1px 1px #444;
+        line-height: 1.4;
+        letter-spacing: 0.1px;
+        overflow: auto;
+        /* yellow */
+        &.w2ui-light { // default is .w2ui-dark, which is not a real class
+            color: #3c3c3c;
+            text-shadow: none;
+            background-color: #fffde9;
+            border: 1px solid #a0a0a0;
+            box-shadow: 0 0 10px #00000008;
+        }
+        /* bright white */
+        &.w2ui-white {
+            color: #3c3c3c;
+            text-shadow: none;
+            background-color: #fafafa;
+            border: 1px solid #a0a0a0;
+            box-shadow: 0 2px 15px #00000008;
+            outline: 1px solid white;
+        }
+        &.w2ui-arrow-right:before {
+            content: "";
+            position: absolute;
+            left: calc(var(--tip-size, 8px) * -0.5 - 1px);
+            top: calc(50% - 1px); // for one line tooltips, small adjjustment
+            transform: rotate(-45deg) translateY(-50%);
+            transform-origin: top center;
+            margin: 0;
+            border: inherit;
+            border-color: inherit;
+            background-color: inherit;
+            width: var(--tip-size, 8px);
+            height: var(--tip-size, 8px);
+            border-bottom-right-radius: 200px;
+            border-bottom-width: 0;
+            border-right-width: 0;
+        }
+
+        &.w2ui-arrow-left:after {
+            content: "";
+            position: absolute;
+            right: calc(var(--tip-size, 8px) * -0.5 - 1px);
+            top: calc(50% - 1px); // for one line tooltips, small adjjustment
+            transform: rotate(135deg) translateY(-50%);
+            transform-origin: top center;
+            margin: 0;
+            border: inherit;
+            border-color: inherit;
+            background-color: inherit;
+            width: var(--tip-size, 8px);
+            height: var(--tip-size, 8px);
+            border-bottom-right-radius: 200px;
+            border-bottom-width: 0;
+            border-right-width: 0;
+        }
+
+        &.w2ui-arrow-bottom:before {
+            content: "";
+            position: absolute;
+            top: calc(var(--tip-size, 8px) * -0.5);
+            left: 50%;
+            transform: rotate(45deg) translateX(-50%);
+            transform-origin: center left;
+            margin: 0;
+            border: inherit;
+            border-color: inherit;
+            background-color: inherit;
+            width: var(--tip-size, 8px);
+            height: var(--tip-size, 8px);
+            border-bottom-right-radius: 200px;
+            border-bottom-width: 0;
+            border-right-width: 0;
+        }
+
+        &.w2ui-arrow-top:after {
+            content: "";
+            position: absolute;
+            bottom: calc(var(--tip-size, 8px) * -0.5 + 3px);
+            left: 50%;
+            transform-origin: center left;
+            transform: rotate(-135deg) translateX(-50%);
+            margin: 0;
+            border: inherit;
+            border-color: inherit;
+            background-color: inherit;
+            width: var(--tip-size, 8px);
+            height: var(--tip-size, 8px);
+            border-bottom-right-radius: 200px;
+            border-bottom-width: 0;
+            border-right-width: 0;
+        }
+    }
+}
+
+/* color overlay */
+.w2ui-colors-header {
+    padding: 4px 11px;
+    border-bottom: 1px solid #dddddd;
+    font-weight: bold;
+    font-size: 14px;
+    cursor: move;
+}
+
+.w2ui-colors {
+    padding: 8px;
+    padding-bottom: 0px;
+    background-color: white;
+    border-radius: 3px;
+    overflow: hidden;
+    width: 270px;
+    height: 270px;
+    user-select: none;
+
+    * { .box-sizing; }
+
+    .w2ui-color-tabs {
+        display: flex;
+        background-color: #f7f7f7;
+        height: 34px;
+        margin: 14px -8px 0px -8px;
+        border-top: 1px solid #d6d6d6;
+
+        .w2ui-color-tab {
+            display: inline-block;
+            width: 65px;
+            height: 32px;
+            border: 0;
+            border-top: 2px solid transparent;
+            border-radius: 1px;
+            margin: -1.5px 4px;
+            text-align: center;
+            font-size: 15px;
+            padding-top: 4px;
+            color: #7b7b7b;
+
+            &:hover {
+                background-color: #e1e1e1;
+            }
+
+            &.w2ui-selected {
+                border-top-color: #0175ff;
+            }
+
+            .w2ui-icon {
+                padding-top: 0;
+                margin-top: -2px;
+                width: 30px;
+                height: 21px;
+            }
+        }
+    }
+
+    .w2ui-tab-content.tab-1 {
+        .w2ui-color-row {
+            display: flex;
+            .w2ui-color {
+                cursor: default;
+                text-align: center;
+                display: inline-block;
+                width: 18px;
+                height: 18px;
+                padding: 6px;
+                margin: 1.5px;
+                border: 1px solid transparent;
+                &:hover {
+                    outline: 1px solid #666;
+                    border: 1px solid #fff;
+                }
+                &.w2ui-no-color { // transparent color
+                    border: 1px solid #efefef;
+                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEX/////TgCFoIUYAAAAGUlEQVR42uXHIQEAAACDsNO/NJ4Kn9uC8wsJkAARUrXAjwAAAABJRU5ErkJggg==) 16px 16px;
+                }
+                &.w2ui-selected:before {
+                    content: '\2022';
+                    position: relative;
+                    left: -1px;
+                    top: -8px;
+                    color: white;
+                    font-size: 14px;
+                    text-shadow: 0px 0px 2px #222;
+                }
+                &.w2ui-color-picker {
+                    position: absolute;
+                    right: 11px;
+                    margin-top: 1px;
+                    cursor: pointer;
+                    border: 1px solid #b9b5b5;
+                    width: 28px;
+                    height: 23px;
+                    color: #6e7e9f;
+                    background-color: #e6e3e3;
+                    border-radius: 3px;
+                    &:hover {
+                        color: #444;
+                        outline: 1px solid #888;
+                        border: 1px solid #e0e1e5;
+                        background-color: #e0e1e5;
+                    }
+                    .w2ui-icon {
+                        position: relative;
+                        top: -7px;
+                        left: -2px;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 14px;
+                        height: 20px;
+                    }
+                }
+            }
+        }
+    }
+
+    .w2ui-tab-content.tab-2 {
+        height: 213px;
+        padding: 1px 2px;
+
+        .palette {
+            position: relative;
+            width: 150px;
+            height: 125px;
+            outline: 1px solid #d2d2d2;
+
+            .palette-bg {
+                height: 100%;
+                background-image: linear-gradient(0deg, #000000, rgba(204, 154, 129, 0));
+                pointer-events: none;
+            }
+        }
+
+        .rainbow {
+            position: relative;
+            width: 150px;
+            height: 12px;
+            margin: 12px 0px 0px 0px;
+            background: linear-gradient(90deg, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+        }
+
+        .alpha {
+            position: relative;
+            width: 150px;
+            height: 12px;
+            margin: 14px 0px 0px 0px;
+            background-color: #fff;
+            background-image: linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb),
+                              linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb);
+            background-size: 12px 12px;
+            background-position:0 0, 6px 6px;
+
+            .alpha-bg {
+                height: 100%;
+                background-image: linear-gradient(90deg, rgba(80, 80, 80, 0) 0%, rgba(80, 80, 80, 1) 100%);
+                pointer-events: none;
+            }
+        }
+
+        .value1 {
+            pointer-events: none;
+            position: absolute;
+            top: 0px;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 10px;
+            border: 1px solid #999;
+            outline: 1px solid #bbb;
+            background-color: transparent;
+            box-shadow: 0px 0px 1px white;
+            transform: translateX(-3px) translateY(-3px);
+        }
+
+        .value2 {
+            pointer-events: none;
+            position: absolute;
+            top: -2px;
+            display: inline-block;
+            width: 8px;
+            height: 16px;
+            border-radius: 2px;
+            border: 1px solid rgb(105, 105, 105);
+            background-color: rgb(255, 255, 255);
+            box-shadow: 0px 0px 1px white;
+            transform: translateX(-1px);
+        }
+
+        input.final {
+            font-size: 12px;
+            border-radius: 2px;
+            border: 1px solid #ccc;
+            width: 100px;
+            padding: 4px;
+            color: #333;
+            margin-top: 14px;
+        }
+
+        .color-info {
+            float: right;
+            margin-right: -5px;
+
+            .color-preview-bg {
+                box-shadow: 0 0 1px #c3c3c3;
+                height: 40px;
+                background-color: #fff;
+                background-image: linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb),
+                                  linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb);
+                background-size: 16px 16px;
+                background-position:0 0, 8px 8px;
+                margin-bottom: 10px;
+            }
+
+            .color-preview, .color-original {
+                height: 40px;
+                width: 50px;
+                float: left;
+            }
+
+            .color-part {
+                padding-top: 7px;
+                span {
+                    display:inline-block;
+                    width: 8px;
+                    margin: 2px 1px 2px 5px;
+                    color: #666;
+                }
+                input {
+                    font-size: 12px;
+                    border-radius: 2px;
+                    border: 1px solid #ccc;
+                    width: 30px;
+                    text-align: right;
+                    padding: 4px;
+                    color: #333;
+                }
+                &.opacity {
+                    margin: 6px 0px 0px 8px;
+                    span {
+                        width: 42px;
+                        margin-left: 0px;
+                        margin-top: 5px;
+                    }
+                    input {
+                        width: 38px;
+                        margin-left: 6px;
+                        text-align: center;
+                    }
+                }
+            }
+
+        }
+
+        .w2ui-color-picker {
+            position: relative;
+            left: 5px;
+            top: 9px;
+            display: inline-block;
+            cursor: pointer;
+            border: 1px solid #b9b5b5;
+            width: 28px;
+            height: 24px;
+            color: #6e7e9f;
+            background-color: #e6e3e3;
+            border-radius: 3px;
+            &:hover {
+                color: #444;
+                outline: 1px solid #888;
+                border: 1px solid #e0e1e5;
+                background-color: #e0e1e5;
+            }
+            .w2ui-icon {
+                position: relative;
+                top: -3px;
+                left: 3px;
+                font-size: 14px;
+                height: 20px;
+            }
+        }
+
+    }
+}
+
+/* menu overlay */
+.w2ui-menu-top,
+.w2ui-menu-search {
+    position: sticky;
+    top: 0;
+    background-color: white;
+    border-bottom: 1px dotted silver;
+}
+
+.w2ui-menu-search {
+    padding: 6px 4px;
+    .w2ui-icon {
+        position: absolute;
+        top: 8px;
+        left: 6px;
+        color: #90819c;
+        font-size: 14px;
+    }
+    #menu-search {
+        width: 100%;
+        padding: 5px 5px 5px 25px;
+    }
+}
+
+.w2ui-menu {
+    display: block;
+    color: black;
+    padding: 5px 0px;
+    border-radius: 5px;
+    overflow-x: hidden;
+    cursor: default;
+    user-select: none;
+    -webkit-user-select: none; // stil need -webkit-user-select to make it work on the iPhone
+
+    .w2ui-menu-item {
+        display: flex;
+        align-content: stretch;
+        padding: 8px 5px;
+        user-select: none;
+
+        &.w2ui-even {
+            color: @dropdown-item-even-color;
+            background-color: @dropdown-item-even-background-color;
+        }
+
+        &.w2ui-odd {
+            color: @dropdown-item-odd-color;
+            background-color: @dropdown-item-odd-background-color;
+        }
+
+        &.expanded,
+        &:hover {
+            background-color: #eaeaea;
+        }
+
+        &.w2ui-selected {
+            background-color: #e1e7ff;
+        }
+
+        &.w2ui-disabled {
+            opacity: 0.4;
+            color: inherit;
+            background-color: transparent;
+        }
+
+        .menu-icon {
+            flex: none; // do not grow
+            width: 26px;
+            height: 16px;
+            padding: 0;
+            margin: 0;
+
+            span {
+                width: 18px;
+                font-size: 14px;
+                color: @drop-menu-image-color;
+                display: flex;
+                padding-top: 1px;
+            }
+        }
+
+        .menu-text {
+            flex-grow: 1;
+            white-space: nowrap;
+        }
+
+        .menu-extra {
+            flex: none; // do not grow
+            min-width: 10px;
+            span {
+                border: @menu-node-count-border;
+                border-radius: 20px;
+                width: auto;
+                height: 18px;
+                padding: 2px 7px;
+                margin: 0 0 0 10px;
+                background-color: @menu-node-count-background-color;
+                color: @menu-node-count-color;
+                box-shadow: @menu-node-count-shadow;
+                text-shadow: @menu-node-count-text-shadow;
+            }
+            span.menu-hotkey {
+                border: none;
+                border-radius: 0px;
+                background-color: transparent;
+                color: #888;
+                box-shadow: none;
+                text-shadow: none;
+            }
+            span.menu-help {
+                color: #838383;
+                background-color: #f7f7f7;
+                border-color: #d1d1d1;
+                box-shadow: none;
+                padding: 0 4px 0 5px;
+                border-radius: 15px;
+                position: relative;
+                margin-top: -1px;
+                display: block;
+                height: 20px;
+                width: 24px;
+                line-height: 1.3;
+                text-align: center;
+                user-select: none;
+                opacity: 0;
+                font-family: "Courier New";
+                font-size: 15px;
+                &:hover {
+                    background-color: #edfaf3;
+                    border-color: #b3cfc1;
+                    color: #199533;
+                }
+            }
+            span.menu-remove {
+                background-color: transparent;
+                border-color: transparent;
+                box-shadow: none;
+                padding: 0 4px 0 5px;
+                border-radius: 3px;
+                position: relative;
+                margin-top: -1px;
+                display: block;
+                height: 20px;
+                width: 20px;
+                opacity: 0;
+                line-height: 1.3;
+                text-align: center;
+                user-select: none;
+                &:hover {
+                    background-color: #f9e7e7;
+                    border: 1px solid #f1c0c0;
+                }
+                &:active {
+                    background-color: #ffd1d1;
+                }
+            }
+        }
+
+        &:hover {
+            .menu-extra span.menu-remove {
+                opacity: 1;
+            }
+            .menu-extra span.menu-help {
+                opacity: 1;
+            }
+        }
+    }
+
+    .w2ui-menu-divider {
+        padding: 5px;
+        .line {
+            border-top: 1px dotted silver;
+        }
+
+        &.has-text {
+            height: 26px;
+            background-color: #fafafa;
+            border-top: 1px solid #f2f2f2;
+            border-bottom: 1px solid #f2f2f2;
+            text-align: center;
+            .line {
+                display: block;
+                margin-top: 7px;
+            }
+            .text {
+                display: inline-block;
+                position: relative;
+                top: -10px;
+                background-color: #fafafa;
+                padding: 0px 7px;
+                color: darkgrey;
+            }
+        }
+    }
+
+    .w2ui-no-items {
+        padding: 5px 15px;
+        text-align: center;
+        color: gray;
+
+        .w2ui-spinner {
+            position: relative;
+            left: -2px;
+            margin-bottom: -5px;
+            width: 18px;
+            height: 18px;
+        }
+    }
+
+    .w2ui-sub-menu-box {
+        background-color: #fafafd;
+        border-top: 1px solid #d6e2e6;
+        border-bottom: 1px solid #d6e2e6;
+        padding: 0 3px;
+    }
+
+    .has-sub-menu {
+        .menu-extra span {
+            position: relative; // needed for :after to be absolute
+            border-color: transparent;
+            background-color: transparent;
+            box-shadow: none;
+            padding: 0px 6px;
+            border-radius: 0px;
+            margin-left: 5px;
+            &:after {
+                content: "";
+                position: absolute;
+                border-left: 5px solid #808080;
+                border-top: 5px solid transparent;
+                border-bottom: 5px solid transparent;
+                transform: rotateZ(0deg);
+                pointer-events: none;
+                margin-left: -2px;
+                margin-top: 4px;
+            }
+            &:hover {
+                border-color: transparent;
+                background-color: transparent;
+            }
+        }
+    }
+}
+
+// dark menu
+.w2ui-overlay .w2ui-overlay-body.w2ui-dark {
+    .w2ui-menu-item {
+        color: #d9d9d9;
+        &.expanded,
+        &:hover {
+            background-color: #595d67;
+        }
+        &.w2ui-selected {
+            color: white;
+            background-color: #4bb8ff;
+            text-shadow: 0px 1px 1px #66686d;
+        }
+        &.w2ui-disabled {
+            color: #a3a3a3;
+            background-color: inherit;
+        }
+        .menu-icon span {
+            color: inherit;
+        }
+        .menu-extra span {
+            border: 1px solid transparent;
+            color: #d9d9d9;
+            text-shadow: 0px 0px 1px #141414;
+        }
+    }
+    .w2ui-sub-menu-box {
+        background-color: #696f73;
+        border-top: 1px solid #434444;
+        border-bottom: 1px solid #434444;
+    }
+    .w2ui-menu .has-sub-menu .menu-extra span:after {
+        border-left: 5px solid #eaeaea;
+    }
+}
+
+/* date overlay */
+.w2ui-calendar {
+    margin: 0px;
+    line-height: 1.1;
+    user-select: none;
+
+    &.w2ui-overlay-body {
+        border: 1px solid #cccace;
+        color: #3c3c3c;
+        text-shadow: none;
+        background-color: #fff;
+        box-shadow: 0 0 10px #00000008;
+    }
+
+    .w2ui-cal-title, .w2ui-time-title {
+        margin: 0px;
+        padding: 7px 2px;
+        background-color: #fafafa;
+        border-top: 1px solid #fefefe;
+        border-bottom:  1px solid #ddd;
+        color: #555;
+        text-align: center;
+        text-shadow: 1px 1px 1px #eee;
+        font-size: 16px;
+
+        cursor: pointer;
+        .arrow-down {
+            position: relative;
+            top: -3px;
+            left: 5px;
+            opacity: 0.6;
+        }
+    }
+
+    .w2ui-cal-previous,
+    .w2ui-cal-next {
+        width: 30px;
+        height: 30px;
+        color: #666;
+        border: 1px solid transparent;
+        border-radius: 3px;
+        padding: 7px 5px;
+        margin: -4px 1px 0px 1px;
+        cursor: default;
+        &:hover {
+            color: black;
+            border: 1px solid #f5f5f5;
+            background-color: #f9f7f7;
+        }
+        &:active {
+            color: black;
+            background-color: #f2f1f4;
+            border: 1px solid #e6dbfb;
+        }
+        & > div {
+            position: absolute;
+            border-left: 4px solid #888;
+            border-top: 4px solid #888;
+            border-right: 4px solid transparent;
+            border-bottom: 4px solid transparent;
+            width: 0px;
+            height: 0px;
+            padding: 0px;
+            margin: 3px 0px 0px 0px;
+        }
+    }
+
+    .w2ui-cal-previous {
+        float: left;
+        & > div {
+            .transform-rotate(-45deg);
+            margin-left: 6px;
+        }
+    }
+
+    .w2ui-cal-next {
+        float: right;
+        & > div {
+            .transform-rotate(135deg);
+            margin-left: 2px;
+            margin-right: 2px;
+        }
+    }
+
+    .w2ui-cal-jump {
+        display: flex;
+        background-color: #fdfdfd;
+        .w2ui-jump-month,
+        .w2ui-jump-year {
+            cursor: default;
+            text-align: center;
+            border: 1px solid transparent;
+            border-radius: 3px;
+            font-size: 14px;
+        }
+        #w2ui-jump-month {
+            width: 186px;
+            padding: 10px 5px 4px 3px;
+            border-right: 1px solid #efefef;
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-template-rows: repeat(4, 52px);
+            grid-gap: 4px;
+            .w2ui-jump-month {
+                padding: 15px 0 0 0;
+            }
+        }
+        #w2ui-jump-year {
+            width: 90px;
+            height: 240px;
+            overflow-x: hidden;
+            overflow-y: auto;
+            margin: 0 2px;
+            display: flex;
+            flex-wrap: wrap;
+            .w2ui-jump-year {
+                width: 95%;
+                height: 30px;
+                padding: 5px 0;
+                margin: 1px 0;
+            }
+        }
+        .w2ui-jump-month:hover, .w2ui-jump-year:hover {
+            color: black;
+            border: 1px solid #f5f5f5;
+            background-color: #f9f7f7;
+        }
+        .w2ui-jump-month.w2ui-selected, .w2ui-jump-year.w2ui-selected {
+            color: black;
+            background-color: #f2f1f4;
+            border: 1px solid #e6dbfb;
+        }
+    }
+
+    .w2ui-cal-now {
+        cursor: default;
+        padding: 3px;
+        text-align: center;
+        background-color: #f4f4f4;
+        margin: 5px;
+        border: 1px solid #e5e5e5;
+        border-radius: 4px;
+        &:hover {
+            color: #28759e;
+            border: 1px solid #c3d6df;
+        }
+    }
+
+    .w2ui-cal-days {
+        width: 280px;
+        height: 240px;
+        padding: 2px;
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+
+
+
+        .w2ui-day {
+            border: 1px solid #fff;
+            border-radius: 3px;
+            color: black;
+            background-color: #f7f7f7;
+            padding: 8px 0 0 0;
+            cursor: default;
+            text-align: center;
+            &.w2ui-saturday,
+            &.w2ui-sunday {
+                border: 1px solid #fff;
+                color: #c8493b;
+                background-color: #f7f7f7;
+            }
+            &.w2ui-today {
+                background-color: #e2f7cd;
+            }
+            &:hover {
+                background-color: #f2f1f4;
+                border: 1px solid #e6dbfb;
+            }
+            &:active {
+                background-color: #eeebf3;
+                border: 1px solid #cec2e5;
+            }
+            &.w2ui-selected {
+                border: 1px solid #8cb067;
+            }
+            &.w2ui-weekday {
+                text-align: center;
+                background-color: #fff;
+                color: #a99cc2;
+                &:hover {
+                    border: 1px solid #fff;
+                    background-color: #fff;
+                }
+            }
+            &.outside {
+                color: #b5b5b5;
+                background-color: #fff;
+            }
+            &.w2ui-blocked {
+                color: #555;
+                background-color: #fff;
+                border: 1px solid #fff;
+                &:after {
+                    content: " ";
+                        position: absolute;
+                        color: #b3b3b378;
+                        font-size: 27px;
+                        padding: 0px;
+                        font-family: verdana;
+                        transform: translate(-15px, 15px) rotate(-36deg);
+                        border-top: 1px solid #c9c2c2;
+                        width: 24px;
+                        transform-origin: top left;
+                }
+            }
+        }
+    }
+}
+
+/* time overlay */
+.w2ui-cal-time {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    background-color: #ffffff;;
+    cursor: default;
+
+    .w2ui-cal-column {
+        width: 90px;
+        display: flex;
+        flex-wrap: wrap;
+        padding: 4px;
+
+        &:nth-child(even) {
+            background-color: #fafafa;
+        }
+
+        span {
+            width: 100%;
+            padding: 8px;
+            margin: 1px;
+            text-align: center;
+            border: 1px solid transparent;
+            border-radius: 2px;
+            white-space: nowrap;
+            &:hover {
+                background-color: #f2f1f4;
+                border: 1px solid #e6dbfb;
+            }
+            &:active {
+                background-color: #eeebf3;
+                border: 1px solid #cec2e5;
+            }
+            &.w2ui-blocked {
+                pointer-events: none;
+                text-decoration: line-through;
+                color: silver;
+            }
+        }
+    }
+}