1
0

forms.css 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393
  1. /*--
  2. import url(../../../../../../../template/css/forms.css);
  3. --*/
  4. .bx-form-advanced-wrapper .bx-form-section-wrapper:first-child {
  5. margin-top:0;
  6. }
  7. .bx-form-advanced-wrapper .bx-form-section-divider:first-child {
  8. border-top:none;
  9. padding-top:0;
  10. }
  11. .bx-form-advanced-wrapper .bx-form-section-divider:first-child .bx-form-section-content {
  12. padding-top:0;
  13. }
  14. .bx-form-advanced-wrapper .bx-form-section-wrapper:last-child .bx-form-section-content {
  15. padding-bottom:0;
  16. }
  17. .bx-form-advanced-wrapper .bx-form-section-wrapper:first-child .bx-form-row-view-wrapper:first-child {
  18. padding-top:0;
  19. }
  20. .bx-form-input-wrapper-pgc {
  21. position: relative;
  22. }
  23. /*-- Section Toggler ---*/
  24. .bx-form-section-wrapper {
  25. position: relative;
  26. }
  27. .bx-form-section {
  28. margin: 0;
  29. padding: 0;
  30. border: none;
  31. }
  32. .bx-form-section-header legend {
  33. position: relative;
  34. line-height: 1.125rem;
  35. text-transform: uppercase;
  36. }
  37. .bx-form-section-header legend u {
  38. cursor: pointer;
  39. }
  40. .bx-form-section-header span {
  41. white-space: nowrap;
  42. text-transform: none;
  43. font-size: 0.75rem;
  44. }
  45. .bx-form-section-hidden .bx-form-section-content {
  46. display:none;
  47. }
  48. .bx-form-collapsable .bx-form-section-toggler {
  49. position:absolute;
  50. left: -2px;
  51. top: 2px;
  52. width:20px;
  53. height:20px;
  54. text-decoration:none;
  55. -moz-transform: rotate(90deg);
  56. -webkit-transform: rotate(90deg);
  57. -ms-transform: rotate(90deg);
  58. -o-transform: rotate(90deg);
  59. -webkit-transition: all 0.5s ease;
  60. -moz-transition: all 0.5s ease;
  61. -ms-transition: all 0.5s ease;
  62. -o-transition: all 0.5s ease;
  63. }
  64. .bx-form-collapsed .bx-form-section-toggler {
  65. -moz-transform: rotate(0deg);
  66. -webkit-transform: rotate(0deg);
  67. -ms-transform: rotate(0deg);
  68. -o-transform: rotate(0deg);
  69. }
  70. .bx-form-section-toggler .sys-icon {
  71. display: inline-block;
  72. vertical-align: top;
  73. margin: 0 0 0 5px;
  74. font-size:0.875rem;
  75. line-height:1.2rem;
  76. }
  77. /*--- One Line fields ---*/
  78. .bx-form-element-wrapper-oneline .bx-form-element {
  79. display: -webkit-flex;
  80. display: flex;
  81. -webkit-flex-flow: row nowrap;
  82. flex-flow: row nowrap;
  83. -webkit-align-items: flex-start;
  84. align-items: flex-start;
  85. -webkit-justify-content: flex-start;
  86. justify-content: flex-start;
  87. }
  88. /*-- Form field: Password --*/
  89. .bx-form-input-wrapper-password {
  90. padding: 0 2.125rem 0 0;
  91. }
  92. .bx-form-input-wrapper-password > a {
  93. position: absolute;
  94. z-index: 1000;
  95. display: -webkit-flex;
  96. display: flex;
  97. -webkit-align-items: center;
  98. align-items: center;
  99. -webkit-justify-content: center;
  100. justify-content: center;
  101. top: 0;
  102. right: 0;
  103. height: 100%;
  104. margin: 0 0.5rem;
  105. }
  106. .bx-form-input-password {
  107. position: relative;
  108. -moz-box-sizing: border-box;
  109. -ms-box-sizing: border-box;
  110. -webkit-box-sizing: border-box;
  111. box-sizing: border-box;
  112. width: 100%;
  113. height: 100%;
  114. margin: 0;
  115. padding: 0.2rem 0.4rem;
  116. border: 0;
  117. background-color: transparent;
  118. }
  119. .bx-form-input-password:focus {
  120. border-color: transparent;
  121. outline: none;
  122. box-shadow: none;
  123. }
  124. /*-- Form field: Switcher --*/
  125. .bx-switcher-cont {
  126. position: relative;
  127. width: 3.8rem;
  128. height: 1.5rem;
  129. box-sizing: content-box;
  130. background-color: #fff;
  131. border: 0.125rem solid transparent;
  132. -moz-border-radius: 1rem;
  133. -webkit-border-radius: 1rem;
  134. border-radius: 1rem;
  135. overflow: hidden;
  136. cursor: pointer;
  137. }
  138. .bx-switcher-cont input {
  139. position:absolute;
  140. top:-32px;
  141. top:-2rem;
  142. }
  143. .bx-switcher-canvas {
  144. position:relative;
  145. width:90px;
  146. width:5.7rem;
  147. -webkit-transition: left 0.2s ease-in-out;
  148. -moz-transition: left 0.2s ease-in-out;
  149. -ms-transition: left 0.2s ease-in-out;
  150. -o-transition: left 0.2s ease-in-out;
  151. }
  152. .bx-switcher-cont.on .bx-switcher-canvas {
  153. left:3px;
  154. left:0.2rem;
  155. }
  156. .bx-switcher-cont.off .bx-switcher-canvas {
  157. left:-34px;
  158. left:-2.1rem;
  159. }
  160. .bx-switcher-on,
  161. .bx-switcher-off,
  162. .bx-switcher-handler {
  163. position:absolute;
  164. top:0rem;
  165. line-height:24px;
  166. line-height:1.5rem;
  167. color:#999;
  168. }
  169. .bx-switcher-on {
  170. left:0rem;
  171. width:34px;
  172. width:2.1rem;
  173. height:24px;
  174. height:1.5rem;
  175. margin-left:8px;
  176. margin-left:0.5rem;
  177. }
  178. .bx-switcher-off {
  179. left:65px;
  180. left:4.05rem;
  181. width:34px;
  182. width:2.1rem;
  183. height:24px;
  184. height:1.5rem;
  185. margin-left:3px;
  186. margin-left:0.2rem;
  187. }
  188. .bx-switcher-handler {
  189. left:36px;
  190. left:2.23rem;
  191. top:2px;
  192. top:0.13rem;
  193. width:20px;
  194. width:1.25rem;
  195. height:20px;
  196. height:1.25rem;
  197. margin:0rem;
  198. -moz-border-radius: 1rem;
  199. -webkit-border-radius: 1rem;
  200. border-radius: 1rem;
  201. -webkit-transition: background-color 0.2s ease-in-out;
  202. -moz-transition: background-color 0.2s ease-in-out;
  203. -ms-transition: background-color 0.2s ease-in-out;
  204. -o-transition: background-color 0.2s ease-in-out;
  205. transition: background-color 0.2s ease-in-out;
  206. }
  207. .bx-switcher-cont.on .bx-switcher-handler {
  208. background-color:#d0efa2;
  209. }
  210. .bx-switcher-cont.off .bx-switcher-handler {
  211. background-color:#e7938a;
  212. }
  213. /*--- Form field: File ---*/
  214. .bx-form-input-wrapper-file .bx-btn {
  215. display: inline-block;
  216. float: none;
  217. }
  218. .bx-form-input-file {
  219. position: fixed;
  220. top: -1000px;
  221. border: none;
  222. background-color: transparent;
  223. }
  224. /*--- Form field: Location ---*/
  225. .bx-form-element .bx-form-value input,
  226. .bx-form-element .bx-form-value select {
  227. display: inline-block;
  228. }
  229. .bx-form-element .bx-form-input-location-country,
  230. .bx-form-element .bx-form-input-location-zip,
  231. .bx-form-element .bx-form-input-location-state,
  232. .bx-form-element .bx-form-input-location-city {
  233. width:49%;
  234. }
  235. .bx-form-element .bx-form-input-location-street {
  236. width:83%;
  237. }
  238. .bx-form-element .bx-form-input-location-street_number {
  239. width:15%;
  240. }
  241. .bx-form-element .bx-form-input-location-street_number,
  242. .bx-form-element .bx-form-input-location-street,
  243. .bx-form-element .bx-form-input-location-state,
  244. .bx-form-element .bx-form-input-location-city {
  245. margin-bottom: 0.25rem;
  246. }
  247. .bx-form-element .bx-form-input-location-street,
  248. .bx-form-element .bx-form-input-location-state,
  249. .bx-form-element .bx-form-input-location-country {
  250. margin-left: 0.25rem;
  251. }
  252. .bx-form-element .bx-form-input-location-cont .bx-form-input-location-status-cont {
  253. float:none;
  254. width:98%;
  255. line-height:normal;
  256. }
  257. .bx-form-element .bx-form-input-location-status {
  258. float:left;
  259. }
  260. .bx-form-element .bx-form-input-location-copyright {
  261. float:right;
  262. }
  263. .bx-form-element .bx-form-input-location-auto-cont {
  264. display:table;
  265. }
  266. .bx-form-element .bx-form-input-location-auto-cont > div {
  267. display: table-cell;
  268. vertical-align: middle;
  269. }
  270. /*--- Form field: Auto-siggestion ---*/
  271. .bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels) {
  272. float:left;
  273. padding:0px;
  274. height:auto;
  275. box-shadow: none;
  276. min-height: 2.8rem;
  277. }
  278. .bx-form-value .bx-form-input-autotoken b {
  279. display: block;
  280. margin: 0.125rem;
  281. padding-right: 1.5rem;
  282. border-radius: 1.25rem;
  283. line-height: 2.5rem;
  284. white-space: nowrap;
  285. font-weight: normal;
  286. cursor: pointer;
  287. }
  288. .bx-form-value .bx-form-input-autotoken b:hover {
  289. opacity: 0.7;
  290. }
  291. .bx-form-value .bx-form-input-autotoken b:after {
  292. font-family: 'sys-user', 'sys-user-fal';
  293. content: "\f00d";
  294. position:absolute;
  295. padding:0 0.5em;
  296. margin-left: 0.5em;
  297. font-size:0.7em;
  298. font-weight:bold;
  299. }
  300. .bx-form-value .bx-form-input-autotoken.bx-form-input-disabled b {
  301. cursor: default;
  302. }
  303. .bx-form-value .bx-form-input-autotoken.bx-form-input-disabled b:after{
  304. display: none;
  305. }
  306. .bx-form-value .bx-form-input-autotoken input {
  307. border:0;
  308. margin:0;
  309. padding:0 0 0 5px;
  310. width:auto;
  311. float:left;
  312. box-shadow: none;
  313. }
  314. .bx-form-value .bx-form-input-autotoken .bx-base-pofile-unit-wo-info {
  315. display: inline-block;
  316. vertical-align: middle;
  317. margin-right: 8px;
  318. margin-right: 0.5rem;
  319. }
  320. .bx-form-value .bx-form-input-autotoken-labels b {
  321. padding-left: 1em;
  322. }
  323. .bx-form-value .bx-form-input-autotoken-labels-show-more,
  324. .bx-form-value .bx-form-input-autotoken-labels-sel b {
  325. display:inline-block;
  326. line-height:1.5rem;
  327. font-size:85%;
  328. padding-right:1em;
  329. margin-top:0.625rem;
  330. font-style:normal;
  331. }
  332. .bx-form-value .bx-form-input-autotoken-labels-show-more {
  333. margin-left:0.1em;
  334. margin-right:0.1em;
  335. }
  336. .bx-form-value .bx-form-input-autotoken-labels-sel b:after {
  337. display:none;
  338. }
  339. .bx-form-input-autotoken-labels-more {
  340. display:none;
  341. }
  342. .select2-container {
  343. width:100% !important;
  344. }