first commit

media/com_associations/css/sidebyside.css

@@ -0,0 +1,92 @@
+/**
+ * @copyright   (C) 2017 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+.sidebyside .outer-panel {
+  float: left;
+  width: 50%;
+}
+
+.sidebyside #left-panel .inner-panel {
+  padding-inline-end: 10px;
+}
+
+.sidebyside #right-panel .inner-panel {
+  padding-inline-end: 10px;
+}
+
+.sidebyside .full-width {
+  float: none !important;
+  width: 100% !important;
+}
+
+.sidebyside .full-width .inner-panel {
+  padding: 0 !important;
+}
+
+#reference-association, #target-association {
+  width: 100%;
+  height: 1500px;
+  overflow-y: auto;
+  border: 0 !important;
+}
+
+.sidebyside .langtarget {
+  float: left;
+}
+
+.sidebyside .modaltarget {
+  float: left;
+  margin-inline-start: .5rem;
+}
+
+.sidebyside #target-association {
+  margin-top: .5rem;
+}
+
+.sidebyside #reference-association {
+  margin-top: 3.35rem;
+}
+
+.target-text {
+  float: left;
+  width: auto;
+}
+
+/* RTL overrides */
+[dir=rtl] .sidebyside .outer-panel {
+  float: right;
+}
+
+[dir=rtl] .sidebyside .langtarget {
+  float: right;
+}
+
+[dir=rtl] .sidebyside .modaltarget {
+  float: right;
+}
+
+[dir=rtl] .target-text {
+  float: right;
+}
+
+/* Responsive layout */
+@media (max-width: 767.98px) {
+  .sidebyside .outer-panel {
+    float: none;
+    width: 100%;
+  }
+
+  .sidebyside #reference-association {
+    margin-top: 0;
+  }
+
+  .sidebyside #left-panel .inner-panel {
+    padding: 0;
+  }
+
+  .sidebyside #right-panel .inner-panel {
+    padding: 0;
+  }
+}