lib/dijit/themes/claro/form/Button.css

   1 /* Button | DropDownButton | ComboButton | ToggleButton
   2  *
   3  * Styling Buttons mainly includes:
   4  *
   5  * 1. Containers
   6  *              .dijitButton
   7  *              .dijitDropDownButton
   8  *              .dijitComboButton
   9  *              .dijitButtonNode - common button/arrow wrapper shared across all three button types
  10  *
  11  * 2. Button text
  12  *              .dijitButtonText
  13  *
  14  * 3. Arrows - only for DropDownButton and ComboButton
  15  *           There are total four directions arrows - down, left, right, up:
  16  *              .dijitArrowButtonInner - down arrow by default
  17  *      .dijitLeftArrowButton .dijitArrowButtonInner - left arrow
  18  *      .dijitRightArrowButton .dijitArrowButtonInner - right arrow
  19  *      .dijitUpArrowButton .dijitArrowButtonInner - up arrow
  20  *
  21  * 4. States - Hover, Active, Disabled, e.g.
  22  *              .dijitButtonHover .dijitButtonNode
  23  *              .dijitButtonActive .dijitButtonNode
  24  *              .dijitButtonDisabled .dijitButtonNode
  25  *
  26  *      .dijitDisabled .dijitArrowButtonInner  - disabled arrow states
  27  */
  28 .claro .dijitButtonNode {
  29   /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */
  30
  31   -webkit-transition-property: background-color;
  32   -moz-transition-property: background-color;
  33   transition-property: background-color;
  34   -webkit-transition-duration: 0.3s;
  35   -moz-transition-duration: 0.3s;
  36   transition-duration: 0.3s;
  37 }
  38 .claro .dijitButton .dijitButtonNode,
  39 .claro .dijitDropDownButton .dijitButtonNode,
  40 .claro .dijitComboButton .dijitButtonNode,
  41 .claro .dijitToggleButton .dijitButtonNode {
  42   /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */
  43
  44   border: 1px solid #759dc0;
  45   padding: 2px 4px 4px 4px;
  46   color: #000000;
  47   -moz-border-radius: 4px;
  48   border-radius: 4px;
  49   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  50   -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  51   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  52   background-color: #bcd8f4;
  53   background-image: url("images/buttonEnabled.png");
  54   background-repeat: repeat-x;
  55   background-image: -moz-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%);
  56   background-image: -webkit-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%);
  57   background-image: -o-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%);
  58   background-image: linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%);
  59   _background-image: none;
  60 }
  61 .claro .dijitComboButton .dijitArrowButton {
  62   border-left-width: 0;
  63   padding: 4px 2px 4px 2px;
  64   /* TODO: still needed? */
  65
  66 }
  67 /*arrow styles for down/up/left/right directions*/
  68 .claro .dijitArrowButtonInner {
  69   width: 15px;
  70   height: 15px;
  71   margin: 0 auto;
  72   background-image: url("../form/images/buttonArrows.png");
  73   background-repeat: no-repeat;
  74   background-position: -51px 53%;
  75 }
  76 .claro .dijitLeftArrowButton .dijitArrowButtonInner {
  77   background-position: -77px 53%;
  78 }
  79 .claro .dijitRightArrowButton .dijitArrowButtonInner {
  80   background-position: -26px 53%;
  81 }
  82 .claro .dijitUpArrowButton .dijitArrowButtonInner {
  83   background-position: 0 53%;
  84 }
  85 .claro .dijitDisabled .dijitArrowButtonInner {
  86   background-position: -151px 53%;
  87 }
  88 .claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner {
  89   background-position: -177px 53%;
  90 }
  91 .claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner {
  92   background-position: -126px 53%;
  93 }
  94 .claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner {
  95   background-position: -100px 53%;
  96 }
  97 .claro .dijitButtonText {
  98   padding: 0 0.3em;
  99   text-align: center;
 100 }
 101 /* hover status */
 102 .claro .dijitButtonHover .dijitButtonNode,
 103 .claro .dijitDropDownButtonHover .dijitButtonNode,
 104 .claro .dijitComboButton .dijitButtonNodeHover,
 105 .claro .dijitComboButton .dijitDownArrowButtonHover,
 106 .claro .dijitToggleButtonHover .dijitButtonNode {
 107   background-color: #86bdf2;
 108   color: #000000;
 109   -webkit-transition-duration: 0.2s;
 110   -moz-transition-duration: 0.2s;
 111   transition-duration: 0.2s;
 112 }
 113 /* active, checked status */
 114 .claro .dijitButtonActive .dijitButtonNode,
 115 .claro .dijitDropDownButtonActive .dijitButtonNode,
 116 .claro .dijitComboButtonActive .dijitButtonNode,
 117 .claro .dijitToggleButtonActive .dijitButtonNode,
 118 .claro .dijitToggleButtonChecked .dijitButtonNode {
 119   background-color: #86bdf2;
 120   -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
 121   -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
 122   box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
 123   -webkit-transition-duration: 0.1s;
 124   -moz-transition-duration: 0.1s;
 125   transition-duration: 0.1s;
 126 }
 127 /* disabled status */
 128 .claro .dijitButtonDisabled,
 129 .claro .dijitDropDownButtonDisabled,
 130 .claro .dijitComboButtonDisabled,
 131 .claro .dijitToggleButtonDisabled {
 132   background-image: none;
 133   outline: none;
 134 }
 135 .claro .dijitButtonDisabled .dijitButtonNode,
 136 .claro .dijitDropDownButtonDisabled .dijitButtonNode,
 137 .claro .dijitComboButtonDisabled .dijitButtonNode,
 138 .claro .dijitToggleButtonDisabled .dijitButtonNode {
 139   background-color: #efefef;
 140   border: solid 1px #d3d3d3;
 141   color: #818181;
 142   -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
 143   -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
 144   box-shadow: 0 0 0 rgba(0, 0, 0, 0);
 145   background-image: url("images/buttonDisabled.png");
 146   background-image: -moz-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%);
 147   background-image: -webkit-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%);
 148   background-image: -o-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%);
 149   background-image: linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%);
 150   _background-image: none;
 151 }
 152 .claro .dijitComboButtonDisabled .dijitArrowButton {
 153   border-left-width: 0;
 154 }
 155 /* for ComboButton */
 156 .claro table.dijitComboButton {
 157   border-collapse: separate;
 158   /* override dijit.css so that ComboBox rounded corners work */
 159
 160 }
 161 .claro .dijitComboButton .dijitStretch {
 162   -moz-border-radius: 4px 0 0 4px;
 163   border-radius: 4px 0 0 4px;
 164 }
 165 .claro .dijitComboButton .dijitArrowButton {
 166   -moz-border-radius: 0 4px 4px 0;
 167   border-radius: 0 4px 4px 0;
 168 }