diff options
Diffstat (limited to 'WebContent/VAADIN/themes/valo')
27 files changed, 724 insertions, 638 deletions
diff --git a/WebContent/VAADIN/themes/valo/_valo.scss b/WebContent/VAADIN/themes/valo/_valo.scss index b21cf733d1..f7d0534da1 100644 --- a/WebContent/VAADIN/themes/valo/_valo.scss +++ b/WebContent/VAADIN/themes/valo/_valo.scss @@ -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; - } } diff --git a/WebContent/VAADIN/themes/valo/components/_accordion.scss b/WebContent/VAADIN/themes/valo/components/_accordion.scss index 350c704eb4..82a4396828 100644 --- a/WebContent/VAADIN/themes/valo/components/_accordion.scss +++ b/WebContent/VAADIN/themes/valo/components/_accordion.scss @@ -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; + } + } + + } } diff --git a/WebContent/VAADIN/themes/valo/components/_all.scss b/WebContent/VAADIN/themes/valo/components/_all.scss index f20e8326bf..b41a2f3308 100644 --- a/WebContent/VAADIN/themes/valo/components/_all.scss +++ b/WebContent/VAADIN/themes/valo/components/_all.scss @@ -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; + } + } diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss index 4930742dad..ec74f70eaf 100644 --- a/WebContent/VAADIN/themes/valo/components/_button.scss +++ b/WebContent/VAADIN/themes/valo/components/_button.scss @@ -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; + } + } + } } diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss index 0ee703c372..e74781fc46 100644 --- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss +++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss @@ -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; + } + } + } diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss index 51ec65e55f..e514dc8e20 100644 --- a/WebContent/VAADIN/themes/valo/components/_combobox.scss +++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss @@ -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; + } + } } diff --git a/WebContent/VAADIN/themes/valo/components/_csslayout.scss b/WebContent/VAADIN/themes/valo/components/_csslayout.scss index 3cefbb0a4b..ee7cd933c5 100644 --- a/WebContent/VAADIN/themes/valo/components/_csslayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_csslayout.scss @@ -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; + } } } diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss index b1f3a78af6..a2b67b3f8c 100644 --- a/WebContent/VAADIN/themes/valo/components/_datefield.scss +++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss @@ -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; } diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss index 33191e4a20..25dbfbef28 100644 --- a/WebContent/VAADIN/themes/valo/components/_formlayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss @@ -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); + } + } } diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss index 502b640809..290d51fe9a 100644 --- a/WebContent/VAADIN/themes/valo/components/_label.scss +++ b/WebContent/VAADIN/themes/valo/components/_label.scss @@ -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; + } + } } } diff --git a/WebContent/VAADIN/themes/valo/components/_link.scss b/WebContent/VAADIN/themes/valo/components/_link.scss index 129ffcca2f..680659b8b6 100644 --- a/WebContent/VAADIN/themes/valo/components/_link.scss +++ b/WebContent/VAADIN/themes/valo/components/_link.scss @@ -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; + } + } } diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss index 75b93b646f..e79e6898a9 100644 --- a/WebContent/VAADIN/themes/valo/components/_menubar.scss +++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss @@ -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; + } + } + } diff --git a/WebContent/VAADIN/themes/valo/shared/_notification.scss b/WebContent/VAADIN/themes/valo/components/_notification.scss index cfe4c19599..3cfa446f7d 100644 --- a/WebContent/VAADIN/themes/valo/shared/_notification.scss +++ b/WebContent/VAADIN/themes/valo/components/_notification.scss @@ -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 { diff --git a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss index 71c67cd9d8..a058ad4e85 100644 --- a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss +++ b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss @@ -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; + } + } + } diff --git a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss index 1173ca3dbe..dbe2490826 100644 --- a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss @@ -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, diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss index 542c14ea64..075de3daeb 100644 --- a/WebContent/VAADIN/themes/valo/components/_panel.scss +++ b/WebContent/VAADIN/themes/valo/components/_panel.scss @@ -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; diff --git a/WebContent/VAADIN/themes/valo/components/_slider.scss b/WebContent/VAADIN/themes/valo/components/_slider.scss index b4785a8471..123712a8ee 100644 --- a/WebContent/VAADIN/themes/valo/components/_slider.scss +++ b/WebContent/VAADIN/themes/valo/components/_slider.scss @@ -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; + } + } + } diff --git a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss index 27da1d9cc6..cd709e1df9 100644 --- a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss +++ b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss @@ -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); + } + } } diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss index 2335c59873..3644e482f2 100644 --- a/WebContent/VAADIN/themes/valo/components/_table.scss +++ b/WebContent/VAADIN/themes/valo/components/_table.scss @@ -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 { diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss index 2e28174fa7..7f2421b5ff 100644 --- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss +++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss @@ -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; + } + } + } diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss index 79bdb04d3c..4c5d99b8e2 100644 --- a/WebContent/VAADIN/themes/valo/components/_textarea.scss +++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss @@ -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; + } + } + } diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss index 39dfa3420e..75cfc5ef85 100644 --- a/WebContent/VAADIN/themes/valo/components/_textfield.scss +++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss @@ -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; diff --git a/WebContent/VAADIN/themes/valo/components/_treetable.scss b/WebContent/VAADIN/themes/valo/components/_treetable.scss index 0423b37ab1..41ef9060c7 100644 --- a/WebContent/VAADIN/themes/valo/components/_treetable.scss +++ b/WebContent/VAADIN/themes/valo/components/_treetable.scss @@ -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; } diff --git a/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss index 8bd26e2b10..8bd26e2b10 100644 --- a/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss +++ b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss diff --git a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss deleted file mode 100644 index 09d29b7d9f..0000000000 --- a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss +++ /dev/null @@ -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; - -} diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss index ad5b9297cf..7b7e63489a 100644 --- a/WebContent/VAADIN/themes/valo/shared/_global.scss +++ b/WebContent/VAADIN/themes/valo/shared/_global.scss @@ -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 { diff --git a/WebContent/VAADIN/themes/valo/shared/_variables.scss b/WebContent/VAADIN/themes/valo/shared/_variables.scss index 8adc3667d3..b1c113b2cc 100644 --- a/WebContent/VAADIN/themes/valo/shared/_variables.scss +++ b/WebContent/VAADIN/themes/valo/shared/_variables.scss @@ -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. |