| //// |
| /// @group layout/cash-register |
| //// |
| |
| /// Styles related to POS/Cash register application. |
| @mixin os-cash-register { |
| /* cash-field-width set in _textfield */ |
| |
| .os-cash-register { |
| /// Only for cash-area. |
| $font-size-adjustment: $os-cash-zoom-factor / 4 * 3; |
| $header-footer-height: make_even($v-font-size * $font-size-adjustment * 1.6); |
| $caption-height: $v-unit-size * $os-cash-zoom-factor; |
| |
| @include os-button-cash; |
| @include os-textfield-cash; |
| |
| /// Remove paddings around containers in POS/Cash area. |
| .os-no-padding { |
| padding: 0px; |
| left: 0px !important; |
| } |
| |
| .o-XSuggestBox { |
| @include os-textfield-cash; |
| @include os-textfield-suggest-mod($width-mod: 2, $cash: true); |
| @include os-button-suggesttext($factor: 2); |
| } |
| |
| .v-textfield, .v-datefield { |
| @include os-textfield-cash; |
| } |
| |
| /* local */ |
| /* ALSO COVERS o-XSuggestBox !! */ |
| @include os-textfield-mod(0.5, $primary-stylename: v-textfield\.os-span-h-half); |
| @include os-textfield-mod(1, $primary-stylename: v-textfield\.os-span-h-single); |
| @include os-textfield-mod(2, $primary-stylename: v-textfield\.os-span-h-double); |
| @include os-textfield-mod(3, $primary-stylename: v-textfield\.os-span-h-triple); |
| @include os-textfield-mod(4, $primary-stylename: v-textfield\.os-span-h-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-span-h-half { |
| @include os-textfield-mod(0.5, $primary-stylename: v-textfield); |
| @include os-textfield-mod(0.5, $primary-stylename: v-datefield); |
| } |
| |
| .os-span-h-single { |
| @include os-button-mod($width-mod: 1); |
| @include os-table-mod($width-mod: 1); |
| @include os-textfield-mod(1, $primary-stylename: v-textfield); |
| @include os-textfield-mod(1, $primary-stylename: v-datefield); |
| @include os-textarea-mod($width-mod: 1); |
| } |
| |
| .os-span-h-double { |
| @include os-button-mod($width-mod: 2); |
| @include os-table-mod($width-mod: 2); |
| @include os-textfield-mod(2, $primary-stylename: v-textfield); |
| @include os-textfield-mod(2, $primary-stylename: v-datefield); |
| @include os-textarea-mod($width-mod: 2); |
| } |
| |
| .os-span-h-triple { |
| @include os-button-mod($width-mod: 3); |
| @include os-table-mod($width-mod: 3); |
| @include os-textfield-mod(3, $primary-stylename: v-textfield); |
| @include os-textfield-mod(3, $primary-stylename: v-datefield); |
| @include os-textarea-mod($width-mod: 3); |
| } |
| |
| .os-span-h-quad { |
| @include os-button-mod($width-mod: 4); |
| @include os-table-mod($width-mod: 4); |
| @include os-textfield-mod(4, $primary-stylename: v-textfield); |
| @include os-textfield-mod(4, $primary-stylename: v-datefield); |
| @include os-textarea-mod($width-mod: 4); |
| } |
| |
| /* vertical mods */ |
| .os-span-v-single { |
| @include os-button-mod($height-mod: 1); |
| @include os-table-mod($height-mod: 1, $header-footer-height: $header-footer-height); |
| @include os-textarea-mod($height-mod: 1); |
| } |
| .os-span-v-double { |
| @include os-button-mod($height-mod: 2); |
| @include os-table-mod($height-mod: 2, $header-footer-height: $header-footer-height); |
| @include os-textarea-mod($height-mod: 2); |
| } |
| |
| .os-span-v-triple { |
| @include os-button-mod($height-mod: 3); |
| @include os-table-mod($height-mod: 3, $header-footer-height: $header-footer-height); |
| @include os-textarea-mod($height-mod: 3); |
| } |
| |
| .os-span-v-quad { |
| @include os-button-mod($height-mod: 4); |
| @include os-table-mod($height-mod: 4, $header-footer-height: $header-footer-height); |
| @include os-textarea-mod($height-mod: 4); |
| } |
| |
| |
| /* reduce actual component height when it has a caption on top (must be after other height definitions) */ |
| /* applies to table, textarea... */ |
| .v-caption-on-top { |
| .os-span-v-single { |
| @include os-textarea-mod ($height-mod: 1, $has-caption: 1); |
| @include os-table-mod ($height-mod: 1, $has-caption: 1, $header-footer-height: $header-footer-height); |
| } |
| .os-span-v-double { |
| @include os-textarea-mod ($height-mod: 2, $has-caption: 1); |
| @include os-table-mod ($height-mod: 2, $has-caption: 1, $header-footer-height: $header-footer-height); |
| } |
| .os-span-v-triple { |
| @include os-textarea-mod ($height-mod: 3, $has-caption: 1); |
| @include os-table-mod ($height-mod: 3, $has-caption: 1, $header-footer-height: $header-footer-height); |
| } |
| .os-span-v-quad { |
| @include os-textarea-mod ($height-mod: 4, $has-caption: 1); |
| @include os-table-mod ($height-mod: 4, $has-caption: 1, $header-footer-height: $header-footer-height); |
| } |
| } |
| |
| .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 { |
| height: $v-unit-size * $os-cash-zoom-factor - $v-layout-margin-top; |
| } |
| .v-caption, .v-captiontext, .v-caption-on-top > .v-caption-l-control > .v-captiontext { |
| font-size: $os-font-size * $font-size-adjustment; |
| line-height: $os-unit-size * $font-size-adjustment - first-number($v-border);// * $os-line-height-factor; |
| } |
| .v-formlayout { |
| .v-caption, .v-captiontext { |
| font-size: $os-font-size * $os-cash-zoom-factor; |
| line-height: $os-unit-size * $os-cash-zoom-factor - first-number($v-border);// * $os-line-height-factor; |
| } |
| } |
| |
| .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: $os-font-size * $font-size-adjustment; |
| } |
| .v-table-cell-content { |
| height: floor($v-unit-size * $font-size-adjustment); |
| } |
| } |
| .os-cash-keypad { |
| @include os-button-cash(); |
| } |
| |
| /// 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); |
| } |
| |
| } |