Quick Action Tile Styling

Share this resource

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on facebook
Submitted by: Donald McGuinn

This adds borders, shadows and more depth to the quick action tiles.

/*THIS CODE IS THANKS TO Miloš Šaltić*/
/*QUICK ACTION TILE STYLING*/
.quick-listing-actions {
    margin-top: 20px !important;
}

.quick-listing-actions>ul {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.quick-listing-actions>ul>li {
    margin-left: 8px;
    margin-right: 8px;
}

.quick-listing-actions>ul>li>a>i {
    font-size: 18px !important;
    margin-bottom: 8px !important;
    color: #9aa8bd;
}

@media (max-width: 600px) {
  .quick-listing-actions>ul>li>a>i {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }
}

.quick-listing-actions>ul>li>a span {
    font-size: 14px;
    font-weight: 500;
    color: #9aa8bd;
    height: 60px;
    transition: .3s ease !important;
}

@media (max-width: 600px) {
  .quick-listing-actions>ul>li>a span {
    font-size: 12px;
  }
}

.quick-listing-actions>ul>li>a {
    padding: 10px 5px !important;
    width: 140px;
    text-align: center !important;
    background: #ffffff !important;
    border-radius: 5px !important;
    transition: .3s ease !important;
    box-shadow: 0px 2px 5px 0px rgba(47,61,74,0.2);
}

@media (max-width: 640px) {
  .quick-listing-actions>ul>li>a {
    width: 120px !important;
  }
}

.quick-listing-actions>ul>li>a:hover {
    box-shadow: 0px 8px 16px 0px rgba(47,61,74,0.2);
    margin-top: -5px;
}

.quick-listing-actions>ul>li>a:hover span {
    color: #f2cd41 !important; /* Put your website's Accent Color Here */
}