_form2.scss 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. .start#form{
  2. .entete{
  3. border-top: 1px solid $light-blue;
  4. }
  5. h2{
  6. margin-top: 0;
  7. }
  8. .body-wrapper{
  9. width: 100% !important;
  10. min-width: 250px;
  11. // margin: auto auto 140px auto;
  12. margin-bottom: 0 !important;
  13. form{
  14. width: 100% !important;
  15. display: flex;
  16. flex-direction: row;
  17. flex-wrap: wrap;
  18. margin-top: 20px;
  19. margin: auto;
  20. & > .form-group{
  21. // width: 100% !important;
  22. width: calc( (100% / 2)) !important;
  23. // margin: auto;
  24. margin-left: 25%;
  25. margin-right: 25%;
  26. margin-top: 20px;
  27. padding-bottom: 20px;
  28. .form-data{
  29. @include inlineflex();
  30. margin: 20px 0px;
  31. &> div{
  32. overflow: hidden;
  33. margin: 10px 10px;
  34. min-width: 100px;
  35. border: 2px solid $red;
  36. border-radius: 30px;
  37. padding: 10px 20px;
  38. &.check{
  39. background: $red;
  40. color: white;
  41. }
  42. input{
  43. border: none;
  44. }
  45. input[type='radio'] {
  46. visibility: hidden;
  47. position: absolute;
  48. }
  49. label{
  50. cursor: pointer;
  51. }
  52. }
  53. }
  54. }
  55. & > .form-field.form-group{
  56. &:nth-of-type(n+5):not(:nth-of-type(n+11)){
  57. width: 25% !important;
  58. margin-top: 0;
  59. margin-bottom: 0;
  60. }
  61. &:nth-of-type(5){
  62. margin-left: 25%;
  63. margin-right: 0;
  64. }
  65. &:nth-of-type(6){
  66. margin-left: 0;
  67. margin-right: 25%;
  68. }
  69. &:nth-of-type(7){
  70. margin-left: 25%;
  71. margin-right: 0;
  72. }
  73. &:nth-of-type(8){
  74. margin-left: 0;
  75. margin-right: 25%;
  76. }
  77. &:nth-of-type(9){
  78. margin-left: 25%;
  79. margin-right: 0;
  80. }
  81. &:nth-of-type(10){
  82. margin-left: 0;
  83. margin-right: 25%;
  84. }
  85. }
  86. .button-wrapper{
  87. order: 12 !important;
  88. background: $red;
  89. height: 100px;
  90. position: relative !important;
  91. left: 0;
  92. width: 100% !important;
  93. bottom: 0;
  94. margin-bottom: 0;
  95. button{
  96. margin-right: 25%;
  97. position: absolute;
  98. right: 0;
  99. top: 50%;
  100. -webkit-transform: translateY(-50%);
  101. transform: translateY(-50%);
  102. background: white;
  103. border-radius: 30px;
  104. padding: 10px 35px;
  105. box-shadow:none;
  106. border:0;
  107. }
  108. }
  109. }
  110. #send-valide{
  111. -webkit-transform: translate(-50%, -50%);
  112. transform: translate(-50%, -50%);
  113. background: $red;
  114. border-radius: 20px;
  115. position: fixed;
  116. width: 30%;
  117. min-height: 30%;
  118. left: 50%;
  119. top: 50%;
  120. padding: 50px;
  121. .toast{
  122. position: relative;
  123. text-align: center;
  124. color: white;
  125. }
  126. .ok{
  127. color: white;
  128. position: absolute;
  129. right: 20px;
  130. bottom: 20px;
  131. }
  132. }
  133. }
  134. }