3.0 source code

OfficeWeb/apps/common/main/resources/less/window.less

@@ -0,0 +1,259 @@
+/**
+ *      Window.less
+ *
+ *      Describes styles for base class 'Window'
+ *
+ *      Created by Maxim Kadushkin on 24 January 2014
+ *      Copyright (c) 2014 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+.modals-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    background-color: rgb(0,0,0);
+    z-index: @zindex-modal - 1;
+}
+
+.asc-window {
+    min-height: 50px;
+    min-width: 150px;
+    box-sizing: border-box;
+    z-index: @zindex-modal-background;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    border-radius: 5px;
+    background-color: @body-bg;
+    border: solid 1px @gray-dark;
+
+    left: 0;
+    top: 0;
+
+    position: fixed;
+
+    .backimage {
+        .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+    }
+
+    > .header {
+        height: 34px;
+        border-radius: 5px 5px 0 0;
+        position: absolute;
+        padding: 5px 6px 6px;
+        left: 0;
+        right: 0;
+        top: 0;
+        text-overflow: ellipsis;
+
+        color: @gray-darker;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 700;
+        text-shadow: 1px 1px #f8f8f8;
+        vertical-align: bottom;
+        line-height: 26px;
+
+        .user-select;
+
+        background: @gray-lighter;
+        border-bottom: solid 1px @gray-dark;
+
+        cursor: move;
+
+        .tool {
+            float: right;
+            width: 16px;
+            height: 16px;
+            cursor: pointer;
+            overflow: hidden;
+            padding: 0px;
+            margin: 4px 3px 0px 0px;
+
+            &.close {
+                .backimage;
+                background-position: @but-close-offset-x @but-close-offset-y;
+
+                &:hover {
+                    background-position: @but-close-offset-x @but-close-offset-y - 16px;
+                }
+
+                &.disabled {
+                    background-position: @but-close-offset-x @but-close-offset-y - 32px;
+                    cursor: default;
+                }
+            }
+        }
+    }
+
+    > .body {
+        .user-select;
+        border-radius: 0 0 5px 5px;
+        position: absolute;
+        top: 34px;
+        width: 100%;
+        background-color: @body-bg;
+    }
+
+    &.modal {
+        z-index: @zindex-modal;
+    }
+
+    &.dethrone {
+        z-index: @zindex-modal - 2;
+    }
+
+    &.alert {
+        min-height: 90px;
+        min-width: 230px;
+
+        .body {
+            .info-box {
+                padding: 20px 20px 20px 10px;
+                height: 50px;
+
+                .icon {
+                    float: left;
+                    width: 35px;
+                    height: 35px;
+                    margin: 0 0 0 10px;
+                    background-repeat: no-repeat;
+
+                    &.warn {
+                        .backimage;
+                        height: 32px;
+                        background-position: @alerts-offset-x @alerts-offset-y - 105px;
+                    }
+
+                    &.error {
+                        .backimage;
+                        background-position: @alerts-offset-x @alerts-offset-y - 0;
+                    }
+
+                    &.info {
+                        .backimage;
+                        background-position: @alerts-offset-x @alerts-offset-y - 35px;
+                    }
+
+                    &.confirm {
+                        .backimage;
+                        background-position: @alerts-offset-x @alerts-offset-y - 70px;
+                    }
+                }
+
+                .text {
+                    padding-left: 70px;
+
+                    span {
+                        font-size: 12px;
+                        white-space: nowrap;
+
+                        a {
+                            text-decoration: underline;
+                            color: @gray-deep;
+
+                            &:focus, &:hover {
+                                color: @gray-deep;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .footer {
+                height: 37px;
+                width: 100%;
+                bottom: 0;
+                text-align: center;
+                padding: 7px 0 0 0;
+
+                button {
+                    &:not(:first-child) {
+                        margin-left: 10px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.modal-dlg {
+    .body {
+        height: auto;
+        padding: 15px;
+
+        .input-row {
+            height: @input-height-base;
+
+            label:not(.checkbox-indeterminate)  {
+                line-height: @input-height-base;
+            }
+
+            div {
+                display: inline-block;
+            }
+        }
+    }
+
+    .footer {
+        padding-top: 15px;
+
+        &.center {
+            text-align: center;
+        }
+
+        &.right {
+            text-align: right;
+        }
+    }
+}
+
+// CopyWarningDialog
+
+.copy-warning {
+    .body {
+        padding: 15px 0;
+
+        & > div {
+            width: 100%;
+            padding: 0 20px;
+        }
+
+        .box {
+            text-align: center;
+            padding-bottom: 15px;
+        }
+        .message{
+            text-align: justify;
+        }
+        .hotkeys {
+            padding-top: 5px;
+
+            > div {
+                display: inline-block;
+            }
+
+            > div:first-child {
+                margin-right: 35px;
+            }
+
+            > div:last-child {
+                margin-left: 35px;
+            }
+
+            .hotkey {
+                font-size: 32px;
+            }
+
+            .message {
+                text-align: center;
+            }
+        }
+
+        .footer {
+            padding: 20px;
+        }
+    }
+}