Changeset 396 for Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.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/rftButtons.css (modified) (3 diffs)

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

@@ -43 +43 @@
 }
 .claro .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
-    color: #0794d1;
     transition: color 0.1s;
     -moz-transition: color 0.1s;
@@ -49 +48 @@
     -o-transition: color 0.1s;
 }
-
-/*BlockButton*/
+.claro span.blue.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+.claro .blue .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+    color: #0794d1;
+}
+.claro span.orange.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+.claro .orange .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+    color: #ff9140;
+}
+.claro span.green.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+.claro .green .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+    color: #79ca0a;
+}
+.claro span.red.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+.claro .red .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+    color: #bd0013;
+}
+.claro span.purple.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+.claro .purple .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+    color: #993dec;
+}
+
+/****************************************************
+/*  BlockButton
+/***************************************************/
+
 .claro .rftBlockButton {
     height: 24px;
@@ -93 +115 @@
 }
 
-/* Color hovers */
-/* These pertain to the 'normal' blockButtons - those that are placed on an empty background (gray) */
-.claro span.orange.inheritBgColor.rftBlockButtonHover,
+/* Hover effects */
+/*Normal*/
+.claro span.blue.bg.rftBlockButtonHover,
+.claro .blue .inheritBgColor.rftBlockButtonHover {
+    background-color: #0794d1;
+}
+.claro span.orange.bg.rftBlockButtonHover,
 .claro .orange .inheritBgColor.rftBlockButtonHover {
-    background-color: #ff9140 !important;
-}
-.claro span.orange.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
+    background-color: #ff9140;
+}
+.claro span.green.bg.rftBlockButtonHover,
+.claro .green .inheritBgColor.rftBlockButtonHover {
+    background-color: #79ca0a;
+}
+.claro span.red.bg.rftBlockButtonHover,
+.claro .red .inheritBgColor.rftBlockButtonHover {
+    background-color: #bd0013;
+}
+.claro span.purple.bg.rftBlockButtonHover,
+.claro .purple .inheritBgColor.rftBlockButtonHover {
+    background-color: #993dec;
+}
+/*Light*/
+.claro span.blue.light.bg.rftBlockButtonHover .dijitButtonNode,
+.claro .blue .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
+    color: #0072bc;
+}
+.claro span.orange.light.bg.rftBlockButtonHover .dijitButtonNode,
+.claro .orange .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
+    color: #ff5b12;
+}
+.claro span.green.light.bg.rftBlockButtonHover .dijitButtonNode,
+.claro .green .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
+    color: #3aa605;
+}
+.claro span.red.light.bg.rftBlockButtonHover .dijitButtonNode,
+.claro .red .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
+    color: #8c0310;
+}
+.claro span.purple.light.bg.rftBlockButtonHover .dijitButtonNode,
+.claro .purple .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
+    color: #6529b7;
+}
+/* Set all .light .bg/.inheritBgColors hover to White background! */
+.claro span.light.bg.rftBlockButtonHover,
+.claro .light.inheritBgColor.rftBlockButtonHover {
+    background-color: #ffffff;
+}
+
+/* Active effects */
+/*Normal*/
+.claro span.blue.bg.rftBlockButtonActive .dijitButtonNode,
+.claro .blue .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
+    color: #0072bc;
+}
+.claro span.orange.bg.rftBlockButtonActive .dijitButtonNode,
 .claro .orange .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
     color: #ff5b12;
 }
-.claro span.blue.inheritBgColor.rftBlockButtonHover,
-.claro .blue .inheritBgColor.rftBlockButtonHover {
-    background-color: #0794d1 !important;
-}
-.claro span.blue.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
-.claro .blue .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
-    color: #0072bc;
-}
-.claro span.green.inheritBgColor.rftBlockButtonHover,
-.claro .green .inheritBgColor.rftBlockButtonHover {
-    background-color: #79ca0a !important;
-}
-.claro span.green.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
+.claro span.green.bg.rftBlockButtonActive .dijitButtonNode,
 .claro .green .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
     color: #3aa605;
 }
