button.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. /* Button */
  2. .ui-button {
  3. display: inline-block;
  4. position: relative;
  5. padding: 0;
  6. text-decoration: none !important;
  7. cursor: pointer;
  8. text-align: center;
  9. zoom: 1;
  10. overflow: visible; /* the overflow property removes extra width in IE */
  11. }
  12. p-button {
  13. display: inline-block;
  14. }
  15. /*button text element */
  16. .ui-button .ui-button-text {
  17. display: block;
  18. line-height: normal;
  19. }
  20. .ui-button-text-only .ui-button-text {
  21. padding: .25em 1em;
  22. }
  23. .ui-button-icon-only .ui-button-text,
  24. .ui-button-text-empty .ui-button-text {
  25. padding: .25em;
  26. text-indent: -9999999px;
  27. }
  28. .ui-button-text-icon-left .ui-button-text {
  29. padding: .25em 1em .25em 2.1em;
  30. }
  31. .ui-button-text-icon-right .ui-button-text {
  32. padding: .25em 2.1em .25em 1em;
  33. }
  34. /*button icon element(s) */
  35. .ui-button-icon-only .ui-button-icon-left,
  36. .ui-button-text-icon-left .ui-button-icon-left,
  37. .ui-button-text-icon-right .ui-button-icon-right {
  38. position: absolute;
  39. top: 50%;
  40. margin-top: -.5em;
  41. height: 1em;
  42. }
  43. .ui-button-icon-only .ui-button-icon-left {
  44. top: 50%;
  45. left: 50%;
  46. margin-top: -.5em;
  47. margin-left: -.5em;
  48. width: 1em;
  49. height: 1em;
  50. }
  51. .ui-button-icon-left {
  52. left: .5em;
  53. }
  54. .ui-button-icon-right {
  55. right: .5em;
  56. }
  57. /*button sets*/
  58. .ui-buttonset .ui-button {
  59. margin-left: 0;
  60. margin-right: 0;
  61. }
  62. /* workarounds */
  63. button.ui-button::-moz-focus-inner {
  64. border: 0; padding: 0; /* reset extra padding in Firefox */
  65. }
  66. /** Fluid **/
  67. .ui-fluid .ui-button {
  68. width: 100%;
  69. }
  70. .ui-fluid .ui-button-text-icon-left .ui-button-text,
  71. .ui-fluid .ui-button-text-icon-right .ui-button-text {
  72. padding-left: 1em;
  73. padding-right: 1em;
  74. }
  75. /** ButtonSet **/
  76. .ui-fluid .ui-buttonset {
  77. width: 100%;
  78. }
  79. .ui-fluid .ui-buttonset.ui-buttonset-1 .ui-button {width: 100%;}
  80. .ui-fluid .ui-buttonset.ui-buttonset-2 .ui-button {width: 50%;}
  81. .ui-fluid .ui-buttonset.ui-buttonset-3 .ui-button {width: 33.3%;}
  82. .ui-fluid .ui-buttonset.ui-buttonset-4 .ui-button {width: 25%;}
  83. .ui-fluid .ui-buttonset.ui-buttonset-5 .ui-button {width: 20%;}
  84. .ui-fluid .ui-buttonset.ui-buttonset-6 .ui-button {width: 16.6%;}
  85. @media (max-width: 640px) {
  86. .ui-fluid .ui-buttonset.ui-buttonset-1 .ui-button,
  87. .ui-fluid .ui-buttonset.ui-buttonset-2 .ui-button,
  88. .ui-fluid .ui-buttonset.ui-buttonset-3 .ui-button,
  89. .ui-fluid .ui-buttonset.ui-buttonset-4 .ui-button,
  90. .ui-fluid .ui-buttonset.ui-buttonset-5 .ui-button,
  91. .ui-fluid .ui-buttonset.ui-buttonset-6 .ui-button {
  92. width: 100%;
  93. }
  94. }