-@mixin runo-absolutelayout {
+@mixin runo-absolutelayout($primaryStyleName : v-absolutelayout) {
-.v-absolutelayout-wrapper {
+.#{$primaryStyleName}-wrapper {
position: absolute;
overflow:hidden;
}
-@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;
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;
-@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;
-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;
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;
}
/* 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;
/* 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;
/* 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;
-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;
/* 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;
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;
}
-@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 */
-@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;
}
-@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;
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;
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;
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;
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;
}
-@mixin runo-link {
+@mixin runo-link($primaryStyleName : v-link) {
-.v-link a {
+.#{$primaryStyleName} a {
color: #464f52;
}
-@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;
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;
}
-@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;
-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;
-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;
-@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;
-@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;
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;
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;
}
-@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;
-@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;
}
-@mixin runo-select {
+@mixin runo-select($primaryStyleName : v-filterselect) {
.v-select-select {
font-size: 13px;
/** 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;
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;
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%;
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%;
/* 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,
-@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;
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;
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;
-@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;
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;
-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;
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;
}
-@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;
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;
/* 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;
-@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;
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;
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;
.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;
}
-@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;
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;
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;
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;
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;
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;
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;
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;
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;
}
-@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;
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;
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;
}
/* 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;
-@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;
-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%;
}
-@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;
color: #f14c1a;
text-shadow: 0 1px 0 #fff;
}
-.v-window-contents > div {
+.#{$primaryStyleName}-contents > div {
background: #fff;
border: 2px solid #babfc0;
border-top: none;
-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;
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;
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);
projects / vaadin-framework.git / commitdiff