shared.less 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. /* Checkboxes */
  2. html.dark .checkbox-primary,
  3. .checkbox-primary {
  4. label:before {
  5. background: @skinColor;
  6. border-color: darken(@skinColor, 5%);
  7. }
  8. }
  9. html.dark .checkbox-text-primary,
  10. .checkbox-text-primary {
  11. input[type="checkbox"]:checked + label:after {
  12. color: @skinColor;
  13. }
  14. }
  15. /* Radios */
  16. html.dark .radio-primary,
  17. .radio-primary {
  18. input[type="radio"]:checked + label:after {
  19. background: @skinColor;
  20. -webkit-box-shadow: 0px 0px 1px @skinColor;
  21. box-shadow: 0px 0px 1px @skinColor;
  22. }
  23. }
  24. /* Switch */
  25. .switch {
  26. &.switch-primary {
  27. .ios-switch .on-background {
  28. background: @skinColor;
  29. }
  30. }
  31. }
  32. /* Progress Bar */
  33. .progress-bar {
  34. background-color: @skinColor;
  35. }
  36. .progress {
  37. .progress-bar-primary {
  38. background-color: @skinColor;
  39. }
  40. }
  41. /* Slider */
  42. .slider-primary {
  43. .ui-slider-range,
  44. .ui-slider-handle {
  45. background: @skinColor;
  46. }
  47. }
  48. .slider-gradient.slider-primary {
  49. .ui-slider-range,
  50. .ui-slider-handle {
  51. background-image: -webkit-linear-gradient(left, lighten(@skinColor, 10%) 0, @skinColor 50%, darken(@skinColor, 10%) 100%);
  52. background-image: linear-gradient(left, lighten(@skinColor, 10%) 0, @skinColor 50%, darken(@skinColor, 10%) 100%);
  53. }
  54. }
  55. .slider-gradient.ui-slider-vertical.slider-primary {
  56. .ui-slider-range,
  57. .ui-slider-handle {
  58. background-image: -webkit-linear-gradient(to right, lighten(@skinColor, 10%) 0, @skinColor 50%, darken(@skinColor, 10%) 100%);
  59. background-image: linear-gradient(to right, lighten(@skinColor, 10%) 0, @skinColor 50%, darken(@skinColor, 10%) 100%);
  60. }
  61. }
  62. /* DatePicker */
  63. .datepicker {
  64. table {
  65. width: 100%;
  66. thead {
  67. tr {
  68. th {
  69. &.prev, &.next {
  70. &:hover {
  71. background: @skinColor;
  72. }
  73. }
  74. }
  75. &:first-child th:hover {
  76. background: @skinColor;
  77. }
  78. }
  79. }
  80. tr {
  81. td {
  82. span:hover {
  83. background: @skinColor;
  84. }
  85. &.day:hover {
  86. background: @skinColor;
  87. }
  88. }
  89. }
  90. tfoot tr th:hover {
  91. background: @skinColor;
  92. }
  93. }
  94. }
  95. /* DatePicker: Dark */
  96. html.dark .datepicker.datepicker-primary,
  97. .datepicker.datepicker-dark {
  98. table {
  99. thead {
  100. tr {
  101. th {
  102. &.prev, &.next {
  103. &:hover {
  104. background: @skinColor;
  105. }
  106. }
  107. }
  108. }
  109. }
  110. tbody {
  111. tr {
  112. td {
  113. &.day {
  114. &:hover {
  115. background: @skinColor;
  116. }
  117. &.active {
  118. background: @skinColor;
  119. }
  120. }
  121. }
  122. }
  123. }
  124. }
  125. }
  126. /* DatePicker: Primary */
  127. .datepicker.datepicker-primary {
  128. table {
  129. thead {
  130. tr {
  131. &:first-child {
  132. background-color: @skinColor;
  133. th {
  134. &:hover {
  135. background-color: darken(@skinColor, 10%);
  136. }
  137. }
  138. }
  139. &:last-child {
  140. background-color: lighten(@skinColor, 5%);
  141. th:hover {
  142. background-color: @skinColor;
  143. }
  144. }
  145. }
  146. }
  147. tbody {
  148. tr {
  149. td {
  150. &.day {
  151. &:hover {
  152. background: @skinColor;
  153. }
  154. &.active {
  155. background: @skinColor;
  156. }
  157. }
  158. }
  159. }
  160. }
  161. }
  162. }
  163. /* Select 2 */
  164. .select2-container-multi {
  165. .select2-choices .select2-search-choice {
  166. background: @skinColor;
  167. }
  168. }
  169. /* Wizard */
  170. .wizard-steps {
  171. > li {
  172. &.active {
  173. .badge {
  174. background-color: @skinColor;
  175. }
  176. a {
  177. &,
  178. &:hover,
  179. &:focus {
  180. border-top-color: @skinColor;
  181. }
  182. }
  183. }
  184. }
  185. }
  186. .wizard-tabs {
  187. ul {
  188. > li {
  189. &.active {
  190. .badge {
  191. background-color: @skinColor;
  192. }
  193. }
  194. }
  195. }
  196. }
  197. html,
  198. html.dark {
  199. .wizard-progress {
  200. .steps-progress {
  201. .progress-indicator {
  202. background: @skinColor;
  203. }
  204. }
  205. .wizard-steps {
  206. li {
  207. &.completed {
  208. a {
  209. span {
  210. border-color: @skinColor;
  211. background: @skinColor;
  212. }
  213. }
  214. }
  215. &.active {
  216. a {
  217. span {
  218. color: @skinColor;
  219. border-color: @skinColor;
  220. }
  221. }
  222. }
  223. }
  224. }
  225. }
  226. }
  227. /* Tables */
  228. .table > thead > tr > td.primary,
  229. .table > tbody > tr > td.primary,
  230. .table > tfoot > tr > td.primary,
  231. .table > thead > tr > th.primary,
  232. .table > tbody > tr > th.primary,
  233. .table > tfoot > tr > th.primary,
  234. .table > thead > tr.primary > td,
  235. .table > tbody > tr.primary > td,
  236. .table > tfoot > tr.primary > td,
  237. .table > thead > tr.primary > th,
  238. .table > tbody > tr.primary > th,
  239. .table > tfoot > tr.primary > th {
  240. background-color: @skinColor;
  241. }
  242. /* Data Tables Loading */
  243. .dataTables_processing {
  244. background-color: @skinColor;
  245. }
  246. /* Liquid Meter */
  247. .liquid-meter-wrapper {
  248. .liquid-meter-selector {
  249. a {
  250. &.active {
  251. color: @skinColor;
  252. }
  253. }
  254. }
  255. }