Changeset 411 for Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftButtons.less

Timestamp:

10/10/12 17:45:49 (13 years ago)

Author:

tjcschipper

Message:

• LESS is finally ready for use. Some small visual bugs remain.

File:

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

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

@@ -47 +47 @@
                 }
 
-                //colors
+                //colors on hover
                 span.blue.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
                 .blue .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
-                        color: #0794d1;
+                        color: @blue_light;
                 }
                 span.orange.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
                 .orange .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
-                        color: #ff9140;
+                        color: @orange_light;
                 }
                 span.green.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
                 .green .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
-                        color: #79ca0a;
+                        color: @green_light;
                 }
                 span.red.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
                 .red .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
-                        color: #bd0013;
+                        color: @red_light;
                 }
                 span.purple.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
                 .purple .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
-                        color: #993dec;
+                        color: @purple_light;
                 }
 
@@ -76 +76 @@
                         height: @button_block_height;
                         line-height: @button_block_height;
+                        vertical-align: top;
 
                         .dijitButtonNode {
                                 .flatShading;
                                 .transition (0.3s);
+                                line-height: @button_block_height;
+                                vertical-align: top;
                                 height: @button_block_height;
                                 padding: 0 @std_offset;
@@ -87 +90 @@
 
                                 .rftIcon {
-                                        .setIcon(24px);
+                                        .setIcon(16px);
                                 }
                         }
@@ -95 +98 @@
                                 .transition (0.1s);
                                 .rftIcon {
-                                        .setIcon(24px, black);
+                                        vertical-align: top;
+                                        .setIcon(16px, black);
                                 }
                         }
+
+                        //Disabled because this is presumably useless
+                        // &.blue {
+                        //      .blockButtonColorMixin ("blue");
+                        // }
+                        // &.green {
+                        //      .blockButtonColorMixin ("green");
+                        // }
+                        // &.orange {
+                        //      .blockButtonColorMixin ("orange");
+                        // }
+                        // &.red {
+                        //      .blockButtonColorMixin ("red");
+                        // }
+                        // &.purple {
+                        //      .blockButtonColorMixin ("purple");
+                        // }
                 }
 
-                //Old colour settings
-                //TODO: I AM NOT SURE IF THIS ACTUALLY WORKS! THOROUGHLY TEST WHEN APPLIED TO PAGES!!!!
-                // Oke, wat. Deze shit is echt niet te snappen. :P Gewoon maar weer de oude meuk erin hangen?
-                .buttonColorMixin (@color) {
-                        &.rftBlockButtonHover {
-                                .dijitButtonNode {
-                                        background-color: @@color;
-                                }
-                                &.light {
-                                        .dijitButtonNode {
-                                                @colorName: "@{color}_light";
-                                                background-color: @@colorName;
-                                        }
-                                }
-                        }
-                        .rftBlockButtonHover {
-                                .dijitButtonNode {
-                                        background-color: @@color;
-                                }
-                                &.light {
-                                        .dijitButtonNode {
-                                                @colorName: "@{color}_light";
-                                                background-color: @@colorName;
-                                        }
-                                }
-                        }
-                        &.light {
-                                .rftBlockButtonHover {
-                                        .dijitButtonNode {
-                                                @colorName: "@{color}_light";
-                                                background-color: @@colorName;
-                                        }
-                                }
-                        }
-                }
+                
 
-                .blue {
-                        .buttonColorMixin ("blue");
-                }
-                .green {
-                        .buttonColorMixin ("green");
-                }
-                .orange {
-                        .buttonColorMixin ("orange");
-                }
-                .red {
-                        .buttonColorMixin ("red");
-                }
-                .purple {
-                        .buttonColorMixin ("purple");
-                }
+