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         .standard-gradient;
  27         padding: 2px 0 2px 4px;
  28         zoom: 1;
  29 }
  30
  31 .claro .dijitToolbar label {
  32         padding: 0 3px 0 6px;
  33 }
  34
  35 /** override claro/form/Button.css, and also ComboBox down arrow **/
  36 .claro .dijitToolbar .dijitButton .dijitButtonNode,
  37 .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
  38 .claro .dijitToolbar .dijitComboButton .dijitButtonNode,
  39 .claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
  40 .claro .dijitToolbar .dijitComboBox .dijitButtonNode {
  41         border-width: 0;        /* on hover/active, border-->1px, padding-->1px */
  42         padding: 2px;
  43         .border-radius(@toolbar-button-border-radius);
  44         .box-shadow(none);
  45         .transition-property(background-color);
  46         .transition-duration(.3s);
  47
  48         background-color:rgba(171,214,255,0);
  49         background-image: none; /* cancel gradient for normal buttons, we don't want any gradient besides toolbar's on non-hovered buttons */
  50 }
  51 .dj_ie .claro .dijitToolbar .dijitButton .dijitButtonNode,
  52 .dj_ie .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
  53 .dj_ie .claro .dijitToolbar .dijitComboButton .dijitButtonNode,
  54 .dj_ie .claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
  55 .dj_ie .claro .dijitToolbar .dijitComboBox .dijitButtonNode {
  56         background-color: transparent;   /* for IE, which doesn't understand rgba(...) */
  57 }
  58
  59 /* hover status */
  60 .dj_ie .claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
  61 .dj_ie .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
  62 .dj_ie .claro .dijitToolbar .dijitComboButton .dijitButtonNodeHover,
  63 .dj_ie .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover,
  64 .dj_ie .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode {
  65     /* button should still turn blue on hover, so need to override .dj_ie rules above */
  66         background-color: @button-hovered-background-color;
  67 }
  68
  69 /* active status */
  70 .dj_ie .claro .dijitToolbar .dijitButtonActive .dijitButtonNode,
  71 .dj_ie .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode,
  72 .dj_ie .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode,
  73 .dj_ie .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode {
  74     /* button should still turn blue on press, so need to override .dj_ie rules above */
  75         background-color: @button-pressed-background-color;
  76 }
  77
  78 .claro .dijitToolbar .dijitComboButton .dijitStretch {
  79         /* no rounded border on side adjacent to arrow */
  80         .border-radius(@toolbar-button-border-radius 0 0 @toolbar-button-border-radius);
  81 }
  82 .claro .dijitToolbar .dijitComboButton .dijitArrowButton {
  83         /* no rounded border on side adjacent to button */
  84         .border-radius(0 @toolbar-button-border-radius @toolbar-button-border-radius 0);
  85 }
  86
  87 .claro .dijitToolbar .dijitComboBox .dijitButtonNode {
  88         padding: 0;
  89 }
  90
  91 /* hover status */
  92 .claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
  93 .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
  94 .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode,
  95 .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode {
  96         border-width:1px;
  97         background-color: @hovered-background-color;
  98         .standard-gradient;
  99         padding: 1px;
 100 }
 101 .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode,
 102 .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton {
 103         background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color;
 104 }
 105 .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover,
 106 .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover {
 107         background-color: @hovered-background-color;
 108 }
 109
 110 /* active status */
 111 .claro .dijitToolbar .dijitButtonActive .dijitButtonNode,
 112 .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode,
 113 .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode {
 114         border-width: 1px;
 115         background-color:@pressed-background-color;
 116         .active-gradient;
 117         padding: 1px;
 118 }
 119 .claro .dijitToolbar .dijitComboButtonActive {
 120         .transition-duration(.2s);
 121         border-width: 1px;
 122         padding: 0;
 123 }
 124 .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode,
 125 .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton {
 126         background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color;
 127         padding: 2px;
 128 }
 129 .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive {
 130         background-color: @pressed-background-color;
 131         .active-gradient;
 132 }
 133 .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive {
 134         background-color: @pressed-background-color;
 135         .active-gradient;
 136 }
 137
 138 /* Avoid double border between button and arrow */
 139 .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton,
 140 .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton {
 141         border-left-width: 0;
 142 }
 143 .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton {
 144         padding-left: 2px;              /* since there's no left border, don't reduce from 2px --> 1px */
 145 }
 146
 147 /* toggle button checked status */
 148 .claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode {
 149         margin: 0;      /* remove margin and add a border */
 150         border-width: 1px;
 151         border-style: solid;
 152         background-image: none;
 153         border-color: @selected-border-color;
 154         background-color: @toolbar-button-checked-background-color;
 155         padding: 1px;
 156 }
 157
 158 .claro .dijitToolbarSeparator {
 159         /* separator icon in the editor sprite */
 160         background: url(@image-editor-icons-enabled);
 161 }
 162
 163 /* Toolbar inside of disabled Editor */
 164 .claro .dijitDisabled .dijitToolbar {
 165         background:none;
 166         background-color:@disabled-background-color;
 167         border-bottom: 1px solid @disabled-border-color;
 168 }
 169
 170 .claro .dijitToolbar .dijitComboBoxDisabled .dijitArrowButtonInner {
 171         background-position:0 50%;
 172 }
 173