[Summary view] [Print] [Text view]

   1  /**
   2   * @provides phui-form-css
   3   */
   4  
   5  select,
   6  textarea,
   7  input[type="text"],
   8  input[type="password"],
   9  input[type="datetime"],
  10  input[type="datetime-local"],
  11  input[type="date"],
  12  input[type="month"],
  13  input[type="time"],
  14  input[type="week"],
  15  input[type="number"],
  16  input[type="email"],
  17  input[type="url"],
  18  input[type="search"],
  19  input[type="tel"],
  20  input[type="color"],
  21  div.jx-tokenizer-container {
  22    display: inline-block;
  23    height: 28px;
  24    line-height: 18px;
  25    color: #333;
  26    vertical-align: middle;
  27    font: 13px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  28    -webkit-font-smoothing: antialiased;
  29  }
  30  
  31  textarea,
  32  input[type="text"],
  33  input[type="password"],
  34  input[type="datetime"],
  35  input[type="datetime-local"],
  36  input[type="date"],
  37  input[type="month"],
  38  input[type="time"],
  39  input[type="week"],
  40  input[type="number"],
  41  input[type="email"],
  42  input[type="url"],
  43  input[type="search"],
  44  input[type="tel"],
  45  input[type="color"],
  46  div.jx-tokenizer-container {
  47    padding: 4px 6px;
  48    background-color: #ffffff;
  49    border: 1px solid {$blueborder};
  50  
  51    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  52    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  53    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  54  
  55    -webkit-transition: border linear .05s, box-shadow linear .05s;
  56    -moz-transition: border linear .05s, box-shadow linear .05s;
  57    -o-transition: border linear .05s, box-shadow linear .05s;
  58    transition: border linear .05s, box-shadow linear .05s;
  59  
  60    -webkit-box-sizing: border-box;
  61    -moz-box-sizing: border-box;
  62    box-sizing: border-box;
  63  
  64    /* iOS Safari */
  65    -webkit-appearance: none;
  66    border-radius: 0;
  67  }
  68  
  69  textarea:focus,
  70  input[type="text"]:focus,
  71  input[type="password"]:focus,
  72  input[type="datetime"]:focus,
  73  input[type="datetime-local"]:focus,
  74  input[type="date"]:focus,
  75  input[type="month"]:focus,
  76  input[type="time"]:focus,
  77  input[type="week"]:focus,
  78  input[type="number"]:focus,
  79  input[type="email"]:focus,
  80  input[type="url"]:focus,
  81  input[type="search"]:focus,
  82  input[type="tel"]:focus,
  83  input[type="color"]:focus,
  84  div.jx-tokenizer-container-focused {
  85    border-color: rgba(82, 168, 236, 0.8);
  86    outline: 0;
  87    /* IE6-9 */
  88  
  89    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  90    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  91    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  92  }
  93  input[type="radio"],
  94  input[type="checkbox"] {
  95    margin: 4px 0 0;
  96    margin-top: 1px \9;
  97    /* IE8-9 */
  98    line-height: normal;
  99  }
 100  
 101  select {
 102    height: 24px;
 103    line-height: 24px;
 104    border: 1px solid #a1a5a9;
 105    background-color: #ffffff;
 106  }
 107  
 108  select[multiple],
 109  select[size] {
 110    height: auto;
 111  }
 112  
 113  select:focus,
 114  input[type="file"]:focus,
 115  input[type="radio"]:focus,
 116  input[type="checkbox"]:focus {
 117    outline: thin dotted #333;
 118    outline: 5px auto -webkit-focus-ring-color;
 119    outline-offset: -2px;
 120  }
 121  
 122  input:-moz-placeholder,
 123  textarea:-moz-placeholder {
 124    color: {$lightgreytext};
 125  }
 126  
 127  input:-ms-input-placeholder,
 128  textarea:-ms-input-placeholder {
 129    color: {$lightgreytext};
 130  }
 131  
 132  input::-webkit-input-placeholder,
 133  textarea::-webkit-input-placeholder {
 134    color: {$lightgreytext};
 135  }
 136  
 137  select[disabled="disabled"],
 138  input[disabled="disabled"] {
 139    opacity: 0.5;
 140  }