datafolder 1.0.0

package/static/w2ui/src/less/src/common.less

@@ -0,0 +1,541 @@
+/*************************************************
+* --- Reset (used for all w2ui widgets)
+* --- The reset is needed to coexist with other CSS
+* --- on the same page (for example bootstrap)
+*/
+
+.w2ui-reset {
+    .box-sizing;
+    font-family: @main-font-family;
+    font-size: 12px;
+     * {
+        line-height: 100%;
+        .box-sizing();
+        margin: 0px;
+        padding: 0px;
+        // do not include any font-* properties
+    }
+    table {
+        max-width: none;
+        background-color: transparent;
+        border-collapse: separate;
+        border-spacing: 0;
+        border: none;
+    }
+    table tr th, table tr td {
+        font-family: @main-font-family;
+        font-size: 12px;
+    }
+    input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]),
+    select, textarea {
+        display: inline-block;
+        width: auto;
+        height: auto;
+        vertical-align: baseline;
+        padding: 6px;
+        margin: 0;
+        font-size: 12px;
+        background-color: @input-background-color;
+        border: @input-border;
+        &:focus {
+            background-color: white;
+        }
+    }
+    select {
+        padding: 5px;
+        height: 26px;
+        font-size: 12px;
+    }
+}
+
+.w2ui-centered {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 10px;
+}
+
+.w2ui-disabled,
+.w2ui-readonly {
+    background-color: #f1f1f1;
+    color: #777;
+}
+
+input.w2ui-focus:not(button),
+textarea.w2ui-focus,
+select.w2ui-focus,
+div[contenteditable].w2ui-focus {
+    outline-style: auto;
+    outline-color: @input-focus-outline-color;
+}
+
+
+/*************************************************
+* ---- Input Controls ----
+*/
+
+input[type=button].w2ui-input {
+    .sys-button;
+    &:hover { .sys-button-hover; }
+    &:active { .sys-button-active; }
+}
+
+select.w2ui-input:focus,
+div.w2ui-input:focus {
+    outline-color: @input-focus-outline-color;
+}
+
+input:not([type=button]):not([type=submit]).w2ui-input,
+textarea.w2ui-input {
+    padding: 6px;
+    border: @input-border;
+    border-radius: 3px;
+    color: @input-color;
+    background-color: @input-background-color;
+    line-height: normal;
+    &:focus {
+        outline-color: @input-focus-outline-color;
+        background-color: white;
+    }
+    &:disabled, &[readonly] {
+        background-color: #f1f1f1;
+        color: #777;
+    }
+}
+
+select.w2ui-input {
+    color: @input-color;
+    padding: 0px 20px 0px 7px;
+    line-height: 1.8;
+    border-radius: 3px;
+    border: @input-border;
+    -webkit-appearance: none;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAALCAQAAACnzwd+AAAAcklEQVR4AcXMsQFBQQDG4P9tAgC0gJYRQJZgKQMwCqCku6vVAAAA+NJHP4KHOk0aV2pRw61n4BBmyOxKQ8I4ehZeuhd3HTx6DQEGZ7sBfr2OOOOj3Yi43kMKs9sZknofOexqZ8npMygwWZTX51CipP+YA1OiZJbYYg9lAAAAAElFTkSuQmCC'),
+                      linear-gradient(to bottom, #f8f8f8 20%, #f8f8f8 50%, #f8f8f8 52%, #f8f8f8 100%);
+    background-size: 17px 6px, 100% 100%;
+    background-position: right center, left top;
+    background-repeat: no-repeat, no-repeat;
+}
+
+.w2ui-icon-expand {
+    &:before {
+        position: relative;
+        top: 1px;
+        left: 1px;
+        content: ' ';
+        width: 5px;
+        height: 5px;
+        border: 2px solid rgba(150, 150, 150, 0.8);
+        border-bottom: 0;
+        border-left: 0;
+        transform: rotateZ(45deg);
+    }
+}
+
+.w2ui-icon-collapse {
+    &:before {
+        position: relative;
+        top: -1px;
+        left: 3px;
+        content: ' ';
+        width: 5px;
+        height: 5px;
+        border: 2px solid rgba(150, 150, 150, 0.8);
+        border-bottom: 0;
+        border-left: 0;
+        transform: rotateZ(135deg);
+    }
+}
+
+/* On/Off switch */
+
+input[type="checkbox"].w2ui-toggle {
+    position: absolute;
+    opacity: 0;
+    width: 46px;
+    height: 22px;
+    padding: 0px;
+    margin: 0px;
+    margin-left: 2px;
+    &:focus {
+        box-shadow: 0px 0px 1px 2px #a8cfff;
+    }
+    & + div {
+        display: inline-block;
+        width: 46px;
+        height: 22px;
+        border: 1px solid #bbb;
+        border-radius: 30px;
+        background-color: #eee;
+        transition-duration: .3s;
+        transition-property: background-color, box-shadow;
+        box-shadow: inset 0 0 0 0px rgba(0, 0, 0, 0.4);
+        margin-left: 2px;
+        margin-top: 3px;
+    }
+    &.w2ui-small {
+        width: 30px;
+        height: 23px;
+    }
+    &.w2ui-small + div {
+        width: 30px;
+        height: 16px;
+        margin-top: 5px;
+    }
+
+    &:focus + div {
+        box-shadow: 0px 0px 3px 2px #91baed;
+    }
+
+    &:disabled + div {
+        opacity: 0.3;
+    }
+
+    /* Knob */
+    & + div > div {
+        float: left;
+        width: 22px;
+        height: 22px;
+        border-radius: inherit;
+        background: #f5f5f5;
+        transition-duration: 0.3s;
+        transition-property: transform, background-color, box-shadow;
+        box-shadow: 0px 0px 1px rgba(50, 50, 50, 1), 0 0 0 1px rgba(200, 200, 200, 0.6);
+        pointer-events: none;
+        margin-top: -1px;
+        margin-left: -1px;
+    }
+
+    &.w2ui-small + div > div {
+        width: 16px;
+        height: 16px;
+    }
+
+    &:checked + div > div {
+        transform: translate3d(24px, 0, 0);
+        background-color: #ffffff;
+    }
+    &.w2ui-small:checked + div > div {
+        transform: translate3d(14px, 0, 0);
+    }
+
+    &:focus {
+        outline: none;
+    }
+
+    /*  Blue */
+    &:checked + div {
+        border: 1px solid #206FAD;
+        box-shadow: inset 0 0 0 12px #35A6EB;
+    }
+
+    &:checked:focus + div {
+        box-shadow: 0px 0px 3px 2px #91baed, inset 0 0 0 12px #35A6EB;
+    }
+
+    &:checked + div > div {
+        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px #206FAD;
+    }
+
+    /* Green */
+    &.green:checked + div {
+        border: 1px solid rgba(0, 162, 63,1);
+        box-shadow: inset 0 0 0 12px #54B350;
+    }
+
+    &.green:checked:focus + div {
+        box-shadow: 0px 0px 3px 2px #91baed, inset 0 0 0 12px #54B350;
+    }
+
+    &.green:checked + div > div {
+        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 162, 63, 1);
+    }
+}
+
+input[type=range] {
+    height: 5px;
+    -webkit-appearance: none;
+    margin: 10px 0 0 0;
+    width: 120px;
+    border: none !important;
+    background-color: transparent !important;
+    &:focus {
+        outline: none !important;
+    }
+    &::-webkit-slider-runnable-track {
+        width: 100%;
+        height: 4px;
+        cursor: pointer;
+        box-shadow: 0px 0px 0px #000000;
+        background: #E8E8E8;
+        border-radius: 0px;
+        border: 0px solid #000000;
+    }
+    &::-webkit-slider-thumb {
+        box-shadow: 0px 0px 0px #000000;
+        border: 1px solid #2290D9;
+        height: 13px;
+        width: 13px;
+        border-radius: 25px;
+        background: #D0DBF2;
+        cursor: pointer;
+        -webkit-appearance: none;
+        margin-top: -5px;
+    }
+    &:focus::-webkit-slider-runnable-track {
+        background: #E8E8E8;
+    }
+    &::-moz-range-track {
+        width: 100%;
+        height: 4px;
+        cursor: pointer;
+        box-shadow: 0px 0px 0px #000000;
+        background: #E8E8E8;
+        border-radius: 0px;
+        border: 0px solid #000000;
+    }
+    &::-moz-range-thumb {
+        box-shadow: 0px 0px 0px #000000;
+        border: 1px solid #2290D9;
+        height: 13px;
+        width: 13px;
+        border-radius: 25px;
+        background: #D0DBF2;
+        cursor: pointer;
+    }
+    &::-ms-track {
+        width: 100%;
+        height: 4px;
+        cursor: pointer;
+        background: transparent;
+        border-color: transparent;
+        color: transparent;
+    }
+    &::-ms-fill-lower {
+        background: #E8E8E8;
+        border: 0px solid #000000;
+        border-radius: 0px;
+        box-shadow: 0px 0px 0px #000000;
+    }
+    &::-ms-fill-upper {
+        background: #E8E8E8;
+        border: 0px solid #000000;
+        border-radius: 0px;
+        box-shadow: 0px 0px 0px #000000;
+    }
+    &::-ms-thumb {
+        margin-top: 1px;
+        box-shadow: 0px 0px 0px #000000;
+        border: 1px solid #2290D9;
+        height: 13px;
+        width: 13px;
+        border-radius: 25px;
+        background: #D0DBF2;
+        cursor: pointer;
+    }
+    &:focus::-ms-fill-lower {
+        background: #E8E8E8;
+    }
+    &:focus::-ms-fill-upper {
+        background: #E8E8E8;
+    }
+}
+
+/*************************************************
+* ---- Common Classes ----
+*/
+
+.w2ui-marker {
+    background-color: rgba(214, 161, 252, 50%);
+}
+
+.w2ui-spinner {
+    display: inline-block;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-image: @image-spinner;
+}
+
+/* common icons */
+
+.w2ui-icon {
+    background-repeat: no-repeat;
+    height: 16px;
+    width: 16px;
+    overflow: hidden;
+    margin: 2px 2px;
+    display: inline-block;
+
+    &.icon-folder {
+        .background-image(@image-folder, no-repeat, center);
+    }
+
+    &.icon-page {
+        .background-image(@image-page, no-repeat, center);
+    }
+}
+
+/*************************************************
+* ---- Locking portion of the screen (in grid, form, layout)
+*/
+
+.w2ui-lock {
+    display: none;
+    position: absolute;
+    z-index: 1400;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    .opacity(0.15);
+    background-color: @lock-background-color;
+}
+
+.w2ui-lock-msg {
+    display: none;
+    position: absolute;
+    z-index: 1400;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    min-width: 100px;
+    max-width: 95%;
+    padding: 30px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: 13px;
+    font-family: @main-font-family;
+    opacity: 0.8;
+    background-color: @lock-msg-background-color;
+    color: @lock-msg-color;
+    text-align: center;
+    border-radius: 5px;
+    border: @lock-msg-border;
+    .w2ui-spinner {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        margin: -3px 8px -7px -10px;
+    }
+}
+
+/*************************************************
+* ---- Scroll contet, used in toolbar and tabs ----
+*/
+
+.w2ui-scroll-wrapper {
+    overflow: hidden;
+}
+
+.w2ui-scroll-left,
+.w2ui-scroll-right {
+    top: 0;
+    width: 18px;
+    height: 100%;
+    cursor: default;
+    z-index: 10;
+    display: none;
+    position: absolute;
+
+    &:hover {
+        background-color: @overflow-hover-background-color;
+    }
+}
+
+.w2ui-scroll-left {
+    left: 0;
+    box-shadow: 0px 0px 7px #5F5F5F;
+    background: @overflow-background-color @image-less center center no-repeat;
+    background-size: 15px 12px;
+}
+
+.w2ui-scroll-right {
+    right: 0;
+    box-shadow: 0px 0px 7px #5F5F5F;
+    background: @overflow-background-color @image-more center center no-repeat;
+    background-size: 15px 13px;
+}
+
+/*************************************
+* ---- Notification message ----
+*/
+
+#w2ui-notify {
+    pointer-events: none; // it should not be blocking events unless it is on the message
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    left: 0px;
+    right: 0px;
+    bottom: 15px;
+    z-index: 10000;
+    overflow: hidden;
+    > div {
+        pointer-events: all;
+        position: relative;
+        background-color: #292828ba;
+        color: #ffffff;
+        padding: 8px 44px 8px 16px;
+        border-radius: 4px;
+        box-shadow: 3px 3px 10px #9c9c9c;
+        max-height: 76px;
+        min-width: 100px;
+        max-width: 800px;
+        font-size: 16px;
+        text-shadow: 1px 0 0 black;
+
+        a {
+            color: #6cd0e8;
+            text-decoration: none;
+            cursor: pointer;
+        }
+        a:hover {
+            color: #a2f0ff;
+        }
+       span.w2ui-notify-close {
+            padding: 6px 6px;
+            border-radius: 3px;
+            font-size: 13px;
+            color: #c3c3c3;
+            position: absolute;
+            right: 5px;
+            top: 3px;
+            &:hover {
+                background-color: #807e7e;
+                color: #ffffff;
+            }
+
+        }
+        &.w2ui-notify-error {
+            text-shadow: none;
+            background-color: rgba(255, 0, 0, 0.8) ;
+            .w2ui-notify-close {
+                color: #ffffff ;
+                &:hover {
+                    background-color: #fcadad;
+                    color: rgba(255, 0, 0, 0.8);
+                }
+            }
+        }
+        &.w2ui-notify-success {
+            text-shadow: none;
+            background-color: rgba(21,192,70,.8) ;
+            .w2ui-notify-close {
+                color: #ffffff ;
+                &:hover {
+                    background-color: #7ae097;
+                    color: rgba(21,192,70,.8);
+                }
+            }
+        }
+    }
+}