Changeset 396 for Dev/branches/rest-dojo-ui/client/rft/css/layout.css

Timestamp:

08/09/12 17:09:46 (13 years ago)

Author:

tjcschipper

Message:

• Modifiers property on LineWithActions? and selectors is gone! Yay! Colour handling now happens through a combination of up to four CSS classes.

  "red/blue/orange/green/purple/etc": These do not do anything in themselves, they just mark a certain element as being of that colour.
  "inheritBgColor": Any element that has this class assigned will adjust its color to the color class of their parents. A 'div.blue' has no colour itself, but a 'div.inheritBgColor' within that div will turn blue. It also adjusts text colour to white.
  "bg": Any element with this property will also take on any colour class assigned to itself. This overrides 'inheritBgColor' if the element has both classes, so you could still make an orange button in a 'blue' container if you wanted. If the element itself does not have a colour class, it will stay transparent. This also adjusts text colour to white.
  "light": This class modifies the inherited/set colour to its lighter version (see RFT Design Sheet). For example, it can be used when placing a blue BlockButton? on an already blue LineWithActions?: adding the light class will differentiate the button from the background.
  

For examples of how to implement/derive more specific style rules using these classes, see rftButtons.css.

• Changed all widgets still using the 'modifiers' to assign proper colour classes where necessary. (For instance, changed Selector.js to always set its main buttons to "light".)

File:

• Dev/branches/rest-dojo-ui/client/rft/css/layout.css (modified) (2 diffs)

Dev/branches/rest-dojo-ui/client/rft/css/layout.css

@@ -374 +374 @@
 }
 
-/* Experimental background colour inheritance */
-.claro div.blue.inheritBgColor,
-.claro span.blue.inheritBgColor,
+/****************************************************
+/*  Self- and Inherit Colours
+/***************************************************/
+
+/* InheritColours */
+.claro .inheritBgColor,
+.claro .bg {
+    transition: all 0.2s;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+}
+
 .claro .blue .inheritBgColor {
     background-color: #0072bc;
     color: #ffffff;
 }
-.claro div.green.inheritBgColor,
-.claro span.green.inheritBgColor,
+.claro .blue.light .inheritBgColor,
+.claro .blue .light.inheritBgColor {
+    background-color: #0794d1;
+    color: #ffffff;
+}
 .claro .green .inheritBgColor {
     background-color: #3aa605;
     color: #ffffff;
 }
-.claro div.orange.inheritBgColor,
-.claro span.orange.inheritBgColor,
+.claro .green.light .inheritBgColor,
+.claro .green .light.inheritBgColor {
+    background-color: #79ca0a;
+    color: #ffffff;
+}
 .claro .orange .inheritBgColor {
     background-color: #ff5b12;
     color: #ffffff;
 }
-.claro div.purple.inheritBgColor,
-.claro span.purple.inheritBgColor,
+.claro .orange.light .inheritBgColor,
+.claro .orange .light.inheritBgColor {
+    background-color: #ff9140;
+    color: #ffffff;
+}
+.claro .red .inheritBgColor {
+    background-color: #8c0310;
+    color: #ffffff;
+}
+.claro .red.light .inheritBgColor,
+.claro .red .light.inheritBgColor {
+   background-color: #bd0013;
+   color: #ffffff;   
+}
 .claro .purple .inheritBgColor {
     background-color: #6529b7;
     color: #ffffff;
 }
-.claro div.red.inheritBgColor,
-.claro span.red.inheritBgColor,
-.claro .red .inheritBgColor {
+.claro .purple.light .inheritBgColor,
+.claro .purple .light.inheritBgColor {
+    background-color: #993dec;
+    color: #ffffff;
+}
+.claro .white .inheritBgColor {
+    background-color: #ffffff;
+    color: #000000;
+}
+.claro .black .inheritBgColor {
+    background-color: #000000;
+    color: #ffffff;
+}
+.claro .trans .inheritBgColor {
+    background: transparent;
+    color: #ffffff;
+}
+
+/*SelfColours! */
+.claro .blue.bg {
+    background-color: #0072bc;
+    color: #ffffff;
+}
+.claro .blue.light.bg {
+    background-color: #0794d1;
+    color: #ffffff;
+}
+.claro .green.bg {
+    background-color: #3aa605;
+    color: #ffffff;
+}
+.claro .green.light.bg {
+    background-color: #79ca0a;
+    color: #ffffff;
+}
+.claro .orange.bg {
+    background-color: #ff5b12;
+    color: #ffffff;
+}
+.claro .orange.light.bg {
+    background-color: #ff9140;
+    color: #ffffff;
+}
+.claro .red.bg {
     background-color: #8c0310;
     color: #ffffff;
 }
-.claro div.trans.inheritBgColor,
-.claro span.trans.inheritBgColor,
-.claro .trans .inheritBgColor {
-    background-color: transparent;
-    color: #ffffff;
-}
-.claro div.blue.inheritBgColor.light,
-.claro span.blue.inheritBgColor.light,
-.claro .blue .inheritBgColor.light {
-    background-color: #0794d1;
-    color: #ffffff;
-}
-.claro div.green.inheritBgColor.light,
-.claro span.green.inheritBgColor.light,
-.claro .green .inheritBgColor.light {
-    background-color: #79ca0a;
-    color: #ffffff;
-}
-.claro div.orange.inheritBgColor.light,
-.claro span.orange.inheritBgColor.light,
-.claro .orange .inheritBgColor.light {
-    background-color: #ff9140;
-    color: #ffffff;
-}
-.claro div.purple.inheritBgColor.light,
-.claro span.purple.inheritBgColor.light,
-.claro .purple .inheritBgColor.light {
+.claro .red.light.bg {
+    background-color: #bd0013;
+    color: #ffffff;   
+}
+.claro .purple.bg {
+    background-color: #6529b7;
+    color: #ffffff;
+}
+.claro .purple.light.bg {
     background-color: #993dec;
     color: #ffffff;
 }
-.claro div.red.inheritBgColor.light,
-.claro span.red.inheritBgColor.light,
-.claro .red .inheritBgColor.light {
-    background-color: #bd0013;
-    color: #ffffff;
-}
-
-/*TODO: Apply these classes to display elements that need to inherit the interface's object colour!
-Remove/disable other references to these colours from files like rftButtons, rftLineWithButtons, etc to make sure it works properly.
-Put these settings in a separate "colours.css" file to separate the concern of styling these objects from other layout-oriented properties.
-When we add things like highlightColours, borders, etc, the list could become quite long, especially if more colours are added to the colour scheme in time.
-
-
-Dropdown menu on MenuBar*/
+.claro .white.bg {
+    background-color: #ffffff;
+    color: #000000;
+}
+.claro .black.bg {
+    background-color: #000000;
+    color: #ffffff;
+}
+.claro .trans.bg {
+    background: transparent;
+    color: #ffffff;
+}
+
+/*Dropdown menu on MenuBar */
 .claro .dijitMenuPopup {
 
@@ -541 +591 @@
   padding-left: 5px;
 }
-
 .labelsAndValues-valueCell {
   padding-left: 20px;