blob: 039627b29e8a4972bdcb718fb21ffa3c8ddfb969 [file] [log] [blame]
////
/// @group layout/cash-register
////
/// Styles related to POS/Cash register application. To receive these styles, components need to be placed inside a global layout with style name "os-cash-register".
@mixin os-cash-register {
/* cash-field-width set in _textfield */
.os-cash-register {
@if $font-size-adjustment < 1 { $font-size-adjustment: 1; }
.v-gridlayout-slot, .v-slot-l-control {
@if $os-cash-zoom-factor < $v-scaling-factor--huge {$font: $v-font-size * $v-scaling-factor--huge; }
@if $os-cash-zoom-factor < $v-scaling-factor--large {$font: $v-font-size * $v-scaling-factor--large; }
@if $os-cash-zoom-factor <= 1 {$font: $v-font-size;}
line-height: $font;
}
$header-footer-height: make_even($v-font-size * $font-size-adjustment * 1.6);
$caption-height: $v-unit-size * $os-cash-zoom-factor;
/* Remove paddings around containers in POS/Cash area. */
.v-verticallayout, .v-horizontallayout, .v-gridlayout {
padding: 0px;
left: 0px !important;
}
@include os-button-cash;
/* basic textfield size */
.v-textfield, .v-datefield ,.o-XSuggestBox{
@include os-textfield-cash;
}
.v-textarea {
font-size: $v-font-size * $os-cash-zoom-factor;
&.v-disabled, &.v-disabled > .v-textfield {
@include os-textfield-readonly;
opacity: 0.75;
}
}
.v-textarea.os-monospace {
font-size: $v-font-size * $os-cash-zoom-factor;
}
.o-XSuggestBox {
/* width: auto; */
.enableSuggestions {
height: $os-cash-zoom-factor * $v-unit-size - first-number($v-border);
width: $os-cash-zoom-factor * $v-unit-size;
@include os-icon-font($content: '\f08d',
$size: $v-font-size * $os-cash-zoom-factor,
$line-height: $v-unit-size * $os-cash-zoom-factor);
float: right;
&.selected {
@include os-icon-font($content: '\f002',
$size: $v-font-size * $os-cash-zoom-factor,
$line-height: $v-unit-size * $os-cash-zoom-factor);
float: right;
}
}
}
/* basic textfield width */
@include os-textfield-mod($width-mod: 1);
@include os-textfield-mod($width-mod: 1);
/* local */
/* ALSO COVERS o-XSuggestBox !! */
@include os-textfield-mod($width-mod: 0.5,$secondary-stylename: os-span-h-half);
@include os-textfield-mod($width-mod: 1, $secondary-stylename: os-span-h-single);
@include os-textfield-mod($width-mod: 2, $secondary-stylename: os-span-h-double);
@include os-textfield-mod($width-mod: 3, $secondary-stylename: os-span-h-triple);
@include os-textfield-mod($width-mod: 4, $secondary-stylename: os-span-h-quad);
/* single button styles */
@include os-button-mod($width-mod: 1, $primary-stylename: v-button\.os-span-h-single);
@include os-button-mod($width-mod: 1.5, $primary-stylename: v-button\.os-span-h-odd);
@include os-button-mod($width-mod: 2, $primary-stylename: v-button\.os-span-h-double);
@include os-button-mod($width-mod: 3, $primary-stylename: v-button\.os-span-h-triple);
@include os-button-mod($width-mod: 4, $primary-stylename: v-button\.os-span-h-quad);
@include os-button-mod($height-mod: 1, $primary-stylename: v-button\.os-span-v-single);
@include os-button-mod($height-mod: 2, $primary-stylename: v-button\.os-span-v-double);
@include os-button-mod($height-mod: 3, $primary-stylename: v-button\.os-span-v-triple);
@include os-button-mod($height-mod: 4, $primary-stylename: v-button\.os-span-v-quad);
/* Height and width modifications for all components (table, textfield, button, textarea...)
to put components in a grid-like size relation to each other. */
/* horizontal mods */
.os-field-h-half {
@include os-textfield-mod($width-mod: 0.5);
}
.os-button-h-single {
@include os-button-mod($width-mod: 1);
}
.os-table-h-single, .v-table.os-span-h-single {
@include os-table-mod($width-mod: 1);
}
.os-button-h-odd {
@include os-button-mod($width-mod: 1.5);
}
.os-field-h-double {
@include os-textfield-mod($width-mod:2);
@include os-textarea-mod($width-mod: 2);
}
.os-table-h-double, .v-table.os-span-h-double {
@include os-table-mod($width-mod: 2);
}
.os-button-h-double {
@include os-button-mod($width-mod: 2);
}
.os-field-h-triple {
@include os-textfield-mod($width-mod: 3);
@include os-textarea-mod($width-mod: 3);
}
.os-table-h-triple, .v-table.os-span-h-triple {
@include os-table-mod($width-mod: 3);
}
.os-button-h-triple {
@include os-button-mod($width-mod: 3);
}
.os-field-h-quad {
@include os-textfield-mod($width-mod: 4);
@include os-textarea-mod($width-mod: 4);
}
.os-table-h-quad, .v-table.os-span-h-quad {
@include os-table-mod($width-mod: 4);
}
.os-button-h-quad {
@include os-button-mod($width-mod: 4);
}
/* vertical mods */
.os-field-v-single {
@include os-textarea-mod($height-mod: 1);
}
.os-table-v-single, .os-span-v-single {
@include os-table-mod($height-mod: 1, $header-footer-height: $header-footer-height);
}
/* reduce actual component height when it has a caption on top (must be after other height definitions) */
/* applies to table, textarea... */
.os-table-v-single .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-single {
@include os-table-mod ($height-mod: 1, $has-caption: 1, $header-footer-height: $header-footer-height);
}
.os-button-v-single {
@include os-button-mod($height-mod: 1);
}
.os-field-v-double {
@include os-textarea-mod($height-mod: 2);
.v-caption-on-top {
@include os-textarea-mod ($height-mod: 2, $has-caption: 1);
}
}
.os-table-v-double, .os-span-v-double {
@include os-table-mod($height-mod: 2, $header-footer-height: $header-footer-height);
}
.os-table-v-double .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-double {
@include os-table-mod ($height-mod: 2, $has-caption: 1, $header-footer-height: $header-footer-height);
}
.os-button-v-double {
@include os-button-mod($height-mod: 2);
}
.os-field-v-triple {
@include os-textarea-mod($height-mod: 3);
.v-caption-on-top {
@include os-textarea-mod ($height-mod: 3, $has-caption: 1);
}
}
.os-table-v-triple, .os-span-v-triple {
@include os-table-mod($height-mod: 3, $header-footer-height: $header-footer-height);
}
.os-table-v-triple .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-triple {
@include os-table-mod ($height-mod: 3, $has-caption: 1, $header-footer-height: $header-footer-height);
}
.os-button-v-triple {
@include os-button-mod($height-mod: 3);
}
.os-field-v-quad {
@include os-textarea-mod($height-mod: 4);
.v-caption-on-top {
@include os-textarea-mod ($height-mod: 4, $has-caption: 1);
}
}
.os-table-v-quad, .os-span-v-quad {
@include os-table-mod($height-mod: 4, $header-footer-height: $header-footer-height);
}
.os-table-v-quad .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-quad {
@include os-table-mod ($height-mod: 4, $has-caption: 1, $header-footer-height: $header-footer-height);
}
.os-button-v-quad {
@include os-button-mod($height-mod: 4);
}
.os-cash-total, .os-cash-xl {
.v-textfield, .v-caption {
font-weight: bold;
}
.v-captiontext {
font-weight: normal;
}
.v-formlayout > table {
width: 100%;
}
.v-textfield {
@include os-textfield-cash-total;
}
.v-formlayout-row>.v-formlayout-captioncell>.v-caption {
height: $v-unit-size * (1.5 * $os-cash-zoom-factor) - first-number($v-border) !important;
line-height: $v-unit-size * (1.5 * $os-cash-zoom-factor);
}
.os-span-h-half .v-textfield {
width: $cash-field-width / 2;
}
.v-button {
@include os-button-mod($col-1: #4caf6a);
&.v-disabled{
background: transparent;
}
}
}
.v-caption-on-top > .v-caption {
@if $os-cash-zoom-factor != 1 {
$caption-padd: make_even($v-unit-size * 0.5);
height: $v-unit-size * $os-cash-zoom-factor - $caption-padd;
padding-top: $caption-padd;
padding-bottom: 0px;
}
@else {
padding-top: 0px;
}
}
.v-caption, .v-captiontext, .v-caption-on-top > .v-caption-l-control > .v-captiontext {
font-size: $v-font-size * $font-size-adjustment;
line-height: $v-unit-size * $font-size-adjustment - first-number($v-border);
}
.v-formlayout {
.v-caption, .v-captiontext {
font-size: $v-font-size * $os-cash-zoom-factor;
line-height: $v-unit-size * $os-cash-zoom-factor - first-number($v-border);
}
}
.v-table-header-wrap, .v-table-caption-container, .v-table-sort-indicator, .v-table-resizer {
/* table header height specified (also overwrites height-definition in _dialog) */
height: $header-footer-height;
/* line-height: $v-font-size * $font-size-adjustment * 1.6; */
font-size: $v-font-size * $font-size-adjustment;
}
.v-table-cell-content {
/* height: floor($v-unit-size * $font-size-adjustment) * 3; */
height: floor($v-unit-size * $font-size-adjustment);
font-size: $v-font-size * $font-size-adjustment;
}
/* LINE BREAK IN TABLE CELLS
.v-table-cell-wrapper {
white-space: normal;
}*/
/* fixed width font */
.os-monospace {
font-family: monospace;
}
/* some spacers */
.os-spacer-top { @include os-spacer(top, 1); }
.os-spacer-left { @include os-spacer(left, 1); }
.os-spacer-right { @include os-spacer(right, 1); }
.os-spacer-bottom { @include os-spacer(bottom, 1); }
.os-spacer-top-double { @include os-spacer(top, 2); }
.os-spacer-left-double { @include os-spacer(left, 2); }
.os-spacer-right-double { @include os-spacer(right, 2); }
.os-spacer-bottom-double { @include os-spacer(bottom, 2); }
.os-spacer-top-triple { @include os-spacer(top, 3); }
.os-spacer-left-triple { @include os-spacer(left, 3); }
.os-spacer-right-triple { @include os-spacer(right, 3); }
.os-spacer-bottom-triple { @include os-spacer(bottom, 3); }
.os-spacer-top-quad { @include os-spacer(top, 4); }
.os-spacer-left-quad { @include os-spacer(left, 4); }
.os-spacer-right-quad { @include os-spacer(right, 4); }
.os-spacer-bottom-quad { @include os-spacer(bottom, 4); }
}
/// This should make popup content appear larger than in other views, but it doesn't work because
/// suggesttext popup containers are rendered outside of osbp's main container and therefore
/// outside of os-cash-register. As it can't be put into context, these popups can only be styled globally for now.
.o-SuggestBoxPopup {
//@include os-popup-suggest(2);
}
}