-.claro span.red.inheritBgColor.rftBlockButtonHover,
-.claro .red .inheritBgColor.rftBlockButtonHover {
-    background-color: #bd0013 !important;
-}
-.claro span.red.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
+.claro span.red.bg.rftBlockButtonActive .dijitButtonNode,
 .claro .red .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
     color: #8c0310;
 }
-.claro span.purple.inheritBgColor.rftBlockButtonHover,
-.claro .purple .inheritBgColor.rftBlockButtonHover {
-    background-color: #993dec !important;
-}
-.claro span.purple.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
+.claro span.purple.bg.rftBlockButtonActive .dijitButtonNode,
 .claro .purple .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
     color: #6529b7;
 }
+/* Set bg color to white for all normal .bg/.inheritBgColors on active! */
+.claro span.bg.rftBlockButtonActive,
 .claro .inheritBgColor.rftBlockButtonActive {
-    background-color: #ffffff !important;
-}
-
-/* These pertain to 'docked' BlockButtons, those on a coloured background, identified by the class "light" */
-.claro span.light.inheritBgColor.rftBlockButtonHover,
-.claro .light .inheritBgColor.rftBlockButtonHover {
-    background-color: #ffffff !important;
-}
-.claro span.light.inheritBgColor.rftBlockButtonHover .dijitButtonNode,
-.claro .light .inheritBgColor.rftBlockButtonHover .dijitButtonNode {
-    color: #000000;
-}
-.claro span.light.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
-.claro .light .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
-    color: #ffffff;
-}
-/* colour specific ones*/
-.claro span.orange.light.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
-.claro .orange .light.inheritBgColor.rftBlockButtonActive .dijitButtonNode {
-    background-color: #ff5b12 !important;
-}
-.claro span.green.light.inheritBgColor.rftBlockButtonActive,
+    background-color: #ffffff;
+}
+/*Light*/
+.claro span.blue.light.bg.rftBlockButtonActive,
+.claro .blue .light.inheritBgColor.rftBlockButtonActive {
+    background-color: #0072bc;
+}
+.claro span.orange.light.bg.rftBlockButtonActive,
+.claro .orange .light.inheritBgColor.rftBlockButtonActive {
+    background-color: #ff5b12;
+}
+.claro span.green.light.bg.rftBlockButtonActive,
 .claro .green .light.inheritBgColor.rftBlockButtonActive {
-    background-color: #3aa605 !important;
-}
-.claro span.red.light.inheritBgColor.rftBlockButtonActive,
+    background-color: #3aa605;
+}
+.claro span.red.light.bg.rftBlockButtonActive,
 .claro .red .light.inheritBgColor.rftBlockButtonActive {
-    background-color: #8c0310 !important;
-}
-.claro span.purple.light.inheritBgColor.rftBlockButtonActive,
+    background-color: #8c0310;
+}
+.claro span.purple.light.bg.rftBlockButtonActive,
 .claro .purple .light.inheritBgColor.rftBlockButtonActive {
-    background-color: #6529b7 !important;
-}
-.claro span.blue.light.inheritBgColor.rftBlockButtonActive,
-.claro .blue .light.inheritBgColor.rftBlockButtonActive {
-    background-color: #0072bc !important;
-}
-
-
-/* InlineButton */
+    background-color: #6529b7;
+}
+/* Set text color to white for all .light.bg/.light.inheritBgColor on active! */
+.claro span.light.bg.rftBlockButtonActive .dijitButtonNode,
+.claro .light.inheritBgColor.rftBlockButtonActive .dijitButtonNode {
+    color: #ffffff;
+}
+
+/****************************************************
+/*  InlineButton
+/***************************************************/
 .claro .rftInlineButton {
     float: right;