lib/dijit/themes/claro/Toolbar.less

   1 /* Toolbar
   2  *
   3  * Styling Toolbar means styling the toolbar container and the widget inside toolbar  (dijitToolbar)
   4  *
   5  * 1. toolbar (default styling):
   6  *              .dijitToolbar - styles for outer container
   7  *
   8  * 2. widget inside toolbar
   9  *              .dijitToolbar .dijitButtonNode   - Button widget
  10  *                                        .dijitComboButton  - ComboButton widget
  11  *                                        .dijitDropDownButton  - DropDownButton widget
  12  *                                        .dijitToggleButton  - ToggleButton widget
  13  *
  14  * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside)
  15  *                      .dijitToolbar .dijitButtonNodeHover  - styles for hovered Button widget
  16  *
  17  * 4. actived widget inside toolbar (ie, mouse down on the widget inside)
  18  *                      .dijitToolbar .dijitButtonNodeActive  - mouse down on Button widget
  19  */
  20
  21 @import "variables";
  22
  23 .claro .dijitToolbar {
  24         border-bottom: 1px solid @border-color;
  25         background-color: @bar-background-color;
  26         background-image: url(@image-common-highlight);
  27         background-position:0 0;
  28         background-repeat:repeat-x;
  29         padding: 2px 0 2px 4px;
  30         zoom: 1;
  31 }
  32
  33 .claro .dijitToolbar label {
  34         padding: 0 3px 0 6px;
  35 }
  36
  37 /** override claro/form/Button.css, and also ComboBox down arrow **/
  38 .claro .dijitToolbar .dijitButton .dijitButtonNode,
  39 .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
  40 .claro .dijitToolbar .dijitComboButton .dijitButtonNode,
  41 .claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
  42 .claro .dijitToolbar .dijitComboBox .dijitButtonNode {
  43         border-width: 0;        /* on hover/active, border-->1px, padding-->1px */
  44         padding: 2px;
  45         .border-radius(@toolbar-button-border-radius);
  46         .box-shadow(none);
  47         .transition-property(background-color);
  48         .transition-duration(.3s, .35s);
  49
  50         background-image: url(@image-common-highlight);
  51         background-position:0 -30px;
  52         background-repeat:repeat-x;
  53         background-color:rgba(171,214,255,0);
  54 }
  55 .dj_ie .claro .dijitToolbar .dijitButton .dijitButtonNode,
  56 .dj_ie .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
  57 .dj_ie .claro .dijitToolbar .dijitComboButton .dijitButtonNode,
  58 .dj_ie .claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
  59 .dj_ie .claro .dijitToolbar .dijitComboBox .dijitButtonNode {
  60         background-color: transparent;   /* for IE, which doesn't understand rgba(...) */
  61 }
  62 .dj_ie6 .claro .dijitToolbar .dijitButton .dijitButtonNode,
  63 .dj_ie6 .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
  64 .dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNode,
  65 .dj_ie6 .claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
  66 .dj_ie6 .claro .dijitToolbar .dijitComboBox .dijitButtonNode {
  67         background: none;       /* because background-color: transparent above doesn't work on IE*/
  68 }
  69 /* hover status */
  70 .dj_ie .claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
  71 .dj_ie .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
  72 .dj_ie .claro .dijitToolbar .dijitComboButton .dijitButtonNodeHover,
  73 .dj_ie .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover,
  74 .dj_ie .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode {
  75     /* button should still turn blue on hover, so need to override .dj_ie rules above */
  76         background-color: @button-hovered-background-color;
  77 }
  78
  79 /* active status */
  80 .dj_ie .claro .dijitToolbar .dijitButtonActive .dijitButtonNode,
  81 .dj_ie .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode,
  82 .dj_ie .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode,
  83 .dj_ie .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode {
  84     /* button should still turn blue on press, so need to override .dj_ie rules above */
  85         background-color: @button-pressed-background-color;
  86 }
  87
  88 .claro .dijitToolbar .dijitComboButton .dijitStretch {
  89         /* no rounded border on side adjacent to arrow */
  90         .border-radius(@toolbar-button-border-radius 0 0 @toolbar-button-border-radius);
  91 }
  92 .claro .dijitToolbar .dijitComboButton .dijitArrowButton {
  93         /* no rounded border on side adjacent to button */
  94         .border-radius(0 @toolbar-button-border-radius @toolbar-button-border-radius 0);
  95 }
  96
  97 .claro .dijitToolbar .dijitComboBox .dijitButtonNode {
  98         padding: 0;
  99 }
 100
 101 /* hover status */
 102 .claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
 103 .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
 104 .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode,
 105 .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode {
 106         background-position:0 0;
 107         border-width:1px;
 108         background-color: @hovered-background-color;
 109         padding: 1px;
 110 }
 111 .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode,
 112 .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton {
 113         background-position:0 0;
 114         background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color;
 115 }
 116 .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover,
 117 .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover {
 118         background-color: @hovered-background-color;
 119 }
 120
 121 /* active status */
 122 .claro .dijitToolbar .dijitButtonActive .dijitButtonNode,
 123 .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode,
 124 .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode {
 125         border-width: 1px;
 126         background-color:@pressed-background-color;
 127         background-position:0 -177px;
 128         padding: 1px;
 129 }
 130 .claro .dijitToolbar .dijitComboButtonActive {
 131         .transition-duration(.2s);
 132         border-width: 1px;
 133         padding: 0;
 134 }
 135 .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode,
 136 .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton {
 137         background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color;
 138         background-position:0 -177px;
 139         padding: 2px;
 140 }
 141 .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive {
 142         background-color: @pressed-background-color;
 143 }
 144 .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive {
 145         background-color: @pressed-background-color;
 146 }
 147
 148 /* Avoid double border between button and arrow */
 149 .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton,
 150 .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton {
 151         border-left-width: 0;
 152 }
 153 .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton {
 154         padding-left: 2px;              /* since there's no left border, don't reduce from 2px --> 1px */
 155 }
 156
 157 /* toggle button checked status */
 158 .claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode {
 159         margin: 0;      /* remove margin and add a border */
 160         border-width: 1px;
 161         border-style: solid;
 162         background-image: none;
 163         border-color: @selected-border-color;
 164         background-color: @toolbar-button-checked-background-color;
 165         padding: 1px;
 166 }
 167
 168 .dj_ie6 .claro .dijitToolbar {
 169         background-image: none;
 170 }
 171
 172 .claro .dijitToolbarSeparator {
 173         /* separator icon in the editor sprite */
 174         background: url(@image-editor-icons-enabled);
 175 }
 176
 177 /* Toolbar inside of disabled Editor */
 178 .claro .dijitDisabled .dijitToolbar {
 179         background:none;
 180         background-color:@disabled-background-color;
 181         border-bottom: 1px solid @disabled-border-color;
 182 }
 183
 184 .claro .dijitToolbar .dijitComboBoxDisabled .dijitArrowButtonInner {
 185         background-position:0 50%;
 186 }
 187