Opal-Estate-Pro/assets/scss/opalestate/_elements.scss
2019-09-28 09:44:42 +07:00

976 lines
15 KiB
SCSS
Executable File

.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:$font-family-icon;
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:$font-family-icon;
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: $font-family-icon;
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:0;
padding:5px;
background-color:$primary;
}
}
}
.popup-body{
display: none;
position:absolute;
z-index: 999;
min-width: 300px;
top: 40px;
margin:0;
right: 0;
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%);
right:30px;
top: -14px;
}
}
}
&.active .popup-body{
display: block;
padding-top:30px;
min-width: 300px;
}
&.hover-align-right:hover .popup-body {
display:block;
padding-top:30px;
min-width: 300px;
}
.popup-close{
position:absolute;
top: 10px;
right:15px;
color:$primary;
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;
}
.opalestate-social-login-facebook-btn,
.opalestate-social-login-google-btn {
i {
color: $white !important;
}
}