Moved notification and valo-menu styles to the components folder as well, and added them to the $v-included-components list. Additional styles are now also controlled with a list variable, which lists all components whose additional styles should be included in the build. Change-Id: Ifb8d49d71622decf8fa0d4875985fcafd908a1f8tags/7.3.0.rc1
@@ -44,10 +44,6 @@ | |||
@import "components/all"; | |||
// Import common additional style names for components (optional) | |||
@import "optional/common-stylenames"; | |||
// Include global styles directly, without a theme name prefix (this is done only once) | |||
@include valo-global; | |||
@@ -56,12 +52,4 @@ | |||
@mixin valo { | |||
@include valo-common; | |||
@include valo-components; | |||
@if v-is-included(notification) { | |||
@include valo-notification; | |||
} | |||
@if $valo-include-common-stylenames { | |||
@include valo-common-stylenames; | |||
} | |||
} |
@@ -1,4 +1,4 @@ | |||
@mixin valo-accordion ($primary-stylename: v-accordion) { | |||
@mixin valo-accordion ($primary-stylename: v-accordion, $include-additional-styles: contains($v-included-additional-styles, accordion)) { | |||
.#{$primary-stylename} { | |||
@include valo-accordion-style; | |||
} | |||
@@ -14,6 +14,20 @@ | |||
.#{$primary-stylename}-item-content { | |||
@include valo-accordion-item-content-style; | |||
} | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}-borderless { | |||
border: none; | |||
border-radius: 0; | |||
@include box-shadow(none); | |||
> .#{$primary-stylename}-item { | |||
border-radius: 0; | |||
} | |||
} | |||
} | |||
} | |||
@@ -20,6 +20,7 @@ | |||
@import "menubar"; | |||
@import "nativebutton"; | |||
@import "nativeselect"; | |||
@import "notification"; | |||
@import "optiongroup"; | |||
@import "orderedlayout"; | |||
@import "panel"; | |||
@@ -38,6 +39,7 @@ | |||
@import "upload"; | |||
@import "widget"; | |||
@import "window"; | |||
@import "valo-menu"; | |||
@mixin valo-components { | |||
@@ -207,4 +209,12 @@ | |||
@include valo-upload; | |||
} | |||
@if v-is-included(notification) { | |||
@include valo-notification; | |||
} | |||
@if v-is-included(valo-menu) { | |||
@include valo-menu; | |||
} | |||
} |
@@ -1,8 +1,83 @@ | |||
@mixin valo-button ($primary-stylename: v-button) { | |||
@mixin valo-button ($primary-stylename: v-button, $include-additional-styles: contains($v-included-additional-styles, button)) { | |||
.#{$primary-stylename} { | |||
@include valo-button-static-style; | |||
@include valo-button-style; | |||
} | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}-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); | |||
} | |||
} | |||
.#{$primary-stylename}-friendly { | |||
@include valo-button-style($background-color: $v-friendly-color); | |||
} | |||
.#{$primary-stylename}-danger { | |||
@include valo-button-style($background-color: $v-error-indicator-color); | |||
} | |||
.#{$primary-stylename}-borderless { | |||
@include valo-button-borderless-style; | |||
} | |||
.#{$primary-stylename}-borderless-colored { | |||
@include valo-button-borderless-style($font-color: $v-selection-color); | |||
} | |||
.#{$primary-stylename}-quiet { | |||
@include valo-button-quiet-style; | |||
} | |||
.#{$primary-stylename}-link { | |||
@include valo-button-borderless-style; | |||
@include valo-link-style; | |||
} | |||
.#{$primary-stylename}-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); | |||
} | |||
.#{$primary-stylename}-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); | |||
} | |||
.#{$primary-stylename}-icon-align-right { | |||
@include valo-button-icon-align-right-style; | |||
} | |||
.#{$primary-stylename}-icon-align-top { | |||
@include valo-button-icon-align-top-style; | |||
} | |||
.#{$primary-stylename}-icon-only { | |||
width: $v-unit-size; | |||
padding: 0; | |||
&.#{$primary-stylename}-small { | |||
width: $v-unit-size--small; | |||
} | |||
&.#{$primary-stylename}-large { | |||
width: $v-unit-size--large; | |||
} | |||
.#{$primary-stylename}-caption { | |||
display: none; | |||
} | |||
} | |||
} | |||
} | |||
@@ -1,9 +1,22 @@ | |||
@mixin valo-checkbox ($primary-stylename: v-checkbox) { | |||
@mixin valo-checkbox ($primary-stylename: v-checkbox, $include-additional-styles: contains($v-included-additional-styles, checkbox)) { | |||
.#{$primary-stylename} { | |||
@include valo-checkbox-style; | |||
} | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}-small { | |||
@include valo-checkbox-style($unit-size: $v-unit-size--small); | |||
font-size: $v-font-size--small; | |||
} | |||
.#{$primary-stylename}-large { | |||
@include valo-checkbox-style($unit-size: $v-unit-size--large); | |||
font-size: $v-font-size--large; | |||
} | |||
} | |||
} | |||
@@ -1,4 +1,4 @@ | |||
@mixin valo-combobox ($primary-stylename: v-filterselect) { | |||
@mixin valo-combobox ($primary-stylename: v-filterselect, $include-additional-styles: contains($v-included-additional-styles, combobox)) { | |||
.#{$primary-stylename} { | |||
position: relative; | |||
@@ -59,6 +59,35 @@ | |||
} | |||
} | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}-borderless { | |||
.#{$primary-stylename}-input { | |||
@include valo-textfield-borderless-style; | |||
} | |||
.#{$primary-stylename}-button { | |||
border: none; | |||
} | |||
} | |||
.#{$primary-stylename}-align-right input { | |||
text-align: right; | |||
} | |||
.#{$primary-stylename}-align-center input { | |||
text-align: center; | |||
} | |||
.#{$primary-stylename}-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; | |||
} | |||
.#{$primary-stylename}-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; | |||
} | |||
} | |||
} | |||
@@ -1,63 +1,74 @@ | |||
@mixin valo-csslayout ($primary-stylename: v-csslayout){ | |||
@mixin valo-csslayout ($primary-stylename: v-csslayout, $include-additional-styles: contains($v-included-additional-styles, csslayout)){ | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}-well { | |||
@include valo-panel-well-style; | |||
@include valo-panel-adjust-content-margins; | |||
} | |||
} | |||
.#{$primary-stylename}-card { | |||
@include valo-panel-style; | |||
@include valo-panel-adjust-content-margins; | |||
} | |||
.#{$primary-stylename}-v-component-group { | |||
@include valo-component-group($primary-stylename); | |||
} | |||
} | |||
} | |||
@mixin valo-component-group ($primary-stylename: v-csslayout) { | |||
.#{$primary-stylename}-v-component-group { | |||
white-space: nowrap; | |||
position: relative; | |||
@if $v-border-radius > 0 { | |||
.v-widget ~ .v-widget:not(:last-child) { | |||
border-radius: 0; | |||
} | |||
@mixin valo-component-group { | |||
white-space: nowrap; | |||
position: relative; | |||
.v-widget:last-child { | |||
border-top-left-radius: 0; | |||
border-bottom-left-radius: 0; | |||
} | |||
@if $v-border-radius > 0 { | |||
.v-widget ~ .v-widget:not(:last-child) { | |||
border-radius: 0; | |||
} | |||
.v-widget:first-child, | |||
.v-caption:first-child + .v-widget { | |||
border-top-right-radius: 0; | |||
border-bottom-right-radius: 0; | |||
} | |||
.v-widget:last-child { | |||
border-top-left-radius: 0; | |||
border-bottom-left-radius: 0; | |||
} | |||
.v-widget ~ .v-widget.first.first { | |||
border-radius: $v-border-radius 0 0 $v-border-radius; | |||
} | |||
.v-widget:first-child, | |||
.v-caption:first-child + .v-widget { | |||
border-top-right-radius: 0; | |||
border-bottom-right-radius: 0; | |||
} | |||
.v-widget ~ .v-widget.last.last { | |||
border-radius: 0 $v-border-radius $v-border-radius 0; | |||
} | |||
.v-widget ~ .v-widget.first.first { | |||
border-radius: $v-border-radius 0 0 $v-border-radius; | |||
} | |||
// Assume most components have borders. | |||
// This is just a best-guess, will need fine-tuning if border-widths vary from widget-to-widget | |||
.v-widget { | |||
vertical-align: middle; | |||
.v-widget ~ .v-widget.last.last { | |||
border-radius: 0 $v-border-radius $v-border-radius 0; | |||
} | |||
} | |||
$v-border-width: first-number($v-border); | |||
// Assume most components have borders. | |||
// This is just a best-guess, will need fine-tuning if border-widths vary from widget-to-widget | |||
.v-widget { | |||
vertical-align: middle; | |||
@if $v-border-width > 0 { | |||
margin-left: -$v-border-width; | |||
} @else { | |||
margin-left: 1px; | |||
} | |||
$v-border-width: first-number($v-border); | |||
&:first-child { | |||
margin-left: 0; | |||
} | |||
@if $v-border-width > 0 { | |||
margin-left: -$v-border-width; | |||
} @else { | |||
margin-left: 1px; | |||
} | |||
// Focused component should be on top | |||
&:focus, | |||
&[class*="focus"], | |||
[class*="focus"] { | |||
position: relative; | |||
z-index: 5; | |||
} | |||
&:first-child { | |||
margin-left: 0; | |||
} | |||
// Focused component should be on top | |||
&:focus, | |||
&[class*="focus"], | |||
[class*="focus"] { | |||
position: relative; | |||
z-index: 5; | |||
} | |||
} | |||
} |
@@ -1,4 +1,4 @@ | |||
@mixin valo-datefield ($primary-stylename: v-datefield) { | |||
@mixin valo-datefield ($primary-stylename: v-datefield, $include-additional-styles: contains($v-included-additional-styles, datefield)) { | |||
.#{$primary-stylename} { | |||
position: relative; | |||
@@ -34,12 +34,42 @@ | |||
width: round($v-font-size * 6.5); | |||
} | |||
.v-datefield-popup { | |||
.#{$primary-stylename}-popup { | |||
@include valo-datefield-popup-style; | |||
} | |||
@include valo-datefield-calendarpanel-style; | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}-borderless { | |||
.#{$primary-stylename}-textfield { | |||
@include valo-textfield-borderless-style; | |||
} | |||
.#{$primary-stylename}-button { | |||
border: none; | |||
} | |||
} | |||
.#{$primary-stylename}-align-right input { | |||
text-align: right; | |||
} | |||
.#{$primary-stylename}-align-center input { | |||
text-align: center; | |||
} | |||
.#{$primary-stylename}-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; | |||
} | |||
.#{$primary-stylename}-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; | |||
} | |||
} | |||
} | |||
@@ -319,7 +349,7 @@ | |||
@include valo-datefield-calendarpanel-month-style; | |||
} | |||
.v-datefield-year td.v-datefield-calendarpanel-month { | |||
.#{$primary-stylename}-year td.#{$primary-stylename}-month { | |||
width: round($v-unit-size * 2); | |||
} | |||
@@ -350,12 +380,12 @@ | |||
background: $v-app-background-color; | |||
} | |||
td.v-datefield-calendarpanel-time { | |||
td.#{$primary-stylename}-time { | |||
width: 100%; | |||
font-size: ceil($v-font-size * 0.86); | |||
.v-label { | |||
display: inline-block; | |||
display: inline; | |||
margin: 0 0.1em; | |||
font-weight: 400; | |||
} |
@@ -1,4 +1,4 @@ | |||
@mixin valo-formlayout ($primary-stylename: v-formlayout) { | |||
@mixin valo-formlayout ($primary-stylename: v-formlayout, $include-additional-styles: contains($v-included-additional-styles, formlayout)) { | |||
@include valo-formlayout-spacing; | |||
@include valo-formlayout-margins; | |||
@@ -51,6 +51,11 @@ | |||
} | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}.light { | |||
@include valo-formlayout-light-style($primary-stylename); | |||
} | |||
} | |||
} | |||
@@ -18,7 +18,7 @@ $v-letter-spacing--h3: 0 !default; | |||
$v-letter-spacing--h4: 0 !default; | |||
@mixin valo-label ($primary-stylename: v-label) { | |||
@mixin valo-label ($primary-stylename: v-label, $include-additional-styles: contains($v-included-additional-styles, label)) { | |||
.#{$primary-stylename}-undef-w { | |||
white-space: nowrap; | |||
@@ -101,31 +101,67 @@ $v-letter-spacing--h4: 0 !default; | |||
} | |||
} | |||
.#{$primary-stylename}-large { | |||
font-size: $v-font-size--large; | |||
} | |||
.#{$primary-stylename}-small { | |||
font-size: $v-font-size--small; | |||
} | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}-bold { | |||
font-weight: $v-font-weight + 200; | |||
} | |||
.#{$primary-stylename}-large { | |||
font-size: $v-font-size--large; | |||
} | |||
.#{$primary-stylename}-light { | |||
font-weight: $v-font-weight - 100; | |||
@if $v-font-weight < 400 { | |||
color: valo-font-color($v-app-background-color, .5); | |||
.#{$primary-stylename}-small { | |||
font-size: $v-font-size--small; | |||
} | |||
} | |||
.#{$primary-stylename}-align-right { | |||
text-align: right; | |||
} | |||
.#{$primary-stylename}-bold { | |||
font-weight: $v-font-weight + 200; | |||
} | |||
.#{$primary-stylename}-light { | |||
font-weight: $v-font-weight - 100; | |||
@if $v-font-weight < 400 { | |||
color: valo-font-color($v-app-background-color, .5); | |||
} | |||
} | |||
.#{$primary-stylename}-align-center { | |||
text-align: center; | |||
.#{$primary-stylename}-align-right { | |||
text-align: right; | |||
} | |||
.#{$primary-stylename}-align-center { | |||
text-align: center; | |||
} | |||
.#{$primary-stylename}-spinner { | |||
@include valo-spinner; | |||
} | |||
.#{$primary-stylename}-success, | |||
.#{$primary-stylename}-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; | |||
} | |||
} | |||
.#{$primary-stylename}-failure { | |||
border-color: $v-error-indicator-color; | |||
&:before { | |||
content: "\f05e"; | |||
color: $v-error-indicator-color; | |||
} | |||
} | |||
} | |||
} |
@@ -3,7 +3,7 @@ $v-link-text-decoration: underline !default; | |||
$v-link-cursor: pointer !default; | |||
@mixin valo-link ($primary-stylename: v-link) { | |||
@mixin valo-link ($primary-stylename: v-link, $include-additional-styles: contains($v-included-additional-styles, link)) { | |||
.#{$primary-stylename} { | |||
@include valo-link-style; | |||
@@ -20,6 +20,16 @@ $v-link-cursor: pointer !default; | |||
cursor: inherit; | |||
} | |||
} | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}-small { | |||
font-size: $v-font-size--small; | |||
} | |||
.#{$primary-stylename}-large { | |||
font-size: $v-font-size--large; | |||
} | |||
} | |||
} | |||
@@ -1,4 +1,4 @@ | |||
@mixin valo-menubar ($primary-stylename: v-menubar) { | |||
@mixin valo-menubar ($primary-stylename: v-menubar, $include-additional-styles: contains($v-included-additional-styles, menubar)) { | |||
.#{$primary-stylename} { | |||
@include valo-button-static-style($states: normal, $vertical-centering: false); | |||
@@ -70,6 +70,18 @@ | |||
} | |||
} | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}-small { | |||
@include valo-menubar-small-style($unit-size: $v-unit-size--small); | |||
font-size: $v-font-size--small; | |||
} | |||
.#{$primary-stylename}-borderless { | |||
@include valo-menubar-borderless-style; | |||
} | |||
} | |||
} | |||
@@ -1,11 +1,11 @@ | |||
$v-notification-title-color: $v-focus-color !default; | |||
@mixin valo-notification ($primary-stylename: v-Notification) { | |||
@mixin valo-notification ($primary-stylename: v-Notification, $include-additional-styles: contains($v-included-additional-styles, notification)) { | |||
// Positional offsets | |||
.v-Notification { | |||
.#{$primary-stylename} { | |||
&.v-position-top { | |||
top: $v-layout-spacing-vertical; | |||
} | |||
@@ -123,6 +123,78 @@ $v-notification-title-color: $v-focus-color !default; | |||
.#{$primary-stylename}.error { | |||
@include valo-notification-error-style; | |||
} | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}.dark { | |||
@include valo-notification-dark-style; | |||
} | |||
.#{$primary-stylename}.bar { | |||
@include valo-notification-bar-style; | |||
} | |||
.#{$primary-stylename}.small { | |||
@include valo-notification-small-style; | |||
} | |||
.#{$primary-stylename}.closable { | |||
@include valo-notification-closable-style; | |||
&.dark, | |||
&.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; | |||
} | |||
} | |||
.#{$primary-stylename}.success, | |||
.#{$primary-stylename}.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; | |||
} | |||
} | |||
.#{$primary-stylename}.failure { | |||
border-color: $v-error-indicator-color; | |||
h1 { | |||
color: $v-error-indicator-color; | |||
&:before { | |||
content: "\f05e"; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
@@ -201,11 +273,11 @@ $v-notification-title-color: $v-focus-color !default; | |||
top: 0; | |||
@if $v-animations-enabled { | |||
&.v-Notification-animate-in { | |||
&[class*="animate-in"] { | |||
@include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-down 200ms); | |||
} | |||
&.v-Notification-animate-out { | |||
&[class*="animate-out"] { | |||
@include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-up 200ms); | |||
} | |||
} | |||
@@ -215,18 +287,18 @@ $v-notification-title-color: $v-focus-color !default; | |||
bottom: 0; | |||
@if $v-animations-enabled { | |||
&.v-Notification-animate-in { | |||
&[class*="animate-in"] { | |||
@include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-up 200ms); | |||
} | |||
&.v-Notification-animate-out { | |||
&[class*="animate-out"] { | |||
@include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-down 200ms); | |||
} | |||
} | |||
} | |||
} | |||
@mixin valo-notification-system-style { | |||
@mixin valo-notification-dark-style { | |||
background-color: #444; | |||
background-color: rgba(#444, .9); | |||
font-weight: $v-font-weight + 100; | |||
@@ -240,6 +312,10 @@ $v-notification-title-color: $v-focus-color !default; | |||
p { | |||
color: #e6e6e6; | |||
} | |||
} | |||
@mixin valo-notification-system-style { | |||
@include valo-notification-dark-style; | |||
// No need to underline the "click here" text, let's imply that the whole banner is clickable | |||
u { |
@@ -1,13 +1,30 @@ | |||
@mixin valo-optiongroup ($primary-stylename: v-optiongroup) { | |||
@mixin valo-optiongroup ($primary-stylename: v-select-optiongroup, $include-additional-styles: contains($v-included-additional-styles, optiongroup)) { | |||
.v-radiobutton { | |||
@include valo-radiobutton-style; | |||
} | |||
.v-select-optiongroup { | |||
.#{$primary-stylename} { | |||
@include valo-optiongroup-style; | |||
} | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}-small { | |||
@include valo-optiongroup-style($unit-size: $v-unit-size--small); | |||
font-size: $v-font-size--small; | |||
} | |||
.#{$primary-stylename}-large { | |||
@include valo-optiongroup-style($unit-size: $v-unit-size--large); | |||
font-size: $v-font-size--large; | |||
} | |||
.#{$primary-stylename}-horizontal { | |||
@include valo-optiongroup-horizontal; | |||
} | |||
} | |||
} | |||
@@ -140,7 +140,7 @@ | |||
@mixin valo-orderedlayout { | |||
@mixin valo-orderedlayout ($include-additional-styles: contains($v-included-additional-styles, orderedlayout)) { | |||
.v-margin-top { | |||
padding-top: $v-layout-margin-top; | |||
@@ -163,10 +163,28 @@ | |||
height: $v-layout-spacing-vertical; | |||
} | |||
@if $include-additional-styles { | |||
.v-verticallayout-well, | |||
.v-horizontallayout-well { | |||
@include valo-panel-well-style; | |||
@include valo-panel-adjust-content-margins; | |||
} | |||
.v-verticallayout-card, | |||
.v-horizontallayout-card { | |||
@include valo-panel-style; | |||
@include valo-panel-adjust-content-margins; | |||
} | |||
.v-horizontallayout-wrapping { | |||
@include valo-horizontallayout-wrapping-style; | |||
} | |||
} | |||
} | |||
@mixin valo-horizontallayout--wrapping { | |||
@mixin valo-horizontallayout-wrapping-style { | |||
white-space: normal !important; | |||
& > .v-spacing + .v-slot, |
@@ -1,7 +1,7 @@ | |||
$v-panel-background-color: scale-color(lighten($v-app-background-color, 5%), $saturation: -5%) !default; | |||
$v-panel-border: $v-border !default; | |||
@mixin valo-panel ($primary-stylename: v-panel) { | |||
@mixin valo-panel ($primary-stylename: v-panel, $include-additional-styles: contains($v-included-additional-styles, panel)) { | |||
.#{$primary-stylename} { | |||
@include valo-panel-style; | |||
@@ -19,6 +19,34 @@ $v-panel-border: $v-border !default; | |||
@include valo-panel-adjust-content-margins; | |||
} | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}-borderless { | |||
@include valo-panel-borderless-style; | |||
} | |||
.#{$primary-stylename}-well { | |||
@include valo-panel-well-style; | |||
} | |||
.#{$primary-stylename}-scroll-divider { | |||
@include valo-panel-scroll-divider-style; | |||
} | |||
.#{$primary-stylename}-caption.v-horizontallayout { | |||
height: auto !important; | |||
line-height: 0; | |||
.v-slot { | |||
vertical-align: middle; | |||
} | |||
.v-label { | |||
line-height: $v-unit-size; | |||
} | |||
} | |||
} | |||
} | |||
@@ -68,7 +96,7 @@ $v-panel-border: $v-border !default; | |||
border-radius: $v-border-radius; | |||
border: valo-border(); | |||
> div > .v-panel-caption { | |||
> div > [class*="-caption"] { | |||
background: transparent; | |||
@include box-shadow(none); | |||
} | |||
@@ -83,7 +111,7 @@ $v-panel-border: $v-border !default; | |||
border-radius: 0; | |||
@include box-shadow(none); | |||
> div > .v-panel-caption { | |||
> div > [class*="-caption"] { | |||
background: transparent; | |||
@include box-shadow(none); | |||
color: inherit; | |||
@@ -96,7 +124,7 @@ $v-panel-border: $v-border !default; | |||
@mixin valo-panel-scroll-divider-style ($border-width: max(1px, first-number($v-panel-border))) { | |||
> .v-panel-captionwrap { | |||
> [class*="-captionwrap"] { | |||
position: relative; | |||
z-index: 2; | |||
@@ -111,7 +139,7 @@ $v-panel-border: $v-border !default; | |||
} | |||
} | |||
> .v-panel-content { | |||
> [class*="-content"] { | |||
&:before { | |||
content: ""; | |||
position: absolute; |
@@ -8,7 +8,7 @@ $_valo-slider-base-margin-vertical: round(($v-unit-size - $v-slider-track-size)/ | |||
$_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2); | |||
@mixin valo-slider ($primary-stylename: v-slider) { | |||
@mixin valo-slider ($primary-stylename: v-slider, $include-additional-styles: contains($v-included-additional-styles, slider)) { | |||
// Round to an even number | |||
$v-slider-track-size: $v-slider-track-size + $v-slider-track-size%2; | |||
@@ -174,6 +174,13 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2); | |||
} | |||
} | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}-no-indicator { | |||
@include valo-slider-no-indicator; | |||
} | |||
} | |||
} | |||
@@ -1,4 +1,4 @@ | |||
@mixin valo-splitpanel($primary-stylename : v-splitpanel) { | |||
@mixin valo-splitpanel($primary-stylename : v-splitpanel, $include-additional-styles: contains($v-included-additional-styles, splitpanel)) { | |||
.#{$primary-stylename}-horizontal { | |||
@include valo-splitpanel-style($primary-stylename: $primary-stylename, $orientation: horizontal); | |||
} | |||
@@ -6,6 +6,16 @@ | |||
.#{$primary-stylename}-vertical { | |||
@include valo-splitpanel-style($primary-stylename: $primary-stylename, $orientation: vertical); | |||
} | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}-horizontal.large { | |||
@include valo-splitpanel-style($splitter-size: round($v-unit-size/3), $splitter-handle-visible: true, $orientation: horizontal); | |||
} | |||
.#{$primary-stylename}-vertical.large { | |||
@include valo-splitpanel-style($splitter-size: round($v-unit-size/3), $splitter-handle-visible: true, $orientation: vertical); | |||
} | |||
} | |||
} | |||
@@ -60,7 +60,7 @@ $v-table-background-color: null !default; | |||
} | |||
@mixin valo-table ($primary-stylename: v-table) { | |||
@mixin valo-table ($primary-stylename: v-table, $include-additional-styles: contains($v-included-additional-styles, table)) { | |||
$background-color: $v-table-background-color or valo-table-background-color(); | |||
$border-color: $v-table-border-color or first-color(valo-border($color: $background-color, $strength: 0.8)); | |||
@@ -72,9 +72,9 @@ $v-table-background-color: null !default; | |||
color: valo-font-color($v-background-color); | |||
} | |||
.v-table-header table, | |||
.v-table-footer table, | |||
.v-table-table { | |||
.#{$primary-stylename}-header table, | |||
.#{$primary-stylename}-footer table, | |||
.#{$primary-stylename}-table { | |||
@include box-shadow(0 0 0 $v-table-border-width $border-color); | |||
.v-ie8 & { | |||
@@ -178,6 +178,7 @@ $v-table-background-color: null !default; | |||
.#{$primary-stylename}-cell-wrapper { | |||
line-height: 1; | |||
min-height: $v-table-row-height; | |||
$vertical-padding: round(($v-table-row-height - $v-font-size)/2); | |||
padding: $vertical-padding $v-table-cell-padding-horizontal; | |||
@include box-sizing(border-box); | |||
@@ -472,6 +473,44 @@ $v-table-background-color: null !default; | |||
line-height: 0; | |||
} | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}-no-stripes { | |||
@include valo-table-no-stripes-style; | |||
} | |||
.#{$primary-stylename}-no-vertical-lines { | |||
@include valo-table-no-vertical-lines-style; | |||
} | |||
.#{$primary-stylename}-no-horizontal-lines { | |||
@include valo-table-no-horizontal-lines-style; | |||
} | |||
.#{$primary-stylename}-no-header { | |||
@include valo-table-no-header-style; | |||
} | |||
.#{$primary-stylename}-borderless { | |||
@include valo-table-borderless-style; | |||
} | |||
.#{$primary-stylename}-compact, | |||
.#{$primary-stylename}-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)); | |||
} | |||
.#{$primary-stylename}-small { | |||
font-size: $v-font-size--small; | |||
&.v-treetable .#{$primary-stylename}-cell-wrapper { | |||
min-height: $v-font-size--small; | |||
} | |||
} | |||
} | |||
} | |||
@@ -600,6 +639,7 @@ $v-table-background-color: null !default; | |||
.#{$primary-stylename}-cell-wrapper { | |||
padding: $vertical-padding $cell-padding-horizontal; | |||
min-height: $row-height; | |||
> .v-widget { | |||
margin: round($vertical-padding / -2) round($cell-padding-horizontal / -2); | |||
@@ -624,6 +664,7 @@ $v-table-background-color: null !default; | |||
.#{$primary-stylename}-cell-wrapper { | |||
padding-left: 0; | |||
padding-right: 0; | |||
min-height: $v-font-size; | |||
} | |||
.#{$primary-stylename}-cell-content { |
@@ -51,7 +51,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; | |||
@mixin valo-tabsheet ($primary-stylename: v-tabsheet) { | |||
@mixin valo-tabsheet ($primary-stylename: v-tabsheet, $include-additional-styles: contains($v-included-additional-styles, tabsheet)) { | |||
.#{$primary-stylename} { | |||
&:not(.v-has-width) { | |||
width: auto !important; | |||
@@ -119,6 +119,43 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; | |||
} | |||
} | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}-equal-width-tabs { | |||
@include valo-tabsheet-equal-width-tabs-style($flex: false); | |||
} | |||
.#{$primary-stylename}-framed { | |||
@include valo-tabsheet-framed-style; | |||
} | |||
.#{$primary-stylename}-centered-tabs { | |||
@include valo-tabsheet-align-tabs-style($align: center); | |||
} | |||
.#{$primary-stylename}-right-aligned-tabs { | |||
@include valo-tabsheet-align-tabs-style($align: right); | |||
} | |||
.#{$primary-stylename}-padded-tabbar { | |||
@include valo-tabsheet-padded-tabbar-style; | |||
} | |||
.#{$primary-stylename}-icons-on-top { | |||
@include valo-tabsheet-icons-on-top-style; | |||
} | |||
.#{$primary-stylename}-compact-tabbar { | |||
> .#{$primary-stylename}-tabcontainer-compact-tabbar .v-caption { | |||
line-height: 1.8; | |||
} | |||
} | |||
.#{$primary-stylename}-only-selected-closable { | |||
@include valo-tabsheet-only-selected-closable-style; | |||
} | |||
} | |||
} | |||
@@ -1,4 +1,4 @@ | |||
@mixin valo-textarea ($primary-stylename: v-textarea) { | |||
@mixin valo-textarea ($primary-stylename: v-textarea, $include-additional-styles: contains($v-included-additional-styles, textarea)) { | |||
.#{$primary-stylename} { | |||
@include valo-textarea-style; | |||
@@ -13,6 +13,31 @@ | |||
@include valo-textfield-error-style; | |||
} | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}-borderless { | |||
@include valo-textfield-borderless-style; | |||
} | |||
.#{$primary-stylename}-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; | |||
} | |||
.#{$primary-stylename}-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; | |||
} | |||
.#{$primary-stylename}-align-right { | |||
text-align: right; | |||
} | |||
.#{$primary-stylename}-align-center { | |||
text-align: center; | |||
} | |||
} | |||
} | |||
@@ -9,7 +9,51 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; | |||
@mixin valo-textfield ($primary-stylename: v-textfield, $include-additional-styles: contains($v-included-additional-styles, textfield)) { | |||
.#{$primary-stylename} { | |||
@include valo-textfield-style; | |||
width: $v-default-field-width; | |||
} | |||
.#{$primary-stylename}-readonly { | |||
@include valo-textfield-readonly-style; | |||
} | |||
.#{$primary-stylename}-error { | |||
@include valo-textfield-error-style; | |||
} | |||
@if $include-additional-styles { | |||
.#{$primary-stylename}-borderless { | |||
@include valo-textfield-borderless-style; | |||
} | |||
.#{$primary-stylename}-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; | |||
} | |||
.#{$primary-stylename}-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); | |||
.#{$primary-stylename}-align-right { | |||
text-align: right; | |||
} | |||
.#{$primary-stylename}-align-center { | |||
text-align: center; | |||
} | |||
} | |||
} | |||
@@ -94,8 +138,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; | |||
} | |||
// TODO allow parent selector to be used in interpolation | |||
&.v-textfield-prompt, | |||
&.v-textarea-prompt { | |||
&[class*="prompt"] { | |||
@include valo-textfield-prompt-style($background-color); | |||
} | |||
@@ -144,24 +187,6 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; | |||
} | |||
@mixin valo-textfield ($primary-stylename: v-textfield) { | |||
.#{$primary-stylename} { | |||
@include valo-textfield-style; | |||
width: $v-default-field-width; | |||
} | |||
.#{$primary-stylename}-readonly { | |||
@include valo-textfield-readonly-style; | |||
} | |||
.#{$primary-stylename}-error { | |||
@include valo-textfield-error-style; | |||
} | |||
} | |||
@mixin valo-textfield-borderless-style ($background-color: transparent) { | |||
border: none; |
@@ -8,6 +8,10 @@ | |||
padding-right: 0; | |||
} | |||
[class*="cell-wrapper"] { | |||
min-height: $v-font-size; | |||
} | |||
[class*="caption-container"] { | |||
padding-left: $v-table-cell-padding-horizontal; | |||
} |
@@ -1,441 +0,0 @@ | |||
// 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; | |||
} |
@@ -1,15 +1,12 @@ | |||
@import "loading-indicator"; | |||
@import "contextmenu"; | |||
@import "overlay"; | |||
@import "notification"; | |||
@import "tooltip"; | |||
$v-app-background-color: $v-background-color !default; | |||
// Include global styles only once | |||
$valo-global-included: false !default; | |||
@mixin valo-global { | |||
@if $valo-global-included == false { | |||
@@ -1,66 +1,7 @@ | |||
// @category Common | |||
// Color functions are used to calculate default font color | |||
@import "../util/color"; | |||
// List of components to include in the theme compilation. The list can be modified to make | |||
// the compiled theme smaller by removing unused components from the list. | |||
// | |||
// @usage | |||
// // Remove the Calendar component styles from the output | |||
// $v-included-components: remove($v-included-components, calendar); | |||
$v-included-components: | |||
absolutelayout, | |||
accordion, | |||
button, | |||
calendar, | |||
checkbox, | |||
colorpicker, | |||
combobox, | |||
csslayout, | |||
customcomponent, | |||
customlayout, | |||
datefield, | |||
dragwrapper, | |||
form, | |||
formlayout, | |||
grid, | |||
gridlayout, | |||
label, | |||
link, | |||
menubar, | |||
nativebutton, | |||
nativeselect, | |||
notification, | |||
optiongroup, | |||
orderedlayout, | |||
panel, | |||
popupview, | |||
progressbar, | |||
slider, | |||
splitpanel, | |||
table, | |||
tabsheet, | |||
textfield, | |||
textarea, | |||
richtextarea, | |||
tree, | |||
treetable, | |||
twincolselect, | |||
upload, | |||
window !default; | |||
// Checks if a given component is included in the compilation. Used by the collection mixins that | |||
// include all components, like valo-components and valo-components. | |||
// @param $component-name {String} the name of the component to check | |||
// @param $is-included {list} (Optional) the list of components which is checked | |||
// @return {Boolean} true if the component is included in the compilation, false if not | |||
@function v-is-included ($component-name, $is-included: $v-included-components) { | |||
@return contains($is-included, $component-name); | |||
} | |||
// A static text that is shown while the application JavaScript is loaded and started | |||
$v-app-loading-text : "" !default; | |||
@@ -116,13 +57,81 @@ $v-default-field-width : $v-unit-size * 5 | |||
$v-error-indicator-color : #ed473b !default; | |||
$v-required-field-indicator-color : $v-error-indicator-color !default; | |||
$v-friendly-color : #2c9720 !default; | |||
$v-scaling-factor--small : 0.8 !default; | |||
$v-scaling-factor--large : 1.2 !default; | |||
$v-unit-size--small : round($v-unit-size * $v-scaling-factor--small) !default; | |||
$v-unit-size--large : round($v-unit-size * $v-scaling-factor--large) !default; | |||
$v-font-size--small : round($v-font-size * $v-scaling-factor--small) !default; | |||
$v-font-size--large : round($v-font-size * $v-scaling-factor--large) !default; | |||
$valo-include-common-stylenames : true !default; | |||
// List of components to include in the theme compilation. The list can be modified to make | |||
// the compiled theme smaller by removing unused components from the list. | |||
// | |||
// @usage | |||
// // Remove the Calendar component styles from the output | |||
// $v-included-components: remove($v-included-components, calendar); | |||
$v-included-components: | |||
absolutelayout, | |||
accordion, | |||
button, | |||
calendar, | |||
checkbox, | |||
colorpicker, | |||
combobox, | |||
csslayout, | |||
customcomponent, | |||
customlayout, | |||
datefield, | |||
dragwrapper, | |||
form, | |||
formlayout, | |||
grid, | |||
gridlayout, | |||
label, | |||
link, | |||
menubar, | |||
nativebutton, | |||
nativeselect, | |||
notification, | |||
optiongroup, | |||
orderedlayout, | |||
panel, | |||
popupview, | |||
progressbar, | |||
slider, | |||
splitpanel, | |||
table, | |||
tabsheet, | |||
textfield, | |||
textarea, | |||
richtextarea, | |||
tree, | |||
treetable, | |||
twincolselect, | |||
upload, | |||
window, | |||
valo-menu !default; | |||
$v-included-additional-styles: $v-included-components !default; | |||
// Checks if a given component is included in the compilation. Used by the collection mixins that | |||
// include all components, like valo-components and valo-components. | |||
// @param $component-name {String} the name of the component to check | |||
// @param $is-included {list} (Optional) the list of components which is checked | |||
// @return {Boolean} true if the component is included in the compilation, false if not | |||
@function v-is-included ($component-name, $is-included: $v-included-components) { | |||
@return contains($is-included, $component-name); | |||
} | |||
// A flag to note whether relative URL paths are relative to the currently parsed SCSS file or to the compilation root file. |
@@ -240,6 +240,7 @@ public class CommonParts extends VerticalLayout implements View { | |||
}; | |||
style.setCaption("Additional style"); | |||
style.addItem("Dark", styleCommand).setCheckable(true); | |||
style.addItem("Success", styleCommand).setCheckable(true); | |||
style.addItem("Failure", styleCommand).setCheckable(true); | |||
style.addItem("Bar", styleCommand).setCheckable(true); |