init commit

4 files changed, 240 insertions, 0 deletions

diff --git a/styles/_animations.scss b/styles/_animations.scss
new file mode 100644
index 0000000..b195c60
--- /dev/null
+++ b/styles/_animations.scss
@@ -0,0 +1,4 @@
+@keyframes fade-in {
+  from {opacity: 0;}
+  to {opacity: 1;}
+}
diff --git a/styles/_reset.scss b/styles/_reset.scss
new file mode 100755
index 0000000..a5f98fb
--- /dev/null
+++ b/styles/_reset.scss
@@ -0,0 +1,55 @@
+* {
+  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;
+}
+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/_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;
+    }
+  }
+}
diff --git a/styles/styles.scss b/styles/styles.scss
new file mode 100644
index 0000000..73ef2ee
--- /dev/null
+++ b/styles/styles.scss
@@ -0,0 +1,3 @@
+@import "reset";
+@import "animations";
+@import "window";