eda.stepway.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591
  1. /*!
  2. * easyFormGenerator — step way — version
  3. * Version 1.1.0
  4. * Author : Erwan Datin (MacKentoch)
  5. *Link: https://github.com/MacKentoch/easyFormGenerator
  6. * License : 2015 MIT
  7. */
  8. /*=========================================================
  9. colors const
  10. ===========================================================*/
  11. /*=========================================================
  12. fonts const
  13. ===========================================================*/
  14. /*=========================================================
  15. common
  16. ===========================================================*/
  17. /*=========================================================
  18. common
  19. ===========================================================*/
  20. body {
  21. padding-top: 50px;
  22. padding-bottom: 20px;
  23. height: 100%;
  24. background-color: #F2F2F2;
  25. font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; }
  26. .margintop60px {
  27. margin-top: 80px; }
  28. .margintop120px {
  29. margin-top: 120px; }
  30. .vAlignMiddle {
  31. vertical-align: middle; }
  32. [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  33. display: none !important; }
  34. /*=========================================================
  35. bootstrap overrides
  36. ===========================================================*/
  37. .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
  38. background-color: #0d87e9;
  39. border-color: #2196f3; }
  40. /*correction bug sur theme bootstrap journal*/
  41. .modal-backdrop {
  42. z-index: -1; }
  43. .navbar-right {
  44. margin-right: 20px; }
  45. textarea, textarea.form-control, input.form-control,
  46. input[type=text], input[type=password], input[type=email],
  47. input[type=number], [type=text].form-control, [type=password].form-control,
  48. [type=email].form-control, [type=tel].form-control, [contenteditable].form-control {
  49. font-size: 13px; }
  50. select, select.form-control {
  51. font-size: 13px; }
  52. /*container to 100%*/
  53. @media (min-width: 1200px) {
  54. .container {
  55. width: 100%;
  56. margin-right: 20px; } }
  57. @media (min-width: 768px) {
  58. .container {
  59. width: 100%;
  60. margin-right: 20px; } }
  61. @media (min-width: 992px) {
  62. .container {
  63. width: 100%; } }
  64. .container-fluid {
  65. margin-right: auto;
  66. margin-left: auto; }
  67. .container-fluid padding {
  68. left: 30px;
  69. right: 30px; }
  70. .panel-default > .panel-heading {
  71. color: #212121;
  72. background-color: #fff;
  73. border-color: #eee; }
  74. .navbar-nav > li > a {
  75. line-height: 30px; }
  76. .navbar-default .navbar-brand {
  77. line-height: initial; }
  78. .panel-heading {
  79. background-color: none;
  80. border-bottom: solid 1px #eee; }
  81. .navBtnGroup {
  82. padding-top: 20px;
  83. padding-bottom: 22px;
  84. padding-right: 15px;
  85. padding-left: 15px; }
  86. .table > thead > tr > th,
  87. .table > tbody > tr > th,
  88. .table > tfoot > tr > th,
  89. .table > thead > tr > td,
  90. .table > tbody > tr > td,
  91. .table > tfoot > tr > td {
  92. vertical-align: middle; }
  93. a:hover {
  94. color: #fff; }
  95. a:focus {
  96. color: #fff; }
  97. /*Forms setup*/
  98. .form-control {
  99. border-radius: 0;
  100. box-shadow: none;
  101. height: auto; }
  102. .float-label {
  103. font-size: 10px; }
  104. .socialIcon {
  105. font-size: 32px; }
  106. .socialIcon:hover {
  107. color: #F2F2F2; }
  108. input[type="text"].form-control,
  109. input[type="search"].form-control {
  110. border: none;
  111. border-bottom: 1px dotted #CFCFCF; }
  112. textarea {
  113. border: 1px dotted #CFCFCF !important;
  114. height: 130px !important; }
  115. /*Content Container*/
  116. .content-container {
  117. background-color: #fff;
  118. padding: 35px 20px;
  119. margin-bottom: 20px; }
  120. h1.content-title {
  121. font-size: 32px;
  122. font-weight: 300;
  123. text-align: center;
  124. margin-top: 0;
  125. margin-bottom: 20px;
  126. font-family: "Open Sans", sans-serif !important; }
  127. /*paper them bootstrap*/
  128. .form-control {
  129. font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  130. display: block;
  131. width: 100%;
  132. height: 39px;
  133. padding: 8px 12px;
  134. font-size: 13px;
  135. line-height: 1.42857143;
  136. color: #777777;
  137. background-color: #ffffff;
  138. background-image: none;
  139. border: 1px solid #cccccc;
  140. border-radius: 4px;
  141. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  142. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  143. -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  144. -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  145. transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }
  146. .form-control:focus {
  147. border-color: #66afe9;
  148. outline: 0;
  149. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  150. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
  151. .form-control::-moz-placeholder {
  152. color: #999999;
  153. opacity: 1; }
  154. .form-control:-ms-input-placeholder {
  155. color: #999999; }
  156. .form-control::-webkit-input-placeholder {
  157. color: #999999; }
  158. .form-control[disabled],
  159. .form-control[readonly],
  160. fieldset[disabled] .form-control {
  161. background-color: #eeeeee;
  162. opacity: 1; }
  163. .form-control[disabled],
  164. fieldset[disabled] .form-control {
  165. cursor: not-allowed; }
  166. textarea.form-control {
  167. height: auto; }
  168. /* animation ng-repeat in mailbox
  169. easy customize animation from here : http://www.nganimate.org/angularjs/ng-repeat/yo-yo-css3-keyframes-animation*/
  170. .animate-enter {
  171. -webkit-animation: enter 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  172. animation: enter 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  173. display: block;
  174. position: relative; }
  175. @-webkit-keyframes enter {
  176. from {
  177. opacity: 0;
  178. height: 0px;
  179. left: -70px; }
  180. 75% {
  181. left: 15px; }
  182. to {
  183. opacity: 1;
  184. height: 30px;
  185. left: 0px; } }
  186. @keyframes enter {
  187. from {
  188. opacity: 0;
  189. height: 0px;
  190. left: -70px; }
  191. 75% {
  192. left: 15px; }
  193. to {
  194. opacity: 1;
  195. height: 30px;
  196. left: 0px; } }
  197. .animate-leave {
  198. -webkit-animation: leave 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  199. animation: leave 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  200. display: block;
  201. position: relative; }
  202. @-webkit-keyframes leave {
  203. to {
  204. opacity: 0;
  205. height: 0px;
  206. left: -70px; }
  207. 25% {
  208. left: 15px; }
  209. from {
  210. opacity: 1;
  211. height: 30px;
  212. left: 0px; } }
  213. @keyframes leave {
  214. to {
  215. opacity: 0;
  216. height: 0px;
  217. left: -70px; }
  218. 25% {
  219. left: 15px; }
  220. from {
  221. opacity: 1;
  222. height: 30px;
  223. left: 0px; } }
  224. /* td table in myprofile */
  225. .tdCommun, .td40, .td60 {
  226. height: 75px;
  227. vertical-align: none; }
  228. .td40 {
  229. width: 40%; }
  230. .td60 {
  231. width: 60%; }
  232. .table-user-information > thead > tr > th,
  233. .table-user-information > tbody > tr > th,
  234. .table-user-information > tfoot > tr > th,
  235. .table-user-information > thead > tr > td,
  236. .table-user-information > tbody > tr > td,
  237. .table-user-information > tfoot > tr > td {
  238. vertical-align: middle; }
  239. /*=========================================================
  240. ANGULAR ANIMATIONS (in pair on animate.css)
  241. ===========================================================*/
  242. /* animation on ng-switch */
  243. .switchAngularFadeIn .ng-enter {
  244. -webkit-animation: fadeIn 1s;
  245. -moz-animation: fadeIn 1s;
  246. -ms-animation: fadeIn 1s;
  247. animation: fadeIn 1s; }
  248. /*=========================================================
  249. wfEdit
  250. ===========================================================*/
  251. #pageWfEdit {
  252. margin-top: 40px;
  253. margin-/* right:2%;
  254. left:2%; */
  255. padding-top: 30px;
  256. padding-bottom: 30px;
  257. background-color: #F2F2F2;
  258. /* border-top: solid 3px white;
  259. border-bottom: solid 3px white; */ }
  260. .lineCommandButtons {
  261. padding-bottom: 25px; }
  262. .addNewLine {
  263. font-size: 24px;
  264. vertical-align: middle;
  265. color: #666666; }
  266. #editor {
  267. margin-top: 0px;
  268. margin-bottom: 0px;
  269. height: 150px;
  270. background-color: #52B3D9;
  271. border-bottom: solid 1px #2C3E50; }
  272. #editor-content {
  273. /* padding-top: 25px; */
  274. /* padding-bottom: 25px; */
  275. text-align: center;
  276. color: white;
  277. font-size: 13px; }
  278. #preview {
  279. margin-top: 0px;
  280. margin-bottom: 0px;
  281. /* background-color: #E4F1FE; */
  282. border: solid 1 px #2C3E50;
  283. -moz-box-shadow: 0px 0px 10px 0px #ddd;
  284. -webkit-box-shadow: 0px 10px 5px 0px #ddd;
  285. -o-box-shadow: 0px 0px 10px 0px #ddd;
  286. box-shadow: 0px 0px 10px 0px #ddd;
  287. filter: progid:DXImageTransform.Microsoft.Shadow(color=#ddd, Direction=NaN, Strength=10); }
  288. #preview-content {
  289. background-color: #FFF;
  290. padding-bottom: 25px;
  291. /*text-align: center;*/
  292. color: black;
  293. /*font-size: 13px;*/ }
  294. #commandPanel {
  295. padding-top: 25px;
  296. padding-bottom: 25px; }
  297. /* #commandPanel.affix {
  298. position: fixed;
  299. top: 0;
  300. width:25%;
  301. margin-top: -45px;
  302. } */
  303. #visualPanel {
  304. padding-top: 25px;
  305. padding-bottom: 25px; }
  306. .customPagerButton {
  307. width: 145px;
  308. margin-left: 2px;
  309. margin-right: 2px; }
  310. .numberOfColumnsLabel {
  311. font-size: 32px;
  312. text-align: center;
  313. padding-top: 25%;
  314. padding-bottom: 25%;
  315. font-weight: bold;
  316. text-align: center;
  317. color: #666666; }
  318. .btnMinusColumns {
  319. margin-top: 10px; }
  320. .btnAddColumns {
  321. margin-top: 10px; }
  322. .numberOfcolumsText {
  323. color: #666666; }
  324. .greyText {
  325. color: #666666; }
  326. .blackText {
  327. color: #000; }
  328. /*=========================================================
  329. ANIMATE NG-SWITCH
  330. =========================================================*/
  331. .animate-switch-container {
  332. position: relative;
  333. background: white;
  334. border-top: solid 1px #ECECEC;
  335. border-bottom: solid 1px #ECECEC;
  336. height: 750px;
  337. overflow: scroll; }
  338. .animate-switch-container .well {
  339. background-color: #89C4F4;
  340. margin-bottom: 0px;
  341. color: #ECECEC; }
  342. .linesList {
  343. margin-top: 5px; }
  344. /*switch 1 : move top*/
  345. .animate-switch {
  346. padding: 10px; }
  347. .animate-switch.ng-animate {
  348. -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s;
  349. transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s;
  350. position: absolute;
  351. top: 0;
  352. left: 0;
  353. right: 0;
  354. bottom: 0; }
  355. .animate-switch.ng-leave.ng-leave-active,
  356. .animate-switch.ng-enter {
  357. left: 0px;
  358. top: -500px;
  359. opacity: 0; }
  360. .animate-switch.ng-leave,
  361. .animate-switch.ng-enter.ng-enter-active {
  362. left: 0px;
  363. top: 0px;
  364. opacity: 0.8; }
  365. /*=========================================================
  366. STEP INDICATOR
  367. =========================================================*/
  368. .stepwizardTopmargin {
  369. margin-top: 25px; }
  370. .stepwizard-step p {
  371. margin-top: 10px;
  372. color: #666666; }
  373. .stepwizard-row {
  374. display: table-row; }
  375. .stepwizard {
  376. display: table;
  377. width: 100%;
  378. position: relative; }
  379. .stepwizard-step button[disabled] {
  380. opacity: 1 !important;
  381. filter: alpha(opacity=100) !important; }
  382. .stepwizard-row:before {
  383. top: 14px;
  384. bottom: 0;
  385. position: absolute;
  386. content: " ";
  387. width: 100%;
  388. height: 1px;
  389. background-color: #ccc;
  390. z-order: 0; }
  391. .stepwizard-step {
  392. display: table-cell;
  393. text-align: center;
  394. position: relative; }
  395. .btn-circle {
  396. width: 30px;
  397. height: 30px;
  398. text-align: center;
  399. padding: 6px 0;
  400. font-size: 12px;
  401. line-height: 1.428571429;
  402. border-radius: 15px; }
  403. .panelDebugScope {
  404. color: #000; }
  405. /*=========================================================
  406. Modal add control
  407. =========================================================*/
  408. .texteRouge {
  409. color: #CF000F; }
  410. .editPropertiesLabel {
  411. margin-top: 6px; }
  412. .textControlLabel {
  413. color: #000; }
  414. .marginTopFivepixels {
  415. margin-top: 5px; }
  416. .marginTopTenpixels {
  417. margin-top: 5px; }
  418. .checkboxCssCorrection {
  419. font-size: 4px; }
  420. .noGroupText {
  421. margin-bottom: 0px; }
  422. .nya-bs-select {
  423. margin-bottom: 16px; }
  424. .ta-scroll-window {
  425. margin-bottom: 16px; }
  426. .formly-field-checkbox {
  427. margin-top: 28px; }
  428. #inputAddNewRadioOption {
  429. margin-bottom: 20px; }
  430. #inputAddNewBasicOption {
  431. margin-bottom: 20px; }
  432. #inputAddNewGroupedOption {
  433. margin-bottom: 20px; }
  434. #inputAddNewGroupGroupedOption {
  435. margin-bottom: 20px; }
  436. .editGroupedSelectnyaSelect {
  437. margin-bottom: 0px; }
  438. /**
  439. * formly fiedl css
  440. */
  441. .formly-field {
  442. margin-bottom: 20px; }
  443. .validation {
  444. position: absolute;
  445. font-size: .8em;
  446. color: #a94442; }
  447. .formly-template-wrapper {
  448. position: relative; }
  449. .error-messages {
  450. position: relative; }
  451. .error-messages, .message, .validation {
  452. opacity: 1;
  453. transition: .3s linear all; }
  454. .message {
  455. font-size: .8em;
  456. position: absolute;
  457. width: 100%;
  458. color: #a94442;
  459. margin-top: 2px; }
  460. .error-messages.ng-enter.ng-enter-active,
  461. .message.ng-enter.ng-enter-active,
  462. .validation.ng-enter.ng-enter-active {
  463. opacity: 1; }
  464. .error-messages.ng-enter,
  465. .message.ng-enter,
  466. .validation.ng-enter {
  467. opacity: 0; }
  468. .error-messages.ng-leave,
  469. .message.ng-leave,
  470. .validation.ng-leave {
  471. opacity: 1; }
  472. .error-messages.ng-leave-active,
  473. .message.ng-leave-active,
  474. .validation.ng-leave-active {
  475. opacity: 0; }
  476. /*=========================================================
  477. colors const
  478. ===========================================================*/
  479. /*=========================================================
  480. fonts const
  481. ===========================================================*/
  482. /*=========================================================
  483. common
  484. ===========================================================*/