Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*----------------------------------- */
- /* Compare Properties Widget
- ------------------------------------- */
- .compare-slide-menu {
- position: fixed;
- top: 0;
- transition: 0.4s ease-in-out;
- z-index: 99999;
- height: 100vh;
- background-color: #fff;
- right: -320px;
- width: 320px;
- padding: 0;
- z-index: 1010;
- box-shadow: 0 0 25px rgba(0,0,0,0.1);
- }
- .csm-content {
- overflow-y: scroll;
- height: 100%;
- width: 340px;
- }
- .compare-slide-menu.active { right: 0; }
- /* Compare Icon */
- .compare-button {
- color: #fff;
- font-size: 20px;
- position: absolute;
- z-index: 101;
- outline: none;
- border: none;
- right: 64px;
- bottom: 27px;
- background-color: transparent;
- width: 28px;
- height: 28px;
- display: block;
- background-image: url(../images/compare-icon.svg);
- background-repeat: no-repeat;
- background-size: 28px;
- }
- span.like-icon {
- width: 23px;
- height: 26px;
- bottom: 28px !important;
- }
- .like-icon .tip-content,
- .compare-button .tip-content {
- padding: 7px 12px;
- min-width: auto;
- max-width: auto;
- white-space: nowrap;
- left: -10px;
- top: -5px;
- z-index: 110;
- transform: translate(-105%, 0);
- transition: 0.2s ease-in-out 0.05s;
- }
- .like-icon:hover .tip-content,
- .compare-button:hover .tip-content {
- opacity: 1;
- visibility: visible;
- transform: translate(-100%, 0);
- background-color: #fff;
- color: #333;
- }
- /* Widget Button */
- .widget-button.with-tip i.icon-compare {
- outline: none;
- border: none;
- background-color: transparent;
- width: 21px;
- height: 21px;
- display: inline-block;
- background-image: url(../images/compare-icon-black.svg);
- background-repeat: no-repeat;
- background-size: 21px;
- position: relative;
- top: 4px;
- left: 2px;
- }
- .widget-button.with-tip i {
- top: 0;
- line-height: 41px;
- color: #333;
- left: 2px;
- opacity: 0.9;
- font-size: 18px;
- }
- .widget-button.with-tip i.fa.fa-star-o {
- font-size: 20px;
- left: 2px;
- top: 1px;
- }
- .widget-button.with-tip.liked i.fa.fa-star-o:before {
- content: "\f005";
- color: #ffb400;
- }
- .widget-button.with-tip {
- height: 41px;
- text-align: center;
- width: 41px;
- float: left;
- background-color: #f0f0f0;
- background: linear-gradient(to bottom, #f4f4f4 0%, #f0f0f0);
- border-radius: 3px;
- margin-right: 5px;
- display: inline-block;
- }
- .widget-button .tip-content {
- padding: 7px 12px;
- min-width: auto;
- max-width: auto;
- white-space: nowrap;
- }
- .widget-button:hover .tip-content {
- opacity: 1;
- visibility: visible;
- transform: translate(-50%, calc(-100% - 10px));
- -ms-transform: translate(-50%, -115%);
- }
- /* Widget Button - End */
- .like-icon:hover,
- .compare-button:hover {
- z-index: 110;
- }
- .like-icon .tip-content:after,
- .compare-button .tip-content:after {
- font-family: "FontAwesome";
- content: "\f0da";
- position: absolute;
- top: 50%;
- bottom: auto;
- left: auto;
- right: -4px;
- font-size: 17px;
- color: #fff;
- opacity: 0;
- transition: opacity 0.2s ease-in-out;
- transform: translate(0%,-50%);
- }
- .like-icon:hover .tip-content:after,
- .compare-button:hover .tip-content:after {
- opacity: 1;
- }
- /* Trigger */
- .csm-trigger {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- left: -50px;
- width: 50px;
- background-color: #66676b;
- color: #fff;
- border-radius: 3px 0 0 3px;
- text-align: center;
- line-height: 50px;
- height: 50px;
- font-size: 24px;
- cursor: pointer;
- }
- .csm-trigger:before {
- content: "\f104";
- font-family: "FontAwesome";
- display: inline-block;
- transition: 0.3s ease-in-out;
- }
- .compare-slide-menu.active .csm-trigger:before { transform: rotate(180deg); }
- /* Mobile Trigger */
- .csm-mobile-trigger {
- position: absolute;
- cursor: pointer;
- font-size: 18px;
- right: 30px;
- top: 26px;
- color: #fff;
- z-index: 100;
- padding: 5px 0 5px 5px;
- display: none;
- }
- .csm-mobile-trigger:before {
- content: "\f00d";
- font-family: "FontAwesome";
- }
- /* Content */
- .csm-properties {
- padding: 30px;
- padding-bottom: 0;
- }
- .csm-content h4 {
- font-size: 18px;
- display: block;
- margin: 0 0 0 0;
- padding: 30px;
- position: relative;
- background-color: #66676b;
- color: #fff;
- width: 100%;
- }
- .csm-content h4:before {
- background: linear-gradient(to top, transparent 20%, rgba(255,255,255,0.08));
- height: 100%;
- width: 100%;
- position: absolute;
- top: 0;
- left: 0;
- content: "";
- z-index: 10;
- display: block;
- }
- .csm-content .listing-item.compact {
- padding: 0;
- height: 180px;
- }
- .csm-content .compact .listing-img-content .listing-compact-title {
- padding: 12px 20px;
- font-size: 16px;
- line-height: 22px;
- background: rgba(74,74,76,0.5);
- transition: 0.3s;
- }
- .csm-content .compact .listing-img-content span {
- color: #fff;
- }
- .csm-content .compact .listing-img-content .listing-compact-title i {
- font-size: 13px;
- padding: 0;
- margin: 0;
- opacity: 0.8;
- }
- .csm-content .listing-badges span {
- color: #fff;
- padding: 0 7px;
- top: 15px;
- line-height: 24px;
- right: 15px;
- font-size: 12px;
- background: rgba(74,74,76,0.62);
- }
- .csm-content .compact .listing-img-container:after { display: none; }
- .csm-content .compact .listing-img-container:before { opacity: 0.7 !important; }
- /* Buttons */
- .csm-buttons {
- padding: 0 30px;
- padding-bottom: 30px;
- }
- .csm-buttons a.button {
- padding: 6px 14px;
- font-size: 14px;
- }
- .csm-buttons a.button.reset:before { display: none; }
- .csm-buttons a.button.reset,
- .csm-buttons a.button.reset:hover {
- background-color: #ffeaea;
- color: #d53232;
- }
- /* Remove Button */
- .remove-from-compare {
- position: absolute;
- top: 15px;
- left: 15px;
- height: 25px;
- font-size: 16px;
- width: 25px;
- line-height: 26px;
- border-radius: 3px;
- text-align: center;
- color: #fff;
- background-color: #d43e3e;
- -webkit-text-stroke: 1px #d43e3e;
- opacity: 0;
- z-index: 1001;
- transition: 0.25s ease-in-out;
- transform: scale(0.8);
- }
- .compact:hover .remove-from-compare { opacity: 1; transform: scale(1); }
- /* Mobile Styles */
- @media (max-width: 992px) {
- .csm-content .compact:hover .listing-img-container:before,
- .csm-content .compact .listing-img-container:before {
- opacity: 0 !important;
- }
- .remove-from-compare { opacity: 1; transform: scale(1); }
- .csm-mobile-trigger { display: block; }
- .compare-slide-menu {
- width: 100%;
- right: -100%;
- }
- .csm-content { width: 100%; }
- }
- /*----------------------------------- */
- /* Compare Properties Page
- ------------------------------------- */
- #compare-list {
- list-style: none;
- margin-bottom: 20px;
- }
- #compare-list li {
- display: flex;
- line-height: 21px;
- background-color: #f8f8f8;
- border-radius: 4px;
- transition: 0.3s;
- }
- #compare-list li:nth-child(odd) { background-color: #fff; }
- #compare-list li.compare-list-properties div {
- border: none;
- padding: 0 10px;
- border-radius: 4px;
- overflow: hidden;
- }
- #compare-list li.compare-list-properties div img {
- border-radius: 4px;
- }
- body #compare-list li .clp-title {
- padding: 20px 15px;
- padding-bottom: 15px;
- display: inline-block;
- width: 100%;
- border-left: 1px solid transparent;
- }
- #compare-list li.compare-list-properties div.clp-img { padding: 0; position: relative; z-index: 10; }
- #compare-list li.compare-list-properties div a:hover .remove-from-compare { opacity: 1; transform: scale(1); }
- body #compare-list li div:last-child .clp-title { border-right: 1px solid transparent; }
- #compare-list li .clp-title h4 { margin: 3px 0 6px 0; }
- #compare-list li div:first-child {
- border-left: 1px solid transparent;
- color: #333;
- text-align: right;
- text-transform: uppercase;
- font-size: 13px;
- }
- #compare-list li:last-child { border-radius: 0 0 4px 4px; }
- #compare-list li div.blank-div { background-color: #fff; border: none; }
- #compare-list li div {
- flex: 1;
- border-right: 1px solid transparent;
- padding: 15px 25px;
- color: #777;
- text-align: center;
- }
- #compare-list li { border-bottom: 1px solid transparent; }
- body #compare-list li .clp-title,
- body #compare-list li div:last-child .clp-title,
- #compare-list li div:first-child,
- #compare-list li div,
- #compare-list li {
- border-color: transparent;
- }
- #compare-list .available,
- #compare-list .not-available {
- width: 100%;
- text-align: center;
- display: inline-block;
- }
- #compare-list .available:before,
- #compare-list .not-available:before {
- content: "\f00c";
- color: #2ab160;
- font-size: 18px;
- font-family: "FontAwesome";
- display: inline-block;
- }
- #compare-list .not-available:before {
- content: "\f00d";
- color: #d43e3e;
- }
- /* Mobile Styles */
- @media (max-width: 992px) {
- .compare-list-container { overflow-x: scroll; }
- #compare-list {
- min-width: 900px;
- zoom: 0.8;
- }
- .remove-from-compare { display: none; }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement