split scss into partials

1 files changed, 191 insertions, 0 deletions

diff --git a/styles/global/_window.scss b/styles/global/_window.scss
new file mode 100644
index 0000000..08ddfaf
--- /dev/null
+++ b/styles/global/_window.scss
@@ -0,0 +1,191 @@
+.window {
+  position: absolute;
+  transition-property: opacity, visibility, transform, width, height, top, left;
+  transition-duration: .3s;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  border-radius: .5em;
+  color: var(--color-text);
+
+  &.moving {
+    transition: none
+  }
+
+  &--popup {
+    padding: 1em;
+    background: var(--color-window-popup);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 21rem;
+    margin: 0 auto;
+
+    &:not(.window--popup-with-title) {
+      border-top-left-radius: .5em;
+      border-top-right-radius: .5em;
+    }
+  }
+
+  &:not(.window--popup) {
+    height: 100%;
+    width: 100%;
+  }
+    // top: 50%;
+    // left: 50%;
+
+    // @media (min-width: 80em) {
+      // width: 64em;
+      // left: calc((100vw - 64em) / 2)
+    // }
+
+    // @media (min-height: 80em) {
+      // width: 64em;
+      // left: calc((100vh - 64em) / 2)
+    // }
+  // }
+
+  &__title {
+    position: absolute;
+    background-color: var(--color-glass);
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2em;
+    text-align: center;
+    padding: .5em;
+    width: 100%;
+    border-bottom: 1px solid var(--color-window-border-bottom);
+    border-top: 1px solid var(--color-window-border-top);
+    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;
+
+    & > span {
+      padding: .5em;
+      transition: .3s background, .3s color;
+      border-radius: .5em;
+      color: var(--color-window-buttons);
+      font-size: 0.8em;
+
+      &:hover {
+        background-color: var(--color-selected);
+        color: var(--color-window-buttons-alt);
+      }
+    }
+  }
+
+  &__content {
+    position: absolute;
+    overflow: hidden;
+    background-color: var(--color-window-content);
+    top: 2em;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 1em;
+    border-bottom-left-radius: .5em;
+    border-bottom-right-radius: .5em;
+  }
+
+  &--with-submenu {
+    .window__content {
+      top: 4em;
+    }
+  }
+
+  .window__submenu {
+    display: block;
+    margin: -1em -1em 1em;
+    height: 2em;
+    background: var(--color-window-menu);
+
+    & > div {
+      // cursor: pointer;
+      display: inline-block;
+      padding: .5em;
+      transition: .3s background;
+
+      &:hover {
+        background-color: var(--color-window-menu-alt);
+      }
+    }
+  }
+
+  &__scroll {
+    height: 100%;
+    overflow: auto;
+    margin: -1em -1em 0;
+  }
+
+  &__buttons--popup {
+    padding: 0 .5em 1em;
+    text-align: center;
+  }
+
+  &__button {
+    color: var(--color-text);
+    margin: 1em 1em 0;
+    font-size: 1em;
+    padding: .5em 1em;
+    background-color: var(--color-button);
+    border-left: 0;
+    border-right: 0;
+    border-top: 1px solid var(--color-button-border);
+    border-bottom: 1px solid var(--color-button-border);
+    border-radius: .5em;
+    // cursor: pointer;
+    transition: .3s background-color;
+
+    &:hover {
+      background-color:  var(--color-button-alt);
+    }
+  }
+
+  &--error {
+    background: var(--color-popup-error-bg);
+
+    .window__button {
+      background-color: var(--color-popup-error-button);
+      border-top: 1px solid var(--color-popup-error-border);
+      border-bottom: 1px solid  var(--color-popup-error-border);
+
+      &:hover {
+        background-color: var(--color-popup-error-button-alt);
+      }
+    }
+  }
+
+  &.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%!important;
+    height: 100%!important;
+
+    & > .window__content {
+      top: 0;
+    }
+  }
+}