month-picker.css 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. /*
  2. The jQuery UI Month Picker Version 3.0.4
  3. https://github.com/KidSysco/jquery-ui-month-picker/
  4. Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
  5. This program is free software: you can redistribute it and/or modify
  6. it under the terms of the GNU General Public License as published by
  7. the Free Software Foundation, either version 3 of the License, or
  8. (at your option) any later version.
  9. This program is distributed in the hope that it will be useful,
  10. but WITHOUT ANY WARRANTY; without even the implied warranty of
  11. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  12. GNU General Public License for more details.
  13. You should have received a copy of the GNU General Public License
  14. along with this program. If not, see
  15. <http://www.gnu.org/licenses/gpl-3.0.txt>.
  16. */
  17. .month-picker {
  18. display: inline-block;
  19. position: absolute;
  20. z-index: 9999;
  21. }
  22. .month-picker table {
  23. border-collapse: separate;
  24. border-spacing: 2px 2px;
  25. font-size: 12px;
  26. }
  27. .month-picker td {
  28. padding: 0px;
  29. }
  30. /*
  31. Prevents the button labels from maving sligtly to the left
  32. when applying the width CSS property to the buttons.
  33. See: .month-picker-month-table button { width: 4.3em; }
  34. */
  35. .month-picker .ui-button-text {
  36. padding: .4em 0;
  37. }
  38. .month-picker-header {
  39. margin: 3px 3px 0px 3px;
  40. }
  41. .month-picker-year-table {
  42. width: 100%;
  43. /*
  44. Makes sure the next/previous/jump years buttons are not unnecessarily
  45. selected if the user clicks them a couple of times fast.
  46. */
  47. -ms-user-select: none; /* IE 10+ */
  48. -moz-user-select: -moz-none;
  49. -khtml-user-select: none;
  50. -webkit-user-select: none;
  51. user-select: none;
  52. }
  53. /*
  54. The plugin uses buttons with a transparent background in the year-table
  55. (aka header) in order to look consistent with jQuery UI datepicker and to
  56. make the year title a button that blends into the heading in the default state.
  57. The plugin does this by removing the .ui-state-default class from (in MonthPicker.js)
  58. the a tags (buttons) which also ends up removing the 1px border that it applies.
  59. To prevent the button from resizing and moving everything around when you hover
  60. in and out, we use a carefully constructed selector, which gets overroden by the
  61. more specific .ui-state-hover/actove class selectors in the jquery-ui.css
  62. that apply the visible borders that we want.
  63. This selector applies a 1px transparent border that keeps the button
  64. in the same size, but it doesen't hide the borders that .ui-state-hover/actove give us.
  65. */
  66. .month-picker-year-table a {
  67. border: 1px solid transparent;
  68. }
  69. /*
  70. Sets the size of the next/previous buttons,
  71. and makes the buttons in the heading (year-table) sligtly bigger,
  72. and removes the pointer cursor from the buttons in the heading (year-table).
  73. */
  74. .month-picker-year-table .ui-button {
  75. /*font-size: 1.1em;
  76. width: 1.5em;
  77. height: 1.5em;*/
  78. cursor: default;
  79. margin: 0;
  80. }
  81. .month-picker-year-table .month-picker-title {
  82. text-align: center;
  83. }
  84. .month-picker-year-table .month-picker-title .ui-button {
  85. font-size: 1em;
  86. padding: 0;
  87. width: 100%;
  88. font-weight: bold;
  89. }
  90. /*
  91. The buttons in the heading (year-table) are slightly shrinked, but because jQuery ui and
  92. the .month-picker .ui-button-text rule at the top of this CSS file apply some
  93. padding which results in the button text being moved to the bottom of
  94. the button.
  95. This rule removes the unnecessary padding so the text in
  96. the jump years button will be vericaly centred.
  97. */
  98. .month-picker-year-table .ui-button-text {
  99. padding: 0;
  100. }
  101. .month-picker-month-table td {
  102. height: 35px;
  103. text-align: center;
  104. }
  105. /*
  106. Makes sure the buttons stay in the same size when swithching
  107. to the Jump years menu.
  108. this also ensures that the entire menu dosen't resize itself
  109. in response to the slightly bigger buttons in the Jump years menu.
  110. */
  111. .month-picker-month-table .ui-button {
  112. width: 4.2em;
  113. margin: .2em;
  114. }
  115. .month-picker-open-button {
  116. height: 20px;
  117. width: 20px;
  118. vertical-align: bottom;
  119. }
  120. .month-picker-invalid-message {
  121. display: none;
  122. background-color: Yellow;
  123. }
  124. .month-picker-disabled {
  125. background-color: #e1e1e1;
  126. }
  127. .month-picker-title > .ui-button{
  128. color: #FFFFFF !important;
  129. }
  130. .month-picker-title > .ui-button:hover{
  131. cursor: pointer;
  132. line-height: 1;
  133. }
  134. /********* COLORES PERSONALIZADOS **********/
  135. .ui-icon-circle-triangle-w { display: inline-block; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
  136. .ui-icon-circle-triangle-e { display: inline-block; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); }
  137. .month-picker-title > a:hover { color: var(--azul1) !important; }
  138. .month-picker-previous a:hover, .month-picker-next a:hover { color: var(--azul2) !important; }
  139. .month-picker-previous a:not(.ui-button-disabled), .month-picker-next a:not(.ui-button-disabled){ cursor: pointer; }
  140. .month-picker-month-table a:hover { border: 1px solid var(--azul1) !important; background: var(--azul1) !important;}
  141. .month-picker-month-table .ui-state-highlight { background: var(--danger); color: var(--white) !important; }