lib/dijit/themes/claro/form/Select.less

   1 /* Select
   2  *
   3  * Styling Select mainly includes:
   4  *
   5  * 1. Containers
   6  *              .dijitSelect - for border, background-color
   7  *              .dijitButtonContents - for border
   8  *
   9  * 2. Arrow
  10  *              .dijitArrowButton - for border, padding and background-color|image
  11  *              .dijitArrowButtonInner - for border, background-color|image, display and width|height
  12  *
  13  * 3. Menu
  14  *              .dijitSelectMenu .* - for border, padding
  15  *
  16  * 4. Various states
  17  *              .dijitSelectHover|.dijitSelectFocused|.dijitSelectDisabled .* - for border, padding and background-color|image
  18  */
  19
  20 @import "../variables";
  21
  22 .claro .dijitSelect .dijitButtonText {
  23         padding: @textbox-padding;
  24 }
  25
  26 /* normal status */
  27 .claro .dijitSelect {
  28         border: 1px solid @border-color;
  29         background-color: @textbox-background-color;
  30         border-collapse: separate;
  31 }
  32 .dj_ie6 .claro .dijitSelect,
  33 .dj_ie6 .claro .dijitSelect .dijitButtonNode {
  34         background-image:none;
  35 }
  36
  37 .claro .dijitSelect .dijitButtonContents {
  38         border: 0 solid @border-color;
  39         border-right-width: 1px;
  40 }
  41
  42 .claro .dijitSelect .dijitArrowButton {
  43         padding: 0;
  44         border: 1px solid @arrowbutton-inner-border-color;
  45         border-top:none;
  46         background-color: @arrowbutton-background-color;
  47         background-image: url("../@{image-form-highlight}");
  48         background-repeat:repeat-x;
  49 }
  50
  51 .claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner {
  52         background-image: url("../@{image-form-common-arrows}");
  53         background-position:-35px 70%;
  54         background-repeat: no-repeat;
  55         width:16px;
  56         height:16px;
  57 }
  58
  59 /* hover status */
  60 .claro .dijitSelectHover {
  61         border: 1px solid @hovered-border-color;
  62         background-color: @textbox-hovered-background-color;
  63         background-image: url("../@{image-form-textbox-background}");
  64         background-repeat: repeat-x;
  65 }
  66
  67 .claro .dijitSelectHover .dijitButtonContents {
  68         border-color:@hovered-border-color;
  69 }
  70
  71 .claro .dijitSelectHover .dijitArrowButton {
  72         background-color:@arrowbutton-hovered-background-color;
  73 }
  74 .claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {
  75         background-position:-70px 70%;
  76 }
  77
  78 /* focused status */
  79 .claro .dijitSelectFocused {
  80         border: 1px solid @focused-border-color;
  81 }
  82 .claro .dijitSelectFocused .dijitButtonContents {
  83         border-color:@focused-border-color;
  84 }
  85 .claro .dijitSelectFocused .dijitArrowButton {
  86         background-color:#7dbefa;               // TODO.  Mailed Jason about inconsistent ComboBox/Spinner behavior.
  87         background-position:0 -177px;
  88         border: none;
  89         padding: 0 1px;
  90 }
  91 .claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {
  92         background-position:-70px 70%;
  93         margin-bottom: 1px;
  94 }
  95
  96 /* disable status */
  97 .claro .dijitSelectDisabled {
  98         border: 1px solid @disabled-border-color;
  99         background-color: @disabled-background-color;
 100         background-image: none;
 101         color: @disabled-text-color;
 102 }
 103 .claro .dijitSelectDisabled .dijitArrowButton {
 104         background-color: @disabled-background-color;
 105 }
 106 .claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {
 107         background-position:0 70%
 108 }
 109
 110 /* Dropdown menu style for select */
 111
 112 .claro .dijitSelectMenu td.dijitMenuItemIconCell,
 113 .claro .dijitSelectMenu td.dijitMenuArrowCell {
 114         /* so that arrow and icon cells from MenuItem are not displayed */
 115         display: none;
 116 }
 117 .claro .dijitSelectMenu td.dijitMenuItemLabel {
 118         /* line up menu text with text in select box (in LTR and RTL modes) */
 119         padding: @textbox-padding;
 120 }
 121
 122 .claro .dijitSelectMenu .dijitMenuSeparatorTop {
 123         border-bottom:1px solid @focused-border-color;
 124 }