blob: bb971c01f25c04353862f8621adc89b266a5b2d7 [file] [log] [blame]
////
/// @group layout/dialog
////
@mixin os-dialog {
/* table and grid headers inside form/dialog */
.v-caption-on-top >.v-caption >.v-captiontext {
font-size: $v-font-size * $v-scaling-factor--large;
}
.v-caption-on-top >.v-caption-l-control >.v-captiontext,
.v-slot-os-single-selection > .v-caption-on-top >.v-caption >.v-captiontext,
.v-slot-os-multi-selection > .v-caption-on-top >.v-caption >.v-captiontext {
font-size: $v-font-size;
}
.os-top-area {
display: flex;
align-items: center;
.v-slot-os-single-selection, .v-slot-os-multi-selection {
background-color: $os-light-contrast;
/* height: $v-line-height * $v-scaling-factor--large; relative to os-typeface-view-h2 */
padding: floor($v-unit-size/3); /* same as os-typeface-view-h2 */
/* display: block; */
.os-single-selection, .os-multi-selection {
vertical-align: text-top;
margin: 0px;
}
> .v-caption-on-top {
>.v-caption {
padding-bottom: 0px;
>.v-captiontext {
margin: floor($v-unit-size/3);
margin-bottom: 0px;
}
}
> .v-filterselect {
/* margin: 0px; */
}
}
}
.v-slot-os-single-selection .os-single-selection {
width: auto !important;
> .v-filterselect, >.v-filterselect [class*="input"] {
}
}
}
.os-side-area {
.v-caption-on-top {
background-color: $os-light-contrast;
>.v-caption {
@include os-typeface-view-h2;
font-size: $v-font-size;
line-height: 100%;
}
}
}
/* checkbox workaround */
.v-formlayout-row {
:root & .v-checkbox {
@include os-checkbox();
padding-top: inherit;
> input ~ label:before, > input~ label:after {
margin-top: inherit;
}
> input ~ label:before {
margin-top: inherit;
border-width: 0px;
}
}
.v-gridlayout {
}
}
.v-gridlayout-slot .v-checkbox-os-box {
@include os-checkbox();
padding-top: floor($v-unit-size * 1.2);
> input ~ label:before, > input~ label:after {
margin-top: floor($v-unit-size * 1.2);
}
> input ~ label:before {
margin-top: floor($v-unit-size * 1.2);
}
}
/* Multiselect */
select.v-select-select {
color: inherit !important;
border: $v-border
}
select.v-select-select option:checked {
box-shadow: 0 0 10px 100px $v-focus-color inset;
color: valo-font-color($v-focus-color) !important; //? no effect
}
.os-multi-selection select.v-select-select {
color: inherit !important;
border: $v-border;
margin: floor($v-unit-size/3);
/* width: $os-button-width; */
option:checked{
box-shadow: 0 0 10px 100px $v-focus-color inset;
}
}
.l-controlbase {
overflow: auto;
.v-grid-os-box {
//width: 800px !important; //needs fixed size as of now
}
}
.v-tabsheet-content .v-panel-os-has-focus {
@include os-panel-focus($tab:1);
}
.v-panel-os-has-focus {
@include os-panel-focus($tab:0);
}
.l-control {
//table and grid inside dialog
.v-table {
border-bottom: $v-border;
}
.v-table-header-wrap {
border-top: none;
height: $v-unit-size;
}
/* grid inside dialog */
.v-grid-os-box {
.v-grid-tablewrapper {
border-top: 0px;
}
}
.v-gridlayout-slot {
.v-grid-os-box {
.v-grid-tablewrapper {
border-top: $v-border;
}
}
}
}
.l-control, .toptrimbar, .os-selection-area {
.v-panel {
border-width: first-number($v-border);
}
.v-widget {
&.os-group-panel {
width: 100%;
border-top-width: first-number($v-border) * 2;
}
&.os-group-panel.os-caption-large, .os-caption-large {
.v-caption {
width: $v-unit-size * 6;
}
.v-formlayout-captioncell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
overflow: visible;
position:relative;
z-index: 1;
.v-caption > span {
background-color: $v-app-background-color;
}
}
}
.v-formlayout-contentcell {
padding: 0px;
}
}
}
/* .v-panel { */
/* border-width: 1px; */
/* &.os-group-panel { */
/* //border-width: 3px !important; */
/* width: 100% !important; */
/* } */
/* } */
/* .v-panel.os-group-panel.os-caption-large, .v-widget.os-caption-large { */
/* .v-formlayout-captioncell { */
/* width: $v-unit-size * 6; */
/* white-space: nowrap; */
/* overflow: -moz-hidden-unscrollable; */
/* text-overflow: ellipsis; */
/* .v-caption:hover { */
/* overflow: visible; */
/* } */
/* } */
/* } */
/* .v-panel.os-group-panel .v-formlayout-contentcell { */
/* padding: 0px; */
/* } */
.os-no-padding {
padding: 0px !important;
}
.v-caption {
font-size: $v-font-size;
}
/// os-constraint: data entered in these fields has a range and must be entered
.os-constraint {
.v-textfield { //, &.v-textfield {
@include os-constraint-shade($mode: 1, $zoom: 1);
}
}
.os-domainkey {
.v-textfield { //, &.v-textfield {
@include os-constraint-shade($mode: 2, $zoom: 1);
}
}
.os-constraint.os-domainkey {
.v-textfield { //, &.v-textfield {
@include os-constraint-shade($mode: 12, $zoom: 1);
}
}
.v-caption-on-top >.v-caption,
.v-gridlayout-slot >.v-caption {
padding-bottom: round($v-unit-size*0.05);
padding-top: round($v-unit-size*0.5);
}
.v-caption-os-has-focus {
@include os-caption-focus;
}
/* should accomplish that groups of fields fill the entire width of a formlayout row */
.v-component-group, .l-beansearchfield {
display: flex;
width: $v-default-field-width;
> .v-slot:first-of-type {
width: 100%;
}
.v-datefield, .v-filterselect {
width: 100%; // !important;
> .v-textfield {
width: 100% // !important;
/* border-bottom: $v-border; */
}
}
.v-button {
@include os-button-in-disguise;
/* @include os-button-l-beansearch; */
}
}
.v-formlayout-row {
.v-customcomponent {
.v-label {
min-height: $v-unit-size - first-number($v-border);
line-height: $v-unit-size - first-number($v-border);
border-bottom: $v-border;
}
}
.v-slider {
border-bottom: $v-border;
}
}
.v-formlayout-captioncell,
.v-formlayout-errorcell {
border-bottom: $v-border;
vertical-align: bottom;
}
.v-formlayout-captioncell,
.v-formlayout-errorcell,
.v-formlayout-contentcell {
padding-top: 0px !important; /* overrides $v-layout-spacing-vertical */
>.v-slider {
/* width: $v-default-field-width; slider stands out, for some reason */
}
}
.v-formlayout-contentcell >.v-customcomponent {
width: $v-default-field-width;
/* border-bottom: $v-border; */
.v-filterselect-input, .v-filterselect [class*="input"], .v-textfield {
/* border-bottom-width: 0px; */
}
.v-label {
/* border-bottom: $v-border; */
}
div.v-gridlayout-slot {
display: flex;
align-items: center;
>.v-label > img {
margin-right: $v-layout-margin-right;
}
.v-button {
@include os-button($height: $v-unit-size,
$bgcolor: $os-mid-contrast,
$margin: 0px);
}
}
> div.v-gridlayout {
display: flex;
align-items: center;
>.v-label > img {
margin-right: $v-layout-margin-right;
}
.v-button {
@include os-button($height: $v-unit-size,
$bgcolor: $os-mid-contrast,
$margin: 0px);
}
}
}
.v-textfield {
width: $v-default-field-width;
@include os-textfield;
}
.v-filterselect {
/* border-bottom: $v-border; */
}
.v-filterselect-input, .v-filterselect [class*="input"] {
@include os-textfield;
/* border-bottom: $v-border; */
@include box-shadow(none);
height: $v-unit-size;
}
.v-filterselect.v-widget.os-combobox-with-icon .v-icon, .v-filterselect-os-box .v-icon {
/* language selection icon position (header) */
z-index: 999;
}
.v-textfield-readonly, .v-disabled {
@include os-textfield-readonly;
}
.l-referencesearchbutton {
button, .v-nativebutton {
@include os-icon-font($content: '\f0b0'); /* put before button style, else background transparent */
@include os-button-in-disguise;
}
}
.l-referencesidekickbutton {
button, .v-nativebutton {
@include os-icon-font($content: '\f044'); /* put before button style, else background transparent */
@include os-button-in-disguise;
}
}
.v-datefield-error {
.v-datefield-textfield {
@include os-error-textfield;
&.v-textfield-focus {
color: valo-font-color($os-focus-color);
}
}
.v-datefield-button {
@include os-button-error;
}
}
.v-textfield-error {
@include os-error-textfield;
}
.v-button {
height: $v-unit-size;
}
.v-upload-immediate .v-button {
@include os-button-formlayout;
}
.v-gridlayout-slot > .v-label > img {
@if $os-img-size-override == true {
height: $v-unit-size * 3;
}
}
/* panel margins */
[class*="margin-bottom"] > tbody > [class*="lastrow"] > td {
padding-bottom: 0px;
}
[class*="margin-top"] > tbody > [class*="firstrow"] > td {
padding-top: 0px;
}
}
.v-filterselect-os-single-selection, .os-single-selection {
color: valo-font-color($os-sub-header-bg);
margin: floor($v-unit-size/3);
/* width: $os-button-width; */
}
}
/*.v-panel .os-group-panel {
border-width: 3px !important;
width: 100% !important;
}*/