Main theme for SuiteDesk

2017-07-25 13:57:02 +02:00 · 2017-07-25 13:57:02 +02:00 · 42540d1310
commit 42540d1310
parent 8cf3c56044
185 changed files with 17597 additions and 0 deletions
--- a/themes/zuitedesk/css/layout-responsive.css
+++ b/themes/zuitedesk/css/layout-responsive.css
@ -0,0 +1,147 @@
+/**
+ * @file
+ * Positioning for responsive layout.
+ *
+ * Define CSS classes to create a table-free, right column layout.
+ */
+
+
+/*
+ * Center the page.
+ */
+#header,
+#main-wrapper,
+#navigation-top .section,
+#navigation .section,
+#page-title .section,
+#footer .section,
+#socket .section,
+.region-bottom {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1240px;  /* For screen sizes larger than 1240px, prevent
+                         long lines of text by setting a max-width. */
+}
+
+/*
+ * Apply the shared properties of grid items in a single, efficient ruleset.
+ */
+#header,
+#main-content,
+#navigation .section,
+#page-title .section,
+#footer .section,
+.region-sidebar-main {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  word-wrap: break-word;
+}
+#header,
+#navigation-top .section,
+#navigation .section,
+#page-title .section {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+#main-content {
+  padding-left: 30px;
+  padding-right: 20px;
+}
+#main-content .section {
+  margin-top: 0;
+  padding: 0 0 1em;
+  min-height: 360px;
+}
+#footer .section {
+  padding-top: 30px;
+}
+#footer .section,
+#socket .section {
+  padding-left: 0;
+  padding-right: 0;
+}
+.region-sidebar-main {
+  padding-left: 20px;
+  padding-right: 30px;
+}
+
+/*
+ * Containers for grid items and flow items.
+ */
+#header:before,
+#header:after,
+#main:before,
+#main:after,
+#footer:before,
+#footer:after {
+  content: "";
+  display: table;
+}
+#header:after,
+#main:after,
+#footer:after {
+  clear: both;
+}
+
+/*
+ * Main layout.
+ */
+@media (max-width: 1239px) {
+  #footer .section,
+  #socket .section {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+}
+@media (max-width: 767px) {
+  #footer .section,
+  #socket .section,
+  #main-content,
+  .region-sidebar-main {
+    padding-left: 4%;
+    padding-right: 4%;
+  }
+}
+@media (max-width: 529px) {  /* MINW = 530px */
+  #header,
+  #navigation-top .section,
+  #navigation .section,
+  #page-title .section,
+  #main-content .section {
+    padding-left: 4%;
+    padding-right: 4%;
+  }
+  #main-content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+@media (min-width: 768px) {
+  .sidebar-main #main-content {
+    float: left;
+    width: 66.667%;
+    margin-left: 0%;
+    margin-right: -66.667%;
+  }
+  .sidebar-main .region-sidebar-main {
+    float: left;
+    width: 33.333%;
+    margin-left: 66.667%;
+    margin-right: -100%;
+  }
+}
+@media (min-width: 960px) {
+  .sidebar-main #main-content {
+    width: 71%;
+    margin-right: -71%;
+  }
+  .sidebar-main .region-sidebar-main {
+    width: 29%;
+    margin-left: 71%;
+  }
+}
+.sidebar-main .region-sidebar-main {
+  margin-bottom: 1em;
+}