app/assets/stylesheets/webstore/_base.sass
$section-border-color: #CBCBCB
$section-info: #eceae3
$section-spacing: 25px
$section-padding: 10px
$btnProcessBackground: #ab8a81 !default
$btnProcessBackgroundHighlight: darken($btnProcessBackground, 10%) !default
=order-frame
background-color: $white
border: 1px solid $section-border-color
overflow: hidden
position: relative
+box-shadow(rgba(0, 0, 0, .25), 0px, 15px, 20px, -6px)
.section-info-background
background-color: $section-info
position: absolute
top: 0
right: 0
z-index: 0
height: 100%
width: 17%
@media (min-width: 1200px)
width: 14%
.section-info
position: relative
h1, h2, .price
margin: 0px
font-weight: bold
h1
font-size: 20px
line-height: 22px
h2, .price
font-size: 16px
line-height: 18px
#total .price
font-size: 24px
line-height: 26px
.price
text-align: right
//----- Global style
body
background: $white image-url('background.png') repeat
>.container-fluid
background-color: $black
margin-bottom: 28px
h1, h2, h3, h4, h5, h6
color: $grayDark
table
&.no-rounded-corners
+border-radius(0px)
thead:first-child
tr:first-child
th:first-child, th:last-child
+border-radius(0px)
thead:last-child
tr:last-child
th:first-child, th:last-child
+border-radius(0px)
tbody:first-child
tr:first-child
td:first-child, td:last-child
+border-radius(0px)
tbody:last-child
tr:last-child
td:first-child, td:last-child
+border-radius(0px)
.alert
font-weight: bold
.radio
padding-left: 0
label
margin-left: 20px
.webstore-section
border-color: $grayLight
border-style: dashed
border-width: 1px 0 0 0
padding-top: $section-spacing
margin-top: $section-spacing
#bucky-box-controls
background-color: $black
color: $grayLighter
padding: 10px 0
a
color: $white
font-weight: bold
#auth-controls
margin-top: 8px
.account-dropdown
padding: 0
border: 1px solid #aaa
+border-radius(0px)
> *
padding: 4px 8px
border: 1px solid #000
.current-account
background-color: #333
border-bottom: 1px solid #aaa
.logout a
border: 1px solid #aaa
padding: 4px
font-size: 13px
.switch-accounts
background-color: #666
border-top: none
.signed-out
opacity: 0.4
a
font-weight: normal
#public-banner
background-color: $grayDarker
color: $grayLighter
padding: 10px 0px
margin-bottom: 28px
#company-logo
h1
color: $white
#content-information
#information
background-color: rgba(128, 128, 128, 0.3)
padding: 14px
margin-bottom: $section-spacing
.btn-process
+buttonBackground($btnProcessBackground, $btnProcessBackgroundHighlight)
//----- Webstore Sidebar
#content-information
img
+rotate(-5deg)
margin: 3px 0px
.webstore-information-section
h4
margin-top: 0px
margin-bottom: 10px
font-size: 18px
line-height: 16px
padding-left: 9px
margin-bottom: 28px
&:last-child
margin-bottom: 0px
#webstore_name
margin-top: 20px
margin-bottom: 0
margin-left: 9px
font-size: 22px
line-height: 22px
.webstore-information-section > div
color: $black
opacity: 0.5
line-height: 24px
i
display: block
background: transparent image-url('facebook-icon.png') no-repeat right top
background-size: 100%
width: 24px
height: 24px
&:hover
opacity: 1
&.phone
i.phone-icon
background: transparent image-url('phone-icon.png') no-repeat right top
background-size: 100%
//----- Store
$webstore-item-padding: 8px
#webstore-items
.webstore-item
width: 222px
margin-bottom: 15px
@media (min-width: 1200px)
width: 275px
margin-bottom: 22px
@media (min-width: 768px) and (max-width: 979px)
width: 261px
@media (max-width: 767px)
width: 100%
@media (max-width: 739px)
width: 100%
@media (max-width: 480px)
width: 100%
margin-bottom: 16px
float: left
+box-shadow(rgba(0, 0, 0, .25), 0px, 15px, 20px, -6px)
.box
background-color: $white
padding: $webstore-item-padding
border-left: 1px solid $section-border-color
border-top: 1px solid $section-border-color
border-right: 1px solid $section-border-color
img
width: 100%
aside
background-color: $section-info
padding: $webstore-item-padding
border-left: 1px solid $section-border-color
border-bottom: 1px solid $section-border-color
border-right: 1px solid $section-border-color
.price
float: left
font-weight: bold
font-size: 21px
line-height: 31px
.btn
float: right
//----- Webstore Order
#current-order
+order-frame
img
float: left
width: 26%
padding: 0 2%
table.section-info
float: right
width: 70%
border-collapse: separate
tr
td
vertical-align: top
padding: 16px 5px
&.description
border-bottom: 1px solid $grayLighter
width: 74%
@media (min-width: 1200px)
width: 79%
p
margin-top: 10px
margin-bottom: 0px
.label
padding-left: 8px
padding-right: 8px
&.price
padding-right: .5em
&#description
td
padding-top: 0px
&#total
td
padding-bottom: 6px
border-bottom-width: 0px
&.price
span
border-top: 1px solid $black
padding-top: 15px
padding-left: 6%
font-size: 18px
table.sub-section-info
margin-top: 3px
width: 100%
tr
td
padding: 4px 4px 0px 0px
&.icon
width: 16px
&.quantity
width: 36px
text-align: right
//----- Webstore Customise
#webstore-customise
.checkbox-header
label
font-weight: bold
font-size: 18px
line-height: 20px
margin: 0px
input
margin-bottom: 10px
margin-right: 5px
.dislikes_input, .likes_input
margin-bottom: 10px
label
margin-top: 5px
margin-bottom: 0px
width: 3.5%
select, .select2-container
width: 96.5%
#webstore-extras
.table
background-color: $white
.control-group
margin-bottom: 0px
tr.extras-row
display: none
td
vertical-align: middle
&.information
width: 76%
&.quantity
width: 12%
//----- Webstore Login
#webstore-login
#password-field
display: none
//----- Webstore Delivery
#webstore-delivery_service
.delivery_service-info
p
background-color: $tableBackgroundAccent
padding: 5px 10px
#webstore-schedule
.order-days
background-color: $white
tr
&:not(:first-child)
display: none
td
text-align: center
color: #555
*
font-weight: bold
&.disabled
color: #ccc
background-color: rgba(127, 127, 127, 0.1)
*
font-weight: normal
&:first-child
display: none
color: #ccc
+border-top-left-radius(4px)
font-weight: bold
vertical-align: middle
.checkbox
margin-left: 42%
//----- Webstore Complete
#content-body .completed-header
font-weight: bold
padding: .5em
background: #F1F2E8
position: relative
z-index: 1
font-size: 22px
#webstore-address
#update-address
input
margin-bottom: 0px
#webstore-payment-instructions
font-weight: bold
font-size: 16px
+box-shadow(rgba(0, 0, 0, .25), 0px, 15px, 20px, -6px)
margin-bottom: $section-spacing
background-color: $white
padding: 0
border: 1px solid $section-border-color
line-height: 30px
.legend
padding: $section-padding
.prices
background-color: $section-info
padding: $section-padding
.total
border-top: 1px solid $black
font-size: 18px
#webstore-payment
+box-shadow(rgba(0, 0, 0, .25), 0px, 15px, 20px, -6px)
margin-bottom: $section-spacing
#amount-due
border: 1px solid $section-border-color
border-bottom-width: 0px
#payment, #payment-options
background-color: $white
border: 1px solid $section-border-color
.payment-title
font-weight: bold
font-size: 19px
margin-top: 1em
margin-bottom: 1em
.payment-message
text-align: center
.row-fluid
margin-bottom: 1em
.note
color: #333
font-style: italic
.center-row
float: none
margin-left: auto
margin-right: auto
.form-horizontal .control-label
text-align: left
#payment-options
padding: 30px 0 20px
.form-horizontal
.control-label
text-align: left
.controls
margin-left: 100px
label.radio_buttons
width: 100px
//----- Webstore Completed
.emphasised-label
font-weight: bold
form.payments
.input-small
width: 86px
label
font-weight: bold
&.checkbox
font-weight: normal