mirror of
https://github.com/openclassify/openclassify.git
synced 2026-01-11 18:01:10 -06:00
751 lines
14 KiB
SCSS
751 lines
14 KiB
SCSS
/* Main styles */
|
|
html {
|
|
@media only screen and (min-width: 576px) {
|
|
font-size: 7.5789px;
|
|
}
|
|
@media only screen and (min-width: 768px) {
|
|
font-size: 10.1052px;
|
|
}
|
|
@media only screen and (min-width: 992px) {
|
|
font-size: 13.4736px;
|
|
}
|
|
@media only screen and (min-width: 1200px) {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
#main {
|
|
margin: 0;
|
|
|
|
.container {
|
|
@media only screen and (max-width: 575.98px) {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Filter */
|
|
#listFilterForm, #filterModal {
|
|
@media only screen and (min-width: 576px) {
|
|
width: 25%;
|
|
}
|
|
|
|
.filter-box {
|
|
background-color: #FCFCFC;
|
|
|
|
& > div {
|
|
&:first-child {
|
|
color: #373535;
|
|
font-weight: 500;
|
|
font-size: calc(17rem / 16);
|
|
|
|
svg {
|
|
width: calc(11rem / 16);
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
max-height: 11rem;
|
|
|
|
label {
|
|
font-size: calc(14rem / 16);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Category */
|
|
#category {
|
|
background-color: #FCFCFC;
|
|
|
|
#categoryNav {
|
|
a {
|
|
border-bottom: calc(2rem / 16) solid #D7DEEC;
|
|
|
|
svg {
|
|
height: 1rem;
|
|
width: 1rem;
|
|
}
|
|
|
|
p {
|
|
color: #9FA4A4;
|
|
font-weight: 500;
|
|
font-size: calc(17rem / 16);
|
|
}
|
|
|
|
&.active {
|
|
border-bottom-color: #373535;
|
|
|
|
svg path {
|
|
fill: #373535;
|
|
}
|
|
|
|
p {
|
|
color: #373535;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#categoryList {
|
|
max-height: 24rem;
|
|
|
|
& > li {
|
|
margin-bottom: .4rem;
|
|
|
|
& > div {
|
|
div {
|
|
line-height: 1;
|
|
|
|
&.sub-cat {
|
|
margin-left: 1.65rem;
|
|
}
|
|
}
|
|
|
|
svg, img {
|
|
width: 1.15rem;
|
|
height: 1.15rem;
|
|
overflow: hidden;
|
|
object-fit: contain;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
a {
|
|
color: #183F8A;
|
|
font-size: calc(13rem / 16);
|
|
line-height: 1;
|
|
}
|
|
|
|
.sub-cat {
|
|
a {
|
|
font-size: calc(12rem / 16);
|
|
}
|
|
|
|
li {
|
|
margin-bottom: .25rem;
|
|
|
|
ul {
|
|
padding-left: .5rem;
|
|
margin-top: .25rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* End Category */
|
|
|
|
/* Location */
|
|
#location {
|
|
button:not(.filter-modal-close) {
|
|
height: 2rem;
|
|
background: #fff;
|
|
color: #707070;
|
|
font-size: calc(12rem / 16);
|
|
padding: 0 1.25rem;
|
|
|
|
svg {
|
|
width: .48rem;
|
|
height: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
/* End Location */
|
|
|
|
/* Price */
|
|
#price, .range-filter {
|
|
li {
|
|
& + & {
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
label {
|
|
display: inline-block;
|
|
padding: 0.15em;
|
|
color: #373535;
|
|
border: calc(1rem / 16) solid #E5E5E5;
|
|
font-size: calc(13rem / 16);
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type=radio] {
|
|
border: 0;
|
|
clip: rect(0, 0, 0, 0);
|
|
height: calc(1rem / 16);
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute !important;
|
|
white-space: nowrap;
|
|
width: calc(1rem / 16);
|
|
|
|
&:checked + label {
|
|
background-color: #E5E5E5;
|
|
border: calc(1rem / 16) solid #E5E5E5;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.range-input-wrapper {
|
|
::placeholder {
|
|
color: #DFDFDF;
|
|
opacity: 1;
|
|
}
|
|
|
|
:-ms-input-placeholder {
|
|
color: #DFDFDF;
|
|
}
|
|
|
|
::-ms-input-placeholder {
|
|
color: #DFDFDF;
|
|
}
|
|
|
|
input {
|
|
width: 5rem;
|
|
font-size: calc(14rem / 16);
|
|
}
|
|
}
|
|
}
|
|
/* End Price */
|
|
|
|
/* Map */
|
|
#mapFilter {
|
|
label {
|
|
font-size: calc(14rem / 16);
|
|
}
|
|
}
|
|
/* End Map */
|
|
|
|
/* Keyword */
|
|
#keywordFilter, .text-filter {
|
|
input {
|
|
font-size: calc(14rem / 16);
|
|
}
|
|
}
|
|
/* End Keyword */
|
|
|
|
/* Filter submit */
|
|
#filterSubmit, #filterReset {
|
|
button {
|
|
background-color: #52C946;
|
|
font-size: calc(12rem / 16);
|
|
}
|
|
}
|
|
/* End Filter submit */
|
|
}
|
|
/* End Filter */
|
|
/* End Main styles */
|
|
|
|
#listingPage {
|
|
/* Breadcrumb */
|
|
#breadcrumb {
|
|
border-radius: 0 0 .25rem .25rem;
|
|
padding: .2rem 1.5rem;
|
|
background-color: #FCFCFC;
|
|
|
|
div {
|
|
&:first-child {
|
|
span {
|
|
color: #8598AA;
|
|
font-size: calc(13rem / 16);
|
|
|
|
&:not(:first-child):before {
|
|
content: '>';
|
|
margin-left: 0.4rem;
|
|
}
|
|
|
|
a {
|
|
color: #8598AA;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
span {
|
|
color: #87BBF1;
|
|
font-size: calc(11rem / 16);
|
|
|
|
&:not(:first-child):before {
|
|
content: '|';
|
|
margin: 0 .25rem;
|
|
}
|
|
|
|
a {
|
|
color: #87BBF1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* End Breadcrumb */
|
|
|
|
#mainContainer {
|
|
margin-top: .75rem;
|
|
|
|
/* Listing container */
|
|
#listingContainer {
|
|
min-width: 0;
|
|
|
|
/* Page title */
|
|
#pageTitle {
|
|
p, a {
|
|
color: #8598AA;
|
|
}
|
|
|
|
p {
|
|
font-size: calc(14rem / 16);
|
|
}
|
|
|
|
a {
|
|
font-size: calc(14rem / 16);
|
|
|
|
svg {
|
|
height: .8rem;
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
/* End Page title */
|
|
|
|
/* Query bar */
|
|
#queryBar {
|
|
& > div {
|
|
margin: calc(3rem / 16) calc(16rem / 16) calc(4rem / 16) 0;
|
|
|
|
& > span {
|
|
font-weight: 500;
|
|
color: #292d2e;
|
|
font-size: calc(13rem / 16);
|
|
}
|
|
}
|
|
|
|
a {
|
|
background-color: #eee;
|
|
font-size: calc(12rem / 16);
|
|
padding: calc(4rem / 16) calc(7rem / 16);
|
|
border-radius: calc(2rem / 16);
|
|
text-decoration: none;
|
|
max-width: calc(400rem / 16);
|
|
|
|
&:hover {
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
span {
|
|
color: #666;
|
|
}
|
|
|
|
button {
|
|
height: calc(12rem / 16);
|
|
width: calc(12rem / 16);
|
|
background-color: #EC9C4A;
|
|
border-radius: calc(2rem / 16);
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
svg {
|
|
flex-shrink: 0;
|
|
height: calc(6rem / 16);
|
|
width: calc(6rem / 16);
|
|
}
|
|
}
|
|
|
|
div:last-child {
|
|
a {
|
|
background-color: unset;
|
|
font-size: calc(10rem / 16);
|
|
padding: 0;
|
|
text-decoration: none;
|
|
color: #039;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
|
|
span {
|
|
color: #444;
|
|
}
|
|
|
|
button {
|
|
background-color: #CD7D22;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* End Query bar */
|
|
|
|
/* View types */
|
|
#viewTypes {
|
|
margin-bottom: .75rem;
|
|
|
|
ul {
|
|
background-color: #F0F2F4;
|
|
|
|
li {
|
|
font-size: calc(13rem / 16);
|
|
font-weight: 500;
|
|
|
|
&:not(:first-child) {
|
|
border-left: calc(1rem / 16) solid rgba(72, 154, 241, .33);
|
|
}
|
|
|
|
a {
|
|
color: #489AF1;
|
|
}
|
|
|
|
&.active {
|
|
a {
|
|
color: #707070;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& > div {
|
|
background-color: #F0F2F4;
|
|
padding: calc(5.5rem / 16) .5rem;
|
|
|
|
p {
|
|
font-size: calc(12rem / 16);
|
|
font-weight: 500;
|
|
color: #707070;
|
|
margin-right: .75rem;
|
|
}
|
|
|
|
svg {
|
|
width: auto;
|
|
height: .75rem;
|
|
}
|
|
|
|
a {
|
|
&.active {
|
|
svg path {
|
|
fill: #489AF1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown {
|
|
button {
|
|
background: none;
|
|
|
|
&:after {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
.dropdown-item {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* End View types */
|
|
|
|
/* Listing */
|
|
#listingWrapper {
|
|
#listing {
|
|
table {
|
|
border-collapse: separate;
|
|
border-spacing: 0 .25rem;
|
|
|
|
thead {
|
|
tr {
|
|
th {
|
|
background-color: #3F475F;
|
|
font-weight: 400;
|
|
font-size: calc(12rem / 16);
|
|
padding: .2rem .5rem;
|
|
|
|
&:first-child {
|
|
border-top-left-radius: .25rem;
|
|
}
|
|
|
|
&:last-child {
|
|
border-top-right-radius: .25rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
tr {
|
|
background-color: #F6F6F6;
|
|
|
|
&:hover {
|
|
.action-data > a {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
td {
|
|
padding: .4rem .5rem;
|
|
|
|
& > a {
|
|
img {
|
|
width: 6.5rem;
|
|
height: 5rem;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
width: 17%;
|
|
border-radius: .25rem 0 0 .25rem;
|
|
}
|
|
|
|
&:last-child {
|
|
border-radius: 0 .25rem .25rem 0;
|
|
}
|
|
|
|
.id-data {
|
|
font-size: calc(10rem / 16);
|
|
color: rgba(34, 34, 34, .29);
|
|
}
|
|
|
|
h6 {
|
|
font-size: calc(14rem / 16);
|
|
color: #489AF1;
|
|
}
|
|
|
|
.cat-data {
|
|
font-size: calc(13rem / 16);
|
|
color: rgba(34, 34, 34, .4);
|
|
}
|
|
|
|
.action-data {
|
|
color: #A1A1A1;
|
|
font-size: calc(10.7rem / 16);
|
|
|
|
& > a {
|
|
visibility: hidden;
|
|
color: #A1A1A1;
|
|
}
|
|
|
|
& > a.active {
|
|
visibility: visible;
|
|
|
|
svg {
|
|
path {
|
|
fill: #FFE900;
|
|
}
|
|
|
|
rect {
|
|
fill: #EDA862;
|
|
}
|
|
}
|
|
}
|
|
|
|
svg {
|
|
width: .45rem;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
&.location-data, &.date-data {
|
|
font-size: calc(13rem / 16);
|
|
color: #707070;
|
|
}
|
|
|
|
&.price-data {
|
|
width: 20%;
|
|
color: #D33023;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#gallerying {
|
|
.gallery-item-wrapper {
|
|
&:nth-child(odd) {
|
|
padding-right: .125rem;
|
|
}
|
|
|
|
&:nth-child(even) {
|
|
padding-left: .125rem;
|
|
}
|
|
|
|
&:hover {
|
|
.action-data > a {
|
|
visibility: visible !important;
|
|
}
|
|
}
|
|
|
|
.gallery-item {
|
|
background-color: #F6F6F6;
|
|
|
|
img {
|
|
width: 6.5rem;
|
|
height: 5rem;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.action-data-wrapper {
|
|
.action-data {
|
|
margin-top: .7rem;
|
|
|
|
& > a {
|
|
visibility: hidden;
|
|
font-size: calc(8rem / 16);
|
|
color: #A1A1A1;
|
|
margin-bottom: .25rem;
|
|
|
|
svg {
|
|
width: calc(6rem / 16);
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
& > a.active {
|
|
visibility: visible;
|
|
|
|
svg {
|
|
path {
|
|
fill: #FFE900;
|
|
}
|
|
|
|
rect {
|
|
fill: #EDA862;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.id-data {
|
|
font-size: calc(10rem / 16);
|
|
color: #B8B8B8;
|
|
}
|
|
|
|
h6 {
|
|
font-size: calc(14rem / 16);
|
|
|
|
a {
|
|
color: #489AF1;
|
|
}
|
|
}
|
|
|
|
.cat-data {
|
|
font-size: calc(11rem / 16);
|
|
color: #A1A1A1;
|
|
}
|
|
|
|
.price-data {
|
|
color: #D33023;
|
|
font-weight: 700;
|
|
font-size: calc(15rem / 16);
|
|
}
|
|
|
|
.location-data {
|
|
margin-bottom: .15rem;
|
|
}
|
|
|
|
.location-data, .date-data {
|
|
color: #707070;
|
|
font-size: calc(12rem / 16);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* End Listing */
|
|
}
|
|
/* End Listing container */
|
|
}
|
|
}
|
|
|
|
#mobileListingPage {
|
|
#breadcrumb {
|
|
padding: .6rem 1rem;
|
|
|
|
ul {
|
|
font-size: calc(11rem / 16);
|
|
color: #8598AA;
|
|
|
|
li {
|
|
&:not(:first-child):before {
|
|
content: '>';
|
|
margin-left: .125rem;
|
|
}
|
|
|
|
a {
|
|
color: #8598AA;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#mobileListNav {
|
|
background-color: #F8F9FA;
|
|
|
|
& > .mobile-list-nav-item {
|
|
width: percentage(1/3);
|
|
font-size: calc(11rem / 16);
|
|
color: #4D5359;
|
|
|
|
svg {
|
|
height: 1.1rem;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.divider {
|
|
border-left: calc(1rem / 16) solid #E1E1E2;
|
|
height: 1.8rem;
|
|
}
|
|
}
|
|
|
|
#mobileListing {
|
|
.listing-item {
|
|
&:nth-child(odd) {
|
|
background-color: #F6F6F6;
|
|
}
|
|
|
|
img {
|
|
height: 5rem;
|
|
width: 7rem;
|
|
object-fit: cover;
|
|
}
|
|
|
|
div {
|
|
h6 {
|
|
font-size: calc(13rem / 16);
|
|
color: #393939;
|
|
}
|
|
|
|
p {
|
|
&:first-of-type {
|
|
color: #A1A1A1;
|
|
font-size: calc(10rem / 16);
|
|
}
|
|
|
|
&:last-of-type {
|
|
color: #1592E6;
|
|
font-size: calc(14rem / 16);
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|