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

Timestamp:

06/29/12 19:56:22 (13 years ago)

Author:

tjcschipper

Message:

• Finally fixed icon offsets and added a couple new icons for use in the Question/Survey? editors,as well as general purpose ones.
• Styled the dropdown menu in the MainMenu?
• Fixed a weird offset bug in the IndexMenu?
• Included another way of colouring objects by their parent classes, not applied yet (in layout.css)
• Styled the AccordionContainer?, to be used in Survey/Question? editors.
• Removed default colour in LineWithActionsWidgetThijs?, this would override the colours inherited from parent elements (not desirable).
• Drank a lot of coffee.

File:

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

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

@@ -275 +275 @@
     width: 100px !important;
 }
+
+
+/* Question editor/Survey Advanced editor */
+.claro .QuestionEditor .PreviewWindow {
+    /* Nothing yet, put preview window styling options here after we've decided on a format to follow! */
+}
+
+.claro .dijitAccordionContainer {
+    /* No styling for now, use this for margins and other layout-related business. This class does not affect the look of the AccordionContainer currently! */
+}
+.claro .dijitAccordionInnerContainer {
+    /* This contains a title and a childWrapper. The two of these make up one "item" in the Accordion element */
+    border: none;
+    border-color: #333333;
+    background-color: #0072bc;
+    margin-bottom: 0;
+}
+.claro .dijitAccordionInnerContainer {
+    background-color: transparent;
+}
+.claro .dijitAccordionTitle, .claro .dijitAccordionTitleSelected {
+    background-color: #0072bc;
+    background-image: none;
+    color: #ffffff;
+}
+.claro .dijitAccordionTitle .rftIcon {
+    width: 16px;
+    height: 16px;
+    background-image: url('images/icons/rftIcons16b.png');
+    margin: 0 4px 2px 0;
+}
+.claro .dijitAccordionTitleSelected .rftIcon {
+    background-image: url('images/icons/rftIcons16.png');
+}
+.claro .dijitAccordionContainer.blue .dijitAccordionTitle, .claro .dijitAccordionContainer.blue .dijitAccordionTitleSelected {
+    background-color: #0072bc;
+}
+.claro .dijitAccordionContainer.blue .dijitAccordionTitleHover {
+    background-color: #0794d1;
+}
+.claro .dijitAccordionContainer.orange .dijitAccordionTitle, .claro .dijitAccordionContainer.orange .dijitAccordionTitleSelected {
+    background-color: #ff5b12;
+}
+.claro .dijitAccordionContainer.orange .dijitAccordionTitleHover {
+    background-color: #ff9140;
+}
+.claro .dijitAccordionText {
+    color: #ffffff;
+}
+.claro .dijitAccordionContainer .dijitAccordionChildWrapper {
+    background-color: #444444;
+    border: none !important;
+    padding: 0;
+    margin: 0;
+}
+.claro .dijitAccordionContainer .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper,
+.claro .dijitAccordionContainer .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper {
+    border: none;
+    box-shadow: none;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    /* Override the box shadow and offset on hover */
+}
+
+
+/* THIS IS AN EXPERIMENT !
+ * This will allow to set one top colour, then all the "objectBgColor" or "objectHlColor" objects below it will inherit that colour, and apply it to the relevant CSS property.
+ * Not applying these classes to an object will make it bypass the background settings.
+*/ 
+
+.claro div.blue.objectBgColor,
+.claro .blue .objectBgColor {
+    background-color: #0072bc;
+}
+.claro div.lblue.objectBgColor,
+.claro .lblue .objectBgColor {
+    background-color: #0794d1;
+}
+.claro div.orange.objectBgColor,
+.claro .orange .objectBgColor {
+    background-color: #ff5b12;
+}
+.claro div.lorange.objectBgColor,
+.claro .lorange .objectBgColor {
+    background-color: #ff9140;
+}
+.claro div.green.objectBgColor,
+.claro .green .objectBgColor {
+    background-color: #3aa605;
+}
+.claro div.lgreen.objectBgColor,
+.claro .lgreen .objectBgColor {
+    background-color: #79ca0a;
+}
+.claro div.purple.objectBgColor,
+.claro .purple .objectBgColor {
+    background-color: #6529b7;
+}
+.claro div.lpurple.objectBgColor,
+.claro .lpurple .objectBgColor {
+    background-color: #993dec;
+}
+.claro div.red.objectBgColor,
+.claro .red .objectBgColor {
+    background-color: #8c0310;
+}
+.claro div.lred.objectBgColor,
+.claro .lred .objectBgColor {
+    background-color: #bd0013;
+}
+/* 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 .dijitMenuPopup {
+
+}
+.claro .dijitMenuPopup .dijitMenu {
+border: none;
+background-color: #333333;
+background-image: none;
+color: #999999;   
+}
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItem {
+    color: #999999;
+    background-image: none;
+    background-color: transparent;
+}
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.blue,
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.blue {
+    background-color: #0072bc;
+}
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.orange,
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.orange {
+    background-color: #ff5b12;
+}
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.purple,
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.purple {
+    background-color: #6529b7;
+}
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.green,
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.green {
+    background-color: #3aa605;
+}
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.red,
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.red {
+    background-color: #8c0310;
+}
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover .dijitMenuItemLabel,
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemActive .dijitMenuItemLabel,
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected .dijitMenuItemLabel {
+    color: #ffffff;
+}
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItem .rftIcon {
+    height: 16px;
+    width: 16px;
+    margin: 0;
+    margin-right: 4px;
+    background-image: url('images/icons/rftIcons16.png');
+} 
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemActive .rftIcon {
+    background-image: url('images/icons/rftIcons16b.png');
+}