504 lines
8.2 KiB
SCSS
504 lines
8.2 KiB
SCSS
@charset "utf-8";
|
|
|
|
@import "variables";
|
|
@import "grid";
|
|
|
|
// Since the backend system is using Bootstrap 2 heavily and it's not supporting RWD
|
|
// And if I import Bootstrap 3 directly into pages, it could cause CSS conflicts...
|
|
// that's why I only imported Bootstrap grid system and added flat style into this module
|
|
// ------ helpers
|
|
// classes
|
|
.list-unstyled {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.no-wrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.absolute-center {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.absolute-bottom {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 100%;
|
|
-webkit-transform: translate(-50%, 0);
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
// button, add -flat to extend the styling from Bootstrap
|
|
.btn-flat {
|
|
color: $white;
|
|
background: $gray;
|
|
border-radius: $border-radius-narrow;
|
|
padding: 4px 14px;
|
|
font-size: 13px;
|
|
border: none;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
font-family: $main-font;
|
|
|
|
&:hover {
|
|
color: $white;
|
|
text-decoration: none;
|
|
background-color: lighten($gray, 4%);
|
|
}
|
|
}
|
|
|
|
.btn-flat-primary {
|
|
color: $white;
|
|
background-color: $main-color;
|
|
|
|
&:hover {
|
|
background-color: lighten($main-color, 4%);
|
|
}
|
|
}
|
|
|
|
.btn-flat-info {
|
|
background-color: $purple;
|
|
|
|
&:hover {
|
|
background-color: lighten($purple, 8%);
|
|
}
|
|
}
|
|
|
|
.btn-flat-warning {
|
|
background-color: #f5a742;
|
|
|
|
&:hover {
|
|
background-color: lighten(#f5a742, 8%);
|
|
}
|
|
}
|
|
|
|
.btn-flat-danger {
|
|
background-color: $red;
|
|
|
|
&:hover {
|
|
background-color: lighten($red, 4%);
|
|
}
|
|
}
|
|
|
|
.btn-flat-small {
|
|
padding: 2px 8px;
|
|
}
|
|
|
|
.btn-flat-has-icon {
|
|
i {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.btn-flat-has-margin {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.btn-flat-block {
|
|
display: block;
|
|
width: 100%;
|
|
margin-bottom: 8px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// ------ module
|
|
// card
|
|
.card-container {
|
|
margin: 0 20px;
|
|
|
|
@media (min-width: $screen-sm) {
|
|
margin: 0;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
p {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
position: relative;
|
|
padding: 0;
|
|
}
|
|
|
|
.card-inner {
|
|
font-family: $main-font;
|
|
margin: 5px;
|
|
background-color: $white;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
border-radius: $border-radius-normal;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-actions {
|
|
padding: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.card-link {
|
|
display: inline-block;
|
|
width: 100%;
|
|
position: relative;
|
|
color: $white;
|
|
overflow: hidden;
|
|
height: 275px;
|
|
background-size: cover;
|
|
background-position: top center;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.card-name {
|
|
padding: 8px;
|
|
margin-left: -8px;
|
|
color: lighten($black, 20%);
|
|
width: 108%;
|
|
text-align: center;
|
|
border-bottom: 1px solid lighten($black, 95%);
|
|
position: absolute;
|
|
bottom: 0;
|
|
background-color: $white;
|
|
text-transform: capitalize;
|
|
|
|
i {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
&.has-data-text:after {
|
|
position: absolute;
|
|
top: calc(100% + 1px);
|
|
bottom: calc(-100% - 1px);
|
|
left: 0;
|
|
right: 0;
|
|
content: attr(data-text);
|
|
transition: .2s all ease;
|
|
background-color: $main-color;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
&:hover:after {
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.card-name-not-link {
|
|
&:hover {
|
|
color: lighten($black, 20%);
|
|
background-color: $white;
|
|
}
|
|
|
|
&:after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// float box
|
|
.float-box {
|
|
position: absolute;
|
|
padding: 15px 20px;
|
|
border: 1px solid lighten($gray, 30%);
|
|
background-color: $white;
|
|
border-radius: $border-radius-narrow;
|
|
-webkit-box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
|
|
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
|
|
z-index: 100;
|
|
white-space: nowrap;
|
|
min-width: 120px;
|
|
|
|
// right arrow
|
|
&:before {
|
|
border: 10px solid transparent;
|
|
border-left-color: $white;
|
|
content: '';
|
|
position: absolute;
|
|
left: calc(100% - 1px);
|
|
top: 0;
|
|
}
|
|
|
|
// add more space for mouse hover
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: -20px;
|
|
height: 100%;
|
|
width: 20px;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.float-box-right {
|
|
left: calc(100% + 5px);
|
|
|
|
// left arrow
|
|
&:before {
|
|
right: calc(100% - 1px);
|
|
border-left-color: transparent;
|
|
border-right-color: $white;
|
|
left: auto;
|
|
top: 0;
|
|
}
|
|
|
|
// add more space for mouse hover, change direction
|
|
&:after {
|
|
left: -20px;
|
|
}
|
|
}
|
|
|
|
.float-box-left {
|
|
right: calc(100% + 5px);
|
|
}
|
|
|
|
.float-box-top {
|
|
top: -2px;
|
|
}
|
|
|
|
.float-box-bottom {
|
|
bottom: 0;
|
|
}
|
|
|
|
// table, extend with -flat class
|
|
.table-flat {
|
|
.btn-flat {
|
|
margin: 4px 0;
|
|
}
|
|
}
|
|
|
|
// form elements, extend with -flat class
|
|
.form-horizontal-flat {
|
|
margin-bottom: 8px;
|
|
|
|
.control-label-flat {
|
|
color: lighten($black, 60%);
|
|
background-color: transparent;
|
|
font-family: $main-font;
|
|
float: none;
|
|
text-align: left;
|
|
width: auto;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
|
|
i {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.control-group-flat {
|
|
margin-bottom: 8px;
|
|
text-align: left;
|
|
}
|
|
|
|
.control-group-flat-last {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.toggle-select-wrap {
|
|
font-family: $main-font;
|
|
color: lighten($black, 60%);
|
|
}
|
|
}
|
|
|
|
.input-flat[type="text"] {
|
|
height: 30px;
|
|
padding: 0 5px;
|
|
border-radius: $border-radius-narrow;
|
|
color: lighten($black, 60%);
|
|
box-shadow: none;
|
|
border: 1px solid lighten($gray, 30%);
|
|
font-size: 12px;
|
|
width: 150px;
|
|
|
|
&:focus {
|
|
border: 1px solid lighten($gray, 30%);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.select-flat {
|
|
height: 30px;
|
|
padding: 0 5px;
|
|
color: lighten($black, 60%);
|
|
width: 150px;
|
|
font-size: 12px;
|
|
border: 1px solid lighten($gray, 30%);
|
|
border-radius: $border-radius-narrow;
|
|
}
|
|
|
|
.checkbox-flat[type="checkbox"] {
|
|
margin-top: 0;
|
|
margin-right: 5px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
// space-box
|
|
.overlay {
|
|
background-color: rgba($main-color, 0.3);
|
|
border: 2px solid $main-color;
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 2px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.selection-box-label.absolute-center{
|
|
display: none;
|
|
}
|
|
.anchor{
|
|
position: absolute;
|
|
left: 20%;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 1em 1em 0 1em;
|
|
border-color: #2196f3 transparent transparent transparent;
|
|
}
|
|
.s-space.show-space .selection-box-label.absolute-center.active{
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 110%;
|
|
bottom: calc(100% + 0.8em);
|
|
left: 0%;
|
|
background: #2196F3;
|
|
color: white;
|
|
width: 100%;
|
|
padding: 0.2em;
|
|
}
|
|
}
|
|
|
|
// Page specific styles
|
|
.building-showcase {
|
|
img {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: auto;
|
|
height: 250px;
|
|
}
|
|
}
|
|
|
|
.selection-box {
|
|
&:hover {
|
|
.selection-box-btn-holder {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.selection-box-btn-holder {
|
|
display: none;
|
|
|
|
// &:before {
|
|
// position: absolute;
|
|
// left: -20px;
|
|
// top: 0;
|
|
// content: "";
|
|
// width: 20px;
|
|
// height: 100px;
|
|
// background-color: transparent;
|
|
// }
|
|
}
|
|
|
|
.floor-unit-title {
|
|
font-size: 14px;
|
|
|
|
h3 {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
#layout-image {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.space-canvas {
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
// styles from Harry
|
|
ul#layout-canvas {
|
|
background-color: #fff;
|
|
border: 2px solid #eee;
|
|
list-style: outside none none;
|
|
|
|
li.apartment-draggable {
|
|
max-width: 200px;
|
|
position: relative;
|
|
float: left;
|
|
cursor: move;
|
|
}
|
|
}
|
|
|
|
#full-layout-canvas {
|
|
background-color: #fff;
|
|
border: 2px solid #eee;
|
|
text-align: center;
|
|
position: relative;
|
|
padding: 0 0 20px 0;
|
|
overflow: hidden;
|
|
|
|
.image-cover {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
height: 100%;
|
|
margin: auto;
|
|
transform: translate(-50%, 0);
|
|
margin-bottom: 35px;
|
|
}
|
|
}
|
|
|
|
.make-box-permanent {
|
|
position: absolute;
|
|
}
|
|
|
|
.floor-unit-title {
|
|
text-align: center;
|
|
}
|
|
.w-ad-banner__pager-wrap.w-ad-banner__page--active .w-ad-banner__pager.external {
|
|
display: none;
|
|
}
|
|
.w-ad-banner__pager-wrap.w-ad-banner__page--active.active .w-ad-banner__pager.external {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
.w-ad-banner__pager.external img {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
.bundle-button{
|
|
padding-bottom: 1em;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.fa.fa-times{
|
|
background: #e4225d;
|
|
color: white;
|
|
padding: 0.2em;
|
|
float: right;
|
|
cursor: pointer;
|
|
} |