blob: fc2f93de2731a302a687868cd2d202abc8993f50 [file] [log] [blame]
////
///
/// @group components/button
///
////
/* extends .v-button */
/// Basic button style for all theme variants. Includes valo-button-style from valo source theme.
@mixin os-button ($height:null, $bgcolor:null, $cursor:null, $border:null, $margin:null, $shadow:null) {
@if $height == null { $height: $os-button-height; }
@if $bgcolor == null { $bgcolor: $os-button-color; }
@if $cursor == null { $cursor: null; }
@if $border == null { $border: none; }
@if $margin == null { $margin: floor($v-unit-size/5); }
@if $shadow == null { $shadow: $v-shadow; }
@include valo-button-style (
$unit-size: $height,
$padding: null, // floor($v-unit-size/5),
$font-color: valo-font-color($bgcolor), //$v-app-background-color,
$font-weight: $v-font-weight + 300,
$font-size: null,
$cursor: $cursor,
$background-color: $bgcolor,
$border: $border,
$border-radius: $v-border-radius,
$gradient: null,
$bevel: $v-bevel,
$shadow: $shadow,
$states: (normal disabled)); /* hover focus active disabled ));*/
@if $os-button-uppercase == true {
text-transform: uppercase;
//letter-spacing: floor($v-font-size/10);
}
/* border-color: $os-button-color; */
margin-left: $margin;
&.v-pressed {
background-color: get_color_mix($v-focus-color, #fff, 70) !important;
border-color: get_color_mix($v-focus-color, #fff, 70) !important;
//color: valo-font-color(get_color_mix($v-focus-color, #fff, 70)) !important;
}
&:after {
transition: none;
border: none;
}
&:hover, &:focus, &:active {
background-color: $os-odd-highlight;
border-color: $os-odd-highlight;
color: valo-font-color($os-odd-highlight);
}
&:focus:after {
border-color: transparent;
transition: none;
}
/* &.os-no-caption > .v-nativebutton-caption {
display: none;
}*/
}
/// Button style modifier for header-area (tab-style buttons).
@mixin os-button-perspectivepanel {
.v-button {
@if $os-theme-desig == "cxo" {
/* border-bottom bleeds across edges, thus using this workaround: */
/* @include linear-gradient(to top, $os-mid-contrast 1px, $os-button-as-tab-inactive 1px);*/
/* background: $os-button-as-tab-inactive; */
/* color: valo-font-color($os-button-as-tab-inactive); */
border-radius: $v-border-radius*2 $v-border-radius*2 0px 0px;
@include box-shadow(2px 1px 7px rgba(0,0,0,0.35));
}
@if $os-bordered==true {
/* height: ceil(1.6 * $v-unit-size); */
height: ceil(1.6 * $v-unit-size) - $os-splitter-size;
}
@else {
@include box-shadow($os-shadow-reversed);
}
}
}
/// Button style modifier for toolbars inside views.
@mixin os-button-toolbar() {
@include os-button($bgcolor: $os-mid-contrast,
$height: $v-unit-size );
}
/// Button style modifier for header-area user-menu.
@mixin os-button-usermenu {
@if $os-theme-desig == "cxo" or $os-theme-desig == "osbp"{
border: none;
padding: 0px;
height: $v-unit-size - 2 * first-number($v-border) !important;
width: $v-unit-size - 2 * first-number($v-border) !important;
margin: first-number($v-border);
border-radius: 50% !important;
}
@else {
//hover etc. on icon-font (can't use calculated valo-font-color color from above)
&:after {
transition: none;
}
&:hover, &:focus, &:active {
color: $v-focus-color;
background: transparent;
}
&:hover:after {
transition: none;
}
&:focus:after {
transition: none;
}
&:active:after {
transition: none;
}
}
}
/// Button style modifier for os-data-component
/// @todo find me!
@mixin os-button-data {
margin-right: 12px;
}
/// Button style modifier for Fileupload
/// @todo is it what I think it is?
@mixin os-button-no-margin {
margin: 0px;
}
/*/// Button style modifier for toolbars inside views.
/// @deprecated maybe...
@mixin os-button-trimbar($variant: os) {
background: transparent;
border-radius: 0px;
border-color: $v-app-background-color;
border-width: 0px;
border-bottom-width: 1px;
@if $variant == cx {
height: $v-unit-size + floor($v-unit-size/3);
}
@else {
height: $os-button-height;
}
}
*/
/// Button style modifier for buttons appearing in a table's column filter row. They should look the same as inputs in the same row.
@mixin os-button-filterspanel {
color: valo-font-color($os-textfield-shade);
white-space: normal;
background: $os-textfield-shade;
padding-top: 1px;
border-right-width: 0px;
border-top-width: 0px;
border-left-width: 1px;
border-left-color: $v-app-background-color;
border-bottom: $v-border;
margin-left: 0px;
@include box-shadow(none);
font-weight: normal;
@if $os-button-uppercase == true {
text-transform: none;
}
&:after {
/* for some reason there's a second border on this element */
border-bottom-width: 0px;
}
&:focus, &:hover {
background-color: $os-focus-color;
color: valo-font-color($os-focus-color);
border-bottom-color: $v-focus-color;
border-left: $v-border;
border-left-color: $v-app-background-color;
}
&:focus:after {
border-right-width: 0px;
border-top-width: 0px;
border-left: $v-border;
border-left-color: $v-app-background-color;
}
&:hover:after {
border-left: $v-border;
border-left-color: $v-app-background-color;
}
/*
&:nth-child(1) {
border-left-color: transparent;
}*/
.v-popup-indicator {
display: none;
}
.v-button-caption {
@include os-icon-font($content: '\F078',
$placement: after,
$size: $v-font-size);
&:after {
font-style: normal;
padding-left: $v-font-size *0.5;
}
@if $os-button-uppercase == true {
text-transform: none;
}
}
}
/// Button style modifier for sidebar component.
@mixin os-button-sidebar-table-variant {
border: 0px;
width: 100%;
background-color: $v-app-background-color;
cursor: pointer;
height: $os-button-height;
white-space: inherit;
border-bottom: $v-border;
font-weight: normal;
text-align: left;
.badge {
position: relative;
float: right;
display: inline-block;
line-height: $v-line-height;
color: valo-font-color($v-focus-color);//$v-app-background-color;
//text-shadow: 0 1px 1px rgba(0,0,0,.3);
padding: 0em .4em 0em;
background: $v-focus-color;
}
&:active {
background: rgba(0,0,0,.1);
}
&:focus, &:hover {
outline:0;
border-bottom-color: $v-focus-color;
}
}
/// Button style modifier for buttons in line with textfields
@mixin os-button-formlayout {
height: $v-unit-size;
}
/// Button style modifier.
@mixin os-button-error {
border-color: first-color($v-border) !important;
/*
border-style: dashed;
*/
color: $v-error-indicator-color;
}
/// @deprecated probably...
@mixin os-button-gridlayout {
margin: 4px 0px 4px 0px; //trbl
}
/*
/// Button style modifier for buttons in dialog
@mixin os-button-l-beansearch {
margin-left: 0px;
padding: 0px;
padding-left: make_even($v-unit-size/4);
font-weight: normal;
color: valo-font-color($os-light-contrast);
border-width: 0px;
background-color: $os-light-contrast;
border-left: $v-border;
border-bottom: $v-border;
outline:0;
height: $v-unit-size;
//width: $v-unit-size !important;
cursor: pointer;
img {display:none;}
@include box-shadow(none);
}
*/
/// Button style modifier for buttons inside fields
@mixin os-button-in-disguise {
cursor: pointer;
text-align: center;
width: $v-unit-size;// !important;
height: $v-unit-size;
padding: 0px;
margin: 0px;
background-color: $os-textfield-shade;
color: valo-font-color($os-textfield-shade);
outline: 0;
border-bottom: $v-border !important;
&:hover {
border-bottom-color: $v-focus-color !important;
}
/// where is this set initially anyway?
&:after {
right: 0px !important;
}
@include box-shadow(none);
img {display:none;}
}
/// Sets button dimensions for POS/cash register application.
/// @param {number} $height-mod - [0] Factor 1-4 by which to increase the base height.
/// @param {number} $width-mod - [0] Factor (1-4) by which to increase the base width.
/// @param {string} $prefer - [null] Set "\!important" if you need it.
/// @param {number} $set-font - [0] If this is set to 1, fonts will increase or decrease relative to button-size.
/// Set 'os-font-flex' on buttons you want to have flexible font sizes.
@mixin os-button-set-dimensions($height-mod: 0, $width-mod: 0, $prefer: null, $set-font: 0) {
@if $height-mod !=0 {
height: $cash-button-hase-height;
$calculated-button-height: $cash-button-base-height * $height-mod + ($height-mod - 1) * $v-layout-spacing-vertical;
height: $calculated-button-height #{$prefer};
img.v-icon {
max-height: ($v-unit-size * $os-cash-zoom-factor * $height-mod) - (2 * first-number($v-border)) #{$prefer};
}
@if $set-font == 1 { //.os-font-flex
@if $height-mod == 1 {
font-size: make_even($calculated-button-height / 2);
}
@else {
font-size: $calculated-button-height - $cash-button-base-height;
}
}
}
@if $width-mod != 0 {
$new-width: $cash-button-base-width * $width-mod + (($width-mod - 1) * $v-layout-spacing-horizontal);
width: $new-width #{$prefer};
/* .v-button-wrap { if word-wrap active */
/* width: $v-unit-size * 2 * $os-cash-zoom-factor * $width-mod + (($width-mod - 1) * $v-layout-spacing-horizontal) #{$prefer}; */
/* } */
img.v-icon {
max-width: ($cash-button-base-width * $width-mod) - (2 * first-number($v-border)) #{$prefer};
}
}
}
/* color, size and hover variant (so far only for os-cash)*/
/* extends .v-button */
/// Button style modifier for specific button field compositions as used in POS/cash register application.
/// @param {string|optional} $col-1 [''] - Modifies the button's background color.
/// @param {integer|optional} $height-mod modifies the button's height by a factor defined by the class descriptor this mod is called from.
/// Don't use height-mod and width-mod at the same time.
/// @param {integer|optional} $width-mod modifies the button's height by a factor defined by the class descriptor this mod is called from
/// Don't use height-mod and width-mod at the same time.
/// @todo describe this better.
@mixin os-button-mod($col-1:'', $height-mod: 0, $width-mod: 0, $primary-stylename: 'container') {
/* possibly needs font-size, too */
@if $col-1 != '' {
background: $col-1;
border-color: $col-1;
color: valo-font-color($col-1);
&.v-pressed {
color: valo-font-color(get_color_mix($col-1, #fff, 70)) !important;
background: get_color_mix($col-1, #fff, 70) !important;
border-color: rgba(255,255,255,0.8);
border-left-color: rgba(0,0,0,0.5);
border-top-color: rgba(0,0,0,0.5);
/* get_color_mix($col-1, #fff, 70) !important; */
box-shadow: inset 0px -2px -2px rgba(255,255,255,0.8), /*bottom internal shadow*/
inset 0px 2px 2px rgba(0,0,0,0.5); /*top internal highlight*/
/*bordercolor:
border-left-color:
border-left-color:*/
}
&.os-pushed {
background: mix($col-1, #000, 85%);
color: get_contrast(25, mix($col-1, #000, 85%), $desaturate: false);
/* text-shadow: 2px 2px #ff0000; */
$strength: 12px * $os-cash-zoom-factor;
@include box-shadow(inset 0px 0px $strength rgba(0, 0, 0, 0.5));
/* .v-button-caption { */
/* outline: 1px solid black; */
/* } */
}
&:hover /*, &:focus, &:active */{
background: $os-odd-highlight;
border-color: $os-odd-highlight;
color: valo-font-color($os-odd-highlight);
}
}
@if $primary-stylename == 'container' {
/* set button style globally/for entire container. */
> .v-gridlayout-slot > .v-button ,.v-button {
@include os-button-set-dimensions($height-mod: $height-mod, $width-mod: $width-mod);
}
@if $height-mod != 0 {
/// Button fonts zoom with button height.
&.os-font-flex > .v-gridlayout-slot > .v-button , .os-font-flex .v-button {
@include os-button-set-dimensions($height-mod: $height-mod, $set-font: 1);
}
.os-font-flex.v-button {
@include os-button-set-dimensions($height-mod: $height-mod, $set-font: 1, $prefer: \!important);
}
}
}
@else {
/* set button style for specific button */
.#{$primary-stylename} {
@include os-button-set-dimensions($height-mod: $height-mod, $width-mod: $width-mod, $prefer: \!important);
}
}
margin: 0px;
}
/// Button style modifier for POS/cash register application.
/// This defines the base size/looks for cash register buttons, which can afterwards be refined/modified with os-button-mod.
@mixin os-button-cash () {
/* basic button size that can be modded with os-button-mod mixin */
.v-button {
/* height slightly reduced for alignment with -double -triple etc. buttons */
height: $cash-button-base-height;// - $v-layout-spacing-vertical/2;
&:before {
/* overrides valo-button-vertical-centering */
content: none;
}
/* center and wrap text with this:*/
white-space: normal;
/* word-wrap: break-word; needs v-button-wrap dimensions set */
display: flex;
justify-content: center;
align-items: center;
text-transform: none;
&.v-disabled {
pointer-events: none;
}
.v-button-caption {
/* add a bit of spacing between lines */
line-height: $v-font-size * $os-cash-zoom-factor;
}
@if $os-cash-no-shadow == 1 {
@include box-shadow(none);
}
min-width: $cash-button-base-width;
padding: make_even(($v-unit-size * 2 * $os-cash-zoom-factor) * 0.07) * $os-cash-zoom-factor;
$font: $v-font-size * $os-cash-zoom-factor;
/* @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;}
font-size: $font;
}
/* colors */
.v-gridlayout-slot .v-button.os-color-1, .v-slot-l-control .v-button.os-color-1, .os-color-1 .v-button {
@include os-button-mod($col-1: $os-color-1);
}
.v-gridlayout-slot .v-button.os-color-2, .v-slot-l-control .v-button.os-color-2, .os-color-2 .v-button {
@include os-button-mod($col-1: $os-color-2);
}
.v-gridlayout-slot .v-button.os-color-3, .v-slot-l-control .v-button.os-color-3, .os-color-3 .v-button {
@include os-button-mod($col-1: $os-color-3);
}
.v-gridlayout-slot .v-button.os-color-4, .v-slot-l-control .v-button.os-color-4, .os-color-4 .v-button {
@include os-button-mod($col-1: $os-color-4);
}
.v-gridlayout-slot .v-button.os-color-5, .v-slot-l-control .v-button.os-color-5, .os-color-5 .v-button {
@include os-button-mod($col-1: $os-color-5);
}
.v-gridlayout-slot .v-button.os-color-6, .v-slot-l-control .v-button.os-color-6, .os-color-6 .v-button {
@include os-button-mod($col-1: $os-color-6);
}
.v-gridlayout-slot .v-button.os-color-7, .v-slot-l-control .v-button.os-color-7, .os-color-7 .v-button {
@include os-button-mod($col-1: $os-color-7);
}
.v-gridlayout-slot .v-button.os-color-8, .v-slot-l-control .v-button.os-color-8, .os-color-8 .v-button {
@include os-button-mod($col-1: $os-color-8);
}
.v-gridlayout-slot .v-button.os-color-9, .v-slot-l-control .v-button.os-color-9, .os-color-9 .v-button {
@include os-button-mod($col-1: $os-color-9);
}
.v-gridlayout-slot .v-button.os-color-10, .v-slot-l-control .v-button.os-color-10, .os-color-10 .v-button {
@include os-button-mod($col-1: $os-color-10);
}
.v-gridlayout-slot .v-button.os-color-11, .v-slot-l-control .v-button.os-color-11, .os-color-11 .v-button {
@include os-button-mod($col-1: $os-color-11);
}
.v-gridlayout-slot .v-button.os-color-12, .v-slot-l-control .v-button.os-color-12, .os-color-12 .v-button {
@include os-button-mod($col-1: $os-color-12);
}
.v-gridlayout-slot .v-button.os-color-13, .v-slot-l-control .v-button.os-color-13, .os-color-13 .v-button {
@include os-button-mod($col-1: $os-color-13);
}
.v-gridlayout-slot .v-button.os-color-14, .v-slot-l-control .v-button.os-color-14, .os-color-14 .v-button {
@include os-button-mod($col-1: $os-color-14);
}
.os-button-with-image {
.v-button {
@include os-button-mod($col-1: #cc5353);
}
}
.os-button-no-text {
.v-button {
}
}
}