[Summary view] [Print] [Text view]

   1  /**
   2   * @provides phui-button-css
   3   */
   4  
   5  
   6  button,
   7  a.button {
   8    font: 13px/1.231 'Helvetica Neue', Helvetica, Arial, sans-serif;
   9    -webkit-font-smoothing: antialiased;
  10    -webkit-user-select: none;
  11    -moz-user-select: none;
  12    -ms-user-select: none;
  13    user-select: none;
  14  }
  15  
  16  button::-moz-focus-inner {
  17    padding: 0;
  18    border: 0;
  19  }
  20  
  21  button,
  22  a.button,
  23  a.button:visited,
  24  input[type="submit"] {
  25    background-color: #3477ad;
  26    color: white;
  27    border: 1px solid #19558D;
  28    cursor: pointer;
  29    font-weight: bold;
  30    font-size: 13px;
  31    display: inline-block;
  32    padding: 3px 12px 4px;
  33    text-align: center;
  34    white-space: nowrap;
  35    border-radius: 3px;
  36    background-image: linear-gradient(to bottom, #3b86c4, #2b628f);
  37    background-image: -webkit-linear-gradient(top, #3b86c4, #2b628f);
  38  }
  39  
  40  /* Buttons with images (full size only) */
  41  button.icon,
  42  a.icon,
  43  a.icon:visited {
  44    padding-left: 0;
  45    position: relative;
  46    text-indent: 29px;
  47  }
  48  
  49  button.black,
  50  a.black,
  51  a.black:visited {
  52    background-color: #383838;
  53    background-image: linear-gradient(to bottom, #505d65, #2d373c);
  54    background-image: -webkit-linear-gradient(top, #505d65, #2d373c);
  55    border: 1px solid {$darkgreytext};
  56    border-bottom-color: #000;
  57  }
  58  
  59  button.green,
  60  a.green,
  61  a.green:visited {
  62    background-color: #348e20;
  63    background-image: linear-gradient(to bottom, #4e9b33, #158009);
  64    background-image: -webkit-linear-gradient(top, #4e9b33, #158009);
  65    border: 1px solid #3b6e22;
  66    border-bottom-color: #2c5a15;
  67  }
  68  
  69  button.grey,
  70  input[type="submit"].grey,
  71  a.grey,
  72  a.grey:visited {
  73    background-color: {$lightgreybackground};
  74    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  75    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  76    border-color: {$lightgreyborder};
  77    color: {$darkgreytext};
  78    border-bottom-color: {$greyborder};
  79  }
  80  
  81  button.simple,
  82  input[type="submit"].simple,
  83  a.simple,
  84  a.simple:visited {
  85    background-color: transparent;
  86    background-image: none;
  87    border: 1px solid transparent;
  88    color: {$bluetext};
  89    border: 1px solid {$lightblueborder};
  90  }
  91  
  92  a.disabled,
  93  button.disabled,
  94  button[disabled] {
  95    filter:alpha(opacity=50);
  96    -moz-opacity: 0.5;
  97    -khtml-opacity: 0.5;
  98    opacity: 0.5;
  99  }
 100  
 101  body button:active,
 102  body a.button:active {
 103    box-shadow: inset 0 0 8px rgba(0,0,0,.6);
 104  }
 105  
 106  button.grey:active,
 107  a.grey:active,
 108  button.grey_active,
 109  a.button.phuix-dropdown-open {
 110    background-color: #7d7d7d;
 111    box-shadow: inset 0 0 4px rgba(0,0,0,.2);
 112  }
 113  
 114  a.phuix-dropdown-open {
 115    color: {$greytext};
 116  }
 117  
 118  a.button:hover,
 119  button:hover {
 120    text-decoration: none;
 121    box-shadow: inset 0 0 5px rgba(0,0,0,.4);
 122  }
 123  
 124  a.button.simple:hover,
 125  button.simple:hover {
 126    background-color: #fff;
 127    border: 1px solid {$lightgreyborder};
 128    background-image: none;
 129    border-bottom: 1px solid {$greyborder};
 130    box-shadow: none;
 131  }
 132  
 133  a.button.simple.phuix-dropdown-open {
 134    background-color: #fff;
 135    box-shadow: none;
 136  }
 137  
 138  a.button.grey:hover,
 139  button.grey:hover {
 140    text-decoration: none;
 141    box-shadow: inset 0 0 4px rgba(0,0,0,.2);
 142  }
 143  
 144  body a.button.disabled:hover,
 145  body button.disabled:hover,
 146  body a.button.disabled:active,
 147  body button.disabled:active {
 148    box-shadow: none;
 149  }
 150  
 151  button.small,
 152  a.small,
 153  a.small:visited {
 154    padding: 2px 8px;
 155    height: auto;
 156    font-size: 11px;
 157    line-height: 16px;
 158  }
 159  
 160  button.link {
 161    display: inline;
 162    border: none;
 163    background: transparent;
 164    font-weight: normal;
 165    padding: 0;
 166    margin: 0;
 167    font-size: inherit;
 168    border-bottom: none;
 169    text-decoration: none;
 170    color: #19558D;
 171    -webkit-box-shadow: none;
 172    -moz-box-shadow: none;
 173    box-shadow: none;
 174  }
 175  
 176  button.link:hover {
 177    text-decoration: underline;
 178  }
 179  
 180  .phuix-dropdown-menu {
 181    position: absolute;
 182    width: 240px;
 183    background: #fff;
 184    margin-top: -1px;
 185    padding: 5px 0;
 186    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
 187    border: 1px solid {$lightgreyborder};
 188    border-bottom: 1px solid {$greyborder};
 189    border-radius: 3px;
 190    margin-bottom: 16px;
 191  }
 192  
 193  .phuix-dropdown-menu a:focus {
 194    /* We automatically focus links in dropdown menus for assistive devices, but
 195       this is distracting for visual user agents. */
 196    outline: none;
 197  }
 198  
 199  a.policy-control {
 200    width: 240px;
 201    text-align: left;
 202  }
 203  
 204  a.policy-control .caret {
 205    float: right;
 206  }
 207  
 208  a.toggle {
 209    display: inline-block;
 210    padding: 4px 8px;
 211    font-size: 12px;
 212    font-weight: bold;
 213    color: #555;
 214    text-decoration: none;
 215    white-space: nowrap;
 216    vertical-align: baseline;
 217    background-color: {$lightgreybackground};
 218    margin: 0 6px 0 0;
 219    border-radius: 3px;
 220    box-shadow: inset 0 0 3px rgba(0,0,0,.4);
 221  }
 222  
 223  a.toggle:hover {
 224    background-color: #14568e;
 225    color: #fff
 226  }
 227  
 228  a.toggle-selected {
 229    background-color: #14568e;
 230    color: #fff
 231  }
 232  
 233  a.toggle-fixed {
 234    cursor: default;
 235  }
 236  
 237  .caret {
 238    display: inline-block;
 239    width: 0;
 240    height: 0;
 241    vertical-align: top;
 242    border-top: 5px solid #fff;
 243    border-right: 5px solid transparent;
 244    border-left: 5px solid transparent;
 245    content: "";
 246  }
 247  
 248  .caret-right {
 249    display: inline-block;
 250    width: 0;
 251    height: 0;
 252    vertical-align: middle;
 253    border-left: 7px solid {$greytext};
 254    border-top: 5px solid transparent;
 255    border-bottom: 5px solid transparent;
 256    content: "";
 257    margin-bottom: 4px;
 258  }
 259  
 260  .caret-left {
 261    display: inline-block;
 262    width: 0;
 263    height: 0;
 264    vertical-align: middle;
 265    border-right: 7px solid {$greytext};
 266    border-bottom: 5px solid transparent;
 267    border-top: 5px solid transparent;
 268    content: "";
 269    margin-bottom: 4px;
 270  }
 271  
 272  .dropdown .caret {
 273    margin-top: 7px;
 274    margin-left: 4px;
 275  }
 276  
 277  .small.dropdown .caret {
 278    margin-top: 6px;
 279  }
 280  
 281  .grey.dropdown .caret {
 282    border-top-color: #000;
 283  }
 284  
 285  /* Icons */
 286  .button.has-icon {
 287    position: relative;
 288  }
 289  
 290  .button .phui-icon-view {
 291    display: inline-block;
 292    position: absolute;
 293    top: 5px;
 294    left: 10px;
 295  }
 296  
 297  .phui-button-bar .button .phui-icon-view {
 298    left: 12px;
 299  }
 300  
 301  .button.has-icon .phui-button-text {
 302    margin-left: 16px;
 303  }
 304  
 305  /* Login Buttons */
 306  
 307  .button.big.has-icon {
 308    padding: 6px 20px 6px 12px;
 309    border-radius: 4px;
 310    text-align: left;
 311  }
 312  
 313  .button.big.has-icon .phui-button-text {
 314    margin-left: 40px;
 315    font-size: 14px;
 316    display: block;
 317  }
 318  
 319  .button.big.has-icon .phui-button-subtext {
 320    color: {$lightgreytext};
 321    font-size: 12px;
 322    line-height: 15px;
 323    font-weight: normal;
 324  }
 325  
 326  /* PHUI Button Bar */
 327  
 328  .phui-button-bar a.button {
 329    display: inline-block;
 330    height: 16px;
 331    width: 12px;
 332  }
 333  
 334  .phui-button-bar .phui-button-bar-first {
 335    border-top-right-radius: 0px;
 336    border-bottom-right-radius: 0px;
 337  }
 338  
 339  .phui-button-bar .phui-button-bar-middle {
 340    border-radius: 0;
 341    border-left: none;
 342  }
 343  
 344  .phui-button-bar .phui-button-bar-last {
 345    border-left: none;
 346    border-top-left-radius: 0px;
 347    border-bottom-left-radius: 0px;
 348  }