Advertisement
Ultroman

monthpicker.css

Sep 30th, 2014
767
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.  * This monthpicker requires both my monthpicker.js and monthpicker.css available here: https://pastebin.com/u/Ultroman
  3.  * If you want to see the instructions, go to this StackOverflow post: https://stackoverflow.com/a/26011321/1289974
  4. */
  5. .ui-monthpicker {
  6.     width: 17em;
  7.     padding: .2em .2em 0;
  8.     display: none;
  9. }
  10. .ui-monthpicker .ui-monthpicker-header {
  11.     position: relative;
  12.     padding: .2em 0;
  13. }
  14. .ui-monthpicker .ui-monthpicker-prev,
  15. .ui-monthpicker .ui-monthpicker-next {
  16.     position: absolute;
  17.     top: 2px;
  18.     width: 1.8em;
  19.     height: 1.8em;
  20. }
  21. .ui-monthpicker .ui-monthpicker-prev-hover,
  22. .ui-monthpicker .ui-monthpicker-next-hover {
  23.     top: 1px;
  24. }
  25. .ui-monthpicker .ui-monthpicker-prev {
  26.     left: 2px;
  27. }
  28. .ui-monthpicker .ui-monthpicker-next {
  29.     right: 2px;
  30. }
  31. .ui-monthpicker .ui-monthpicker-prev-hover {
  32.     left: 1px;
  33. }
  34. .ui-monthpicker .ui-monthpicker-next-hover {
  35.     right: 1px;
  36. }
  37. .ui-monthpicker .ui-monthpicker-prev span,
  38. .ui-monthpicker .ui-monthpicker-next span {
  39.     display: block;
  40.     position: absolute;
  41.     left: 50%;
  42.     margin-left: -8px;
  43.     top: 50%;
  44.     margin-top: -8px;
  45. }
  46. .ui-monthpicker .ui-monthpicker-title {
  47.     margin: 0 2.3em;
  48.     line-height: 1.8em;
  49.     text-align: center;
  50. }
  51. .ui-monthpicker .ui-monthpicker-title select {
  52.     font-size: 1em;
  53.     margin: 1px 0;
  54. }
  55. .ui-monthpicker select.ui-monthpicker-month,
  56. .ui-monthpicker select.ui-monthpicker-year {
  57.     width: 45%;
  58. }
  59. .ui-monthpicker table {
  60.     width: 100%;
  61.     font-size: .9em;
  62.     border-collapse: collapse;
  63.     margin: 0 0 .4em;
  64. }
  65. .ui-monthpicker th {
  66.     padding: .7em .3em;
  67.     text-align: center;
  68.     font-weight: bold;
  69.     border: 0;
  70. }
  71. .ui-monthpicker td {
  72.     border: 0;
  73.     padding: 1px;
  74. }
  75. .ui-monthpicker td span,
  76. .ui-monthpicker td a {
  77.     display: block;
  78.     padding: .2em;
  79.     text-align: right;
  80.     text-decoration: none;
  81. }
  82. .ui-monthpicker .ui-monthpicker-buttonpane {
  83.     background-image: none;
  84.     margin: .7em 0 0 0;
  85.     padding: 0 .2em;
  86.     border-left: 0;
  87.     border-right: 0;
  88.     border-bottom: 0;
  89. }
  90. .ui-monthpicker .ui-monthpicker-buttonpane button {
  91.     float: right;
  92.     margin: .5em .2em .4em;
  93.     cursor: pointer;
  94.     padding: .2em .6em .3em .6em;
  95.     width: auto;
  96.     overflow: visible;
  97. }
  98. .ui-monthpicker .ui-monthpicker-buttonpane button.ui-monthpicker-current {
  99.     float: left;
  100. }
  101.  
  102. /* with multiple calendars */
  103. .ui-monthpicker.ui-monthpicker-multi {
  104.     width: auto;
  105. }
  106. .ui-monthpicker-multi .ui-monthpicker-group {
  107.     float: left;
  108. }
  109. .ui-monthpicker-multi .ui-monthpicker-group table {
  110.     width: 95%;
  111.     margin: 0 auto .4em;
  112. }
  113. .ui-monthpicker-multi-2 .ui-monthpicker-group {
  114.     width: 50%;
  115. }
  116. .ui-monthpicker-multi-3 .ui-monthpicker-group {
  117.     width: 33.3%;
  118. }
  119. .ui-monthpicker-multi-4 .ui-monthpicker-group {
  120.     width: 25%;
  121. }
  122. .ui-monthpicker-multi .ui-monthpicker-group-last .ui-monthpicker-header,
  123. .ui-monthpicker-multi .ui-monthpicker-group-middle .ui-monthpicker-header {
  124.     border-left-width: 0;
  125. }
  126. .ui-monthpicker-multi .ui-monthpicker-buttonpane {
  127.     clear: left;
  128. }
  129. .ui-monthpicker-row-break {
  130.     clear: both;
  131.     width: 100%;
  132.     font-size: 0;
  133. }
  134.  
  135. /* RTL support */
  136. .ui-monthpicker-rtl {
  137.     direction: rtl;
  138. }
  139. .ui-monthpicker-rtl .ui-monthpicker-prev {
  140.     right: 2px;
  141.     left: auto;
  142. }
  143. .ui-monthpicker-rtl .ui-monthpicker-next {
  144.     left: 2px;
  145.     right: auto;
  146. }
  147. .ui-monthpicker-rtl .ui-monthpicker-prev:hover {
  148.     right: 1px;
  149.     left: auto;
  150. }
  151. .ui-monthpicker-rtl .ui-monthpicker-next:hover {
  152.     left: 1px;
  153.     right: auto;
  154. }
  155. .ui-monthpicker-rtl .ui-monthpicker-buttonpane {
  156.     clear: right;
  157. }
  158. .ui-monthpicker-rtl .ui-monthpicker-buttonpane button {
  159.     float: left;
  160. }
  161. .ui-monthpicker-rtl .ui-monthpicker-buttonpane button.ui-monthpicker-current,
  162. .ui-monthpicker-rtl .ui-monthpicker-group {
  163.     float: right;
  164. }
  165. .ui-monthpicker-rtl .ui-monthpicker-group-last .ui-monthpicker-header,
  166. .ui-monthpicker-rtl .ui-monthpicker-group-middle .ui-monthpicker-header {
  167.     border-right-width: 0;
  168.     border-left-width: 1px;
  169. }
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement