Permalink
Browse files

ENHANCEMENT Using SCSS variables for colour definitions in CMS, setti…

…ng to greyscale theme for now in order to communicate the early status of the UI work
  • Loading branch information...
chillu committed Apr 19, 2011
1 parent a2b39e5 commit 4ddd69f85f8a465174c0881727f5931786ab522c
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
Binary file not shown.
View
@@ -0,0 +1,42 @@
+/**
+ * This file only contains color definitions.
+ * Please put any further formatting into _style.scss.
+ */
+
+// colour definitions
+$color-base: #B0BFC6;
+$color-widget-bg: lighten($color-base, 20%);
+$color-dark-bg: #003050;
+$color-shadow-light: #aaa;
+$color-shadow-dark: #333;
+$color-menu-button: #338DC1; // darkened and desaturated as required
+$color-text: #444;
+$color-text-light: white;
+$color-text-light-link: white;
+$color-text-dark: #333;
+$color-text-dark-link: #3EBAE0;
+$color-button-constructive: #77b53f;
+$color-button-destructive: #f00;
+$color-warning: #FF9300;
+$color-error: #FF9300;
+$color-notice: #FF9300;
+
+/*
+// simple grayscale theme
+$color-base: grayscale(#B0BFC6);
+$color-widget-bg: grayscale(lighten($color-base, 20%));
+$color-dark-bg: grayscale(#003050);
+$color-shadow-light: grayscale(#aaa);
+$color-shadow-dark: grayscale(#333);
+$color-menu-button: grayscale(#338DC1);
+$color-text: grayscale(#444);
+$color-text-light: white;
+$color-text-light-link: white;
+$color-text-dark: grayscale(#333);
+$color-text-dark-link: grayscale(#3EBAE0);
+$color-button-constructive: grayscale(#77b53f);
+$color-button-destructive: grayscale(#f00);
+$color-warning: grayscale(#FF9300);
+$color-error: grayscale(#FF9300);
+$color-notice: grayscale(#FF9300);
+*/
View
@@ -6,34 +6,71 @@
// Form fields
+ .field {
+ display: block;
+ padding: 10px 0;
+ border-bottom: 1px solid $color-shadow-light;
+
+ label {
+ float: left;
+ width: 10em;
+ }
+
+ // Don't float inner/contained fields
+ .middleColumn {
+ margin-left: 10em;
+
+ .field {
+ display: inline;
+ padding: 0;
+ border: none;
+ }
+
+ label {
+ float: none;
+ width: auto;
+ }
+ }
+
+ }
+
input, textarea {
- background-color: #f9f9f9;
+ @include border-radius(5px);
+ @include linear-gradient(color-stops(
+ $color-widget-bg,
+ lighten($color-widget-bg, 10%),
+ $color-widget-bg
+ ));
+ border: 1px solid $color-shadow-light;
+ padding: 3px;
}
input.loading {
padding-left: 16px;
- background: #fff url(../../images/network-save.gif) no-repeat center left;
+ background: $color-widget-bg url(../../images/network-save.gif) no-repeat center left;
}
// Buttons
-
- .ui-state-default.ss-ui-action-constructive {
- @include linear-gradient(color-stops(#77b53f, #0c8a44));
- color: white;
+ .ss-ui-action-constructive,
+ .ui-widget-content .ss-ui-action-constructive,
+ .ui-widget-header .ss-ui-action-constructive {
+ background: none; // avoid overwritten gradient from jQuery UI styles
+ @include linear-gradient(color-stops(
+ $color-button-constructive,
+ darken($color-button-constructive, 20%)
+ ));
+ color: $color-text-light;
}
- .ui-state-default.ss-ui-action-destructive {
- color: red;
+ .ss-ui-action-destructive,
+ .ui-widget-content .ss-ui-action-destructive,
+ .ui-widget-header .ss-ui-action-destructive {
+ color: $color-button-destructive;
}
- .edit-form {
+ .cms-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
@@ -1,7 +1,7 @@
.cms-menu {
z-index: 10;
- background-color: #b0bfc6;
- @include box-shadow(#aaa, 3px, 0, 3px);
+ background-color: $color-widget-bg;
+ @include box-shadow($color-shadow-light, 3px, 0, 3px);
a {
text-decoration: none;
@@ -10,18 +10,20 @@
.cms-menu-list {
li {
- background-color: #afbdc6;
- @include linear-gradient(color-stops(#afbdc6, #8ea4b2));
- border-bottom: 1px solid #aaa;
+ @include linear-gradient(color-stops(
+ $color-base,
+ darken($color-base, 20%)
+ ));
+ border-bottom: 1px solid $color-shadow-light;
a {
display: block;
height: 32px;
vertical-align: middle;
font-size: 14px;
- @include text-shadow(#ddd);
- color: #333;
- margin: 5px;
+ @include text-shadow($color-shadow-light);
+ color: $color-text-dark;
+ padding: 5px;
.icon {
display: block;
@@ -38,27 +40,38 @@
}
&.current {
- background-color: #338dc1;
- @include linear-gradient(color-stops(#338dc1, #338dc1));
- @include box-shadow(#333, 0, 4px, 4px);
+ @include linear-gradient(color-stops(
+ $color-menu-button,
+ darken($color-menu-button, 20%)
+ ));
+
+ li {
+ @include linear-gradient(color-stops(
+ darken($color-menu-button, 5%),
+ darken($color-menu-button, 10%)
+ ));
+ }
a {
- color: white;
- @include text-shadow(#333);
+ color: $color-text-light;
+ @include text-shadow($color-shadow-dark);
}
}
// nested elements
li {
- background-color: #1d76ae;
- @include linear-gradient(color-stops(#1d76ae, #1d76ae));
+
+
+ &:first {
+ @include box-shadow($color-shadow-dark, 0, 4px, 4px);
+ }
a {
font-size: 12px;
- @include text-shadow(#333);
+ @include text-shadow($color-shadow-dark);
margin: 0;
padding-left: 30px;
- color: white;
+ color: $color-text-light;
}
&.current a {
View
@@ -7,18 +7,19 @@
* 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.
+ * or padding dimensions. See _colours.scss to get started.
*
* 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
+// ######################### Base styles #########################
body {
@include global-reset;
font-size: 13px;
font-family: Verdana, Arial, sans-serif;
+ color: $color-text;
}
body * {
@@ -29,9 +30,13 @@ body .ui-widget {
font-size: 1em;
}
+// ######################### Misc Panels #########################
+
.cms-content-header {
- background-color: #a0b2be;
- @include linear-gradient(color-stops(#abbbc4, #93a8b6));
+ @include linear-gradient(color-stops(
+ darken($color-widget-bg, 20%),
+ darken($color-widget-bg, 30%)
+ ));
h2 {
float: left;
@@ -42,7 +47,10 @@ body .ui-widget {
.cms-content-header-tabs {
float: left;
- margin-top: 8px; // TODO Ingo is too dumb to do bottom vertical position
+ }
+
+ .ui-tabs-nav li {
+ height: 40px;
}
.cms-content-header-actions {
@@ -51,18 +59,21 @@ body .ui-widget {
}
.cms-content-tools {
- background-color: #c6d7df;
+ background-color: darken($color-widget-bg, 5%);
}
-// header and logo
+// ######################### Header and Logo #########################
.cms-header {
padding: 10px;
- background-color: #002a43;
- @include linear-gradient(color-stops(#002236, #003050, #002236));
+ @include linear-gradient(color-stops(
+ darken($color-dark-bg, 10%),
+ $color-dark-bg,
+ darken($color-dark-bg, 10%)
+ ));
* {
- color: white;
+ color: $color-text-light;
}
}
@@ -73,7 +84,7 @@ body .ui-widget {
}
* {
- color: #3ebae0;
+ color: $color-text-dark-link;
}
a {
@@ -100,14 +111,15 @@ body .ui-widget {
}
}
-// loading screen
+// ######################### Loading Screen #########################
.ss-loading-screen,
.ss-loading-screen .loading-logo {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
+ // TODO Convert to compass gradient include
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));
@@ -135,15 +147,7 @@ body .ui-widget {
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);
+ @include border-radius(5px);
}
}
@@ -153,4 +157,49 @@ body .ui-widget {
left: 49%;
top: 75%;
}
+}
+
+// ######################### Actions #########################
+
+.cms-content-actions {
+
+}
+
+// ######################### Messages #########################
+
+/**
+ * Messages (see sapphire/css/Form.css)
+ */
+.message {
+ margin: 1em 0;
+ padding: 0.5em;
+ font-weight: bold;
+ border: 1px black solid;
+
+ &.notice {
+ background-color: lighten($color-notice, 20%);
+ border-color: $color-notice;
+ }
+
+ &.warning {
+ background-color: lighten($color-warning, 20%);
+ border-color: $color-warning;
+ }
+ &.error {
+ background-color: lighten($color-error, 20%);
+ border-color: $color-error;
+ }
+}
+
+// ######################### ModelAdmin #########################
+
+.ModelAdmin {
+ .cms-content-tools {
+ width: 300px;
+ }
+
+ // Disable by default, will be replaced by more intuitive column selection in new data grid
+ .ResultAssemblyBlock {
+ display: none;
+ }
}
Oops, something went wrong.

0 comments on commit 4ddd69f

Please sign in to comment.