Permalink
Browse files

ENHANCEMENT Started styles for new CMS

  • Loading branch information...
1 parent 6dbfd5f commit 99a68dde75908c24e738bb61f931309e6f8c66d7 @chillu chillu committed Apr 14, 2011
View
@@ -10,4 +10,4 @@
javascripts_dir = "javascript"
output_style = :compact
# To enable relative paths to assets via compass helper functions. Uncomment:
-# relative_assets = true
+relative_assets = true
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Deleted file not rendered
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -1 +1,32 @@
+/**
+ * This file defines common styles for form elements used throughout the CMS interface.
+ * It is an addition to the base styles defined in sapphire/css/Form.css.
+ */
+.cms {
+
+ // Form fields
+
+ input, textarea {
+ background-color: #f9f9f9;
+ }
+
+ input.loading {
+ padding-left: 16px;
+ background: #fff url(../../images/network-save.gif) no-repeat center left;
+ }
+
+ .edit-form {
+ padding-bottom: 20px;
+
+ // Hide first level tabs for CMS, see CMSEditForm.ss
+ & > fieldset > .ss-tabset > ul {
+ display: none;
+ }
+
+ // TODO Unclear if "button bar" concept is edit form specific
+ .Actions {
+ text-align: right;
+ }
+ }
+}
View
@@ -0,0 +1,65 @@
+/**
+ * This file defines the structural layout of the CMS interface.
+ * Ideally, you should be able to lay out the base elements of the CMS with only this file.
+ *
+ * Please put any presentational definitions (color, fonts, backgrounds, paddings)
+ * into _style.scss or _uitheme.scss instead.
+ */
+
+html, body {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ overflow: hidden; // avoid jlayout jitter when resizing
+}
+
+.cms-container {
+ height: 100%
+}
+
+.cms-menu {
+ width: 250px;
+ overflow: auto;
+}
+
+.cms-content {
+}
+
+.cms-menu,
+.cms-content,
+.cms-content-header,
+.cms-content-tools,
+.cms-content-form {
+ @include inline-block;
+}
+
+.cms-content-tools {
+ width: 250px;
+ overflow: auto;
+}
+
+.cms-content-form {
+ overflow: auto;
+}
+
+.cms-content-header {
+ height: 40px;
+ overflow: hidden;
+}
+
+.cms-content-actions {
+ padding: 10px;
+}
+
+.cms-logo {
+ height: 30px;
+ overflow: hidden;
+ vertical-align: middle;
+}
+
+.cms-login-status {
+ height: 30px;
+ overflow: hidden;
+ vertical-align: middle;
+}
View
@@ -0,0 +1,76 @@
+.cms-menu {
+ z-index: 10;
+ background-color: #b0bfc6;
+ @include box-shadow(#aaa, 3px, 0, 3px);
+
+ a {
+ text-decoration: none;
+ }
+}
+
+.cms-menu-list {
+ li {
+ background-color: #afbdc6;
+ @include linear-gradient(color-stops(#afbdc6, #8ea4b2));
+ border-bottom: 1px solid #aaa;
+
+ a {
+ display: block;
+ height: 32px;
+ vertical-align: middle;
+ font-size: 14px;
+ @include text-shadow(#ddd);
+ color: #333;
+ margin: 5px;
+
+ .icon {
+ display: block;
+ float: left;
+ margin-right: 5px;
+ @include sprite-background("icons-32.png");
+ @include sprite-position(1, 1);
+ }
+
+ .text {
+ display: block;
+ padding-top: 10px;
+ }
+ }
+
+ &.current {
+ background-color: #338dc1;
+ @include linear-gradient(color-stops(#338dc1, #338dc1));
+ @include box-shadow(#333, 0, 4px, 4px);
+
+ a {
+ color: white;
+ @include text-shadow(#333);
+ }
+ }
+
+ // nested elements
+ li {
+ background-color: #1d76ae;
+ @include linear-gradient(color-stops(#1d76ae, #1d76ae));
+
+ a {
+ font-size: 12px;
+ @include text-shadow(#333);
+ margin: 0;
+ padding-left: 30px;
+ color: white;
+ }
+
+ &.current a {
+ font-weight: bold;
+ }
+ }
+
+ }
+
+ li#Menu-CMSMain a .icon {@include sprite-position(1, 1);}
+ li#Menu-CMSMain.current a .icon, li#Menu-CMSMain a:hover .icon {@include sprite-position(2, 1);}
+ li#Menu-AssetAdmin a .icon {@include sprite-position(1, 2);}
+ li#Menu-AssetAdmin.current a .icon, li#Menu-AssetAdmin a:hover .icon {@include sprite-position(2, 2);}
+
+}
View
@@ -0,0 +1,156 @@
+/**
+ * This file defines the 'theme' of the CMS: Colors, fonts, backgrounds, and detailed alignments.
+ * Together with _layout.css it provides the presentational backbone to the CMS.
+ * Ideally a developer should be able to exchange this file with his own theme easily.
+ *
+ * Please don't put any dimension, display or float information on major structural components
+ * like '.cms-container' or '.cms-header' in here, use the _layout.scss file instead.
+ *
+ * Use SCSS variable definitions in screen.css to avoid repeating styles like background colours
+ * or padding dimensions.
+ *
+ * To avoid this file getting too large and complicated, it is encouraged to create new SCSS files
+ * for larger components like the CMS menu or tree (see _tree.scss and _menu.scss).
+ */
+
+// main styles
+
+body {
+ @include global-reset;
+ font-size: 13px;
+ font-family: Verdana, Arial, sans-serif;
+}
+
+body * {
+ font-size: 13px;
+}
+
+body .ui-widget {
+ font-size: 1em;
+}
+
+.cms-content-header {
+ background-color: #a0b2be;
+ @include linear-gradient(color-stops(#abbbc4, #93a8b6));
+
+ h2 {
+ float: left;
+ padding: 10px;
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+ .cms-content-header-tabs {
+ float: left;
+ margin-top: 8px; // TODO Ingo is too dumb to do bottom vertical position
+ }
+
+ .cms-content-header-actions {
+
+ }
+}
+
+.cms-content-tools {
+ background-color: #c6d7df;
+}
+
+// header and logo
+
+.cms-header {
+ padding: 10px;
+ background-color: #002a43;
+ @include linear-gradient(color-stops(#002236, #003050, #002236));
+
+ * {
+ color: white;
+ }
+}
+
+.cms-logo {
+
+ .version {
+ display: none;
+ }
+
+ * {
+ color: #3ebae0;
+ }
+
+ a {
+ display: inline-block;
+ height: 25px;
+ width: 25px;
+ float: left;
+ margin-right: 10px;
+ background: url(../images/logo_small.png) no-repeat;
+ text-indent: -9999em;
+ }
+}
+
+.cms-login-status {
+
+ .logout-link {
+ display: inline-block;
+ height: 25px;
+ width: 25px;
+ float: left;
+ margin-right: 10px;
+ background: url(../images/logout.png) no-repeat;
+ text-indent: -9999em;
+ }
+}
+
+// loading screen
+
+.ss-loading-screen,
+.ss-loading-screen .loading-logo {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ position: absolute;
+ background: #fff;
+ background: -moz-radial-gradient(50% 50% 180deg, circle cover, #FFFFFF, #EFEFEF, #C7C7C7 100%);
+ background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#E3E3E3), to(white));
+ z-index: 100000;
+ margin: 0;
+ padding: 0;
+}
+
+.ss-loading-screen {
+ .loading-logo {
+ background-url: url(../images/logo.gif);
+ background-repeat: no-repeat;
+ background-color: transparent;
+ background-position: 50% 50%;
+ }
+ p {
+ width: 100%;
+ text-align: center;
+ position: absolute;
+ bottom: 80px;
+
+ span.notice {
+ display: inline-block;
+ font-size: 14px;
+ padding: 10px 20px;
+ color: #dc7f00;
+ border: none;
+
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ -o-border-radius: 5px;
+
+ -moz-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
+ -webkit-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
+ -o-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
+ box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
+ }
+ }
+
+ .loading-animation {
+ display: none;
+ position: absolute;
+ left: 49%;
+ top: 75%;
+ }
+}
View
@@ -1,4 +1,10 @@
-// Added through jstree.js on DOM load, but we need it earlier in order to correctly display the uninitialized tree
+/**
+ * This file defines the jstree base styling (see http://jstree.com), as well as any
+ * customizations (see bottom of file).
+ *
+ * The styles are usually added through jstree.js on DOM load,
+ * but we need it earlier in order to correctly display the uninitialized tree.
+ */
.jstree {
ul {
@@ -348,3 +354,13 @@ li.jstree-closed > ul {
padding: 0;
z-index: 0;
}
+
+// Custom styles
+.cms {
+ .jstree-apple.jstree-focused {
+ background: none;
+ }
+ .jstree-apple > ul {
+ background: none;
+ }
+}
Oops, something went wrong.

0 comments on commit 99a68dd

Please sign in to comment.