plugins/orders/public/stylesheets/_items.scss
@import 'base';
@import 'orders-variables';
.order-items-container {
@import 'field';
&.empty {
border-top: $border dotted black;
text-align: center;
}
.order-total {
padding: $half-padding $padding;
@extend .container-clean;
.title, .value {
margin-left: $module05 - $padding; //the size of the previous colums
padding: 0 $padding;
width: $module01;
text-transform: uppercase;
}
.value {
clear: both;
}
}
.order-items {
.table-header {
@extend .container-clean;
}
//.item do overflow, so no overflow:hidden for its parents (.table-content)
&.self-supplier {
.box-field {
&.product {
width: $module04 - $padding;
max-width: $module04 - $padding;
}
&.quantity {
&, input {
width: $module01 - $padding;
max-width: $module01 - $padding;
}
}
}
}
.box-field {
float: left;
padding: $half-padding $padding;
padding-right: $padding - $border;
border-right: $border solid white;
&:last-child {
border-right: none;
}
&.supplier, &.product {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
&.supplier {
width: $module02 - $padding;
max-width: $module02 - $padding;
}
&.product {
width: $module02 - $padding;
max-width: $module02 - $padding;
}
&.quantity {
&, input {
width: $module01;
max-width: $module01;
}
}
&.price-total {
width: $module01;
max-width: $module01;
}
&.status {
width: $module01 - $border; //FIXME why (- $border)?
text-transform: uppercase;
}
}
}
.table-header, .table-content {
border-bottom: $border solid black;
}
.table-header {
font-weight: bold;
font-size: 8px;
text-transform: uppercase;
}
.table-content {
.item {
&.product-unavailable {
.product, .quantity, .price-total {
text-decoration: line-through;
}
}
.fields {
display: table;
@extend .container-clean;
.box-field {
float: none;
display: table-cell;
vertical-align: top;
}
.quantity-price-table {
padding: 0;
.quantity-price-row {
display: table-row;
&.overwritten {
.quantity, .price-total, .status {
text-decoration: line-through;
color: #999;
}
}
.price-total {
.outdated {
text-decoration: line-through;
}
.new-price {
font-weight: bold;
}
}
&.not_modified, &.empty {
display: none;
}
&.editable {
.quantity {
.value {
display: initial;
}
}
}
.quantity {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
input {
display: none;
}
.unit {
text-transform: lowercase;
}
}
}
}
}
&.hover,
&.edit {
background-color: $order-items-color;
}
&.edit {
// not working with scrollbars' overflow
//margin-left: -($half-padding + $border);
//padding: $half-padding;
//border: $border solid black;
//border-radius: $border-radius;
//-moz-border-radius: $border-radius;
//-o-border-radius: $border-radius;
//-webkit-border-radius: $border-radius;
//box-shadow: 0 0 3px rgba(0,0,0,.5);
//-moz-box-shadow: 0 0 3px rgba(0,0,0,.5);
//-webkit-box-shadow: 0 0 3px rgba(0,0,0,.5);
.fields {
.box-field {
border-right: none;
padding-right: $padding;
}
.quantity-price-table {
padding-right: 0;
.quantity-price-row {
&.not_modified, &.empty {
display: initial;
}
&.editable {
.quantity {
text-overflow: initial;
overflow: initial;
white-space: initial;
.value {
display: none;
}
}
}
.quantity {
.unit {
display: initial;
}
input {
display: initial;
}
}
}
}
}
.more {
display: block;
}
}
.more {
display: none;
overflow: hidden;
width: $order-items-width;
.actions {
float: left;
a {
color: black;
margin-right: 5px;
margin-left: 5px;
}
}
.price-with-unit {
float: right;
width: $module01;
}
}
}
}
}