refactor: split scss file

7 files changed, 337 insertions, 323 deletions

diff --git a/scss/_oc.scss b/scss/_oc.scss
deleted file mode 100644
index 1bbc173..0000000
--- a/scss/_oc.scss
+++ /dev/null
@@ -1,305 +0,0 @@
-@keyframes jsxc-left-to-right {
-    0% {
-        background-position-x: 0%;
-    }
-
-    50% {
-        background-position-x: 100%;
-    }
-
-    100% {
-        background-position-x: 0%;
-    }
-}
-
-#jsxc-roster {
-    padding-top: 5px; // NC >= 14
-    top: 45px;
-    z-index: 1500;
-}
-
-#jsxc_toggleRoster {
-    width: 8px;
-}
-
-#jsxc-window-list, #jsxc_windowListSB {
-    z-index: 1500;
-}
-
-.jsxc-dialog-wrapper {
-    z-index: 1600;
-}
-
-#jsxc {
-    padding: 20px;
-
-    h1 {
-        margin: 15px 0 5px;
-        font-size: 1.5em;
-    }
-
-    a {
-        color: blue;
-        text-decoration: underline;
-
-        &:hover {
-            text-decoration: none;
-        }
-    }
-}
-
-#jsxc_submit {
-    font-size: 15px;
-    padding: 3px 5px;
-    opacity: 1;
-    font-weight: normal;
-
-    &:hover {
-        opacity: 0.7;
-    }
-}
-
-#ojsxc {
-    .form-group {
-        overflow: hidden;
-
-        > label, > .form-col {
-            float: left;
-        }
-    }
-
-    label {
-        box-sizing: border-box;
-        padding: 6px 15px 6px 0;
-        width: 100%;
-        margin: 3px 0;
-
-        @media (min-width: 768px) {
-            width: 33%;
-            text-align: right;
-        }
-    }
-
-    .form-no-padding {
-        padding: 0;
-    }
-
-    .form-col {
-        width: 100%;
-        overflow: hidden;
-
-        @media (min-width: 768px) {
-            width: 66%;
-        }
-
-        input {
-            display: block;
-        }
-    }
-
-    .form-col-offset {
-        @media (min-width: 768px) {
-            padding-left: 33%;
-        }
-    }
-
-    input {
-        box-sizing: border-box;
-        padding-right: 15px;
-        width: 100%;
-
-        &[type='checkbox'] {
-            margin: 13px 0;
-            width: auto;
-            min-height: auto;
-            height: auto;
-        }
-
-        &[type='radio'] {
-            width: auto;
-            min-height: auto;
-            height: auto;
-        }
-
-        &[readonly] {
-            background-color: #f1f1f1;
-        }
-
-        &:invalid {
-            border: 1px solid red;
-            position: relative;
-        }
-
-        &.jsxc-loading {
-            background-image: linear-gradient(to right, #fff, #fff);
-            background-position-x: 10%;
-            background-size: 30px 100%;
-            background-repeat: no-repeat;
-            animation: jsxc-left-to-right 5s linear infinite;
-        }
-    }
-
-    em, .boshUrl-msg {
-        display: block;
-        clear: left;
-        margin-bottom: 0.8em;
-    }
-
-    .text-left {
-        text-align: left;
-    }
-
-    h3 {
-        width: 100%;
-
-        @media (min-width: 768px) {
-            width: 33%;
-            border-bottom: 1px solid #e1e1e1;
-        }
-    }
-
-    .text {
-        margin-bottom: 10px;
-    }
-}
-
-%msg {
-    border: 1px solid #fff;
-    color: #030;
-    padding: 11px;
-    padding-left: 38px;
-    background-position: 12px center;
-    background-repeat: no-repeat;
-    background-color: #f1f1f1;
-    margin: 3px;
-}
-
-.jsxc_success {
-    @extend %msg;
-
-    background-image: url("../img/checkmark-green.svg");
-}
-
-.jsxc_fail {
-    @extend %msg;
-
-    background-image: url("../img/cross-red.svg");
-    background-position: 12px 5px;
-}
-
-.jsxc_log {
-    width: 500px;
-}
-
-#mainContainer, #odf-toolbar {
-    right: 0;
-    left: 0;
-    width: auto !important;
-    z-index: 70 !important;
-}
-
-#header .jsxc_chatIcon {
-    width: 45px;
-    height: 45px;
-    float: right;
-    background-image: url("../img/chat-icon-white.svg");
-    background-size: 20px;
-    background-repeat: no-repeat;
-    background-position: center;
-    opacity: 0.7;
-    cursor: pointer;
-
-    &:hover {
-        opacity: 1;
-    }
-}
-
-@media (min-width: 768px) {
-    #content, #content-wrapper, #filestable > thead {
-        padding-right: 0;
-        transition: padding-right 0.5s;
-    }
-
-    #mainContainer, #odf-toolbar, #app-sidebar {
-        right: 0;
-        transition: right 0.5s;
-    }
-
-    .app-mail .submit-message-wrapper {
-        transition: right 0.5s;
-
-        .submit-message {
-            transition: right 0.5s;
-        }
-    }
-
-    .jsxc-roster-shown {
-        #content, #content-wrapper, #filestable > thead {
-            padding-right: 210px;
-        }
-
-        #mainContainer, #odf-toolbar, #app-sidebar {
-            right: 210px;
-        }
-
-        .app-mail .submit-message-wrapper {
-            right: 225px;
-
-            .submit-message {
-                right: 225px;
-            }
-        }
-
-        #app-content.with-app-sidebar {
-            padding-right: 50px;
-        }
-    }
-}
-
-#body-login {
-    #jsxc_windowList, #jsxc_roster {
-        display: none;
-    }
-}
-
-#contactsmenu-contacts {
-    .jsxc_statusIndicator {
-        position: relative;
-
-        &:before {
-            width: 6px;
-            height: 6px;
-            right: 13px;
-            top: 13px;
-            position: absolute;
-        }
-    }
-
-    .contact {
-        &:before {
-            position: absolute;
-            top: 7px;
-            left: 7px;
-        }
-
-        .avatar {
-            cursor: pointer;
-        }
-    }
-}
-
-.nav-icon-javascript-xmpp-client {
-    background-image: url("../img/app-black.svg");
-}
-
-.jsxc-internal-server {
-    #jsxc_buddylist .jsxc_more {
-        display: none;
-    }
-
-    #jsxc_menu {
-        .jsxc_joinChat, .jsxc_addBuddy {
-            display: none;
-        }
-    }
-}
diff --git a/scss/index.scss b/scss/index.scss
new file mode 100644
index 0000000..3bcd26d
--- /dev/null
+++ b/scss/index.scss
@@ -0,0 +1,13 @@
+//fonts
+$font-sans: Arial, sans-serif;
+$font-serif: serif;
+
+$window-bar-bg: #0082c9;
+$window-bar-color: #c0dff1;
+$window-bar-color-hover: #fff;
+
+@import "modules/animations";
+@import "vendor/jsxc";
+
+@import "partials/nextcloud";
+@import "partials/misc";
diff --git a/scss/jsxc.oc.scss b/scss/jsxc.oc.scss
deleted file mode 100644
index 9522f27..0000000
--- a/scss/jsxc.oc.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-//fonts
-$font_sans: Arial, sans-serif;
-$font_serif: serif;
-
-$window_bar_bg: #0082c9;
-$window_bar_color: #c0dff1;
-$window_bar_color_hover: #fff;
-
-@import "oc";
-
-.jsxc-bar--window, .jsxc-window-item .jsxc-memberlist {
-    background-color: $window_bar_bg;
-    color: $window_bar_color;
-
-    :hover {
-        // color: $window_bar_color_hover;
-    }
-}
diff --git a/scss/modules/_animations.scss b/scss/modules/_animations.scss
new file mode 100644
index 0000000..b1996a0
--- /dev/null
+++ b/scss/modules/_animations.scss
@@ -0,0 +1,13 @@
+@keyframes jsxc-left-to-right {
+  0% {
+    background-position-x: 0%;
+  }
+
+  50% {
+    background-position-x: 100%;
+  }
+
+  100% {
+    background-position-x: 0%;
+  }
+}
diff --git a/scss/partials/_misc.scss b/scss/partials/_misc.scss
new file mode 100644
index 0000000..216f281
--- /dev/null
+++ b/scss/partials/_misc.scss
@@ -0,0 +1,177 @@
+#jsxc_submit {
+  font-size: 15px;
+  padding: 3px 5px;
+  opacity: 1;
+  font-weight: normal;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
+#ojsxc {
+  .form-group {
+    overflow: hidden;
+
+    >label,
+    >.form-col {
+      float: left;
+    }
+  }
+
+  label {
+    box-sizing: border-box;
+    padding: 6px 15px 6px 0;
+    width: 100%;
+    margin: 3px 0;
+
+    @media (min-width: 768px) {
+      width: 33%;
+      text-align: right;
+    }
+  }
+
+  .form-no-padding {
+    padding: 0;
+  }
+
+  .form-col {
+    width: 100%;
+    overflow: hidden;
+
+    @media (min-width: 768px) {
+      width: 66%;
+    }
+
+    input {
+      display: block;
+    }
+  }
+
+  .form-col-offset {
+    @media (min-width: 768px) {
+      padding-left: 33%;
+    }
+  }
+
+  input {
+    box-sizing: border-box;
+    padding-right: 15px;
+    width: 100%;
+
+    &[type='checkbox'] {
+      margin: 13px 0;
+      width: auto;
+      min-height: auto;
+      height: auto;
+    }
+
+    &[type='radio'] {
+      width: auto;
+      min-height: auto;
+      height: auto;
+    }
+
+    &[readonly] {
+      background-color: #f1f1f1;
+    }
+
+    &:invalid {
+      border: 1px solid red;
+      position: relative;
+    }
+
+    &.jsxc-loading {
+      background-image: linear-gradient(to right, #fff, #fff);
+      background-position-x: 10%;
+      background-size: 30px 100%;
+      background-repeat: no-repeat;
+      animation: jsxc-left-to-right 5s linear infinite;
+    }
+  }
+
+  em,
+  .boshUrl-msg {
+    display: block;
+    clear: left;
+    margin-bottom: 0.8em;
+  }
+
+  .text-left {
+    text-align: left;
+  }
+
+  h3 {
+    width: 100%;
+
+    @media (min-width: 768px) {
+      width: 33%;
+      border-bottom: 1px solid #e1e1e1;
+    }
+  }
+
+  .text {
+    margin-bottom: 10px;
+  }
+}
+
+%msg {
+  border: 1px solid #fff;
+  color: #030;
+  padding: 11px;
+  padding-left: 38px;
+  background-position: 12px center;
+  background-repeat: no-repeat;
+  background-color: #f1f1f1;
+  margin: 3px;
+}
+
+.jsxc_success {
+  @extend %msg;
+
+  background-image: url("../img/checkmark-green.svg");
+}
+
+.jsxc_fail {
+  @extend %msg;
+
+  background-image: url("../img/cross-red.svg");
+  background-position: 12px 5px;
+}
+
+
+
+#header .ojsxc-chat-icon {
+  width: 45px;
+  height: 45px;
+  float: right;
+  background-image: url("../img/chat-icon-white.svg");
+  background-size: 20px;
+  background-repeat: no-repeat;
+  background-position: center;
+  opacity: 0.7;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+
+.nav-icon-javascript-xmpp-client {
+  background-image: url("../img/app-black.svg");
+}
+
+.jsxc-internal-server {
+  #jsxc_buddylist .jsxc_more {
+    display: none;
+  }
+
+  #jsxc_menu {
+
+    .jsxc_joinChat,
+    .jsxc_addBuddy {
+      display: none;
+    }
+  }
+}
diff --git a/scss/partials/_nextcloud.scss b/scss/partials/_nextcloud.scss
new file mode 100644
index 0000000..6bf6a5c
--- /dev/null
+++ b/scss/partials/_nextcloud.scss
@@ -0,0 +1,92 @@
+#mainContainer,
+#odf-toolbar {
+  right: 0;
+  left: 0;
+  width: auto !important;
+  z-index: 70 !important;
+}
+
+#body-login {
+  #jsxc_windowList,
+  #jsxc_roster {
+    display: none;
+  }
+}
+
+#contactsmenu-contacts {
+  .jsxc_statusIndicator {
+    position: relative;
+
+    &:before {
+      width: 6px;
+      height: 6px;
+      right: 13px;
+      top: 13px;
+      position: absolute;
+    }
+  }
+
+  .contact {
+    &:before {
+      position: absolute;
+      top: 7px;
+      left: 7px;
+    }
+
+    .avatar {
+      cursor: pointer;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+
+  #content,
+  #content-wrapper,
+  #filestable>thead {
+    padding-right: 0;
+    transition: padding-right 0.5s;
+  }
+
+  #mainContainer,
+  #odf-toolbar,
+  #app-sidebar {
+    right: 0;
+    transition: right 0.5s;
+  }
+
+  .app-mail .submit-message-wrapper {
+    transition: right 0.5s;
+
+    .submit-message {
+      transition: right 0.5s;
+    }
+  }
+
+  .jsxc-roster-shown {
+
+    #content,
+    #content-wrapper,
+    #filestable>thead {
+      padding-right: 210px;
+    }
+
+    #mainContainer,
+    #odf-toolbar,
+    #app-sidebar {
+      right: 210px;
+    }
+
+    .app-mail .submit-message-wrapper {
+      right: 225px;
+
+      .submit-message {
+        right: 225px;
+      }
+    }
+
+    #app-content.with-app-sidebar {
+      padding-right: 50px;
+    }
+  }
+}
diff --git a/scss/vendor/_jsxc.scss b/scss/vendor/_jsxc.scss
new file mode 100644
index 0000000..97089e2
--- /dev/null
+++ b/scss/vendor/_jsxc.scss
@@ -0,0 +1,42 @@
+.jsxc-bar--window,
+.jsxc-window-item .jsxc-memberlist {
+  background-color: $window-bar-bg;
+  color: $window-bar-color;
+
+  :hover {
+    // color: $window_bar_color_hover;
+  }
+}
+
+#jsxc {
+  padding: 20px;
+
+  h1 {
+    margin: 15px 0 5px;
+    font-size: 1.5em;
+  }
+
+  a {
+    color: blue;
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+#jsxc-roster {
+  padding-top: 5px; // NC >= 14
+  top: 45px;
+  z-index: 1500;
+}
+
+#jsxc-window-list,
+#jsxc_windowListSB {
+  z-index: 1500;
+}
+
+.jsxc-dialog-wrapper {
+  z-index: 1600;
+}