split scss into partials

3 files changed, 333 insertions, 0 deletions

diff --git a/styles/global/_reset.scss b/styles/global/_reset.scss
new file mode 100755
index 0000000..0dc1326
--- /dev/null
+++ b/styles/global/_reset.scss
@@ -0,0 +1,56 @@
+* {
+  box-sizing: border-box;
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+  moz-user-select: none;
+  webkit-user-select: none;
+  ms-user-select: none;
+  user-select: none;
+  cursor: auto;
+}
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+html{
+  min-width: 320px;
+  background: white;
+}
diff --git a/styles/global/_themes.scss b/styles/global/_themes.scss
new file mode 100644
index 0000000..9319fa5
--- /dev/null
+++ b/styles/global/_themes.scss
@@ -0,0 +1,86 @@
+.green {
+  --color-bg: #50a3a2;
+  --color-bg-alt: #53e3a6;
+  --color-text: #333;
+  --color-text-alt: #111;
+  --color-decor: #ccc;
+  --color-glass: rgb(151, 215, 200, .9);
+  --color-glass-alt: rgba(255, 255, 255, 0.5);
+  --color-error: #a00;
+  --color-success: #0a0;
+  --color-link: #006dd0;
+  --color-selected: rgba(0,0,0,.1);
+  --color-window-border-top: rgba(255,255,255,.7);
+  --color-window-border-bottom: #ccc;
+  --color-window-content: #fff;
+  --color-window-popup: #fff;
+  --color-window-buttons: #666;
+  --color-window-buttons-alt: #222;
+  --color-window-menu: #eee;
+  --color-window-menu-alt: #ddd;
+  --color-button: #9cdbb5;
+  --color-button-alt: #a4eac0;
+  --color-button-border: #8ecca6;
+  --color-popup-error-bg: #ffe1e1;
+  --color-popup-error-button: #ffbebe;
+  --color-popup-error-button-alt: #ffa1a1;
+  --color-popup-error-border: #ffb6b6;
+}
+
+.blue {
+  --color-bg: #71b0d7;
+  --color-bg-alt: #a4e4fd;
+  --color-text: #333;
+  --color-text-alt: #111;
+  --color-decor: #ccc;
+  --color-glass: rgba(151, 192, 230, 0.9);
+  --color-glass-alt: rgba(255, 255, 255, 0.5);
+  --color-error: #a00;
+  --color-success: #0a0;
+  --color-link: #006dd0;
+  --color-selected: rgba(0,0,0,.1);
+  --color-window-border-top: rgba(255,255,255,.7);
+  --color-window-border-bottom: #ccc;
+  --color-window-content: #fff;
+  --color-window-popup: #fff;
+  --color-window-buttons: #666;
+  --color-window-buttons-alt: #222;
+  --color-window-menu: #eee;
+  --color-window-menu-alt: #ddd;
+  --color-button: #81d5ff;
+  --color-button-alt: #ace0ff;
+  --color-button-border: #67c1f9;
+  --color-popup-error-bg: #ffe1e1;
+  --color-popup-error-button: #ffbebe;
+  --color-popup-error-button-alt: #ffa1a1;
+  --color-popup-error-border: #ffb6b6;
+}
+
+.black {
+  --color-bg: #000;
+  --color-bg-alt: #222;
+  --color-text: #eee;
+  --color-text-alt: #fff;
+  --color-decor: #ccc;
+  --color-glass: rgb(20, 20, 20, .9);
+  --color-glass-alt: rgba(255, 255, 255, 0.3);
+  --color-error: #a00;
+  --color-success: #0a0;
+  --color-link: #006dd0;
+  --color-selected: rgba(255,255,255,.2);
+  --color-window-border-top: rgba(255,255,255,.3);
+  --color-window-border-bottom: #444;
+  --color-window-content: #222;
+  --color-window-popup: #333;
+  --color-window-buttons: #ccc;
+  --color-window-buttons-alt: #fff;
+  --color-window-menu: #282828;
+  --color-window-menu-alt: #111;
+  --color-button: #555;
+  --color-button-alt: #444;
+  --color-button-border: #666;
+  --color-popup-error-bg: #6f0b0b;
+  --color-popup-error-button: #934e4e;
+  --color-popup-error-button-alt: #a21010;
+  --color-popup-error-border: #ffd6d6;
+}
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;
+    }
+  }
+}