-@mixin base-absolutelayout($name : v-absolutelayout) {
+@mixin base-absolutelayout($primaryStyleName : v-absolutelayout) {
-.#{$name}-wrapper {
+.#{$primaryStyleName}-wrapper {
position: absolute;
overflow: hidden;
}
-.#{$name}-margin, .#{$name}-canvas {
+.#{$primaryStyleName}-margin, .#{$primaryStyleName}-canvas {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-.#{$name}.v-has-height > div, .#{$name}.v-has-height > div > div {
+.#{$primaryStyleName}.v-has-height > div, .#{$primaryStyleName}.v-has-height > div > div {
height: 100%;
}
-.#{$name}.v-has-width > div, .#{$name}.v-has-width > div > div {
+.#{$primaryStyleName}.v-has-width > div, .#{$primaryStyleName}.v-has-width > div > div {
width: 100%;
}
-@mixin base-button($name : v-button) {
+@mixin base-button($primaryStyleName : v-button) {
/*
* Default button (more customizable)
* -------------------------------------- */
-.#{$name} {
+.#{$primaryStyleName} {
display: inline-block;
zoom: 1;
text-align: center !important;
box-sizing: border-box;
}
-.#{$name}.v-disabled {
+.#{$primaryStyleName}.v-disabled {
cursor: default;
}
-.#{$name}-wrap,
-.#{$name}-caption {
+.#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-caption {
vertical-align: baseline;
white-space: nowrap;
font: inherit;
line-height: normal;
}
-.#{$name} .v-icon {
+.#{$primaryStyleName} .v-icon {
vertical-align: middle;
margin-right: 3px;
border: none;
}
-.#{$name} .v-errorindicator {
+.#{$primaryStyleName} .v-errorindicator {
display: inline-block;
zoom: 1;
vertical-align: middle;
}
/* Link style (we really should deprecate this) */
-.#{$name}-link {
+.#{$primaryStyleName}-link {
border: none;
text-align: left !important;
background: transparent;
}
/* Inset Safari focus outline a bit */
-.v-sa .#{$name}-link:focus{
+.v-sa .#{$primaryStyleName}-link:focus{
outline-offset: -3px;
}
-.#{$name}-link .#{$name}-caption {
+.#{$primaryStyleName}-link .#{$primaryStyleName}-caption {
text-decoration: underline;
color: inherit;
text-align: left;
-@mixin base-checkbox($name : v-checkbox) {
+@mixin base-checkbox($primaryStyleName : v-checkbox) {
- .#{$name} {
+ .#{$primaryStyleName} {
display: block;
}
-.#{$name},
-.#{$name} label,
-.#{$name} input,
-.#{$name} .v-icon {
+.#{$primaryStyleName},
+.#{$primaryStyleName} label,
+.#{$primaryStyleName} input,
+.#{$primaryStyleName} .v-icon {
vertical-align: middle;
white-space: nowrap;
}
-.#{$name} .v-icon {
+.#{$primaryStyleName} .v-icon {
margin: 0 2px;
}
-.#{$name} .v-errorindicator {
+.#{$primaryStyleName} .v-errorindicator {
float: none;
display: inline;
display: inline-block;
/* Disabled by default
-.#{$name}-error {
+.#{$primaryStyleName}-error {
background: #ffe0e0;
}
*/
/* Disabled by default
-.#{$name}-required {
+.#{$primaryStyleName}-required {
background: #ffe0e0;
}
*/
-@mixin base-nativebutton($name : v-nativebutton) {
+@mixin base-nativebutton($primaryStyleName : v-nativebutton) {
-.#{$name} .v-icon {
+.#{$primaryStyleName} .v-icon {
vertical-align: middle;
margin-right: 3px;
border: none;
}
-.#{$name} .v-errorindicator {
+.#{$primaryStyleName} .v-errorindicator {
display: inline-block;
zoom: 1;
vertical-align: middle;
}
/* Link style (we really should deprecate this) */
-.#{$name}-link {
+.#{$primaryStyleName}-link {
border: none;
text-align: left !important;
background: transparent;
user-select: text;
}
-.#{$name}-link .#{$name}-caption {
+.#{$primaryStyleName}-link .#{$primaryStyleName}-caption {
text-decoration: underline;
color: inherit;
text-align: left;
}
-.#{$name} {
+.#{$primaryStyleName} {
text-align: center !important;
cursor: pointer;
white-space: nowrap;
font: inherit;
line-height: normal;
}
-.#{$name} .#{$name}-caption {
+.#{$primaryStyleName} .#{$primaryStyleName}-caption {
vertical-align: middle;
white-space: nowrap;
font: inherit;
color: inherit;
}
-.#{$name} .v-icon {
+.#{$primaryStyleName} .v-icon {
vertical-align: middle;
margin-right: 3px;
}
-.#{$name} .v-errorindicator {
+.#{$primaryStyleName} .v-errorindicator {
display: inline-block;
zoom: 1;
float: none;
}
/* Fixes stretched buttons in IE7*/
-.v-ie .#{$name} {
+.v-ie .#{$primaryStyleName} {
overflow: visible;
padding-left: 1em;
padding-right: 1em;
}
-.v-ie .#{$name}-link {
+.v-ie .#{$primaryStyleName}-link {
padding: 0;
}
-@mixin base-caption($name : v-caption) {
+@mixin base-caption($primaryStyleName : v-caption) {
-.#{$name}wrapper {
+.#{$primaryStyleName}wrapper {
text-align: left; /* Force default alignment */
}
-.#{$name} {
+.#{$primaryStyleName} {
overflow: hidden;
white-space: nowrap;
}
.v-errorindicator {
display: inline-block;
}
-.#{$name} .v-icon {
+.#{$primaryStyleName} .v-icon {
display: inline-block;
padding-right: 2px;
vertical-align: middle;
}
-.#{$name} .#{$name}text {
+.#{$primaryStyleName} .#{$primaryStyleName}text {
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
-.#{$name} .v-required-field-indicator {
+.#{$primaryStyleName} .v-required-field-indicator {
display: inline-block;
}
-@mixin base-csslayout($name : v-csslayout) {
+@mixin base-csslayout($primaryStyleName : v-csslayout) {
-.#{$name} {
+.#{$primaryStyleName} {
overflow: hidden;
}
/* More specific selector to override 'v-connector' */
-div.#{$name} {
+div.#{$primaryStyleName} {
display: block;
}
-.#{$name}-margin, .#{$name}-container {
+.#{$primaryStyleName}-margin, .#{$primaryStyleName}-container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-.v-has-width > .#{$name}-margin,
-.v-has-width > .#{$name}-margin > .#{$name}-container {
+.v-has-width > .#{$primaryStyleName}-margin,
+.v-has-width > .#{$primaryStyleName}-margin > .#{$primaryStyleName}-container {
width: 100%;
}
-.v-has-height > .#{$name}-margin,
-.v-has-height > .#{$name}-margin > .#{$name}-container {
+.v-has-height > .#{$primaryStyleName}-margin,
+.v-has-height > .#{$primaryStyleName}-margin > .#{$primaryStyleName}-container {
height: 100%;
}
-.#{$name}-margin-top {
+.#{$primaryStyleName}-margin-top {
padding-top: 12px;
}
-.#{$name}-margin-bottom {
+.#{$primaryStyleName}-margin-bottom {
padding-bottom: 12px;
}
-.#{$name}-margin-left {
+.#{$primaryStyleName}-margin-left {
padding-left: 12px;
}
-.#{$name}-margin-right {
+.#{$primaryStyleName}-margin-right {
padding-right: 12px;
}
-@mixin base-customcomponent($name : v-customcomponent) {
+@mixin base-customcomponent($primaryStyleName : v-customcomponent) {
-.#{$name} {
+.#{$primaryStyleName} {
overflow: hidden;
}
-@mixin base-customlayout($name : v-customlayout) {
+@mixin base-customlayout($primaryStyleName : v-customlayout) {
-.#{$name} {
+.#{$primaryStyleName} {
overflow: hidden;
}
-@mixin base-datefield($name : v-datefield) {
+@mixin base-datefield($primaryStyleName : v-datefield) {
-.#{$name} {
+.#{$primaryStyleName} {
white-space: nowrap;
display: inline-block; /* Force minimum width */
line-height:0; /* Force minimum height */
}
-.#{$name}-textfield {
+.#{$primaryStyleName}-textfield {
vertical-align: top;
}
-.#{$name}-button {
+.#{$primaryStyleName}-button {
cursor: pointer;
}
-.#{$name}-prompt .#{$name}-textfield {
+.#{$primaryStyleName}-prompt .#{$primaryStyleName}-textfield {
color: #999;
font-style: italic;
}
-.#{$name} .#{$name}-button-readonly {
+.#{$primaryStyleName} .#{$primaryStyleName}-button-readonly {
display: none;
}
-.#{$name}-calendarpanel table {
+.#{$primaryStyleName}-calendarpanel table {
width: 100%;
}
-.#{$name}-calendarpanel td {
+.#{$primaryStyleName}-calendarpanel td {
padding: 0;
margin: 0;
}
-.#{$name}-calendarpanel:focus {
+.#{$primaryStyleName}-calendarpanel:focus {
outline:none;
}
-.#{$name}-calendarpanel-header td {
+.#{$primaryStyleName}-calendarpanel-header td {
text-align: center;
}
-.#{$name}-calendarpanel-month {
+.#{$primaryStyleName}-calendarpanel-month {
text-align: center;
white-space: nowrap;
}
-.#{$name}-calendarpanel-weeknumber {
+.#{$primaryStyleName}-calendarpanel-weeknumber {
color: #999;
border-right: 1px solid #ddd;
font-size: 0.9em;
}
-.#{$name}-calendarpanel-day,
-.#{$name}-calendarpanel-day-today {
+.#{$primaryStyleName}-calendarpanel-day,
+.#{$primaryStyleName}-calendarpanel-day-today {
cursor: pointer;
}
-.#{$name}-calendarpanel-day-today {
+.#{$primaryStyleName}-calendarpanel-day-today {
border: 1px solid #ddd;
}
-.v-disabled .#{$name}-calendarpanel-day,
-.v-disabled .#{$name}-calendarpanel-day-today {
+.v-disabled .#{$primaryStyleName}-calendarpanel-day,
+.v-disabled .#{$primaryStyleName}-calendarpanel-day-today {
cursor: default;
}
-.#{$name}-calendarpanel-day-disabled {
+.#{$primaryStyleName}-calendarpanel-day-disabled {
cursor: default;
opacity: .5;
}
-.#{$name}-calendarpanel-day-selected {
+.#{$primaryStyleName}-calendarpanel-day-selected {
cursor: default;
background: #333;
color: #fff;
}
-.#{$name}-calendarpanel-day-focused {
+.#{$primaryStyleName}-calendarpanel-day-focused {
outline: 1px dotted black;
}
-.#{$name}-calendarpanel-day-offmonth {
+.#{$primaryStyleName}-calendarpanel-day-offmonth {
color: #666;
}
-.#{$name}-time {
+.#{$primaryStyleName}-time {
white-space: nowrap;
}
-.#{$name}-time .v-label {
+.#{$primaryStyleName}-time .v-label {
display: inline;
}
-.#{$name}-popup {
+.#{$primaryStyleName}-popup {
background: #fff;
}
/* Disabled by default
-.#{$name}-error .v-textfield,
-.#{$name}-error .#{$name}-calendarpanel {
+.#{$primaryStyleName}-error .v-textfield,
+.#{$primaryStyleName}-error .#{$primaryStyleName}-calendarpanel {
background: #ffe0e0;
}
*/
/* Disabled by default
-.#{$name}-required .v-textfield,
-.#{$name}-required .#{$name}-calendarpanel {
+.#{$primaryStyleName}-required .v-textfield,
+.#{$primaryStyleName}-required .#{$primaryStyleName}-calendarpanel {
background:transparent;
background-color: #ffe0e0;
}
-@mixin base-dragwrapper($name : v-ddwrapper) {
+@mixin base-dragwrapper($primaryStyleName : v-ddwrapper) {
-.#{$name} {
+.#{$primaryStyleName} {
padding: 2px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-user-select: none;
-webkit-user-select: none;
}
-.v-ie .#{$name} a.drag-start {
+.v-ie .#{$primaryStyleName} a.drag-start {
display: block;
position: absolute;
top: 0;
background-color:cyan;
filter: alpha(opacity=0);
}
-.#{$name}-over {
+.#{$primaryStyleName}-over {
border: 2px solid #1d9dff;
background-color: #bcdcff;
padding: 0;
}
-.#{$name}-over {
+.#{$primaryStyleName}-over {
background-color: rgba(169,209,255,.6);
}
-.no-box-drag-hints .#{$name}-over {
+.no-box-drag-hints .#{$primaryStyleName}-over {
border: none;
background-color: transparent;
padding: 2px;
}
-&.v-app .#{$name}-over-top,
-.v-window .#{$name}-over-top,
-.v-popupview-popup .#{$name}-over-top {
+&.v-app .#{$primaryStyleName}-over-top,
+.v-window .#{$primaryStyleName}-over-top,
+.v-popupview-popup .#{$primaryStyleName}-over-top {
border: none;
border-top: 2px solid #1d9dff;
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
}
-&.v-app .#{$name}-over-bottom,
-.v-window .#{$name}-over-bottom,
-.v-popupview-popup .#{$name}-over-bottom {
+&.v-app .#{$primaryStyleName}-over-bottom,
+.v-window .#{$primaryStyleName}-over-bottom,
+.v-popupview-popup .#{$primaryStyleName}-over-bottom {
border: none;
border-bottom: 2px solid #1d9dff;
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
}
-&.v-app .#{$name}-over-left,
-.v-window .#{$name}-over-left,
-.v-popupview-popup .#{$name}-over-left {
+&.v-app .#{$primaryStyleName}-over-left,
+.v-window .#{$primaryStyleName}-over-left,
+.v-popupview-popup .#{$primaryStyleName}-over-left {
border: none;
border-left: 2px solid #1d9dff;
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
}
-&.v-app .#{$name}-over-right,
-.v-window .#{$name}-over-right,
-.v-popupview-popup .#{$name}-over-right {
+&.v-app .#{$primaryStyleName}-over-right,
+.v-window .#{$primaryStyleName}-over-right,
+.v-popupview-popup .#{$primaryStyleName}-over-right {
border: none;
border-right: 2px solid #1d9dff;
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
}
-.#{$name},
-.#{$name}-over,
-&.v-app .#{$name}-over-top,
-.v-window .#{$name}-over-top,
-.v-popupview-popup .#{$name}-over-top,
-&.v-app .#{$name}-over-bottom,
-.v-window .#{$name}-over-bottom,
-.v-popupview-popup .#{$name}-over-bottom,
-&.v-app .#{$name}-over-left,
-.v-window .#{$name}-over-left,
-.v-popupview-popup .#{$name}-over-left,
-&.v-app .#{$name}-over-right,
-.v-window .#{$name}-over-right,
-.v-popupview-popup .#{$name}-over-right {
+.#{$primaryStyleName},
+.#{$primaryStyleName}-over,
+&.v-app .#{$primaryStyleName}-over-top,
+.v-window .#{$primaryStyleName}-over-top,
+.v-popupview-popup .#{$primaryStyleName}-over-top,
+&.v-app .#{$primaryStyleName}-over-bottom,
+.v-window .#{$primaryStyleName}-over-bottom,
+.v-popupview-popup .#{$primaryStyleName}-over-bottom,
+&.v-app .#{$primaryStyleName}-over-left,
+.v-window .#{$primaryStyleName}-over-left,
+.v-popupview-popup .#{$primaryStyleName}-over-left,
+&.v-app .#{$primaryStyleName}-over-right,
+.v-window .#{$primaryStyleName}-over-right,
+.v-popupview-popup .#{$primaryStyleName}-over-right {
border-color: rgba(0,109,232,.6);
}
-.#{$name}-over-top:before,
-.#{$name}-over-bottom:after,
-.#{$name}-over-left:before,
-.#{$name}-over-right:before {
+.#{$primaryStyleName}-over-top:before,
+.#{$primaryStyleName}-over-bottom:after,
+.#{$primaryStyleName}-over-left:before,
+.#{$primaryStyleName}-over-right:before {
display: block;
position: absolute;
margin-left: -2px;
background: transparent url(../common/img/drag-slot-dot.png) no-repeat;
}
-.#{$name}-over-bottom:after {
+.#{$primaryStyleName}-over-bottom:after {
margin-top: -2px;
}
-.#{$name}-over-left:before,
-.#{$name}-over-right:before {
+.#{$primaryStyleName}-over-left:before,
+.#{$primaryStyleName}-over-right:before {
background-position: 0 -6px;
margin-top: -2px;
margin-left: -4px;
}
-.#{$name}-over-right:before {
+.#{$primaryStyleName}-over-right:before {
position: relative;
margin-bottom: -4px;
margin-right: -4px;
background-position: 100% -6px;
}
-.no-horizontal-drag-hints .#{$name}-over-left {
+.no-horizontal-drag-hints .#{$primaryStyleName}-over-left {
padding-left: 2px;
border-left: none;
}
-.no-horizontal-drag-hints .#{$name}-over-right {
+.no-horizontal-drag-hints .#{$primaryStyleName}-over-right {
padding-right: 2px;
border-right: none;
}
-.no-vertical-drag-hints .#{$name}-over-top {
+.no-vertical-drag-hints .#{$primaryStyleName}-over-top {
padding-top: 2px;
border-top: none;
}
-.no-vertical-drag-hints .#{$name}-over-bottom {
+.no-vertical-drag-hints .#{$primaryStyleName}-over-bottom {
padding-bottom: 2px;
border-bottom: none;
}
-.no-horizontal-drag-hints .#{$name}-over-left:before,
-.no-horizontal-drag-hints .#{$name}-over-right:before,
-.no-vertical-drag-hints .#{$name}-over-top:before,
-.no-vertical-drag-hints .#{$name}-over-bottom:after {
+.no-horizontal-drag-hints .#{$primaryStyleName}-over-left:before,
+.no-horizontal-drag-hints .#{$primaryStyleName}-over-right:before,
+.no-vertical-drag-hints .#{$primaryStyleName}-over-top:before,
+.no-vertical-drag-hints .#{$primaryStyleName}-over-bottom:after {
display: none;
}
-@mixin base-embedded($name : v-embedded) {
+@mixin base-embedded($primaryStyleName : v-embedded) {
-.v-table .#{$name}-image {
+.v-table .#{$primaryStyleName}-image {
/* make embeddeds be centered in centered table cells. */
display: inline-block;
}
-@mixin base-formlayout($name : v-formlayout) {
+@mixin base-formlayout($primaryStyleName : v-formlayout) {
-.#{$name}.v-has-width > table {
+.#{$primaryStyleName}.v-has-width > table {
width: 100%;
}
-.#{$name}.v-has-height > table {
+.#{$primaryStyleName}.v-has-height > table {
height: 100%;
}
-.#{$name}-cell .v-errorindicator {
+.#{$primaryStyleName}-cell .v-errorindicator {
display: block;
}
-.#{$name}-error-indicator {
+.#{$primaryStyleName}-error-indicator {
/* fix width so layout is not jumpy when error disappears */
width: 12px;
}
-.#{$name}-captioncell {
+.#{$primaryStyleName}-captioncell {
text-align:right;
white-space: nowrap;
}
-.#{$name}-errorcell, .#{$name}-captioncell {
+.#{$primaryStyleName}-errorcell, .#{$primaryStyleName}-captioncell {
width: 1px; /* Don't use any extra space */
}
-.#{$name}-captioncell .v-caption {
+.#{$primaryStyleName}-captioncell .v-caption {
overflow: visible;
}
-.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-captioncell,
-.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-contentcell,
-.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-errorcell {
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-captioncell,
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-contentcell,
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-errorcell {
padding-top: 6px;
}
-.#{$name}-spacing > tbody > .#{$name}-firstrow > .#{$name}-captioncell,
-.#{$name}-spacing > tbody > .#{$name}-firstrow > .#{$name}-contentcell,
-.#{$name}-spacing > tbody > .#{$name}-firstrow > .#{$name}-errorcell {
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-captioncell,
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-contentcell,
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-errorcell {
padding-top: 0;
}
-.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-captioncell,
-.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-contentcell,
-.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-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: 12px;
}
-.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-captioncell,
-.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-contentcell,
-.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-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: 12px;
}
-.#{$name}-margin-left > tbody > .#{$name}-row > .#{$name}-captioncell {
+.#{$primaryStyleName}-margin-left > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-captioncell {
padding-left: 12px;
}
-.#{$name}-margin-right > tbody > .#{$name}-row > .#{$name}-contentcell {
+.#{$primaryStyleName}-margin-right > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-contentcell {
padding-right: 12px;
}
-.#{$name}-captioncell .v-caption .v-required-field-indicator {
+.#{$primaryStyleName}-captioncell .v-caption .v-required-field-indicator {
float: none;
}
-@mixin base-gridlayout($name : v-gridlayout) {
+@mixin base-gridlayout($primaryStyleName : v-gridlayout) {
-.#{$name} {
+.#{$primaryStyleName} {
position: relative;
}
-.#{$name}-slot {
+.#{$primaryStyleName}-slot {
position: absolute;
}
-.#{$name}-margin-top {
+.#{$primaryStyleName}-margin-top {
padding-top: 12px;
}
-.#{$name}-margin-bottom {
+.#{$primaryStyleName}-margin-bottom {
padding-bottom: 12px;
}
-.#{$name}-margin-left {
+.#{$primaryStyleName}-margin-left {
padding-left: 12px;
}
-.#{$name}-margin-right {
+.#{$primaryStyleName}-margin-right {
padding-right: 12px;
}
-.#{$name}-spacing-on {
+.#{$primaryStyleName}-spacing-on {
padding-left: 6px;
padding-top: 6px;
overflow: hidden;
}
-.#{$name}-spacing,
-.#{$name}-spacing-off {
+.#{$primaryStyleName}-spacing,
+.#{$primaryStyleName}-spacing-off {
padding-left: 0;
padding-top: 0;
}
-.#{$name}-spacing-off {
+.#{$primaryStyleName}-spacing-off {
overflow: hidden;
}
-@mixin base-inline-datefield($name : v-inline-datefield){
+@mixin base-inline-datefield($primaryStyleName : v-inline-datefield){
- /* FIXME $name should be passed to the the mixing instead of the default. Fix when SASS compiler works. #9821 */
+ /* FIXME $primaryStyleName should be passed to the the mixing instead of the default. Fix when SASS compiler works. #9821 */
@include base-datefield(v-inline-datefield);
}
\ No newline at end of file
-@mixin base-label($name : v-label) {
+@mixin base-label($primaryStyleName : v-label) {
-.#{$name} {
+.#{$primaryStyleName} {
overflow: hidden;
}
-.#{$name}.v-has-width {
+.#{$primaryStyleName}.v-has-width {
white-space: normal;
}
-@mixin base-link($name : v-link) {
+@mixin base-link($primaryStyleName : v-link) {
-.#{$name} {
+.#{$primaryStyleName} {
white-space: nowrap;
}
-.#{$name} a {
+.#{$primaryStyleName} a {
vertical-align: middle;
text-decoration: none;
}
-.#{$name} span {
+.#{$primaryStyleName} span {
text-decoration: underline;
vertical-align: middle;
}
.v-disabled a {
cursor: default;
}
-.#{$name} img {
+.#{$primaryStyleName} img {
vertical-align: middle;
border:none;
}
-@mixin base-loginform($name : v-loginform) {
+@mixin base-loginform($primaryStyleName : v-loginform) {
-.#{$name} {
+.#{$primaryStyleName} {
height: 140px;
width: 200px;
}
-@mixin base-menubar($name : v-menubar) {
+@mixin base-menubar($primaryStyleName : v-menubar) {
-.#{$name} {
+.#{$primaryStyleName} {
display: inline-block;
white-space: nowrap;
overflow: hidden;
}
-.#{$name} .#{$name}-menuitem {
+.#{$primaryStyleName} .#{$primaryStyleName}-menuitem {
cursor: default;
vertical-align: middle;
white-space: nowrap;
display: inline-block;
zoom: 1;
}
-.#{$name} .#{$name}-menuitem-caption .v-icon {
+.#{$primaryStyleName} .#{$primaryStyleName}-menuitem-caption .v-icon {
vertical-align: middle;
white-space: nowrap;
}
-.#{$name}-submenu {
+.#{$primaryStyleName}-submenu {
background: #fff;
}
-.#{$name}-menuitem-selected {
+.#{$primaryStyleName}-menuitem-selected {
background: #333;
color: #fff;
}
-.#{$name}-submenu .#{$name}-menuitem {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem {
cursor: default;
display: block;
position: relative;
padding-right: 1.5em;
}
-.#{$name}-submenu .#{$name}-menuitem-caption {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-caption {
display: block;
}
-.#{$name}-submenu .#{$name}-menuitem *,
-.#{$name}-submenu .#{$name}-menuitem-caption * {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem *,
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-caption * {
white-space: nowrap;
}
-.#{$name}-submenu-indicator {
+.#{$primaryStyleName}-submenu-indicator {
display: none;
/* Arial has the most coverage for geometric entity characters */
font-family: arial, helvetica, sans-serif;
}
-.#{$name}-submenu .#{$name}-submenu-indicator {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-submenu-indicator {
display: block;
position: absolute;
right: 0;
height: 1em;
font-size: 0.9em;
}
-.#{$name}-menuitem-disabled,
-.#{$name} span.#{$name}-menuitem-disabled:hover,
-.#{$name} span.#{$name}-menuitem-disabled:focus,
-.#{$name} span.#{$name}-menuitem-disabled:active {
+.#{$primaryStyleName}-menuitem-disabled,
+.#{$primaryStyleName} span.#{$primaryStyleName}-menuitem-disabled:hover,
+.#{$primaryStyleName} span.#{$primaryStyleName}-menuitem-disabled:focus,
+.#{$primaryStyleName} span.#{$primaryStyleName}-menuitem-disabled:active {
color: #999;
}
-.#{$name}-more-menuitem {
+.#{$primaryStyleName}-more-menuitem {
/* Arial has the most coverage for geometric entity characters */
font-family: arial, helvetica, sans-serif;
}
-.#{$name}-separator {
+.#{$primaryStyleName}-separator {
overflow: hidden;
}
-.#{$name}-separator span {
+.#{$primaryStyleName}-separator span {
display: block;
text-indent: -9999px;
font-size: 1px;
margin: 3px 0 2px;
overflow: hidden;
}
-.#{$name} .v-icon,
-.#{$name}-submenu .v-icon {
+.#{$primaryStyleName} .v-icon,
+.#{$primaryStyleName}-submenu .v-icon {
margin-right: 3px;
}
-.#{$name}:focus,
-.#{$name}-popup:focus,
-.#{$name}-popup .popupContent:focus,
-.#{$name}-popup .popupContent .#{$name}-submenu:focus{
+.#{$primaryStyleName}:focus,
+.#{$primaryStyleName}-popup:focus,
+.#{$primaryStyleName}-popup .popupContent:focus,
+.#{$primaryStyleName}-popup .popupContent .#{$primaryStyleName}-submenu:focus{
outline: none;
}
/* Checkboxes for checkable/checked menu items */
/* Checked/unchecked requires combined style selected-(un)checked for IE6 */
-.#{$name}-submenu-check-column .#{$name}-menuitem {
+.#{$primaryStyleName}-submenu-check-column .#{$primaryStyleName}-menuitem {
padding-left: 6px;
}
-.#{$name}-submenu-check-column .#{$name}-menuitem-caption {
+.#{$primaryStyleName}-submenu-check-column .#{$primaryStyleName}-menuitem-caption {
padding-left: 18px;
}
-.#{$name}-submenu .#{$name}-menuitem-checked .#{$name}-menuitem-caption {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-checked .#{$primaryStyleName}-menuitem-caption {
background: transparent url(img/check.gif) no-repeat left;
}
-@mixin base-notification($name : v-Notification) {
+@mixin base-notification($primaryStyleName : v-Notification) {
-.#{$name} {
+.#{$primaryStyleName} {
background: #999;
color: #fff;
cursor: pointer;
max-width:85%;
}
-.#{$name} h1,
-.#{$name} p,
-.#{$name}-error h1,
-.#{$name}-error p,
-.#{$name}-warning h1,
-.#{$name}-warning p {
+.#{$primaryStyleName} h1,
+.#{$primaryStyleName} p,
+.#{$primaryStyleName}-error h1,
+.#{$primaryStyleName}-error p,
+.#{$primaryStyleName}-warning h1,
+.#{$primaryStyleName}-warning p {
display: inline;
margin: 0 0.5em 0 0;
}
-.#{$name}-warning {
+.#{$primaryStyleName}-warning {
background: orange;
}
-.#{$name}-error {
+.#{$primaryStyleName}-error {
background: red;
}
-.#{$name}-tray h1 {
+.#{$primaryStyleName}-tray h1 {
display: block;
}
-.#{$name}-tray p {
+.#{$primaryStyleName}-tray p {
display: block;
}
-.#{$name}-system {
+.#{$primaryStyleName}-system {
background-color: red;
opacity: .7;
filter: alpha(opacity=70);
}
-.#{$name}-system h1 {
+.#{$primaryStyleName}-system h1 {
display: block;
margin: 0;
}
-@mixin base-panel($name : v-panel) {
+@mixin base-panel($primaryStyleName : v-panel) {
-.#{$name},
-.#{$name}-caption,
-.#{$name}-content,
-.#{$name}-deco,
-.#{$name}-light,
-.#{$name}-caption-light,
-.#{$name}-content-light,
-.#{$name}-deco-light {
+.#{$primaryStyleName},
+.#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-content,
+.#{$primaryStyleName}-deco,
+.#{$primaryStyleName}-light,
+.#{$primaryStyleName}-caption-light,
+.#{$primaryStyleName}-content-light,
+.#{$primaryStyleName}-deco-light {
outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */
text-align: left; /* Force default alignment */
}
-.#{$name}-caption .v-errorindicator {
+.#{$primaryStyleName}-caption .v-errorindicator {
float: none;
display: inline;
}
-.#{$name}-caption .v-icon {
+.#{$primaryStyleName}-caption .v-icon {
display: inline;
vertical-align: middle;
}
-.#{$name}-caption span {
+.#{$primaryStyleName}-caption span {
vertical-align: middle;
display: table-row;
}
-.#{$name}-caption {
+.#{$primaryStyleName}-caption {
white-space: nowrap;
overflow:hidden;
font-weight: bold;
}
-.#{$name}-nocaption {
+.#{$primaryStyleName}-nocaption {
overflow: hidden;
}
-.#{$name}-content {
+.#{$primaryStyleName}-content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-.#{$name}.v-has-width > .#{$name}-content {
+.#{$primaryStyleName}.v-has-width > .#{$primaryStyleName}-content {
width: 100%;
}
-.#{$name}.v-has-height > .#{$name}-content {
+.#{$primaryStyleName}.v-has-height > .#{$primaryStyleName}-content {
height: 100%;
}
-.#{$name}-deco {
+.#{$primaryStyleName}-deco {
}
}
\ No newline at end of file
-@mixin base-popupview($name : v-popupview) {
+@mixin base-popupview($primaryStyleName : v-popupview) {
-.#{$name} {
+.#{$primaryStyleName} {
cursor: pointer;
text-decoration: underline;
white-space: nowrap;
}
-.#{$name}-popup {
+.#{$primaryStyleName}-popup {
overflow: auto;
}
-.#{$name}-loading {
+.#{$primaryStyleName}-loading {
width: 30px;
height: 30px;
background: transparent url(../common/img/ajax-loader-medium.gif) no-repeat 50%;
-@mixin base-progressindicator($name : v-progressindicator) {
+@mixin base-progressindicator($primaryStyleName : v-progressindicator) {
-.#{$name} {
+.#{$primaryStyleName} {
width: 150px;
}
-.#{$name}-wrapper {
+.#{$primaryStyleName}-wrapper {
height: 7px;
border: 1px solid #ddd;
}
-.#{$name}-indicator {
+.#{$primaryStyleName}-indicator {
height: 7px;
background: #ddd;
}
-div.#{$name}-indeterminate {
+div.#{$primaryStyleName}-indeterminate {
height: 20px;
width: 20px;
background: #fff url(../common/img/ajax-loader-medium.gif) no-repeat 50%;
-moz-border-radius: 4px;
}
/* Hide obsolete elements in indeterminate mode */
-.#{$name}-indeterminate .#{$name}-wrapper,
-.#{$name}-indeterminate .#{$name}-indicator,
-.#{$name}-indeterminate-disabled .#{$name}-wrapper,
-.#{$name}-indeterminate-disabled .#{$name}-indicator {
+.#{$primaryStyleName}-indeterminate .#{$primaryStyleName}-wrapper,
+.#{$primaryStyleName}-indeterminate .#{$primaryStyleName}-indicator,
+.#{$primaryStyleName}-indeterminate-disabled .#{$primaryStyleName}-wrapper,
+.#{$primaryStyleName}-indeterminate-disabled .#{$primaryStyleName}-indicator {
display: none;
}
-div.#{$name}-indeterminate-disabled {
+div.#{$primaryStyleName}-indeterminate-disabled {
height: 20px;
width: 20px;
background: transparent;
-@mixin base-select($name : v-select) {
+@mixin base-select($primaryStyleName : v-select) {
-.#{$name} {
+.#{$primaryStyleName} {
text-align: left;
}
-.#{$name}-optiongroup .#{$name}-option {
+.#{$primaryStyleName}-optiongroup .#{$primaryStyleName}-option {
display: block;
white-space: nowrap;
}
-.#{$name}-optiongroup .v-icon {
+.#{$primaryStyleName}-optiongroup .v-icon {
vertical-align: middle;
white-space: nowrap;
margin: 0 2px;
}
-.v-ie .#{$name}-optiongroup .#{$name}-option {
+.v-ie .#{$primaryStyleName}-optiongroup .#{$primaryStyleName}-option {
zoom: 1;
}
-.#{$name}-select {
+.#{$primaryStyleName}-select {
display: block;
}
-.#{$name}-twincol {
+.#{$primaryStyleName}-twincol {
white-space: nowrap;
}
-.#{$name}-twincol-options {
+.#{$primaryStyleName}-twincol-options {
float: left;
}
-.#{$name}-twincol-caption-left {
+.#{$primaryStyleName}-twincol-caption-left {
float: left;
overflow: hidden;
text-overflow: ellipsis;
}
-.#{$name}-twincol-selections {
+.#{$primaryStyleName}-twincol-selections {
font-weight: bold;
}
-.#{$name}-twincol-caption-right {
+.#{$primaryStyleName}-twincol-caption-right {
float: right;
overflow: hidden;
text-overflow: ellipsis;
}
-.#{$name}-twincol-buttons {
+.#{$primaryStyleName}-twincol-buttons {
float: left;
text-align: center;
}
-.#{$name}-twincol-buttons .#{$name}-twincol-deco {
+.#{$primaryStyleName}-twincol-buttons .#{$primaryStyleName}-twincol-deco {
clear: both;
}
-.#{$name}-twincol .v-textfield {
+.#{$primaryStyleName}-twincol .v-textfield {
display: block;
float: left;
clear: left;
}
-.#{$name}-twincol .v-button {
+.#{$primaryStyleName}-twincol .v-button {
float: left;
}
-.#{$name}-twincol-buttons .v-button {
+.#{$primaryStyleName}-twincol-buttons .v-button {
float: none;
}
.v-filterselect {
/* Error styles (disabled by default)
.v-filterselect-error .v-filterselect-input,
-.#{$name}-error .#{$name}-option,
-.#{$name}-error .#{$name}-select,
-.#{$name}-error .#{$name}-twincol-selections,
-.#{$name}-error .#{$name}-twincol-options {
+.#{$primaryStyleName}-error .#{$primaryStyleName}-option,
+.#{$primaryStyleName}-error .#{$primaryStyleName}-select,
+.#{$primaryStyleName}-error .#{$primaryStyleName}-twincol-selections,
+.#{$primaryStyleName}-error .#{$primaryStyleName}-twincol-options {
background: #ffaaaa;
}
*/
/* Required field styles (disabled by default)
.v-filterselect-error .v-filterselect-input,
-.#{$name}-required .#{$name}-option,
-.#{$name}-required .#{$name}-select,
-.#{$name}-required .#{$name}-twincol-selections,
-.#{$name}-required .#{$name}-twincol-options {
+.#{$primaryStyleName}-required .#{$primaryStyleName}-option,
+.#{$primaryStyleName}-required .#{$primaryStyleName}-select,
+.#{$primaryStyleName}-required .#{$primaryStyleName}-twincol-selections,
+.#{$primaryStyleName}-required .#{$primaryStyleName}-twincol-options {
background: #ffaaaa;
}
*/
-@mixin base-shadow($name : v-shadow) {
+@mixin base-shadow($primaryStyleName : v-shadow) {
-.#{$name} {
+.#{$primaryStyleName} {
position: absolute;
}
-.#{$name} .top-left {
+.#{$primaryStyleName} .top-left {
position: absolute; overflow: hidden;
top: -3px; left: -5px;
width: 10px; height: 10px;
background: transparent url(img/top-left.png);
}
-.#{$name} .top {
+.#{$primaryStyleName} .top {
position: absolute; overflow: hidden;
top: -3px; left: 5px;
height: 10px; right: 5px;
background: transparent url(img/top.png);
}
-.#{$name} .top-right {
+.#{$primaryStyleName} .top-right {
position: absolute; overflow: hidden;
top: -3px; right: -5px;
width: 10px; height: 10px;
background: transparent url(img/top-right.png);
}
-.#{$name} .left {
+.#{$primaryStyleName} .left {
position: absolute; overflow: hidden;
top: 7px; left: -5px;
width: 10px;
background: transparent url(img/left.png);
}
-.#{$name} .center {
+.#{$primaryStyleName} .center {
position: absolute; overflow: hidden;
top: 7px; left: 5px;
bottom: 3px; right: 5px;
background: transparent url(img/center.png);
}
-.#{$name} .right {
+.#{$primaryStyleName} .right {
position: absolute; overflow: hidden;
top: 7px; right: -5px;
width: 10px;
background: transparent url(img/right.png);
}
-.#{$name} .bottom-left {
+.#{$primaryStyleName} .bottom-left {
position: absolute; overflow: hidden;
bottom: -7px; left: -5px;
width: 10px; height: 10px;
background: transparent url(img/bottom-left.png);
}
-.#{$name} .bottom {
+.#{$primaryStyleName} .bottom {
position: absolute; overflow: hidden;
bottom: -7px; left: 5px;
right: 5px; height: 10px;
background: transparent url(img/bottom.png);
}
-.#{$name} .bottom-right {
+.#{$primaryStyleName} .bottom-right {
position: absolute; overflow: hidden;
bottom: -7px; right: -5px;
width: 10px; height: 10px;
-@mixin base-slider($name : v-slider) {
+@mixin base-slider($primaryStyleName : v-slider) {
-.#{$name} {
+.#{$primaryStyleName} {
margin: 5px 0;
}
-.#{$name}-base {
+.#{$primaryStyleName}-base {
/* changing the borders will require adjustments to ISlider.java */
height: 2px;
border-top: 1px solid #ddd;
border-right: 1px solid #eee;
}
-.#{$name}-handle {
+.#{$primaryStyleName}-handle {
background: #aaa;
width: 12px;
height: 12px;
font-size: 0;
}
-.#{$name}-vertical {
+.#{$primaryStyleName}-vertical {
width: 2px;
height: auto;
margin: 0 5px;
border-left: 1px solid #cccfd0;
border-right: 1px solid #cccfd0;
}
-.#{$name}-vertical .#{$name}-base {
+.#{$primaryStyleName}-vertical .#{$primaryStyleName}-base {
width: 2px;
border-bottom: 1px solid #eee;
border-right: none;
}
-.#{$name}-vertical .#{$name}-handle {
+.#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle {
width: 12px;
height: 12px;
font-size: 0;
margin-left: -5px;
}
-.#{$name}-feedback {
+.#{$primaryStyleName}-feedback {
padding: 2px 5px;
background: #444;
color: #fff;
}
/* Disabled by default
-.#{$name}-error .#{$name}-base {
+.#{$primaryStyleName}-error .#{$primaryStyleName}-base {
background: #FFE0E0;
}
*/
/* Disabled by default
-.#{$name}-required .#{$name}-base {
+.#{$primaryStyleName}-required .#{$primaryStyleName}-base {
background: #FFE0E0;
}
*/
-@mixin base-splitpanel($name : v-splitpanel) {
+@mixin base-splitpanel($primaryStyleName : v-splitpanel) {
-.#{$name}-horizontal,
-.#{$name}-vertical {
+.#{$primaryStyleName}-horizontal,
+.#{$primaryStyleName}-vertical {
overflow: hidden;
}
-.#{$name}-hsplitter {
+.#{$primaryStyleName}-hsplitter {
width: 6px;
}
-.#{$name}-hsplitter div {
+.#{$primaryStyleName}-hsplitter div {
width: 6px;
position: absolute;
top: 0;
cursor: e-resize;
cursor: col-resize;
}
-.v-disabled .#{$name}-hsplitter div {
+.v-disabled .#{$primaryStyleName}-hsplitter div {
cursor: default;
}
-.#{$name}-vsplitter {
+.#{$primaryStyleName}-vsplitter {
height: 6px;
}
-.#{$name}-vsplitter div {
+.#{$primaryStyleName}-vsplitter div {
height: 6px;
background: #ddd;
cursor: s-resize;
cursor: row-resize;
}
-.v-disabled .#{$name}-vsplitter div {
+.v-disabled .#{$primaryStyleName}-vsplitter div {
cursor: default;
}
}
\ No newline at end of file
-@mixin base-table($name : v-table) {
+@mixin base-table($primaryStyleName : v-table) {
/* Table theme building instructions
*
* these instructions.
*
* Borders in table header and in table body need to be same width
- * - specify vertical borders on .#{$name}-header-wrap and .#{$name}-body
+ * - specify vertical borders on .#{$primaryStyleName}-header-wrap and .#{$primaryStyleName}-body
*
* Table cells in body:
- * - padding/border for cells is to be defined for td elements (class name: .#{$name}-cell-content)
+ * - padding/border for cells is to be defined for td elements (class name: .#{$primaryStyleName}-cell-content)
* - in default theme there are no borders, but they should work. Just set border-right or border-bottom
- * - no padding or border is allowed for div inside cells (class name: .#{$name}-cell-wrapper) element
+ * - no padding or border is allowed for div inside cells (class name: .#{$primaryStyleName}-cell-wrapper) element
* - background is allowed for both elements
*
* Table headers:
- * - table cells in header contain .#{$name}-resizer and
- * .#{$name}-caption-container div elements, which are both floated to right
- * - to align header caption to body content resizer width + .#{$name}-caption-container
+ * - table cells in header contain .#{$primaryStyleName}-resizer and
+ * .#{$primaryStyleName}-caption-container div elements, which are both floated to right
+ * - to align header caption to body content resizer width + .#{$primaryStyleName}-caption-container
* padding right should be equal to content cells padding-right and border-right.
* - Possible cell border in header must be themed into column resizer.
*
*/
-.#{$name} {
+.#{$primaryStyleName} {
overflow: hidden;
text-align: left; /* Force default alignment */
}
-.#{$name}-header-wrap {
+.#{$primaryStyleName}-header-wrap {
overflow: hidden;
border: 1px solid #aaa;
border-bottom: none;
background: #efefef;
}
-.#{$name}-header table,
-.#{$name}-table {
+.#{$primaryStyleName}-header table,
+.#{$primaryStyleName}-table {
border-spacing: 0;
border-collapse: separate;
margin: 0;
padding: 0;
border: 0;
}
-.#{$name}-header td {
+.#{$primaryStyleName}-header td {
padding: 0;
}
-.#{$name}-header-cell,
-.#{$name}-header-cell-asc,
-.#{$name}-header-cell-desc {
+.#{$primaryStyleName}-header-cell,
+.#{$primaryStyleName}-header-cell-asc,
+.#{$primaryStyleName}-header-cell-desc {
cursor: pointer;
}
-.#{$name}.v-disabled .#{$name}-header-cell,
-.#{$name}.v-disabled .#{$name}-header-cell-asc,
-.#{$name}.v-disabled .#{$name}-header-cell-desc {
+.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-header-cell,
+.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-header-cell-asc,
+.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-header-cell-desc {
cursor: default;
}
-.#{$name}-footer-wrap {
+.#{$primaryStyleName}-footer-wrap {
overflow: hidden;
border: 1px solid #aaa;
border-top: none;
background: #efefef;
}
-.#{$name}-footer table {
+.#{$primaryStyleName}-footer table {
border-spacing: 0;
border-collapse: collapse;
margin: 0;
padding: 0;
border: 0;
}
-.#{$name}-footer td {
+.#{$primaryStyleName}-footer td {
padding: 0;
border-right: 1px solid #aaa;
}
-.#{$name}-footer-cell {
+.#{$primaryStyleName}-footer-cell {
cursor: pointer;
}
-.#{$name}-footer-container {
+.#{$primaryStyleName}-footer-container {
float:right;
padding-right:6px;
overflow:hidden;
white-space:nowrap;
}
-.#{$name}-resizer {
+.#{$primaryStyleName}-resizer {
display: block;
height: 1.2em;
float: right;
width: 1px;
overflow: hidden;
}
-.#{$name}.v-disabled .#{$name}-resizer {
+.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-resizer {
cursor: default;
}
-.#{$name}-caption-container {
+.#{$primaryStyleName}-caption-container {
overflow: hidden;
white-space: nowrap;
margin-left: 6px;
}
-.#{$name}-caption-container-align-right {
+.#{$primaryStyleName}-caption-container-align-right {
float: right;
}
-.#{$name}-sort-indicator {
+.#{$primaryStyleName}-sort-indicator {
width: 0px;
height: 1.2em;
float: right;
}
-.#{$name}-header-cell-asc .#{$name}-sort-indicator,
-.#{$name}-header-cell-desc .#{$name}-sort-indicator {
+.#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator,
+.#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator {
width: 16px;
height: 1.2em;
float: right;
}
-.#{$name}-header-cell-asc .#{$name}-sort-indicator {
+.#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator {
background: transparent url(../common/img/sprites.png) no-repeat right 6px;
}
-.#{$name}-header-cell-desc .#{$name}-sort-indicator {
+.#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator {
background: transparent url(../common/img/sprites.png) no-repeat right -10px;
}
-.#{$name}-caption-container-align-center {
+.#{$primaryStyleName}-caption-container-align-center {
text-align: center;
}
-.#{$name}-caption-container-align-right {
+.#{$primaryStyleName}-caption-container-align-right {
text-align: right;
}
-.#{$name}-caption-container .v-icon,
-.#{$name}-header-drag .v-icon {
+.#{$primaryStyleName}-caption-container .v-icon,
+.#{$primaryStyleName}-header-drag .v-icon {
vertical-align: middle;
}
-.#{$name}-body {
+.#{$primaryStyleName}-body {
border: 1px solid #aaa;
}
-.#{$name}-row-spacer {
+.#{$primaryStyleName}-row-spacer {
height: 10px;
overflow: hidden; /* IE hack to allow < one line height divs */
}
-.#{$name}-row,
-.#{$name}-row-odd {
+.#{$primaryStyleName}-row,
+.#{$primaryStyleName}-row-odd {
background: #fff;
border: 0;
margin: 0;
cursor: pointer;
}
-.#{$name}-generated-row {
+.#{$primaryStyleName}-generated-row {
background: #efefef;
}
-.#{$name}-body-noselection .#{$name}-row,
-.#{$name}-body-noselection .#{$name}-row-odd {
+.#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row,
+.#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row-odd {
cursor: default;
}
-.#{$name} .v-selected {
+.#{$primaryStyleName} .v-selected {
background: #999;
color: #fff;
}
-.#{$name}-cell-content {
+.#{$primaryStyleName}-cell-content {
white-space: nowrap;
overflow: hidden;
padding: 0 6px;
border-right: 1px solid #aaa;
}
-.#{$name}-cell-wrapper {
+.#{$primaryStyleName}-cell-wrapper {
/* Do not specify any margins, paddings or borders here */
white-space: nowrap;
overflow: hidden;
}
-.#{$name}-cell-wrapper-align-center {
+.#{$primaryStyleName}-cell-wrapper-align-center {
text-align: center;
}
-.#{$name}-cell-wrapper-align-right {
+.#{$primaryStyleName}-cell-wrapper-align-right {
text-align: right;
}
-.#{$name}-column-selector {
+.#{$primaryStyleName}-column-selector {
float: right;
background: transparent url(../common/img/sprites.png) no-repeat 4px -37px;
margin: -1.2em 0 0 0;
position: relative; /* hide this from IE, it works without it */
cursor: pointer;
}
-.#{$name}.v-disabled .#{$name}-column-selector {
+.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-column-selector {
cursor: default;
}
-.#{$name}-focus-slot-left {
+.#{$primaryStyleName}-focus-slot-left {
border-left: 2px solid #999;
float: none;
margin-bottom: -1.2em;
background: transparent;
border-right: 1px solid #aaa;
}
-.#{$name}-focus-slot-right {
+.#{$primaryStyleName}-focus-slot-right {
border-right: 2px solid #999;
margin-left: -2px;
}
-.#{$name}-header-drag {
+.#{$primaryStyleName}-header-drag {
position: absolute;
background: #efefef;
border: 1px solid #eee;
margin-top: 20px;
z-index: 30000;
}
-.#{$name}-header-drag .v-icon {
+.#{$primaryStyleName}-header-drag .v-icon {
vertical-align: middle;
}
-.#{$name}-scrollposition {
+.#{$primaryStyleName}-scrollposition {
width: 160px;
background: #eee;
border: 1px solid #aaa;
}
-.#{$name}-scrollposition span {
+.#{$primaryStyleName}-scrollposition span {
display: block;
text-align: center;
}
-.#{$name}-body:focus,
-.#{$name}-body-wrapper:focus {
+.#{$primaryStyleName}-body:focus,
+.#{$primaryStyleName}-body-wrapper:focus {
outline: none;
}
-.#{$name}-body.focused {
+.#{$primaryStyleName}-body.focused {
border-color: #388ddd;
}
-.#{$name}-focus .#{$name}-cell-content {
+.#{$primaryStyleName}-focus .#{$primaryStyleName}-cell-content {
border-top: 1px dotted #0066bd;
border-bottom: 1px dotted #0066bd;
}
-.#{$name}-focus .#{$name}-cell-wrapper {
+.#{$primaryStyleName}-focus .#{$primaryStyleName}-cell-wrapper {
margin-top: -1px;
margin-bottom: -1px;
}
/*************************************
* Drag'n'drop styles
*************************************/
-.#{$name}-drag .#{$name}-body {
+.#{$primaryStyleName}-drag .#{$primaryStyleName}-body {
border-color: #1d9dff;
}
-.#{$name}-row-drag-middle .#{$name}-cell-content {
+.#{$primaryStyleName}-row-drag-middle .#{$primaryStyleName}-cell-content {
background-color: #bcdcff;
}
-.#{$name}-row-drag-top .#{$name}-cell-content {
+.#{$primaryStyleName}-row-drag-top .#{$primaryStyleName}-cell-content {
border-top: 2px solid #1d9dff;
}
-.#{$name}-row-drag-top .#{$name}-cell-wrapper {
+.#{$primaryStyleName}-row-drag-top .#{$primaryStyleName}-cell-wrapper {
margin-top: -2px; /* compensate the space consumed by border hint */
}
-.#{$name}-row-drag-bottom .#{$name}-cell-content {
+.#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-content {
border-bottom: 2px solid #1d9dff;
}
-.#{$name}-row-drag-bottom .#{$name}-cell-wrapper {
+.#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-wrapper {
margin-bottom: -2px; /* compensate the space consumed by border hint */
}
-.#{$name}-row-drag-top .#{$name}-cell-content:first-child:before,
-.#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after {
+.#{$primaryStyleName}-row-drag-top .#{$primaryStyleName}-cell-content:first-child:before,
+.#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-content:first-child:after {
display: block;
position: absolute;
margin-left: -6px;
background: transparent url(../common/img/drag-slot-dot.png);
}
-.v-ff .#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after,
-.v-ie .#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after {
+.v-ff .#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-content:first-child:after,
+.v-ie .#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-content:first-child:after {
margin-top: -2px;
}
-@mixin base-tabsheet($name : v-tabsheet) {
+@mixin base-tabsheet($primaryStyleName : v-tabsheet) {
-.#{$name},
-.#{$name}-content,
-.#{$name}-deco {
+.#{$primaryStyleName},
+.#{$primaryStyleName}-content,
+.#{$primaryStyleName}-deco {
outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */
text-align: left; /* Force default alignment */
}
-.#{$name}-tabs {
+.#{$primaryStyleName}-tabs {
empty-cells: hide;
border-collapse: collapse;
margin: 0;
width: 100%;
overflow:hidden;
}
-.#{$name}-tabitemcell:focus {
+.#{$primaryStyleName}-tabitemcell:focus {
outline: none;
}
-.#{$name}-tabitemcell,
-.#{$name}-spacertd {
+.#{$primaryStyleName}-tabitemcell,
+.#{$primaryStyleName}-spacertd {
margin: 0;
padding: 0;
vertical-align: bottom;
}
-.#{$name}-spacertd {
+.#{$primaryStyleName}-spacertd {
width: 100%;
}
-.#{$name}-spacertd div {
+.#{$primaryStyleName}-spacertd div {
border-left: 1px solid #aaa;
border-bottom: 1px solid #aaa;
height: 1em;
padding: 0.2em 0;
}
-.#{$name}-hidetabs > .#{$name}-tabcontainer {
+.#{$primaryStyleName}-hidetabs > .#{$primaryStyleName}-tabcontainer {
display: none;
}
-.#{$name}-scroller {
+.#{$primaryStyleName}-scroller {
white-space: nowrap;
text-align: right;
margin-top: -1em;
}
-.v-disabled .#{$name}-scroller {
+.v-disabled .#{$primaryStyleName}-scroller {
display: none;
}
-.#{$name}-scrollerPrev,
-.#{$name}-scrollerNext,
-.#{$name}-scrollerPrev-disabled,
-.#{$name}-scrollerNext-disabled {
+.#{$primaryStyleName}-scrollerPrev,
+.#{$primaryStyleName}-scrollerNext,
+.#{$primaryStyleName}-scrollerPrev-disabled,
+.#{$primaryStyleName}-scrollerNext-disabled {
border: 1px solid #aaa;
background: #fff;
width: 12px;
height: 1em;
cursor: pointer;
}
-.#{$name}-scrollerPrev-disabled,
-.#{$name}-scrollerNext-disabled {
+.#{$primaryStyleName}-scrollerPrev-disabled,
+.#{$primaryStyleName}-scrollerNext-disabled {
opacity: 0.5;
cursor: default;
}
-.#{$name}-tabs .v-caption,
-.#{$name}-tabs .v-caption span {
+.#{$primaryStyleName}-tabs .v-caption,
+.#{$primaryStyleName}-tabs .v-caption span {
white-space: nowrap;
}
-.#{$name}-caption-close {
+.#{$primaryStyleName}-caption-close {
display: inline;
display: inline-block;
zoom: 1;
-moz-user-select: none;
-webkit-user-select: none;
}
-.#{$name} .v-disabled .#{$name}-caption-close {
+.#{$primaryStyleName} .v-disabled .#{$primaryStyleName}-caption-close {
cursor: default;
visibility: hidden;
}
-.#{$name}-tabitem:hover .#{$name}-caption-close {
+.#{$primaryStyleName}-tabitem:hover .#{$primaryStyleName}-caption-close {
visibility: visible;
}
-.#{$name}-tabitem {
+.#{$primaryStyleName}-tabitem {
border: 1px solid #aaa;
border-right: none;
cursor: pointer;
padding: 0.2em 0.5em;
}
-.#{$name}-tabitem .v-caption {
+.#{$primaryStyleName}-tabitem .v-caption {
cursor: inherit;
}
-.#{$name}.v-disabled .#{$name}-tabitem,
-.#{$name}-tabitemcell-disabled .#{$name}-tabitem {
+.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-tabitem,
+.#{$primaryStyleName}-tabitemcell-disabled .#{$primaryStyleName}-tabitem {
cursor: default;
}
-.#{$name}-tabitem-selected {
+.#{$primaryStyleName}-tabitem-selected {
cursor: default;
border-bottom-color: #fff;
}
-.#{$name}-tabitem-selected .v-caption {
+.#{$primaryStyleName}-tabitem-selected .v-caption {
cursor: default;
}
-.#{$name}-content {
+.#{$primaryStyleName}-content {
border: 1px solid #aaa;
/* Vertical borders are not supported, use v-tabsheet-tabcontainer and v-tabsheet-deco to present these borders */
border-top: none;
border-bottom: none;
position: relative;
}
-.#{$name}-deco {
+.#{$primaryStyleName}-deco {
height: 1px;
background: #aaa;
overflow: hidden;
}
-.#{$name}-hidetabs .#{$name}-content {
+.#{$primaryStyleName}-hidetabs .#{$primaryStyleName}-content {
border: none;
}
-.#{$name}-hidetabs .#{$name}-deco {
+.#{$primaryStyleName}-hidetabs .#{$primaryStyleName}-deco {
height: 0;
}
// textfield-normal.css
-@mixin base-textfield($name : v-textfield) {
+@mixin base-textfield($primaryStyleName : v-textfield) {
-.#{$name} {
+.#{$primaryStyleName} {
text-align: left; /* Force default alignment */
}
.v-textarea {
resize: none;
white-space: pre-wrap;
}
-.#{$name}-focus,
+.#{$primaryStyleName}-focus,
.v-textarea-focus {
}
-input.#{$name}-prompt,
+input.#{$primaryStyleName}-prompt,
textarea.v-textarea-prompt {
color: #999;
font-style: italic;
}
-input.#{$name}-readonly,
+input.#{$primaryStyleName}-readonly,
textarea.v-textarea-readonly {
background: transparent;
border: none;
textarea.v-disabled {
resize: none;
}
-input.#{$name}-readonly:focus,
+input.#{$primaryStyleName}-readonly:focus,
textarea.v-textarea-readonly:focus {
outline: none;
}
/* Disabled by default
.v-textarea-error,
-.#{$name}-error,
+.#{$primaryStyleName}-error,
.v-richtextarea-error iframe.gwt-RichTextArea {
background: #FFE0E0;
}
*/
/* Disabled by default
.v-textarea-required,
-.#{$name}-required,
+.#{$primaryStyleName}-required,
.v-richtextarea-required iframe.gwt-RichTextArea {
background: #FFE0E0;
}
-@mixin base-tree($name : v-tree) {
+@mixin base-tree($primaryStyleName : v-tree) {
// tree-default.css
-.#{$name} {
+.#{$primaryStyleName} {
text-align: left; /* Force default alignment */
overflow: hidden;
padding: 1px 0;
outline: none;
}
-.#{$name}-node {
+.#{$primaryStyleName}-node {
background: transparent url(../common/img/sprites.png) no-repeat 5px -37px;
padding: 1px 0;
}
-.#{$name}-node-caption:focus {
+.#{$primaryStyleName}-node-caption:focus {
outline: none;
}
-div.#{$name}-node-leaf {
+div.#{$primaryStyleName}-node-leaf {
background: transparent;
}
-.#{$name}-node-expanded {
+.#{$primaryStyleName}-node-expanded {
background: transparent url(../common/img/sprites.png) no-repeat -5px -10px;
}
-.#{$name}-node-caption {
+.#{$primaryStyleName}-node-caption {
margin-left: 1em;
}
-.#{$name}-node span {
+.#{$primaryStyleName}-node span {
cursor: pointer;
}
-.#{$name}-node-caption div {
+.#{$primaryStyleName}-node-caption div {
white-space: nowrap;
}
-.#{$name}-node-caption span,
-.#{$name}-node-caption .v-icon {
+.#{$primaryStyleName}-node-caption span,
+.#{$primaryStyleName}-node-caption .v-icon {
vertical-align: middle;
}
-.#{$name}-node-selected span {
+.#{$primaryStyleName}-node-selected span {
background: #999;
color: #fff;
}
-.#{$name}-node-children {
+.#{$primaryStyleName}-node-children {
padding-left: 1em;
}
// Drag'n'drop styles
-.#{$name} .#{$name}-node-drag-top {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top {
border-top: 2px solid #1d9dff;
margin-top: -1px;
padding-top: 0;
}
-.#{$name} .#{$name}-node-drag-bottom {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom {
border-bottom: 2px solid #1d9dff;
margin-bottom: -1px;
padding-bottom: 0;
}
-.#{$name} .#{$name}-node-drag-top:before,
-.#{$name} .#{$name}-node-drag-bottom:after,
-.#{$name} .#{$name}-node-caption-drag-center:after {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top:before,
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom:after,
+.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after {
display: block;
position: absolute;
margin-top: -4px;
background: transparent url(../common/img/drag-slot-dot.png);
}
-.#{$name} .#{$name}-node-drag-bottom:after {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom:after {
margin-top: -2px;
}
-.#{$name} .#{$name}-node-caption-drag-center:after {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after {
margin-left: 14px;
}
-.v-ff .#{$name} .#{$name}-node-caption-drag-center:after,
-.v-ie .#{$name} .#{$name}-node-caption-drag-center:after {
+.v-ff .#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after,
+.v-ie .#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after {
margin-top: -2px;
}
-.#{$name} .#{$name}-node-drag-top {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top {
background-position: 5px -38px;
}
-.#{$name} .#{$name}-node-drag-top.#{$name}-node-expanded {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-expanded {
background-position: -5px -11px;
}
-.#{$name} .#{$name}-node-caption-drag-center div {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center div {
border: 2px solid #1d9dff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
margin: -2px 2px -2px -2px;
background-color: #bcdcff;
}
-.#{$name} .#{$name}-node-caption-drag-center div {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center div {
background-color: rgba(169,209,255,.6);
}
-.#{$name} .#{$name}-node-caption-drag-center div,
-.#{$name} .#{$name}-node-drag-top,
-.#{$name} .#{$name}-node-drag-bottom {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center div,
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top,
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom {
border-color: rgba(0,109,232,.6);
}
// row, but #10309 prevents us from doing that right now.
// Make item caption height an even number (so that the connector dots overlap nicely)
- .#{$name}-connectors .#{$name}-node-caption {
+ .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-caption {
padding-top: 1px;
}
- .#{$name}-connectors .#{$name}-node {
+ .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node {
background: transparent url(img/connector-expand.png) no-repeat 2px -52px;
}
- .#{$name}-connectors .#{$name}-node-expanded {
+ .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded {
background: transparent url(img/connector-collapse.png) no-repeat 2px -52px;
}
- .#{$name}-connectors .#{$name}-node-last {
+ .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-last {
background: transparent url(img/connector-expand-last.png) no-repeat 2px -52px;
}
- .#{$name}-connectors .#{$name}-node-expanded.#{$name}-node-last {
+ .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded.#{$primaryStyleName}-node-last {
background: transparent url(img/connector-collapse-last.png) no-repeat 2px -52px;
}
- .#{$name}-connectors .#{$name}-node-leaf {
+ .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-leaf {
background: transparent url(img/connector-leaf.png) repeat-y 2px 50%;
}
- .#{$name}-connectors .#{$name}-node-leaf-last {
+ .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-leaf-last {
background: transparent url(img/connector-leaf-last.png) repeat-y 2px 50%;
}
- .#{$name}-connectors .#{$name}-node-children {
+ .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-children {
background: transparent url(img/connector.png) repeat-y 2px 0;
}
- .#{$name}-connectors .#{$name}-node-children-last {
+ .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-children-last {
background: transparent;
}
- .#{$name}-connectors .#{$name}-node-drag-top,
- .#{$name}-connectors .#{$name}-node-expanded.#{$name}-node-drag-top {
+ .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top,
+ .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded.#{$primaryStyleName}-node-drag-top {
background-position: 2px -53px;
}
- .#{$name}-connectors .#{$name}-node-drag-top.#{$name}-node-leaf {
+ .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-leaf {
background-position: 2px 50%;
}
-@mixin base-treetable($name : v-treetable) {
+@mixin base-treetable($primaryStyleName : v-treetable) {
-.#{$name}-treespacer {
+.#{$primaryStyleName}-treespacer {
display: inline-block;
background: transparent;
height: 10px;
top: 5px;
}
-.#{$name}-node-closed {
+.#{$primaryStyleName}-node-closed {
background: url(../treetable/img/arrow-right.png) right top no-repeat;
}
-.#{$name}-node-open {
+.#{$primaryStyleName}-node-open {
background: url(../treetable/img/arrow-down.png) right top no-repeat;
}
-.#{$name} .v-checkbox {
+.#{$primaryStyleName} .v-checkbox {
display: inline-block;
padding-bottom: 4px;
}
-.#{$name} .v-table-row .v-table-cell-content,
-.#{$name} .v-table-row-odd .v-table-cell-content {
+.#{$primaryStyleName} .v-table-row .v-table-cell-content,
+.#{$primaryStyleName} .v-table-row-odd .v-table-cell-content {
position: relative;
z-index: 10;
}
-.#{$name} .v-table-cell-wrapper {
+.#{$primaryStyleName} .v-table-cell-wrapper {
position: relative;
}
-.#{$name} .v-table-body .v-table-table .v-table-row-animating {
+.#{$primaryStyleName} .v-table-body .v-table-table .v-table-row-animating {
zoom:1;
z-index:1;
}
-.#{$name} .v-table-body .v-table-table .v-table-row-animating,
-.#{$name} .v-table-body .v-table-table .v-table-row-animating .v-table-cell-content {
+.#{$primaryStyleName} .v-table-body .v-table-table .v-table-row-animating,
+.#{$primaryStyleName} .v-table-body .v-table-table .v-table-row-animating .v-table-cell-content {
background:transparent;
}
-.#{$name}-animation-clone {
+.#{$primaryStyleName}-animation-clone {
border-spacing: 0;
zoom:1;
}
-div.#{$name}-animation-clone-wrapper {
+div.#{$primaryStyleName}-animation-clone-wrapper {
position: absolute;
z-index: 2;
background-color:#fff;
}
-div.#{$name}-animation-clone-wrapper table.#{$name}-animation-clone {
+div.#{$primaryStyleName}-animation-clone-wrapper table.#{$primaryStyleName}-animation-clone {
background-color:#fff;
}
-div table.#{$name}-animation-clone tr.v-table-row,
-div table.#{$name}-animation-clone tr.v-table-row-odd,
-div table.#{$name}-animation-clone tr.v-table-row td.v-table-cell-content,
-div table.#{$name}-animation-clone tr.v-table-row-odd td.v-table-cell-content {
+div table.#{$primaryStyleName}-animation-clone tr.v-table-row,
+div table.#{$primaryStyleName}-animation-clone tr.v-table-row-odd,
+div table.#{$primaryStyleName}-animation-clone tr.v-table-row td.v-table-cell-content,
+div table.#{$primaryStyleName}-animation-clone tr.v-table-row-odd td.v-table-cell-content {
visibility: visible;
}
-@mixin base-upload($name : v-upload) {
+@mixin base-upload($primaryStyleName : v-upload) {
-.#{$name} {
+.#{$primaryStyleName} {
white-space: nowrap;
}
-.#{$name}-immediate {
+.#{$primaryStyleName}-immediate {
position: relative;
margin: 0;
overflow: hidden;
}
-.v-ff .#{$name}-immediate,
-.v-op .#{$name}-immediate {
+.v-ff .#{$primaryStyleName}-immediate,
+.v-op .#{$primaryStyleName}-immediate {
display: inline-block;
}
-.#{$name}-immediate input {
+.#{$primaryStyleName}-immediate input {
opacity: 0;
filter: alpha(opacity=0);
z-index: 2;
background: transparent;
}
-.#{$name}-immediate button {
+.#{$primaryStyleName}-immediate button {
position: relative;
left: 0;
top: 0;
-@mixin base-widget($name : v-widget) {
+@mixin base-widget($primaryStyleName : v-widget) {
-.#{$name} {
+.#{$primaryStyleName} {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-@mixin base-window($name : v-window) {
+@mixin base-window($primaryStyleName : v-window) {
-.#{$name} {
+.#{$primaryStyleName} {
background: #fff;
}
-.#{$name}-contents {
+.#{$primaryStyleName}-contents {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-.#{$name}.v-has-width > div.popupContent,
-.#{$name}.v-has-width .#{$name}-wrap,
-.#{$name}.v-has-width .#{$name}-contents,
-.#{$name}.v-has-width .#{$name}-contents > div {
+.#{$primaryStyleName}.v-has-width > div.popupContent,
+.#{$primaryStyleName}.v-has-width .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}.v-has-width .#{$primaryStyleName}-contents,
+.#{$primaryStyleName}.v-has-width .#{$primaryStyleName}-contents > div {
width: 100%;
}
-.#{$name}.v-has-height > div.popupContent,
-.#{$name}.v-has-height .#{$name}-wrap,
-.#{$name}.v-has-height .#{$name}-contents,
-.#{$name}.v-has-height .#{$name}-contents > div {
+.#{$primaryStyleName}.v-has-height > div.popupContent,
+.#{$primaryStyleName}.v-has-height .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}.v-has-height .#{$primaryStyleName}-contents,
+.#{$primaryStyleName}.v-has-height .#{$primaryStyleName}-contents > div {
height: 100%;
}
-.#{$name}-outerheader {
+.#{$primaryStyleName}-outerheader {
padding: 0.3em 1em;
height: 1.6em;
position: relative;
box-sizing: border-box;
}
-.#{$name}-outerheader,
-.#{$name}-draggingCurtain {
+.#{$primaryStyleName}-outerheader,
+.#{$primaryStyleName}-draggingCurtain {
cursor: move;
}
-.#{$name}-header {
+.#{$primaryStyleName}-header {
font-weight: bold;
}
/* A more specific selector to make sure padding isn't so easily overridden */
-div.#{$name}-header {
+div.#{$primaryStyleName}-header {
white-space: nowrap;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
overflow: hidden;
padding: 0;
}
-.#{$name}-header .v-icon {
+.#{$primaryStyleName}-header .v-icon {
vertical-align: middle; /* This has to be 'middle', not 'bottom', to allow larger icons than 16px */
}
-.#{$name}-contents > div {
+.#{$primaryStyleName}-contents > div {
outline: none;
}
-.#{$name}-footer {
+.#{$primaryStyleName}-footer {
overflow: hidden;
zoom: 1;
height: 10px;
position: relative;
cursor: move;
}
-.#{$name}-resizebox {
+.#{$primaryStyleName}-resizebox {
width: 10px;
height: 10px;
background: #ddd;
right: 0;
}
-.#{$name}-resizebox,
-.#{$name}-resizingCurtain {
+.#{$primaryStyleName}-resizebox,
+.#{$primaryStyleName}-resizingCurtain {
cursor: se-resize;
}
-.#{$name} div.#{$name}-footer-noresize {
+.#{$primaryStyleName} div.#{$primaryStyleName}-footer-noresize {
height: 0;
}
-.#{$name}-resizebox-disabled {
+.#{$primaryStyleName}-resizebox-disabled {
cursor: default;
display: none;
}
-.#{$name}-closebox {
+.#{$primaryStyleName}-closebox {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
overflow: hidden;
}
-.#{$name}-modalitycurtain {
+.#{$primaryStyleName}-modalitycurtain {
top: 0;
left: 0;
background: #999;
-@mixin chameleon-datefield($name : v-datefield) {
+@mixin chameleon-datefield($primaryStyleName : v-datefield) {
-.#{$name}-button {
+.#{$primaryStyleName}-button {
background: #dadada url(../../img/date-btn.png) repeat-x 50% 0;
border: 1px solid gray;
-webkit-border-top-right-radius: 3px;
box-sizing: content-box;
}
-.#{$name}-small .#{$name}-button {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-button {
height: 1.2em;
}
-.#{$name}-big .#{$name}-button {
+.#{$primaryStyleName}-big .#{$primaryStyleName}-button {
padding: .3em 0;
height: 1.2em;
}
-.v-ie8 .#{$name}-button {
+.v-ie8 .#{$primaryStyleName}-button {
height: 1.6em;
padding: 0;
}
-.v-ie8 .#{$name}-big .#{$name}-button {
+.v-ie8 .#{$primaryStyleName}-big .#{$primaryStyleName}-button {
height: 1.8em;
}
-input.#{$name}-textfield {
+input.#{$primaryStyleName}-textfield {
border-right: none;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
/*******************************************************************************
* Big
******************************************************************************/
-.#{$name}-big .#{$name}-button {
+.#{$primaryStyleName}-big .#{$primaryStyleName}-button {
width: 32px;
background-image: url(../../img/date-btn-big.png);
}
/*******************************************************************************
* Small
******************************************************************************/
-.#{$name}-small .#{$name}-button {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-button {
width: 19px;
background-position: 50% -2px;
}
/*******************************************************************************
* Calendar panel
******************************************************************************/
-.#{$name}-calendarpanel {
+.#{$primaryStyleName}-calendarpanel {
border-collapse: collapse;
margin: 0;
padding: 0;
font-size: 0.9em;
}
-.#{$name}-month .#{$name}-textfield {
+.#{$primaryStyleName}-month .#{$primaryStyleName}-textfield {
width: 6em;
}
-.#{$name}-year .#{$name}-textfield {
+.#{$primaryStyleName}-year .#{$primaryStyleName}-textfield {
width: 4em;
}
-.#{$name}-year .#{$name}-calendarpanel-prevmonth,
-.#{$name}-year .#{$name}-calendarpanel-nextmonth {
+.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-prevmonth,
+.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-nextmonth {
display: none;
}
-.#{$name}-calendarpanel-header td {
+.#{$primaryStyleName}-calendarpanel-header td {
border-bottom: 1px solid #666;
}
-.#{$name}-year .#{$name}-calendarpanel-header td,
-.#{$name}-month .#{$name}-calendarpanel-header td {
+.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-header td,
+.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-header td {
border-bottom: none;
}
-td.#{$name}-calendarpanel-month {
+td.#{$primaryStyleName}-calendarpanel-month {
background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x 0 -1px;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
-span.#{$name}-calendarpanel-month {
+span.#{$primaryStyleName}-calendarpanel-month {
display: block;
text-align: center;
overflow: hidden;
height: 1.8em;
}
-.#{$name}-year .#{$name}-calendarpanel-month {
+.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-month {
width: 5em;
}
-.#{$name}-month .#{$name}-calendarpanel-month,
-.#{$name}-day .#{$name}-calendarpanel-month,
-.#{$name}-full .#{$name}-calendarpanel-month {
+.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-month,
+.#{$primaryStyleName}-day .#{$primaryStyleName}-calendarpanel-month,
+.#{$primaryStyleName}-full .#{$primaryStyleName}-calendarpanel-month {
width: 9em;
}
-.#{$name}-popupcalendar {
+.#{$primaryStyleName}-popupcalendar {
min-width: 0;
}
-.#{$name}-year .#{$name}-calendarpanel {
+.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel {
width: 8em;
}
-td.#{$name}-calendarpanel-prevyear {
+td.#{$primaryStyleName}-calendarpanel-prevyear {
text-align: right;
}
-td.#{$name}-calendarpanel-nextyear {
+td.#{$primaryStyleName}-calendarpanel-nextyear {
text-align: left;
}
-.#{$name}-calendarpanel-header button {
+.#{$primaryStyleName}-calendarpanel-header button {
font-size: 1em;
line-height: normal;
width: 100%;
cursor: pointer;
}
-.#{$name}-popup .#{$name}-calendarpanel-month,
-.#{$name}-popup .#{$name}-calendarpanel-header button {
+.#{$primaryStyleName}-popup .#{$primaryStyleName}-calendarpanel-month,
+.#{$primaryStyleName}-popup .#{$primaryStyleName}-calendarpanel-header button {
background-position: 0 0;
}
-.#{$name}-calendarpanel-header button:active {
+.#{$primaryStyleName}-calendarpanel-header button:active {
background-image: url(../../img/grad-dark-top2.png);
}
-.#{$name}-calendarpanel-prevyear button {
+.#{$primaryStyleName}-calendarpanel-prevyear button {
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
}
-.#{$name}-calendarpanel-nextyear button {
+.#{$primaryStyleName}-calendarpanel-nextyear button {
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
}
-.#{$name}-year .#{$name}-calendarpanel-prevyear button,
-.#{$name}-month .#{$name}-calendarpanel-prevyear button {
+.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-prevyear button,
+.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-prevyear button {
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
}
-.#{$name}-year .#{$name}-calendarpanel-nextyear button,
-.#{$name}-month .#{$name}-calendarpanel-nextyear button {
+.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-nextyear button,
+.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-nextyear button {
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
}
-.#{$name}-calendarpanel-body,
-.#{$name}-calendarpanel-time {
+.#{$primaryStyleName}-calendarpanel-body,
+.#{$primaryStyleName}-calendarpanel-time {
text-align: center;
vertical-align: top;
}
-.#{$name}-calendarpanel-body table {
+.#{$primaryStyleName}-calendarpanel-body table {
border-collapse: collapse;
margin: 0;
padding: 0;
margin: 0 auto;
}
-.#{$name}-calendarpanel-weekdays td {
+.#{$primaryStyleName}-calendarpanel-weekdays td {
width: 14.2%;
overflow: hidden;
line-height: normal;
vertical-align: top;
}
-.#{$name}-calendarpanel-weeknumbers td {
+.#{$primaryStyleName}-calendarpanel-weeknumbers td {
width: 12.5%;
}
-.#{$name}-calendarpanel-weekdays strong {
+.#{$primaryStyleName}-calendarpanel-weekdays strong {
display: block;
text-align: right;
font-size: 0.8em;
margin-bottom: 2px;
}
-.#{$name}-calendarpanel .v-first strong {
+.#{$primaryStyleName}-calendarpanel .v-first strong {
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
}
-.#{$name}-calendarpanel .v-last strong {
+.#{$primaryStyleName}-calendarpanel .v-last strong {
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
}
-.#{$name}-popup .#{$name}-calendarpanel .v-first strong,
-.#{$name}-popup .#{$name}-calendarpanel .v-last strong {
+.#{$primaryStyleName}-popup .#{$primaryStyleName}-calendarpanel .v-first strong,
+.#{$primaryStyleName}-popup .#{$primaryStyleName}-calendarpanel .v-last strong {
-webkit-border-radius: 0;
-moz-border-radius: 0;
}
-.#{$name}-calendarpanel-body td {
+.#{$primaryStyleName}-calendarpanel-body td {
text-align: right;
height: 1.6em;
}
-.#{$name}-calendarpanel-weeknumber {
+.#{$primaryStyleName}-calendarpanel-weeknumber {
padding: .5em .5em .35em 0;
}
-.#{$name}-calendarpanel-day,
-.#{$name}-calendarpanel-day-today {
+.#{$primaryStyleName}-calendarpanel-day,
+.#{$primaryStyleName}-calendarpanel-day-today {
padding: .15em .5em .15em 0;
display: block;
margin: 1px 1px 1px .3em;
-moz-border-radius: 2px;
}
-.#{$name}-calendarpanel-day-focused,
-.#{$name}-calendarpanel-day:hover {
+.#{$primaryStyleName}-calendarpanel-day-focused,
+.#{$primaryStyleName}-calendarpanel-day:hover {
margin: 0 0 0 .2em;
border: 1px solid #b3b3b3;
outline: none;
}
-.#{$name}-calendarpanel-day-today {
+.#{$primaryStyleName}-calendarpanel-day-today {
border: none;
background: transparent url(../../img/grad-dark-top2.png) repeat-x;
margin: 0 0 0 .2em;
border: 1px solid #c9c9c9;
}
-.#{$name}-calendarpanel-day-selected,
-.#{$name}-calendarpanel-day-selected:hover {
+.#{$primaryStyleName}-calendarpanel-day-selected,
+.#{$primaryStyleName}-calendarpanel-day-selected:hover {
margin: 0 0 0 .3em;
border: none;
}
-.#{$name}-calendarpanel-time select {
+.#{$primaryStyleName}-calendarpanel-time select {
padding: 0;
font-size: 0.9em;
margin: 0;
-@mixin chameleon-inline-datefield($name : v-inline-datefield){
+@mixin chameleon-inline-datefield($primaryStyleName : v-inline-datefield){
- /* FIXME $name should be passed to the the mixing instead of the default. Fix when SASS compiler works. #9821 */
+ /* FIXME $primaryStyleName should be passed to the the mixing instead of the default. Fix when SASS compiler works. #9821 */
@include chameleon-datefield(v-inline-datefield);
- .#{$name},
- .#{$name}-calendarpanel-day {
+ .#{$primaryStyleName},
+ .#{$primaryStyleName}-calendarpanel-day {
line-height:16px; /* Override popup datefields line-height:0 to get correct line heights */
}
}
\ No newline at end of file
-@mixin liferay-datefield($name : v-datefield) {
+@mixin liferay-datefield($primaryStyleName : v-datefield) {
-.#{$name}-popup {
+.#{$primaryStyleName}-popup {
padding: 3px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
-.#{$name}-calendarpanel-header {
+.#{$primaryStyleName}-calendarpanel-header {
height: 28px;
}
-.#{$name}-calendarpanel:focus {
+.#{$primaryStyleName}-calendarpanel:focus {
outline: none;
}
-.#{$name}-calendarpanel-body {
+.#{$primaryStyleName}-calendarpanel-body {
text-align: right;
vertical-align: top;
}
-.#{$name}-popupcalendar .#{$name}-button {
+.#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button {
background: transparent url(../common/buttons_sprites.png) no-repeat 0 -48px;
width: 24px;
height: 24px;
border: none;
}
-.#{$name}-popupcalendar .#{$name}-button:hover {
+.#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button:hover {
background-position: 0px -72px;
}
-.#{$name}-popupcalendar .#{$name}-button:focus {
+.#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button:focus {
background-position: 0px -96px;
}
-.#{$name}-month .#{$name}-calendarpanel-month,
-.#{$name}-day .#{$name}-calendarpanel-month,
-.#{$name}-full .#{$name}-calendarpanel-month {
+.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-month,
+.#{$primaryStyleName}-day .#{$primaryStyleName}-calendarpanel-month,
+.#{$primaryStyleName}-full .#{$primaryStyleName}-calendarpanel-month {
width: 124px;
}
-.#{$name}-year .#{$name}-calendarpanel-month {
+.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-month {
width: 35px;
}
-.#{$name}-calendarpanel-month {
+.#{$primaryStyleName}-calendarpanel-month {
background: transparent url(datefield_sprites.png) repeat-x 0 -112px;
font-weight: bold;
}
-span.#{$name}-calendarpanel-month {
+span.#{$primaryStyleName}-calendarpanel-month {
display: block;
text-align: center;
background: transparent;
padding: 1px 3px 0;
}
-.#{$name}-calendarpanel-prevyear,
-.#{$name}-calendarpanel-nextyear {
+.#{$primaryStyleName}-calendarpanel-prevyear,
+.#{$primaryStyleName}-calendarpanel-nextyear {
width: 22px;
}
-.#{$name}-calendarpanel-prevyear button,
-.#{$name}-calendarpanel-prevmonth button,
-.#{$name}-calendarpanel-nextmonth button,
-.#{$name}-calendarpanel-nextyear button {
+.#{$primaryStyleName}-calendarpanel-prevyear button,
+.#{$primaryStyleName}-calendarpanel-prevmonth button,
+.#{$primaryStyleName}-calendarpanel-nextmonth button,
+.#{$primaryStyleName}-calendarpanel-nextyear button {
width: 22px;
height: 28px;
border: none;
border-radius: 0;
}
-.v-ie .#{$name}-calendarpanel-prevyear button,
-.v-ie .#{$name}-calendarpanel-nextyear button,
-.v-ie .#{$name}-calendarpanel-prevmonth button,
-.v-ie .#{$name}-calendarpanel-nextmonth button {
+.v-ie .#{$primaryStyleName}-calendarpanel-prevyear button,
+.v-ie .#{$primaryStyleName}-calendarpanel-nextyear button,
+.v-ie .#{$primaryStyleName}-calendarpanel-prevmonth button,
+.v-ie .#{$primaryStyleName}-calendarpanel-nextmonth button {
text-indent: 0;
font-size: 1px;
}
-.#{$name}-calendarpanel-prevmonth button {
+.#{$primaryStyleName}-calendarpanel-prevmonth button {
background-position: 0 -56px;
}
-.#{$name}-calendarpanel-prevmonth {
+.#{$primaryStyleName}-calendarpanel-prevmonth {
background: transparent url(datefield_sprites.png) repeat-x 0 -112px;
}
-.#{$name}-calendarpanel-nextyear button {
+.#{$primaryStyleName}-calendarpanel-nextyear button {
background-position: 0 -28px;
width: 100%;
min-width: 22px;
}
-.#{$name}-calendarpanel-nextmonth button {
+.#{$primaryStyleName}-calendarpanel-nextmonth button {
background-position: 0 -84px;
}
-.#{$name}-calendarpanel-nextmonth {
+.#{$primaryStyleName}-calendarpanel-nextmonth {
background: transparent url(datefield_sprites.png) repeat-x 0 -112px;
}
-.#{$name}-calendarpanel-prevyear button {
+.#{$primaryStyleName}-calendarpanel-prevyear button {
width: 100%;
min-width: 22px;
}
-.#{$name}-calendarpanel-day {
+.#{$primaryStyleName}-calendarpanel-day {
display: block;
width: 22px;
margin: 0 0 3px 3px;
border-radius: 4px;
}
-.#{$name}-calendarpanel-day-today {
+.#{$primaryStyleName}-calendarpanel-day-today {
font-weight: bold;
}
-.#{$name}-calendarpanel-day-selected {
+.#{$primaryStyleName}-calendarpanel-day-selected {
background: #b5b5b5 url(/html/themes/classic/images/application/state_active_bg.png) repeat-x 0 0;
color: #000;
border-color: #555;
}
-.#{$name}-calendarpanel-day-focused {
+.#{$primaryStyleName}-calendarpanel-day-focused {
outline: 1px dotted #555;
}
-.#{$name}-calendarpanel-weekdays {
+.#{$primaryStyleName}-calendarpanel-weekdays {
text-align: center;
}
-.#{$name}-calendarpanel-weekdays strong {
+.#{$primaryStyleName}-calendarpanel-weekdays strong {
font-weight: normal;
}
-.#{$name}-calendarpanel-weeknumber {
+.#{$primaryStyleName}-calendarpanel-weeknumber {
display: block;
border: none;
padding: 2px 0 2px 0;
margin: 0;
}
-.#{$name}-calendarpanel-body table {
+.#{$primaryStyleName}-calendarpanel-body table {
margin: 0 auto;
width: 200px;
}
-@mixin liferay-inlinedatefield ($name : v-inline-datefield) {
+@mixin liferay-inlinedatefield ($primaryStyleName : v-inline-datefield) {
@include liferay-datefield(v-inline-datefield);
- .#{$name} {
+ .#{$primaryStyleName} {
line-height:19px; /* Override popup datefields line-height:0 to get correct line heights */
}
}
\ No newline at end of file
-@mixin reindeer-accordion($name : v-accordion) {
+@mixin reindeer-accordion($primaryStyleName : v-accordion) {
-.#{$name} {
+.#{$primaryStyleName} {
border: 1px solid #bebebe;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
overflow: hidden;
}
-.#{$name}-item {
+.#{$primaryStyleName}-item {
background-color: #fff;
}
-.#{$name}-item-caption {
+.#{$primaryStyleName}-item-caption {
height: 19px;
background: #e4e4e4 repeat-x;
background-image: url(../tabsheet/img/tabbar-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
text-shadow: #fff 0 1px 0;
}
-.#{$name}-item-caption .v-captiontext{
+.#{$primaryStyleName}-item-caption .v-captiontext{
vertical-align:baseline;
}
-.#{$name}-item-first .#{$name}-item-caption {
+.#{$primaryStyleName}-item-first .#{$primaryStyleName}-item-caption {
border-top: none;
}
-.#{$name}-item-caption .v-caption {
+.#{$primaryStyleName}-item-caption .v-caption {
padding: 3px 0 5px 10px;
}
-.v-ie .#{$name}-item-caption .v-caption {
+.v-ie .#{$primaryStyleName}-item-caption .v-caption {
padding: 2px 0 6px 10px;
}
-.#{$name}-item-open .#{$name}-item-caption {
+.#{$primaryStyleName}-item-open .#{$primaryStyleName}-item-caption {
background-image: url(../tabsheet/img/tabbar-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
border-bottom: 1px solid #bbb;
}
-.#{$name}-item-caption .v-icon {
+.#{$primaryStyleName}-item-caption .v-icon {
margin-top: -1px;
}
-.v-ie .#{$name}-item-caption .v-icon {
+.v-ie .#{$primaryStyleName}-item-caption .v-icon {
vertical-align: top;
}
/* Borderless style */
-.#{$name}-borderless {
+.#{$primaryStyleName}-borderless {
border: none;
border-radius: 0;
-webkit-border-radius: 0;
-@mixin reindeer-button-ie($name : v-nativebutton) {
+@mixin reindeer-button-ie($primaryStyleName : v-nativebutton) {
-.v-ie8 .#{$name}-link {
+.v-ie8 .#{$primaryStyleName}-link {
padding: 0;
text-align: left;
}
-@mixin reindeer-button-link-style($name : v-button) {
+@mixin reindeer-button-link-style($primaryStyleName : v-button) {
-.#{$name}.#{$name}-link,
-.#{$name}.#{$name}-link:focus,
-.#{$name}.#{$name}-link:active,
-.#{$name}-link.v-pressed,
-.v-disabled.#{$name}.#{$name}-link,
-.#{$name}.#{$name}-link .#{$name}-wrap,
-.#{$name}.#{$name}-link:focus .#{$name}-wrap,
-.#{$name}.#{$name}-link:active .#{$name}-wrap,
-.#{$name}-link.v-pressed .#{$name}-wrap,
-.v-disabled.#{$name}.#{$name}-link .#{$name}-wrap {
+.#{$primaryStyleName}.#{$primaryStyleName}-link,
+.#{$primaryStyleName}.#{$primaryStyleName}-link:focus,
+.#{$primaryStyleName}.#{$primaryStyleName}-link:active,
+.#{$primaryStyleName}-link.v-pressed,
+.v-disabled.#{$primaryStyleName}.#{$primaryStyleName}-link,
+.#{$primaryStyleName}.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}.#{$primaryStyleName}-link:focus .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}.#{$primaryStyleName}-link:active .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-link.v-pressed .#{$primaryStyleName}-wrap,
+.v-disabled.#{$primaryStyleName}.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap {
background: transparent;
height: auto;
padding: 0;
line-height: inherit;
}
-.#{$name}.#{$name}-link.v-disabled,
-.#{$name}.#{$name}-link.v-disabled .#{$name}-wrap {
+.#{$primaryStyleName}.#{$primaryStyleName}-link.v-disabled,
+.#{$primaryStyleName}.#{$primaryStyleName}-link.v-disabled .#{$primaryStyleName}-wrap {
cursor: default;
}
-.#{$name}-link .#{$name}-caption {
+.#{$primaryStyleName}-link .#{$primaryStyleName}-caption {
line-height: inherit;
font-weight: normal;
color: #1b699f;
text-shadow: none;
}
-.#{$name}-link:focus .#{$name}-caption {
+.#{$primaryStyleName}-link:focus .#{$primaryStyleName}-caption {
outline: 1px dotted #1b699f;
}
-@mixin reindeer-button-primary-style($name : v-button) {
+@mixin reindeer-button-primary-style($primaryStyleName : v-button) {
-.#{$name}-primary:focus {
+.#{$primaryStyleName}-primary:focus {
background-image: url(img/primary-left-focus.png); /** sprite-ref: buttons */
}
-.#{$name}-primary:focus .#{$name}-wrap {
+.#{$primaryStyleName}-primary:focus .#{$primaryStyleName}-wrap {
background-image: url(img/primary-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
}
-.#{$name}-primary:active,
-.#{$name}-primary.v-pressed {
+.#{$primaryStyleName}-primary:active,
+.#{$primaryStyleName}-primary.v-pressed {
background-image: url(img/primary-left-pressed.png); /** sprite-ref: buttons */
}
-.#{$name}-primary:active .#{$name}-wrap,
-.#{$name}-primary.v-pressed .#{$name}-wrap {
+.#{$primaryStyleName}-primary:active .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-primary.v-pressed .#{$primaryStyleName}-wrap {
background-image: url(img/primary-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
}
-.#{$name}-primary,
-.v-disabled.#{$name}-primary {
+.#{$primaryStyleName}-primary,
+.v-disabled.#{$primaryStyleName}-primary {
background-image: url(img/primary-left.png); /** sprite-ref: buttons */
}
-.#{$name}-primary .#{$name}-wrap,
-.v-disabled.#{$name}-primary .#{$name}-wrap {
+.#{$primaryStyleName}-primary .#{$primaryStyleName}-wrap,
+.v-disabled.#{$primaryStyleName}-primary .#{$primaryStyleName}-wrap {
background-image: url(img/primary-right.png); /** sprite-ref: buttons; sprite-alignment: right */
}
/* Black style */
-.black .#{$name}-primary:focus {
+.black .#{$primaryStyleName}-primary:focus {
background-image: url(img/black/primary-left-focus.png); /** sprite-ref: black-buttons */
}
-.black .#{$name}-primary:focus .#{$name}-wrap {
+.black .#{$primaryStyleName}-primary:focus .#{$primaryStyleName}-wrap {
background-image: url(img/black/primary-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
color: #eaf4fb;
}
-.black .#{$name}-primary:active,
-.black .#{$name}-primary.v-pressed {
+.black .#{$primaryStyleName}-primary:active,
+.black .#{$primaryStyleName}-primary.v-pressed {
background-image: url(img/black/primary-left-pressed.png); /** sprite-ref: black-buttons */
}
-.black .#{$name}-primary:active .#{$name}-wrap,
-.black .#{$name}-primary.v-pressed .#{$name}-wrap {
+.black .#{$primaryStyleName}-primary:active .#{$primaryStyleName}-wrap,
+.black .#{$primaryStyleName}-primary.v-pressed .#{$primaryStyleName}-wrap {
background-image: url(img/black/primary-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
}
-.black .#{$name}-primary,
-.black .v-disabled.#{$name}-primary {
+.black .#{$primaryStyleName}-primary,
+.black .v-disabled.#{$primaryStyleName}-primary {
background-image: url(img/black/primary-left.png); /** sprite-ref: black-buttons */
}
-.black .#{$name}-primary .#{$name}-wrap,
-.black .v-disabled.#{$name}-primary .#{$name}-wrap {
+.black .#{$primaryStyleName}-primary .#{$primaryStyleName}-wrap,
+.black .v-disabled.#{$primaryStyleName}-primary .#{$primaryStyleName}-wrap {
background-image: url(img/black/primary-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
}
-@mixin reindeer-button-small-style($name : v-button) {
+@mixin reindeer-button-small-style($primaryStyleName : v-button) {
-.#{$name}-small:focus {
+.#{$primaryStyleName}-small:focus {
background-image: url(img/small-left-focus.png); /** sprite-ref: buttons */
}
-.#{$name}-small:focus .#{$name}-wrap {
+.#{$primaryStyleName}-small:focus .#{$primaryStyleName}-wrap {
background-image: url(img/small-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
}
-.#{$name}-small:active,
-.#{$name}-small.v-pressed {
+.#{$primaryStyleName}-small:active,
+.#{$primaryStyleName}-small.v-pressed {
background-image: url(img/small-left-pressed.png); /** sprite-ref: buttons */
}
-.#{$name}-small:active .#{$name}-wrap,
-.#{$name}-small.v-pressed .#{$name}-wrap {
+.#{$primaryStyleName}-small:active .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-small.v-pressed .#{$primaryStyleName}-wrap {
background-image: url(img/small-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
}
-.#{$name}-small,
-.v-disabled.#{$name}-small {
+.#{$primaryStyleName}-small,
+.v-disabled.#{$primaryStyleName}-small {
background-image: url(img/small-left.png); /** sprite-ref: buttons */
height: 20px;
}
-.#{$name}-small .#{$name}-wrap,
-.v-disabled.#{$name}-small .#{$name}-wrap {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-wrap,
+.v-disabled.#{$primaryStyleName}-small .#{$primaryStyleName}-wrap {
background-image: url(img/small-right.png); /** sprite-ref: buttons; sprite-alignment: right */
height: 19px;
padding: 1px 14px 0 8px;
}
-.#{$name}-small .#{$name}-caption {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-caption {
font-weight: normal;
}
/* Black style */
-.black .#{$name}-small:focus {
+.black .#{$primaryStyleName}-small:focus {
background-image: url(img/black/small-left-focus.png); /** sprite-ref: black-buttons */
}
-.black .#{$name}-small:focus .#{$name}-wrap {
+.black .#{$primaryStyleName}-small:focus .#{$primaryStyleName}-wrap {
background-image: url(img/black/small-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
}
-.black .#{$name}-small:active,
-.black .#{$name}-small.v-pressed {
+.black .#{$primaryStyleName}-small:active,
+.black .#{$primaryStyleName}-small.v-pressed {
background-image: url(img/black/small-left-pressed.png); /** sprite-ref: black-buttons */
}
-.black .#{$name}-small:active .#{$name}-wrap,
-.black .#{$name}-small.v-pressed .#{$name}-wrap {
+.black .#{$primaryStyleName}-small:active .#{$primaryStyleName}-wrap,
+.black .#{$primaryStyleName}-small.v-pressed .#{$primaryStyleName}-wrap {
background-image: url(img/black/small-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
}
-.black .#{$name}-small,
-.black .v-disabled.#{$name}-small {
+.black .#{$primaryStyleName}-small,
+.black .v-disabled.#{$primaryStyleName}-small {
background-image: url(img/black/small-left.png); /** sprite-ref: black-buttons */
}
-.black .#{$name}-small .#{$name}-wrap,
-.black .v-disabled.#{$name}-small .#{$name}-wrap {
+.black .#{$primaryStyleName}-small .#{$primaryStyleName}-wrap,
+.black .v-disabled.#{$primaryStyleName}-small .#{$primaryStyleName}-wrap {
background-image: url(img/black/small-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
}
-@mixin reindeer-button-standard($name : v-button) {
+@mixin reindeer-button-standard($primaryStyleName : v-button) {
-.#{$name}:focus {
+.#{$primaryStyleName}:focus {
background-image: url(img/left-focus.png); /** sprite-ref: buttons */
outline: none;
}
-.#{$name}:focus .#{$name}-wrap {
+.#{$primaryStyleName}:focus .#{$primaryStyleName}-wrap {
background-image: url(img/right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
outline: none;
}
-.#{$name}:active,
-.#{$name}.v-pressed {
+.#{$primaryStyleName}:active,
+.#{$primaryStyleName}.v-pressed {
background-image: url(img/left-pressed.png); /** sprite-ref: buttons */
outline: none;
}
-.#{$name}:active .#{$name}-wrap,
-.#{$name}.v-pressed .#{$name}-wrap {
+.#{$primaryStyleName}:active .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}.v-pressed .#{$primaryStyleName}-wrap {
background-image: url(img/right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
outline: none;
}
-.#{$name},
-.v-disabled.#{$name} {
+.#{$primaryStyleName},
+.v-disabled.#{$primaryStyleName} {
height: 26px;
padding: 0 0 0 6px;
background-color: transparent;
cursor: default;
}
-.#{$name}-wrap,
-.v-disabled.#{$name} .#{$name}-wrap {
+.#{$primaryStyleName}-wrap,
+.v-disabled.#{$primaryStyleName} .#{$primaryStyleName}-wrap {
display: block;
height: 22px;
padding: 4px 15px 0 9px;
background-image: url(img/right.png); /** sprite-ref: buttons; sprite-alignment: right */
}
-.#{$name}-caption {
+.#{$primaryStyleName}-caption {
color: #222;
text-shadow: #fff 0 1px 0;
font-weight: bold;
/**************************
* Black style
**************************/
-.black .#{$name}:focus {
+.black .#{$primaryStyleName}:focus {
background-image: url(img/black/left-focus.png); /** sprite-ref: black-buttons */
}
-.black .#{$name}:focus .#{$name}-wrap {
+.black .#{$primaryStyleName}:focus .#{$primaryStyleName}-wrap {
background-image: url(img/black/right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
}
-.black .#{$name}:active,
-.black .#{$name}.v-pressed {
+.black .#{$primaryStyleName}:active,
+.black .#{$primaryStyleName}.v-pressed {
background-image: url(img/black/left-pressed.png); /** sprite-ref: black-buttons */
}
-.black .#{$name}:active .#{$name}-wrap,
-.black .#{$name}.v-pressed .#{$name}-wrap {
+.black .#{$primaryStyleName}:active .#{$primaryStyleName}-wrap,
+.black .#{$primaryStyleName}.v-pressed .#{$primaryStyleName}-wrap {
background-image: url(img/black/right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
}
-.black .#{$name},
-.black .v-disabled.#{$name} {
+.black .#{$primaryStyleName},
+.black .v-disabled.#{$primaryStyleName} {
background-image: url(img/black/left.png); /** sprite-ref: black-buttons */
}
-.black .#{$name}-wrap,
-.black .v-disabled.#{$name} .#{$name}-wrap {
+.black .#{$primaryStyleName}-wrap,
+.black .v-disabled.#{$primaryStyleName} .#{$primaryStyleName}-wrap {
background-image: url(img/black/right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
}
-.black .#{$name}-caption {
+.black .#{$primaryStyleName}-caption {
color: #c9ccce;
text-shadow: #121314 0 -1px 0;
}
@import "button-small-style.scss";
@import "button-link-style.scss";
-@mixin reindeer-button($name : v-button) {
+@mixin reindeer-button($primaryStyleName : v-button) {
// TODO use $exclude
@include reindeer-button-standard;
@include reindeer-button-primary-style;
/* Browser-specific corrections to the standard implementation */
@import "button-ie.scss";
-@mixin reindeer-nativebutton-link($name : v-nativebutton) {
+@mixin reindeer-nativebutton-link($primaryStyleName : v-nativebutton) {
-.#{$name}-link .#{$name}-caption {
+.#{$primaryStyleName}-link .#{$primaryStyleName}-caption {
line-height: inherit;
font-weight: normal;
color: #1b699f;
text-shadow: none;
}
-.#{$name}-link:focus .#{$name}-caption {
+.#{$primaryStyleName}-link:focus .#{$primaryStyleName}-caption {
outline: 1px dotted #1b699f;
}
}
-@mixin reindeer-nativebutton($name : v-nativebutton) {
- @include reindeer-nativebutton-link($name);
+@mixin reindeer-nativebutton($primaryStyleName : v-nativebutton) {
+ @include reindeer-nativebutton-link($primaryStyleName);
/* Browser-specific corrections to the standard implementation */
- @include reindeer-button-ie($name);
+ @include reindeer-button-ie($primaryStyleName);
}
\ No newline at end of file
-@mixin reindeer-datefield($name : v-datefield) {
+@mixin reindeer-datefield($primaryStyleName : v-datefield) {
-.#{$name} {
+.#{$primaryStyleName} {
overflow: hidden;
}
input.v-textfield-readonly:focus{
background-color: transparent;
}
-.#{$name}-calendarpanel {
+.#{$primaryStyleName}-calendarpanel {
border-collapse: collapse;
margin: 0;
padding: 0;
height: auto !important;
}
-.#{$name}-year .#{$name}-calendarpanel-prevmonth,
-.#{$name}-year .#{$name}-calendarpanel-nextmonth {
+.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-prevmonth,
+.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-nextmonth {
display: none;
}
-.#{$name}-calendarpanel td {
+.#{$primaryStyleName}-calendarpanel td {
vertical-align: top;
}
-td.#{$name}-calendarpanel-month {
+td.#{$primaryStyleName}-calendarpanel-month {
height: 23px;
background-repeat: repeat-x;
background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-span.#{$name}-calendarpanel-month {
+span.#{$primaryStyleName}-calendarpanel-month {
display: block;
text-align: center;
height: 16px;
overflow: hidden;
margin-top: 1px;
}
-.#{$name}-year .#{$name}-calendarpanel-month {
+.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-month {
width: 35px;
}
-.#{$name}-month .#{$name}-calendarpanel-month,
-.#{$name}-day .#{$name}-calendarpanel-month,
-.#{$name}-full .#{$name}-calendarpanel-month {
+.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-month,
+.#{$primaryStyleName}-day .#{$primaryStyleName}-calendarpanel-month,
+.#{$primaryStyleName}-full .#{$primaryStyleName}-calendarpanel-month {
width: 124px;
}
-.#{$name}-month,
-.#{$name}-day,
-.#{$name}-full {
+.#{$primaryStyleName}-month,
+.#{$primaryStyleName}-day,
+.#{$primaryStyleName}-full {
min-width: 240px;
}
-.#{$name}-popupcalendar {
+.#{$primaryStyleName}-popupcalendar {
min-width: 0;
padding-right: 24px;
}
-.#{$name}-year .#{$name}-calendarpanel {
+.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel {
width: 100px;
}
-td.#{$name}-calendarpanel-prevyear {
+td.#{$primaryStyleName}-calendarpanel-prevyear {
text-align: right;
}
-td.#{$name}-calendarpanel-nextyear {
+td.#{$primaryStyleName}-calendarpanel-nextyear {
text-align: left;
}
-.#{$name}-calendarpanel-prevyear button,
-.#{$name}-calendarpanel-nextyear button,
-.#{$name}-calendarpanel-prevmonth button,
-.#{$name}-calendarpanel-nextmonth button {
+.#{$primaryStyleName}-calendarpanel-prevyear button,
+.#{$primaryStyleName}-calendarpanel-nextyear button,
+.#{$primaryStyleName}-calendarpanel-prevmonth button,
+.#{$primaryStyleName}-calendarpanel-nextmonth button {
width: 24px;
height: 23px;
border: none;
-moz-border-radius: 0;
border-radius: 0;
}
-.v-ie .#{$name}-calendarpanel-prevyear button,
-.v-ie .#{$name}-calendarpanel-nextyear button,
-.v-ie .#{$name}-calendarpanel-prevmonth button,
-.v-ie .#{$name}-calendarpanel-nextmonth button {
+.v-ie .#{$primaryStyleName}-calendarpanel-prevyear button,
+.v-ie .#{$primaryStyleName}-calendarpanel-nextyear button,
+.v-ie .#{$primaryStyleName}-calendarpanel-prevmonth button,
+.v-ie .#{$primaryStyleName}-calendarpanel-nextmonth button {
text-indent: 0;
font-size: 1px;
}
-.#{$name}-calendarpanel-nextyear button {
+.#{$primaryStyleName}-calendarpanel-nextyear button {
background-position: left top;
background-image: url(img/year-next.png); /** sprite-ref: verticals */
}
-.#{$name}-calendarpanel-prevyear button:active,
-.v-ie .#{$name}-calendarpanel-prevyear button.v-pressed {
+.#{$primaryStyleName}-calendarpanel-prevyear button:active,
+.v-ie .#{$primaryStyleName}-calendarpanel-prevyear button.v-pressed {
background-image: url(img/year-prev-pressed.png); /** sprite-ref: verticals */
}
-.#{$name}-calendarpanel-nextyear button:active,
-.v-ie .#{$name}-calendarpanel-nextyear button.v-pressed {
+.#{$primaryStyleName}-calendarpanel-nextyear button:active,
+.v-ie .#{$primaryStyleName}-calendarpanel-nextyear button.v-pressed {
background-image: url(img/year-next-pressed.png); /** sprite-ref: verticals */
}
-.#{$name}-calendarpanel-prevmonth,
-.#{$name}-calendarpanel-nextmonth {
+.#{$primaryStyleName}-calendarpanel-prevmonth,
+.#{$primaryStyleName}-calendarpanel-nextmonth {
width: 24px;
background-repeat: repeat-x;
background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-.#{$name}-calendarpanel-prevmonth button,
-.#{$name}-calendarpanel-nextmonth button {
+.#{$primaryStyleName}-calendarpanel-prevmonth button,
+.#{$primaryStyleName}-calendarpanel-nextmonth button {
width: 100%;
height: 21px;
border-left: 1px solid #efefef;
min-width: 24px;
margin-top: 1px;
}
-.v-ie .#{$name}-calendarpanel-prevmonth button,
-.v-ie .#{$name}-calendarpanel-nextmonth button {
+.v-ie .#{$primaryStyleName}-calendarpanel-prevmonth button,
+.v-ie .#{$primaryStyleName}-calendarpanel-nextmonth button {
border: none;
}
-.#{$name}-calendarpanel-nextmonth button {
+.#{$primaryStyleName}-calendarpanel-nextmonth button {
background-image: url(img/month-next.png); /** sprite-ref: verticals; sprite-alignment: center */
}
-.#{$name}-calendarpanel-prevmonth button:active,
-.v-ie .#{$name}-calendarpanel-prevmonth button.v-pressed {
+.#{$primaryStyleName}-calendarpanel-prevmonth button:active,
+.v-ie .#{$primaryStyleName}-calendarpanel-prevmonth button.v-pressed {
background-position: center top;
background-image: url(img/month-prev-pressed.png); /** sprite-ref: verticals; sprite-alignment: center */
}
-.#{$name}-calendarpanel-nextmonth button:active,
-.v-ie .#{$name}-calendarpanel-nextmonth button.v-pressed {
+.#{$primaryStyleName}-calendarpanel-nextmonth button:active,
+.v-ie .#{$primaryStyleName}-calendarpanel-nextmonth button.v-pressed {
background-position: center top;
background-image: url(img/month-next-pressed.png); /** sprite-ref: verticals; sprite-alignment: center */
}
-.#{$name}-calendarpanel-body,
-.#{$name}-calendarpanel-time {
+.#{$primaryStyleName}-calendarpanel-body,
+.#{$primaryStyleName}-calendarpanel-time {
text-align: center;
vertical-align: top;
}
-.#{$name}-calendarpanel-body table {
+.#{$primaryStyleName}-calendarpanel-body table {
border-collapse: collapse;
margin: 0;
padding: 0;
width: 220px;
margin: 0 auto;
}
-.#{$name}-calendarpanel-weekdays td {
+.#{$primaryStyleName}-calendarpanel-weekdays td {
width: 14.2%;
overflow: hidden;
background-repeat: repeat-x;
vertical-align: top;
padding:0;
}
-.#{$name}-calendarpanel-weeknumbers td {
+.#{$primaryStyleName}-calendarpanel-weeknumbers td {
width: 12.4%;
}
-.#{$name}-calendarpanel-weekdays strong {
+.#{$primaryStyleName}-calendarpanel-weekdays strong {
display: block;
text-align: right;
padding: 1px 5px 0 0;
height: 14px;
border-top: 1px solid #596775;
}
-.#{$name}-calendarpanel-weekdays .v-first {
+.#{$primaryStyleName}-calendarpanel-weekdays .v-first {
background-repeat: no-repeat;
background-image: url(img/weekday-first.png); /** sprite-ref: verticals; sprite-margin-bottom: 3px */
}
-.#{$name}-calendarpanel-weekdays .v-last {
+.#{$primaryStyleName}-calendarpanel-weekdays .v-last {
background-repeat: no-repeat;
background-position: right top;
background-image: url(img/weekday-last.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-bottom: 3px */
}
/* IE fails to position backgrounds inside table element */
-.v-ie .#{$name}-calendarpanel-weekdays td {
+.v-ie .#{$primaryStyleName}-calendarpanel-weekdays td {
background: url(img/weekday-bg.png) repeat-x;
background-position: left top;
}
-.v-ie .#{$name}-calendarpanel .v-first {
+.v-ie .#{$primaryStyleName}-calendarpanel .v-first {
background: url(img/weekday-first.png) no-repeat;
}
-.v-ie .#{$name}-calendarpanel .v-last {
+.v-ie .#{$primaryStyleName}-calendarpanel .v-last {
background: url(img/weekday-last.png) no-repeat right top;
}
-.#{$name}-calendarpanel-body td {
+.#{$primaryStyleName}-calendarpanel-body td {
text-align: right;
height: 19px;
}
-.#{$name}-calendarpanel-day,
-.#{$name}-calendarpanel-weeknumber,
-.#{$name}-calendarpanel-day-today {
+.#{$primaryStyleName}-calendarpanel-day,
+.#{$primaryStyleName}-calendarpanel-weeknumber,
+.#{$primaryStyleName}-calendarpanel-day-today {
padding: 2px 5px 2px 0;
display: block;
margin: 1px 0 0 5px;
}
-.#{$name}-calendarpanel-weeknumber {
+.#{$primaryStyleName}-calendarpanel-weeknumber {
margin: 0;
padding-top: 4px;
padding-bottom: 3px;
}
-.#{$name}-calendarpanel-day-today {
+.#{$primaryStyleName}-calendarpanel-day-today {
color: #4095d1;
border: none;
}
-.#{$name}-calendarpanel-day-selected {
+.#{$primaryStyleName}-calendarpanel-day-selected {
background: #507ba3;
color: #fff;
text-shadow: #3b5b79 0 1px 0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
-.#{$name}-calendarpanel-time select {
+.#{$primaryStyleName}-calendarpanel-time select {
padding: 0;
font-size: 11px;
margin: 2px;
}
-.#{$name}-popup {
+.#{$primaryStyleName}-popup {
background: #f8f8f9;
padding: 8px 4px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
-.v-sa .#{$name}-popup,
-.v-op .#{$name}-popup {
+.v-sa .#{$primaryStyleName}-popup,
+.v-op .#{$primaryStyleName}-popup {
background: rgba(255,255,255,.95);
}
-.v-has-width > input.#{$name}-textfield {
+.v-has-width > input.#{$primaryStyleName}-textfield {
width: 100%;
}
-.#{$name}-year > .#{$name}-textfield {
+.#{$primaryStyleName}-year > .#{$primaryStyleName}-textfield {
width: 4.5em;
}
-.#{$name}-month > .#{$name}-textfield {
+.#{$primaryStyleName}-month > .#{$primaryStyleName}-textfield {
width: 5.5em;
}
-.#{$name}-day > .#{$name}-textfield {
+.#{$primaryStyleName}-day > .#{$primaryStyleName}-textfield {
width: 6em;
}
-.#{$name}-full >.#{$name}-textfield {
+.#{$primaryStyleName}-full >.#{$primaryStyleName}-textfield {
width: 12.5em;
}
-.#{$name}-popupcalendar input.#{$name}-textfield {
+.#{$primaryStyleName}-popupcalendar input.#{$primaryStyleName}-textfield {
border-right-width: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-.#{$name}.v-readonly input.#{$name}-textfield {
+.#{$primaryStyleName}.v-readonly input.#{$primaryStyleName}-textfield {
border-right-width: 1px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
-.#{$name}-prompt .#{$name}-textfield {
+.#{$primaryStyleName}-prompt .#{$primaryStyleName}-textfield {
color: #999;
font-style: normal;
}
-.#{$name}-popupcalendar .#{$name}-button {
+.#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button {
width: 24px;
margin-right: -24px;
height: 23px;
-moz-border-radius: 0;
border-radius: 0;
}
-.#{$name}-popupcalendar .#{$name}-button:active {
+.#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button:active {
background-image: url(img/popup-btn-pressed.png); /** sprite-ref: verticals */
}
/* over black background */
-.black .#{$name}-popupcalendar .#{$name}-button {
+.black .#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button {
background-image: url(img/popup-btn-black.png); /** sprite-ref: black-verticals */
}
-.black .#{$name}-popupcalendar .#{$name}-button:active {
+.black .#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button:active {
background-image: url(img/popup-btn-black-pressed.png); /** sprite-ref: black-verticals */
}
* on black background
*/
-.black td.#{$name}-calendarpanel-month {
+.black td.#{$primaryStyleName}-calendarpanel-month {
background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
height: 21px;
}
-.black span.#{$name}-calendarpanel-month {
+.black span.#{$primaryStyleName}-calendarpanel-month {
border-left: 1px solid #333638;
border-right: 1px solid #232527;
color: #c9ccce;
padding: 4px 10px 1px 10px;
margin-top: 0;
}
-.black .#{$name}-calendarpanel-prevyear button,
-.black .#{$name}-calendarpanel-nextyear button,
-.black .#{$name}-calendarpanel-prevmonth button,
-.black .#{$name}-calendarpanel-nextmonth button {
+.black .#{$primaryStyleName}-calendarpanel-prevyear button,
+.black .#{$primaryStyleName}-calendarpanel-nextyear button,
+.black .#{$primaryStyleName}-calendarpanel-prevmonth button,
+.black .#{$primaryStyleName}-calendarpanel-nextmonth button {
background-image: url(img/year-prev-black.png); /** sprite-ref: black-verticals */
height: 21px;
}
-.black .#{$name}-calendarpanel-nextyear button {
+.black .#{$primaryStyleName}-calendarpanel-nextyear button {
background-image: url(img/year-next-black.png); /** sprite-ref: black-verticals */
}
-.black .#{$name}-calendarpanel-prevyear button:active,
-.v-ie .black .#{$name}-calendarpanel-prevyear button.v-pressed {
+.black .#{$primaryStyleName}-calendarpanel-prevyear button:active,
+.v-ie .black .#{$primaryStyleName}-calendarpanel-prevyear button.v-pressed {
background-image: url(img/year-prev-black-pressed.png); /** sprite-ref: black-verticals */
}
-.black .#{$name}-calendarpanel-nextyear button:active,
-.v-ie .black .#{$name}-calendarpanel-nextyear button.v-pressed {
+.black .#{$primaryStyleName}-calendarpanel-nextyear button:active,
+.v-ie .black .#{$primaryStyleName}-calendarpanel-nextyear button.v-pressed {
background-image: url(img/year-next-black-pressed.png); /** sprite-ref: black-verticals */
}
-.black .#{$name}-calendarpanel-prevmonth,
-.black .#{$name}-calendarpanel-nextmonth {
+.black .#{$primaryStyleName}-calendarpanel-prevmonth,
+.black .#{$primaryStyleName}-calendarpanel-nextmonth {
background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
}
-.black .#{$name}-calendarpanel-prevmonth button,
-.black .#{$name}-calendarpanel-nextmonth button {
+.black .#{$primaryStyleName}-calendarpanel-prevmonth button,
+.black .#{$primaryStyleName}-calendarpanel-nextmonth button {
border-left: 1px solid #333638;
border-right: 1px solid #232527;
background-image: url(img/month-prev-black.png); /** sprite-ref: black-verticals; sprite-alignment: center */
margin-top: 0;
}
-.black .#{$name}-calendarpanel-nextmonth button {
+.black .#{$primaryStyleName}-calendarpanel-nextmonth button {
background-image: url(img/month-next-black.png); /** sprite-ref: black-verticals; sprite-alignment: center */
}
-.black .#{$name}-calendarpanel-prevmonth button:active,
-.v-ie .black .#{$name}-calendarpanel-prevmonth button.v-pressed {
+.black .#{$primaryStyleName}-calendarpanel-prevmonth button:active,
+.v-ie .black .#{$primaryStyleName}-calendarpanel-prevmonth button.v-pressed {
background-image: url(img/month-prev-black-pressed.png); /** sprite-ref: black-verticals; sprite-alignment: center */
}
-.black .#{$name}-calendarpanel-nextmonth button:active,
-.v-ie .black .#{$name}-calendarpanel-nextmonth button.v-pressed {
+.black .#{$primaryStyleName}-calendarpanel-nextmonth button:active,
+.v-ie .black .#{$primaryStyleName}-calendarpanel-nextmonth button.v-pressed {
background-image: url(img/month-next-black-pressed.png); /** sprite-ref: black-verticals; sprite-alignment: center */
}
-.v-ie .black .#{$name}-calendarpanel-prevmonth button,
-.v-ie .black .#{$name}-calendarpanel-nextmonth button {
+.v-ie .black .#{$primaryStyleName}-calendarpanel-prevmonth button,
+.v-ie .black .#{$primaryStyleName}-calendarpanel-nextmonth button {
border: none;
}
-.black .#{$name}-calendarpanel-weekdays td {
+.black .#{$primaryStyleName}-calendarpanel-weekdays td {
background-image: url(img/weekday-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 3px */
color: #0a0b0b;
text-shadow: #5a5c5e 0 1px 0;
}
-.black .#{$name}-calendarpanel-weekdays strong {
+.black .#{$primaryStyleName}-calendarpanel-weekdays strong {
border-top-color: #1b1c1d;
}
-.black .#{$name}-calendarpanel .v-first {
+.black .#{$primaryStyleName}-calendarpanel .v-first {
background-image: url(img/weekday-first-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 3px */
}
-.black .#{$name}-calendarpanel .v-last {
+.black .#{$primaryStyleName}-calendarpanel .v-last {
background-image: url(img/weekday-last-black.png); /** sprite-ref: black-verticals; sprite-alignment: right */
}
-.black .#{$name}-prompt .#{$name}-textfield {
+.black .#{$primaryStyleName}-prompt .#{$primaryStyleName}-textfield {
color: #5f6366;
}
-@mixin reindeer-formlayout($name : v-formlayout) {
+@mixin reindeer-formlayout($primaryStyleName : v-formlayout) {
-.#{$name}-errorcell {
+.#{$primaryStyleName}-errorcell {
width: 13px;
}
-.#{$name}-cell .v-errorindicator {
+.#{$primaryStyleName}-cell .v-errorindicator {
width: 13px;
height: 16px;
background: transparent url(../common/icons/error.png) no-repeat 50%;
}
-.#{$name}-captioncell {
+.#{$primaryStyleName}-captioncell {
text-align: right;
white-space: nowrap;
}
-.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-captioncell,
-.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-contentcell,
-.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-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;
}
-.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-captioncell,
-.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-contentcell,
-.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-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;
}
-.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-captioncell,
-.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-contentcell,
-.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-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;
}
-.#{$name}-margin-left > tbody > .#{$name}-row > .#{$name}-captioncell {
+.#{$primaryStyleName}-margin-left > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-captioncell {
padding-left: 18px;
}
-.#{$name}-margin-right > tbody > .#{$name}-row > .#{$name}-contentcell {
+.#{$primaryStyleName}-margin-right > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-contentcell {
padding-right: 18px;
}
/* form */
-@mixin reindeer-inlinedatefield ($name : v-inline-datefield) {
+@mixin reindeer-inlinedatefield ($primaryStyleName : v-inline-datefield) {
@include reindeer-datefield(v-inline-datefield);
- .#{$name} {
+ .#{$primaryStyleName} {
line-height:14px; /* Override popup datefields line-height:0 to get correct line heights */
}
}
\ No newline at end of file
-@mixin reindeer-label($name : v-label) {
+@mixin reindeer-label($primaryStyleName : v-label) {
-.#{$name} {
+.#{$primaryStyleName} {
line-height: 18px;
}
color: #C9CCCE;
text-shadow: 0 0 1px #000;
}
-.black .#{$name}-h1,
-.black .#{$name}-h2,
+.black .#{$primaryStyleName}-h1,
+.black .#{$primaryStyleName}-h2,
.black .v-caption-h1,
.black .v-caption-h2,
-.white .black .#{$name}-h1,
-.white .black .#{$name}-h2,
+.white .black .#{$primaryStyleName}-h1,
+.white .black .#{$primaryStyleName}-h2,
.white .black .v-caption-h1,
.white .black .v-caption-h2,
-.blue .black .#{$name}-h1,
-.blue .black .#{$name}-h2,
+.blue .black .#{$primaryStyleName}-h1,
+.blue .black .#{$primaryStyleName}-h2,
.blue .black .v-caption-h1,
.blue .black .v-caption-h2 {
color: #fff;
text-shadow: rgba(0,0,0,.8) 0 2px 2px;
}
-.black .#{$name}-light,
-.white .black .#{$name}-light {
+.black .#{$primaryStyleName}-light,
+.white .black .#{$primaryStyleName}-light {
color: #72787c;
}
-.black .#{$name} hr,
-.white .black .#{$name} hr {
+.black .#{$primaryStyleName} hr,
+.white .black .#{$primaryStyleName} hr {
background: #0c0d0e;
color: #0c0d0e;
border-bottom-color: #292b2e;
color: #222;
text-shadow: none;
}
-.blue .#{$name}-h1,
-.blue .#{$name}-h2,
+.blue .#{$primaryStyleName}-h1,
+.blue .#{$primaryStyleName}-h2,
.blue .v-caption-h1,
.blue .v-caption-h2,
-.white .blue .#{$name}-h1,
-.white .blue .#{$name}-h2,
+.white .blue .#{$primaryStyleName}-h1,
+.white .blue .#{$primaryStyleName}-h2,
.white .blue .v-caption-h1,
.white .blue .v-caption-h2 {
color: #fff;
text-shadow: rgba(0,0,0,.3) 0 1px 1px;
}
-.blue .#{$name}-light,
-.white .blue .#{$name}-light {
+.blue .#{$primaryStyleName}-light,
+.white .blue .#{$primaryStyleName}-light {
color: #6e7c83;
}
-.blue .#{$name} hr,
-.white .blue .#{$name} hr {
+.blue .#{$primaryStyleName} hr,
+.white .blue .#{$primaryStyleName} hr {
background: #a3bcc9;
color: #a3bcc9;
border-bottom-color: #cfe2eb;
/**********************
* Default & white styles
**********************/
-.#{$name}-h1,
-.#{$name}-h2,
+.#{$primaryStyleName}-h1,
+.#{$primaryStyleName}-h2,
.v-caption-h1,
.v-caption-h2,
-.white .#{$name}-h1,
-.white .#{$name}-h2,
+.white .#{$primaryStyleName}-h1,
+.white .#{$primaryStyleName}-h2,
.white .v-caption-h1,
.white .v-caption-h2 {
font-family: Helvetica, Arial, "Lucida Grande", Geneva, Tahoma, Verdana, sans-serif;
letter-spacing: -0.02em;
text-shadow: #fff 0 -1px 1px;
}
-.#{$name}-h2,
+.#{$primaryStyleName}-h2,
.v-caption-h2,
-.white .#{$name}-h2,
+.white .#{$primaryStyleName}-h2,
.white .v-caption-h2 {
font-size: 16px;
line-height: 22px;
}
-.#{$name}-light,
-.white .#{$name}-light {
+.#{$primaryStyleName}-light,
+.white .#{$primaryStyleName}-light {
font-size: 11px;
line-height: 13px;
color: #707070;
}
-.#{$name} hr,
-.white .#{$name} hr {
+.#{$primaryStyleName} hr,
+.white .#{$primaryStyleName} hr {
height: 2px;
overflow: hidden;
background: #dcdcdc;
border-bottom: 1px solid #fff;
}
-.v-sa .#{$name} hr,
-.v-ie8 .#{$name} hr {
+.v-sa .#{$primaryStyleName} hr,
+.v-ie8 .#{$primaryStyleName} hr {
height: 1px;
}
/* Labels inside Table don't need a line-height */
-.v-table .#{$name} {
+.v-table .#{$primaryStyleName} {
line-height: normal;
}
-@mixin reindeer-link($name : v-link) {
+@mixin reindeer-link($primaryStyleName : v-link) {
-.#{$name} a:link span {
+.#{$primaryStyleName} a:link span {
color: #1b699f;
}
-.#{$name} a:visited span {
+.#{$primaryStyleName} a:visited span {
color: #5c7485;
}
-.#{$name} a:hover span {
+.#{$primaryStyleName} a:hover span {
color: #2483c4;
}
-@mixin reindeer-menubar($name : v-menubar) {
+@mixin reindeer-menubar($primaryStyleName : v-menubar) {
-.#{$name} {
+.#{$primaryStyleName} {
height: 23px;
background: #323336 repeat-x;
background-image: url(img/bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
text-shadow: rgba(0,0,0,.9) 0 1px 0;
padding: 0 8px;
}
-.#{$name} .#{$name}-menuitem {
+.#{$primaryStyleName} .#{$primaryStyleName}-menuitem {
padding: 3px 8px;
height: 17px;
line-height: 16px;
}
-.#{$name} .#{$name}-menuitem:hover {
+.#{$primaryStyleName} .#{$primaryStyleName}-menuitem:hover {
color: #fff;
}
-.#{$name}-submenu {
+.#{$primaryStyleName}-submenu {
background: #f8f8f9;
border: none;
border-radius: 3px;
overflow: hidden;
padding: 4px 0;
}
-.#{$name}-submenu .#{$name}-menuitem {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem {
padding: 1px 26px 1px 10px;
line-height: 16px;
}
-.#{$name}-submenu .#{$name}-menuitem-caption .v-icon {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-caption .v-icon {
vertical-align: middle;
}
-.#{$name} .#{$name}-menuitem-selected,
-.#{$name}-submenu .#{$name}-menuitem-selected {
+.#{$primaryStyleName} .#{$primaryStyleName}-menuitem-selected,
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-selected {
background: #4d749f repeat-x;
background-image: url(../common/img/sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
color: #fff;
text-shadow: 0 1px 0 #3b5a7a;
}
-.#{$name} .#{$name}-menuitem-selected {
+.#{$primaryStyleName} .#{$primaryStyleName}-menuitem-selected {
background-image: url(img/menu-sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */
}
-.#{$name}-submenu .#{$name}-submenu-indicator {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-submenu-indicator {
background: transparent url(img/submenu-icon.png) no-repeat right 70%;
width: 26px;
height: 16px;
text-indent: -9999px;
}
-.#{$name}-submenu .#{$name}-menuitem-selected .#{$name}-submenu-indicator {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-selected .#{$primaryStyleName}-submenu-indicator {
background-image: url(img/submenu-icon-hover.png);
}
/* Checkboxes for checkable/checked menu items */
-.#{$name}-submenu-check-column .#{$name}-menuitem {
+.#{$primaryStyleName}-submenu-check-column .#{$primaryStyleName}-menuitem {
padding-left: 6px;
}
-.#{$name}-submenu-check-column .#{$name}-menuitem-caption {
+.#{$primaryStyleName}-submenu-check-column .#{$primaryStyleName}-menuitem-caption {
padding-left: 18px;
}
-.#{$name}-submenu .#{$name}-menuitem-checked .#{$name}-menuitem-caption {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-checked .#{$primaryStyleName}-menuitem-caption {
background: transparent url(img/checked.png) no-repeat left;
}
-.#{$name}-submenu .#{$name}-menuitem-unchecked .#{$name}-menuitem-caption {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-unchecked .#{$primaryStyleName}-menuitem-caption {
background: transparent url(img/unchecked.png) no-repeat left;
}
-.#{$name}-submenu .#{$name}-menuitem-selected-checked .#{$name}-menuitem-caption {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-selected-checked .#{$primaryStyleName}-menuitem-caption {
background: transparent url(img/checked-selected.png) no-repeat left;
}
-.#{$name}-submenu .#{$name}-menuitem-selected-unchecked .#{$name}-menuitem-caption {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-selected-unchecked .#{$primaryStyleName}-menuitem-caption {
background: transparent url(img/unchecked-selected.png) no-repeat left;
}
-@mixin reindeer-notification($name : v-Notification) {
+@mixin reindeer-notification($primaryStyleName : v-Notification) {
-.#{$name} {
+.#{$primaryStyleName} {
color: #fff;
border-radius: 4px;
-moz-border-radius: 4px;
font-weight: bold;
}
-.v-ie9 .#{$name} H1 {
+.v-ie9 .#{$primaryStyleName} H1 {
/* Fix for #6793 */
font-weight: bold;
}
-.#{$name} p {
+.#{$primaryStyleName} p {
line-height: 1.3;
}
-.#{$name}-warning {
+.#{$primaryStyleName}-warning {
background: #fdf3b5;
color: #ca9a61;
border: 3px solid #fee3af;
}
-.#{$name}-error {
+.#{$primaryStyleName}-error {
background: #b40000 url(img/error-close.png) no-repeat right top;
border: 3px solid #ca3030;
}
-.#{$name}-tray {
+.#{$primaryStyleName}-tray {
margin: 0 5px 5px 0;
background: #3b3c3e;
border: 2px solid #585b5c;
padding: 0.8em 0.9em;
}
-.#{$name}-tray h1 {
+.#{$primaryStyleName}-tray h1 {
font-size: 14px;
line-height: 18px;
}
-.#{$name}-tray p {
+.#{$primaryStyleName}-tray p {
font-size: 12px;
font-weight: normal;
}
-.#{$name}-system {
+.#{$primaryStyleName}-system {
background-color: #b40000;
}
-@mixin reindeer-panel($name : v-panel) {
+@mixin reindeer-panel($primaryStyleName : v-panel) {
-.blue .#{$name}-caption,
-.blue .#{$name}-nocaption,
-.blue .#{$name}-content {
+.blue .#{$primaryStyleName}-caption,
+.blue .#{$primaryStyleName}-nocaption,
+.blue .#{$primaryStyleName}-content {
border-color: #a8bcc5;
}
-.#{$name}-caption,
-.#{$name}-nocaption,
-.white .#{$name}-caption,
-.white .#{$name}-nocaption {
+.#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-nocaption,
+.white .#{$primaryStyleName}-caption,
+.white .#{$primaryStyleName}-nocaption {
border-bottom: 1px solid #e5e5e5;
line-height: 16px; /* accommodate minimum icon size */
}
-.v-webkit .#{$name}-caption,
-.v-webkit .#{$name}-nocaption,
-.v-gecko .#{$name}-caption,
-.v-gecko .#{$name}-nocaption,
-.v-ie9 .#{$name}-caption,
-.v-ie9 .#{$name}-nocaption {
+.v-webkit .#{$primaryStyleName}-caption,
+.v-webkit .#{$primaryStyleName}-nocaption,
+.v-gecko .#{$primaryStyleName}-caption,
+.v-gecko .#{$primaryStyleName}-nocaption,
+.v-ie9 .#{$primaryStyleName}-caption,
+.v-ie9 .#{$primaryStyleName}-nocaption {
border-bottom-color: rgba(0,0,0,.08);
}
-.#{$name}-caption {
+.#{$primaryStyleName}-caption {
padding-bottom: 2px;
}
-.#{$name}-content,
-.white .#{$name}-content {
+.#{$primaryStyleName}-content,
+.white .#{$primaryStyleName}-content {
background: #fff;
border: 1px solid #dcdcdc;
border-bottom: none;
border-top: none;
}
-.v-webkit .#{$name}-content,
-.v-gecko .#{$name}-content,
-.v-ie9 .#{$name}-content {
+.v-webkit .#{$primaryStyleName}-content,
+.v-gecko .#{$primaryStyleName}-content,
+.v-ie9 .#{$primaryStyleName}-content {
border-top-color: rgba(0,0,0,.07);
}
-.blue .#{$name}-deco {
+.blue .#{$primaryStyleName}-deco {
border-color: #92a3ac;
background: #adc2cd;
}
-.#{$name}-deco,
-.white .#{$name}-deco {
+.#{$primaryStyleName}-deco,
+.white .#{$primaryStyleName}-deco {
height: 1px;
border-top: 1px solid #bebebe;
background: #e2e2e2;
overflow: hidden;
}
-.v-webkit .#{$name}-deco,
-.v-gecko .#{$name}-deco,
-.v-ie9 .#{$name}-deco {
+.v-webkit .#{$primaryStyleName}-deco,
+.v-gecko .#{$primaryStyleName}-deco,
+.v-ie9 .#{$primaryStyleName}-deco {
border-top-color: rgba(0,0,0,.1);
background: rgba(0,0,0,.08);
}
-.#{$name}-caption .v-errorindicator {
+.#{$primaryStyleName}-caption .v-errorindicator {
height: 16px;
width: 13px;
background: url(../common/icons/error.png) no-repeat 50%;
}
/* Light style */
-.#{$name}-light .#{$name}-caption-light,
-.#{$name}-light .#{$name}-nocaption-light {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-caption-light,
+.#{$primaryStyleName}-light .#{$primaryStyleName}-nocaption-light {
border: none;
}
-.#{$name}-light .#{$name}-content-light {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-content-light {
border: none;
background: transparent;
}
-.#{$name}-light .#{$name}-deco-light {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-deco-light {
height: 0;
border: none;
}
-@mixin reindeer-popupview($name : v-popupview) {
+@mixin reindeer-popupview($primaryStyleName : v-popupview) {
-.#{$name} {
+.#{$primaryStyleName} {
color: #1b699f;
}
-.#{$name}:hover {
+.#{$primaryStyleName}:hover {
color: #2483c4;
}
-.#{$name}-popup {
+.#{$primaryStyleName}-popup {
background: #fff;
padding: 3px;
}
-@mixin reindeer-progressindicator($name : v-progressindicator) {
+@mixin reindeer-progressindicator($primaryStyleName : v-progressindicator) {
-.#{$name}-wrapper {
+.#{$primaryStyleName}-wrapper {
background: #dfe2e4 url(img/base.gif) repeat-x;
border: 1px solid #bfbfbf;
}
-.v-disabled .#{$name}-wrapper {
+.v-disabled .#{$primaryStyleName}-wrapper {
background-image: url(img/disabled.gif);
}
-.#{$name}-indicator {
+.#{$primaryStyleName}-indicator {
background: #f7f9f9 url(img/progress.png);
}
-@mixin reindeer-select($name : v-filterselect) {
+@mixin reindeer-select($primaryStyleName : v-filterselect) {
-.#{$name} {
+.#{$primaryStyleName} {
height: 24px;
background-repeat: no-repeat;
background-image: url(img/left.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */
padding-left: 2px;
padding-right: 25px; /* Space for the button */
}
-&.v-app .#{$name}-input,
-.v-window .#{$name}-input,
-.v-popupview-popup .#{$name}-input {
+&.v-app .#{$primaryStyleName}-input,
+.v-window .#{$primaryStyleName}-input,
+.v-popupview-popup .#{$primaryStyleName}-input {
background: transparent repeat-x;
background-image: url(img/center.png); /** sprite-ref: verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */
border: none;
height: 24px;
}
/* More specific selector to override padding */
-&.v-app input.#{$name}-input,
-.v-window input.#{$name}-input,
-.v-popupview-popup input.#{$name}-input {
+&.v-app input.#{$primaryStyleName}-input,
+.v-window input.#{$primaryStyleName}-input,
+.v-popupview-popup input.#{$primaryStyleName}-input {
padding: 4px 0 4px 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-.#{$name}-prompt .#{$name}-input {
+.#{$primaryStyleName}-prompt .#{$primaryStyleName}-input {
font-style: normal;
}
-.#{$name}-input:focus {
+.#{$primaryStyleName}-input:focus {
outline: none;
}
-.#{$name}-focus {
+.#{$primaryStyleName}-focus {
background-image: url(img/left-focus.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */
}
-.#{$name}-focus .#{$name}-input {
+.#{$primaryStyleName}-focus .#{$primaryStyleName}-input {
background-image: url(img/center-focus.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-.#{$name}-button {
+.#{$primaryStyleName}-button {
overflow: hidden;
width: 25px;
height: 24px;
cursor: default;
margin-right: -25px;
}
-.#{$name}-button:hover {
+.#{$primaryStyleName}-button:hover {
background-image: url(img/right-hover.png); /** sprite-ref: verticals */
}
-.#{$name}-button:active {
+.#{$primaryStyleName}-button:active {
background-image: url(img/right-pressed.png); /** sprite-ref: verticals */
}
-.#{$name}-focus .#{$name}-button {
+.#{$primaryStyleName}-focus .#{$primaryStyleName}-button {
background-image: url(img/right-focus.png); /** sprite-ref: verticals */
}
-.#{$name}-focus .#{$name}-button:hover {
+.#{$primaryStyleName}-focus .#{$primaryStyleName}-button:hover {
background-image: url(img/right-focus-hover.png); /** sprite-ref: verticals */
}
-.#{$name}-focus .#{$name}-button:active {
+.#{$primaryStyleName}-focus .#{$primaryStyleName}-button:active {
background-image: url(img/right-focus-pressed.png); /** sprite-ref: verticals */
}
-.v-disabled .#{$name}-button:hover,
-.v-readonly .#{$name}-button:hover {
+.v-disabled .#{$primaryStyleName}-button:hover,
+.v-readonly .#{$primaryStyleName}-button:hover {
background-image: url(img/right.png); /** sprite-ref: verticals */
}
-.#{$name}-suggestpopup {
+.#{$primaryStyleName}-suggestpopup {
background: #f8f8f9;
border: none;
border-radius: 3px;
-o-border-radius: 3px;
overflow: hidden;
}
-.#{$name}-suggestmenu {
+.#{$primaryStyleName}-suggestmenu {
margin: 4px 0;
}
-.#{$name}-suggestmenu .gwt-MenuItem {
+.#{$primaryStyleName}-suggestmenu .gwt-MenuItem {
padding: 1px 8px;
height: 16px;
user-select: none;
-webkit-user-select: none;
cursor: default;
}
-.v-ff .#{$name}-suggestmenu .gwt-MenuItem {
+.v-ff .#{$primaryStyleName}-suggestmenu .gwt-MenuItem {
height: 18px;
}
-.#{$name}-suggestmenu .gwt-MenuItem .v-icon {
+.#{$primaryStyleName}-suggestmenu .gwt-MenuItem .v-icon {
margin-right: 3px;
}
-.#{$name}-suggestmenu .gwt-MenuItem-selected {
+.#{$primaryStyleName}-suggestmenu .gwt-MenuItem-selected {
background: transparent repeat-x;
background-image: url(../common/img/sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
color: #fff;
text-shadow: #3b5a7a 0 1px 0;
}
-.#{$name}-nextpage,
-.#{$name}-nextpage-off,
-.#{$name}-prevpage-off,
-.#{$name}-prevpage {
+.#{$primaryStyleName}-nextpage,
+.#{$primaryStyleName}-nextpage-off,
+.#{$primaryStyleName}-prevpage-off,
+.#{$primaryStyleName}-prevpage {
height: 11px;
width: 100%;
background: transparent;
margin-bottom: -4px;
}
-.#{$name}-nextpage,
-.#{$name}-nextpage-off {
+.#{$primaryStyleName}-nextpage,
+.#{$primaryStyleName}-nextpage-off {
margin: -4px 0 0;
}
-.#{$name}-nextpage:hover {
+.#{$primaryStyleName}-nextpage:hover {
background-repeat: repeat-x;
background-image: url(img/page-down-hover.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-.#{$name}-prevpage:hover {
+.#{$primaryStyleName}-prevpage:hover {
background-repeat: repeat-x;
background-image: url(img/page-up-hover.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-.#{$name}-nextpage:active {
+.#{$primaryStyleName}-nextpage:active {
background-repeat: repeat-x;
background-image: url(img/page-down-pressed.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-.#{$name}-prevpage:active {
+.#{$primaryStyleName}-prevpage:active {
background-repeat: repeat-x;
background-image: url(img/page-up-pressed.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-.#{$name}-nextpage-off span,
-.#{$name}-prevpage-off span {
+.#{$primaryStyleName}-nextpage-off span,
+.#{$primaryStyleName}-prevpage-off span {
display: none;
}
-.#{$name}-nextpage span,
-.#{$name}-prevpage span {
+.#{$primaryStyleName}-nextpage span,
+.#{$primaryStyleName}-prevpage span {
display: block;
height: 11px;
width: 100%;
-moz-user-select: none;
-webkit-user-select: none;
}
-.#{$name}-prevpage span {
+.#{$primaryStyleName}-prevpage span {
background-image: url(img/arrow-up.png); /** sprite-ref: verticals; sprite-margin-top: 3px; sprite-margin-bottom: 3px; sprite-alignment: center */
}
-.#{$name}-nextpage:hover span {
+.#{$primaryStyleName}-nextpage:hover span {
background-image: url(img/arrow-down-hover.png); /** sprite-ref: verticals; sprite-margin-top: 3px; sprite-margin-bottom: 3px; sprite-alignment: center */
}
-.#{$name}-prevpage:hover span {
+.#{$primaryStyleName}-prevpage:hover span {
background-image: url(img/arrow-up-hover.png); /** sprite-ref: verticals; sprite-margin-top: 3px; sprite-margin-bottom: 3px; sprite-alignment: center */
}
-.#{$name}-status {
+.#{$primaryStyleName}-status {
text-shadow: #e9eaeb 0 1px 0;
font-size: 11px;
line-height: normal;
-webkit-user-select: none;
}
/* IE fails to position background images properly inside table elements */
-.v-ie .#{$name}-suggestmenu .gwt-MenuItem-selected {
+.v-ie .#{$primaryStyleName}-suggestmenu .gwt-MenuItem-selected {
background: transparent url(../common/img/sel-bg.png) repeat-x;
}
-.v-ie .#{$name}-nextpage:hover {
+.v-ie .#{$primaryStyleName}-nextpage:hover {
background: transparent url(img/page-down-hover.png) repeat-x;
}
-.v-ie .#{$name}-prevpage:hover {
+.v-ie .#{$primaryStyleName}-prevpage:hover {
background: transparent url(img/page-up-hover.png) repeat-x;
}
-.v-ie .#{$name}-prevpage span {
+.v-ie .#{$primaryStyleName}-prevpage span {
background: transparent url(img/arrow-up.png) no-repeat center 3px;
}
-.v-ie .#{$name}-nextpage span {
+.v-ie .#{$primaryStyleName}-nextpage span {
background: transparent url(img/arrow-down.png) no-repeat center 3px;
}
-.v-ie .#{$name}-prevpage:hover span {
+.v-ie .#{$primaryStyleName}-prevpage:hover span {
background: transparent url(img/arrow-up-hover.png) no-repeat center 3px;
}
-.v-ie .#{$name}-nextpage:hover span {
+.v-ie .#{$primaryStyleName}-nextpage:hover span {
background: transparent url(img/arrow-down-hover.png) no-repeat center 3px;
}
-.v-ie .#{$name}-status {
+.v-ie .#{$primaryStyleName}-status {
background: transparent url(img/status-bg.png) repeat-x;
}
/* Filterselect with icon needs a similar fix than in buttons */
-.#{$name} .v-icon {
+.#{$primaryStyleName} .v-icon {
width: 16px;
position: relative;
}
-.#{$name} .v-icon + .#{$name}-input {
+.#{$primaryStyleName} .v-icon + .#{$primaryStyleName}-input {
margin-left: -16px;
padding-left: 18px;
}
/* Combobox on black background */
-.black .#{$name} {
+.black .#{$primaryStyleName} {
background-image: url(img/black/left-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-&.v-app .black .#{$name}-input,
-.v-window .black .#{$name}-input,
-.v-window-black .#{$name}-input,
-.v-popupview-popup .black .#{$name}-input {
+&.v-app .black .#{$primaryStyleName}-input,
+.v-window .black .#{$primaryStyleName}-input,
+.v-window-black .#{$primaryStyleName}-input,
+.v-popupview-popup .black .#{$primaryStyleName}-input {
color: #c9ccce;
background-image: url(img/black/center-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */
}
-.black .#{$name}-focus {
+.black .#{$primaryStyleName}-focus {
background-image: url(img/black/left-black-focus.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-.black .#{$name}-focus .#{$name}-input {
+.black .#{$primaryStyleName}-focus .#{$primaryStyleName}-input {
background-image: url(img/black/center-black-focus.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */
}
-.black .#{$name}-button {
+.black .#{$primaryStyleName}-button {
background-image: url(img/black/right-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-.black .#{$name}-button:hover {
+.black .#{$primaryStyleName}-button:hover {
background-image: url(img/black/right-black-hover.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-.black .#{$name}-button:active {
+.black .#{$primaryStyleName}-button:active {
background-image: url(img/black/right-black-pressed.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-.black .#{$name}-focus .#{$name}-button {
+.black .#{$primaryStyleName}-focus .#{$primaryStyleName}-button {
background-image: url(img/black/right-black-focus.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-.black .#{$name}-focus .#{$name}-button:hover {
+.black .#{$primaryStyleName}-focus .#{$primaryStyleName}-button:hover {
background-image: url(img/black/right-black-focus-hover.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-.black .#{$name}-focus .#{$name}-button:active {
+.black .#{$primaryStyleName}-focus .#{$primaryStyleName}-button:active {
background-image: url(img/black/right-black-focus-pressed.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-.black .v-disabled .#{$name}-button:hover,
-.black .v-readonly .#{$name}-button:hover {
+.black .v-disabled .#{$primaryStyleName}-button:hover,
+.black .v-readonly .#{$primaryStyleName}-button:hover {
background-image: url(img/black/right-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-.black .#{$name}-prompt .#{$name}-input {
+.black .#{$primaryStyleName}-prompt .#{$primaryStyleName}-input {
color: #5f6366;
}
-@mixin reindeer-slider($name : v-slider) {
+@mixin reindeer-slider($primaryStyleName : v-slider) {
-.#{$name} {
+.#{$primaryStyleName} {
border-top: 1px solid #9a9c9e;
border-bottom: 1px solid #bdbfc1;
margin: 4px 0;
}
-.#{$name}-base {
+.#{$primaryStyleName}-base {
height: 1px;
background: #e0e2e2;
border-top: 1px solid #adb0b1;
border-left: 1px solid #a0a3a6;
border-right: 1px solid #a0a3a6;
}
-.#{$name}-handle {
+.#{$primaryStyleName}-handle {
background: transparent;
background-image: url(img/knob.png); /** sprite-ref: verticals */
width: 10px;
height: 10px;
margin-top: -5px;
}
-.#{$name}-handle-active {
+.#{$primaryStyleName}-handle-active {
background-image: url(img/knob-pressed.png); /** sprite-ref: verticals */
}
-.#{$name}-vertical {
+.#{$primaryStyleName}-vertical {
width: 2px;
margin: 0 5px;
border: none;
border-left: 1px solid #9a9c9e;
border-right: 1px solid #bdbfc1;
}
-.#{$name}-vertical .#{$name}-base {
+.#{$primaryStyleName}-vertical .#{$primaryStyleName}-base {
width: 2px;
border-left: 1px solid #adb0b1;
border-right: none;
border-top: 1px solid #adb0b1;
border-bottom: 1px solid #adb0b1;
}
-.#{$name}-vertical .#{$name}-handle {
+.#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle {
width: 10px;
height: 10px;
margin-left: -5px;
-@mixin reindeer-splitpanel($name : v-splitpanel) {
+@mixin reindeer-splitpanel($primaryStyleName : v-splitpanel) {
-.#{$name}-hsplitter,
-.#{$name}-hsplitter-locked {
+.#{$primaryStyleName}-hsplitter,
+.#{$primaryStyleName}-hsplitter-locked {
width: 7px;
background-repeat: repeat-y;
background-image: url(img/hor-bg.png); /** sprite-ref: horizontals; sprite-alignment: repeat */
}
-.#{$name}-hsplitter div {
+.#{$primaryStyleName}-hsplitter div {
width: 7px;
height: 100%; /* for Opera */
background: transparent;
background-position: 50%;
background-image: url(img/hor-handle.png); /** sprite-ref: horizontals; sprite-alignment: center */
}
-.#{$name}-vsplitter,
-.#{$name}-vsplitter-locked {
+.#{$primaryStyleName}-vsplitter,
+.#{$primaryStyleName}-vsplitter-locked {
height: 7px;
background-repeat: repeat-x;
background-image: url(img/ver-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-.#{$name}-vsplitter div {
+.#{$primaryStyleName}-vsplitter div {
height: 7px;
background: transparent;
background-repeat: no-repeat;
/* Splitpanels on blue background */
-.blue .#{$name}-hsplitter-small,
-.blue .#{$name}-hsplitter-small-locked {
+.blue .#{$primaryStyleName}-hsplitter-small,
+.blue .#{$primaryStyleName}-hsplitter-small-locked {
background: #7c8a91;
}
/* Splitpanels on black background */
-.black .#{$name}-hsplitter-small,
-.black .#{$name}-hsplitter-small-locked {
+.black .#{$primaryStyleName}-hsplitter-small,
+.black .#{$primaryStyleName}-hsplitter-small-locked {
background: #4e5253;
}
/* Small style */
-.#{$name}-hsplitter-small,
-.#{$name}-hsplitter-small-locked,
-.white .#{$name}-hsplitter-small,
-.white .#{$name}-hsplitter-small-locked {
+.#{$primaryStyleName}-hsplitter-small,
+.#{$primaryStyleName}-hsplitter-small-locked,
+.white .#{$primaryStyleName}-hsplitter-small,
+.white .#{$primaryStyleName}-hsplitter-small-locked {
width: 1px;
background: #949698;
}
-.#{$name}-vsplitter-small,
-.#{$name}-vsplitter-small-locked,
-.white .#{$name}-vsplitter-small,
-.white .#{$name}-vsplitter-small-locked {
+.#{$primaryStyleName}-vsplitter-small,
+.#{$primaryStyleName}-vsplitter-small-locked,
+.white .#{$primaryStyleName}-vsplitter-small,
+.white .#{$primaryStyleName}-vsplitter-small-locked {
height: 1px;
background: #949698;
}
-.#{$name}-hsplitter-small div {
+.#{$primaryStyleName}-hsplitter-small div {
width: 5px;
margin-left: -2px;
background: transparent;
}
-.#{$name}-vsplitter-small div {
+.#{$primaryStyleName}-vsplitter-small div {
height: 5px;
margin-top: -2px;
background: transparent;
-@mixin reindeer-table($name : v-table) {
+@mixin reindeer-table($primaryStyleName : v-table) {
/* Table on blue background */
-.blue .#{$name}-header-wrap {
+.blue .#{$primaryStyleName}-header-wrap {
border-color: #92a2aa;
}
-.blue .#{$name}-body {
+.blue .#{$primaryStyleName}-body {
border-color: #92a2aa;
border-top-color: #c2c3c4;
}
/* Default & white style */
-.#{$name}-header-wrap,
-.white .#{$name}-header-wrap,
-.#{$name}-footer-wrap,
-.white .#{$name}-footer-wrap,
-.#{$name}-header-drag {
+.#{$primaryStyleName}-header-wrap,
+.white .#{$primaryStyleName}-header-wrap,
+.#{$primaryStyleName}-footer-wrap,
+.white .#{$primaryStyleName}-footer-wrap,
+.#{$primaryStyleName}-header-drag {
border-color: #c2c3c4;
background: transparent repeat-x;
background-image: url(img/header-bg-light.png); /** sprite-ref: verticals; sprite-alignment: repeat */
line-height: normal;
}
-.#{$name}-footer-wrap,
-.white .#{$name}-footer-wrap {
+.#{$primaryStyleName}-footer-wrap,
+.white .#{$primaryStyleName}-footer-wrap {
text-transform: none;
font-size: 12px;
font-weight: normal;
}
-.#{$name}-footer td,
-.white .#{$name}-footer td {
+.#{$primaryStyleName}-footer td,
+.white .#{$primaryStyleName}-footer td {
border-color: #c2c3c4;
}
-.#{$name}-footer-container {
+.#{$primaryStyleName}-footer-container {
padding-right: 7px;
}
-.#{$name}-header,
-.#{$name}-footer,
-.#{$name}-footer table {
+.#{$primaryStyleName}-header,
+.#{$primaryStyleName}-footer,
+.#{$primaryStyleName}-footer table {
height: 20px;
}
-.#{$name}-caption-container,
-.#{$name}-header-drag {
+.#{$primaryStyleName}-caption-container,
+.#{$primaryStyleName}-header-drag {
padding-top: 4px;
padding-right: 4px;
}
-.#{$name}-caption-container .v-icon,
-.#{$name}-header-drag .v-icon {
+.#{$primaryStyleName}-caption-container .v-icon,
+.#{$primaryStyleName}-header-drag .v-icon {
height: 16px;
margin: -4px 3px 0 0;
vertical-align: middle;
}
-.v-ie .#{$name}-caption-container .v-icon,
-.v-ie .#{$name}-header-drag .v-icon {
+.v-ie .#{$primaryStyleName}-caption-container .v-icon,
+.v-ie .#{$primaryStyleName}-header-drag .v-icon {
margin-top: -3px;
}
-.#{$name}-resizer {
+.#{$primaryStyleName}-resizer {
height: 20px;
width: 2px;
background: transparent;
border-right: 1px solid #c2c3c4;
}
-.#{$name}-sort-indicator {
+.#{$primaryStyleName}-sort-indicator {
background: transparent;
width: 0px;
height: 20px;
}
-.#{$name}-header-cell-asc .#{$name}-sort-indicator {
+.#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator {
background: transparent no-repeat right 7px;
background-image: url(img/asc-light.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
width: 16px;
}
-.#{$name}-header-cell-desc .#{$name}-sort-indicator {
+.#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator {
background: transparent no-repeat right 7px;
background-image: url(img/desc-light.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
width: 16px;
}
-.#{$name}-body,
-.white .#{$name}-body {
+.#{$primaryStyleName}-body,
+.white .#{$primaryStyleName}-body {
border-color: #c2c3c4;
background: #fff;
}
-.#{$name}-cell-content {
+.#{$primaryStyleName}-cell-content {
padding-top: 0;
border-right-color: #d3d4d5;
vertical-align: top;
}
-.#{$name}-cell-wrapper {
+.#{$primaryStyleName}-cell-wrapper {
padding-top: 3px;
padding-bottom: 3px;
}
-.#{$name}-row-odd {
+.#{$primaryStyleName}-row-odd {
background: #eff0f1;
}
-.#{$name}-generated-row {
+.#{$primaryStyleName}-generated-row {
background: #dcdee0;
text-transform: uppercase;
font-size: 10px;
text-shadow: #f3f5f8 0 1px 0;
line-height: normal;
}
-.#{$name}-generated-row .#{$name}-cell-wrapper {
+.#{$primaryStyleName}-generated-row .#{$primaryStyleName}-cell-wrapper {
padding-top: 4px;
padding-bottom: 5px;
}
-.#{$name}-cell-content:last-child {
+.#{$primaryStyleName}-cell-content:last-child {
border-right-color: transparent;
}
-.#{$name} .v-selected,
-.black .#{$name} .v-selected {
+.#{$primaryStyleName} .v-selected,
+.black .#{$primaryStyleName} .v-selected {
background: #4d749f url(../common/img/sel-bg.png) repeat-x; /* We can't include this in the sprite, since we don't know the row height */
color: #fff;
text-shadow: #3b5a7a 0 1px 0;
}
-.#{$name} .v-selected .#{$name}-cell-content {
+.#{$primaryStyleName} .v-selected .#{$primaryStyleName}-cell-content {
border-right-color: #466c90;
}
-.#{$name}-column-selector {
+.#{$primaryStyleName}-column-selector {
width: 16px;
height: 20px;
margin-top: -20px;
background: transparent no-repeat;
background-image: url(img/col-sel-light.png); /** sprite-ref: verticals */
}
-.#{$name}-column-selector:active {
+.#{$primaryStyleName}-column-selector:active {
background-image: url(img/col-sel-light-pressed.png); /** sprite-ref: verticals */
}
-.#{$name}-focus-slot-left {
+.#{$primaryStyleName}-focus-slot-left {
border-left: 1px solid #222;
margin-bottom: -20px;
width: auto;
}
-.#{$name}-focus-slot-right {
+.#{$primaryStyleName}-focus-slot-right {
border-right-color: #222;
margin-right: 0;
}
-.#{$name}-header-drag {
+.#{$primaryStyleName}-header-drag {
padding-left: 6px;
height: 16px;
}
-.#{$name}-header-drag img {
+.#{$primaryStyleName}-header-drag img {
height: 16px;
margin: -3px 3px 0 0;
}
-.#{$name}-scrollposition {
+.#{$primaryStyleName}-scrollposition {
width: auto;
background: transparent;
border: none;
}
-.#{$name}-scrollposition span {
+.#{$primaryStyleName}-scrollposition span {
background: transparent repeat-x;
background-image: url(img/scroll-indic-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
border: 1px solid #939494;
-webkit-box-shadow: rgba(0,0,0,.5) 0 1px 2px;
-moz-box-shadow: rgba(0,0,0,.5) 0 1px 2px;
}
-.#{$name}-borderless .#{$name}-scrollposition span {
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-scrollposition span {
top: 0;
}
/* row in column selector */
/* Strong style */
-.#{$name}-strong .#{$name}-header-wrap,
-.#{$name}-strong .#{$name}-header-drag {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-header-wrap,
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-header-drag {
border-color: #2b3033;
border-top-color: #2b3033;
background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
color: #e7e9ea;
text-shadow: #000 0 -1px 0;
}
-.#{$name}-strong .#{$name}-body {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-body {
border-top-color: #2b3033;
}
-.#{$name}-strong .#{$name}-resizer {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-resizer {
border-right-color: #1c1f21;
}
-.#{$name}-strong .#{$name}-header-cell-asc .#{$name}-sort-indicator {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator {
background-image: url(img/asc.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
}
-.#{$name}-strong .#{$name}-header-cell-desc .#{$name}-sort-indicator {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator {
background-image: url(img/desc.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
}
-.#{$name}-strong .#{$name}-column-selector {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-column-selector {
background-image: url(img/col-sel.png); /** sprite-ref: verticals */
}
-.#{$name}-strong .#{$name}-column-selector:active {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-column-selector:active {
background-image: url(img/col-sel-pressed.png); /** sprite-ref: verticals */
}
-.#{$name}-strong .#{$name}-focus-slot-left,
-.#{$name}-strong .#{$name}-focus-slot-right {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-focus-slot-left,
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-focus-slot-right {
border-color: #9ca1a5;
}
/* Table on black background (normal style) */
-.black .#{$name}-header-wrap,
-.black .#{$name}-header-drag {
+.black .#{$primaryStyleName}-header-wrap,
+.black .#{$primaryStyleName}-header-drag {
border-color: #252729;
background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
color: #e7eaee;
text-shadow: #000 0 -1px 0;
}
-.black .#{$name}-resizer {
+.black .#{$primaryStyleName}-resizer {
border-right-color: #252729;
}
-.black .#{$name}-header-cell-asc .#{$name}-sort-indicator {
+.black .#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator {
background-image: url(img/asc.png); /** sprite-ref: black-verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
}
-.black .#{$name}-header-cell-desc .#{$name}-sort-indicator {
+.black .#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator {
background-image: url(img/desc.png); /** sprite-ref: black-verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
}
-.black .#{$name}-column-selector {
+.black .#{$primaryStyleName}-column-selector {
background-image: url(img/col-sel-black.png); /** sprite-ref: black-verticals */
}
-.black .#{$name}-column-selector:active {
+.black .#{$primaryStyleName}-column-selector:active {
background-image: url(img/col-sel-black-pressed.png); /** sprite-ref: black-verticals */
}
-.black .#{$name}-focus-slot-left,
-.black .#{$name}-focus-slot-right {
+.black .#{$primaryStyleName}-focus-slot-left,
+.black .#{$primaryStyleName}-focus-slot-right {
border-color: #9ca1a5;
}
-.black .#{$name}-body {
+.black .#{$primaryStyleName}-body {
border-color: #252729;
background: transparent;
}
-.black .#{$name}-cell-content {
+.black .#{$primaryStyleName}-cell-content {
border-right-color: #252729;
border-bottom: 1px solid #252729;
}
-.black .#{$name}-cell-wrapper {
+.black .#{$primaryStyleName}-cell-wrapper {
padding-bottom: 2px;
}
-.black .#{$name}-row-odd {
+.black .#{$primaryStyleName}-row-odd {
background: transparent;
}
/* Selection background-color combined with the default (white) style selector, so we don't have to duplicate the sprite image in the final sprite collection */
-.black .#{$name} .v-selected .#{$name}-cell-content {
+.black .#{$primaryStyleName} .v-selected .#{$primaryStyleName}-cell-content {
border-bottom: 1px solid #4d749f;
}
/* Borderless style */
-.#{$name}-borderless .#{$name}-header-wrap,
-.#{$name}-borderless .#{$name}-body {
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-header-wrap,
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-body {
border: none;
}
-@mixin reindeer-tabsheet-borderless-style($name : v-tabsheet-borderless) {
+@mixin reindeer-tabsheet-borderless-style($primaryStyleName : v-tabsheet-borderless) {
-.#{$name} .v-tabsheet-tabitemcell-first {
+.#{$primaryStyleName} .v-tabsheet-tabitemcell-first {
padding-left: 7px;
background: url(img/framed/tab-first-left.png) no-repeat -3px 0;
}
-.#{$name} .v-tabsheet-tabitemcell-selected-first {
+.#{$primaryStyleName} .v-tabsheet-tabitemcell-selected-first {
background: url(img/framed/tab-first-left-sel.png) no-repeat -3px 0;
}
-.#{$name} .v-tabsheet-spacertd div {
+.#{$primaryStyleName} .v-tabsheet-spacertd div {
margin-right: 0;
}
-.#{$name} .v-tabsheet-spacertd {
+.#{$primaryStyleName} .v-tabsheet-spacertd {
background: transparent;
}
-.#{$name} .v-tabsheet-content {
+.#{$primaryStyleName} .v-tabsheet-content {
border: none;
}
-.#{$name} .v-tabsheet-deco {
+.#{$primaryStyleName} .v-tabsheet-deco {
height: 0;
border-top: none;
}
-@mixin reindeer-tabsheet-hover-closable-style($name : v-tabsheet) {
+@mixin reindeer-tabsheet-hover-closable-style($primaryStyleName : v-tabsheet) {
-.#{$name}-tabs-hover-closable .#{$name}-caption-close {
+.#{$primaryStyleName}-tabs-hover-closable .#{$primaryStyleName}-caption-close {
visibility: hidden;
}
-.#{$name}-tabs-hover-closable .#{$name}-tabitem:hover .#{$name}-caption-close {
+.#{$primaryStyleName}-tabs-hover-closable .#{$primaryStyleName}-tabitem:hover .#{$primaryStyleName}-caption-close {
visibility: visible;
}
-@mixin reindeer-tabsheet-minimal-style($name : v-tabsheet) {
+@mixin reindeer-tabsheet-minimal-style($primaryStyleName : v-tabsheet) {
/**
* Tabsheet "minimal" style --------------
*/
/* Minimal tabsheet on blue background */
-.blue .#{$name}-tabs-minimal .#{$name}-spacertd div,
-.blue .#{$name}-tabs-minimal .#{$name}-tabitem,
-.blue .#{$name}-tabs-minimal .#{$name}-tabitem-selected {
+.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div,
+.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem,
+.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected {
border-color: #7c8a91;
}
-.blue .#{$name}-tabs-minimal .#{$name}-caption-close {
+.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close {
color: #7c8a91;
}
-.blue .#{$name}-tabs-minimal .#{$name}-caption-close:hover {
+.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover {
color: #BCD3DE;
background: #778d98;
}
-.blue .#{$name}-tabs-minimal .#{$name}-caption-close:active {
+.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active {
background: #4f6874;
}
/* Default & white styles */
-.#{$name}-tabs-minimal .#{$name}-spacertd div,
-.white .#{$name}-tabs-minimal .#{$name}-spacertd div {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div,
+.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div {
border-bottom: 1px solid #bfbfbf;
height: auto;
background: transparent;
}
-.#{$name}-tabs-minimal .#{$name}-tabitemcell,
-.#{$name}-tabs-minimal .#{$name}-spacertd {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitemcell,
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd {
height: auto;
background: transparent;
padding-left: 0;
}
-.#{$name}-tabs-minimal .#{$name}-tabitem,
-.white .#{$name}-tabs-minimal .#{$name}-tabitem {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem,
+.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem {
border: none;
border-bottom: 1px solid #bfbfbf;
color: #4d748f;
background: transparent;
text-shadow: none;
}
-.#{$name}-tabs-minimal .#{$name}-tabitem .v-caption {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem .v-caption {
padding: 5px 16px;
height: auto;
background: transparent;
}
-.#{$name}-tabs-minimal .#{$name}-tabitemcell-selected {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitemcell-selected {
background: transparent;
}
-.#{$name}-tabs-minimal .#{$name}-tabitem-selected,
-.white .#{$name}-tabs-minimal .#{$name}-tabitem-selected {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected,
+.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected {
background: transparent;
border: 1px solid #bfbfbf;
border-bottom: none;
color: #222;
}
-.#{$name}-tabs-minimal .#{$name}-tabitem-selected .v-caption {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected .v-caption {
background: transparent;
padding: 4px 15px 6px 15px;
}
-.#{$name}-tabs-minimal .#{$name}-tabitem .v-caption-closable,
-.#{$name}-tabs-minimal .#{$name}-tabitem-selected .v-caption-closable {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem .v-caption-closable,
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected .v-caption-closable {
padding-right: 6px;
}
-.#{$name}-content-minimal,
-.white .#{$name}-content-minimal {
+.#{$primaryStyleName}-content-minimal,
+.white .#{$primaryStyleName}-content-minimal {
border: none;
}
-.#{$name}-content-minimal .#{$name}-tabsheetpanel {
+.#{$primaryStyleName}-content-minimal .#{$primaryStyleName}-tabsheetpanel {
background: transparent;
}
-.#{$name}-deco-minimal,
-.white .#{$name}-deco-minimal {
+.#{$primaryStyleName}-deco-minimal,
+.white .#{$primaryStyleName}-deco-minimal {
height: 0;
border: none;
}
-.#{$name}-tabcontainer-minimal .#{$name}-scroller {
+.#{$primaryStyleName}-tabcontainer-minimal .#{$primaryStyleName}-scroller {
margin-top: -20px;
height: 17px;
padding: 0;
border: none;
background: transparent;
}
-.#{$name}-tabcontainer-minimal .#{$name}-scroller button {
+.#{$primaryStyleName}-tabcontainer-minimal .#{$primaryStyleName}-scroller button {
margin-top: 0;
}
-.#{$name}-tabs-minimal .#{$name}-caption-close,
-.#{$name}-tabs-minimal .#{$name}-caption-close:hover,
-.#{$name}-tabs-minimal .#{$name}-caption-close:active {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close,
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover,
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active {
text-indent: 0;
background: transparent;
margin-left: 3px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}
-.#{$name}-tabs-minimal .#{$name}-caption-close {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close {
margin-top: 1px;
}
-.v-ff .#{$name}-tabs-minimal .#{$name}-caption-close {
+.v-ff .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close {
margin-top: -15px;
}
-.#{$name}-tabs-minimal .#{$name}-caption-close:hover,
-.white .#{$name}-tabs-minimal .#{$name}-caption-close:hover {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover,
+.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover {
color: #fff;
background: #aaa;
}
-.#{$name}-tabs-minimal .#{$name}-caption-close:active,
-.white .#{$name}-tabs-minimal .#{$name}-caption-close:active {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active,
+.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active {
background: #777;
}
/* Minimal tabsheet on black background */
-.black .#{$name}-tabs-minimal .#{$name}-spacertd div,
-.black .#{$name}-tabs-minimal .#{$name}-tabitem,
-.black .#{$name}-tabs-minimal .#{$name}-tabitem-selected {
+.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div,
+.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem,
+.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected {
border-color: #3e4044;
color: #6a7f89;
}
-.black .#{$name}-tabs-minimal .#{$name}-tabitem-selected {
+.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected {
color: #c9ccce;
}
-.black .#{$name}-content-minimal,
-.black .#{$name}-content-bar {
+.black .#{$primaryStyleName}-content-minimal,
+.black .#{$primaryStyleName}-content-bar {
color: #c9ccce;
text-shadow: #000 0 0 1px;
}
-.black .#{$name}-tabs-minimal .#{$name}-caption-close {
+.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close {
color: #72787c;
}
-.black .#{$name}-tabs-minimal .#{$name}-caption-close:hover {
+.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover {
color: #1d2021;
background: #4d5154;
}
-.black .#{$name}-tabs-minimal .#{$name}-caption-close:active {
+.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active {
background: #626669;
}
-@mixin reindeer-tabsheet-normal-style($name : v-tabsheet) {
+@mixin reindeer-tabsheet-normal-style($primaryStyleName : v-tabsheet) {
/* Default Tabsheet styles */
-.#{$name}-tabitemcell,
-.#{$name}-spacertd {
+.#{$primaryStyleName}-tabitemcell,
+.#{$primaryStyleName}-spacertd {
height: 32px;
}
-.#{$name}-tabitemcell {
+.#{$primaryStyleName}-tabitemcell {
background: no-repeat;
background-image: url(img/framed/tab-left.png); /** sprite-ref: verticals */
padding-left: 3px;
}
-.#{$name}-tabitemcell-first {
+.#{$primaryStyleName}-tabitemcell-first {
padding-left: 10px;
background-image: url(img/framed/tab-first-left.png); /** sprite-ref: verticals */
}
-.#{$name}-tabitem,
-.#{$name}-spacertd div {
+.#{$primaryStyleName}-tabitem,
+.#{$primaryStyleName}-spacertd div {
border: none;
height: 32px;
background: transparent repeat-x;
color: #222;
text-shadow: #fff 0 1px 0;
}
-.#{$name}-tabitem .v-caption {
+.#{$primaryStyleName}-tabitem .v-caption {
border: none;
height: 23px;
background: no-repeat right top;
background-image: url(img/framed/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */
padding: 9px 8px 0 6px;
}
-.#{$name}-tabitem .v-caption-closable {
+.#{$primaryStyleName}-tabitem .v-caption-closable {
padding-right: 0;
padding-left: 17px;
}
-.#{$name}-tabitem .v-captiontext {
+.#{$primaryStyleName}-tabitem .v-captiontext {
height: 16px;
line-height: 16px;
vertical-align:baseline;
}
-.#{$name}-caption-close {
+.#{$primaryStyleName}-caption-close {
float: right;
width: 19px;
height: 18px;
font-size: 14px;
font-weight: normal;
}
-.#{$name}-caption-close:hover {
+.#{$primaryStyleName}-caption-close:hover {
background-image: url(img/close-btn-hover.png); /** sprite-ref: verticals */
}
-.#{$name}-caption-close:active {
+.#{$primaryStyleName}-caption-close:active {
background-image: url(img/close-btn-pressed.png); /** sprite-ref: verticals */
}
-.#{$name}-tabitem-selected .#{$name}-caption-close {
+.#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close {
background-image: url(img/close-btn-sel.png); /** sprite-ref: verticals */
}
-.#{$name}-tabitem-selected .#{$name}-caption-close:hover {
+.#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close:hover {
background-image: url(img/close-btn-sel-hover.png); /** sprite-ref: verticals */
}
-.#{$name}-tabitem-selected .#{$name}-caption-close:active {
+.#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close:active {
background-image: url(img/close-btn-sel-pressed.png); /** sprite-ref: verticals */
}
-.#{$name}-tabitemcell-selected {
+.#{$primaryStyleName}-tabitemcell-selected {
background-image: url(img/framed/tab-left-sel.png); /** sprite-ref: verticals */
}
-.#{$name}-tabitemcell-selected-first {
+.#{$primaryStyleName}-tabitemcell-selected-first {
background-image: url(img/framed/tab-first-left-sel.png); /** sprite-ref: verticals */
}
-.#{$name}-tabitem-selected {
+.#{$primaryStyleName}-tabitem-selected {
background-image: url(img/framed/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
color: #232930;
}
-.#{$name}-tabitem-selected .v-caption {
+.#{$primaryStyleName}-tabitem-selected .v-caption {
background-image: url(img/framed/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
}
-.#{$name}-spacertd div {
+.#{$primaryStyleName}-spacertd div {
margin-right: 4px;
}
-.#{$name}-spacertd {
+.#{$primaryStyleName}-spacertd {
background: transparent no-repeat right top;
background-image: url(img/framed/tab-spacer-right.png); /** sprite-ref: verticals; sprite-alignment: right */
}
-.blue .#{$name}-content {
+.blue .#{$primaryStyleName}-content {
border-color: #a8bcc5;
}
-.#{$name}-content,
-.white .#{$name}-content {
+.#{$primaryStyleName}-content,
+.white .#{$primaryStyleName}-content {
border: 1px solid #dcdcdc;
border-bottom: none;
border-top: none;
color: #222;
text-shadow: none;
}
-.#{$name}-tabsheetpanel {
+.#{$primaryStyleName}-tabsheetpanel {
background: #fff;
}
-.v-sa .#{$name}-content {
+.v-sa .#{$primaryStyleName}-content {
border-color: rgba(0,0,0,.1);
}
-.blue .#{$name}-deco {
+.blue .#{$primaryStyleName}-deco {
border-color: #92a3ac;
background: #adc2cd;
}
-.#{$name}-deco,
-.white .#{$name}-deco {
+.#{$primaryStyleName}-deco,
+.white .#{$primaryStyleName}-deco {
height: 1px;
border-top: 1px solid #bebebe;
background: #e2e2e2;
overflow: hidden;
}
-.v-sa .#{$name}-deco {
+.v-sa .#{$primaryStyleName}-deco {
border-top-color: rgba(0,0,0,.1);
background: rgba(0,0,0,.08);
}
/* Icons & error indicators */
-.#{$name}-tabs .v-icon,
-.#{$name}-tabs .v-captiontext,
-.#{$name}-tabs .v-errorindicator {
+.#{$primaryStyleName}-tabs .v-icon,
+.#{$primaryStyleName}-tabs .v-captiontext,
+.#{$primaryStyleName}-tabs .v-errorindicator {
display: inline;
float: none;
}
-.v-sa .#{$name}-tabs .v-captiontext {
+.v-sa .#{$primaryStyleName}-tabs .v-captiontext {
display: inline-block;
}
-.#{$name}-tabs .v-icon {
+.#{$primaryStyleName}-tabs .v-icon {
width: 16px !important;
height: 16px !important;
}
-.#{$name}-tabs .v-errorindicator {
+.#{$primaryStyleName}-tabs .v-errorindicator {
display: inline-block;
width: 13px;
height: 16px;
background: transparent url(../common/icons/error.png) no-repeat 50%;
}
-.v-ie .#{$name}-tabs .v-errorindicator {
+.v-ie .#{$primaryStyleName}-tabs .v-errorindicator {
zoom: 1;
display: inline;
}
-.v-ie8 .#{$name}-tabs .v-errorindicator,
-.v-ie9 .#{$name}-tabs .v-errorindicator {
+.v-ie8 .#{$primaryStyleName}-tabs .v-errorindicator,
+.v-ie9 .#{$primaryStyleName}-tabs .v-errorindicator {
display: inline-block;
}
-@mixin reindeer-tabsheet-scroller($name : v-tabsheet) {
+@mixin reindeer-tabsheet-scroller($primaryStyleName : v-tabsheet) {
/* Tabsheet scroller styles */
-.#{$name}-scroller {
+.#{$primaryStyleName}-scroller {
height: 31px;
margin-top: -31px;
padding: 0 3px 0 4px;
background: transparent url(img/framed/tab-bg.png) repeat-x left -1px;
width: 36px;
}
-.#{$name}-scroller button {
+.#{$primaryStyleName}-scroller button {
margin-top: 7px;
}
-.#{$name}-scrollerPrev,
-.#{$name}-scrollerNext,
-.#{$name}-scrollerPrev-disabled,
-.#{$name}-scrollerNext-disabled {
+.#{$primaryStyleName}-scrollerPrev,
+.#{$primaryStyleName}-scrollerNext,
+.#{$primaryStyleName}-scrollerPrev-disabled,
+.#{$primaryStyleName}-scrollerNext-disabled {
border: none;
background: transparent;
background-image: url(img/tab-prev.png); /** sprite-ref: verticals */
height: 17px;
overflow: hidden;
}
-.#{$name}-scroller button::-moz-focus-inner {
+.#{$primaryStyleName}-scroller button::-moz-focus-inner {
border: none;
}
-.#{$name}-scrollerNext {
+.#{$primaryStyleName}-scrollerNext {
background-image: url(img/tab-next.png); /** sprite-ref: verticals */
}
-.#{$name}-scrollerPrev:active {
+.#{$primaryStyleName}-scrollerPrev:active {
background-image: url(img/tab-prev-pressed.png); /** sprite-ref: verticals */
}
-.#{$name}-scrollerNext:active {
+.#{$primaryStyleName}-scrollerNext:active {
background-image: url(img/tab-next-pressed.png); /** sprite-ref: verticals */
}
-.#{$name}-scrollerPrev-disabled,
-.#{$name}-scrollerPrev-disabled:active {
+.#{$primaryStyleName}-scrollerPrev-disabled,
+.#{$primaryStyleName}-scrollerPrev-disabled:active {
background-image: url(img/tab-prev-disabled.png); /** sprite-ref: verticals */
opacity: 1;
filter: none;
}
-.#{$name}-scrollerNext-disabled,
-.#{$name}-scrollerNext-disabled:active {
+.#{$primaryStyleName}-scrollerNext-disabled,
+.#{$primaryStyleName}-scrollerNext-disabled:active {
background-image: url(img/tab-next-disabled.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */
opacity: 1;
filter: none;
-@mixin reindeer-tabsheet-selected-closable-style($name : v-tabsheet) {
+@mixin reindeer-tabsheet-selected-closable-style($primaryStyleName : v-tabsheet) {
-.#{$name}-tabs-selected-closable .#{$name}-tabitem .#{$name}-caption-close,
-.#{$name}-tabs-selected-closable .#{$name}-tabitem:hover .#{$name}-caption-close {
+.#{$primaryStyleName}-tabs-selected-closable .#{$primaryStyleName}-tabitem .#{$primaryStyleName}-caption-close,
+.#{$primaryStyleName}-tabs-selected-closable .#{$primaryStyleName}-tabitem:hover .#{$primaryStyleName}-caption-close {
visibility: hidden;
}
-.#{$name}-tabs-selected-closable .#{$name}-tabitem-selected .#{$name}-caption-close,
-.#{$name}-tabs-selected-closable .#{$name}-tabitem-selected:hover .#{$name}-caption-close {
+.#{$primaryStyleName}-tabs-selected-closable .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close,
+.#{$primaryStyleName}-tabs-selected-closable .#{$primaryStyleName}-tabitem-selected:hover .#{$primaryStyleName}-caption-close {
visibility: visible;
}
-@mixin reindeer-tabsheet-small-style($name : v-tabsheet) {
+@mixin reindeer-tabsheet-small-style($primaryStyleName : v-tabsheet) {
/**
* Tabsheet bar style ---------------
*/
-.#{$name}-tabs-bar .#{$name}-tabitemcell,
-.#{$name}-tabs-bar .#{$name}-spacertd {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell,
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-spacertd {
height: 20px;
}
-.#{$name}-tabs-bar .#{$name}-spacertd {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-spacertd {
background: transparent;
}
-.#{$name}-tabs-bar .#{$name}-tabitemcell {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell {
background-image: url(img/bar/tab-left.png); /** sprite-ref: verticals */
}
-.#{$name}-tabs-bar .#{$name}-tabitemcell-first {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell-first {
padding-left: 6px;
background-image: url(img/bar/tab-first-left.png); /** sprite-ref: verticals */
}
-.#{$name}-tabs-bar .#{$name}-tabitem,
-.#{$name}-tabs-bar .#{$name}-spacertd div {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem,
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-spacertd div {
height: 20px;
background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
font-size: 11px;
margin: 0;
}
-.#{$name}-tabs-bar .#{$name}-tabitem .v-caption {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem .v-caption {
height: 18px;
background-image: url(img/bar/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */
padding: 2px 12px 0 10px;
}
-.#{$name}-tabs-bar .#{$name}-tabitem .v-caption-closable,
-.#{$name}-tabs-bar .#{$name}-tabitem-selected .v-caption-closable {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem .v-caption-closable,
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .v-caption-closable {
padding-right: 8px;
padding-left: 14px;
}
-.#{$name}-tabs-bar .#{$name}-caption-close,
-.#{$name}-tabs-bar .#{$name}-caption-close:hover,
-.#{$name}-tabs-bar .#{$name}-caption-close:active {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close,
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:hover,
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:active {
text-indent: 0;
background: transparent;
margin-left: 3px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}
-.#{$name}-tabs-bar .#{$name}-caption-close {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close {
margin-top: 1px;
}
-.v-ff .#{$name}-tabs-bar .#{$name}-caption-close {
+.v-ff .#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close {
margin-top: -14px;
}
-.#{$name}-tabs-bar .#{$name}-caption-close:hover {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:hover {
background: #bfbfbf;
-webkit-box-shadow: 0 1px 0 #fff;
}
-.#{$name}-tabs-bar .#{$name}-caption-close:active {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:active {
background: #a9a9a9;
}
-.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close {
color: #404142;
}
-.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close:hover {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close:hover {
background: #5e666e;
color: #fff;
text-shadow: 0 -1px 0 #222;
}
-.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close:active {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close:active {
background: #404142;
}
-.#{$name}-tabs-bar .#{$name}-tabitemcell-selected {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell-selected {
background-image: url(img/bar/tab-left-sel.png); /** sprite-ref: verticals */
}
-.#{$name}-tabs-bar .#{$name}-tabitemcell-selected-first {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell-selected-first {
background-image: url(img/bar/tab-first-left-sel.png); /** sprite-ref: verticals */
}
-.#{$name}-tabs-bar .#{$name}-tabitem-selected {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected {
background-image: url(img/bar/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
color: #232930;
}
-.#{$name}-tabs-bar .#{$name}-tabitem-selected .v-caption {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .v-caption {
background-image: url(img/bar/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
}
-.#{$name}-tabcontainer-bar .#{$name}-scroller {
+.#{$primaryStyleName}-tabcontainer-bar .#{$primaryStyleName}-scroller {
margin-top: -20px;
height: 19px;
border-right: none;
background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-.#{$name}-tabcontainer-bar .#{$name}-scroller button {
+.#{$primaryStyleName}-tabcontainer-bar .#{$primaryStyleName}-scroller button {
margin-top: 1px;
}
-.#{$name}-content-bar,
-.white .#{$name}-content-bar {
+.#{$primaryStyleName}-content-bar,
+.white .#{$primaryStyleName}-content-bar {
border: none;
}
-.#{$name}-content-bar .#{$name}-tabsheetpanel {
+.#{$primaryStyleName}-content-bar .#{$primaryStyleName}-tabsheetpanel {
background: transparent;
}
-.#{$name}-deco-bar,
-.white .#{$name}-deco-bar {
+.#{$primaryStyleName}-deco-bar,
+.white .#{$primaryStyleName}-deco-bar {
height: 0;
border: none;
}
-@mixin reindeer-textfield($name : v-textfield) {
+@mixin reindeer-textfield($primaryStyleName : v-textfield) {
/* Textfield on blue background */
-.blue .#{$name},
+.blue .#{$primaryStyleName},
.blue .v-textarea {
border-color: #92a2aa;
border-top-color: #7c8a90;
border-bottom-color: #a1b3bc;
}
/* Default & white background */
-.#{$name},
+.#{$primaryStyleName},
.v-textarea,
-.white .#{$name},
+.white .#{$primaryStyleName},
.white .v-textarea {
border: 1px solid #bcbdbe;
border-top-color: #a2a3a4;
height: auto;
}
/* Need more specific selector because of #2384 fixes in base/common/common.css */
-&.v-app input.#{$name},
-.v-window input.#{$name},
+&.v-app input.#{$primaryStyleName},
+.v-window input.#{$primaryStyleName},
&.v-app textarea.v-textarea,
.v-window textarea.v-textarea {
padding: 3px 3px 4px;
}
-&.v-app input.#{$name}.v-widget,
-.v-window input.#{$name}.v-widget {
+&.v-app input.#{$primaryStyleName}.v-widget,
+.v-window input.#{$primaryStyleName}.v-widget {
height: 24px;
}
-&.v-app .#{$name}-focus,
-.v-window .#{$name}-focus,
-.v-popupview-popup .#{$name}-focus,
+&.v-app .#{$primaryStyleName}-focus,
+.v-window .#{$primaryStyleName}-focus,
+.v-popupview-popup .#{$primaryStyleName}-focus,
&.v-app .v-textarea-focus,
.v-window .v-textarea-focus,
.v-popupview-popup .v-textarea-focus {
outline: none;
background-color: #fff;
}
-input.#{$name}-prompt,
+input.#{$primaryStyleName}-prompt,
textarea.v-textarea-prompt {
font-style: normal;
color: #999;
}
/* Small style textfield */
-&.v-app input.#{$name}-small {
+&.v-app input.#{$primaryStyleName}-small {
font-size: 11px;
line-height: normal;
height: auto;
&.v-app textarea.v-textarea-small {
font-size: 11px;
}
-&.v-app .v-table input.#{$name}.v-widget,
-.v-window .v-table input.#{$name}.v-widget {
+&.v-app .v-table input.#{$primaryStyleName}.v-widget,
+.v-window .v-table input.#{$primaryStyleName}.v-widget {
padding: 1px 2px;
height: auto;
line-height: normal;
}
-.v-table-cell-wrapper > input.#{$name} {
+.v-table-cell-wrapper > input.#{$primaryStyleName} {
margin-top: -2px;
margin-bottom: -2px;
}
/* Textfield on black background */
-.black .#{$name},
+.black .#{$primaryStyleName},
.black .v-textarea {
border-color: #38393a;
border-top-color: #2c2d2e;
.black .v-textarea {
background-image: none;
}
-&.v-app .black .#{$name}-focus,
-.v-window-black .#{$name}-focus,
-.v-window .black .#{$name}-focus,
-.v-popupview-popup .black .#{$name}-focus,
+&.v-app .black .#{$primaryStyleName}-focus,
+.v-window-black .#{$primaryStyleName}-focus,
+.v-window .black .#{$primaryStyleName}-focus,
+.v-popupview-popup .black .#{$primaryStyleName}-focus,
&.v-app .black .v-textarea-focus,
.v-window-black .v-textarea-focus,
.v-window .black .v-textarea-focus,
border-bottom-color: #507596;
background-color: #151717;
}
-.black input.#{$name}-prompt {
+.black input.#{$primaryStyleName}-prompt {
color: #5f6366;
}
/* Readonly */
-input.#{$name}-readonly,
-.black input.#{$name}-readonly,
+input.#{$primaryStyleName}-readonly,
+.black input.#{$primaryStyleName}-readonly,
textarea.v-textarea-readonly,
.black textarea.v-textarea-readonly {
border: none;
-@mixin reindeer-tree($name : v-tree) {
+@mixin reindeer-tree($primaryStyleName : v-tree) {
-.#{$name}-node {
+.#{$primaryStyleName}-node {
background: transparent url(img/arrows.png) no-repeat 6px -10px;
}
-.#{$name}-node-expanded {
+.#{$primaryStyleName}-node-expanded {
background-position: -7px 5px;
}
-.#{$name}-node-caption {
+.#{$primaryStyleName}-node-caption {
margin-left: 16px;
padding-bottom: 1px;
}
-.#{$name}-node span {
+.#{$primaryStyleName}-node span {
padding: 1px 2px;
display: inline-block;
}
-.#{$name}-node-selected span {
+.#{$primaryStyleName}-node-selected span {
background: #4d749f repeat-x;
background-image: url(../common/img/sel-bg.png); /* sprite-ref: verticals; sprite-alignment: repeat */
color: #fff;
text-shadow: #2b425a 0 1px 0;
display: inline-block;
}
-.#{$name}-node-children {
+.#{$primaryStyleName}-node-children {
padding-left: 16px;
}
-.#{$name}-node-caption.#{$name}-node-focused span{
+.#{$primaryStyleName}-node-caption.#{$primaryStyleName}-node-focused span{
padding-left: 1px;
padding-top: 0px;
padding-bottom: 0px;
}
-.#{$name}-node-focused span{
+.#{$primaryStyleName}-node-focused span{
border: 1px dotted black;
}
/***************************************
* Drag'n'drop styles
***************************************/
-.#{$name} .#{$name}-node-drag-top {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top {
background-position: 6px -11px;
}
-.#{$name} .#{$name}-node-drag-top.#{$name}-node-expanded {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-expanded {
background-position: -7px 4px;
}
-.#{$name}-connectors .#{$name}-node-drag-top,
-.#{$name}-connectors .#{$name}-node-expanded.#{$name}-node-drag-top {
+.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top,
+.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded.#{$primaryStyleName}-node-drag-top {
background-position: 2px -53px;
}
-.#{$name}-connectors .#{$name}-node-drag-top.#{$name}-node-leaf {
+.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-leaf {
background-position: 2px 50%;
}
-@mixin reindeer-window($name : v-window) {
+@mixin reindeer-window($primaryStyleName : v-window) {
-.#{$name} {
+.#{$primaryStyleName} {
background: transparent;
}
-.#{$name}-wrap {
+.#{$primaryStyleName}-wrap {
border: 1px solid #808386;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-.v-sa .#{$name}-wrap,
-.v-op .#{$name}-wrap {
+.v-sa .#{$primaryStyleName}-wrap,
+.v-op .#{$primaryStyleName}-wrap {
border-color: rgba(0,0,0,.2);
}
-.#{$name}-outerheader {
+.#{$primaryStyleName}-outerheader {
padding: 12px 32px 0 14px;
height: 37px;
background: black repeat-x;
background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-.#{$name}-header {
+.#{$primaryStyleName}-header {
font-weight: bold;
font-size: 12px;
line-height: normal;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
}
-.#{$name}-error .#{$name}-header {
+.#{$primaryStyleName}-error .#{$primaryStyleName}-header {
padding-left: 13px;
background: transparent url(../common/icons/error.png) no-repeat 0 50%;
}
-.#{$name}-resizebox {
+.#{$primaryStyleName}-resizebox {
width: 15px;
height: 15px;
cursor: se-resize;
background: transparent;
background-image: url(img/resize.png); /** sprite-ref: verticals */
}
-.#{$name}-footer {
+.#{$primaryStyleName}-footer {
background-color:white;
background-repeat: repeat-x;
background-image: url(img/footer-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
height: 15px;
}
-.#{$name}-closebox {
+.#{$primaryStyleName}-closebox {
top: 12px;
right: 10px;
width: 15px;
background: transparent;
background-image: url(img/close.png); /** sprite-ref: verticals */
}
-.#{$name}-closebox:hover {
+.#{$primaryStyleName}-closebox:hover {
background-image: url(img/close-hover.png); /** sprite-ref: verticals */
}
-.#{$name}-closebox:active {
+.#{$primaryStyleName}-closebox:active {
background-image: url(img/close-pressed.png); /** sprite-ref: verticals */
}
-.#{$name}-contents {
+.#{$primaryStyleName}-contents {
background: #fff;
}
-.#{$name}-modalitycurtain {
+.#{$primaryStyleName}-modalitycurtain {
background: #56595b;
}
Light style window -----------------------------
**/
-.#{$name}-light .#{$name}-outerheader {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-outerheader {
background: transparent;
padding: 15px 32px 0 18px;
height: 23px;
}
-.#{$name}-light .#{$name}-header {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-header {
font-size: 16px;
color: #292e34;
text-shadow: none;
}
-.#{$name}-light .#{$name}-resizebox {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-resizebox {
width: 12px;
height: 12px;
background-image: url(img/resize-light.png); /** sprite-ref: verticals */
}
-.#{$name}-light .#{$name}-footer {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-footer {
background: transparent;
height: 12px;
}
-.#{$name}-light .#{$name}-closebox {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-closebox {
right: 1px;
top: 17px;
width: 19px;
height: 15px;
background-image: url(img/close-light.png); /** sprite-ref: verticals */
}
-.#{$name}-light .#{$name}-closebox:hover {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-closebox:hover {
background-image: url(img/close-light-hover.png); /** sprite-ref: verticals */
}
-.#{$name}-light .#{$name}-closebox:active {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-closebox:active {
background-image: url(img/close-light-pressed.png); /** sprite-ref: verticals */
}
-.#{$name}-light .#{$name}-contents {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-contents {
background: transparent;
}
/* This must be the last sprite added to the verticals-sprite image */
-.#{$name}-light .#{$name}-wrap2 {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-wrap2 {
background: #f7f7f8 repeat-x;
background-image: url(img/content-bg-light.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
Black style window -----------------------------
**/
-.#{$name}-black .#{$name}-wrap {
+.#{$primaryStyleName}-black .#{$primaryStyleName}-wrap {
border-color: #2e3030;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
overflow: hidden;
}
-.v-sa .#{$name}-black .#{$name}-wrap,
-.v-op .#{$name}-black .#{$name}-wrap {
+.v-sa .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap,
+.v-op .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap {
border-color: rgba(0,0,0,.8);
}
-.#{$name}-black .#{$name}-wrap2 {
+.#{$primaryStyleName}-black .#{$primaryStyleName}-wrap2 {
background-color: #1d2021;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
-.v-sa .#{$name}-black .#{$name}-wrap2,
-.v-op .#{$name}-black .#{$name}-wrap2 {
+.v-sa .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap2,
+.v-op .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap2 {
background-color: rgba(29,32,33,.9);
}
-.#{$name}-black .#{$name}-outerheader {
+.#{$primaryStyleName}-black .#{$primaryStyleName}-outerheader {
height: auto;
padding: 7px 14px;
height: 15px;
overflow: hidden;
border: none;
}
-.#{$name}-black .#{$name}-header {
+.#{$primaryStyleName}-black .#{$primaryStyleName}-header {
font-size: 12px;
font-weight: normal;
color: #dddfe1;
}
-.#{$name}-black .#{$name}-closebox {
+.#{$primaryStyleName}-black .#{$primaryStyleName}-closebox {
top: 8px;
}
-.#{$name}-black .#{$name}-footer {
+.#{$primaryStyleName}-black .#{$primaryStyleName}-footer {
background: transparent;
border: none;
height: 14px;
}
-.#{$name}-black .#{$name}-resizebox {
+.#{$primaryStyleName}-black .#{$primaryStyleName}-resizebox {
background: transparent no-repeat;
background-image: url(img/black/resize.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 4px */
width: 14px;
height: 14px;
}
/* Must be last to make this image last in the sprites */
-.#{$name}-black .#{$name}-contents {
+.#{$primaryStyleName}-black .#{$primaryStyleName}-contents {
border: none;
background: transparent repeat-x;
background-image: url(img/black/content-bg.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
-@mixin runo-datefield($name : v-datefield) {
+@mixin runo-datefield($primaryStyleName : v-datefield) {
-.#{$name} input.v-textfield,
-.#{$name} input.v-textfield[type=text] {
+.#{$primaryStyleName} input.v-textfield,
+.#{$primaryStyleName} input.v-textfield[type=text] {
height: 18px;
}
-.#{$name}-button {
+.#{$primaryStyleName}-button {
font-size:13px;
width: 22px;
height: 24px;
background: transparent url(img/open-button.png) no-repeat right 0;
vertical-align: top;
}
-.#{$name}-popup {
+.#{$primaryStyleName}-popup {
font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
color: #464f52;
font-size: 12px;
-moz-border-radius: 4px;
border-radius: 4px;
}
-.#{$name}-calendarpanel {
+.#{$primaryStyleName}-calendarpanel {
width: 230px;
}
-.#{$name}-popup .#{$name}-calendarpanel {
+.#{$primaryStyleName}-popup .#{$primaryStyleName}-calendarpanel {
width: 200px;
}
-.#{$name}-year .#{$name}-calendarpanel {
+.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel {
width: 100px;
}
-.#{$name}-calendarpanel td {
+.#{$primaryStyleName}-calendarpanel td {
text-align: right;
}
-.#{$name}-calendarpanel td span {
+.#{$primaryStyleName}-calendarpanel td span {
display: block;
}
-.#{$name}-calendarpanel-header {
+.#{$primaryStyleName}-calendarpanel-header {
height: 30px;
font-size: 13px;
}
-td.#{$name}-calendarpanel-month {
+td.#{$primaryStyleName}-calendarpanel-month {
font-weight: bold;
text-shadow: 0 1px 0 #fff;
width: 150px;
}
-.#{$name}-calendarpanel-prevyear,
-.#{$name}-calendarpanel-nextyear,
-.#{$name}-calendarpanel-prevmonth,
-.#{$name}-calendarpanel-nextmonth {
+.#{$primaryStyleName}-calendarpanel-prevyear,
+.#{$primaryStyleName}-calendarpanel-nextyear,
+.#{$primaryStyleName}-calendarpanel-prevmonth,
+.#{$primaryStyleName}-calendarpanel-nextmonth {
width: 16px;
}
/* Year buttons */
-.#{$name}-calendarpanel .v-button-prevyear,
-.#{$name}-calendarpanel .v-button-nextyear {
+.#{$primaryStyleName}-calendarpanel .v-button-prevyear,
+.#{$primaryStyleName}-calendarpanel .v-button-nextyear {
display: block;
width: 16px;
height: 16px;
text-indent: -90000px;
margin: 0 auto;
}
-.#{$name}-calendarpanel .v-button-nextyear {
+.#{$primaryStyleName}-calendarpanel .v-button-nextyear {
background: transparent url(img/nextyear.png) no-repeat;
}
-.#{$name}-calendarpanel .v-button-prevyear:hover,
-.#{$name}-calendarpanel .v-button-nextyear:hover {
+.#{$primaryStyleName}-calendarpanel .v-button-prevyear:hover,
+.#{$primaryStyleName}-calendarpanel .v-button-nextyear:hover {
background-position: left bottom;
}
/* Month buttons */
-.#{$name}-calendarpanel .v-button-prevmonth,
-.#{$name}-calendarpanel .v-button-nextmonth {
+.#{$primaryStyleName}-calendarpanel .v-button-prevmonth,
+.#{$primaryStyleName}-calendarpanel .v-button-nextmonth {
display: block;
width: 11px;
height: 16px;
text-indent: -90000px;
margin: 0 auto;
}
-.#{$name}-calendarpanel .v-button-nextmonth {
+.#{$primaryStyleName}-calendarpanel .v-button-nextmonth {
background: transparent url(img/nextmonth.png) no-repeat;
}
-.#{$name}-calendarpanel .v-button-prevmonth:hover,
-.#{$name}-calendarpanel .v-button-nextmonth:hover {
+.#{$primaryStyleName}-calendarpanel .v-button-prevmonth:hover,
+.#{$primaryStyleName}-calendarpanel .v-button-nextmonth:hover {
background-position: left bottom;
}
-.#{$name}-calendarpanel strong {
+.#{$primaryStyleName}-calendarpanel strong {
color: #ee5311;
display: block;
width: 20px;
font-size: 12px;
}
-.#{$name}-calendarpanel-day,
-.#{$name}-calendarpanel-weeknumber,
-.#{$name}-calendarpanel-day-today {
+.#{$primaryStyleName}-calendarpanel-day,
+.#{$primaryStyleName}-calendarpanel-weeknumber,
+.#{$primaryStyleName}-calendarpanel-day-today {
padding: 1px 3px;
width: 14px;
height: 16px;
}
-.#{$name}-calendarpanel-day-today {
+.#{$primaryStyleName}-calendarpanel-day-today {
border: 1px solid #429ce9;
width: 12px;
height: 14px;
}
-.#{$name}-calendarpanel-day-entry {
+.#{$primaryStyleName}-calendarpanel-day-entry {
color: #6a98b5;
}
-.#{$name}-calendarpanel-day-disabled {
+.#{$primaryStyleName}-calendarpanel-day-disabled {
font-weight: normal;
color: #dddddd;
}
-.#{$name}-calendarpanel-day-entry.#{$name}-calendarpanel-day-disabled {
+.#{$primaryStyleName}-calendarpanel-day-entry.#{$primaryStyleName}-calendarpanel-day-disabled {
color: #afd6f8;
}
-.#{$name}-calendarpanel-day-selected {
+.#{$primaryStyleName}-calendarpanel-day-selected {
font-weight: bold;
width: 14px;
height: 16px;
background: transparent url(img/selected-bg.png) no-repeat 50% 50%;
border: none;
}
-.#{$name}-time {
+.#{$primaryStyleName}-time {
font-size: 11px;
}
-.#{$name}-time .v-select {
+.#{$primaryStyleName}-time .v-select {
font-size: 10px;
padding: 0;
margin: 0;
}
-.#{$name}-rendererror .v-textfield {
+.#{$primaryStyleName}-rendererror .v-textfield {
background: #ff9999;
}
-.#{$name}-prompt .#{$name}-textfield {
+.#{$primaryStyleName}-prompt .#{$primaryStyleName}-textfield {
color: #999;
font-style: normal;
}
-@mixin runo-inline-datefield($name : v-inline-datefield){
+@mixin runo-inline-datefield($primaryStyleName : v-inline-datefield){
@include runo-datefield(v-inline-datefield);
- .#{$name} {
+ .#{$primaryStyleName} {
line-height: 18px; /* Override inherited line-height: 0 needed for popup datefield */
}
}
\ No newline at end of file
projects / vaadin-framework.git / commitdiff