lib/dijit/themes/claro/Toolbar.css

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