SASS
$black1: #111111
$black2: #272727
$black3: #2F2F2F
$black4: #3D3D3D
$black5: rgba(0, 0, 0, 0.02)
$red1: #EE3126
$red2: #FC4545
$red3: rgba(238, 49, 38, .6)
$tan1: #E4E4E4
$tan2: #FBFBFB
$tan3: lighten($tan1, 4%)
$white: #FFFFFF
$blue1: #1479FB
$blue2: lighten($blue1, 5%)
$green1: #48C42E
$green2: lighten($green1, 5%)
$orange1: #FF851B
$orange2: lighten($orange1, 5%)
//| I included a bunch of colors
//| that I ended up not using.
//| But I figured someone else
//| might.
//| *The only browser I've
//| tested this with is Chrome.*
//|----------------------------
//| Body
//|----------------------------
body
font-family: sans-serif
font-weight: 300
letter-spacing: .01em
outline: 0
a
color: $red1
&:hover
color: lighten($red1, 10%)
&:focus, a:active
color: darken($red1, 10%)
//|----------------------------
//| Buttons
//|----------------------------
.btn
background-color: $tan1
border-color: $tan1
transition: all ease .2s
border-radius: 4px
color: $black4
&:hover
background-color: $tan3
border-color: $tan3
&:active
background-color: darken($tan1, 5%)
&:focus
background-color: darken($tan1, 20%)
color: $white
.btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus, .btn-default:focus, .btn-default.focus
color: $black4
background-color: darken($tan1, 15%)
border-color: darken($tan1, 15%)
.btn-primary
background-color: $blue1
border-color: $blue1
color: $white
&:hover
background-color: $blue2
border-color: $blue2
&:active
background-color: darken($blue1, 15%)
&:focus
background-color: darken($blue1, 5%)
.btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus, .btn-primary:focus, .btn-primary.focus
background-color: darken($blue1, 10%)
border-color: darken($blue1, 10%)
.btn-success
background-color: $green1
border-color: $green1
color: $white
&:hover
background-color: $green2
border-color: $green2
&:active
background-color: darken($green1, 15%)
&:focus
background-color: darken($green1, 10%)
.btn-success:active:hover, .btn-success.active:hover, .open > .dropdown-toggle.btn-success:hover, .btn-success:active:focus, .btn-success.active:focus, .open > .dropdown-toggle.btn-success:focus, .btn-success:active.focus, .btn-success.active.focus, .open > .dropdown-toggle.btn-success.focus, .btn-success:focus, .btn-success.focus
background-color: darken($green1, 7%)
border-color: darken($green1, 7%)
.btn-info
background-color: $black3
border-color: $black3
color: $white
&:hover
background-color: lighten($black3, 15%)
border-color: lighten($black3, 15%)
&:active
background-color: darken($black3, 5%)
&:focus
background-color: darken($black3, 2%)
.btn-info:active:hover, .btn-info.active:hover, .open > .dropdown-toggle.btn-info:hover, .btn-info:active:focus, .btn-info.active:focus, .open > .dropdown-toggle.btn-info:focus, .btn-info:active.focus, .btn-info.active.focus, .open > .dropdown-toggle.btn-info.focus, .btn-info:focus, .btn-info.focus
background-color: lighten($black3, 5%)
border-color: lighten($black3, 5%)
.btn-warning
background-color: $orange1
border-color: $orange1
color: $white
&:hover
background-color: $orange2
border-color: $orange2
&:active
background-color: darken($orange1, 10%)
&:focus
background-color: darken($orange1, 5%)
.btn-warning:active:hover, .btn-warning.active:hover, .open > .dropdown-toggle.btn-warning:hover, .btn-warning:active:focus, .btn-warning.active:focus, .open > .dropdown-toggle.btn-warning:focus, .btn-warning:active.focus, .btn-warning.active.focus, .open > .dropdown-toggle.btn-warning.focus, .btn-warning:focus, .btn-warning.focus
background-color: darken($orange1, 10%)
border-color: darken($orange1, 10%)
.btn-danger
background-color: $red1
border-color: $red1
color: $white
&:hover
background-color: $red2
border-color: $red2
&:active
background-color: darken($red1, 10%)
&:focus
background-color: darken($red1, 5%)
.btn-danger:active:hover, .btn-danger.active:hover, .open > .dropdown-toggle.btn-danger:hover, .btn-danger:active:focus, .btn-danger.active:focus, .open > .dropdown-toggle.btn-danger:focus, .btn-danger:active.focus, .btn-danger.active.focus, .open > .dropdown-toggle.btn-danger.focus, .btn-danger:focus, .btn-danger.focus
background-color: darken($red1, 10%)
border-color: darken($red1, 10%)
.btn-link
background-color: transparent
border-color: transparent
color: $blue1
&:hover
background-color: transparent
border-color: transparent
color: $blue2
&:active
background-color: $black5
&:focus
background-color: $black5
.btn-outline
background-color: transparent
border: 1px solid $tan1
color: darken($tan1, 15%)
&:hover
background-color: $tan1
border-color: $tan1
color: $black4
&:active
background-color: darken($tan1, 5%)
&:focus
background-color: darken($tan1, 20%)
.btn-outline:active:hover, .btn-outline.active:hover, .open > .dropdown-toggle.btn-outline:hover, .btn-outline:active:focus, .btn-outline.active:focus, .open > .dropdown-toggle.btn-outline:focus, .btn-outline:active.focus, .btn-outline.active.focus, .open > .dropdown-toggle.btn-outline.focus, .btn-outline:focus, .btn-outline.focus
color: $black4
background-color: darken($tan1, 15%)
border-color: darken($tan1, 15%)
.btn-danger-outline
background-color: transparent
border: 1px solid $red1
color: $red1
&:hover
background-color: $red2
border-color: $red2
color: $white
&:active
background-color: darken($red1, 10%)
&:focus
background-color: darken($red1, 5%)
.btn-danger-outline:active:hover, .btn-danger-outline.active:hover, .open > .dropdown-toggle.btn-danger-outline:hover, .btn-danger-outline:active:focus, .btn-danger-outline.active:focus, .open > .dropdown-toggle.btn-danger-outline:focus, .btn-danger-outline:active.focus, .btn-danger-outline.active.focus, .open > .dropdown-toggle.btn-danger-outline.focus, .btn-danger-outline:focus, .btn-danger-outline.focus
background-color: darken($red1, 10%)
border-color: darken($red1, 10%)
.btn-primary-outline
background-color: transparent
border: 1px solid $blue1
color: $blue1
.btn-primary-outline:hover
background-color: $blue2
border-color: $blue2
color: $white
.btn-primary-outline:active
background-color: darken($blue1, 15%)
.btn-primary-outline:focus
background-color: darken($blue1, 5%)
.btn-success-outline
background-color: transparent
border: 1px solid $green1
color: $green1
.btn-success-outline:hover
background-color: $green2
border-color: $green2
color: $white
.btn-success-outline:active
background-color: darken($green1, 15%)
.btn-success-outline:focus
background-color: darken($green1, 10%)
.btn-info-outline
background-color: transparent
border: 1px solid $black3
color: $black3
&:hover
background-color: $black4
border-color: $black4
color: $white
&:active
background-color: darken($black3, 5%)
&:focus
background-color: darken($black3, 2%)
.btn-warning-outline
background-color: transparent
border: 1px solid $orange1
color: $orange1
&:hover
background-color: $orange2
border-color: $orange2
color: $white
&:active
background-color: darken($orange1, 10%)
&:focus
background-color: darken($orange1, 5%)
.btn-link-outline
background-color: transparent
border: 1px solid transparent
color: $blue1
&:hover
background-color: transparent
border-color: $blue2
color: $blue2
&:active
background-color: $black5
&:focus
background-color: $black5
//|----------------------------
//| Text
//|----------------------------
.has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox, .has-success .radio-inline, .has-success .checkbox-inline, .has-success.radio label, .has-success.checkbox label, .has-success.radio-inline label, .has-success.checkbox-inline label
color: $green1
.text-success
color: $green1
//|----------------------------
//| Navs
//|----------------------------
.nav
li
a:hover, a:focus
background-color: $tan2
li.disabled
a, a:hover, a:focus, a:active
color: lighten($red1, 30%)
//|----------------------------
//| Labels
//|----------------------------
.label-default
background-color: $tan1
color: $black4
.label-primary
background-color: $blue1
.label-success
background-color: $green1
.label-warning
background-color: $orange1
.label-danger
background-color: $red1
.label-info
background-color: $black4
//|----------------------------
//| Panels
//|----------------------------
.panel-default
border-color: $tan1
.panel-heading, .panel-footer
background-color: $tan2
border-color: $tan1
//|----------------------------
//| Inventory
//|----------------------------
.panel-listing
border-color: darken($tan1, 5%)
border-radius: 0
min-height: 378px
transition: all ease .2s
background-color: lighten($tan2, 2%)
&:hover
border-color: darken($tan1, 15%)
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25)
img
filter: brightness(1.07)
@media (min-width: 768px) and (max-width: 991px)
min-height: 420px
@media (max-width: 767px)
min-height: auto
.listing-img
display: block
max-width: 100%
height: auto
.listing-title a
font-size: 18px
font-weight: bold
width: 100%
text-decoration: none
color: $black4
a.listing-info
width: 55%
display: inline-block
color: $black4
padding-top: 4px
&:hover, &:focus, &:active
text-decoration: none
@media (max-width: 767px)
width: 100%
.sub-item
display: block
font-size: 14px
padding-top: 4px
a span.left
font-weight: bold
display: inline
a span.right
font-weight: normal
display: inline
.listing-price
position: absolute
bottom: 28px
@media (max-width: 767px)
position: relative
bottom: inherit
span.title
display: block
padding-top: 4px
font-size: 14px
span.price
display: block
font-weight: bold
font-size: 22px
.listing-action
width: 45%
height: 100%
display: inline-block
float: right
position: absolute
top: 83%
@media (max-width: 314px)
.btn-group
.btn
padding: 3px 6px
@media (max-width: 767px)
width: 50%
.btn-group
right: 5px
#listing-menu.dropdown-menu
bottom: 100%
top: inherit
left: -112px
li a
padding: 18px 88px 18px 55px
font-size: 16px
color: darken($tan1, 50%)
&:hover
color: $black4
&:focus, &:active
color: $blue1 !important
@media (min-width: 1200px)
.btn-group
right: 18px
@media (max-width: 991px)
right: 0
.listing-year
position: absolute
top: 1px
left: 16px
font-size: 14px
border-radius: 0
//|----------------------------
//| Misc
//|----------------------------
.dropdown-menu
border-radius: 0
.mb15
margin-bottom: 15px
//|----------------------------
//| Icons
//|----------------------------
.bookmark.icon
color: darken($tan1, 50%)
position: absolute
margin-left: 5px
margin-top: 3px
width: 10px
height: 15px
border-radius: 1px 1px 0 0
border-top: solid 1px currentColor
border-left: solid 1px currentColor
border-right: solid 1px currentColor
transition: all ease .3s
&::before
content: ''
position: absolute
top: 10px
left: 1px
width: 7px
height: 7px
border-top: solid 1px currentColor
border-left: solid 1px currentColor
-webkit-transform: rotate(45deg)
transform: rotate(45deg)
transition: all ease .3s
#listing-menu.dropdown-menu
#lbkmk.bookmark.icon
margin-left: -29px
a:hover #lbkmk.bookmark.icon
color: $black4
background-color: $black4
border-color: $black4
&::before
background-color: white
a:focus #lbkmk.bookmark.icon, a:active #lbkmk.bookmark.icon
background-color: $blue1
border-color: $blue1
&::before
background-color: white
border-top-color: $blue1
border-left-color: $blue1
&::after
background-color: white
.check.icon
color: darken($tan1, 50%)
position: absolute
margin-left: 3px
margin-top: 4px
width: 14px
height: 8px
border-bottom: solid 1px currentColor
border-left: solid 1px currentColor
-webkit-transform: rotate(-45deg)
transform: rotate(-45deg)
transition: all ease .1s
#listing-menu.dropdown-menu
#compare.check.icon
margin-left: -30px
a:hover #compare.check.icon
color: $black4
margin-top: 4px
margin-left: -32px
border-bottom: solid 3px currentColor
border-left: solid 3px currentColor
width: 18px
a:focus #compare.check.icon, a:active #compare.check.icon
margin-top: 4px
border-color: $blue1
&::before
background-color: white
&::after
background-color: white
.chat.icon
color: darken($tan1, 50%)
position: absolute
margin-left: 2px
margin-top: 6px
width: 15px
height: 10px
border: solid 1px currentColor
border-radius: 2px
transition: all ease .3s
&::before
content: ''
position: absolute
left: 3px
top: 7px
width: 4px
height: 4px
-webkit-transform: rotate(45deg)
transform: rotate(45deg)
background-color: white
border-bottom: solid 1px currentColor
border-right: solid 1px currentColor
transition: all ease .3s
#listing-menu.dropdown-menu
#inquire.chat.icon
margin-left: -29px
a:hover #inquire.chat.icon
color: $black4
background-color: $black4
border-color: $black4
&::before
background-color: $black4
border-color: $black4
a:focus #inquire.chat.icon, a:active #inquire.chat.icon
background-color: $blue1
border-color: $blue1
&::before
background-color: $blue1
border-color: $blue1
&::after
background-color: $blue1
.eye.icon
color: darken($tan1, 50%)
position: absolute
margin-left: 3px
margin-top: 5px
width: 12px
height: 12px
border-radius: 70% 15%
border: solid 1px currentColor
-webkit-transform: rotate(45deg)
transform: rotate(45deg)
transition: all ease .3s
&::before
content: ''
position: absolute
left: 2px
top: 2px
width: 6px
height: 6px
border-radius: 50%
border: solid 1px currentColor
#listing-menu.dropdown-menu
#similar.eye.icon
margin-left: -29px
a:hover #similar.eye.icon
color: $black4
border-color: $black4
&::before
background-color: $black4
a:focus #similar.eye.icon, a:active #similar.eye.icon
background-color: $blue1
border-color: $blue1
&::before
background-color: white
border-color: $black4
.upload.icon
color: darken($tan1, 50%)
position: absolute
margin-left: 3px
margin-top: 8px
width: 13px
height: 10px
border: solid 1px currentColor
border-top: none
border-radius: 1px
transition: all ease .3s
&::before
content: ''
position: absolute
top: -4px
left: 5px
width: 1px
height: 9px
background-color: currentColor
transition: all ease .1s
&::after
content: ''
position: absolute
top: -5px
left: 3px
width: 5px
height: 5px
border-top: solid 1px currentColor
border-right: solid 1px currentColor
-webkit-transform: rotate(-45deg)
transform: rotate(-45deg)
transition: all ease .1s
#listing-menu.dropdown-menu
#share.upload.icon
margin-left: -29px
a:hover #share.upload.icon
color: $black4
&::before
top: -11px
height: 16px
background-color: $black4
&::after
top: -11px
width: 7px
height: 7px
left: 2px
border-color: $black4
a:focus #share.upload.icon
a:active #share.upload.icon
color: $blue1
border-color: $blue1
&::before
background-color: $blue1
&::after
border-color: $blue1
