saasbook/esaas-engagements

// Place all the styles related to the matching controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

// Sortable background
// .blue-background-class {
//     background-color: #C8EBFB;
// }

// Sortable cursor 
#matching {
    li {
        cursor: pointer;
    }
}


// Submit animation
.button, .tick{
  display: flex;
  justify-content: center;
  align-items: center;
}
  
  
.button {
  width: 100px;
  height: 40px;
  border-radius: 6px;
  transition: all .3s cubic-bezier(0.67, 0.17, 0.40, 0.83);
}
  
.button svg {
  transform: rotate(180deg);
  transition: all .5s;
}

.button__circle {
  width: 60px;
  height: 60px;
  background: mediumseagreen;
  border-radius: 50%;
  transform: rotate(-180deg);
}

.button:hover {
  cursor: pointer;
}

.tick {
  width: 35px;
  height: 35px; 
  color: white;
  font-size: 2em;
  transition: all .9s;
}



// For jumbo userIn animation
body {
    --def: #FFF;     
    --inv: #414344;
  --faded:  #e7e7e7
}

.header {  
  animation: 2s ease-out 0s 1 userIn;
  position: relative;    
    font-size: 5rem;
}

.header:after {  
  padding-bottom: 10;
}

@keyframes userIn {
  0% {
    left: 20%;
    width: 50%;
    color: var(--def);
    background: var(--inv);
  }
  25% {
    color: var(--def);
    background: var(--inv);
  }
  75% {
    left: 0;
    color: var(--inv);
  }
  100% {
    color: var(--inv);
    background: var(--faded);
    width: 100%;
  }
}

.card {
  min-height: 120px;
}

  /* ~~~~~~~ INIT. BTN ~~~~~~~ */

// .btn2 {        
//     position: relative;    
//     // padding: 1.4rem 4.2rem;
//     padding-right: 3.1rem;
//     font-size: 5rem;
//     color: var(--inv);
//     // letter-spacing: 0.7rem;
//     // text-transform: uppercase;
//     // transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);    
//     cursor: pointer;
//     user-select: none;
// }

// .btn2:before, .btn2:after {
//     content: '';
//     position: absolute;    
//     transition: inherit;
//     z-index: -1;
// }

// .btn:hover {
//     color: var(--def);
//     transition-delay: .5s;
// }

// .btn:hover:before {
//     transition-delay: 0s;
// }

// .btn:hover:after {
//     background: var(--inv);
//     transition-delay: .35s;
// }



// /* From center */
// .from-center:before {
//     top: 0;
//     left: 50%;
//     height: 100%;
//     width: 0;
//     border: 1px solid var(--inv);
//     border-left: 0;
//     border-right: 0;
// }

// .from-center:after {
//     bottom: 0;
//     left: 0;
//     height: 0;
//     width: 100%;
//     background: var(--inv);
// }

// .from-center:hover:before {
//     left: 0;
//     width: 100%;
// }

// .from-center:hover:after {
//     top: 0;
//     height: 100%;
// }

// body {
//     --def: #FFF;     
//     --inv: #111;
//     // display: flex;
//     // justify-content: center;
//     // align-items: center;
//     // flex-direction: column;
//     // height: 100vh;
//     // width: 100%;
//   // left: 0
//     // background-image: linear-gradient(-25deg, #616161 0%, #96B7C4 100%);
// }