smoke.css 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. /**
  2. * Smoke is the most complete jQuery Plugin and designed for use with Bootstrap 3. *
  3. * @package Smoke
  4. * @version 2.0
  5. * @link https://github.com/alfredobarron/smoke The Smoke GitHub project
  6. * @author Alfredo Barron <alfredobarronc@gmail.com>
  7. * @copyright 2015 Alfredo Barron
  8. * @license https://www.gnu.org/licenses/lgpl.html GNU Lesser General Public License
  9. * @note This program is free software: you can redistribute it and/or modify
  10. * it under the terms of the GNU Lesser General Public License as published by
  11. * the Free Software Foundation, either version 3 of the License, or
  12. * (at your option) any later version.
  13. * This program is distributed in the hope that it will be useful,
  14. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  15. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  16. * GNU Lesser General Public License for more details.
  17. */
  18. /*
  19. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  20. | Validate
  21. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  22. */
  23. .has-feedback .smk-error-text{
  24. position: absolute;
  25. right: 0;
  26. font-size: 12px;
  27. color: #EE4124;
  28. /*float: right;*/
  29. }
  30. .smk-select .smk-error-icon{
  31. right: 10px;
  32. }
  33. .smk-checkbox .smk-error-text,
  34. .smk-radio .smk-error-text{
  35. margin-top: -12px;
  36. }
  37. /* form-horizontal */
  38. .form-horizontal .has-feedback .smk-error-text {
  39. right: 15px;
  40. }
  41. .form-horizontal .smk-select .smk-error-icon{
  42. right: 25px;
  43. }
  44. .form-horizontal .smk-checkbox .smk-error-text,
  45. .form-horizontal .smk-radio .smk-error-text{
  46. margin-top: 0;
  47. }
  48. /*
  49. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  50. | Alerts
  51. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  52. */
  53. .smk-alert-content{
  54. position: fixed;
  55. width: 360px;
  56. top: 0;
  57. right: 20px;
  58. z-index: 2060;
  59. }
  60. .smk-alert {
  61. opacity: 0;
  62. filter: alpha(opacity=0);
  63. }
  64. .smk-alert .glyphicon {
  65. font-size: 20px;
  66. float: left;
  67. margin-right: 14px;
  68. }
  69. .smk-alert p{
  70. display: table;
  71. }
  72. /*
  73. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  74. | Confirmation
  75. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  76. */
  77. .smk-confirm-back {
  78. position: fixed;
  79. top: 0;
  80. right: 0;
  81. bottom: 0;
  82. left: 0;
  83. z-index: 1030;
  84. }
  85. .smk-confirm {
  86. position: absolute;
  87. opacity: 0;
  88. filter: alpha(opacity=0);
  89. top: -500px;
  90. right: 0;
  91. left: 0;
  92. margin: auto;
  93. max-width: 440px;
  94. z-index: 2060;
  95. box-shadow: 0 5px 25px -1px #333;
  96. -webkit-box-shadow: 0 5px 25px -1px #333; /* Chrome & Safari */
  97. -moz-box-shadow: 0 5px 25px -1px #333; /* Firefox */
  98. }
  99. /*
  100. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  101. | Progress
  102. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  103. */
  104. .smk-progressbar{
  105. /*position: fixed;*/
  106. left: 0;
  107. top: 0;
  108. right: 0;
  109. bottom: 0;
  110. background: rgba(255,255,255,0.4);
  111. z-index: 10000;
  112. }
  113. .smk-progressbar .progress {
  114. width: 100%;
  115. height: 4px;
  116. background-color: transparent;
  117. border-radius: 0;
  118. margin-bottom: 0;
  119. }
  120. .smk-progressbar .progress-bar{
  121. background: #28A8E0;
  122. }
  123. /*.progress-bar{
  124. -webkit-animation: myfirst 1s;
  125. animation: myfirst 1s;
  126. }
  127. @-webkit-keyframes myfirst {
  128. from {width: 0;}
  129. to {width: 95%;}
  130. }
  131. @keyframes myfirst {
  132. from {width: 0;}
  133. to {width: 95%;}
  134. }*/
  135. /*
  136. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  137. | Panel
  138. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  139. */
  140. .panel-full{
  141. position: fixed;
  142. left: 0;
  143. top: 0;
  144. width: 100%;
  145. height: 100%;
  146. z-index: 2050;
  147. }
  148. .smk-btn-group-panel-title{
  149. top:-22px;
  150. right: -4px
  151. }
  152. .smk-btn-group-panel{
  153. top:-4px;
  154. right: -4px
  155. }
  156. /*
  157. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  158. | Helper Styles
  159. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  160. */
  161. /*
  162. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  163. | Elimina los spin del input number
  164. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  165. */
  166. input[type=number]::-webkit-inner-spin-button,
  167. input[type=number]::-webkit-outer-spin-button {
  168. -webkit-appearance: none;
  169. margin: 0;
  170. }
  171. /*
  172. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  173. | Al agregar padding a un div evita que su tamaño crezca
  174. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  175. */
  176. .smk-sizing{
  177. box-sizing: border-box;
  178. }
  179. /* Transition */
  180. .smk-transition1 {
  181. transition: all .2s ease-in-out;
  182. -webkit-transition: all .2s ease-in-out; /* Chrome & Safari */
  183. -moz-transition: all .2s ease-in-out; /* Firefox */
  184. -o-transition: all .2s ease-in-out; /* Opera */
  185. -ms-transition: all .2s ease-in-out; /* IE 9 */
  186. }
  187. .smk-transition2 {
  188. transition: all .5s ease-in-out;
  189. -webkit-transition: all .5s ease-in-out; /* Chrome & Safari */
  190. -moz-transition: all .5s ease-in-out; /* Firefox */
  191. -o-transition: all .5s ease-in-out; /* Opera */
  192. -ms-transition: all .5s ease-in-out; /* IE 9 */
  193. }
  194. /* Shadow */
  195. .smk-shadow {
  196. box-shadow: 3px 3px 5px 6px #ccc;
  197. -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Chrome & Safari */
  198. -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox */
  199. }
  200. /* Animations */
  201. .smk-animation {
  202. animation: fadeOut 3.5s;
  203. -webkit-animation: fadeOut 3.5s; /* Chrome & Safari */
  204. -moz-animation: fadeOut 3.5s; /* Firefox */
  205. -o-animation: fadeOut 3.5s; /* Opera */
  206. -ms-animation: fadeOut 3.5s; /* IE 9 */
  207. }
  208. /* Translate */
  209. .smk-translate {
  210. transform: translate(50px,100px);
  211. -webkit-transform: translate(50px,100px); /* Chrome & Safari */
  212. -moz-transform: translate(50px,100px); /* Firefox */
  213. -o-transform: translate(50px,100px); /* Opera */
  214. -ms-transform: translate(50px,100px); /* IE 9 */
  215. }
  216. /* Rotate */
  217. .smk-rotate {
  218. transform: rotate(7deg);
  219. -webkit-transform: rotate(7deg); /* Chrome & Safari */
  220. -moz-transition: rotate(7deg); /* Firefox */
  221. -o-transition: rotate(7deg); /* Opera */
  222. -ms-transform: rotate(7deg); /* IE 9 */
  223. }