Design and style upgrades

This commit is contained in:
2014-03-31 17:43:51 +02:00
parent bbf1a11a2e
commit 14217efad3
15 changed files with 126 additions and 119 deletions
@@ -0,0 +1,31 @@
.button-text
// Only icons for now
display: none
.active-orders-table
.status-icons
span
display: none
.active
.status-icons
.active-order
display: inline-block
.active-orders-table
tbody
tr
td
.active_order_table_number
position: relative
.extra-list-info
// Facebook profiles
display: none
$extra-info-width: 220px
position: absolute
width: $extra-info-width
// 7px is padding + border, 5px is extra spacing
right: -$extra-info-width - 7px*2 - 5px
top: -7px*2
padding: 4px
border: 3px solid #aaa
border-radius: 3px
background-color: white
text-align: left
@@ -0,0 +1,38 @@
@import font-awesome
span.icon
@extend .fa
@extend .fa-lg
&.needs-help
@extend .fa-bell
&.needs-payment
@extend .fa-money
.fa-stack
.revoke
color: #b94a48
.button-icon
display: inline-block
width: 2em
height: 2em
line-height: 2em
vertical-align: middle
background-repeat: no-repeat
background-position: center center
.mark-order-active .button-icon
background-image: image-url('icons/order-check.png')
.mark-order-delivered .button-icon
background-image: image-url('icons/order-doublecheck.png')
.fa-shifted-stack
position: relative
display: inline-block
width: 2.5em
height: 2em
line-height: 2em
vertical-align: middle
.fa
position: absolute
width: 100%
left: 20%
&:first-child
left: -10%
@@ -1,50 +0,0 @@
.list-status
.list-needs-help-indicator
display: inline-block
width: 30px
color: #400
background-color: #aaf
text-align: center
margin-right: 7px
&.hide
display: none
.list-needs-payment-indicator
display: inline-block
width: 30px
color: #440
background-color: #faa
text-align: center
margin-right: 7px
&.hide
display: none
.active-orders-table
tbody
tr
td
&:first-child
padding-left: 35px
background-position: 5px center
background-repeat: no-repeat
.active_order_table_number
position: relative
.extra-list-info
display: none
$extra-info-width: 220px
position: absolute
width: $extra-info-width
// 7px is padding + border, 5px is extra spacing
right: -$extra-info-width - 7px*2 - 5px
top: -7px*2
padding: 4px
border: 3px solid #aaa
border-radius: 3px
background-color: white
text-align: left
&.active
td
&:first-child
background-image: image-url('icons/order-check.png')
&.delivered
td
&:first-child
background-image: image-url('icons/order-doublecheck.png')
@@ -1,50 +0,0 @@
.list-status
.list-needs-help-indicator
display: inline-block
width: 30px
color: #400
background-color: #aaf
text-align: center
margin-right: 7px
&.hide
display: none
.list-needs-payment-indicator
display: inline-block
width: 30px
color: #440
background-color: #faa
text-align: center
margin-right: 7px
&.hide
display: none
.active-orders-table
tbody
tr
td
&:first-child
padding-left: 35px
background-position: 5px center
background-repeat: no-repeat
.active_order_table_number
position: relative
.extra-list-info
display: none
$extra-info-width: 220px
position: absolute
width: $extra-info-width
// 7px is padding + border, 5px is extra spacing
right: -$extra-info-width - 7px*2 - 5px
top: -7px*2
padding: 4px
border: 3px solid #aaa
border-radius: 3px
background-color: white
text-align: left
&.active
td
&:first-child
background-image: image-url('icons/order-check.png')
&.delivered
td
&:first-child
background-image: image-url('icons/order-doublecheck.png')
@@ -1,3 +1,4 @@
@import font-awesome
section.main-section
height: 100%
.top-menu
@@ -13,6 +14,13 @@ section.main-section
&.active
color: yellow
border-color: yellow
span.icon
@extend .fa
@extend .fa-lg
&.needs-help
@extend .fa-bell
&.needs-payment
@extend .fa-money
#notice
a
color: white