// Common styles for components // About 90KB of CSS output @import "valo-menu"; @mixin valo-common-stylenames { $v-scaling-factor--small: 0.8 !default; $v-scaling-factor--large: 1.2 !default; $v-unit-size--small: ceil($v-unit-size * $v-scaling-factor--small); $v-unit-size--large: ceil($v-unit-size * $v-scaling-factor--large); $v-font-size--small: ceil($v-font-size * $v-scaling-factor--small); $v-font-size--large: ceil($v-font-size * $v-scaling-factor--large); $v-friendly-color: #2c9720; .v-button-primary { @include valo-button-style($background-color: $v-selection-color); $padding-width: round($v-unit-size/2); padding: 0 $padding-width; font-weight: bold; $min-width: round($v-unit-size * 2.2); min-width: $min-width; // IE8 + border-box + min-width == fail .v-ie8 & { min-width: $min-width - $padding-width*2; } } .v-button-friendly { @include valo-button-style($background-color: $v-friendly-color); } .v-button-danger { @include valo-button-style($background-color: $v-error-indicator-color); } .v-button-borderless { @include valo-button-borderless-style; } .v-button-borderless-colored { @include valo-button-borderless-style($font-color: $v-selection-color); } .v-button-quiet { @include valo-button-quiet-style; } .v-button-link { @include valo-button-borderless-style; @include valo-link-style; } .v-button-small { @include valo-button-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--small, $font-weight: null); } .v-button-large { @include valo-button-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--large, $font-weight: null); } .v-button-icon-align-right { @include valo-button-icon-align-right-style; } .v-button-icon-align-top { @include valo-button-icon-align-top-style; } .v-button-icon-only { width: $v-unit-size; padding: 0; &.v-button-small { width: $v-unit-size--small; } &.v-button-large { width: $v-unit-size--large; } .v-button-caption { display: none; } } .v-link-small { font-size: $v-font-size--small; } .v-link-large { font-size: $v-font-size--large; } .v-tabsheet-equal-width-tabs { @include valo-tabsheet-equal-width-tabs-style($flex: false); } .v-tabsheet-framed { @include valo-tabsheet-framed-style; } .v-tabsheet-centered-tabs { @include valo-tabsheet-align-tabs-style($align: center); } .v-tabsheet-right-aligned-tabs { @include valo-tabsheet-align-tabs-style($align: right); } .v-tabsheet-padded-tabbar { @include valo-tabsheet-padded-tabbar-style; } .v-tabsheet-icons-on-top { @include valo-tabsheet-icons-on-top-style; } .v-tabsheet-compact-tabbar { > .v-tabsheet-tabcontainer-compact-tabbar .v-caption { line-height: 1.8; } } .v-tabsheet-only-selected-closable { @include valo-tabsheet-only-selected-closable-style; } .v-panel-borderless { @include valo-panel-borderless-style; } .v-formlayout.light { @include valo-formlayout-light-style; } .v-textfield-borderless, .v-textarea-borderless, .v-datefield-borderless .v-datefield-textfield, .v-filterselect-borderless .v-filterselect-input { @include valo-textfield-borderless-style; } .v-datefield-borderless .v-datefield-button, .v-filterselect-borderless .v-filterselect-button { border: none; } .v-textfield-small { @include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null); font-size: $v-font-size--small; } .v-textfield-large { @include valo-textfield-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null); font-size: $v-font-size--large; } @include valo-textfield-inline-icon($stylenames: inline-icon); @include valo-textfield-inline-icon($stylenames: inline-icon small, $unit-size: $v-unit-size--small, $font-size: $v-font-size--small); @include valo-textfield-inline-icon($stylenames: inline-icon large, $unit-size: $v-unit-size--large, $font-size: $v-font-size--large); .v-textarea-small { @include valo-textarea-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null); font-size: $v-font-size--small; } .v-textarea-large { @include valo-textarea-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null); font-size: $v-font-size--large; } .v-textfield-align-right, .v-textarea-align-right, .v-datefield-align-right input, .v-filterselect-align-right input { text-align: right; } .v-textfield-align-center, .v-textarea-align-center, .v-datefield-align-center input, .v-filterselect-align-center input { text-align: center; } .v-filterselect-small { @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null); font-size: $v-font-size--small; } .v-filterselect-large { @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null); font-size: $v-font-size--large; } .v-datefield-small { @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null); font-size: $v-font-size--small; } .v-datefield-large { @include valo-datefield-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $border: null, $background-color: null); font-size: $v-font-size--large; } .v-checkbox-small { @include valo-checkbox-style($unit-size: $v-unit-size--small); font-size: $v-font-size--small; } .v-checkbox-large { @include valo-checkbox-style($unit-size: $v-unit-size--large); font-size: $v-font-size--large; } .v-select-optiongroup-small { @include valo-optiongroup-style($unit-size: $v-unit-size--small); font-size: $v-font-size--small; } .v-select-optiongroup-large { @include valo-optiongroup-style($unit-size: $v-unit-size--large); font-size: $v-font-size--large; } .v-label-spinner { @include valo-spinner; } .v-panel-well { @include valo-panel-well-style; } .v-panel-borderless { @include valo-panel-borderless-style; } .v-panel-scroll-divider { @include valo-panel-scroll-divider-style; } .v-csslayout-well, .v-verticallayout-well, .v-horizontallayout-well { @include valo-panel-well-style; @include valo-panel-adjust-content-margins; } .v-csslayout-card, .v-verticallayout-card, .v-horizontallayout-card { @include valo-panel-style; @include valo-panel-adjust-content-margins; } .v-splitpanel-horizontal.large, .v-splitpanel-vertical.large { @include valo-splitpanel-style($splitter-size: round($v-unit-size/3), $splitter-handle-visible: true); } .v-menubar-small { @include valo-menubar-small-style($unit-size: $v-unit-size--small); font-size: $v-font-size--small; } .v-menubar-borderless { @include valo-menubar-borderless-style; } @include valo-component-group; .wrapping { @include valo-horizontallayout--wrapping; } .v-Notification.bar { @include valo-notification-bar-style; } .v-Notification.small { @include valo-notification-small-style; } .v-Notification.closable { @include valo-notification-closable-style; &.error, &.system { &:after { color: #fff; border-color: #fff; border-color: rgba(255,255,255,.3); } &:active:after { background-color: #fff; color: #000; } } &.tray:after { top: round($v-unit-size/2.3); margin-top: 0; } } .v-Notification.success, .v-Notification.failure { background: #fff; color: #555; border: 2px solid $v-friendly-color; h1 { color: $v-friendly-color; font-weight: $v-font-weight + 100; &:before { font-family: FontAwesome; content: "\f00c"; margin-right: .5em; } } &.bar { margin: -2px !important; } } .v-Notification.failure { border-color: $v-error-indicator-color; h1 { color: $v-error-indicator-color; &:before { content: "\f05e"; } } } .v-label-success, .v-label-failure { background: #fff; color: #555; border: 2px solid $v-friendly-color; border-radius: $v-border-radius; padding: round($v-unit-size/5) round($v-unit-size/2) round($v-unit-size/5) round($v-unit-size); font-weight: $v-font-weight + 100; font-size: round($v-font-size * 0.95); &:before { font-family: FontAwesome; content: "\f00c"; margin-right: .5em; margin-left: round($v-unit-size/-2); color: $v-friendly-color; } } .v-label-failure { border-color: $v-error-indicator-color; &:before { content: "\f05e"; color: $v-error-indicator-color; } } .v-panel-caption.v-horizontallayout { height: auto !important; line-height: 0; .v-slot { vertical-align: middle; } .v-label { line-height: $v-unit-size; } } .v-select-optiongroup-horizontal { @include valo-optiongroup-horizontal; } .v-table-no-stripes { @include valo-table-no-stripes-style; } .v-table-no-vertical-lines { @include valo-table-no-vertical-lines-style; } .v-table-no-horizontal-lines { @include valo-table-no-horizontal-lines-style; } .v-table-no-header { @include valo-table-no-header-style; } .v-table-borderless { @include valo-table-borderless-style; } .v-table-compact, .v-table-small { @include valo-table-spacing-style($row-height: round($v-table-row-height * $v-scaling-factor--small), $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2)); } .v-table-small { font-size: $v-font-size--small; } .v-accordion-borderless { border: none; border-radius: 0; @include box-shadow(none); > .v-accordion-item { border-radius: 0; } } .v-slider-no-indicator { @include valo-slider-no-indicator; } @include valo-menu; }