SHARE
TWEET

Untitled

a guest Sep 18th, 2019 97 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top