Changeset 395 for Dev/branches/rest-dojo-ui/client/rft/css

Timestamp:

08/08/12 18:06:21 (13 years ago)

Author:

tjcschipper

Message:

• Fixed inheritBgColor CSS classes. Now works for buttons as well. LineWithActions? and the classes that use it still need some changes. LWA needs to get rid of colour "modifier" property and always pass "inheritBgColor (light, optionally) to the buttons". Classes that use LWA need to stop passing modifiers to them;)
• Improved SurveyEditorPreviewItem? design, less of an eyesore, and can now use the correct button colors.

Location:

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

Files:

• layout.css (modified) (11 diffs)
• rftButtons.css (modified) (3 diffs)
• rftLineWithButtons.css (modified) (1 diff)
• rftSelector.css (modified) (1 diff)
• surveyEditor.css (modified) (2 diffs)

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

@@ -342 +342 @@
 }
 
+/* DojoX.TitleGroup, replacement of AccordionContainer in Question Editor */
+.claro .dojoxTitleGroup {
+    /* No styling yet */
+}
+.claro .dojoxTitleGroup .dijitTitlePane {
+    margin: 0;
+}
+.claro .orange .dojoxTitleGroup .dijitTitlePaneTitle {
+    background-color: #ff5b12;
+    background-image: none;
+    border: none;
+    padding: 0 4px;
+    height: 24px;
+    margin: 0;
+}
+.claro .orange .dojoxTitleGroup .dijitTitlePaneTitleHover, 
+.claro .ornage .dojoxTitleGroup .dijitTitlePanelTitleFocused {
+    background-color: #ff9140;
+}
+.claro .dojoxTitleGroup .dijitTitlePaneTextNode {
+    color: #ffffff;
+    font-size: 13px;
+    line-height: 24px;
+}
+.claro .dojoxTitleGroup .dijitTitlePaneContentOuter {
+    background-color: #444;
+    border: none;
+}
+.claro .dojoxTitleGroup .dijitTitlePaneTitleFocus {
+    margin: 0;
+}
+
 /* Experimental background colour inheritance */
 .claro div.blue.inheritBgColor,
+.claro span.blue.inheritBgColor,
 .claro .blue .inheritBgColor {
     background-color: #0072bc;
@@ -349 +382 @@
 }
 .claro div.green.inheritBgColor,
+.claro span.green.inheritBgColor,
 .claro .green .inheritBgColor {
     background-color: #3aa605;
@@ -354 +388 @@
 }
 .claro div.orange.inheritBgColor,
+.claro span.orange.inheritBgColor,
 .claro .orange .inheritBgColor {
     background-color: #ff5b12;
@@ -359 +394 @@
 }
 .claro div.purple.inheritBgColor,
+.claro span.purple.inheritBgColor,
 .claro .purple .inheritBgColor {
     background-color: #6529b7;
@@ -364 +400 @@
 }
 .claro div.red.inheritBgColor,
+.claro span.red.inheritBgColor,
 .claro .red .inheritBgColor {
     background-color: #8c0310;
@@ -369 +406 @@
 }
 .claro div.trans.inheritBgColor,
+.claro span.trans.inheritBgColor,
 .claro .trans .inheritBgColor {
     background-color: transparent;
@@ -374 +412 @@
 }
 .claro div.blue.inheritBgColor.light,
+.claro span.blue.inheritBgColor.light,
 .claro .blue .inheritBgColor.light {
     background-color: #0794d1;
@@ -379 +418 @@
 }
 .claro div.green.inheritBgColor.light,
+.claro span.green.inheritBgColor.light,
 .claro .green .inheritBgColor.light {
     background-color: #79ca0a;
@@ -384 +424 @@
 }
 .claro div.orange.inheritBgColor.light,
+.claro span.orange.inheritBgColor.light,
 .claro .orange .inheritBgColor.light {
     background-color: #ff9140;
@@ -389 +430 @@
 }
 .claro div.purple.inheritBgColor.light,
+.claro span.purple.inheritBgColor.light,
 .claro .purple .inheritBgColor.light {
     background-color: #993dec;
@@ -394 +436 @@
 }
 .claro div.red.inheritBgColor.light,
+.claro span.red.inheritBgColor.light,
 .claro .red .inheritBgColor.light {
     background-color: #bd0013;

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

@@ -1 @@
-/* And now for the RFT specific stuff! */
 /*LargeButton*/
 .claro .rftLargeButton, 
@@ -82 +81 @@
     background-image: url('images/icons/rftIcons16b.png') !important;
 }
+.claro .rftBlockButton.rftBlockButtonActive .rftIcon {
+    background-image: url('images/icons/rftIcons16b.png') !important;
+}
 .claro .rftBlockButton.rftBlockButtonHover .dijitButtonNode {
     /*background: #999999 !important;*/
@@ -90 +92 @@
     -o-transition: background-color 0.1s;
 }
-.claro .rftBlockButton.blue .dijitButtonNode {
-    background: #0794d1;
-}
-.claro .rftBlockButton.blue.rftBlockButtonHover .dijitButtonNode {
-    background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
-    color: #0794d1;
-}
-.claro .rftBlockButton.red .dijitButtonNode {
-    background: #bd0013;
-}
-.claro .rftBlockButton.red.rftBlockButtonHover .dijitButtonNode {
-    background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
-    color: #bd0013;
-}
-.claro .rftBlockButton.green .dijitButtonNode {
-    background: #79ca0a;
-}
-.claro .rftBlockButton.green.rftBlockButtonHover .dijitButtonNode {
-    background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
-    color: #79ca0a;
-}
-.claro .rftBlockButton.orange .dijitButtonNode {
-    background: #ff9140;
-}
-.claro .rftBlockButton.orange.rftBlockButtonHover .dijitButtonNode {
-    background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
-    color: #ff9140;
-}
-.claro .rftBlockButton.purple .dijitButtonNode {
-    background: #993dec;
-}
-.claro .rftBlockButton.purple.rftBlockButtonHover .dijitButtonNode {
-    background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
-    color: #993dec;
-}
-.claro .rftBlockButton.trans .dijitButtonNode {
-    background: transparent;
-}
-.claro .rftBlockButton.trans.rftBlockButtonHover .dijitButtonNode {
-    background: #ffffff !important;
+
+/* Color hovers */
+/* These pertain to the 'normal' blockButtons - those that are placed on an empty background (gray) */
+.claro span.orange.inheritBgColor.rftBlockButtonHover,
+.claro .orange .inheritBgColor.rftBlockButtonHover {
+    background-color: #ff9140 !important;
+}
+.claro span.orange.inheritBgColor.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 .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 .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 .purple .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
+    color: #6529b7;
+}
+.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,
+.claro .green .light.inheritBgColor.rftBlockButtonActive {
+    background-color: #3aa605 !important;
+}
+.claro span.red.light.inheritBgColor.rftBlockButtonActive,
+.claro .red .light.inheritBgColor.rftBlockButtonActive {
+    background-color: #8c0310 !important;
+}
+.claro span.purple.light.inheritBgColor.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 */

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

@@ -20 +20 @@
     float: left;
     margin: 0 8px 0 8px;
+    overflow: hidden;
 }
 

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

@@ -39 +39 @@
     background-color: #00ff00;
 }
-
-.claro .rftSelector .rftSelectorOptions .rftLineWithButtons.selected {
-    
-}

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

@@ -14 +14 @@
 .claro .surveyEditorPreviewItem .topBorder .title {
         margin: 0 16px 0 16px;
+        font-weight: bold;
 }
 
@@ -31 +32 @@
         padding: 8px;
         border: 1px solid #ffffff;
+        border-top-width: 0;
+        color: #ffffff;
 }
+
+.claro div.orange .surveyEditorPreviewItemContent {
+        border-color: #ff5b12;
+}
+
+.claro div.blue .surveyEditorPreviewItemContent {
+        border-color: #0794d1;
+}
+
+.claro div.orange .surveyEditorPreviewItem.dojoDndItemAnchor .inheritBgColor {
+        background-color: #FF9140;
+}
+.claro div.blue .surveyEditorPreviewItem.dojoDndItemAnchor .inheritBgColor {
+        background-color: #0794D1;
+}
+.claro div.green .surveyEditorPreviewItem.dojoDndItemAnchor .inheritBgColor {
+        background-color: #79CA0A;
+}
+.claro div.red .surveyEditorPreviewItem.dojoDndItemAnchor .inheritBgColor {
+        background-color: #BD0013;
+}
+.claro div.purple .surveyEditorPreviewItem.dojoDndItemAnchor .inheritBgColor {
+        background-color: #993DEC;
+}