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 /* normal status */
  23 .claro .dijitSelect .dijitArrowButtonContainer {
  24         border: 1px solid @arrowbutton-inner-border-color;
  25 }
  26
  27 .claro .dijitSelect .dijitArrowButton {
  28         padding: 0;
  29         background-color: @arrowbutton-background-color;
  30         .standard-gradient("../");
  31 }
  32
  33 .claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner {
  34         height:16px;
  35 }
  36
  37 /* hover status */
  38 .claro .dijitSelectHover {
  39         background-color: @textbox-hovered-background-color;
  40         .textbox-background-image;
  41         background-repeat: repeat-x;
  42 }
  43
  44 .claro .dijitSelectFocused,
  45 .claro .dijitSelectHover {
  46         border-color:@hovered-border-color;
  47 }
  48
  49 .claro .dijitSelectHover .dijitArrowButton {
  50         background-color:@arrowbutton-hovered-background-color;
  51 }
  52
  53 .claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {
  54         background-position:-70px 53%;
  55 }
  56
  57 /* focused status */
  58 .claro .dijitSelectFocused .dijitArrowButton {
  59         background-color:#7dbefa;               // TODO.  Mailed Jason about inconsistent ComboBox/Spinner behavior.
  60         .active-gradient("../");
  61 }
  62
  63 .claro .dijitSelectFocused .dijitArrowButton {
  64         border: none;
  65         padding: 1px;
  66 }
  67
  68 .claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {
  69         background-position:-70px 53%;
  70 }
  71
  72 /* disable status */
  73 .claro .dijitSelectDisabled {
  74         border-color: @disabled-border-color;
  75         background-color: @disabled-background-color;
  76         background-image: none;
  77         color: @disabled-text-color;
  78 }
  79
  80 .claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {
  81         background-position:0 53%
  82 }
  83
  84 /* Dropdown menu style for select */
  85 .claro .dijitSelectMenu td.dijitMenuItemIconCell,
  86 .claro .dijitSelectMenu td.dijitMenuArrowCell {
  87         /* so that arrow and icon cells from MenuItem are not displayed */
  88         display: none;
  89 }
  90
  91 .claro .dijitSelectMenu td.dijitMenuItemLabel {
  92         /* line up menu text with text in select box (in LTR and RTL modes) */
  93         padding: @textbox-padding;
  94 }
  95
  96 .claro .dijitSelectMenu .dijitMenuSeparatorTop {
  97         border-bottom:1px solid @focused-border-color;
  98 }