Changeset 349 for Dev/branches/rest-dojo-ui/client/rft/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.

Location:

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

Files:

• images/icons/rftIcons16.png (modified) (previous)
• images/icons/rftIcons16b.png (added)
• images/icons/rftIcons16black.png (deleted)
• images/icons/rftIcons16c.png (deleted)
• images/icons/rftIcons24.png (modified) (previous)
• images/icons/rftIcons24b.png (added)
• images/icons/rftIcons32.png (modified) (previous)
• images/icons/rftIcons32b.png (added)
• layout.css (modified) (1 diff)
• rftButtons.css (modified) (3 diffs)
• rftIcons.css (modified) (5 diffs)
• rftLineWithButtons.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');
+}

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

@@ -22 +22 @@
     background-image: url('images/icons/rftIcons24.png');
 }
+.claro .rftLargeButton.black .rftIcon {
+    background-image: url('images/icons/rftIcons24b.png');
+}
 .claro .rftLargeButton .dijitButtonText {
     line-height: 24px;
@@ -66 +69 @@
     width: 16px !important;
     background-image: url('images/icons/rftIcons16.png') !important;
-    margin-right: 4px !important;
+}
+.claro .rftBlockButton .rftIcon.black {
+    background-image: url('images/icons/rftIcons16b.png') !important;
 }
 .claro .rftBlockButton.rftBlockButtonHover .rftIcon {
-    background-image: url('images/icons/rftIcons16black.png') !important;
+    background-image: url('images/icons/rftIcons16b.png') !important;
 }
 .claro .rftBlockButton.rftBlockButtonHover .dijitButtonNode {
@@ -145 +150 @@
 }
 .claro .rftInlineButton.black .rftIcon {
-    background-image: url('images/icons/rftIcons16black.png');
+    background-image: url('images/icons/rftIcons16b.png');
+}
+.claro .rftInlineButton .rftIcon.black {
+    background-image: url('images/icons/rftIcons16b.png');
+}
+.claro .rftInlineButton .rftIcon.white {
+    background-image: url('images/icons/rftIcons16.png');
 }
 .claro .rftInlineButton.rftInlineButtonHover .rftIcon {

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

@@ -1 @@
-/*  
+\/*  
     The icon's parent element class decides the icon size and url. (.rftLargeButton .rftIcon / .rftInlineButton .rftIcon, for example)
     The icon gets two classes: .rftIcon (which sets general spacing/positioning, etc), 
@@ -25 +25 @@
     Also, if possible put common/shared icons at the start of the list to prevent excessively large spritesheets.
 */
+
+/* Types */
 .rftIconApplication {
     background-position: 0px 0px;
@@ -64 +66 @@
     background-position: -384px 0px;
 }
+/* Actions */
 .rftIconAccept {
     background-position: -416px 0px;
@@ -97 +100 @@
     background-position: -736px 0px;
 }
-.rftIconSettings {
+.rftIconProperties {
     background-position: -768px 0px;
 }
@@ -121 +124 @@
     background-position: -992px 0px;
 }
-.rftIconFullArrowUp {
+.rftIconTag {
     background-position: -1024px 0px;
 }
-.rftIconFullArrowDown {
+.rftIconImage {
     background-position: -1056px 0px;
 }
-.rftIconFullArrowLeft {
+.rftIconEdit {
     background-position: -1088px 0px;
 }
-.rftIconFullArrowRight {
+.rftIconLock {
     background-position: -1120px 0px;
 }
-.rftIconHalfArrowUp {
+.rftIconUnlock {
     background-position: -1152px 0px;
 }
-.rftIconHalfArrowDown {
+.rftIconPreset {
     background-position: -1184px 0px;
 }
-.rftIconHalfArrowLeft {
+.rftIconTextBlock {
     background-position: -1216px 0px;
 }
+.rftIconPageBreak {
+    background-position: -1248px 0px;
+}
+.rftIconExternal {
+    background-position: -1280px 0px;
+}
+.rftIconInput {
+    background-position: -1312px 0px;
+}
+.rftIconPublish {
+    background-position: -1344px 0px;
+}
+
+/* Arrows */
+.rftIconFullArrowUp {
+    background-position: -1696px 0px;
+}
+.rftIconFullArrowDown {
+    background-position: -1728px 0px;
+}
+.rftIconFullArrowLeft {
+    background-position: -1760px 0px;
+}
+.rftIconFullArrowRight {
+    background-position: -1792px 0px;
+}
+.rftIconHalfArrowUp {
+    background-position: -1824px 0px;
+}
+.rftIconHalfArrowDown {
+    background-position: -1856px 0px;
+}
+.rftIconHalfArrowLeft {
+    background-position: -1888px 0px;
+}
 .rftIconHalfArrowRight {
-    background-position: -1248px 0px;
+    background-position: -1920px 0px;
 }
 

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

@@ -44 +44 @@
 }
 .claro div.orange.rftLineWithButtons,
-.claro .orange .ftLineWithButtons {
+.claro *.orange .rftLineWithButtons {
     background-color: #ff5b12;
     color: #ffffff;