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 .dijitSelectHover .dijitArrowButton {
  45         background-color:@arrowbutton-hovered-background-color;
  46 }
  47
  48 .claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {
  49         background-position:-70px 53%;
  50 }
  51
  52 /* focused status */
  53 .claro .dijitSelectFocused .dijitArrowButton {
  54         background-color:#7dbefa;               // TODO.  Mailed Jason about inconsistent ComboBox/Spinner behavior.
  55         .active-gradient("../");
  56 }
  57
  58 .claro .dijitSelectFocused .dijitArrowButton {
  59         border: none;
  60         padding: 1px;
  61 }
  62
  63 .claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {
  64         background-position:-70px 53%;
  65 }
  66
  67 /* disable status */
  68 .claro .dijitSelectDisabled {
  69         border-color: @disabled-border-color;
  70         background-color: @disabled-background-color;
  71         background-image: none;
  72         color: @disabled-text-color;
  73 }
  74
  75 .claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {
  76         background-position:0 53%
  77 }
  78
  79 /* Dropdown menu style for select */
  80 .claro .dijitSelectMenu td.dijitMenuItemIconCell,
  81 .claro .dijitSelectMenu td.dijitMenuArrowCell {
  82         /* so that arrow and icon cells from MenuItem are not displayed */
  83         display: none;
  84 }
  85
  86 .claro .dijitSelectMenu td.dijitMenuItemLabel {
  87         /* line up menu text with text in select box (in LTR and RTL modes) */
  88         padding: @textbox-padding;
  89 }
  90
  91 .claro .dijitSelectMenu .dijitMenuSeparatorTop {
  92         border-bottom:1px solid @focused-border-color;
  93 }