diff options
22 files changed, 383 insertions, 383 deletions
diff --git a/WebContent/VAADIN/themes/runo/absolutelayout/absolutelayout.scss b/WebContent/VAADIN/themes/runo/absolutelayout/absolutelayout.scss index 623110ff63..e87d9f64ad 100644 --- a/WebContent/VAADIN/themes/runo/absolutelayout/absolutelayout.scss +++ b/WebContent/VAADIN/themes/runo/absolutelayout/absolutelayout.scss @@ -1,6 +1,6 @@ -@mixin runo-absolutelayout { +@mixin runo-absolutelayout($primaryStyleName : v-absolutelayout) { -.v-absolutelayout-wrapper { +.#{$primaryStyleName}-wrapper { position: absolute; overflow:hidden; } diff --git a/WebContent/VAADIN/themes/runo/accordion/accordion.scss b/WebContent/VAADIN/themes/runo/accordion/accordion.scss index f9c9487536..deeb494371 100644 --- a/WebContent/VAADIN/themes/runo/accordion/accordion.scss +++ b/WebContent/VAADIN/themes/runo/accordion/accordion.scss @@ -1,6 +1,6 @@ -@mixin runo-accordion { +@mixin runo-accordion($primaryStyleName : v-accordion) { -.v-accordion-item-caption { +.#{$primaryStyleName}-item-caption { height: 31px; background: #edf0f0 url(img/bg.png); font-size: 15px; @@ -8,35 +8,35 @@ border: none; border-top: 1px solid #c8cccd; } -.v-accordion-item-caption .v-caption { +.#{$primaryStyleName}-item-caption .v-caption { padding: 7px 0 6px 31px; background: transparent url(img/collapsed-icon.png) no-repeat 18px 50%; } -.v-accordion-item-open .v-accordion-item-caption { +.#{$primaryStyleName}-item-open .#{$primaryStyleName}-item-caption { color: #3b4b57; background: #d5dee2 url(img/selected-bg.png); border-bottom: 1px solid #b4b9ba; text-shadow: 0 1px 0 #fff; } -.v-accordion-item-open .v-accordion-item-caption .v-caption { +.#{$primaryStyleName}-item-open .#{$primaryStyleName}-item-caption .v-caption { background-image: url(img/expanded-icon.png); background-position: 17px 50%; } -.v-accordion-item-first .v-accordion-item-caption { +.#{$primaryStyleName}-item-first .#{$primaryStyleName}-item-caption { border-top: none; } -.v-accordion-item-caption .v-caption:hover { +.#{$primaryStyleName}-item-caption .v-caption:hover { color: #3b4b57; } /* Light style */ -.v-accordion-light .v-accordion-item-caption { +.#{$primaryStyleName}-light .#{$primaryStyleName}-item-caption { height: 24px; padding: 3px 2px; background: transparent; border: none; } -.v-accordion-light .v-accordion-item-caption .v-caption { +.#{$primaryStyleName}-light .#{$primaryStyleName}-item-caption .v-caption { padding: 4px 15px 4px 28px; font-size: 12px; line-height: 16px; diff --git a/WebContent/VAADIN/themes/runo/button/button.scss b/WebContent/VAADIN/themes/runo/button/button.scss index 5da6211804..b303dd2e02 100644 --- a/WebContent/VAADIN/themes/runo/button/button.scss +++ b/WebContent/VAADIN/themes/runo/button/button.scss @@ -1,16 +1,16 @@ -@mixin runo-button { +@mixin runo-button($primaryStyleName : v-button) { -.v-button { +.#{$primaryStyleName} { padding: 1px; border: none; background: transparent; } -.v-button:focus { +.#{$primaryStyleName}:focus { outline: none; } -.v-button:focus .v-button-wrap { +.#{$primaryStyleName}:focus .#{$primaryStyleName}-wrap { border-color: #57a7ed; border-top-color: #60aef1; border-bottom-color: #4c9adf; @@ -18,8 +18,8 @@ -moz-box-shadow: 0 0 2px #57a7ed; } -.v-button:active .v-button-wrap, -.v-button.v-pressed .v-button-wrap { +.#{$primaryStyleName}:active .#{$primaryStyleName}-wrap, +.#{$primaryStyleName}.v-pressed .#{$primaryStyleName}-wrap { background-position: 0 -79px; background-color: #e7e9e9; border-color: #b8bdbe; @@ -32,8 +32,8 @@ text-shadow: none; } -.v-button .v-button-wrap, -.v-disabled.v-button .v-button-wrap { +.#{$primaryStyleName} .#{$primaryStyleName}-wrap, +.v-disabled.#{$primaryStyleName} .#{$primaryStyleName}-wrap { display: block; font-size: 12px; border: 1px solid #bdc1c2; @@ -59,8 +59,8 @@ } /* Small style */ -.v-button-small .v-button-wrap, -.v-disabled.v-button-small .v-button-wrap { +.#{$primaryStyleName}-small .#{$primaryStyleName}-wrap, +.v-disabled.#{$primaryStyleName}-small .#{$primaryStyleName}-wrap { font-size: 11px; line-height: 13px; padding: 1px 12px; @@ -69,8 +69,8 @@ /* Big style */ -.v-button-big .v-button-wrap, -.v-disabled.v-button-big .v-button-wrap { +.#{$primaryStyleName}-big .#{$primaryStyleName}-wrap, +.v-disabled.#{$primaryStyleName}-big .#{$primaryStyleName}-wrap { font-size: 15px; line-height: 18px; padding: 4px 18px; @@ -83,14 +83,14 @@ /* Default style */ -.v-button-default:focus .v-button-wrap { +.#{$primaryStyleName}-default:focus .#{$primaryStyleName}-wrap { background-color: #60839a; background-position: 0 -158px; text-shadow: 0 -1px 0 #657883; } -.v-button-default:active .v-button-wrap, -.v-button-default.v-pressed .v-button-wrap { +.#{$primaryStyleName}-default:active .#{$primaryStyleName}-wrap, +.#{$primaryStyleName}-default.v-pressed .#{$primaryStyleName}-wrap { background-position: 0 -79px; background-color: #8f9898; border-color: #737e81; @@ -102,8 +102,8 @@ -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4) inset; } -.v-button-default .v-button-wrap, -.v-disabled.v-button-default .v-button-wrap { +.#{$primaryStyleName}-default .#{$primaryStyleName}-wrap, +.v-disabled.#{$primaryStyleName}-default .#{$primaryStyleName}-wrap { border-color: #899395; border-top-color: #a4abae; border-bottom-color: #727b7d; @@ -119,15 +119,15 @@ /* Link style */ -.v-button-link, -.v-disabled.v-button-link { +.#{$primaryStyleName}-link, +.v-disabled.#{$primaryStyleName}-link { padding: 0; } -.v-button-link .v-button-wrap, -.v-disabled.v-button-link .v-button-wrap, -.v-button-link:active .v-button-wrap, -.v-disabled.v-button-pressedv-button-link .v-button-wrap { +.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap, +.v-disabled.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap, +.#{$primaryStyleName}-link:active .#{$primaryStyleName}-wrap, +.v-disabled.#{$primaryStyleName}-pressedv-button-link .#{$primaryStyleName}-wrap { border: none; background: transparent; padding: 0; @@ -140,11 +140,11 @@ text-shadow: none; } -.v-button-link:focus { +.#{$primaryStyleName}-link:focus { outline: 1px dotted #4897dc; } -.v-button-link:focus .v-button-wrap { +.#{$primaryStyleName}-link:focus .#{$primaryStyleName}-wrap { -webkit-box-shadow: none; -moz-box-shadow: none; } diff --git a/WebContent/VAADIN/themes/runo/formlayout/formlayout.scss b/WebContent/VAADIN/themes/runo/formlayout/formlayout.scss index bb27da1d5b..59151feeb7 100644 --- a/WebContent/VAADIN/themes/runo/formlayout/formlayout.scss +++ b/WebContent/VAADIN/themes/runo/formlayout/formlayout.scss @@ -1,33 +1,33 @@ -@mixin runo-formlayout { +@mixin runo-formlayout($primaryStyleName : v-formlayout) { -.v-formlayout-cell .v-errorindicator { +.#{$primaryStyleName}-cell .v-errorindicator { width: 10px; height: 16px; background: transparent url(../icons/16/error.png) no-repeat top right; } -.v-formlayout-captioncell { +.#{$primaryStyleName}-captioncell { text-align:right; white-space: nowrap; } -.v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-captioncell, -.v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-contentcell, -.v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-errorcell { +.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-captioncell, +.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-contentcell, +.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-errorcell { padding-top: 8px; } -.v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-captioncell, -.v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-contentcell, -.v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-errorcell { +.#{$primaryStyleName}-margin-top > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-captioncell, +.#{$primaryStyleName}-margin-top > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-contentcell, +.#{$primaryStyleName}-margin-top > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-errorcell { padding-top: 15px; } -.v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-captioncell, -.v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-contentcell, -.v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-errorcell { +.#{$primaryStyleName}-margin-bottom > tbody > .#{$primaryStyleName}-lastrow > .#{$primaryStyleName}-captioncell, +.#{$primaryStyleName}-margin-bottom > tbody > .#{$primaryStyleName}-lastrow > .#{$primaryStyleName}-contentcell, +.#{$primaryStyleName}-margin-bottom > tbody > .#{$primaryStyleName}-lastrow > .#{$primaryStyleName}-errorcell { padding-bottom: 15px; } -.v-formlayout-margin-left > tbody > .v-formlayout-row > .v-formlayout-captioncell { +.#{$primaryStyleName}-margin-left > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-captioncell { padding-left: 18px; } -.v-formlayout-margin-right > tbody > .v-formlayout-row > .v-formlayout-contentcell { +.#{$primaryStyleName}-margin-right > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-contentcell { padding-right: 18px; } /* form */ diff --git a/WebContent/VAADIN/themes/runo/gridlayout/gridlayout.scss b/WebContent/VAADIN/themes/runo/gridlayout/gridlayout.scss index a8e9f7a7cd..e3fb628a6b 100644 --- a/WebContent/VAADIN/themes/runo/gridlayout/gridlayout.scss +++ b/WebContent/VAADIN/themes/runo/gridlayout/gridlayout.scss @@ -1,18 +1,18 @@ -@mixin runo-gridlayout { +@mixin runo-gridlayout($primaryStyleName : v-gridlayout) { -.v-gridlayout-margin-top { +.#{$primaryStyleName}-margin-top { padding-top: 15px; } -.v-gridlayout-margin-bottom { +.#{$primaryStyleName}-margin-bottom { padding-bottom: 15px; } -.v-gridlayout-margin-left { +.#{$primaryStyleName}-margin-left { padding-left: 18px; } -.v-gridlayout-margin-right { +.#{$primaryStyleName}-margin-right { padding-right: 18px; } -.v-gridlayout-spacing-on { +.#{$primaryStyleName}-spacing-on { padding-left: 8px; padding-top: 8px; } diff --git a/WebContent/VAADIN/themes/runo/label/label.scss b/WebContent/VAADIN/themes/runo/label/label.scss index b5308e4696..926f1d2cc3 100644 --- a/WebContent/VAADIN/themes/runo/label/label.scss +++ b/WebContent/VAADIN/themes/runo/label/label.scss @@ -1,16 +1,16 @@ -@mixin runo-label { +@mixin runo-label($primaryStyleName : v-label) { -.v-label h1, -.v-label h2, -.v-label h3, -.v-label h4, -.v-label h5, -.v-label h6 { +.#{$primaryStyleName} h1, +.#{$primaryStyleName} h2, +.#{$primaryStyleName} h3, +.#{$primaryStyleName} h4, +.#{$primaryStyleName} h5, +.#{$primaryStyleName} h6 { color: #404749; } -.v-label-h1, -.v-label h1 { +.#{$primaryStyleName}-h1, +.#{$primaryStyleName} h1 { margin: 0; padding: 8px 0 4px; font-size: 24px; @@ -20,8 +20,8 @@ text-shadow: 0 1px 1px #fff; } -.v-label-h2, -.v-label h2 { +.#{$primaryStyleName}-h2, +.#{$primaryStyleName} h2 { color: #f14c1a; font-size: 18px; letter-spacing: -0.03em; @@ -29,16 +29,16 @@ padding: 13px 0 5px; } -.v-label-h3, -.v-label h3 { +.#{$primaryStyleName}-h3, +.#{$primaryStyleName} h3 { font-size: 15px; letter-spacing: -0.03em; font-weight: normal; text-shadow: 0 1px 1px #fff; } -.v-label-h4, -.v-label h4 { +.#{$primaryStyleName}-h4, +.#{$primaryStyleName} h4 { font-size: 13px; font-weight: normal; text-shadow: 0 1px 1px #fff; @@ -46,14 +46,14 @@ padding: 8px 0 4px; } -.v-label-small { +.#{$primaryStyleName}-small { font-size: .87em; line-height: 1.4; color: #707679; } -.v-label hr, -.v-label-hr { +.#{$primaryStyleName} hr, +.#{$primaryStyleName}-hr { height: 2px; overflow: hidden; background: #ccd2d3; @@ -62,12 +62,12 @@ border-bottom: 1px solid #fff; margin: 0; } -.v-label-hr { +.#{$primaryStyleName}-hr { height: 1px; } -.v-sa & .v-label hr, -.v-ie8 & .v-label hr { +.v-sa & .#{$primaryStyleName} hr, +.v-ie8 & .#{$primaryStyleName} hr { height: 1px; } diff --git a/WebContent/VAADIN/themes/runo/link/link.scss b/WebContent/VAADIN/themes/runo/link/link.scss index 8c08a718b8..6970c6b2d8 100644 --- a/WebContent/VAADIN/themes/runo/link/link.scss +++ b/WebContent/VAADIN/themes/runo/link/link.scss @@ -1,6 +1,6 @@ -@mixin runo-link { +@mixin runo-link($primaryStyleName : v-link) { -.v-link a { +.#{$primaryStyleName} a { color: #464f52; } diff --git a/WebContent/VAADIN/themes/runo/menubar/menubar.scss b/WebContent/VAADIN/themes/runo/menubar/menubar.scss index a9c26a4b24..51efc6f28f 100644 --- a/WebContent/VAADIN/themes/runo/menubar/menubar.scss +++ b/WebContent/VAADIN/themes/runo/menubar/menubar.scss @@ -1,21 +1,21 @@ -@mixin runo-menubar { +@mixin runo-menubar($primaryStyleName : v-menubar) { -.v-menubar { +.#{$primaryStyleName} { color: #464f52; border-left: 1px solid #c6cbcc; } -.v-menubar .v-menubar-menuitem { +.#{$primaryStyleName} .#{$primaryStyleName}-menuitem { padding: 1px 10px; border: 1px solid #c6cbcc; border-left: none; height: 18px; line-height: 18x; } -.v-menubar-menuitem-selected { +.#{$primaryStyleName}-menuitem-selected { color: #fff; background: #5daee8; } -.v-menubar-submenu { +.#{$primaryStyleName}-submenu { background: #e9eced url(../tabsheet/img/tab-bg.png); font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif; color: #464f52; @@ -26,13 +26,13 @@ border-top: 1px solid #d0d4d5; border-left: 1px solid #d0d4d5; } -.v-menubar-submenu .v-menubar-menuitem { +.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem { padding-top: 1px; padding-bottom: 1px; line-height: 16px; padding-left: 10px; } -.v-menubar-submenu .v-menubar-menuitem-caption .v-icon { +.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-caption .v-icon { vertical-align: middle; } diff --git a/WebContent/VAADIN/themes/runo/notification/notification.scss b/WebContent/VAADIN/themes/runo/notification/notification.scss index f81f304923..af0a2edc32 100644 --- a/WebContent/VAADIN/themes/runo/notification/notification.scss +++ b/WebContent/VAADIN/themes/runo/notification/notification.scss @@ -1,6 +1,6 @@ -@mixin runo-notification { +@mixin runo-notification($primaryStyleName : v-Notification) { -.v-Notification { +.#{$primaryStyleName} { font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif; background-color: #94a0a3; color: #ffffff; @@ -15,35 +15,35 @@ -moz-box-shadow: 0 3px 10px rgba(0,0,0,.3); margin: 10px; } -.v-Notification h1, -.v-Notification p, -.v-Notification-error h1, -.v-Notification-error p, -.v-Notification-warning h1, -.v-Notification-warning p { +.#{$primaryStyleName} h1, +.#{$primaryStyleName} p, +.#{$primaryStyleName}-error h1, +.#{$primaryStyleName}-error p, +.#{$primaryStyleName}-warning h1, +.#{$primaryStyleName}-warning p { display: inline; font-weight: normal; line-height: normal; margin: 0 10px 0 0; } -.v-Notification-warning { +.#{$primaryStyleName}-warning { background: #fff1e4; color: #dd3400; border: 2px solid #ffaa90; opacity: 1; } -.v-Notification-error { +.#{$primaryStyleName}-error { background: #f13d13 url(img/close-error.png) no-repeat right 5px; padding-right: 50px; } -.v-Notification-tray { +.#{$primaryStyleName}-tray { background: #575e60; padding: 3px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); max-width: 17em; } -.v-Notification-tray h1 { +.#{$primaryStyleName}-tray h1 { display: block; font-weight: bold; font-size: 0.9em; @@ -55,14 +55,14 @@ -webkit-border-radius: 2px; border-radius: 2px; } -.v-Notification-tray p { +.#{$primaryStyleName}-tray p { display: block; font-size: 0.8em; line-height: 1.2; margin: 4px 10px 5px 10px; color: #e4e7ea; } -.v-Notification-system { +.#{$primaryStyleName}-system { background-color: #ff0a0a; font-size: .9em; padding: 14px 32px; diff --git a/WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.scss b/WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.scss index bb202433b5..d01371599c 100644 --- a/WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.scss +++ b/WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.scss @@ -1,34 +1,34 @@ -@mixin runo-orderedlayout { +@mixin runo-orderedlayout($primaryStyleName : v-orderedlayout) { -.v-orderedlayout-margin-top, +.#{$primaryStyleName}-margin-top, .v-horizontallayout-margin-top, .v-verticallayout-margin-top, .v-csslayout-margin-top, .v-layout.v-margin-top { padding-top: 15px; } -.v-orderedlayout-margin-right, +.#{$primaryStyleName}-margin-right, .v-horizontallayout-margin-right, .v-verticallayout-margin-right, .v-csslayout-margin-right, .v-layout.v-margin-right { padding-right: 18px; } -.v-orderedlayout-margin-bottom, +.#{$primaryStyleName}-margin-bottom, .v-horizontallayout-margin-bottom, .v-verticallayout-margin-bottom, .v-csslayout-margin-bottom, .v-layout.v-margin-bottom { padding-bottom: 15px; } -.v-orderedlayout-margin-left, +.#{$primaryStyleName}-margin-left, .v-horizontallayout-margin-left, .v-verticallayout-margin-left, .v-csslayout-margin-left, .v-layout.v-margin-left { padding-left: 18px; } -.v-orderedlayout-spacing-on, +.#{$primaryStyleName}-spacing-on, .v-horizontallayout-spacing-on, .v-verticallayout-spacing-on { padding-top: 8px; diff --git a/WebContent/VAADIN/themes/runo/panel/panel.scss b/WebContent/VAADIN/themes/runo/panel/panel.scss index d33bcc5c62..1243cfbb77 100644 --- a/WebContent/VAADIN/themes/runo/panel/panel.scss +++ b/WebContent/VAADIN/themes/runo/panel/panel.scss @@ -1,15 +1,15 @@ -@mixin runo-panel { +@mixin runo-panel($primaryStyleName : v-panel) { -.v-panel { +.#{$primaryStyleName} { background: transparent url(img/top-left.png) no-repeat; } -.v-panel-caption .v-errorindicator { +.#{$primaryStyleName}-caption .v-errorindicator { padding-right: 20px; background: transparent url(../icons/16/error.png) no-repeat bottom center; } -.v-panel-caption, -.v-panel-caption-light { +.#{$primaryStyleName}-caption, +.#{$primaryStyleName}-caption-light { font-size: 18px; line-height: normal; font-weight: normal; @@ -21,22 +21,22 @@ background: transparent url(img/top-right.png) no-repeat right top; text-overflow: ellipsis; } -.v-panel-nocaption { +.#{$primaryStyleName}-nocaption { height: 9px; margin-left: 10px; background: transparent url(img/top-right.png) no-repeat right top; } -.v-panel-content { +.#{$primaryStyleName}-content { border: 1px solid #babfc0; border-bottom: 1px solid #dee2e3; background-color: #fff; } -.v-panel-deco { +.#{$primaryStyleName}-deco { height: 9px; background: transparent url(img/bottom-right.png) repeat-x right top; margin-left: 9px; } -.v-panel-deco:before { +.#{$primaryStyleName}-deco:before { display: block; width: 9px; @@ -45,37 +45,37 @@ background: transparent url(img/bottom-left.png) no-repeat; } /* Light panel style */ -.v-panel-light, -.v-panel-caption-light { +.#{$primaryStyleName}-light, +.#{$primaryStyleName}-caption-light { background: transparent; } -.v-panel-caption-light { +.#{$primaryStyleName}-caption-light { border-bottom: 1px solid #babfc0; margin: 0; padding-left: 18px; } -.v-panel-nocaption-light { +.#{$primaryStyleName}-nocaption-light { background: transparent; border: none; height: 0; margin: 0; } -.v-panel-content-light { +.#{$primaryStyleName}-content-light { border: none; background: transparent; } -.v-panel-deco-light { +.#{$primaryStyleName}-deco-light { height: 0; overflow: hidden; } /* IE specific rules */ -.v-ie8 & .v-panel-content { +.v-ie8 & .#{$primaryStyleName}-content { border-bottom: 1px solid #babfc0; } -.v-ie8 & .v-panel-content-light { +.v-ie8 & .#{$primaryStyleName}-content-light { border-bottom: none; } -.v-ie8 & .v-panel-deco { +.v-ie8 & .#{$primaryStyleName}-deco { height: 0; overflow: hidden; } diff --git a/WebContent/VAADIN/themes/runo/popupview/popupview.scss b/WebContent/VAADIN/themes/runo/popupview/popupview.scss index ddae62902e..e5bc664fdd 100644 --- a/WebContent/VAADIN/themes/runo/popupview/popupview.scss +++ b/WebContent/VAADIN/themes/runo/popupview/popupview.scss @@ -1,9 +1,9 @@ -@mixin runo-popupview { +@mixin runo-popupview($primaryStyleName : v-popupview) { -.v-popupview { +.#{$primaryStyleName} { background: transparent; } -.v-popupview-popup { +.#{$primaryStyleName}-popup { border: 1px solid #babfc0; border-bottom: 1px solid #dee2e3; background: #fff; diff --git a/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.scss b/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.scss index 31d4493b78..9664a473b2 100644 --- a/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.scss +++ b/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.scss @@ -1,22 +1,22 @@ -@mixin runo-progressindicator { +@mixin runo-progressindicator($primaryStyleName : v-progressindicator) { -.v-progressindicator-wrapper { +.#{$primaryStyleName}-wrapper { background: #dfe2e4 url(img/base.gif) repeat-x; border: 1px solid #b6bbbc; } -.v-disabled .v-progressindicator-wrapper { +.v-disabled .#{$primaryStyleName}-wrapper { background-image: url(img/disabled.gif); } -.v-progressindicator-indicator { +.#{$primaryStyleName}-indicator { background: #f7f9f9 url(img/progress.png); } -.v-progressindicator-indicator { +.#{$primaryStyleName}-indicator { background: #f7f9f9 url(img/progress.png); } -.v-progressindicator-indeterminate { +.#{$primaryStyleName}-indeterminate { background: #fff url(../../base/common/img/ajax-loader-medium.gif) no-repeat 50%; } -.v-progressindicator-indeterminate-disabled { +.#{$primaryStyleName}-indeterminate-disabled { background: #dfe2e4; } diff --git a/WebContent/VAADIN/themes/runo/select/select.scss b/WebContent/VAADIN/themes/runo/select/select.scss index 6ba9acecd7..cc9846f145 100644 --- a/WebContent/VAADIN/themes/runo/select/select.scss +++ b/WebContent/VAADIN/themes/runo/select/select.scss @@ -1,4 +1,4 @@ -@mixin runo-select { +@mixin runo-select($primaryStyleName : v-filterselect) { .v-select-select { font-size: 13px; @@ -14,14 +14,14 @@ /** Filterselect aka ComboBox styles */ -.v-filterselect { +.#{$primaryStyleName} { height: 23px; background: transparent url(img/bg-left-filter.png) no-repeat; padding-left: 4px; } -&.v-app .v-filterselect .v-filterselect-input, -.v-window .v-filterselect .v-filterselect-input, -.v-popupview-popup .v-filterselect .v-filterselect-input { +&.v-app .#{$primaryStyleName} .#{$primaryStyleName}-input, +.v-window .#{$primaryStyleName} .#{$primaryStyleName}-input, +.v-popupview-popup .#{$primaryStyleName} .#{$primaryStyleName}-input { background: transparent url(img/bg-center-filter.png) no-repeat 1px 0; border: none; height: 23px; @@ -29,38 +29,38 @@ padding: 2px 0 1px 2px; font-size: 13px; } -.v-filterselect-prompt .v-filterselect-input { +.#{$primaryStyleName}-prompt .#{$primaryStyleName}-input { font-style: normal; } -.v-filterselect-input:focus { +.#{$primaryStyleName}-input:focus { /* remove safari/mac outline from this element */ outline: none; } -.v-filterselect-focus { +.#{$primaryStyleName}-focus { outline: 1px solid #5daee8; outline-offset: -1px; } -.v-sa & .v-filterselect-focus { +.v-sa & .#{$primaryStyleName}-focus { /* place safari focus outline around the whole thing */ outline: 5px auto -webkit-focus-ring-color; outline-offset: -4px; } -.v-filterselect-button { +.#{$primaryStyleName}-button { width: 25px; height: 23px; background: transparent url(img/bg-right-filter.png); } -.v-filterselect-button:hover { +.#{$primaryStyleName}-button:hover { background-position: bottom left; } -.v-disabled .v-filterselect-button:hover, -.v-readonly .v-filterselect-button:hover { +.v-disabled .#{$primaryStyleName}-button:hover, +.v-readonly .#{$primaryStyleName}-button:hover { background-position: top left; } -.v-filterselect.v-readonly .v-filterselect-input { +.#{$primaryStyleName}.v-readonly .#{$primaryStyleName}-input { background: transparent; } -.v-filterselect-suggestpopup { +.#{$primaryStyleName}-suggestpopup { background: #f6f7f7; border: 1px solid #b6bbbc; font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif; @@ -69,45 +69,45 @@ line-height: 18px; margin-top: -1px; } -.v-filterselect-suggestmenu .gwt-MenuItem { +.#{$primaryStyleName}-suggestmenu .gwt-MenuItem { padding: 1px 6px; cursor: pointer; height: 18px; } -.v-ff & .v-filterselect-suggestmenu .gwt-MenuItem { +.v-ff & .#{$primaryStyleName}-suggestmenu .gwt-MenuItem { height: 20px; } -.v-filterselect-suggestmenu .gwt-MenuItem .v-icon { +.#{$primaryStyleName}-suggestmenu .gwt-MenuItem .v-icon { margin-right: 3px; } -.v-filterselect-suggestmenu .gwt-MenuItem-selected { +.#{$primaryStyleName}-suggestmenu .gwt-MenuItem-selected { background: #5daee8; color: #fff; } -.v-filterselect-nextpage, -.v-filterselect-nextpage-off, -.v-filterselect-prevpage-off, -.v-filterselect-prevpage { +.#{$primaryStyleName}-nextpage, +.#{$primaryStyleName}-nextpage-off, +.#{$primaryStyleName}-prevpage-off, +.#{$primaryStyleName}-prevpage { height: 11px; width:100%; background: transparent url(img/button-bg.png) no-repeat 50% 0; margin: 2px 0 0 0; } -.v-filterselect-prevpage, -.v-filterselect-prevpage-off { +.#{$primaryStyleName}-prevpage, +.#{$primaryStyleName}-prevpage-off { background-position: 50% -1px; margin: 0 0 2px 0; } -.v-filterselect-prevpage:hover { +.#{$primaryStyleName}-prevpage:hover { background-position: 50% bottom; } -.v-filterselect-nextpage:hover { +.#{$primaryStyleName}-nextpage:hover { background-position: 50% -12px; } -.v-filterselect-nextpage span, -.v-filterselect-nextpage-off span, -.v-filterselect-prevpage-off span, -.v-filterselect-prevpage span { +.#{$primaryStyleName}-nextpage span, +.#{$primaryStyleName}-nextpage-off span, +.#{$primaryStyleName}-prevpage-off span, +.#{$primaryStyleName}-prevpage span { display: block; height: 12px; width:100%; @@ -116,11 +116,11 @@ cursor: pointer; overflow: hidden; } -.v-filterselect-nextpage span, -.v-filterselect-nextpage-off span { +.#{$primaryStyleName}-nextpage span, +.#{$primaryStyleName}-nextpage-off span { background: transparent url(img/arrow-down.png) no-repeat 50% 60%; } -.v-filterselect-status { +.#{$primaryStyleName}-status { font-size: 11px; line-height: 11px; width: 100%; @@ -133,13 +133,13 @@ /* Error styles (disabled by default) ---------------------------------- -.v-filterselect-error { +.#{$primaryStyleName}-error { background-image: url(img/bg-left-filter-error.png); } -.v-filterselect-error .v-filterselect-input { +.#{$primaryStyleName}-error .#{$primaryStyleName}-input { background-image: url(img/bg-center-filter-error.png); } -.v-filterselect-error .v-filterselect-button { +.#{$primaryStyleName}-error .#{$primaryStyleName}-button { background-image: url(img/bg-right-filter-error.png); } .v-select-error .v-select-option, diff --git a/WebContent/VAADIN/themes/runo/shadow/shadow.scss b/WebContent/VAADIN/themes/runo/shadow/shadow.scss index 96a911fca4..f24cab1bd2 100644 --- a/WebContent/VAADIN/themes/runo/shadow/shadow.scss +++ b/WebContent/VAADIN/themes/runo/shadow/shadow.scss @@ -1,31 +1,31 @@ -@mixin runo-shadow { +@mixin runo-shadow($primaryStyleName : v-shadow) { -.v-shadow { +.#{$primaryStyleName} { position: absolute; } -.v-shadow .top-left { +.#{$primaryStyleName} .top-left { position: absolute; overflow: hidden; top: -3px; left: -4px; width: 8px; height: 8px; background: transparent url(img/top-left.png); } -.v-shadow .top { +.#{$primaryStyleName} .top { position: absolute; overflow: hidden; top: -3px; left: 4px; height: 8px; right: 4px; background: transparent url(img/top.png); } -.v-shadow .top-right { +.#{$primaryStyleName} .top-right { position: absolute; overflow: hidden; top: -3px; right: -4px; width: 8px; height: 8px; background: transparent url(img/top-right.png); } -.v-shadow .left { +.#{$primaryStyleName} .left { position: absolute; overflow: hidden; top: 5px; left: -4px; width: 8px; @@ -33,14 +33,14 @@ background: transparent url(img/left.png); } -.v-shadow .center { +.#{$primaryStyleName} .center { position: absolute; overflow: hidden; top: 5px; left: 4px; bottom: 3px; right: 4px; background: transparent url(img/center.png); } -.v-shadow .right { +.#{$primaryStyleName} .right { position: absolute; overflow: hidden; top: 5px; right: -4px; width: 8px; @@ -48,21 +48,21 @@ background: transparent url(img/right.png); } -.v-shadow .bottom-left { +.#{$primaryStyleName} .bottom-left { position: absolute; overflow: hidden; bottom: -5px; left: -4px; width: 8px; height: 8px; background: transparent url(img/bottom-left.png); } -.v-shadow .bottom { +.#{$primaryStyleName} .bottom { position: absolute; overflow: hidden; bottom: -5px; left: 4px; right: 4px; height: 8px; background: transparent url(img/bottom.png); } -.v-shadow .bottom-right { +.#{$primaryStyleName} .bottom-right { position: absolute; overflow: hidden; bottom: -5px; right: -4px; width: 8px; height: 8px; diff --git a/WebContent/VAADIN/themes/runo/slider/slider.scss b/WebContent/VAADIN/themes/runo/slider/slider.scss index 3bc9e28702..aa8cbe3e7a 100644 --- a/WebContent/VAADIN/themes/runo/slider/slider.scss +++ b/WebContent/VAADIN/themes/runo/slider/slider.scss @@ -1,11 +1,11 @@ -@mixin runo-slider { +@mixin runo-slider($primaryStyleName : v-slider) { -.v-slider { +.#{$primaryStyleName} { border-top: 1px solid #cccfd0; border-bottom: 1px solid #cccfd0; margin: 5px 0; } -.v-slider-base { +.#{$primaryStyleName}-base { /* changing the borders will require adjustments to ISlider.java */ height: 2px; background: #f3f3f4; @@ -13,18 +13,18 @@ border-left: 1px solid #cccfd0; border-right: 1px solid #cccfd0; } -.v-slider-handle { +.#{$primaryStyleName}-handle { background: transparent url(img/handle-horizontal.png); width: 12px; height: 12px; margin-top: -5px; cursor: pointer; } -.v-slider-handle:hover { +.#{$primaryStyleName}-handle:hover { background-position: left bottom; } -.v-slider-scrollbar .v-slider-handle, -.v-slider-scrollbar.v-slider-vertical .v-slider-handle { +.#{$primaryStyleName}-scrollbar .#{$primaryStyleName}-handle, +.#{$primaryStyleName}-scrollbar.#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle { background: #ffffff; border: 1px solid #cccfd0; border-radius: 6px; @@ -32,14 +32,14 @@ -webkit-border-radius: 6px; } -.v-slider-vertical { +.#{$primaryStyleName}-vertical { width: 3px; margin: 0 5px; border: none; border-left: 1px solid #cccfd0; border-right: 1px solid #cccfd0; } -.v-slider-vertical .v-slider-base { +.#{$primaryStyleName}-vertical .#{$primaryStyleName}-base { width: 2px; border-left: 1px solid #cbcdce; border-right: none; @@ -47,25 +47,25 @@ border-top: 1px solid #cccfd0; border-bottom: 1px solid #cccfd0; } -.v-slider-vertical .v-slider-handle { +.#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle { background: transparent url(img/handle-vertical.png); width: 12px; height: 12px; margin-left: -5px; } -.v-slider-vertical .v-slider-handle-active { +.#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle-active { background-position: left bottom; } /* Disabled by default -.v-slider-error .v-slider-base { +.#{$primaryStyleName}-error .#{$primaryStyleName}-base { background:transparent; background-color: #FFE0E0; } */ /* Disabled by default -.v-slider-required .v-slider-base { +.#{$primaryStyleName}-required .#{$primaryStyleName}-base { background:transparent; background-color: #FFE0E0; } diff --git a/WebContent/VAADIN/themes/runo/splitpanel/splitpanel.scss b/WebContent/VAADIN/themes/runo/splitpanel/splitpanel.scss index dd01217380..84b8f5cd44 100644 --- a/WebContent/VAADIN/themes/runo/splitpanel/splitpanel.scss +++ b/WebContent/VAADIN/themes/runo/splitpanel/splitpanel.scss @@ -1,17 +1,17 @@ -@mixin runo-splitpanel { +@mixin runo-splitpanel($primaryStyleName : v-splitpanel) { -.v-splitpanel-horizontal, -.v-splitpanel-vertical { +.#{$primaryStyleName}-horizontal, +.#{$primaryStyleName}-vertical { overflow: hidden; } -.v-splitpanel-hsplitter, -.v-splitpanel-hsplitter-locked { +.#{$primaryStyleName}-hsplitter, +.#{$primaryStyleName}-hsplitter-locked { width: 6px; } -.v-splitpanel-hsplitter div, -.v-splitpanel-hsplitter-locked div { +.#{$primaryStyleName}-hsplitter div, +.#{$primaryStyleName}-hsplitter-locked div { width: 6px; position: absolute; top: 0; @@ -21,13 +21,13 @@ margin: 0 -1px; } -.v-splitpanel-vsplitter, -.v-splitpanel-vsplitter-locked { +.#{$primaryStyleName}-vsplitter, +.#{$primaryStyleName}-vsplitter-locked { height: 6px; } -.v-splitpanel-vsplitter div, -.v-splitpanel-vsplitter-locked div { +.#{$primaryStyleName}-vsplitter div, +.#{$primaryStyleName}-vsplitter-locked div { height: 6px; background: #ccd2d0 url(img/bg_ver.png); border: 1px solid #b6bbbc; @@ -36,49 +36,49 @@ /* Rounded style */ -.v-splitpanel-hsplitter-rounded div, -.v-splitpanel-vsplitter-rounded div, -.v-splitpanel-hsplitter-rounded-locked div, -.v-splitpanel-vsplitter-rounded-locked div { +.#{$primaryStyleName}-hsplitter-rounded div, +.#{$primaryStyleName}-vsplitter-rounded div, +.#{$primaryStyleName}-hsplitter-rounded-locked div, +.#{$primaryStyleName}-vsplitter-rounded-locked div { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } -.v-splitpanel-hsplitter-rounded div, -.v-splitpanel-hsplitter-rounded-locked div { +.#{$primaryStyleName}-hsplitter-rounded div, +.#{$primaryStyleName}-hsplitter-rounded-locked div { top: 4px; bottom: 4px; } -.v-splitpanel-vsplitter-rounded div, -.v-splitpanel-vsplitter-rounded-locked div { +.#{$primaryStyleName}-vsplitter-rounded div, +.#{$primaryStyleName}-vsplitter-rounded-locked div { margin: -1px 4px; } /* Small style */ -.v-splitpanel-hsplitter-small, -.v-splitpanel-vsplitter-small, -.v-splitpanel-hsplitter-small-locked, -.v-splitpanel-vsplitter-small-locked { +.#{$primaryStyleName}-hsplitter-small, +.#{$primaryStyleName}-vsplitter-small, +.#{$primaryStyleName}-hsplitter-small-locked, +.#{$primaryStyleName}-vsplitter-small-locked { background: #b6bbbc; } -.v-splitpanel-hsplitter-small, -.v-splitpanel-hsplitter-small-locked { +.#{$primaryStyleName}-hsplitter-small, +.#{$primaryStyleName}-hsplitter-small-locked { width: 1px; } -.v-splitpanel-vsplitter-small, -.v-splitpanel-vsplitter-small-locked { +.#{$primaryStyleName}-vsplitter-small, +.#{$primaryStyleName}-vsplitter-small-locked { height: 1px; } -.v-splitpanel-hsplitter-small div, -.v-splitpanel-hsplitter-small-locked div { +.#{$primaryStyleName}-hsplitter-small div, +.#{$primaryStyleName}-hsplitter-small-locked div { border: none; background: transparent; width: 5px; margin: 0 0 0 -2px; } -.v-splitpanel-vsplitter-small div, -.v-splitpanel-vsplitter-small-locked div { +.#{$primaryStyleName}-vsplitter-small div, +.#{$primaryStyleName}-vsplitter-small-locked div { border: none; background: transparent; height: 5px; diff --git a/WebContent/VAADIN/themes/runo/table/table.scss b/WebContent/VAADIN/themes/runo/table/table.scss index 47bcb2caca..3902ed7cb0 100644 --- a/WebContent/VAADIN/themes/runo/table/table.scss +++ b/WebContent/VAADIN/themes/runo/table/table.scss @@ -1,86 +1,86 @@ -@mixin runo-table { +@mixin runo-table($primaryStyleName : v-table) { -.v-table-header-wrap { +.#{$primaryStyleName}-header-wrap { height: 36px; border: 1px solid #b6bbbc; border-bottom: none; background: #e7e9ea url(img/header-bg.png) repeat-x; } -.v-table-header { +.#{$primaryStyleName}-header { height: 36px; } -.v-table-footer-wrap { +.#{$primaryStyleName}-footer-wrap { border-color: #b6bbbc; background: #e7e9ea url(img/header-bg.png) repeat-x; } -.v-table-footer td { +.#{$primaryStyleName}-footer td { border-right-color: #e8eaec; padding-top: 3px; padding-bottom: 3px; } -.v-table-resizer { +.#{$primaryStyleName}-resizer { height: 36px; width: 4px; background: transparent url(img/resizer-bg.png) repeat-y 100% 50%; } -.v-table-caption-container { +.#{$primaryStyleName}-caption-container { color: #393a3c; font-size: 15px; padding: 9px 2px 9px 0; text-shadow: #ffffff 0 1px 0; margin-left: 4px; } -.v-table-sort-indicator { +.#{$primaryStyleName}-sort-indicator { width: 0; height: 36px; } -.v-table-header-cell-asc .v-table-sort-indicator { +.#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator { background: transparent url(img/sort-asc.png) no-repeat right 50%; width: 20px; height: 36px; } -.v-table-header-cell-desc .v-table-sort-indicator { +.#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator { background: transparent url(img/sort-desc.png) no-repeat right 50%; width: 20px; height: 36px; } -.v-table-header-cell:hover, -.v-table-header-cell-asc:hover, -.v-table-header-cell-desc:hover { +.#{$primaryStyleName}-header-cell:hover, +.#{$primaryStyleName}-header-cell-asc:hover, +.#{$primaryStyleName}-header-cell-desc:hover { background: transparent url(img/header-bg-over.png) repeat-x; } -.v-table-body { +.#{$primaryStyleName}-body { background: #fff; border: 1px solid #b6bbbc; } -tr.v-table-row:hover, -tr.v-table-row-odd:hover { +tr.#{$primaryStyleName}-row:hover, +tr.#{$primaryStyleName}-row-odd:hover { background-color: #edeeee; } -.v-table-row, -.v-table-body-noselection .v-table-row:hover { +.#{$primaryStyleName}-row, +.#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row:hover { background-color: #fff; } -.v-table-row-odd, -.v-table-body-noselection .v-table-row-odd:hover { +.#{$primaryStyleName}-row-odd, +.#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row-odd:hover { background-color: #f6f7f7; } -.v-table-generated-row { +.#{$primaryStyleName}-generated-row { color: #393a3c; font-size: 15px; padding: 9px 2px 9px 0; text-shadow: #ffffff 0 1px 0; background: #e7e9ea; } -.v-table tr.v-selected { +.#{$primaryStyleName} tr.v-selected { background: #57a7ed; color: #fff; } -.v-table-cell-content { +.#{$primaryStyleName}-cell-content { padding: 0 6px 0 4px; border-right: none; } -.v-table-cell-wrapper { +.#{$primaryStyleName}-cell-wrapper { white-space: nowrap; overflow: hidden; line-height: 23px; @@ -88,40 +88,40 @@ tr.v-table-row-odd:hover { padding: 3px 0 0 0; } /* Fix textfield size to correspond label size inside table */ -.v-table-cell-content .v-textfield, -.v-table-cell-content .v-button { +.#{$primaryStyleName}-cell-content .v-textfield, +.#{$primaryStyleName}-cell-content .v-button { margin: -3px 0 0 0; } -.v-table-cell-content .v-textfield, -.v-table-cell-content .v-datefield { +.#{$primaryStyleName}-cell-content .v-textfield, +.#{$primaryStyleName}-cell-content .v-datefield { width: 97%; /* approximate */ } /* ...but not for datefield textarea */ -.v-table-cell-content .v-datefield .v-textfield { +.#{$primaryStyleName}-cell-content .v-datefield .v-textfield { width: auto; } /* datefield button is too high for table cell */ -.v-table-cell-content .v-datefield-button { +.#{$primaryStyleName}-cell-content .v-datefield-button { height: 25px; margin: -3px 0 0 0; } -.v-table-column-selector { +.#{$primaryStyleName}-column-selector { background: transparent url(img/colsel.png) no-repeat; margin: -36px 0 0 0; height: 36px; width: 15px; } -.v-table-focus-slot-left { +.#{$primaryStyleName}-focus-slot-left { border-color: #b6bbbc; margin-bottom: -36px; width: auto; border-right: none; } -.v-table-focus-slot-right { +.#{$primaryStyleName}-focus-slot-right { border-color: #b6bbbc; } -.v-table-header-drag { +.#{$primaryStyleName}-header-drag { background: #e7edf3 url(img/header-bg.png) repeat-x; border: 1px solid #b6bbbc; padding: 4px; @@ -130,13 +130,13 @@ tr.v-table-row-odd:hover { font-size: 15px; margin-top: 20px; } -.v-table-scrollposition { +.#{$primaryStyleName}-scrollposition { width: 160px; height: 39px; background: transparent url(img/scroll-position-bg.png); border: none; } -.v-table-scrollposition span { +.#{$primaryStyleName}-scrollposition span { display: block; margin-top: 8px; text-align: center; @@ -153,52 +153,52 @@ tr.v-table-row-odd:hover { .v-off div { text-indent: 6px; } -.v-table .v-link { +.#{$primaryStyleName} .v-link { display: inline; } /* Borderless style */ -.v-table-borderless .v-table-header-wrap, -.v-table-borderless .v-table-body { +.#{$primaryStyleName}-borderless .#{$primaryStyleName}-header-wrap, +.#{$primaryStyleName}-borderless .#{$primaryStyleName}-body { border: none; } -.v-table-borderless .v-table-header-wrap { +.#{$primaryStyleName}-borderless .#{$primaryStyleName}-header-wrap { border-bottom: 1px solid #b6bbbc; } -.v-table-borderless .v-table-body { +.#{$primaryStyleName}-borderless .#{$primaryStyleName}-body { background: transparent; } -.v-table-borderless .v-table-row, -.v-table-borderless .v-table-row-odd, -.v-table-borderless .v-table-body-noselection .v-table-row:hover, -.v-table-borderless .v-table-body-noselection .v-table-row-odd:hover { +.#{$primaryStyleName}-borderless .#{$primaryStyleName}-row, +.#{$primaryStyleName}-borderless .#{$primaryStyleName}-row-odd, +.#{$primaryStyleName}-borderless .#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row:hover, +.#{$primaryStyleName}-borderless .#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row-odd:hover { background-color: transparent; } /* Small style */ -.v-table-small .v-table-header-wrap, -.v-table-small .v-table-header { +.#{$primaryStyleName}-small .#{$primaryStyleName}-header-wrap, +.#{$primaryStyleName}-small .#{$primaryStyleName}-header { height: 22px; } -.v-table-small .v-table-sort-indicator, -.v-table-small .v-table-header-cell-asc .v-table-sort-indicator, -.v-table-small .v-table-header-cell-desc .v-table-sort-indicator { +.#{$primaryStyleName}-small .#{$primaryStyleName}-sort-indicator, +.#{$primaryStyleName}-small .#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator, +.#{$primaryStyleName}-small .#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator { height: 22px; } -.v-table-small .v-table-caption-container { +.#{$primaryStyleName}-small .#{$primaryStyleName}-caption-container { font-size: 13px; padding-top: 3px; padding-bottom: 3px; } -.v-table-small .v-table-column-selector { +.#{$primaryStyleName}-small .#{$primaryStyleName}-column-selector { margin-top: -21px; height: 21px; } -.v-table-small .v-table-body { +.#{$primaryStyleName}-small .#{$primaryStyleName}-body { font-size: 12px; } -.v-table-small .v-table-cell-wrapper { +.#{$primaryStyleName}-small .#{$primaryStyleName}-cell-wrapper { line-height: 18px; padding: 2px 0; } diff --git a/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.scss b/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.scss index 6ed8585547..cb32136086 100644 --- a/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.scss +++ b/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.scss @@ -1,23 +1,23 @@ -@mixin runo-tabsheet { +@mixin runo-tabsheet($primaryStyleName : v-tabsheet) { -.v-tabsheet-tabs { +.#{$primaryStyleName}-tabs { height: 48px; } -.v-tabsheet-spacertd div { +.#{$primaryStyleName}-spacertd div { height: 37px; border: 1px solid #b6bbbc; background: transparent url(img/tab-bg.png); padding: 0; } -.v-tabsheet-scroller { +.#{$primaryStyleName}-scroller { margin-top: -37px; float: right; } -.v-tabsheet-scrollerPrev, -.v-tabsheet-scrollerNext, -.v-tabsheet-scrollerPrev-disabled, -.v-tabsheet-scrollerNext-disabled { +.#{$primaryStyleName}-scrollerPrev, +.#{$primaryStyleName}-scrollerNext, +.#{$primaryStyleName}-scrollerPrev-disabled, +.#{$primaryStyleName}-scrollerNext-disabled { border: none; width: 12px; padding: 0; @@ -25,27 +25,27 @@ opacity: 0.9999; margin-top: -1px; } -.v-tabsheet-scrollerNext, -.v-tabsheet-scrollerNext-disabled { +.#{$primaryStyleName}-scrollerNext, +.#{$primaryStyleName}-scrollerNext-disabled { background: transparent url(img/next.png) no-repeat; } -.v-tabsheet-scrollerPrev, -.v-tabsheet-scrollerPrev-disabled { +.#{$primaryStyleName}-scrollerPrev, +.#{$primaryStyleName}-scrollerPrev-disabled { background: transparent url(img/prev.png) no-repeat; } -.v-tabsheet-scrollerPrev:hover, -.v-tabsheet-scrollerNext:hover { +.#{$primaryStyleName}-scrollerPrev:hover, +.#{$primaryStyleName}-scrollerNext:hover { background-position: -24px 0px; } -.v-tabsheet-scrollerPrev-disabled, -.v-tabsheet-scrollerNext-disabled { +.#{$primaryStyleName}-scrollerPrev-disabled, +.#{$primaryStyleName}-scrollerNext-disabled { background-position: -12px 0px; } -.v-tabsheet-scrollerPrev-disabled:hover, -.v-tabsheet-scrollerNext-disabled:hover { +.#{$primaryStyleName}-scrollerPrev-disabled:hover, +.#{$primaryStyleName}-scrollerNext-disabled:hover { background-position: -12px 0px; } -.v-tabsheet-tabitem { +.#{$primaryStyleName}-tabitem { border: 1px solid #b6bbbc; border-right: none; height: 37px; @@ -56,11 +56,11 @@ line-height: 18px; background: #f8f9f9 url(img/tab-bg.png); } -.v-tabsheet-tabitem .v-caption { +.#{$primaryStyleName}-tabitem .v-caption { height: 20px; padding: 9px 15px 8px 15px; } -.v-tabsheet-tabitem-selected { +.#{$primaryStyleName}-tabitem-selected { border: none; background: transparent url(../panel/img/top-left.png) no-repeat; margin: 0; @@ -68,20 +68,20 @@ height: 48px; color: #ee5311; } -.v-tabsheet-tabitem:hover { +.#{$primaryStyleName}-tabitem:hover { color: #4b5257; } -.v-tabsheet-tabitem-selected:hover { +.#{$primaryStyleName}-tabitem-selected:hover { color: #ee5311; } -.v-tabsheet-tabitem-selected .v-caption { +.#{$primaryStyleName}-tabitem-selected .v-caption { background: transparent url(../panel/img/top-right.png) repeat-x right top; margin: 0 -1px 0 9px; height: 18px; padding: 16px 16px 14px 7px; overflow: visible; } -.v-tabsheet-caption-close { +.#{$primaryStyleName}-caption-close { margin-left: 3px; margin-right: -3px; margin-top: 2px; @@ -93,29 +93,29 @@ color: #777f85; line-height: 13px; } -.v-tabsheet-caption-close:hover { +.#{$primaryStyleName}-caption-close:hover { background: #dce0e0; } -.v-tabsheet-caption-close:active { +.#{$primaryStyleName}-caption-close:active { background: #b6bbbc; color: #fff; } -.v-tabsheet-content { +.#{$primaryStyleName}-content { border: 1px solid #babfc0; background-color: #fff; border-bottom: 1px solid #dee2e3; border-top: none; } -.v-tabsheet-hidetabs .v-tabsheet-content { +.#{$primaryStyleName}-hidetabs .#{$primaryStyleName}-content { border-top: 1px solid #b5babb; } -.v-tabsheet-deco { +.#{$primaryStyleName}-deco { height: 10px; background: transparent url(../panel/img/bottom-right.png) repeat-x right top; margin-left: 9px; overflow: visible; } -.v-tabsheet-deco:before { +.#{$primaryStyleName}-deco:before { display: block; width: 9px; @@ -124,7 +124,7 @@ background: transparent url(../panel/img/bottom-left.png) no-repeat; } /* Progress indication * -.v-tabsheet-loading .v-tabsheet-tabitem-selected .v-captiontext { +.#{$primaryStyleName}-loading .#{$primaryStyleName}-tabitem-selected .v-captiontext { background: transparent url(../../base/common/img/ajax-loader.gif) no-repeat top right; margin-left: -10px; padding-left: 10px; @@ -134,36 +134,36 @@ padding-top: 12px; }*/ /* IE specific styles */ -.v-ie & .v-tabsheet-content { +.v-ie & .#{$primaryStyleName}-content { border-bottom: none; } -.v-ie & .v-tabsheet-deco { +.v-ie & .#{$primaryStyleName}-deco { height: 1px; background: #babfc0; overflow: hidden; margin: 0; } -.v-ie8 & .v-tabsheet-deco, -.v-ie9 & .v-tabsheet-deco { +.v-ie8 & .#{$primaryStyleName}-deco, +.v-ie9 & .#{$primaryStyleName}-deco { width: 100%; } /* Light-style */ -.v-tabsheet-tabcontainer-light { +.#{$primaryStyleName}-tabcontainer-light { height: 32px; } -.v-tabsheet-tabs-light { +.#{$primaryStyleName}-tabs-light { height: 32px; width: 100%; overflow:hidden; background: transparent; } -.v-tabsheet-tabs-light .v-tabsheet-spacertd div { +.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-spacertd div { height: 31px; border: none; border-bottom: 1px solid #b6bbbc; background: transparent url(img/inline-tab-bg.png) repeat-x; } -.v-tabsheet-tabs-light .v-tabsheet-tabitem { +.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem { border: none; border-bottom: 1px solid #b6bbbc; height: 30px; @@ -176,20 +176,20 @@ cursor: pointer; text-shadow: #fff 0 1px 0; } -.v-tabsheet-tabs-light .v-tabsheet-tabitem .v-caption { +.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem .v-caption { height: 24px; padding: 8px 10px 0 11px; background: transparent url(img/inline-tab-border.png) no-repeat; } -.v-tabsheet-tabs-light .v-tabsheet-tabitemcell-first .v-caption { +.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitemcell-first .v-caption { margin-left: 5px; background: transparent; } -.v-tabsheet-tabs-light .v-tabsheet-tabitemcell-selected + .v-tabsheet-tabitemcell .v-caption, -.v-tabsheet-tabs-light .v-tabsheet-tabitemcell-selected-first + .v-tabsheet-tabitemcell .v-caption { +.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitemcell-selected + .#{$primaryStyleName}-tabitemcell .v-caption, +.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitemcell-selected-first + .#{$primaryStyleName}-tabitemcell .v-caption { background: transparent; } -.v-tabsheet-tabs-light .v-tabsheet-tabitem-selected { +.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem-selected { border: none; background: transparent url(img/inline-tab-right.png) no-repeat right top; margin: 0; @@ -199,58 +199,58 @@ color: #ee5311; text-shadow: none; } -.v-tabsheet-tabs-light .v-tabsheet-tabitem:hover { +.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem:hover { color: #4b5257; } -.v-tabsheet-tabs-light .v-tabsheet-tabitem-selected:hover { +.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem-selected:hover { color: #ee5311; } -.v-tabsheet-tabs-light .v-tabsheet-tabitem-selected .v-caption { +.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem-selected .v-caption { background: transparent url(img/inline-tab-left.png) no-repeat -7px 0; margin: 0; height: 23px; padding: 9px 10px 0 11px; overflow: visible; } -.v-tabsheet-tabs-light .v-tabsheet-tabitemcell-first .v-tabsheet-tabitem-selected .v-caption { +.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitemcell-first .#{$primaryStyleName}-tabitem-selected .v-caption { background: transparent url(img/inline-tab-left.png) no-repeat -3px 0; padding-left: 16px; } -.v-tabsheet-tabs-light .v-tabsheet-caption-close { +.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-caption-close { margin-top: 0; text-shadow: none; } -.v-tabsheet-content-light { +.#{$primaryStyleName}-content-light { border: none; background: transparent; } -.v-tabsheet-light .v-tabsheet-hidetabs .v-tabsheet-content { +.#{$primaryStyleName}-light .#{$primaryStyleName}-hidetabs .#{$primaryStyleName}-content { border: none; } -.v-tabsheet-deco-light { +.#{$primaryStyleName}-deco-light { height: 0; overflow: hidden; } -.v-tabsheet-deco-light:before { +.#{$primaryStyleName}-deco-light:before { display: none; } /* Scroller */ -.v-tabsheet-tabcontainer-light .v-tabsheet-scrollerPrev, -.v-tabsheet-tabcontainer-light .v-tabsheet-scrollerNext { +.#{$primaryStyleName}-tabcontainer-light .#{$primaryStyleName}-scrollerPrev, +.#{$primaryStyleName}-tabcontainer-light .#{$primaryStyleName}-scrollerNext { margin-top: 2px; height: 34px; } -.v-tabsheet-tabcontainer-light .v-tabsheet-scrollerPrev-disabled, -.v-tabsheet-tabcontainer-light .v-tabsheet-scrollerNext-disabled { +.#{$primaryStyleName}-tabcontainer-light .#{$primaryStyleName}-scrollerPrev-disabled, +.#{$primaryStyleName}-tabcontainer-light .#{$primaryStyleName}-scrollerNext-disabled { margin-top: 2px; height: 34px; } /* Progress indication * -.v-tabsheet-loading .v-tabsheet-tabs-light .v-tabsheet-tabitem-selected .v-captiontext { +.#{$primaryStyleName}-loading .#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem-selected .v-captiontext { margin-left: -3px; padding-left: 3px; }*/ -.v-ie & .v-tabsheet-deco-light { +.v-ie & .#{$primaryStyleName}-deco-light { height: 0; } diff --git a/WebContent/VAADIN/themes/runo/textfield/textfield.scss b/WebContent/VAADIN/themes/runo/textfield/textfield.scss index 3382fbee91..3516f529ce 100644 --- a/WebContent/VAADIN/themes/runo/textfield/textfield.scss +++ b/WebContent/VAADIN/themes/runo/textfield/textfield.scss @@ -1,6 +1,6 @@ -@mixin runo-textfield { +@mixin runo-textfield($primaryStyleName : v-textfield) { -.v-textfield, +.#{$primaryStyleName}, .v-textarea { background: #fff url(img/bg.png) repeat-x; border: 1px solid #b6b6b6; @@ -10,8 +10,8 @@ margin: 0; line-height: 14px; } -input.v-textfield, -input[type=text].v-textfield, +input.#{$primaryStyleName}, +input[type=text].#{$primaryStyleName}, textarea.v-textarea { font-size: 12px; height: 22px; @@ -20,11 +20,11 @@ textarea.v-textarea { textarea.v-textarea { height: auto; } -.v-textfield-focus, +.#{$primaryStyleName}-focus, .v-textarea-focus { border-color: #5daee8; } -input.v-textfield-prompt, +input.#{$primaryStyleName}-prompt, textarea.v-textarea-prompt { color: #999; font-style: normal; @@ -37,8 +37,8 @@ textarea.v-textarea-prompt { } /* Small style */ -input.v-textfield-small, -input[type=text].v-textfield-small, +input.#{$primaryStyleName}-small, +input[type=text].#{$primaryStyleName}-small, textarea.v-textarea-small { font-size: 11px; height: 18px; diff --git a/WebContent/VAADIN/themes/runo/tree/tree.scss b/WebContent/VAADIN/themes/runo/tree/tree.scss index cb3dff3156..677e0e8a93 100644 --- a/WebContent/VAADIN/themes/runo/tree/tree.scss +++ b/WebContent/VAADIN/themes/runo/tree/tree.scss @@ -1,24 +1,24 @@ -@mixin runo-tree { +@mixin runo-tree($primaryStyleName : v-tree) { -.v-tree-node { +.#{$primaryStyleName}-node { background: transparent url(img/collapsed.png) no-repeat 2px 1px; } -.v-tree-node-expanded { +.#{$primaryStyleName}-node-expanded { background: transparent url(img/expanded.png) no-repeat 2px 1px; } -.v-tree-node-caption { +.#{$primaryStyleName}-node-caption { margin-left: 18px; } -.v-tree-connectors .v-tree-node-caption { +.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-caption { padding-bottom: 1px; } -.v-tree-node-caption .v-icon { +.#{$primaryStyleName}-node-caption .v-icon { margin: 0 2px 0 -2px; } -.v-tree-node-caption span { +.#{$primaryStyleName}-node-caption span { padding: 0 1px; } -.v-tree-node-selected span { +.#{$primaryStyleName}-node-selected span { background: #57a7ed; color: #fff; padding: 1px 2px 0; @@ -29,32 +29,32 @@ -moz-border-radius: 2px; border-radius: 2px; } -.v-tree-node-children { +.#{$primaryStyleName}-node-children { padding-left: 16px; } -.v-tree{ +.#{$primaryStyleName}{ outline:none; } -.v-tree-node-caption.v-tree-node-focused span{ +.#{$primaryStyleName}-node-caption.#{$primaryStyleName}-node-focused span{ padding-left: 1px; padding-top: 0px; padding-bottom: 0px; } -.v-tree-node-focused span{ +.#{$primaryStyleName}-node-focused span{ border: 1px dotted black; } /*************************************** * Drag'n'drop styles ***************************************/ -.v-tree .v-tree-node-drag-top, -.v-tree .v-tree-node-drag-top.v-tree-node-expanded { +.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top, +.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-expanded { background-position: 2px 0; } -.v-tree-connectors .v-tree-node-drag-top, -.v-tree-connectors .v-tree-node-expanded.v-tree-node-drag-top { +.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top, +.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded.#{$primaryStyleName}-node-drag-top { background-position: 2px -53px; } -.v-tree-connectors .v-tree-node-drag-top.v-tree-node-leaf { +.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-leaf { background-position: 2px 50%; } diff --git a/WebContent/VAADIN/themes/runo/window/window.scss b/WebContent/VAADIN/themes/runo/window/window.scss index b08f87b7fa..454b6914c9 100644 --- a/WebContent/VAADIN/themes/runo/window/window.scss +++ b/WebContent/VAADIN/themes/runo/window/window.scss @@ -1,22 +1,22 @@ -@mixin runo-window { +@mixin runo-window($primaryStyleName : v-window) { -.v-window { +.#{$primaryStyleName} { color: #464f52; font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif; font-size: 13px; line-height: 18px; background: transparent url(img/bottom-left.png) no-repeat left bottom; } -.v-window-wrap { +.#{$primaryStyleName}-wrap { background: transparent url(img/top-left.png) no-repeat; } -.v-window-outerheader { +.#{$primaryStyleName}-outerheader { height: 49px; margin-left: 9px; padding: 15px 40px 11px 12px; background: transparent url(img/top-right.png) no-repeat right top; } -.v-window-header { +.#{$primaryStyleName}-header { font-size: 18px; line-height: 1.2; font-weight: normal; @@ -24,7 +24,7 @@ color: #f14c1a; text-shadow: 0 1px 0 #fff; } -.v-window-contents > div { +.#{$primaryStyleName}-contents > div { background: #fff; border: 2px solid #babfc0; border-top: none; @@ -33,13 +33,13 @@ -moz-box-sizing: border-box; box-sizing: border-box; } -.v-window div.v-window-footer { +.#{$primaryStyleName} div.#{$primaryStyleName}-footer { height: 8px; margin-left: 9px; background: transparent url(img/bottom-right.png) no-repeat right bottom; overflow: visible; } -.v-window-resizebox { +.#{$primaryStyleName}-resizebox { position: absolute; /* Needed to position the element over ScrollPanel, which is relatively positioned */ right: 5px; width: 10px; @@ -47,11 +47,11 @@ margin-top: -7px; background: transparent url(img/resize.png); } -.v-window-resizebox-disabled { +.#{$primaryStyleName}-resizebox-disabled { background: transparent; display: block; } -.v-window-closebox { +.#{$primaryStyleName}-closebox { position: absolute; top: 21px; right: 24px; @@ -59,35 +59,35 @@ height: 12px; background: transparent url(img/close.png); } -.v-window-closebox:hover { +.#{$primaryStyleName}-closebox:hover { background-position: 0 -12px; } -.v-window-modalitycurtain { +.#{$primaryStyleName}-modalitycurtain { background: #fff; } /* Dialog style */ -.v-window-dialog { +.#{$primaryStyleName}-dialog { background-image: url(img/dialog/bottom-left.png); } -.v-window-dialog .v-window-outerheader { +.#{$primaryStyleName}-dialog .#{$primaryStyleName}-outerheader { height: 14px; padding: 13px 30px 5px 8px; background: transparent url(img/top-right.png) no-repeat right top; } -.v-window-dialog .v-window-header { +.#{$primaryStyleName}-dialog .#{$primaryStyleName}-header { font-size: 12px; line-height: normal; font-weight: bold; letter-spacing: 0; text-shadow: 0 1px 0 #fff; } -.v-window-dialog .v-window-contents { +.#{$primaryStyleName}-dialog .#{$primaryStyleName}-contents { background: #f1f3f3; } -.v-window-dialog div.v-window-footer { +.#{$primaryStyleName}-dialog div.#{$primaryStyleName}-footer { background-image: url(img/dialog/bottom-right.png); } -.v-window-dialog .v-window-closebox { +.#{$primaryStyleName}-dialog .#{$primaryStyleName}-closebox { top: 14px; right: 16px; background-image: url(img/dialog/close.png); |