Origin commit
This commit is contained in:
Hoang Huu
497
assets/scss/opalestate/_3rd.scss
Executable file
497
assets/scss/opalestate/_3rd.scss
Executable file
@@ -0,0 +1,497 @@
|
||||
//header login
|
||||
.site-header-account{
|
||||
.account-label{
|
||||
margin-left: 5px;
|
||||
}
|
||||
.opalestate-popup{
|
||||
.popup-body{
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
margin-bottom: $padding-base;
|
||||
}
|
||||
.opalestate-social-login__buttons{
|
||||
a{
|
||||
padding: 0 10px;
|
||||
}
|
||||
i{
|
||||
margin-right: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Google Login
|
||||
.mfp-with-zoom .mfp-container,
|
||||
.mfp-with-zoom.mfp-bg {
|
||||
opacity: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
/* ideally, transition speed should match zoom duration */
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.mfp-with-zoom .white-popup{
|
||||
top: 20px;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.mfp-with-zoom.mfp-ready .white-popup{
|
||||
top: 0;
|
||||
}
|
||||
.mfp-with-zoom.mfp-ready .mfp-container {
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
.mfp-with-zoom.mfp-ready.mfp-bg {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mfp-with-zoom.mfp-removing .mfp-container,
|
||||
.mfp-with-zoom.mfp-removing.mfp-bg {
|
||||
opacity: 0;
|
||||
}
|
||||
.white-popup {
|
||||
position: relative;
|
||||
background: $white;
|
||||
padding: $grid-gutter-width;
|
||||
width:auto;
|
||||
max-width: 500px;
|
||||
margin: 20px auto;
|
||||
.mfp-close{
|
||||
top: 15px;
|
||||
}
|
||||
.submit{
|
||||
a{
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.opalestate-button{
|
||||
padding: 17px 35px 14px 35px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.opalestate-social-login__buttons{
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
a{
|
||||
display: block;
|
||||
padding: 0 $padding-base;
|
||||
color: $white;
|
||||
&:hover{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
li{
|
||||
&:not(:last-child){
|
||||
margin-bottom: $padding-base;
|
||||
}
|
||||
}
|
||||
i{
|
||||
margin-right: $padding-base;
|
||||
padding: 16px $padding-base 14px 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 35px;
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
border-left: 1px solid rgba(0, 0, 0, .1);
|
||||
border-right: 1px solid rgba(255, 255, 255, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.opalestate-social-login-facebook-btn{
|
||||
background-color: #3C5A99;
|
||||
}
|
||||
.opalestate-social-login-google-btn{
|
||||
background-color: #d34836;
|
||||
}
|
||||
// Loading map
|
||||
.sk-folding-cube {
|
||||
margin: 20px auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
-webkit-transform: rotateZ(45deg);
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
|
||||
.sk-folding-cube .sk-cube {
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
position: relative;
|
||||
-webkit-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.sk-folding-cube .sk-cube:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $theme-color;
|
||||
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
|
||||
animation: sk-foldCubeAngle 2.4s infinite linear both;
|
||||
-webkit-transform-origin: 100% 100%;
|
||||
-ms-transform-origin: 100% 100%;
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
.sk-folding-cube .sk-cube2 {
|
||||
-webkit-transform: scale(1.1) rotateZ(90deg);
|
||||
transform: scale(1.1) rotateZ(90deg);
|
||||
}
|
||||
.sk-folding-cube .sk-cube3 {
|
||||
-webkit-transform: scale(1.1) rotateZ(180deg);
|
||||
transform: scale(1.1) rotateZ(180deg);
|
||||
}
|
||||
.sk-folding-cube .sk-cube4 {
|
||||
-webkit-transform: scale(1.1) rotateZ(270deg);
|
||||
transform: scale(1.1) rotateZ(270deg);
|
||||
}
|
||||
.sk-folding-cube .sk-cube2:before {
|
||||
-webkit-animation-delay: 0.3s;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.sk-folding-cube .sk-cube3:before {
|
||||
-webkit-animation-delay: 0.6s;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
.sk-folding-cube .sk-cube4:before {
|
||||
-webkit-animation-delay: 0.9s;
|
||||
animation-delay: 0.9s;
|
||||
}
|
||||
@-webkit-keyframes sk-foldCubeAngle {
|
||||
0%, 10% {
|
||||
-webkit-transform: perspective(140px) rotateX(-180deg);
|
||||
transform: perspective(140px) rotateX(-180deg);
|
||||
opacity: 0;
|
||||
} 25%, 75% {
|
||||
-webkit-transform: perspective(140px) rotateX(0deg);
|
||||
transform: perspective(140px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
} 90%, 100% {
|
||||
-webkit-transform: perspective(140px) rotateY(180deg);
|
||||
transform: perspective(140px) rotateY(180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-foldCubeAngle {
|
||||
0%, 10% {
|
||||
-webkit-transform: perspective(140px) rotateX(-180deg);
|
||||
transform: perspective(140px) rotateX(-180deg);
|
||||
opacity: 0;
|
||||
} 25%, 75% {
|
||||
-webkit-transform: perspective(140px) rotateX(0deg);
|
||||
transform: perspective(140px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
} 90%, 100% {
|
||||
-webkit-transform: perspective(140px) rotateY(180deg);
|
||||
transform: perspective(140px) rotateY(180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
////
|
||||
.cmb2-element{
|
||||
.ui-datepicker{
|
||||
width: 350px !important;
|
||||
.ui-datepicker-month,.ui-datepicker-year{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-target, .noUi-target * {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-touch-action: none;
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box
|
||||
}
|
||||
.noUi-target {
|
||||
position: relative;
|
||||
direction: ltr
|
||||
}
|
||||
.noUi-base {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.noUi-origin {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.noUi-handle {
|
||||
position: relative;
|
||||
z-index: 1
|
||||
}
|
||||
.noUi-stacking .noUi-handle {
|
||||
z-index: 10
|
||||
}
|
||||
.noUi-state-tap .noUi-origin {
|
||||
-webkit-transition: left .3s, top .3s;
|
||||
transition: left .3s, top .3s
|
||||
}
|
||||
.noUi-state-drag * {
|
||||
cursor: inherit!important
|
||||
}
|
||||
.noUi-base {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0)
|
||||
}
|
||||
.noUi-horizontal {
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
.noUi-base {
|
||||
.noUi-origin {
|
||||
.noUi-handle {
|
||||
@include rtl-margin-left(-18px);
|
||||
}
|
||||
&:first-child {
|
||||
.noUi-handle {
|
||||
@include rtl-margin-left(0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.noUi-horizontal[data-mode="1"]{
|
||||
.noUi-base{
|
||||
background: $primary;
|
||||
.noUi-origin{
|
||||
background: #e9e9f6;
|
||||
&:first-child {
|
||||
.noUi-handle {
|
||||
@include rtl-margin-left(-9px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.noUi-horizontal[data-mode="2"]{
|
||||
.noUi-base{
|
||||
background:#e9e9f6;
|
||||
.noUi-origin{
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.noUi-horizontal .noUi-handle {
|
||||
height:18px;
|
||||
width:18px;
|
||||
left: 0px;
|
||||
top: -6px;
|
||||
&.noUi-handle-upper {
|
||||
@include rtl-margin-left(-18px);
|
||||
}
|
||||
}
|
||||
.noUi-vertical {
|
||||
width: 18px
|
||||
}
|
||||
.noUi-vertical .noUi-handle {
|
||||
width: 28px;
|
||||
height: 34px;
|
||||
left: -6px;
|
||||
top: -17px
|
||||
}
|
||||
.noUi-background {
|
||||
background: #dadada;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.noUi-connect {
|
||||
background: $primary;
|
||||
border-radius: 3px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
.noUi-origin {
|
||||
}
|
||||
.noUi-target {
|
||||
}
|
||||
.noUi-target.noUi-connect {
|
||||
}
|
||||
.noUi-dragable {
|
||||
cursor: w-resize
|
||||
}
|
||||
.noUi-vertical .noUi-dragable {
|
||||
cursor: n-resize
|
||||
}
|
||||
.noUi-handle {
|
||||
border-radius: 50%;
|
||||
background: #FFF;
|
||||
cursor: default;
|
||||
border: 1px solid transparentize($black, .9);
|
||||
}
|
||||
.noUi-active {
|
||||
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB
|
||||
}
|
||||
.noUi-handle:after, .noUi-handle:before {
|
||||
}
|
||||
.noUi-handle:after {
|
||||
}
|
||||
.noUi-vertical .noUi-handle:after, .noUi-vertical .noUi-handle:before {
|
||||
}
|
||||
.noUi-vertical .noUi-handle:after {
|
||||
}
|
||||
[disabled] .noUi-connect, [disabled].noUi-connect {
|
||||
background: #B8B8B8
|
||||
}
|
||||
[disabled] .noUi-handle {
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
|
||||
//Tooltip
|
||||
.opalestate-rating-detail-container { display: none; }
|
||||
.opalestate-tooltip{
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
.opalestate-rating-detail{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
line-height: 2;
|
||||
li{
|
||||
padding: 5px 0;
|
||||
label{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
li:not(:last-child){
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
}
|
||||
}
|
||||
body {
|
||||
.tooltipster-sidetip .tooltipster-box {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: white;
|
||||
box-shadow: $box-shadow-base;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-bottom .tooltipster-box {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-left .tooltipster-box {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-right .tooltipster-box {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-top .tooltipster-box {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip .tooltipster-content {
|
||||
color: $body-color;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip .tooltipster-arrow {
|
||||
height: 6px;
|
||||
margin-left: -6px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow,
|
||||
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow {
|
||||
height: 12px;
|
||||
margin-left: 0;
|
||||
margin-top: -6px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip .tooltipster-arrow-background {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip .tooltipster-arrow-border {
|
||||
border: 6px solid transparent;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
|
||||
border-bottom-color: white;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
|
||||
border-left-color: white;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
|
||||
border-right-color: white;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
|
||||
border-top-color: white;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped {
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped {
|
||||
left: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
/***/
|
||||
|
||||
/**
|
||||
* jQuery toast plugin created by Kamran Ahmed copyright MIT license 2014
|
||||
*/
|
||||
.jq-toast-wrap { display: block; position: fixed; width: 350px; pointer-events: none !important; margin: 0; padding: 0; letter-spacing: normal; z-index: 9000 !important; }
|
||||
.jq-toast-wrap * { margin: 0; padding: 0; }
|
||||
|
||||
.jq-toast-wrap.bottom-left { bottom: 20px; left: 20px; }
|
||||
.jq-toast-wrap.bottom-right { bottom: 20px; right: 40px; }
|
||||
.jq-toast-wrap.top-left { top: 20px; left: 20px; }
|
||||
.jq-toast-wrap.top-right { top: 20px; right: 40px; }
|
||||
|
||||
.jq-toast-single { display: block; width: 100%; padding: 10px; margin: 0px 0px 5px; border-radius: 4px; font-size: 12px;line-height: 17px; position: relative; pointer-events: all !important; background-color: #444444; color: white; }
|
||||
|
||||
.jq-toast-single h2 {font-size: 14px; margin: 0px 0px 7px; background: none; color: inherit; line-height: inherit; letter-spacing: normal; }
|
||||
.jq-toast-single a { color: #eee; text-decoration: none; font-weight: bold; border-bottom: 1px solid white; padding-bottom: 3px; font-size: 12px; }
|
||||
|
||||
.jq-toast-single ul { margin: 0px 0px 0px 15px; background: none; padding:0px; }
|
||||
.jq-toast-single ul li { list-style-type: disc !important; line-height: 17px; background: none; margin: 0; padding: 0; letter-spacing: normal; }
|
||||
|
||||
.close-jq-toast-single { position: absolute; top: 3px; right: 7px; font-size: 14px; cursor: pointer; }
|
||||
|
||||
.jq-toast-loader { display: block; position: absolute; top: -2px; height: 5px; width: 0%; left: 0; border-radius: 5px; background: red; }
|
||||
.jq-toast-loaded { width: 100%; }
|
||||
.jq-has-icon { padding: 10px 10px 10px 50px; background-repeat: no-repeat; background-position: 10px; }
|
||||
.jq-icon-info { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII='); background-color: #31708f; color: #d9edf7; border-color: #bce8f1; }
|
||||
.jq-icon-warning { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII='); background-color: #8a6d3b; color: #fcf8e3; border-color: #faebcc; }
|
||||
.jq-icon-error { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII='); background-color: #a94442; color: #f2dede; border-color: #ebccd1; }
|
||||
.jq-icon-success { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg=='); color: #dff0d8; background-color: #3c763d; border-color: #d6e9c6; }
|
||||
150
assets/scss/opalestate/_agency-loop.scss
Executable file
150
assets/scss/opalestate/_agency-loop.scss
Executable file
@@ -0,0 +1,150 @@
|
||||
.opalestate_agency{
|
||||
margin-bottom: $grid-gutter-width;
|
||||
}
|
||||
.trusted-label{
|
||||
font-size: 23px;
|
||||
color: $primary;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
}
|
||||
.team-header {
|
||||
.trusted-label{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
background-color: $white;
|
||||
border-radius: 50%;
|
||||
bottom: 0;
|
||||
transform: translateY(50%);
|
||||
border: 1px solid $border-color;
|
||||
width: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.agency-box-title{
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
.agency-address{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.agency-box-meta{
|
||||
[class*="agency-box-"]{
|
||||
&:not(:last-of-type){
|
||||
}
|
||||
i{
|
||||
width: $font-size-base;
|
||||
margin-right: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
a{
|
||||
color: inherit;
|
||||
&:hover{
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
//Grid Layout
|
||||
.agency-grid-style{
|
||||
|
||||
.agency-body-content{
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.agency-logo{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
margin-right: $grid-gutter-width;
|
||||
}
|
||||
.agency-info{
|
||||
padding: $grid-gutter-width;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
.agency-content{
|
||||
flex: 1;
|
||||
}
|
||||
.agency-box-meta{
|
||||
padding: $grid-gutter-width;
|
||||
[class*="agency-box-"]{
|
||||
line-height: 1;
|
||||
&:not(:last-of-type){
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.agency-box-title{
|
||||
margin-bottom: 9px;
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
}
|
||||
.agency-address{
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
//List Layout
|
||||
.agency-list-style{
|
||||
.agency-inner{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: $grid-gutter-width 0;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
.agent-box-image{
|
||||
height: 100%;
|
||||
img{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.agency-header{
|
||||
|
||||
margin: 0 $grid-gutter-width;
|
||||
}
|
||||
.agency-body-content{
|
||||
flex: 1;
|
||||
padding: $grid-gutter-width 0 0;
|
||||
}
|
||||
.agency-logo{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $border-color;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: $grid-gutter-width;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
.agency-info{
|
||||
position: relative;
|
||||
padding: 0 $grid-gutter-width 18px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
margin-bottom: 17px;
|
||||
|
||||
}
|
||||
.agency-box-meta{
|
||||
@media screen and (max-width:767px){
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
.agency-box-title{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@media screen and (min-width:768px) {
|
||||
.agency-body-content{
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
.agency-header{
|
||||
max-width: 240px;
|
||||
}
|
||||
.agency-info{
|
||||
padding: 0 0 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
88
assets/scss/opalestate/_archive.scss
Executable file
88
assets/scss/opalestate/_archive.scss
Executable file
@@ -0,0 +1,88 @@
|
||||
//
|
||||
.archive{
|
||||
.opalestate-head{
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
}
|
||||
.opalestate-head {
|
||||
position: relative;
|
||||
background-color:$secondary;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 640px;
|
||||
.opalestate-heading {
|
||||
color:$white;
|
||||
text-align:center;
|
||||
p{
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
a{
|
||||
color: $white;
|
||||
&:hover{
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.opalestate-head-title{
|
||||
color: $white;
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
.search-agent-title{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.opalestate-head-form{
|
||||
padding: 0 $grid-gutter-width;
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
}
|
||||
.opalestate-single-agent{
|
||||
min-height: 500px;
|
||||
align-items: flex-end;
|
||||
.opalestate-heading{
|
||||
text-align: left;
|
||||
& > span{
|
||||
margin-bottom: 13px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.opalestate-head-title{
|
||||
margin-bottom: 29px;
|
||||
}
|
||||
}
|
||||
.opalesate-archive-top{
|
||||
margin-bottom: $grid-gutter-width*2;
|
||||
padding: 12px 0;
|
||||
border-style: solid;
|
||||
border-width: 1px 0 1px;
|
||||
border-color: $border-color;
|
||||
position: relative;
|
||||
.opalestate-results{
|
||||
line-height: 45px;
|
||||
}
|
||||
.opalestate-sortable{
|
||||
display: inline-block;
|
||||
.form-control,.select2-selection--single{
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.opalesate-archive-bottom {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.display-mode{
|
||||
display: inline-block;
|
||||
.btn:not(:disabled):not(.disabled){
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
color: $body-color;
|
||||
margin-left: 10px;
|
||||
font-size: 18px;
|
||||
&.active,&:hover{
|
||||
background-color: transparent;
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
253
assets/scss/opalestate/_dashboard.scss
Executable file
253
assets/scss/opalestate/_dashboard.scss
Executable file
@@ -0,0 +1,253 @@
|
||||
.opalestate-admin-box{
|
||||
margin-bottom:$padding-base*2;
|
||||
h3 {
|
||||
border-bottom:1px $border-color solid;
|
||||
padding-bottom:15px;
|
||||
padding-top:30px;
|
||||
font-size:150%;
|
||||
}
|
||||
}
|
||||
|
||||
/** CMD BOX 2 */
|
||||
.select2-search-member {
|
||||
display:flex;
|
||||
.member-meta {
|
||||
margin-left:12px;
|
||||
font-weight:500
|
||||
}
|
||||
}
|
||||
.cmb2-wrap .field-row-2 .cmb-row {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.cmb2-wrap .field-row-2 .cmb-row:nth-child(even) > div {
|
||||
@media screen and (min-width:768px){
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
.cmb2-wrap .cmb-td {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
|
||||
.bg-info {
|
||||
background-color:#0288d1 !important;
|
||||
}
|
||||
.bg-warning {
|
||||
background-color:#ffca28!important;
|
||||
}
|
||||
.alert.alert-success{
|
||||
background: #0F93FA;
|
||||
}
|
||||
|
||||
.alert.alert-danger{
|
||||
background: #f55753;
|
||||
}
|
||||
.alert.alert-warning{
|
||||
background: #ffca28;
|
||||
}
|
||||
/**
|
||||
*
|
||||
* Dashboard Page
|
||||
*/
|
||||
|
||||
@media( max-width: $screen-xs-max ) {
|
||||
|
||||
.user-dasboard-sidebar {
|
||||
display:none;
|
||||
}
|
||||
body.active {
|
||||
.user-dasboard-sidebar{
|
||||
display:block;
|
||||
}
|
||||
margin-left:251px!important;
|
||||
}
|
||||
.page-template-user-management {
|
||||
margin-left:0!important;
|
||||
}
|
||||
|
||||
#show-user-sidebar-btn {
|
||||
display:block!important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-left {
|
||||
display:flex;
|
||||
}
|
||||
.opalestate-user-greeting {
|
||||
.popup-head {
|
||||
float:right;
|
||||
}
|
||||
.popup-head a {
|
||||
color:$white;
|
||||
text-align:right;
|
||||
img {
|
||||
width:40px;
|
||||
border-radius:50%;
|
||||
}
|
||||
position:relative;
|
||||
i {
|
||||
padding:12px;
|
||||
border-radius:50%;
|
||||
background:rgba(0, 0, 0, .06 );
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding:0;
|
||||
margin :0 ;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dashboard-navbar {
|
||||
|
||||
background-color: $white;
|
||||
padding:9px $grid-gutter-width;
|
||||
|
||||
border-bottom:1px solid $border-color;
|
||||
ul{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-item {
|
||||
background-color:$white;
|
||||
border:solid 1px $border-color;
|
||||
padding:$padding-base;
|
||||
i {
|
||||
background:rgba(0, 0, 0, .18);
|
||||
padding:15px;
|
||||
border-radius:50%;
|
||||
}
|
||||
h5 {
|
||||
font-size:200%;
|
||||
text-align:center;
|
||||
}
|
||||
span {
|
||||
font-weight:700
|
||||
}
|
||||
}
|
||||
|
||||
.page-template-user-management {
|
||||
.opalestate-box{
|
||||
@media screen and (min-width:768px){
|
||||
margin-right: $padding-base;
|
||||
}
|
||||
}
|
||||
&.logged-in { margin-left:251px; }
|
||||
#content {
|
||||
padding-left:$padding-base*2;
|
||||
padding-right:$padding-base*2;
|
||||
}
|
||||
|
||||
#show-user-sidebar-btn {
|
||||
display:none;
|
||||
margin-right:$padding-base;
|
||||
}
|
||||
.opalestate-panel-myaccount {
|
||||
padding-top: $padding-base*3;
|
||||
padding-bottom: $padding-base*3;
|
||||
}
|
||||
}
|
||||
.admin-bar{
|
||||
.opalestate-user-management{
|
||||
.user-dasboard-sidebar{
|
||||
padding-top: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.opalmembership-dashboard{
|
||||
.btn-link{
|
||||
background-color: $secondary;
|
||||
color: $white;
|
||||
&:hover{
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.opalestate-user-management {
|
||||
min-height: 600px;
|
||||
.property-submission-form{
|
||||
.opalestate-box{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.user-dasboard-sidebar {
|
||||
background-color:$headings-color;
|
||||
min-height:900px;
|
||||
position:fixed;
|
||||
left:0;
|
||||
width:250px;
|
||||
height:100%;
|
||||
z-index:100;
|
||||
top:0px;
|
||||
.user-dasboard-sidebar-inner{
|
||||
padding-top:20px;
|
||||
}
|
||||
}
|
||||
.navbar-brand {
|
||||
padding:32px $padding-base;
|
||||
}
|
||||
|
||||
|
||||
.account-links {
|
||||
list-style:none;
|
||||
padding:0;
|
||||
margin : 0;
|
||||
a {
|
||||
padding:8px 20px;
|
||||
width:100%;
|
||||
display:block;
|
||||
font-weight:500 ;
|
||||
i {
|
||||
margin-right:6px;
|
||||
color:$body-color;
|
||||
}
|
||||
color:$body-color;
|
||||
&:hover {
|
||||
background-color:$primary;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-main {
|
||||
padding-top:$padding-base;
|
||||
$padding-bottom:$padding-base;
|
||||
}
|
||||
}
|
||||
|
||||
//my reviews
|
||||
.opalestate-my-reviews{
|
||||
.commentlist{
|
||||
margin: 0;
|
||||
}
|
||||
.meta{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.opalestate-review__ratings{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.opalestate-my-reviews-item_property-name{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.opalestate-my-reviews-item_property-view{
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
//my property
|
||||
.my-property-list{
|
||||
.entry-content{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dashboard {
|
||||
|
||||
}
|
||||
975
assets/scss/opalestate/_elements.scss
Executable file
975
assets/scss/opalestate/_elements.scss
Executable file
@@ -0,0 +1,975 @@
|
||||
.floating-keep-top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width:100%;
|
||||
background:#FFF;
|
||||
z-index:999;
|
||||
transition: all 1s ease-in-out;
|
||||
}
|
||||
.admin-bar{
|
||||
.floating-keep-top{
|
||||
top: 32px;
|
||||
}
|
||||
}
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
.highlight-text{
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
//Property status
|
||||
ul.property-status{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
li{
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
&:not(:last-child){
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
//single stick bars
|
||||
.keep-top-bars{
|
||||
top: -70px;
|
||||
transition: all 1s ease-in-out;
|
||||
border-bottom: 1px solid $border-color;
|
||||
ul{
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
&:not(.opalestate-scroll-elements){
|
||||
padding: 10px 0;
|
||||
}
|
||||
li{
|
||||
&:not(:last-child){
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.floating-keep-top{
|
||||
border-bottom: none;
|
||||
box-shadow: $box-shadow-base;
|
||||
}
|
||||
|
||||
.single-property-buttons{
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
a{
|
||||
position: relative;
|
||||
margin-left: 20px;
|
||||
text-transform: capitalize;
|
||||
i{
|
||||
margin-right: 18px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
&::before{
|
||||
content: "";
|
||||
width: 52px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
box-shadow: $box-shadow-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.opalestate-scroll-elements{
|
||||
a:not(.btn-primary){
|
||||
display: block;
|
||||
padding: 21px 0 17px;
|
||||
border-bottom: 3px solid transparent;
|
||||
color: inherit;
|
||||
transition: all .5s ease-in-out;
|
||||
&:focus, &:hover{
|
||||
border-color: $primary;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//Rating star
|
||||
.opalestate-rating__stars{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: $font-size-base;
|
||||
font-size: $font-size-base;
|
||||
width: calc(#{$font-size-base}*5 - 5px);
|
||||
line-height: 1;
|
||||
|
||||
&::before{
|
||||
font-family:'FontAwesome';
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
content: "\f005\f005\f005\f005\f005";
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
span{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
height: 100%;
|
||||
color: transparent;
|
||||
padding-top: 20px;
|
||||
&::before{
|
||||
font-family:'FontAwesome';
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
content: "\f005\f005\f005\f005\f005";
|
||||
color: #f6be15;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(#{$font-size-base}*5);
|
||||
}
|
||||
}
|
||||
}
|
||||
p.stars {
|
||||
a {
|
||||
position: relative;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
text-indent: -999em;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
line-height: 1;
|
||||
font-family: "FontAwesome";
|
||||
content: "\f006";
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
~ a::before {
|
||||
|
||||
content: "\f006";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
&::before {
|
||||
|
||||
content: '\f005';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
a.active {
|
||||
&::before {
|
||||
|
||||
content: '\f005';
|
||||
}
|
||||
|
||||
~ a::before {
|
||||
|
||||
content: '\f006';
|
||||
}
|
||||
}
|
||||
|
||||
a:not( .active ) {
|
||||
&::before {
|
||||
|
||||
content: '\f005';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//mortgage
|
||||
.opalestate-mortgage-chart-svg{
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0;
|
||||
&::after{
|
||||
content:"";
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
.opalestate-loan-amount{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
// Form group
|
||||
.opal-form-group{
|
||||
margin-top: 16px;
|
||||
label{
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* SOCIAL ICONS
|
||||
**/
|
||||
.opalestate-social-icons{
|
||||
margin:15px -30px 0 -30px;
|
||||
border-top: 1px solid $border-color;
|
||||
padding: 0 $theme-padding;
|
||||
[class^="opalestate-social-"]{
|
||||
font-size: 13px;
|
||||
color: $body-color;
|
||||
display:inline-block;
|
||||
margin: 10px 5px 0 0;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
line-height: 32px;
|
||||
@include square(34px);
|
||||
background: $border-color;
|
||||
transition: all 0.2s ease-out 0s;
|
||||
border-radius: 50%;
|
||||
&:last-of-type{
|
||||
margin-right: 0;
|
||||
}
|
||||
&:hover{
|
||||
border-color: $link-hover-color;
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
.opalestate-social-white{
|
||||
background: #FFFFFF;
|
||||
color: $body-color;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
.opalestate-social-outline{
|
||||
background: transparent;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
.opalestate-social-outline-light{
|
||||
background: transparent;
|
||||
color: #FFF;
|
||||
border: 1px solid #FFFFFF;
|
||||
&:hover{
|
||||
background: #FFF;
|
||||
color: #000;
|
||||
border-color: #000;
|
||||
}
|
||||
}
|
||||
&:first-child{
|
||||
[class*="opalestate-social-"]{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
[class*="opalestate-social-"]{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&.opalestate-sicolor{
|
||||
[class*="opalestate-social-"]{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Tabs
|
||||
*/
|
||||
.opalestate-tab-head{
|
||||
background-color:$primary;
|
||||
}
|
||||
.tab-item {
|
||||
color: $white;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: all .5s ease-in-out;
|
||||
&.active,&:hover {
|
||||
border-color: $secondary;
|
||||
color: $white;
|
||||
}
|
||||
padding: 14px 18px 15px;
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
.opalestate-tab-content {
|
||||
display: none;
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
clear:both;
|
||||
}
|
||||
|
||||
|
||||
.opalmembership-login-form-wrapper{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.list-tabs {
|
||||
margin-bottom: $padding-base;
|
||||
background-color: $white;
|
||||
padding: 0;
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
li {
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
&.active,
|
||||
&:hover {
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* end Tabs
|
||||
*/
|
||||
//Status Label
|
||||
.property-group-label,
|
||||
.agency-label {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: $padding-base;
|
||||
left: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.property-group-status {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: $padding-base;
|
||||
right: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.property-group-status + .property-meta-bottom {
|
||||
top: 45px;
|
||||
right: 20px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.agency-header{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// label
|
||||
.label {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
line-height: 14px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.property-label,
|
||||
.property-status-item {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style: none;
|
||||
line-height: 14px;
|
||||
&.property-status-for-rent,
|
||||
&.property-status-for-sale {
|
||||
background-color:$primary;
|
||||
}
|
||||
.property-label-item:not(last-child){
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
|
||||
.property-label-rented {
|
||||
background-color: #2048f6;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.property-label-sold {
|
||||
background-color: #fee882;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.label-featured {
|
||||
background-color:$secondary;
|
||||
color:$white;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.single {
|
||||
.label-featured {
|
||||
margin-bottom: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.label-danger {
|
||||
background-color:$primary;
|
||||
color:$white;
|
||||
}
|
||||
|
||||
////
|
||||
.property-meta-list {
|
||||
> li {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.icon-box {
|
||||
display: inline-block;
|
||||
}
|
||||
.info-meta{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/// map infor view
|
||||
.map-info-preview{
|
||||
position: relative;
|
||||
padding: $grid-gutter-width;
|
||||
background-color:#FFFFFF;
|
||||
margin-bottom: 15px;
|
||||
max-width: 300px;
|
||||
box-shadow: $box-shadow-base;
|
||||
&:before {
|
||||
@include triangle( bottom,0px, $white, 20px );
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
bottom: -14px;
|
||||
margin-left: -34px;
|
||||
}
|
||||
a img{
|
||||
max-width: 240px;
|
||||
width: 240px;
|
||||
}
|
||||
.media-top{
|
||||
position: relative;
|
||||
}
|
||||
.property-status{
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
line-height: 1;
|
||||
}
|
||||
.label-property{
|
||||
visibility: hidden;
|
||||
}
|
||||
.info-container{
|
||||
.prop-title {
|
||||
text-transform: uppercase;
|
||||
margin: 15px 0 8px;
|
||||
}
|
||||
p {
|
||||
line-height: 22px;
|
||||
}
|
||||
.prop-address {
|
||||
|
||||
}
|
||||
}
|
||||
.property-meta-list.list-inline {
|
||||
border-top: 1px solid $border-color;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
> li {
|
||||
flex-basis: 50%;
|
||||
padding: 0;
|
||||
margin: $padding-base 0 0;
|
||||
i{
|
||||
width: 20px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.arrow-down{
|
||||
border-style: solid;
|
||||
border-width: 10px 10px 0;
|
||||
bottom: -13px;
|
||||
height: 0;
|
||||
left: 112px;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
border-color:$primary;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.opalestate-map-preview-wrap {
|
||||
.gm-style img {
|
||||
max-width: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
.infoBox {
|
||||
> img {
|
||||
position: absolute!important;
|
||||
z-index: 99;
|
||||
right: -5px;
|
||||
top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.opalestate-popup{
|
||||
position: relative;
|
||||
.popup-head {
|
||||
position:relative;
|
||||
> span {
|
||||
cursor: pointer;
|
||||
}
|
||||
.notify {
|
||||
background-color:#00bcd4;
|
||||
padding:1px 6px;
|
||||
border-radius:50%;
|
||||
position:absolute;
|
||||
top:-10px;
|
||||
right:0px;
|
||||
font-size:8px;
|
||||
color:$white;
|
||||
&.active {
|
||||
top:auto;
|
||||
bottom:-10px;
|
||||
padding:5px;
|
||||
background-color:$primary
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-body{
|
||||
display: none;
|
||||
position:absolute;
|
||||
z-index: 999;
|
||||
min-width: 450px;
|
||||
top: 30px;
|
||||
margin:0 0 0 -194px;
|
||||
padding: $grid-gutter-width;
|
||||
background-color: $white;
|
||||
box-shadow: $box-shadow-base;
|
||||
h6 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
label {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
button {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.account-dashboard-content{
|
||||
padding: $grid-gutter-width;
|
||||
background-color: $white;
|
||||
box-shadow: $box-shadow-base;
|
||||
position: relative;
|
||||
&:before {
|
||||
@include triangle( top,0px, $white, 20px );
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
top: -14px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
&.active .popup-body{
|
||||
display: block;
|
||||
}
|
||||
&.hover-align-right:hover .popup-body {
|
||||
display:block;
|
||||
right:0;
|
||||
padding-top:30px;
|
||||
min-width: 250px;
|
||||
.account-dashboard-content{
|
||||
&:before {
|
||||
right:-15px;
|
||||
left:auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.popup-close{
|
||||
position:absolute;
|
||||
top: 10px;
|
||||
@include rtl-right(15px);
|
||||
color:$primary;
|
||||
cursor: hand;cursor:pointer;
|
||||
}
|
||||
}
|
||||
//Pagination
|
||||
.pagination {
|
||||
li{
|
||||
display: block;
|
||||
min-width: 40px;
|
||||
text-align: center;
|
||||
padding: 5px $padding-base;
|
||||
font-weight: 500;
|
||||
color: $body-color;
|
||||
&.current, &:hover{
|
||||
background-color: $primary;
|
||||
a{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-links{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
//// opalestate-dropdown
|
||||
|
||||
.opalestate-dropdown {
|
||||
position:relative;
|
||||
.dropdown-body {
|
||||
position:absolute;
|
||||
display:none;
|
||||
background:red;
|
||||
min-width:250px;
|
||||
right:0;
|
||||
top:50px;
|
||||
}
|
||||
&:hover {
|
||||
.dropdown-body {
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Agent
|
||||
// display in single package
|
||||
.agent-box-list {
|
||||
.inner {
|
||||
display:flex;
|
||||
.agent-preview {
|
||||
width:80px;
|
||||
margin-right:$padding-base;
|
||||
img { border-radius:50%; }
|
||||
}
|
||||
border-bottom:solid 1px $border-color;
|
||||
padding-bottom:$padding-base*2;
|
||||
}
|
||||
.opalestate-social-icons {
|
||||
padding-top:$padding-base;
|
||||
}
|
||||
}
|
||||
|
||||
.single-property-sidebar {
|
||||
.agent-box-list{
|
||||
.inner {
|
||||
border-bottom:0;
|
||||
}
|
||||
.opalestate-social-icons {
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding-bottom:$padding-base;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.agent-box-image{
|
||||
overflow: hidden;
|
||||
}
|
||||
.property-agent-info{
|
||||
.team-header{
|
||||
text-align: center;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
.property-agent-contact{
|
||||
.agent-preview{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.team-header{
|
||||
margin-bottom: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
.team-header {
|
||||
position: relative;
|
||||
.agent-label {
|
||||
position: absolute;
|
||||
text-transform: uppercase;
|
||||
padding: 0 10px;
|
||||
color: $white;
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
.agent-featured{
|
||||
.agent-label{
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
.agent-levels{
|
||||
.agent-label{
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.agent-box-title{
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding-bottom: 20px;
|
||||
//margin-bottom: 28px;
|
||||
}
|
||||
.agent-preview{
|
||||
margin-bottom: $grid-gutter-width;
|
||||
position: relative;
|
||||
.agent-avatar{
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
width: 35px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-box-job{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.agent-box-meta{
|
||||
color: $body-color-light;
|
||||
div[class*="agent-box-"]{
|
||||
line-height: 1;
|
||||
padding: 8px 1px;
|
||||
&:first-of-type{
|
||||
padding-top: 0;
|
||||
}
|
||||
&:last-of-type{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
&:not(:last-of-type){
|
||||
//border-bottom: 1px solid $border-color;
|
||||
}
|
||||
i{
|
||||
width: $font-size-base;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
a{
|
||||
color: inherit;
|
||||
}
|
||||
h4 {
|
||||
padding-top:0;
|
||||
}
|
||||
}
|
||||
.gallery-summery-style {
|
||||
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
a {
|
||||
display:block;
|
||||
width:20%;
|
||||
height:120px;
|
||||
background-size:cover;
|
||||
background-repeat:no-repeat;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//Featured Properties
|
||||
.my-featured-section{
|
||||
.opalestate_property{
|
||||
margin-right: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//Floor plans
|
||||
.property-floorplans-session, .tabl-simple-style{ //tabs outline
|
||||
.opalestate-tab-head{
|
||||
line-height: 1;
|
||||
border-bottom: 1px solid $border-color;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.tab-item{
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
color: $headings-color;
|
||||
display: inline-block;
|
||||
padding-bottom: 19px;
|
||||
font-weight: $headings-font-weight;
|
||||
border-bottom: 3px solid transparent;
|
||||
margin-bottom: -2px;
|
||||
&:not(:last-of-type){
|
||||
margin-right: 28px;
|
||||
}
|
||||
&.active, &:hover{
|
||||
background-color: transparent;
|
||||
color: $headings-color;
|
||||
border-color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.plan-name,.plan-content{
|
||||
display: none;
|
||||
}
|
||||
.plan-image{
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
//Property categories
|
||||
.property-category{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.static-content{
|
||||
padding: $grid-gutter-width;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
a{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.property-category-count{
|
||||
color: $secondary;
|
||||
}
|
||||
.property-category-title{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.property-category-info{
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.category-overlay{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: 2;
|
||||
}
|
||||
&:hover{
|
||||
.property-category-bg{
|
||||
transform: scale(1.1);
|
||||
&::before{
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.property-category-bg{
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
min-height: 340px;
|
||||
transform: scale(1);
|
||||
transition: opacity 0.5s ease, transform 1s cubic-bezier(0, 0, 0.44, 1.18), -webkit-transform 1s cubic-bezier(0, 0, 0.44, 1.18);
|
||||
background-position: center center;
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.property-city{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.static-content{
|
||||
padding: $grid-gutter-width;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
a{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.property-city-count{
|
||||
color: $secondary;
|
||||
}
|
||||
.property-city-title{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.property-city-info{
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.city-overlay{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: 2;
|
||||
}
|
||||
&:hover{
|
||||
.property-city-bg{
|
||||
transform: scale(1.1);
|
||||
&::before{
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.property-city-bg{
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
min-height: 340px;
|
||||
transform: scale(1);
|
||||
transition: opacity 0.5s ease, transform 1s cubic-bezier(0, 0, 0.44, 1.18), -webkit-transform 1s cubic-bezier(0, 0, 0.44, 1.18);
|
||||
background-position: center center;
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#opalestate-map-preview .cluster img + div {
|
||||
line-height: 30px !important;
|
||||
}
|
||||
481
assets/scss/opalestate/_form.scss
Executable file
481
assets/scss/opalestate/_form.scss
Executable file
@@ -0,0 +1,481 @@
|
||||
|
||||
/*
|
||||
*
|
||||
*/
|
||||
.opalestate-search-form{
|
||||
&:not([class*="opalestate-search-form--vertical"]){
|
||||
background-color: $white;
|
||||
padding: $theme-padding/2 $theme-padding ;
|
||||
&.opalestate-search-agents-form {
|
||||
border:1px solid $border-color;
|
||||
margin-bottom: $theme-margin;
|
||||
}
|
||||
}
|
||||
.btn-search, .status-item, .opalestate-collapse-btn {
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
&.hidden-labels{
|
||||
.opalestate-label{
|
||||
display: none;
|
||||
}
|
||||
.input-search-city {
|
||||
.opalestate-popup {
|
||||
top: 20%;
|
||||
}
|
||||
}
|
||||
.select2-container,.btn-search,.form-control,.opal-collapse-button,.input-group-number {
|
||||
margin: $padding-base 0;
|
||||
}
|
||||
.opal-slide-ranger{
|
||||
.slide-ranger-label{
|
||||
display: block;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
.map-remove { top: 10px;}
|
||||
}
|
||||
.opalestate-label{
|
||||
font-weight: $headings-font-weight;
|
||||
display: block;
|
||||
color: $headings-color;
|
||||
line-height: 1;
|
||||
margin-top: $theme-margin/2;
|
||||
margin-bottom: $theme-margin/2;
|
||||
}
|
||||
h6 {
|
||||
margin: 0;
|
||||
}
|
||||
.searchbox-top {
|
||||
border-bottom:solid 1px $border-color;
|
||||
margin-bottom: $padding-base;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.select2-container,.btn-search,.form-control,.list-property-status,.opal-collapse-button,.input-group-number {
|
||||
margin-bottom: $padding-base;
|
||||
}
|
||||
|
||||
.opal-slide-ranger{
|
||||
padding: ceil($padding-base/2) 0;
|
||||
.slide-ranger-label{
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
.list-property-status{
|
||||
.status-item{
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
padding: 9px 0 6px;
|
||||
color: $white;
|
||||
background-color: $secondary;
|
||||
transition: all ease-in-out 0.5s;
|
||||
&:hover,&.active{
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-search {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
i{
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.opal-slide-ranger{
|
||||
@media screen and (max-width:$screen-sm){
|
||||
margin: $grid-gutter-width/2 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.opalestate-archive-agency,
|
||||
.opalestate-archive-search-block,
|
||||
.post-type-archive-opalestate_agent{
|
||||
.opalestate-search-form {
|
||||
&:not([class*="opalestate-search-form--vertical"]) {
|
||||
margin: 0 -30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.map-remove {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 40px;
|
||||
}
|
||||
.opalestate-search-opal-map {
|
||||
&.active {
|
||||
.map-remove {
|
||||
display: block;
|
||||
&:focus,
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
input[value=""] + .map-remove {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[class*="opalestate-search-form--vertical"]{
|
||||
.btn-search{
|
||||
margin-top: 15px;
|
||||
}
|
||||
.opalestate-label {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.search-more-options{
|
||||
position: relative;
|
||||
margin: $padding-base 0 5px;
|
||||
line-height: 1;
|
||||
|
||||
}
|
||||
|
||||
a.opal-collapse-button{
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
&:before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: '\f0fe';
|
||||
padding-right:5px;
|
||||
color: $primary;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
&.show{
|
||||
color: $link-hover-color;
|
||||
&:before {
|
||||
content: '\f146';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.more-options-container{
|
||||
margin-top: $padding-base;
|
||||
}
|
||||
.more-options-items{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
.opal-collapse-container{
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
button.opal-collapse-button{
|
||||
transition: all 0.5s;
|
||||
width: 100%;
|
||||
i::before{
|
||||
display: block;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
&:hover,&.show{
|
||||
outline: none;
|
||||
}
|
||||
&:focus{
|
||||
outline: none;
|
||||
}
|
||||
&.show{
|
||||
i::before{
|
||||
transform: rotate(180deg);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.more-options-item{
|
||||
width: 25%;
|
||||
float: left;
|
||||
margin-bottom: $padding-base;
|
||||
@media(max-width: 767px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.input-search-city {
|
||||
position:relative;
|
||||
.opalestate-popup {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
//custom checkbox
|
||||
.form-item--types{
|
||||
.group-item{
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 0px;
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
line-height: 1;
|
||||
.custom-checkbox-label{
|
||||
z-index: -1;
|
||||
}
|
||||
input[type="checkbox"]{
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
&:checked ~ .custom-checkbox-label{
|
||||
background-color: $primary;
|
||||
&::after{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
input ~ .custom-checkbox-label{
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.opalestate-search-form--vertical {
|
||||
.more-options-item {
|
||||
float:none;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
|
||||
.more-options-label{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: 23px;
|
||||
margin-bottom: 0px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
input[type="checkbox"]{
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
&:checked ~ .custom-checkbox-label{
|
||||
background-color: $secondary;
|
||||
&::after{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
input ~ .custom-checkbox-label{
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.custom-checkbox-label{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
background-color: #eee;
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 5px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 8px;
|
||||
border: solid $white;
|
||||
border-width: 0 2px 2px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
}
|
||||
//status bar 2
|
||||
.search-status-bar--2{
|
||||
.list-property-status{
|
||||
padding:0;
|
||||
margin: 0;
|
||||
.status-item {
|
||||
font-size: 100%;
|
||||
padding: 8px 35px 5px 35px;
|
||||
color: $headings-color;
|
||||
border-width: 1px 0 1px;
|
||||
margin-right: 0;
|
||||
margin-top: $padding-base;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
position: relative;
|
||||
font-weight: $headings-font-weight;
|
||||
flex: unset;
|
||||
background-color: transparent;
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
@media screen and (max-width:767px){
|
||||
margin-right: $theme-margin;
|
||||
}
|
||||
&.active,&:hover {
|
||||
background-color: transparent;
|
||||
color: $link-hover-color;
|
||||
border-color: $link-hover-color;
|
||||
}
|
||||
&.active{
|
||||
&::after{
|
||||
content: "";
|
||||
border-top: 8px solid;
|
||||
border-right: 9px solid transparent;
|
||||
border-left: 9px solid transparent;
|
||||
border-bottom: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Form vertical
|
||||
.opalestate-search-form--vertical{
|
||||
.select2-container, .input-group-number{
|
||||
margin-top: 0;
|
||||
}
|
||||
.opalestate-label{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
//Form vertical2
|
||||
.opalestate-search-form--vertical-2{
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
.opalestate-label{
|
||||
display: none;
|
||||
}
|
||||
.input-group-number{
|
||||
margin-top: 15px;
|
||||
}
|
||||
h6{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.input-search-city{
|
||||
.opalestate-popup{
|
||||
top: 20%;
|
||||
}
|
||||
}
|
||||
.opal-form-content{
|
||||
.form-item:not(:last-of-type){
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding-bottom: $padding-base;
|
||||
margin-bottom: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
.more-options-items {
|
||||
.more-options-item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.input-group-number{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 1px solid $border-color;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
height: $input-height;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: $white;
|
||||
i[class*="icon-property-"]{
|
||||
margin-right: $input-padding-x;
|
||||
}
|
||||
.form-control{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
border: none;
|
||||
flex: 1;
|
||||
background-color: transparent;
|
||||
&:focus{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.btn-actions{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
line-height: $input-height;
|
||||
span{
|
||||
padding-left: $input-padding-x;
|
||||
padding-right: $input-padding-x;
|
||||
border-left: 1px solid $border-color;
|
||||
&:hover{
|
||||
color: $secondary;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Form v6
|
||||
.opalestate-search-form--advanced-6{
|
||||
display: flex;
|
||||
.opalestate-search-form__item:not(:first-child){
|
||||
flex: 1;
|
||||
}
|
||||
.opalestate-search-form__item:first-child{
|
||||
flex-basis: 12%;
|
||||
.select2-selection--single{
|
||||
padding-left: 10px;
|
||||
border-right: 0;
|
||||
.select2-selection__rendered{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-search{
|
||||
width: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
//Search Agent
|
||||
.search-agent-title{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
//
|
||||
.select2-container{
|
||||
&.select2-container--default .select2-selection--single {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $input-height;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-size: $font-size-base;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
border: 1px solid $input-border-color;
|
||||
background-clip: padding-box;
|
||||
border-radius: 0;
|
||||
.select2-selection__arrow {
|
||||
height: $input-height;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
.select2-dropdown{
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
1
assets/scss/opalestate/_layout.scss
Executable file
1
assets/scss/opalestate/_layout.scss
Executable file
@@ -0,0 +1 @@
|
||||
/** list **/
|
||||
70
assets/scss/opalestate/_modules.scss
Executable file
70
assets/scss/opalestate/_modules.scss
Executable file
@@ -0,0 +1,70 @@
|
||||
@keyframes spinner-border {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
|
||||
//favorite button
|
||||
.property-toggle-favorite {
|
||||
@include transition(.5s);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
/// split search ///
|
||||
header#masthead {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right!important;
|
||||
}
|
||||
.ajax-map-search-split{
|
||||
.split-maps-container{
|
||||
@media screen and (min-width:1200px){
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.opalestate-search-form{
|
||||
margin: 0;
|
||||
padding: $padding-base 0;
|
||||
}
|
||||
}
|
||||
.split-maps-container {
|
||||
@media screen and (min-width:1200px){
|
||||
position:fixed !important;
|
||||
}
|
||||
left: 0;
|
||||
right: auto;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
|
||||
}
|
||||
.split-search-container{
|
||||
@media screen and (min-width:1200px){
|
||||
padding-right: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
.opalestate-loading {
|
||||
position:absolute;
|
||||
@include opacity(0.9);
|
||||
background-color:#fff;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
&::before{
|
||||
content:"";
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
vertical-align: text-bottom;
|
||||
border: .25em solid #000;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spinner-border .75s linear infinite;
|
||||
}
|
||||
|
||||
}
|
||||
100
assets/scss/opalestate/_page.scss
Executable file
100
assets/scss/opalestate/_page.scss
Executable file
@@ -0,0 +1,100 @@
|
||||
|
||||
@import "single";
|
||||
@import "archive";
|
||||
|
||||
// no header and footer for user management page
|
||||
.page-template-user-management {
|
||||
header, footer, #colophon {
|
||||
display:none;
|
||||
}
|
||||
article header {
|
||||
display:block !important;
|
||||
}
|
||||
}
|
||||
/// my-properties page
|
||||
.button-actions {
|
||||
position:absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color:$white;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
a{
|
||||
background-color:$primary;
|
||||
color: $white;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
background-color: $secondary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.my-properties{
|
||||
.property-status{
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.property-meta-list{
|
||||
padding: 0;
|
||||
}
|
||||
.my-properties-bottom{
|
||||
display: none;
|
||||
}
|
||||
.abs-col-item{
|
||||
padding-top: 10px;
|
||||
}
|
||||
.entry-title{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/// search agent page
|
||||
|
||||
.search-agents-wrap {
|
||||
.opalestate-search-agents-form {
|
||||
padding-bottom: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
//Grid style
|
||||
.agent-grid-style {
|
||||
margin-bottom: $grid-gutter-width;
|
||||
background-color: $white;
|
||||
.agent-body{
|
||||
border-style: solid;
|
||||
border-width: 0 1px 1px 1px;
|
||||
border-color: $border-color;
|
||||
padding: $grid-gutter-width $grid-gutter-width $grid-gutter-width/2;
|
||||
}
|
||||
.agent-job{
|
||||
line-height: 1;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
.trusted-label{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
background-color: $white;
|
||||
border-radius: 50%;
|
||||
bottom: 0;
|
||||
transform: translateY(50%);
|
||||
border: 1px solid $border-color;
|
||||
width: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
//List style
|
||||
.agent-list-style{
|
||||
padding: $grid-gutter-width;
|
||||
border: 1px solid $border-color;
|
||||
margin-bottom: $grid-gutter-width;
|
||||
.team-info{
|
||||
margin: $padding-base 0 0;
|
||||
}
|
||||
.agent-box-title{
|
||||
|
||||
}
|
||||
}
|
||||
696
assets/scss/opalestate/_properties-loop.scss
Executable file
696
assets/scss/opalestate/_properties-loop.scss
Executable file
@@ -0,0 +1,696 @@
|
||||
|
||||
//property options
|
||||
.property-options{
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
.opalestate-ajax-gallery{
|
||||
width: 35px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
color: $white;
|
||||
background-color: $secondary;
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.author-avatar{
|
||||
img{
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
//property loop
|
||||
.opalestate_property{
|
||||
margin-bottom: $grid-gutter-width;
|
||||
background-color: $white;
|
||||
border:solid 1px $border-color;
|
||||
position:relative;
|
||||
&.opalestate-single-property,&[class*="property-featured"]{
|
||||
border:none;
|
||||
margin-bottom: 0;
|
||||
background: transparent;
|
||||
}
|
||||
header{
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.property-box-image{
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
a{
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color:rgba(0, 0, 0, 0.3);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.property-price{
|
||||
.property-regular-price,.property-saleprice{
|
||||
font-size: 18px;
|
||||
letter-spacing: -0.5px;
|
||||
font-weight: $headings-font-weight;
|
||||
color:$primary;
|
||||
}
|
||||
.property-regular-price.has-saleprice{
|
||||
font-size: $font-size-base;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/** ----list---- **/
|
||||
.property-list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
header{
|
||||
flex-basis: 35.065%;
|
||||
}
|
||||
.property-box-image{
|
||||
height: 100%;
|
||||
img{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-title{
|
||||
margin: 7px 0 0px;
|
||||
}
|
||||
.property-address{
|
||||
margin: 6px 0 23px;
|
||||
}
|
||||
.abs-col-item{
|
||||
flex: 1;
|
||||
padding-left:$grid-gutter-width;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.property-meta-list{
|
||||
align-self: flex-end;
|
||||
flex-basis: 100%;
|
||||
padding: $padding-base 0 0;
|
||||
margin-top: $padding-base;
|
||||
border-top: 1px solid $border-color;
|
||||
li{
|
||||
margin-bottom: $padding-base;
|
||||
&:not(:last-child){
|
||||
margin-right: $grid-gutter-width;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.entry-summary{
|
||||
flex-basis: 25%;
|
||||
padding: 0 $grid-gutter-width;
|
||||
}
|
||||
.property-meta-bottom{
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
.property-toggle-favorite{
|
||||
display: block;
|
||||
width: 22px;
|
||||
line-height: 22px;
|
||||
border-radius: 50%;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
background-color:rgba(0,0,0,0.3);
|
||||
&:hover{
|
||||
background-color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.author-avatar{
|
||||
width: 22px;
|
||||
}
|
||||
.author-link{
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
.author-name{
|
||||
display: none;
|
||||
}
|
||||
.meta-item:not(:last-of-type){
|
||||
margin-right: 5px;
|
||||
}
|
||||
.property-group-label{
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
@media screen and (max-width: 992px) {
|
||||
padding: $padding-base;
|
||||
header{
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.abs-col-item{
|
||||
padding: $padding-base 0 0;
|
||||
}
|
||||
.entry-summary{
|
||||
flex-basis: 33.3333%;
|
||||
padding-top: $padding-base;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.entry-summary{
|
||||
flex-basis: 100%;
|
||||
padding: $padding-base 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// list style 1
|
||||
.property-list-style-v1 {
|
||||
header {
|
||||
padding-bottom:0;
|
||||
}
|
||||
.property-list{
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
.container-cols-3{
|
||||
.abs-col-item{
|
||||
@media screen and (min-width: 768px) {
|
||||
border-right: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
//list style 2
|
||||
.property-list-style-v2{
|
||||
.property-list{
|
||||
padding: 0;
|
||||
}
|
||||
.abs-col-item{
|
||||
padding: 0 $grid-gutter-width;
|
||||
border: none;
|
||||
}
|
||||
.entry-content{
|
||||
width: 100%;
|
||||
}
|
||||
.entry-title{
|
||||
margin: 16px 0 0px;
|
||||
}
|
||||
.property-address{
|
||||
margin: 6px 0 0px;
|
||||
}
|
||||
.property-meta-list{
|
||||
padding: 0;
|
||||
margin-top: 9px;
|
||||
li{
|
||||
margin-top: 19px;
|
||||
margin-bottom: 8px;
|
||||
&:not(:last-child){
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
.label-property{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
////
|
||||
ul.property-meta-list{
|
||||
padding: $grid-gutter-width 20px 0;
|
||||
margin: 0;
|
||||
li{
|
||||
line-height: 1;
|
||||
margin-bottom: $grid-gutter-width;
|
||||
}
|
||||
i{
|
||||
margin-right: 5px;
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
font-style: unset;
|
||||
}
|
||||
}
|
||||
i[class*="icon-property-"]{
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
.icon-property-areasize:before{
|
||||
content: "\f047";
|
||||
|
||||
}
|
||||
.icon-property-bedrooms:before{
|
||||
content: "\f236";
|
||||
|
||||
}
|
||||
.icon-property-bathrooms:before{
|
||||
content: "\f2cd";
|
||||
|
||||
}
|
||||
.icon-property-parking:before{
|
||||
content: "\f1b9";
|
||||
|
||||
}
|
||||
.icon-property-builtyear:before{
|
||||
content: "\f073";
|
||||
|
||||
}
|
||||
.icon-property-plotsize:before{
|
||||
content: "\f278";
|
||||
|
||||
}
|
||||
.icon-property-orientation:before{
|
||||
content: "\f14e";
|
||||
|
||||
}
|
||||
.icon-property-livingrooms:before{
|
||||
content: "\f26c";
|
||||
|
||||
}
|
||||
.icon-property-kitchens:before{
|
||||
content: "\f0f5";
|
||||
|
||||
}
|
||||
.icon-property-amountrooms:before{
|
||||
content: "\f1ad";
|
||||
|
||||
}
|
||||
|
||||
/** Grid **/
|
||||
.property-grid{
|
||||
.entry-content{
|
||||
padding: 0 20px $padding-base;
|
||||
}
|
||||
.entry-title{
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
.property-address{
|
||||
margin: 0;
|
||||
span.property-view-map {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
.property-meta-list.list-inline{
|
||||
li{
|
||||
flex-basis: 50%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.property-price{
|
||||
.property-regular-price,.property-saleprice{
|
||||
@media screen and (min-width:768px){
|
||||
font-size: 24px;
|
||||
}
|
||||
letter-spacing: -0.5px;
|
||||
color: $primary;
|
||||
}
|
||||
.property-regular-price.has-saleprice{
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
.entry-content-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid $border-color;
|
||||
> *:not(:first-child){
|
||||
position: relative;
|
||||
padding: 11px 0;
|
||||
border-left: 1px solid $border-color;
|
||||
}
|
||||
> *:first-child{
|
||||
margin-left: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.property-toggle-favorite{
|
||||
width: 52px;
|
||||
text-align: center;
|
||||
}
|
||||
@media screen and (max-width:767px){
|
||||
.entry-content{
|
||||
padding: $grid-gutter-width $padding-base $padding-base;
|
||||
}
|
||||
.property-meta-list{
|
||||
padding: 23px $padding-base 17px $padding-base;
|
||||
}
|
||||
.property-meta-bottom{
|
||||
margin-left: $padding-base;
|
||||
}
|
||||
.property-group-label{
|
||||
left: $padding-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
//Header Inner Author Link
|
||||
.property-grid, .property-featured{
|
||||
.author-link{
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover{
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
.author-avatar{
|
||||
width: 35px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.author-name{
|
||||
font-size: 13px;
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
}
|
||||
/** Grid Layout 1**/
|
||||
.property-grid-v1{
|
||||
.author-link{
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 20px;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
/** Grid Layout 2**/
|
||||
.property-grid-v2{
|
||||
.property-group-label{
|
||||
top: 10px;
|
||||
}
|
||||
.author-name{
|
||||
display: none;
|
||||
}
|
||||
.property-meta-list.list-inline{
|
||||
li{
|
||||
flex-basis: unset;
|
||||
&:not(:last-child){
|
||||
margin-right: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.entry-content-bottom{
|
||||
.author-link{
|
||||
padding: 0;
|
||||
width: 52px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.author-avatar{
|
||||
margin: 0;
|
||||
width: 30px;
|
||||
padding: 11px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/** Grid Layout 3**/
|
||||
.property-grid-v3{
|
||||
.property-meta-bottom{
|
||||
position: absolute;
|
||||
bottom: $padding-base;
|
||||
padding-left: $padding-base;
|
||||
width: 100%;
|
||||
}
|
||||
.entry-title{
|
||||
margin: 17px 0 6px;
|
||||
}
|
||||
header{
|
||||
padding: 5px 5px 0;
|
||||
}
|
||||
.entry-summary{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.property-price{
|
||||
color: $white;
|
||||
line-height: 1;
|
||||
.property-regular-price,.property-saleprice{
|
||||
color: $white;
|
||||
font-size: 18px;
|
||||
}
|
||||
.property-price-label{
|
||||
font-size: 13px;
|
||||
}
|
||||
.property-regular-price.has-saleprice{
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
.entry-content{
|
||||
padding: 0 20px;
|
||||
}
|
||||
.property-meta-list.list-inline{
|
||||
padding: 0;
|
||||
.info-meta{
|
||||
.label-property {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
li{
|
||||
flex-basis: unset;
|
||||
&:not(:last-child){
|
||||
margin-right: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
.entry-content-bottom{
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
background-color: #f4f4f4;
|
||||
& > *:not(:first-child){
|
||||
border: none;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
background-color: rgba(126, 126, 126, 0.2);
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
&:hover{
|
||||
background-color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
& > *:first-child{
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.author-avatar{
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
//Mark Hover Item
|
||||
.property-mark-hover-item{
|
||||
.property-grid__header {
|
||||
min-height: 245px;
|
||||
}
|
||||
.list-inline{
|
||||
padding: 0;
|
||||
}
|
||||
header{
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.95)));
|
||||
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.95));
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.property-price-wrapper,.property-areasize{
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.entry-content{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
padding: 0 15px 15px;
|
||||
color: $white;
|
||||
}
|
||||
.entry-title{
|
||||
color:inherit;
|
||||
a{
|
||||
color:inherit;
|
||||
}
|
||||
}
|
||||
.property-price{
|
||||
.property-regular-price,.property-saleprice{
|
||||
font-size: 18px;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Featured Property **/
|
||||
.property-featured{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.featured-info{
|
||||
background-color: $headings-color;
|
||||
color: $white;
|
||||
flex-basis: 50%;
|
||||
padding: 52px 75px 49px 100px;
|
||||
@media screen and (max-width:992px) {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
@media screen and (max-width:1024px) {
|
||||
padding: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
.author-link{
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 15px;
|
||||
color: $white;
|
||||
}
|
||||
.property-view-map{
|
||||
color: $white;
|
||||
i {
|
||||
color: $white;
|
||||
}
|
||||
a{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
header{
|
||||
flex-basis: 100%;
|
||||
@media screen and (min-width:992px) {
|
||||
flex-basis: 50%;
|
||||
}
|
||||
}
|
||||
ul.property-meta-list{
|
||||
padding: 0;
|
||||
> li {
|
||||
margin-right: 0;
|
||||
width: 50%;
|
||||
}
|
||||
i{
|
||||
color: $secondary;
|
||||
width: auto;
|
||||
}
|
||||
.icon-box {
|
||||
font-size: 30px;
|
||||
width: auto;
|
||||
}
|
||||
.info-meta{
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entry-title{
|
||||
margin-top: 14px;
|
||||
margin-bottom: 8px;
|
||||
a{
|
||||
color: $white;
|
||||
&:hover{
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.property-address{
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
.property-description{
|
||||
margin-bottom: $grid-gutter-width;
|
||||
}
|
||||
.property-price{
|
||||
.property-regular-price,.property-saleprice{
|
||||
font-size: 24px;
|
||||
color: $white;
|
||||
}
|
||||
.property-regular-price.has-saleprice{
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.property-toggle-favorite{
|
||||
display: none;
|
||||
width: 22px;
|
||||
line-height: 22px;
|
||||
border-radius: 3px;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
background-color: $headings-color;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
|
||||
&:hover{
|
||||
background-color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
@media(min-width: 1200px) {
|
||||
.featured-info {
|
||||
margin-top: 50px;
|
||||
}
|
||||
header {
|
||||
flex-basis: calc(50% + 50px);
|
||||
margin-bottom: 50px;
|
||||
margin-left: -50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
header{
|
||||
&:hover{
|
||||
.property-bg-thumbnail{
|
||||
a{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.property-bg-thumbnail{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
a{
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
min-height: 340px;
|
||||
transform: scale(1);
|
||||
transition: opacity 0.5s ease, transform 1s cubic-bezier(0, 0, 0.44, 1.18), -webkit-transform 1s cubic-bezier(0, 0, 0.44, 1.18);
|
||||
background-position: center center;
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opalestate-pagination {
|
||||
text-align: center;
|
||||
margin: $theme-margin 0;
|
||||
ul {
|
||||
margin: 0 auto;
|
||||
li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
.page-numbers {
|
||||
padding:5px 15px;
|
||||
display: block;
|
||||
&:hover,
|
||||
&.current {
|
||||
background: $secondary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
164
assets/scss/opalestate/_shortcodes.scss
Executable file
164
assets/scss/opalestate/_shortcodes.scss
Executable file
@@ -0,0 +1,164 @@
|
||||
// split map search ////
|
||||
.maps-container-fixed {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@media (min-width:1024px){
|
||||
position:fixed;
|
||||
z-index:0;
|
||||
width:50%;
|
||||
top:0;
|
||||
min-height:600px;
|
||||
}
|
||||
}
|
||||
|
||||
/** Shortcodes **/
|
||||
.opalestate-search-properties{
|
||||
.search-properies-form{
|
||||
margin-top: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
|
||||
// my account form ///
|
||||
|
||||
.opalestate-my-account-form {
|
||||
position: relative;
|
||||
background: $white;
|
||||
padding: $grid-gutter-width;
|
||||
width:auto;
|
||||
max-width: 550px;
|
||||
margin: 20px auto;
|
||||
.submit{
|
||||
a{
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.opalestate-button{
|
||||
padding: 17px 35px 14px 35px;
|
||||
width: 100%;
|
||||
}
|
||||
h3 {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
.opalesate-properties-results {
|
||||
min-height:800px;
|
||||
}
|
||||
|
||||
.membership-packages{
|
||||
padding-top: 40px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.pricing.pricing-v3{
|
||||
border: 1px solid $border-color;
|
||||
border-radius:5px;
|
||||
padding: 0;
|
||||
margin-bottom: $grid-gutter-width;
|
||||
overflow: hidden;
|
||||
.pricing-header{
|
||||
text-align: center;
|
||||
background: $primary;
|
||||
color: $white;
|
||||
position: relative;
|
||||
padding: $grid-gutter-width/2 0px 0px;
|
||||
}
|
||||
.plan-price{
|
||||
color: $white;
|
||||
line-height: 2.3rem;
|
||||
margin-top: $grid-gutter-width/2;
|
||||
p{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.pricing-body {
|
||||
padding: $grid-gutter-width/2 $grid-gutter-width;
|
||||
}
|
||||
.plan-figure{
|
||||
font-size: 36px;
|
||||
color: $white;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
.plain-info{
|
||||
& > div{
|
||||
padding: 10px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.item-info{
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding-bottom: $padding-base;
|
||||
margin-bottom: $padding-base;
|
||||
color: $headings-color;
|
||||
font-weight: $headings-font-weight;
|
||||
text-transform: uppercase;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
i{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.membership-form-wrapper{
|
||||
color: $white;
|
||||
}
|
||||
.membership-add-to-purchase{
|
||||
width: 100%;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
background-color: #999;
|
||||
line-height: 42px;
|
||||
text-transform: capitalize;
|
||||
&:hover{
|
||||
background-color: gray;
|
||||
}
|
||||
}
|
||||
.pricing-footer{
|
||||
padding: 0 $grid-gutter-width $grid-gutter-width;
|
||||
text-align: center;
|
||||
}
|
||||
.plan-title{
|
||||
color: $white;
|
||||
font-size: 18px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
font-weight: $headings-font-weight;
|
||||
letter-spacing: -0.5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
}
|
||||
.package-hightlighted{
|
||||
.plan-subtitle{
|
||||
background-color: $secondary;
|
||||
color:$black;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
display: block !important;
|
||||
margin: 0 auto;
|
||||
max-width: 150px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
.pricing.pricing-v3{
|
||||
@media screen and (min-width:992px) {
|
||||
//margin-top: -40px;
|
||||
}
|
||||
.membership-add-to-purchase{
|
||||
background-color: $secondary;
|
||||
&:hover{
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
.pricing-footer{
|
||||
//padding-bottom: $grid-gutter-width *2;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
1065
assets/scss/opalestate/_single.scss
Executable file
1065
assets/scss/opalestate/_single.scss
Executable file
File diff suppressed because it is too large
Load Diff
14
assets/scss/opalestate/_styles.scss
Executable file
14
assets/scss/opalestate/_styles.scss
Executable file
@@ -0,0 +1,14 @@
|
||||
.opalestate-note {
|
||||
font-size:90%;
|
||||
color:#888;
|
||||
}
|
||||
.list-inline {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
li{
|
||||
&:not(:last-child){
|
||||
margin-right: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
assets/scss/opalestate/_vars.scss
Executable file
23
assets/scss/opalestate/_vars.scss
Executable file
@@ -0,0 +1,23 @@
|
||||
$headings-font-weight: 500;
|
||||
$input-height: 50px;
|
||||
$input-padding-y: .65rem;
|
||||
$input-padding-x: 1rem;
|
||||
$input-line-height: $input-height;
|
||||
|
||||
$primary: #2f73e9 !default;
|
||||
$secondary: #02ce76 !default;
|
||||
$white : #FFF !default;
|
||||
|
||||
$headings-color: #0a1938;
|
||||
$border-color: #ebebeb;
|
||||
$box-shadow-base: 0px 2px 8px 4px rgba(0, 0, 0, 0.12);
|
||||
|
||||
$padding-base: ($grid-gutter-width/2);
|
||||
$grid-gutter-width: 30px;
|
||||
|
||||
|
||||
$price-color:red;
|
||||
$link-hover-color: $primary;
|
||||
$input-border-color: #ebebeb;
|
||||
$body-color: #7e7e7e;
|
||||
$body-color-light: #bbb;
|
||||
Reference in New Issue
Block a user