Advertisement
Guest User

Untitled

a guest
Sep 18th, 2019
142
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.41 KB | None | 0 0
  1. .setup {
  2. position: absolute;
  3. top: 0;
  4. height: 100vh;
  5. width: 100vw;
  6. display: flex;
  7. overflow-y: scroll;
  8. flex-direction: column;
  9. justify-content: center;
  10. align-items: center;
  11. h1 {
  12. position: absolute;
  13. top: 0;
  14. color: #3498db;
  15. }
  16. h2 {
  17. padding-top: 3rem;
  18. font-weight: 300;
  19. color: rgb(41, 41, 41);
  20. }
  21. .setup-boxes {
  22. width: 80%;
  23. display: flex;
  24. justify-content: space-around;
  25. }
  26.  
  27. .setup-box {
  28. height: 360px;
  29. width: 340px;
  30. background: white;
  31. border-radius: 6px;
  32. border: solid 1px rgba(0,0,0,.03);
  33. display: flex;
  34. flex-direction: column;
  35. justify-content: flex-end;
  36. cursor: pointer;
  37. transition: all 250ms;
  38. background-size: contain;
  39. background-repeat: no-repeat;
  40. background-position: top;
  41. &.client-box-img {
  42. background-image: url(../../assets/setup/client.svg)
  43. }
  44. &.contractor-box-img {
  45. background-image: url(../../assets/setup/contractor.svg)
  46. }
  47. &:hover {
  48. transform: translateY(-5px);
  49. }
  50.  
  51. h3 {
  52. text-align: center;
  53. }
  54. }
  55. // contractor step 1
  56. .list-types {
  57. height: 400px;
  58. text-align: center;
  59. li {
  60. background-color: white;
  61. padding: 1rem;
  62. margin: 1rem;
  63. display: block;
  64. width: 700px;
  65. font-size: 2rem;
  66. font-weight: 300;
  67. cursor: pointer;
  68. transition: all 250ms;
  69.  
  70. &:hover {
  71. transform: translateY(-3px);
  72. box-shadow: 0px 5px 8px 0px #3498db40;
  73. }
  74. }
  75. }
  76.  
  77. .form {
  78. padding-top: 2rem;
  79. .contractorId-input {
  80. width: 30rem;
  81. font-size: 1.4rem;
  82. }
  83. }
  84.  
  85. .last-step-btn, %last-step-btn {
  86. width: 454px;
  87. padding: 1rem;
  88. font-size: 1.5rem;
  89. font-weight: 300;
  90. background: #2980b9;
  91. color: white;
  92. }
  93.  
  94.  
  95. .final-btn {
  96. @extend %last-step-btn;
  97. background-color: #2ecc71;
  98. }
  99.  
  100. .card-img {
  101. max-width: 23rem;
  102. }
  103.  
  104. }
  105.  
  106. .invite-page {
  107. display: flex;
  108. flex-direction: column;
  109. align-items: center;
  110.  
  111. .contractor-invite-photo {
  112. height: 60px;
  113. border-radius: 50%;
  114. border: solid 2px black;
  115. margin: 2rem;
  116. }
  117.  
  118. h1 {
  119. color: #2c3e50;
  120. }
  121.  
  122. a {
  123. background: #2980b9;
  124. color: white;
  125. width: 500px;
  126. height: 60px;
  127. display: flex;
  128. justify-content: center;
  129. align-items: center;
  130. font-size: 1.2rem;
  131. }
  132. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement