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

Timestamp:

06/04/12 18:09:33 (13 years ago)

Author:

tjcschipper

Message:

• Switched away from using custom themes, this allows us to use the default Claro theme off of a CDN, then override the needed properties using our own, much smaller stylesheets. Retains graceful degradation of dijit style.
• Made rftLineWithActions also work outside of the context of an rftSelector.css
• Fixed some general layout issues
• Redid the tabs styling

File:

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

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

@@ -1 +1 @@
 /* And now for the RFT specific stuff! */
 /*LargeButton*/
-.gamelab .rftLargeButton {
+.claro .rftLargeButton {
     margin-right: 16px;
 }
-.gamelab .rftLargeButton .dijitButtonNode {
+.claro .rftLargeButton .dijitButtonNode {
     border: none;
     height: 24px;
@@ -17 +17 @@
     -o-transition: color 0.3s;
 }
-.gamelab .rftLargeButton .rftIcon {
+.claro .rftLargeButton .rftIcon {
     width: 24px;
     height: 24px;
     background-image: url('images/icons/rftIcons24.png');
 }
-.gamelab .rftLargeButton .dijitButtonText {
+.claro .rftLargeButton .dijitButtonText {
     line-height: 24px;
     margin-left: 6px;
     padding: 0;
 }
-.gamelab .rftLargeButton.rftLargeButtonHover .dijitButtonNode {
+.claro .rftLargeButton.rftLargeButtonHover .dijitButtonNode {
     transition: color 0.1s;
     -moz-transition: color 0.1s;
@@ -34 +34 @@
     color: #ffffff;
 }
-.gamelab .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+.claro .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
     color: #0794d1;
     transition: color 0.1s;
@@ -43 +43 @@
 
 /*BlockButton*/
-.gamelab .rftBlockButton {
+.claro .rftBlockButton {
     height: 24px;
     margin: 0;
     line-height: 20px;
 }
-.gamelab .rftBlockButton .dijitButtonNode {
+.claro .rftBlockButton .dijitButtonNode {
     height: 24px;
     padding: 0 4px;
@@ -62 +62 @@
     -o-transition: background-color 0.3s;
 }
-.gamelab .rftBlockButton .rftIcon {
+.claro .rftBlockButton .rftIcon {
     height: 16px;
     width: 16px;
     background-image: url('images/icons/rftIcons16.png');
 }
-.gamelab .rftBlockButton.rftBlockButtonHover .rftIcon {
+.claro .rftBlockButton.rftBlockButtonHover .rftIcon {
     background-image: url('images/icons/rftIcons16black.png');
 }
-.gamelab .rftBlockButton.rftBlockButtonHover .dijitButtonNode {
+.claro .rftBlockButton.rftBlockButtonHover .dijitButtonNode {
     /*background: #999999 !important;*/
     /* Currently not used, only applicable when all the different colours of BlockButton need the same background colour on hover */
@@ -78 +78 @@
     -o-transition: background-color 0.1s;
 }
-.gamelab .rftBlockButton.blue .dijitButtonNode {
+.claro .rftBlockButton.blue .dijitButtonNode {
     background: #0794d1;
 }
-.gamelab .rftBlockButton.blue.rftBlockButtonHover .dijitButtonNode {
+.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;
 }
-.gamelab .rftBlockButton.red .dijitButtonNode {
+.claro .rftBlockButton.red .dijitButtonNode {
     background: #bd0013;
 }
-.gamelab .rftBlockButton.red.rftBlockButtonHover .dijitButtonNode {
+.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;
 }
-.gamelab .rftBlockButton.green .dijitButtonNode {
+.claro .rftBlockButton.green .dijitButtonNode {
     background: #79ca0a;
 }
-.gamelab .rftBlockButton.green.rftBlockButtonHover .dijitButtonNode {
+.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;
 }
-.gamelab .rftBlockButton.orange .dijitButtonNode {
+.claro .rftBlockButton.orange .dijitButtonNode {
     background: #ff9140;
 }
-.gamelab .rftBlockButton.orange.rftBlockButtonHover .dijitButtonNode {
+.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;
 }
-.gamelab .rftBlockButton.purple .dijitButtonNode {
+.claro .rftBlockButton.purple .dijitButtonNode {
     background: #993dec;
 }
-.gamelab .rftBlockButton.purple.rftBlockButtonHover .dijitButtonNode {
+.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;
@@ -116 +116 @@
 
 /* InlineButton */
-.gamelab .rftInlineButton {
+.claro .rftInlineButton {
+    float: right;
     height: 24px;
-    margin: 0 -6px 0 -2px;
+    width: 24px;
 }
-.gamelab .rftInlineButton .dijitButtonNode {
+.claro .rftInlineButton .dijitButtonNode {
     width: 24px;
     height: 24px;
@@ -128 +129 @@
     border: none;
 }
-.gamelab .rftInlineButton .rftIcon {
+.claro .rftInlineButton .rftIcon {
     width: 16px;
     height: 16px;
-    margin: 0 4px 0 4px;
     background-image: url('images/icons/rftIcons16.png');
 }
-.gamelab .rftInlineButton.white .rftIcon {
+.claro .rftInlineButton.white .rftIcon {
     background-image: url('images/icons/rftIcons16.png');
 }
-.gamelab .rftInlineButton.black .rftIcon {
+.claro .rftInlineButton.black .rftIcon {
     background-image: url('images/icons/rftIcons16black.png');
 }
-.gamelab .rftInlineButton.rftInlineButtonHover .dijitButtonNode {
-    /* No changes so far */
-    /*background-color: #ff00ff;*/
-}
-.gamelab .rftInlineButton.rftInlineButtonHover .rftIcon {
+.claro .rftInlineButton.rftInlineButtonHover .rftIcon {
     /* We should use either the displacement or the background image change, not both! */
     /*background-image: url('../../icons/images/rftIcons16c.png');*/
-    margin: 1px 4px -1px 4px;
+    margin-top: 1px;
 }
-.gamelab .rftInlineButton.rftInlineButtonActive .rftIcon {
+.claro .rftInlineButton.rftInlineButtonActive .rftIcon {
     /* This "afterclick" is optional. Check to see if people like it or not! */
-    margin: 2px 4px -2px 4px;
+    /* Good, the displacement on click does not come from these settings! */
 }
 
 /* MainMenuButton */
-.gamelab .dijitMenuBar .rftMainMenuButton {
+.claro .dijitMenuBar .rftMainMenuButton {
     border: none;
     height: 30px;
@@ -173 +169 @@
     -o-transition: all 0.3s;
 }
-.gamelab .dijitMenuBar .rftMainMenuButton.dijitMenuItemHover {
+.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemHover {
     color: #ffffff;
     font-size: 26px;
@@ -181 +177 @@
     -o-transition: all 0.1s;
 }
-.gamelab .dijitMenuBar .rftMainMenuButton.dijitMenuItemActive {
+.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemActive {
     color: #0794d1 !important;
     font-size: 26px;
@@ -189 +185 @@
     -o-transition: all 0.1s;
 }
-.gamelab .dijitMenuBar .rftMainMenuButton.dijitMenuItemSelected {
+.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemSelected {
     color: #ffffff;
     font-size: 26px;