1 files changed, 178 insertions, 0 deletions
diff --git a/styles/_window.scss b/styles/_window.scss
new file mode 100644
index 0000000..4f4a6a5
--- /dev/null
+++ b/styles/_window.scss
@@ -0,0 +1,178 @@
+.window {
+  position: absolute;
+  border-bottom-left-radius: .5em;
+  border-bottom-right-radius: .5em;
+  transition-property: opacity, visibility, transform, width, height, top, left;
+  transition-duration: .3s;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+
+  &.moving {
+    transition: none
+  }
+
+  &--popup {
+    padding: 1em;
+    background: white;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 21rem;
+    margin: 0 auto;
+    border-top-left-radius: .5em;
+    border-top-right-radius: .5em;
+  }
+
+  &:not(.window--popup) {
+    top: 10vh;
+    left: 10vw;
+    height: 80vh;
+    width: 80vw;
+  }
+
+  &__title {
+    position: absolute;
+    background-color: rgb(151, 215, 200, .9);
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2em;
+    text-align: center;
+    padding: .5em;
+    width: 100%;
+    border-bottom: 1px solid #bbb;
+    border-top: 1px solid rgba(255,255,255,.7);
+    border-top-left-radius: .5em;
+    border-top-right-radius: .5em;
+  }
+
+  &--popup > .window__title {
+    top: -2em;
+  }
+
+  &__content--popup {
+    text-align: center;
+    padding: 1em;
+  }
+
+  &__title-buttons {
+    position: absolute;
+    top: .5em;
+    right: .5em;
+    cursor: pointer;
+    z-index: 1;
+
+    & > span {
+      margin-left: .25em;
+      padding: .25em;
+      transition: .3s background;
+      border-radius: .5em;
+
+      &:hover {
+        background-color: rgba(0,0,0,.1);
+      }
+    }
+  }
+
+  &__content {
+    position: absolute;
+    overflow: hidden;
+    background-color: #fff;
+    top: 2em;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 1em;
+  }
+
+  &--with-submenu {
+    .window__content {
+      top: 4em;
+    }
+  }
+
+  .window__submenu {
+    display: block;
+    margin: -1em -1em 1em;
+    height: 2em;
+    background: #eee;
+
+    & > div {
+      cursor: pointer;
+      display: inline-block;
+      padding: .5em;
+      transition: .3s background;
+
+      &:hover {
+        background-color: #ddd;
+      }
+    }
+  }
+
+  &__scroll {
+    height: 100%;
+    overflow: auto;
+    margin: -1em -1em 0;
+  }
+
+  &__buttons--popup {
+    padding: 0 .5em 1em;
+    text-align: center;
+  }
+
+  &__button {
+    color: #333;
+    margin: 1em 1em 0;
+    font-size: 1em;
+    padding: .5em 1em;
+    background-color: rgb(151, 215, 200, .3);
+    border-left: 0;
+    border-right: 0;
+    border-top: 1px solid rgb(151, 215, 200, .1);
+    border-bottom: 1px solid rgb(151, 215, 200, .5);
+    border-radius: .5em;
+    cursor: pointer;
+    transition: .3s background-color;
+
+    &:hover {
+      background-color: rgb(151, 215, 200, .5);
+    }
+  }
+
+  &--error {
+    background: #ffefef;
+
+    & > .window__title {
+      background: rgba(255, 131, 131, 0.9);
+    }
+
+    .window__button {
+      background: rgba(255, 131, 131, 0.3);
+      border-top: 1px solid rgba(255, 131, 131, 0.1);
+      border-bottom: 1px solid rgba(255, 131, 131, 0.5);
+
+      &:hover {
+        background: rgba(255, 131, 131, 0.5)
+      }
+    }
+  }
+
+  &.hidden {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-100vh);
+    z-index: -1;
+  }
+
+  &.maximized {
+    top:0!important;
+    right: 0!important;
+    bottom: 0!important;
+    left: 0!important;
+    width: 100%;
+    height: 100%;
+
+    & > .window__content {
+      top: 0;
+    }
+  }
+}