-@mixin reindeer-accordion {
+@mixin reindeer-accordion($name : v-accordion) {
-.v-accordion {
+.#{$name} {
border: 1px solid #bebebe;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
overflow: hidden;
}
-.v-accordion-item {
+.#{$name}-item {
background-color: #fff;
}
-.v-accordion-item-caption {
+.#{$name}-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;
}
-.v-accordion-item-caption .v-captiontext{
+.#{$name}-item-caption .v-captiontext{
vertical-align:baseline;
}
-.v-accordion-item-first .v-accordion-item-caption {
+.#{$name}-item-first .#{$name}-item-caption {
border-top: none;
}
-.v-accordion-item-caption .v-caption {
+.#{$name}-item-caption .v-caption {
padding: 3px 0 5px 10px;
}
-.v-ie .v-accordion-item-caption .v-caption {
+.v-ie .#{$name}-item-caption .v-caption {
padding: 2px 0 6px 10px;
}
-.v-accordion-item-open .v-accordion-item-caption {
+.#{$name}-item-open .#{$name}-item-caption {
background-image: url(../tabsheet/img/tabbar-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
border-bottom: 1px solid #bbb;
}
-.v-accordion-item-caption .v-icon {
+.#{$name}-item-caption .v-icon {
margin-top: -1px;
}
-.v-ie .v-accordion-item-caption .v-icon {
+.v-ie .#{$name}-item-caption .v-icon {
vertical-align: top;
}
/* Borderless style */
-.v-accordion-borderless {
+.#{$name}-borderless {
border: none;
border-radius: 0;
-webkit-border-radius: 0;
-@mixin reindeer-button-ie {
+@mixin reindeer-button-ie($name : v-nativebutton) {
-.v-ie8 .v-nativebutton-link {
+.v-ie8 .#{$name}-link {
padding: 0;
text-align: left;
}
-@mixin reindeer-button-link-style {
+@mixin reindeer-button-link-style($name : v-button) {
-.v-button.v-button-link,
-.v-button.v-button-link:focus,
-.v-button.v-button-link:active,
-.v-button-link.v-pressed,
-.v-disabled.v-button.v-button-link,
-.v-button.v-button-link .v-button-wrap,
-.v-button.v-button-link:focus .v-button-wrap,
-.v-button.v-button-link:active .v-button-wrap,
-.v-button-link.v-pressed .v-button-wrap,
-.v-disabled.v-button.v-button-link .v-button-wrap {
+.#{$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 {
background: transparent;
height: auto;
padding: 0;
line-height: inherit;
}
-.v-button.v-button-link.v-disabled,
-.v-button.v-button-link.v-disabled .v-button-wrap {
+.#{$name}.#{$name}-link.v-disabled,
+.#{$name}.#{$name}-link.v-disabled .#{$name}-wrap {
cursor: default;
}
-.v-button-link .v-button-caption,
+.#{$name}-link .#{$name}-caption,
.v-nativebutton-link .v-nativebutton-caption {
line-height: inherit;
font-weight: normal;
text-shadow: none;
}
-.v-button-link:focus .v-button-caption,
+.#{$name}-link:focus .#{$name}-caption,
.v-nativebutton-link:focus .v-nativebutton-caption {
outline: 1px dotted #1b699f;
}
-@mixin reindeer-button-primary-style {
+@mixin reindeer-button-primary-style($name : v-button) {
-.v-button-primary:focus {
+.#{$name}-primary:focus {
background-image: url(img/primary-left-focus.png); /** sprite-ref: buttons */
}
-.v-button-primary:focus .v-button-wrap {
+.#{$name}-primary:focus .#{$name}-wrap {
background-image: url(img/primary-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
}
-.v-button-primary:active,
-.v-button-primary.v-pressed {
+.#{$name}-primary:active,
+.#{$name}-primary.v-pressed {
background-image: url(img/primary-left-pressed.png); /** sprite-ref: buttons */
}
-.v-button-primary:active .v-button-wrap,
-.v-button-primary.v-pressed .v-button-wrap {
+.#{$name}-primary:active .#{$name}-wrap,
+.#{$name}-primary.v-pressed .#{$name}-wrap {
background-image: url(img/primary-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
}
-.v-button-primary,
-.v-disabled.v-button-primary {
+.#{$name}-primary,
+.v-disabled.#{$name}-primary {
background-image: url(img/primary-left.png); /** sprite-ref: buttons */
}
-.v-button-primary .v-button-wrap,
-.v-disabled.v-button-primary .v-button-wrap {
+.#{$name}-primary .#{$name}-wrap,
+.v-disabled.#{$name}-primary .#{$name}-wrap {
background-image: url(img/primary-right.png); /** sprite-ref: buttons; sprite-alignment: right */
}
/* Black style */
-.black .v-button-primary:focus {
+.black .#{$name}-primary:focus {
background-image: url(img/black/primary-left-focus.png); /** sprite-ref: black-buttons */
}
-.black .v-button-primary:focus .v-button-wrap {
+.black .#{$name}-primary:focus .#{$name}-wrap {
background-image: url(img/black/primary-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
color: #eaf4fb;
}
-.black .v-button-primary:active,
-.black .v-button-primary.v-pressed {
+.black .#{$name}-primary:active,
+.black .#{$name}-primary.v-pressed {
background-image: url(img/black/primary-left-pressed.png); /** sprite-ref: black-buttons */
}
-.black .v-button-primary:active .v-button-wrap,
-.black .v-button-primary.v-pressed .v-button-wrap {
+.black .#{$name}-primary:active .#{$name}-wrap,
+.black .#{$name}-primary.v-pressed .#{$name}-wrap {
background-image: url(img/black/primary-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
}
-.black .v-button-primary,
-.black .v-disabled.v-button-primary {
+.black .#{$name}-primary,
+.black .v-disabled.#{$name}-primary {
background-image: url(img/black/primary-left.png); /** sprite-ref: black-buttons */
}
-.black .v-button-primary .v-button-wrap,
-.black .v-disabled.v-button-primary .v-button-wrap {
+.black .#{$name}-primary .#{$name}-wrap,
+.black .v-disabled.#{$name}-primary .#{$name}-wrap {
background-image: url(img/black/primary-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
}
-@mixin reindeer-button-small-style {
+@mixin reindeer-button-small-style($name : v-button) {
-.v-button-small:focus {
+.#{$name}-small:focus {
background-image: url(img/small-left-focus.png); /** sprite-ref: buttons */
}
-.v-button-small:focus .v-button-wrap {
+.#{$name}-small:focus .#{$name}-wrap {
background-image: url(img/small-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
}
-.v-button-small:active,
-.v-button-small.v-pressed {
+.#{$name}-small:active,
+.#{$name}-small.v-pressed {
background-image: url(img/small-left-pressed.png); /** sprite-ref: buttons */
}
-.v-button-small:active .v-button-wrap,
-.v-button-small.v-pressed .v-button-wrap {
+.#{$name}-small:active .#{$name}-wrap,
+.#{$name}-small.v-pressed .#{$name}-wrap {
background-image: url(img/small-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
}
-.v-button-small,
-.v-disabled.v-button-small {
+.#{$name}-small,
+.v-disabled.#{$name}-small {
background-image: url(img/small-left.png); /** sprite-ref: buttons */
height: 20px;
}
-.v-button-small .v-button-wrap,
-.v-disabled.v-button-small .v-button-wrap {
+.#{$name}-small .#{$name}-wrap,
+.v-disabled.#{$name}-small .#{$name}-wrap {
background-image: url(img/small-right.png); /** sprite-ref: buttons; sprite-alignment: right */
height: 19px;
padding: 1px 14px 0 8px;
}
-.v-button-small .v-button-caption {
+.#{$name}-small .#{$name}-caption {
font-weight: normal;
}
/* Black style */
-.black .v-button-small:focus {
+.black .#{$name}-small:focus {
background-image: url(img/black/small-left-focus.png); /** sprite-ref: black-buttons */
}
-.black .v-button-small:focus .v-button-wrap {
+.black .#{$name}-small:focus .#{$name}-wrap {
background-image: url(img/black/small-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
}
-.black .v-button-small:active,
-.black .v-button-small.v-pressed {
+.black .#{$name}-small:active,
+.black .#{$name}-small.v-pressed {
background-image: url(img/black/small-left-pressed.png); /** sprite-ref: black-buttons */
}
-.black .v-button-small:active .v-button-wrap,
-.black .v-button-small.v-pressed .v-button-wrap {
+.black .#{$name}-small:active .#{$name}-wrap,
+.black .#{$name}-small.v-pressed .#{$name}-wrap {
background-image: url(img/black/small-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
}
-.black .v-button-small,
-.black .v-disabled.v-button-small {
+.black .#{$name}-small,
+.black .v-disabled.#{$name}-small {
background-image: url(img/black/small-left.png); /** sprite-ref: black-buttons */
}
-.black .v-button-small .v-button-wrap,
-.black .v-disabled.v-button-small .v-button-wrap {
+.black .#{$name}-small .#{$name}-wrap,
+.black .v-disabled.#{$name}-small .#{$name}-wrap {
background-image: url(img/black/small-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
}
-@mixin reindeer-button-standard {
+@mixin reindeer-button-standard($name : v-button) {
-.v-button:focus {
+.#{$name}:focus {
background-image: url(img/left-focus.png); /** sprite-ref: buttons */
outline: none;
}
-.v-button:focus .v-button-wrap {
+.#{$name}:focus .#{$name}-wrap {
background-image: url(img/right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
outline: none;
}
-.v-button:active,
-.v-button.v-pressed {
+.#{$name}:active,
+.#{$name}.v-pressed {
background-image: url(img/left-pressed.png); /** sprite-ref: buttons */
outline: none;
}
-.v-button:active .v-button-wrap,
-.v-button.v-pressed .v-button-wrap {
+.#{$name}:active .#{$name}-wrap,
+.#{$name}.v-pressed .#{$name}-wrap {
background-image: url(img/right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
outline: none;
}
-.v-button,
-.v-disabled.v-button {
+.#{$name},
+.v-disabled.#{$name} {
height: 26px;
padding: 0 0 0 6px;
background-color: transparent;
cursor: default;
}
-.v-button-wrap,
-.v-disabled.v-button .v-button-wrap {
+.#{$name}-wrap,
+.v-disabled.#{$name} .#{$name}-wrap {
display: block;
height: 22px;
padding: 4px 15px 0 9px;
background-image: url(img/right.png); /** sprite-ref: buttons; sprite-alignment: right */
}
-.v-button-caption {
+.#{$name}-caption {
color: #222;
text-shadow: #fff 0 1px 0;
font-weight: bold;
/**************************
* Black style
**************************/
-.black .v-button:focus {
+.black .#{$name}:focus {
background-image: url(img/black/left-focus.png); /** sprite-ref: black-buttons */
}
-.black .v-button:focus .v-button-wrap {
+.black .#{$name}:focus .#{$name}-wrap {
background-image: url(img/black/right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
}
-.black .v-button:active,
-.black .v-button.v-pressed {
+.black .#{$name}:active,
+.black .#{$name}.v-pressed {
background-image: url(img/black/left-pressed.png); /** sprite-ref: black-buttons */
}
-.black .v-button:active .v-button-wrap,
-.black .v-button.v-pressed .v-button-wrap {
+.black .#{$name}:active .#{$name}-wrap,
+.black .#{$name}.v-pressed .#{$name}-wrap {
background-image: url(img/black/right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
}
-.black .v-button,
-.black .v-disabled.v-button {
+.black .#{$name},
+.black .v-disabled.#{$name} {
background-image: url(img/black/left.png); /** sprite-ref: black-buttons */
}
-.black .v-button-wrap,
-.black .v-disabled.v-button .v-button-wrap {
+.black .#{$name}-wrap,
+.black .v-disabled.#{$name} .#{$name}-wrap {
background-image: url(img/black/right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
}
-.black .v-button-caption {
+.black .#{$name}-caption {
color: #c9ccce;
text-shadow: #121314 0 -1px 0;
}
@import "button-ie.scss";
@mixin reindeer-button {
-
+ // TODO use $exclude
@include reindeer-button-standard;
@include reindeer-button-primary-style;
@include reindeer-button-small-style;
-@mixin reindeer-datefield {
+@mixin reindeer-datefield($name : v-datefield) {
-.v-datefield {
+.#{$name} {
overflow: hidden;
}
input.v-textfield-readonly:focus{
background-color: transparent;
}
-.v-datefield-calendarpanel {
+.#{$name}-calendarpanel {
border-collapse: collapse;
margin: 0;
padding: 0;
height: auto !important;
}
-.v-datefield-year .v-datefield-calendarpanel-prevmonth,
-.v-datefield-year .v-datefield-calendarpanel-nextmonth {
+.#{$name}-year .#{$name}-calendarpanel-prevmonth,
+.#{$name}-year .#{$name}-calendarpanel-nextmonth {
display: none;
}
-.v-datefield-calendarpanel td {
+.#{$name}-calendarpanel td {
vertical-align: top;
}
-td.v-datefield-calendarpanel-month {
+td.#{$name}-calendarpanel-month {
height: 23px;
background-repeat: repeat-x;
background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-span.v-datefield-calendarpanel-month {
+span.#{$name}-calendarpanel-month {
display: block;
text-align: center;
height: 16px;
overflow: hidden;
margin-top: 1px;
}
-.v-datefield-year .v-datefield-calendarpanel-month {
+.#{$name}-year .#{$name}-calendarpanel-month {
width: 35px;
}
-.v-datefield-month .v-datefield-calendarpanel-month,
-.v-datefield-day .v-datefield-calendarpanel-month,
-.v-datefield-full .v-datefield-calendarpanel-month {
+.#{$name}-month .#{$name}-calendarpanel-month,
+.#{$name}-day .#{$name}-calendarpanel-month,
+.#{$name}-full .#{$name}-calendarpanel-month {
width: 124px;
}
-.v-datefield-month,
-.v-datefield-day,
-.v-datefield-full {
+.#{$name}-month,
+.#{$name}-day,
+.#{$name}-full {
min-width: 240px;
}
-.v-datefield-popupcalendar {
+.#{$name}-popupcalendar {
min-width: 0;
padding-right: 24px;
}
-.v-datefield-year .v-datefield-calendarpanel {
+.#{$name}-year .#{$name}-calendarpanel {
width: 100px;
}
-td.v-datefield-calendarpanel-prevyear {
+td.#{$name}-calendarpanel-prevyear {
text-align: right;
}
-td.v-datefield-calendarpanel-nextyear {
+td.#{$name}-calendarpanel-nextyear {
text-align: left;
}
-.v-datefield-calendarpanel-prevyear button,
-.v-datefield-calendarpanel-nextyear button,
-.v-datefield-calendarpanel-prevmonth button,
-.v-datefield-calendarpanel-nextmonth button {
+.#{$name}-calendarpanel-prevyear button,
+.#{$name}-calendarpanel-nextyear button,
+.#{$name}-calendarpanel-prevmonth button,
+.#{$name}-calendarpanel-nextmonth button {
width: 24px;
height: 23px;
border: none;
-moz-border-radius: 0;
border-radius: 0;
}
-.v-ie .v-datefield-calendarpanel-prevyear button,
-.v-ie .v-datefield-calendarpanel-nextyear button,
-.v-ie .v-datefield-calendarpanel-prevmonth button,
-.v-ie .v-datefield-calendarpanel-nextmonth button {
+.v-ie .#{$name}-calendarpanel-prevyear button,
+.v-ie .#{$name}-calendarpanel-nextyear button,
+.v-ie .#{$name}-calendarpanel-prevmonth button,
+.v-ie .#{$name}-calendarpanel-nextmonth button {
text-indent: 0;
font-size: 1px;
}
-.v-datefield-calendarpanel-nextyear button {
+.#{$name}-calendarpanel-nextyear button {
background-position: left top;
background-image: url(img/year-next.png); /** sprite-ref: verticals */
}
-.v-datefield-calendarpanel-prevyear button:active,
-.v-ie .v-datefield-calendarpanel-prevyear button.v-pressed {
+.#{$name}-calendarpanel-prevyear button:active,
+.v-ie .#{$name}-calendarpanel-prevyear button.v-pressed {
background-image: url(img/year-prev-pressed.png); /** sprite-ref: verticals */
}
-.v-datefield-calendarpanel-nextyear button:active,
-.v-ie .v-datefield-calendarpanel-nextyear button.v-pressed {
+.#{$name}-calendarpanel-nextyear button:active,
+.v-ie .#{$name}-calendarpanel-nextyear button.v-pressed {
background-image: url(img/year-next-pressed.png); /** sprite-ref: verticals */
}
-.v-datefield-calendarpanel-prevmonth,
-.v-datefield-calendarpanel-nextmonth {
+.#{$name}-calendarpanel-prevmonth,
+.#{$name}-calendarpanel-nextmonth {
width: 24px;
background-repeat: repeat-x;
background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-.v-datefield-calendarpanel-prevmonth button,
-.v-datefield-calendarpanel-nextmonth button {
+.#{$name}-calendarpanel-prevmonth button,
+.#{$name}-calendarpanel-nextmonth button {
width: 100%;
height: 21px;
border-left: 1px solid #efefef;
min-width: 24px;
margin-top: 1px;
}
-.v-ie .v-datefield-calendarpanel-prevmonth button,
-.v-ie .v-datefield-calendarpanel-nextmonth button {
+.v-ie .#{$name}-calendarpanel-prevmonth button,
+.v-ie .#{$name}-calendarpanel-nextmonth button {
border: none;
}
-.v-datefield-calendarpanel-nextmonth button {
+.#{$name}-calendarpanel-nextmonth button {
background-image: url(img/month-next.png); /** sprite-ref: verticals; sprite-alignment: center */
}
-.v-datefield-calendarpanel-prevmonth button:active,
-.v-ie .v-datefield-calendarpanel-prevmonth button.v-pressed {
+.#{$name}-calendarpanel-prevmonth button:active,
+.v-ie .#{$name}-calendarpanel-prevmonth button.v-pressed {
background-position: center top;
background-image: url(img/month-prev-pressed.png); /** sprite-ref: verticals; sprite-alignment: center */
}
-.v-datefield-calendarpanel-nextmonth button:active,
-.v-ie .v-datefield-calendarpanel-nextmonth button.v-pressed {
+.#{$name}-calendarpanel-nextmonth button:active,
+.v-ie .#{$name}-calendarpanel-nextmonth button.v-pressed {
background-position: center top;
background-image: url(img/month-next-pressed.png); /** sprite-ref: verticals; sprite-alignment: center */
}
-.v-datefield-calendarpanel-body,
-.v-datefield-calendarpanel-time {
+.#{$name}-calendarpanel-body,
+.#{$name}-calendarpanel-time {
text-align: center;
vertical-align: top;
}
-.v-datefield-calendarpanel-body table {
+.#{$name}-calendarpanel-body table {
border-collapse: collapse;
margin: 0;
padding: 0;
width: 220px;
margin: 0 auto;
}
-.v-datefield-calendarpanel-weekdays td {
+.#{$name}-calendarpanel-weekdays td {
width: 14.2%;
overflow: hidden;
background-repeat: repeat-x;
text-shadow: #3b4651 0 -1px 0;
vertical-align: top;
}
-.v-datefield-calendarpanel-weeknumbers td {
+.#{$name}-calendarpanel-weeknumbers td {
width: 12.4%;
}
-.v-datefield-calendarpanel-weekdays strong {
+.#{$name}-calendarpanel-weekdays strong {
display: block;
text-align: right;
padding: 1px 5px 0 0;
height: 14px;
border-top: 1px solid #596775;
}
-.v-datefield-calendarpanel-weekdays .v-first {
+.#{$name}-calendarpanel-weekdays .v-first {
background-repeat: no-repeat;
background-image: url(img/weekday-first.png); /** sprite-ref: verticals; sprite-margin-bottom: 3px */
}
-.v-datefield-calendarpanel-weekdays .v-last {
+.#{$name}-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 .v-datefield-calendarpanel-weekdays td {
+.v-ie .#{$name}-calendarpanel-weekdays td {
background: url(img/weekday-bg.png) repeat-x;
background-position: left top;
}
-.v-ie .v-datefield-calendarpanel .v-first {
+.v-ie .#{$name}-calendarpanel .v-first {
background: url(img/weekday-first.png) no-repeat;
}
-.v-ie .v-datefield-calendarpanel .v-last {
+.v-ie .#{$name}-calendarpanel .v-last {
background: url(img/weekday-last.png) no-repeat right top;
}
-.v-datefield-calendarpanel-body td {
+.#{$name}-calendarpanel-body td {
text-align: right;
height: 19px;
}
-.v-datefield-calendarpanel-day,
-.v-datefield-calendarpanel-weeknumber,
-.v-datefield-calendarpanel-day-today {
+.#{$name}-calendarpanel-day,
+.#{$name}-calendarpanel-weeknumber,
+.#{$name}-calendarpanel-day-today {
padding: 2px 5px 2px 0;
display: block;
margin: 1px 0 0 5px;
}
-.v-datefield-calendarpanel-weeknumber {
+.#{$name}-calendarpanel-weeknumber {
margin: 0;
padding-top: 4px;
padding-bottom: 3px;
}
-.v-datefield-calendarpanel-day-today {
+.#{$name}-calendarpanel-day-today {
color: #4095d1;
border: none;
}
-.v-datefield-calendarpanel-day-selected {
+.#{$name}-calendarpanel-day-selected {
background: #507ba3;
color: #fff;
text-shadow: #3b5b79 0 1px 0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
-.v-datefield-calendarpanel-time select {
+.#{$name}-calendarpanel-time select {
padding: 0;
font-size: 11px;
}
-.v-datefield-popup {
+.#{$name}-popup {
background: #f8f8f9;
padding: 8px 4px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
-.v-sa .v-datefield-popup,
-.v-op .v-datefield-popup {
+.v-sa .#{$name}-popup,
+.v-op .#{$name}-popup {
background: rgba(255,255,255,.95);
}
-.v-has-width > input.v-datefield-textfield {
+.v-has-width > input.#{$name}-textfield {
width: 100%;
}
-.v-datefield-year > .v-datefield-textfield {
+.#{$name}-year > .#{$name}-textfield {
width: 4.5em;
}
-.v-datefield-month > .v-datefield-textfield {
+.#{$name}-month > .#{$name}-textfield {
width: 5.5em;
}
-.v-datefield-day > .v-datefield-textfield {
+.#{$name}-day > .#{$name}-textfield {
width: 6em;
}
-.v-datefield-full >.v-datefield-textfield {
+.#{$name}-full >.#{$name}-textfield {
width: 12.5em;
}
-.v-datefield-popupcalendar input.v-datefield-textfield {
+.#{$name}-popupcalendar input.#{$name}-textfield {
border-right-width: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-.v-datefield.v-readonly input.v-datefield-textfield {
+.#{$name}.v-readonly input.#{$name}-textfield {
border-right-width: 1px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
-.v-datefield-prompt .v-datefield-textfield {
+.#{$name}-prompt .#{$name}-textfield {
color: #999;
font-style: normal;
}
-.v-datefield-popupcalendar .v-datefield-button {
+.#{$name}-popupcalendar .#{$name}-button {
width: 24px;
margin-right: -24px;
height: 23px;
-moz-border-radius: 0;
border-radius: 0;
}
-.v-datefield-popupcalendar .v-datefield-button:active {
+.#{$name}-popupcalendar .#{$name}-button:active {
background-image: url(img/popup-btn-pressed.png); /** sprite-ref: verticals */
}
/* over black background */
-.black .v-datefield-popupcalendar .v-datefield-button {
+.black .#{$name}-popupcalendar .#{$name}-button {
background-image: url(img/popup-btn-black.png); /** sprite-ref: black-verticals */
}
-.black .v-datefield-popupcalendar .v-datefield-button:active {
+.black .#{$name}-popupcalendar .#{$name}-button:active {
background-image: url(img/popup-btn-black-pressed.png); /** sprite-ref: black-verticals */
}
* on black background
*/
-.black td.v-datefield-calendarpanel-month {
+.black td.#{$name}-calendarpanel-month {
background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
height: 21px;
}
-.black span.v-datefield-calendarpanel-month {
+.black span.#{$name}-calendarpanel-month {
border-left: 1px solid #333638;
border-right: 1px solid #232527;
color: #c9ccce;
padding: 4px 10px 1px 10px;
margin-top: 0;
}
-.black .v-datefield-calendarpanel-prevyear button,
-.black .v-datefield-calendarpanel-nextyear button,
-.black .v-datefield-calendarpanel-prevmonth button,
-.black .v-datefield-calendarpanel-nextmonth button {
+.black .#{$name}-calendarpanel-prevyear button,
+.black .#{$name}-calendarpanel-nextyear button,
+.black .#{$name}-calendarpanel-prevmonth button,
+.black .#{$name}-calendarpanel-nextmonth button {
background-image: url(img/year-prev-black.png); /** sprite-ref: black-verticals */
height: 21px;
}
-.black .v-datefield-calendarpanel-nextyear button {
+.black .#{$name}-calendarpanel-nextyear button {
background-image: url(img/year-next-black.png); /** sprite-ref: black-verticals */
}
-.black .v-datefield-calendarpanel-prevyear button:active,
-.v-ie .black .v-datefield-calendarpanel-prevyear button.v-pressed {
+.black .#{$name}-calendarpanel-prevyear button:active,
+.v-ie .black .#{$name}-calendarpanel-prevyear button.v-pressed {
background-image: url(img/year-prev-black-pressed.png); /** sprite-ref: black-verticals */
}
-.black .v-datefield-calendarpanel-nextyear button:active,
-.v-ie .black .v-datefield-calendarpanel-nextyear button.v-pressed {
+.black .#{$name}-calendarpanel-nextyear button:active,
+.v-ie .black .#{$name}-calendarpanel-nextyear button.v-pressed {
background-image: url(img/year-next-black-pressed.png); /** sprite-ref: black-verticals */
}
-.black .v-datefield-calendarpanel-prevmonth,
-.black .v-datefield-calendarpanel-nextmonth {
+.black .#{$name}-calendarpanel-prevmonth,
+.black .#{$name}-calendarpanel-nextmonth {
background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
}
-.black .v-datefield-calendarpanel-prevmonth button,
-.black .v-datefield-calendarpanel-nextmonth button {
+.black .#{$name}-calendarpanel-prevmonth button,
+.black .#{$name}-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 .v-datefield-calendarpanel-nextmonth button {
+.black .#{$name}-calendarpanel-nextmonth button {
background-image: url(img/month-next-black.png); /** sprite-ref: black-verticals; sprite-alignment: center */
}
-.black .v-datefield-calendarpanel-prevmonth button:active,
-.v-ie .black .v-datefield-calendarpanel-prevmonth button.v-pressed {
+.black .#{$name}-calendarpanel-prevmonth button:active,
+.v-ie .black .#{$name}-calendarpanel-prevmonth button.v-pressed {
background-image: url(img/month-prev-black-pressed.png); /** sprite-ref: black-verticals; sprite-alignment: center */
}
-.black .v-datefield-calendarpanel-nextmonth button:active,
-.v-ie .black .v-datefield-calendarpanel-nextmonth button.v-pressed {
+.black .#{$name}-calendarpanel-nextmonth button:active,
+.v-ie .black .#{$name}-calendarpanel-nextmonth button.v-pressed {
background-image: url(img/month-next-black-pressed.png); /** sprite-ref: black-verticals; sprite-alignment: center */
}
-.v-ie .black .v-datefield-calendarpanel-prevmonth button,
-.v-ie .black .v-datefield-calendarpanel-nextmonth button {
+.v-ie .black .#{$name}-calendarpanel-prevmonth button,
+.v-ie .black .#{$name}-calendarpanel-nextmonth button {
border: none;
}
-.black .v-datefield-calendarpanel-weekdays td {
+.black .#{$name}-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 .v-datefield-calendarpanel-weekdays strong {
+.black .#{$name}-calendarpanel-weekdays strong {
border-top-color: #1b1c1d;
}
-.black .v-datefield-calendarpanel .v-first {
+.black .#{$name}-calendarpanel .v-first {
background-image: url(img/weekday-first-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 3px */
}
-.black .v-datefield-calendarpanel .v-last {
+.black .#{$name}-calendarpanel .v-last {
background-image: url(img/weekday-last-black.png); /** sprite-ref: black-verticals; sprite-alignment: right */
}
-.black .v-datefield-prompt .v-datefield-textfield {
+.black .#{$name}-prompt .#{$name}-textfield {
color: #5f6366;
}
-@mixin reindeer-formlayout {
+@mixin reindeer-formlayout($name : v-formlayout) {
-.v-formlayout-errorcell {
+.#{$name}-errorcell {
width: 13px;
}
-.v-formlayout-cell .v-errorindicator {
+.#{$name}-cell .v-errorindicator {
width: 13px;
height: 16px;
background: transparent url(../common/icons/error.png) no-repeat 50%;
}
-.v-formlayout-captioncell {
+.#{$name}-captioncell {
text-align: right;
white-space: nowrap;
}
-.v-formlayout-spacing .v-formlayout-row .v-formlayout-captioncell,
-.v-formlayout-spacing .v-formlayout-row .v-formlayout-contentcell,
-.v-formlayout-spacing .v-formlayout-row .v-formlayout-errorcell {
+.#{$name}-spacing .#{$name}-row .#{$name}-captioncell,
+.#{$name}-spacing .#{$name}-row .#{$name}-contentcell,
+.#{$name}-spacing .#{$name}-row .#{$name}-errorcell {
padding-top: 8px;
}
-.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-captioncell,
-.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-contentcell,
-.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-errorcell {
+.#{$name}-margin-top .#{$name}-firstrow .#{$name}-captioncell,
+.#{$name}-margin-top .#{$name}-firstrow .#{$name}-contentcell,
+.#{$name}-margin-top .#{$name}-firstrow .#{$name}-errorcell {
padding-top: 15px;
}
-.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-captioncell,
-.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-contentcell,
-.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-errorcell {
+.#{$name}-margin-bottom .#{$name}-lastrow .#{$name}-captioncell,
+.#{$name}-margin-bottom .#{$name}-lastrow .#{$name}-contentcell,
+.#{$name}-margin-bottom .#{$name}-lastrow .#{$name}-errorcell {
padding-bottom: 15px;
}
-.v-formlayout-margin-left .v-formlayout-captioncell {
+.#{$name}-margin-left .#{$name}-captioncell {
padding-left: 18px;
}
-.v-formlayout-margin-right .v-formlayout-contentcell {
+.#{$name}-margin-right .#{$name}-contentcell {
padding-right: 18px;
}
/* form */
-@mixin reindeer-label {
+@mixin reindeer-label($name : v-label) {
-.v-label {
+.#{$name} {
line-height: 18px;
}
color: #C9CCCE;
text-shadow: 0 0 1px #000;
}
-.black .v-label-h1,
-.black .v-label-h2,
+.black .#{$name}-h1,
+.black .#{$name}-h2,
.black .v-caption-h1,
.black .v-caption-h2,
-.white .black .v-label-h1,
-.white .black .v-label-h2,
+.white .black .#{$name}-h1,
+.white .black .#{$name}-h2,
.white .black .v-caption-h1,
.white .black .v-caption-h2,
-.blue .black .v-label-h1,
-.blue .black .v-label-h2,
+.blue .black .#{$name}-h1,
+.blue .black .#{$name}-h2,
.blue .black .v-caption-h1,
.blue .black .v-caption-h2 {
color: #fff;
text-shadow: rgba(0,0,0,.8) 0 2px 2px;
}
-.black .v-label-light,
-.white .black .v-label-light {
+.black .#{$name}-light,
+.white .black .#{$name}-light {
color: #72787c;
}
-.black .v-label hr,
-.white .black .v-label hr {
+.black .#{$name} hr,
+.white .black .#{$name} hr {
background: #0c0d0e;
color: #0c0d0e;
border-bottom-color: #292b2e;
color: #222;
text-shadow: none;
}
-.blue .v-label-h1,
-.blue .v-label-h2,
+.blue .#{$name}-h1,
+.blue .#{$name}-h2,
.blue .v-caption-h1,
.blue .v-caption-h2,
-.white .blue .v-label-h1,
-.white .blue .v-label-h2,
+.white .blue .#{$name}-h1,
+.white .blue .#{$name}-h2,
.white .blue .v-caption-h1,
.white .blue .v-caption-h2 {
color: #fff;
text-shadow: rgba(0,0,0,.3) 0 1px 1px;
}
-.blue .v-label-light,
-.white .blue .v-label-light {
+.blue .#{$name}-light,
+.white .blue .#{$name}-light {
color: #6e7c83;
}
-.blue .v-label hr,
-.white .blue .v-label hr {
+.blue .#{$name} hr,
+.white .blue .#{$name} hr {
background: #a3bcc9;
color: #a3bcc9;
border-bottom-color: #cfe2eb;
/**********************
* Default & white styles
**********************/
-.v-label-h1,
-.v-label-h2,
+.#{$name}-h1,
+.#{$name}-h2,
.v-caption-h1,
.v-caption-h2,
-.white .v-label-h1,
-.white .v-label-h2,
+.white .#{$name}-h1,
+.white .#{$name}-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;
}
-.v-label-h2,
+.#{$name}-h2,
.v-caption-h2,
-.white .v-label-h2,
+.white .#{$name}-h2,
.white .v-caption-h2 {
font-size: 16px;
line-height: 22px;
}
-.v-label-light,
-.white .v-label-light {
+.#{$name}-light,
+.white .#{$name}-light {
font-size: 11px;
line-height: 13px;
color: #707070;
}
-.v-label hr,
-.white .v-label hr {
+.#{$name} hr,
+.white .#{$name} hr {
height: 2px;
overflow: hidden;
background: #dcdcdc;
border-bottom: 1px solid #fff;
}
-.v-sa .v-label hr,
-.v-ie8 .v-label hr {
+.v-sa .#{$name} hr,
+.v-ie8 .#{$name} hr {
height: 1px;
}
/* Labels inside Table don't need a line-height */
-.v-table .v-label {
+.v-table .#{$name} {
line-height: normal;
}
-@mixin reindeer-link {
+@mixin reindeer-link($name : v-link) {
-.v-link a:link span {
+.#{$name} a:link span {
color: #1b699f;
}
-.v-link a:visited span {
+.#{$name} a:visited span {
color: #5c7485;
}
-.v-link a:hover span {
+.#{$name} a:hover span {
color: #2483c4;
}
-@mixin reindeer-menubar {
+@mixin reindeer-menubar($name : v-menubar) {
-.v-menubar {
+.#{$name} {
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;
}
-.v-menubar .v-menubar-menuitem {
+.#{$name} .#{$name}-menuitem {
padding: 3px 8px;
height: 17px;
line-height: 16px;
}
-.v-menubar .v-menubar-menuitem:hover {
+.#{$name} .#{$name}-menuitem:hover {
color: #fff;
}
-.v-menubar-submenu {
+.#{$name}-submenu {
background: #f8f8f9;
border: none;
border-radius: 3px;
overflow: hidden;
padding: 4px 0;
}
-.v-menubar-submenu .v-menubar-menuitem {
+.#{$name}-submenu .#{$name}-menuitem {
padding: 1px 26px 1px 10px;
line-height: 16px;
}
-.v-menubar-submenu .v-menubar-menuitem-caption .v-icon {
+.#{$name}-submenu .#{$name}-menuitem-caption .v-icon {
vertical-align: middle;
}
-.v-menubar .v-menubar-menuitem-selected,
-.v-menubar-submenu .v-menubar-menuitem-selected {
+.#{$name} .#{$name}-menuitem-selected,
+.#{$name}-submenu .#{$name}-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;
}
-.v-menubar .v-menubar-menuitem-selected {
+.#{$name} .#{$name}-menuitem-selected {
background-image: url(img/menu-sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */
}
-.v-menubar-submenu .v-menubar-submenu-indicator {
+.#{$name}-submenu .#{$name}-submenu-indicator {
background: transparent url(img/submenu-icon.png) no-repeat right 70%;
width: 26px;
height: 16px;
text-indent: -9999px;
}
-.v-menubar-submenu .v-menubar-menuitem-selected .v-menubar-submenu-indicator {
+.#{$name}-submenu .#{$name}-menuitem-selected .#{$name}-submenu-indicator {
background-image: url(img/submenu-icon-hover.png);
}
/* Checkboxes for checkable/checked menu items */
-.v-menubar-submenu-check-column .v-menubar-menuitem {
+.#{$name}-submenu-check-column .#{$name}-menuitem {
padding-left: 6px;
}
-.v-menubar-submenu-check-column .v-menubar-menuitem-caption {
+.#{$name}-submenu-check-column .#{$name}-menuitem-caption {
padding-left: 18px;
}
-.v-menubar-submenu .v-menubar-menuitem-checked .v-menubar-menuitem-caption {
+.#{$name}-submenu .#{$name}-menuitem-checked .#{$name}-menuitem-caption {
background: transparent url(img/checked.png) no-repeat left;
}
-.v-menubar-submenu .v-menubar-menuitem-unchecked .v-menubar-menuitem-caption {
+.#{$name}-submenu .#{$name}-menuitem-unchecked .#{$name}-menuitem-caption {
background: transparent url(img/unchecked.png) no-repeat left;
}
-.v-menubar-submenu .v-menubar-menuitem-selected-checked .v-menubar-menuitem-caption {
+.#{$name}-submenu .#{$name}-menuitem-selected-checked .#{$name}-menuitem-caption {
background: transparent url(img/checked-selected.png) no-repeat left;
}
-.v-menubar-submenu .v-menubar-menuitem-selected-unchecked .v-menubar-menuitem-caption {
+.#{$name}-submenu .#{$name}-menuitem-selected-unchecked .#{$name}-menuitem-caption {
background: transparent url(img/unchecked-selected.png) no-repeat left;
}
-@mixin reindeer-notification {
+@mixin reindeer-notification($name : v-Notification) {
-.v-Notification {
+.#{$name} {
color: #fff;
border-radius: 4px;
-moz-border-radius: 4px;
font-weight: bold;
}
-.v-ie9 .v-Notification H1 {
+.v-ie9 .#{$name} H1 {
/* Fix for #6793 */
font-weight: bold;
}
-.v-Notification p {
+.#{$name} p {
line-height: 1.3;
}
-.v-Notification-warning {
+.#{$name}-warning {
background: #fdf3b5;
color: #ca9a61;
border: 3px solid #fee3af;
}
-.v-Notification-error {
+.#{$name}-error {
background: #b40000 url(img/error-close.png) no-repeat right top;
border: 3px solid #ca3030;
}
-.v-Notification-tray {
+.#{$name}-tray {
margin: 0 5px 5px 0;
background: #3b3c3e;
border: 2px solid #585b5c;
padding: 0.8em 0.9em;
}
-.v-Notification-tray h1 {
+.#{$name}-tray h1 {
font-size: 14px;
line-height: 18px;
}
-.v-Notification-tray p {
+.#{$name}-tray p {
font-size: 12px;
font-weight: normal;
}
-.v-Notification-system {
+.#{$name}-system {
background-color: #b40000;
}
-@mixin reindeer-panel {
+@mixin reindeer-panel($name : v-panel) {
-.blue .v-panel-caption,
-.blue .v-panel-nocaption,
-.blue .v-panel-content {
+.blue .#{$name}-caption,
+.blue .#{$name}-nocaption,
+.blue .#{$name}-content {
border-color: #a8bcc5;
}
-.v-panel-caption,
-.v-panel-nocaption,
-.white .v-panel-caption,
-.white .v-panel-nocaption {
+.#{$name}-caption,
+.#{$name}-nocaption,
+.white .#{$name}-caption,
+.white .#{$name}-nocaption {
border-bottom: 1px solid #e5e5e5;
line-height: 16px; /* accommodate minimum icon size */
}
-.v-webkit .v-panel-caption,
-.v-webkit .v-panel-nocaption,
-.v-gecko .v-panel-caption,
-.v-gecko .v-panel-nocaption,
-.v-ie9 .v-panel-caption,
-.v-ie9 .v-panel-nocaption {
+.v-webkit .#{$name}-caption,
+.v-webkit .#{$name}-nocaption,
+.v-gecko .#{$name}-caption,
+.v-gecko .#{$name}-nocaption,
+.v-ie9 .#{$name}-caption,
+.v-ie9 .#{$name}-nocaption {
border-bottom-color: rgba(0,0,0,.08);
}
-.v-panel-caption {
+.#{$name}-caption {
padding-bottom: 2px;
}
-.v-panel-content,
-.white .v-panel-content {
+.#{$name}-content,
+.white .#{$name}-content {
background: #fff;
border: 1px solid #dcdcdc;
border-bottom: none;
border-top: none;
}
-.v-webkit .v-panel-content,
-.v-gecko .v-panel-content,
-.v-ie9 .v-panel-content {
+.v-webkit .#{$name}-content,
+.v-gecko .#{$name}-content,
+.v-ie9 .#{$name}-content {
border-top-color: rgba(0,0,0,.07);
}
-.blue .v-panel-deco {
+.blue .#{$name}-deco {
border-color: #92a3ac;
background: #adc2cd;
}
-.v-panel-deco,
-.white .v-panel-deco {
+.#{$name}-deco,
+.white .#{$name}-deco {
height: 1px;
border-top: 1px solid #bebebe;
background: #e2e2e2;
overflow: hidden;
}
-.v-webkit .v-panel-deco,
-.v-gecko .v-panel-deco,
-.v-ie9 .v-panel-deco {
+.v-webkit .#{$name}-deco,
+.v-gecko .#{$name}-deco,
+.v-ie9 .#{$name}-deco {
border-top-color: rgba(0,0,0,.1);
background: rgba(0,0,0,.08);
}
-.v-panel-caption .v-errorindicator {
+.#{$name}-caption .v-errorindicator {
height: 16px;
width: 13px;
background: url(../common/icons/error.png) no-repeat 50%;
}
/* Light style */
-.v-panel-light .v-panel-caption-light,
-.v-panel-light .v-panel-nocaption-light {
+.#{$name}-light .#{$name}-caption-light,
+.#{$name}-light .#{$name}-nocaption-light {
border: none;
}
-.v-panel-light .v-panel-content-light {
+.#{$name}-light .#{$name}-content-light {
border: none;
background: transparent;
}
-.v-panel-light .v-panel-deco-light {
+.#{$name}-light .#{$name}-deco-light {
height: 0;
border: none;
}
-@mixin reindeer-popupview {
+@mixin reindeer-popupview($name : v-popupview) {
-.v-popupview {
+.#{$name} {
color: #1b699f;
}
-.v-popupview:hover {
+.#{$name}:hover {
color: #2483c4;
}
-.v-popupview-popup {
+.#{$name}-popup {
background: #fff;
padding: 3px;
}
-@mixin reindeer-progressindicator {
+@mixin reindeer-progressindicator($name : v-progressindicator) {
-.v-progressindicator-wrapper {
+.#{$name}-wrapper {
background: #dfe2e4 url(img/base.gif) repeat-x;
border: 1px solid #bfbfbf;
}
-.v-disabled .v-progressindicator-wrapper {
+.v-disabled .#{$name}-wrapper {
background-image: url(img/disabled.gif);
}
-.v-progressindicator-indicator {
+.#{$name}-indicator {
background: #f7f9f9 url(img/progress.png);
}
-@mixin reindeer-select {
+@mixin reindeer-select($name : v-filterselect) {
-.v-filterselect {
+.#{$name} {
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 .v-filterselect-input,
-.v-window .v-filterselect-input,
-.v-popupview-popup .v-filterselect-input {
+.v-app .#{$name}-input,
+.v-window .#{$name}-input,
+.v-popupview-popup .#{$name}-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.v-filterselect-input,
-.v-window input.v-filterselect-input,
-.v-popupview-popup input.v-filterselect-input {
+.v-app input.#{$name}-input,
+.v-window input.#{$name}-input,
+.v-popupview-popup input.#{$name}-input {
padding: 4px 0 4px 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-.v-filterselect-prompt .v-filterselect-input {
+.#{$name}-prompt .#{$name}-input {
font-style: normal;
}
-.v-filterselect-input:focus {
+.#{$name}-input:focus {
outline: none;
}
-.v-filterselect-focus {
+.#{$name}-focus {
background-image: url(img/left-focus.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */
}
-.v-filterselect-focus .v-filterselect-input {
+.#{$name}-focus .#{$name}-input {
background-image: url(img/center-focus.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-.v-filterselect-button {
+.#{$name}-button {
overflow: hidden;
width: 25px;
height: 24px;
cursor: default;
margin-right: -25px;
}
-.v-filterselect-button:hover {
+.#{$name}-button:hover {
background-image: url(img/right-hover.png); /** sprite-ref: verticals */
}
-.v-filterselect-button:active {
+.#{$name}-button:active {
background-image: url(img/right-pressed.png); /** sprite-ref: verticals */
}
-.v-filterselect-focus .v-filterselect-button {
+.#{$name}-focus .#{$name}-button {
background-image: url(img/right-focus.png); /** sprite-ref: verticals */
}
-.v-filterselect-focus .v-filterselect-button:hover {
+.#{$name}-focus .#{$name}-button:hover {
background-image: url(img/right-focus-hover.png); /** sprite-ref: verticals */
}
-.v-filterselect-focus .v-filterselect-button:active {
+.#{$name}-focus .#{$name}-button:active {
background-image: url(img/right-focus-pressed.png); /** sprite-ref: verticals */
}
-.v-disabled .v-filterselect-button:hover,
-.v-readonly .v-filterselect-button:hover {
+.v-disabled .#{$name}-button:hover,
+.v-readonly .#{$name}-button:hover {
background-image: url(img/right.png); /** sprite-ref: verticals */
}
-.v-filterselect-suggestpopup {
+.#{$name}-suggestpopup {
background: #f8f8f9;
border: none;
border-radius: 3px;
-o-border-radius: 3px;
overflow: hidden;
}
-.v-filterselect-suggestmenu {
+.#{$name}-suggestmenu {
margin: 4px 0;
}
-.v-filterselect-suggestmenu .gwt-MenuItem {
+.#{$name}-suggestmenu .gwt-MenuItem {
padding: 1px 8px;
height: 16px;
user-select: none;
-webkit-user-select: none;
cursor: default;
}
-.v-ff .v-filterselect-suggestmenu .gwt-MenuItem {
+.v-ff .#{$name}-suggestmenu .gwt-MenuItem {
height: 18px;
}
-.v-filterselect-suggestmenu .gwt-MenuItem .v-icon {
+.#{$name}-suggestmenu .gwt-MenuItem .v-icon {
margin-right: 3px;
}
-.v-filterselect-suggestmenu .gwt-MenuItem-selected {
+.#{$name}-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;
}
-.v-filterselect-nextpage,
-.v-filterselect-nextpage-off,
-.v-filterselect-prevpage-off,
-.v-filterselect-prevpage {
+.#{$name}-nextpage,
+.#{$name}-nextpage-off,
+.#{$name}-prevpage-off,
+.#{$name}-prevpage {
height: 11px;
width: 100%;
background: transparent;
margin-bottom: -4px;
}
-.v-filterselect-nextpage,
-.v-filterselect-nextpage-off {
+.#{$name}-nextpage,
+.#{$name}-nextpage-off {
margin: -4px 0 0;
}
-.v-filterselect-nextpage:hover {
+.#{$name}-nextpage:hover {
background-repeat: repeat-x;
background-image: url(img/page-down-hover.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-.v-filterselect-prevpage:hover {
+.#{$name}-prevpage:hover {
background-repeat: repeat-x;
background-image: url(img/page-up-hover.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-.v-filterselect-nextpage:active {
+.#{$name}-nextpage:active {
background-repeat: repeat-x;
background-image: url(img/page-down-pressed.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-.v-filterselect-prevpage:active {
+.#{$name}-prevpage:active {
background-repeat: repeat-x;
background-image: url(img/page-up-pressed.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-.v-filterselect-nextpage-off span,
-.v-filterselect-prevpage-off span {
+.#{$name}-nextpage-off span,
+.#{$name}-prevpage-off span {
display: none;
}
-.v-filterselect-nextpage span,
-.v-filterselect-prevpage span {
+.#{$name}-nextpage span,
+.#{$name}-prevpage span {
display: block;
height: 11px;
width: 100%;
-moz-user-select: none;
-webkit-user-select: none;
}
-.v-filterselect-prevpage span {
+.#{$name}-prevpage span {
background-image: url(img/arrow-up.png); /** sprite-ref: verticals; sprite-margin-top: 3px; sprite-margin-bottom: 3px; sprite-alignment: center */
}
-.v-filterselect-nextpage:hover span {
+.#{$name}-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 */
}
-.v-filterselect-prevpage:hover span {
+.#{$name}-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 */
}
-.v-filterselect-status {
+.#{$name}-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 .v-filterselect-suggestmenu .gwt-MenuItem-selected {
+.v-ie .#{$name}-suggestmenu .gwt-MenuItem-selected {
background: transparent url(../common/img/sel-bg.png) repeat-x;
}
-.v-ie .v-filterselect-nextpage:hover {
+.v-ie .#{$name}-nextpage:hover {
background: transparent url(img/page-down-hover.png) repeat-x;
}
-.v-ie .v-filterselect-prevpage:hover {
+.v-ie .#{$name}-prevpage:hover {
background: transparent url(img/page-up-hover.png) repeat-x;
}
-.v-ie .v-filterselect-prevpage span {
+.v-ie .#{$name}-prevpage span {
background: transparent url(img/arrow-up.png) no-repeat center 3px;
}
-.v-ie .v-filterselect-nextpage span {
+.v-ie .#{$name}-nextpage span {
background: transparent url(img/arrow-down.png) no-repeat center 3px;
}
-.v-ie .v-filterselect-prevpage:hover span {
+.v-ie .#{$name}-prevpage:hover span {
background: transparent url(img/arrow-up-hover.png) no-repeat center 3px;
}
-.v-ie .v-filterselect-nextpage:hover span {
+.v-ie .#{$name}-nextpage:hover span {
background: transparent url(img/arrow-down-hover.png) no-repeat center 3px;
}
-.v-ie .v-filterselect-status {
+.v-ie .#{$name}-status {
background: transparent url(img/status-bg.png) repeat-x;
}
/* Filterselect with icon needs a similar fix than in buttons */
-.v-filterselect .v-icon {
+.#{$name} .v-icon {
width: 16px;
position: relative;
}
-.v-filterselect .v-icon + .v-filterselect-input {
+.#{$name} .v-icon + .#{$name}-input {
margin-left: -16px;
padding-left: 18px;
}
/* Combobox on black background */
-.black .v-filterselect {
+.black .#{$name} {
background-image: url(img/black/left-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-.v-app .black .v-filterselect-input,
-.v-window .black .v-filterselect-input,
-.v-window-black .v-filterselect-input,
-.v-popupview-popup .black .v-filterselect-input {
+.v-app .black .#{$name}-input,
+.v-window .black .#{$name}-input,
+.v-window-black .#{$name}-input,
+.v-popupview-popup .black .#{$name}-input {
color: #c9ccce;
background-image: url(img/black/center-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */
}
-.black .v-filterselect-focus {
+.black .#{$name}-focus {
background-image: url(img/black/left-black-focus.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-.black .v-filterselect-focus .v-filterselect-input {
+.black .#{$name}-focus .#{$name}-input {
background-image: url(img/black/center-black-focus.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */
}
-.black .v-filterselect-button {
+.black .#{$name}-button {
background-image: url(img/black/right-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-.black .v-filterselect-button:hover {
+.black .#{$name}-button:hover {
background-image: url(img/black/right-black-hover.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-.black .v-filterselect-button:active {
+.black .#{$name}-button:active {
background-image: url(img/black/right-black-pressed.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-.black .v-filterselect-focus .v-filterselect-button {
+.black .#{$name}-focus .#{$name}-button {
background-image: url(img/black/right-black-focus.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-.black .v-filterselect-focus .v-filterselect-button:hover {
+.black .#{$name}-focus .#{$name}-button:hover {
background-image: url(img/black/right-black-focus-hover.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-.black .v-filterselect-focus .v-filterselect-button:active {
+.black .#{$name}-focus .#{$name}-button:active {
background-image: url(img/black/right-black-focus-pressed.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-.black .v-disabled .v-filterselect-button:hover,
-.black .v-readonly .v-filterselect-button:hover {
+.black .v-disabled .#{$name}-button:hover,
+.black .v-readonly .#{$name}-button:hover {
background-image: url(img/black/right-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
}
-.black .v-filterselect-prompt .v-filterselect-input {
+.black .#{$name}-prompt .#{$name}-input {
color: #5f6366;
}
-@mixin reindeer-slider {
+@mixin reindeer-slider($name : v-slider) {
-.v-slider {
+.#{$name} {
border-top: 1px solid #9a9c9e;
border-bottom: 1px solid #bdbfc1;
margin: 4px 0;
}
-.v-slider-base {
+.#{$name}-base {
height: 1px;
background: #e0e2e2;
border-top: 1px solid #adb0b1;
border-left: 1px solid #a0a3a6;
border-right: 1px solid #a0a3a6;
}
-.v-slider-handle {
+.#{$name}-handle {
background: transparent;
background-image: url(img/knob.png); /** sprite-ref: verticals */
width: 10px;
height: 10px;
margin-top: -5px;
}
-.v-slider-handle-active {
+.#{$name}-handle-active {
background-image: url(img/knob-pressed.png); /** sprite-ref: verticals */
}
-.v-slider-vertical {
+.#{$name}-vertical {
width: 2px;
margin: 0 5px;
border: none;
border-left: 1px solid #9a9c9e;
border-right: 1px solid #bdbfc1;
}
-.v-slider-vertical .v-slider-base {
+.#{$name}-vertical .#{$name}-base {
width: 2px;
border-left: 1px solid #adb0b1;
border-right: none;
border-top: 1px solid #adb0b1;
border-bottom: 1px solid #adb0b1;
}
-.v-slider-vertical .v-slider-handle {
+.#{$name}-vertical .#{$name}-handle {
width: 10px;
height: 10px;
margin-left: -5px;
-@mixin reindeer-splitpanel {
+@mixin reindeer-splitpanel($name : v-splitpanel) {
-.v-splitpanel-hsplitter,
-.v-splitpanel-hsplitter-locked {
+.#{$name}-hsplitter,
+.#{$name}-hsplitter-locked {
width: 7px;
background-repeat: repeat-y;
background-image: url(img/hor-bg.png); /** sprite-ref: horizontals; sprite-alignment: repeat */
}
-.v-splitpanel-hsplitter div {
+.#{$name}-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 */
}
-.v-splitpanel-vsplitter,
-.v-splitpanel-vsplitter-locked {
+.#{$name}-vsplitter,
+.#{$name}-vsplitter-locked {
height: 7px;
background-repeat: repeat-x;
background-image: url(img/ver-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-.v-splitpanel-vsplitter div {
+.#{$name}-vsplitter div {
height: 7px;
background: transparent;
background-repeat: no-repeat;
/* Splitpanels on blue background */
-.blue .v-splitpanel-hsplitter-small,
-.blue .v-splitpanel-hsplitter-small-locked {
+.blue .#{$name}-hsplitter-small,
+.blue .#{$name}-hsplitter-small-locked {
background: #7c8a91;
}
/* Splitpanels on black background */
-.black .v-splitpanel-hsplitter-small,
-.black .v-splitpanel-hsplitter-small-locked {
+.black .#{$name}-hsplitter-small,
+.black .#{$name}-hsplitter-small-locked {
background: #4e5253;
}
/* Small style */
-.v-splitpanel-hsplitter-small,
-.v-splitpanel-hsplitter-small-locked,
-.white .v-splitpanel-hsplitter-small,
-.white .v-splitpanel-hsplitter-small-locked {
+.#{$name}-hsplitter-small,
+.#{$name}-hsplitter-small-locked,
+.white .#{$name}-hsplitter-small,
+.white .#{$name}-hsplitter-small-locked {
width: 1px;
background: #949698;
}
-.v-splitpanel-vsplitter-small,
-.v-splitpanel-vsplitter-small-locked,
-.white .v-splitpanel-vsplitter-small,
-.white .v-splitpanel-vsplitter-small-locked {
+.#{$name}-vsplitter-small,
+.#{$name}-vsplitter-small-locked,
+.white .#{$name}-vsplitter-small,
+.white .#{$name}-vsplitter-small-locked {
height: 1px;
background: #949698;
}
-.v-splitpanel-hsplitter-small div {
+.#{$name}-hsplitter-small div {
width: 5px;
margin-left: -2px;
background: transparent;
}
-.v-splitpanel-vsplitter-small div {
+.#{$name}-vsplitter-small div {
height: 5px;
margin-top: -2px;
background: transparent;
-@mixin reindeer-table {
+@mixin reindeer-table($name : v-table) {
/* Table on blue background */
-.blue .v-table-header-wrap {
+.blue .#{$name}-header-wrap {
border-color: #92a2aa;
}
-.blue .v-table-body {
+.blue .#{$name}-body {
border-color: #92a2aa;
border-top-color: #c2c3c4;
}
/* Default & white style */
-.v-table-header-wrap,
-.white .v-table-header-wrap,
-.v-table-footer-wrap,
-.white .v-table-footer-wrap,
-.v-table-header-drag {
+.#{$name}-header-wrap,
+.white .#{$name}-header-wrap,
+.#{$name}-footer-wrap,
+.white .#{$name}-footer-wrap,
+.#{$name}-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;
}
-.v-table-footer-wrap,
-.white .v-table-footer-wrap {
+.#{$name}-footer-wrap,
+.white .#{$name}-footer-wrap {
text-transform: none;
font-size: 12px;
font-weight: normal;
}
-.v-table-footer td,
-.white .v-table-footer td {
+.#{$name}-footer td,
+.white .#{$name}-footer td {
border-color: #c2c3c4;
}
-.v-table-footer-container {
+.#{$name}-footer-container {
padding-right: 7px;
}
-.v-table-header,
-.v-table-footer,
-.v-table-footer table {
+.#{$name}-header,
+.#{$name}-footer,
+.#{$name}-footer table {
height: 20px;
}
-.v-table-caption-container,
-.v-table-header-drag {
+.#{$name}-caption-container,
+.#{$name}-header-drag {
padding-top: 4px;
padding-right: 4px;
}
-.v-table-caption-container .v-icon,
-.v-table-header-drag .v-icon {
+.#{$name}-caption-container .v-icon,
+.#{$name}-header-drag .v-icon {
height: 16px;
margin: -4px 3px 0 0;
vertical-align: middle;
}
-.v-ie .v-table-caption-container .v-icon,
-.v-ie .v-table-header-drag .v-icon {
+.v-ie .#{$name}-caption-container .v-icon,
+.v-ie .#{$name}-header-drag .v-icon {
margin-top: -3px;
}
-.v-table-resizer {
+.#{$name}-resizer {
height: 20px;
width: 2px;
background: transparent;
border-right: 1px solid #c2c3c4;
}
-.v-table-sort-indicator {
+.#{$name}-sort-indicator {
background: transparent;
width: 0px;
height: 20px;
}
-.v-table-header-cell-asc .v-table-sort-indicator {
+.#{$name}-header-cell-asc .#{$name}-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;
}
-.v-table-header-cell-desc .v-table-sort-indicator {
+.#{$name}-header-cell-desc .#{$name}-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;
}
-.v-table-body,
-.white .v-table-body {
+.#{$name}-body,
+.white .#{$name}-body {
border-color: #c2c3c4;
background: #fff;
}
-.v-table-cell-content {
+.#{$name}-cell-content {
padding-top: 0;
border-right-color: #d3d4d5;
vertical-align: top;
}
-.v-table-cell-wrapper {
+.#{$name}-cell-wrapper {
padding-top: 3px;
padding-bottom: 3px;
}
-.v-table-row-odd {
+.#{$name}-row-odd {
background: #eff0f1;
}
-.v-table-generated-row {
+.#{$name}-generated-row {
background: #dcdee0;
text-transform: uppercase;
font-size: 10px;
text-shadow: #f3f5f8 0 1px 0;
line-height: normal;
}
-.v-table-generated-row .v-table-cell-wrapper {
+.#{$name}-generated-row .#{$name}-cell-wrapper {
padding-top: 4px;
padding-bottom: 5px;
}
-.v-table-cell-content:last-child {
+.#{$name}-cell-content:last-child {
border-right-color: transparent;
}
-.v-table .v-selected,
-.black .v-table .v-selected {
+.#{$name} .v-selected,
+.black .#{$name} .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;
}
-.v-table .v-selected .v-table-cell-content {
+.#{$name} .v-selected .#{$name}-cell-content {
border-right-color: #466c90;
}
-.v-table-column-selector {
+.#{$name}-column-selector {
width: 16px;
height: 20px;
margin-top: -20px;
background: transparent no-repeat;
background-image: url(img/col-sel-light.png); /** sprite-ref: verticals */
}
-.v-table-column-selector:active {
+.#{$name}-column-selector:active {
background-image: url(img/col-sel-light-pressed.png); /** sprite-ref: verticals */
}
-.v-table-focus-slot-left {
+.#{$name}-focus-slot-left {
border-left: 1px solid #222;
margin-bottom: -20px;
width: auto;
}
-.v-table-focus-slot-right {
+.#{$name}-focus-slot-right {
border-right-color: #222;
margin-right: 0;
}
-.v-table-header-drag {
+.#{$name}-header-drag {
padding-left: 6px;
height: 16px;
}
-.v-table-header-drag img {
+.#{$name}-header-drag img {
height: 16px;
margin: -3px 3px 0 0;
}
-.v-table-scrollposition {
+.#{$name}-scrollposition {
width: auto;
background: transparent;
border: none;
}
-.v-table-scrollposition span {
+.#{$name}-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;
}
-.v-table-borderless .v-table-scrollposition span {
+.#{$name}-borderless .#{$name}-scrollposition span {
top: 0;
}
/* row in column selector */
/* Strong style */
-.v-table-strong .v-table-header-wrap,
-.v-table-strong .v-table-header-drag {
+.#{$name}-strong .#{$name}-header-wrap,
+.#{$name}-strong .#{$name}-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;
}
-.v-table-strong .v-table-body {
+.#{$name}-strong .#{$name}-body {
border-top-color: #2b3033;
}
-.v-table-strong .v-table-resizer {
+.#{$name}-strong .#{$name}-resizer {
border-right-color: #1c1f21;
}
-.v-table-strong .v-table-header-cell-asc .v-table-sort-indicator {
+.#{$name}-strong .#{$name}-header-cell-asc .#{$name}-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; */
}
-.v-table-strong .v-table-header-cell-desc .v-table-sort-indicator {
+.#{$name}-strong .#{$name}-header-cell-desc .#{$name}-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; */
}
-.v-table-strong .v-table-column-selector {
+.#{$name}-strong .#{$name}-column-selector {
background-image: url(img/col-sel.png); /** sprite-ref: verticals */
}
-.v-table-strong .v-table-column-selector:active {
+.#{$name}-strong .#{$name}-column-selector:active {
background-image: url(img/col-sel-pressed.png); /** sprite-ref: verticals */
}
-.v-table-strong .v-table-focus-slot-left,
-.v-table-strong .v-table-focus-slot-right {
+.#{$name}-strong .#{$name}-focus-slot-left,
+.#{$name}-strong .#{$name}-focus-slot-right {
border-color: #9ca1a5;
}
/* Table on black background (normal style) */
-.black .v-table-header-wrap,
-.black .v-table-header-drag {
+.black .#{$name}-header-wrap,
+.black .#{$name}-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 .v-table-resizer {
+.black .#{$name}-resizer {
border-right-color: #252729;
}
-.black .v-table-header-cell-asc .v-table-sort-indicator {
+.black .#{$name}-header-cell-asc .#{$name}-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 .v-table-header-cell-desc .v-table-sort-indicator {
+.black .#{$name}-header-cell-desc .#{$name}-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 .v-table-column-selector {
+.black .#{$name}-column-selector {
background-image: url(img/col-sel-black.png); /** sprite-ref: black-verticals */
}
-.black .v-table-column-selector:active {
+.black .#{$name}-column-selector:active {
background-image: url(img/col-sel-black-pressed.png); /** sprite-ref: black-verticals */
}
-.black .v-table-focus-slot-left,
-.black .v-table-focus-slot-right {
+.black .#{$name}-focus-slot-left,
+.black .#{$name}-focus-slot-right {
border-color: #9ca1a5;
}
-.black .v-table-body {
+.black .#{$name}-body {
border-color: #252729;
background: transparent;
}
-.black .v-table-cell-content {
+.black .#{$name}-cell-content {
border-right-color: #252729;
border-bottom: 1px solid #252729;
}
-.black .v-table-cell-wrapper {
+.black .#{$name}-cell-wrapper {
padding-bottom: 2px;
}
-.black .v-table-row-odd {
+.black .#{$name}-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 .v-table .v-selected .v-table-cell-content {
+.black .#{$name} .v-selected .#{$name}-cell-content {
border-bottom: 1px solid #4d749f;
}
/* Borderless style */
-.v-table-borderless .v-table-header-wrap,
-.v-table-borderless .v-table-body {
+.#{$name}-borderless .#{$name}-header-wrap,
+.#{$name}-borderless .#{$name}-body {
border: none;
}
-@mixin reindeer-tabsheet-borderless-style {
+@mixin reindeer-tabsheet-borderless-style($name : v-tabsheet-borderless) {
-.v-tabsheet-borderless .v-tabsheet-tabitemcell-first {
+.#{$name} .v-tabsheet-tabitemcell-first {
padding-left: 7px;
background: url(img/framed/tab-first-left.png) no-repeat -3px 0;
}
-.v-tabsheet-borderless .v-tabsheet-tabitemcell-selected-first {
+.#{$name} .v-tabsheet-tabitemcell-selected-first {
background: url(img/framed/tab-first-left-sel.png) no-repeat -3px 0;
}
-.v-tabsheet-borderless .v-tabsheet-spacertd div {
+.#{$name} .v-tabsheet-spacertd div {
margin-right: 0;
}
-.v-tabsheet-borderless .v-tabsheet-spacertd {
+.#{$name} .v-tabsheet-spacertd {
background: transparent;
}
-.v-tabsheet-borderless .v-tabsheet-content {
+.#{$name} .v-tabsheet-content {
border: none;
}
-.v-tabsheet-borderless .v-tabsheet-deco {
+.#{$name} .v-tabsheet-deco {
height: 0;
border-top: none;
}
-@mixin reindeer-tabsheet-hover-closable-style {
+@mixin reindeer-tabsheet-hover-closable-style($name : v-tabsheet) {
-.v-tabsheet-tabs-hover-closable .v-tabsheet-caption-close {
+.#{$name}-tabs-hover-closable .#{$name}-caption-close {
visibility: hidden;
}
-.v-tabsheet-tabs-hover-closable .v-tabsheet-tabitem:hover .v-tabsheet-caption-close {
+.#{$name}-tabs-hover-closable .#{$name}-tabitem:hover .#{$name}-caption-close {
visibility: visible;
}
-@mixin reindeer-tabsheet-minimal-style {
+@mixin reindeer-tabsheet-minimal-style($name : v-tabsheet) {
/**
* Tabsheet "minimal" style --------------
*/
/* Minimal tabsheet on blue background */
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-spacertd div,
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-tabitem,
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected {
+.blue .#{$name}-tabs-minimal .#{$name}-spacertd div,
+.blue .#{$name}-tabs-minimal .#{$name}-tabitem,
+.blue .#{$name}-tabs-minimal .#{$name}-tabitem-selected {
border-color: #7c8a91;
}
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-caption-close {
+.blue .#{$name}-tabs-minimal .#{$name}-caption-close {
color: #7c8a91;
}
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover {
+.blue .#{$name}-tabs-minimal .#{$name}-caption-close:hover {
color: #BCD3DE;
background: #778d98;
}
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active {
+.blue .#{$name}-tabs-minimal .#{$name}-caption-close:active {
background: #4f6874;
}
/* Default & white styles */
-.v-tabsheet-tabs-minimal .v-tabsheet-spacertd div,
-.white .v-tabsheet-tabs-minimal .v-tabsheet-spacertd div {
+.#{$name}-tabs-minimal .#{$name}-spacertd div,
+.white .#{$name}-tabs-minimal .#{$name}-spacertd div {
border-bottom: 1px solid #bfbfbf;
height: auto;
background: transparent;
}
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitemcell,
-.v-tabsheet-tabs-minimal .v-tabsheet-spacertd {
+.#{$name}-tabs-minimal .#{$name}-tabitemcell,
+.#{$name}-tabs-minimal .#{$name}-spacertd {
height: auto;
background: transparent;
padding-left: 0;
}
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem,
-.white .v-tabsheet-tabs-minimal .v-tabsheet-tabitem {
+.#{$name}-tabs-minimal .#{$name}-tabitem,
+.white .#{$name}-tabs-minimal .#{$name}-tabitem {
border: none;
border-bottom: 1px solid #bfbfbf;
color: #4d748f;
background: transparent;
text-shadow: none;
}
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem .v-caption {
+.#{$name}-tabs-minimal .#{$name}-tabitem .v-caption {
padding: 5px 16px;
height: auto;
background: transparent;
}
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitemcell-selected {
+.#{$name}-tabs-minimal .#{$name}-tabitemcell-selected {
background: transparent;
}
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected,
-.white .v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected {
+.#{$name}-tabs-minimal .#{$name}-tabitem-selected,
+.white .#{$name}-tabs-minimal .#{$name}-tabitem-selected {
background: transparent;
border: 1px solid #bfbfbf;
border-bottom: none;
color: #222;
}
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected .v-caption {
+.#{$name}-tabs-minimal .#{$name}-tabitem-selected .v-caption {
background: transparent;
padding: 4px 15px 6px 15px;
}
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem .v-caption-closable,
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected .v-caption-closable {
+.#{$name}-tabs-minimal .#{$name}-tabitem .v-caption-closable,
+.#{$name}-tabs-minimal .#{$name}-tabitem-selected .v-caption-closable {
padding-right: 6px;
}
-.v-tabsheet-content-minimal,
-.white .v-tabsheet-content-minimal {
+.#{$name}-content-minimal,
+.white .#{$name}-content-minimal {
border: none;
}
-.v-tabsheet-content-minimal .v-tabsheet-tabsheetpanel {
+.#{$name}-content-minimal .#{$name}-tabsheetpanel {
background: transparent;
}
-.v-tabsheet-deco-minimal,
-.white .v-tabsheet-deco-minimal {
+.#{$name}-deco-minimal,
+.white .#{$name}-deco-minimal {
height: 0;
border: none;
}
-.v-tabsheet-tabcontainer-minimal .v-tabsheet-scroller {
+.#{$name}-tabcontainer-minimal .#{$name}-scroller {
margin-top: -20px;
height: 17px;
padding: 0;
border: none;
background: transparent;
}
-.v-tabsheet-tabcontainer-minimal .v-tabsheet-scroller button {
+.#{$name}-tabcontainer-minimal .#{$name}-scroller button {
margin-top: 0;
}
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close,
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover,
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active {
+.#{$name}-tabs-minimal .#{$name}-caption-close,
+.#{$name}-tabs-minimal .#{$name}-caption-close:hover,
+.#{$name}-tabs-minimal .#{$name}-caption-close:active {
text-indent: 0;
background: transparent;
margin-left: 3px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close {
+.#{$name}-tabs-minimal .#{$name}-caption-close {
margin-top: 1px;
}
-.v-ff .v-tabsheet-tabs-minimal .v-tabsheet-caption-close {
+.v-ff .#{$name}-tabs-minimal .#{$name}-caption-close {
margin-top: -15px;
}
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover,
-.white .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover {
+.#{$name}-tabs-minimal .#{$name}-caption-close:hover,
+.white .#{$name}-tabs-minimal .#{$name}-caption-close:hover {
color: #fff;
background: #aaa;
}
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active,
-.white .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active {
+.#{$name}-tabs-minimal .#{$name}-caption-close:active,
+.white .#{$name}-tabs-minimal .#{$name}-caption-close:active {
background: #777;
}
/* Minimal tabsheet on black background */
-.black .v-tabsheet-tabs-minimal .v-tabsheet-spacertd div,
-.black .v-tabsheet-tabs-minimal .v-tabsheet-tabitem,
-.black .v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected {
+.black .#{$name}-tabs-minimal .#{$name}-spacertd div,
+.black .#{$name}-tabs-minimal .#{$name}-tabitem,
+.black .#{$name}-tabs-minimal .#{$name}-tabitem-selected {
border-color: #3e4044;
color: #6a7f89;
}
-.black .v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected {
+.black .#{$name}-tabs-minimal .#{$name}-tabitem-selected {
color: #c9ccce;
}
-.black .v-tabsheet-content-minimal,
-.black .v-tabsheet-content-bar {
+.black .#{$name}-content-minimal,
+.black .#{$name}-content-bar {
color: #c9ccce;
text-shadow: #000 0 0 1px;
}
-.black .v-tabsheet-tabs-minimal .v-tabsheet-caption-close {
+.black .#{$name}-tabs-minimal .#{$name}-caption-close {
color: #72787c;
}
-.black .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover {
+.black .#{$name}-tabs-minimal .#{$name}-caption-close:hover {
color: #1d2021;
background: #4d5154;
}
-.black .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active {
+.black .#{$name}-tabs-minimal .#{$name}-caption-close:active {
background: #626669;
}
-@mixin reindeer-tabsheet-normal-style {
+@mixin reindeer-tabsheet-normal-style($name : v-tabsheet) {
/* Default Tabsheet styles */
-.v-tabsheet-tabitemcell,
-.v-tabsheet-spacertd {
+.#{$name}-tabitemcell,
+.#{$name}-spacertd {
height: 32px;
}
-.v-tabsheet-tabitemcell {
+.#{$name}-tabitemcell {
background: no-repeat;
background-image: url(img/framed/tab-left.png); /** sprite-ref: verticals */
padding-left: 3px;
}
-.v-tabsheet-tabitemcell-first {
+.#{$name}-tabitemcell-first {
padding-left: 10px;
background-image: url(img/framed/tab-first-left.png); /** sprite-ref: verticals */
}
-.v-tabsheet-tabitem,
-.v-tabsheet-spacertd div {
+.#{$name}-tabitem,
+.#{$name}-spacertd div {
border: none;
height: 32px;
background: transparent repeat-x;
color: #222;
text-shadow: #fff 0 1px 0;
}
-.v-tabsheet-tabitem .v-caption {
+.#{$name}-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;
}
-.v-tabsheet-tabitem .v-caption-closable {
+.#{$name}-tabitem .v-caption-closable {
padding-right: 0;
padding-left: 17px;
}
-.v-tabsheet-tabitem .v-captiontext {
+.#{$name}-tabitem .v-captiontext {
height: 16px;
line-height: 16px;
vertical-align:baseline;
}
-.v-tabsheet-caption-close {
+.#{$name}-caption-close {
float: right;
width: 19px;
height: 18px;
font-size: 14px;
font-weight: normal;
}
-.v-tabsheet-caption-close:hover {
+.#{$name}-caption-close:hover {
background-image: url(img/close-btn-hover.png); /** sprite-ref: verticals */
}
-.v-tabsheet-caption-close:active {
+.#{$name}-caption-close:active {
background-image: url(img/close-btn-pressed.png); /** sprite-ref: verticals */
}
-.v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+.#{$name}-tabitem-selected .#{$name}-caption-close {
background-image: url(img/close-btn-sel.png); /** sprite-ref: verticals */
}
-.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover {
+.#{$name}-tabitem-selected .#{$name}-caption-close:hover {
background-image: url(img/close-btn-sel-hover.png); /** sprite-ref: verticals */
}
-.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active {
+.#{$name}-tabitem-selected .#{$name}-caption-close:active {
background-image: url(img/close-btn-sel-pressed.png); /** sprite-ref: verticals */
}
-.v-tabsheet-tabitemcell-selected {
+.#{$name}-tabitemcell-selected {
background-image: url(img/framed/tab-left-sel.png); /** sprite-ref: verticals */
}
-.v-tabsheet-tabitemcell-selected-first {
+.#{$name}-tabitemcell-selected-first {
background-image: url(img/framed/tab-first-left-sel.png); /** sprite-ref: verticals */
}
-.v-tabsheet-tabitem-selected {
+.#{$name}-tabitem-selected {
background-image: url(img/framed/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
color: #232930;
}
-.v-tabsheet-tabitem-selected .v-caption {
+.#{$name}-tabitem-selected .v-caption {
background-image: url(img/framed/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
}
-.v-tabsheet-spacertd div {
+.#{$name}-spacertd div {
margin-right: 4px;
}
-.v-tabsheet-spacertd {
+.#{$name}-spacertd {
background: transparent no-repeat right top;
background-image: url(img/framed/tab-spacer-right.png); /** sprite-ref: verticals; sprite-alignment: right */
}
-.blue .v-tabsheet-content {
+.blue .#{$name}-content {
border-color: #a8bcc5;
}
-.v-tabsheet-content,
-.white .v-tabsheet-content {
+.#{$name}-content,
+.white .#{$name}-content {
border: 1px solid #dcdcdc;
border-bottom: none;
border-top: none;
color: #222;
text-shadow: none;
}
-.v-tabsheet-tabsheetpanel {
+.#{$name}-tabsheetpanel {
background: #fff;
}
-.v-sa .v-tabsheet-content {
+.v-sa .#{$name}-content {
border-color: rgba(0,0,0,.1);
}
-.blue .v-tabsheet-deco {
+.blue .#{$name}-deco {
border-color: #92a3ac;
background: #adc2cd;
}
-.v-tabsheet-deco,
-.white .v-tabsheet-deco {
+.#{$name}-deco,
+.white .#{$name}-deco {
height: 1px;
border-top: 1px solid #bebebe;
background: #e2e2e2;
overflow: hidden;
}
-.v-sa .v-tabsheet-deco {
+.v-sa .#{$name}-deco {
border-top-color: rgba(0,0,0,.1);
background: rgba(0,0,0,.08);
}
/* Icons & error indicators */
-.v-tabsheet-tabs .v-icon,
-.v-tabsheet-tabs .v-captiontext,
-.v-tabsheet-tabs .v-errorindicator {
+.#{$name}-tabs .v-icon,
+.#{$name}-tabs .v-captiontext,
+.#{$name}-tabs .v-errorindicator {
display: inline;
float: none;
}
-.v-sa .v-tabsheet-tabs .v-captiontext {
+.v-sa .#{$name}-tabs .v-captiontext {
display: inline-block;
}
-.v-tabsheet-tabs .v-icon {
+.#{$name}-tabs .v-icon {
width: 16px !important;
height: 16px !important;
}
-.v-tabsheet-tabs .v-errorindicator {
+.#{$name}-tabs .v-errorindicator {
display: inline-block;
width: 13px;
height: 16px;
background: transparent url(../common/icons/error.png) no-repeat 50%;
}
-.v-ie .v-tabsheet-tabs .v-errorindicator {
+.v-ie .#{$name}-tabs .v-errorindicator {
zoom: 1;
display: inline;
}
-.v-ie8 .v-tabsheet-tabs .v-errorindicator,
-.v-ie9 .v-tabsheet-tabs .v-errorindicator {
+.v-ie8 .#{$name}-tabs .v-errorindicator,
+.v-ie9 .#{$name}-tabs .v-errorindicator {
display: inline-block;
}
-@mixin reindeer-tabsheet-scroller {
+@mixin reindeer-tabsheet-scroller($name : v-tabsheet) {
/* Tabsheet scroller styles */
-.v-tabsheet-scroller {
+.#{$name}-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;
}
-.v-tabsheet-scroller button {
+.#{$name}-scroller button {
margin-top: 7px;
}
-.v-tabsheet-scrollerPrev,
-.v-tabsheet-scrollerNext,
-.v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-scrollerNext-disabled {
+.#{$name}-scrollerPrev,
+.#{$name}-scrollerNext,
+.#{$name}-scrollerPrev-disabled,
+.#{$name}-scrollerNext-disabled {
border: none;
background: transparent;
background-image: url(img/tab-prev.png); /** sprite-ref: verticals */
height: 17px;
overflow: hidden;
}
-.v-tabsheet-scroller button::-moz-focus-inner {
+.#{$name}-scroller button::-moz-focus-inner {
border: none;
}
-.v-tabsheet-scrollerNext {
+.#{$name}-scrollerNext {
background-image: url(img/tab-next.png); /** sprite-ref: verticals */
}
-.v-tabsheet-scrollerPrev:active {
+.#{$name}-scrollerPrev:active {
background-image: url(img/tab-prev-pressed.png); /** sprite-ref: verticals */
}
-.v-tabsheet-scrollerNext:active {
+.#{$name}-scrollerNext:active {
background-image: url(img/tab-next-pressed.png); /** sprite-ref: verticals */
}
-.v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-scrollerPrev-disabled:active {
+.#{$name}-scrollerPrev-disabled,
+.#{$name}-scrollerPrev-disabled:active {
background-image: url(img/tab-prev-disabled.png); /** sprite-ref: verticals */
opacity: 1;
filter: none;
}
-.v-tabsheet-scrollerNext-disabled,
-.v-tabsheet-scrollerNext-disabled:active {
+.#{$name}-scrollerNext-disabled,
+.#{$name}-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 {
+@mixin reindeer-tabsheet-selected-closable-style($name : v-tabsheet) {
-.v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem .v-tabsheet-caption-close,
-.v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem:hover .v-tabsheet-caption-close {
+.#{$name}-tabs-selected-closable .#{$name}-tabitem .#{$name}-caption-close,
+.#{$name}-tabs-selected-closable .#{$name}-tabitem:hover .#{$name}-caption-close {
visibility: hidden;
}
-.v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem-selected .v-tabsheet-caption-close,
-.v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem-selected:hover .v-tabsheet-caption-close {
+.#{$name}-tabs-selected-closable .#{$name}-tabitem-selected .#{$name}-caption-close,
+.#{$name}-tabs-selected-closable .#{$name}-tabitem-selected:hover .#{$name}-caption-close {
visibility: visible;
}
-@mixin reindeer-tabsheet-small-style {
+@mixin reindeer-tabsheet-small-style($name : v-tabsheet) {
/**
* Tabsheet bar style ---------------
*/
-.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell,
-.v-tabsheet-tabs-bar .v-tabsheet-spacertd {
+.#{$name}-tabs-bar .#{$name}-tabitemcell,
+.#{$name}-tabs-bar .#{$name}-spacertd {
height: 20px;
}
-.v-tabsheet-tabs-bar .v-tabsheet-spacertd {
+.#{$name}-tabs-bar .#{$name}-spacertd {
background: transparent;
}
-.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell {
+.#{$name}-tabs-bar .#{$name}-tabitemcell {
background-image: url(img/bar/tab-left.png); /** sprite-ref: verticals */
}
-.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell-first {
+.#{$name}-tabs-bar .#{$name}-tabitemcell-first {
padding-left: 6px;
background-image: url(img/bar/tab-first-left.png); /** sprite-ref: verticals */
}
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem,
-.v-tabsheet-tabs-bar .v-tabsheet-spacertd div {
+.#{$name}-tabs-bar .#{$name}-tabitem,
+.#{$name}-tabs-bar .#{$name}-spacertd div {
height: 20px;
background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
font-size: 11px;
margin: 0;
}
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem .v-caption {
+.#{$name}-tabs-bar .#{$name}-tabitem .v-caption {
height: 18px;
background-image: url(img/bar/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */
padding: 2px 12px 0 10px;
}
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem .v-caption-closable,
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-caption-closable {
+.#{$name}-tabs-bar .#{$name}-tabitem .v-caption-closable,
+.#{$name}-tabs-bar .#{$name}-tabitem-selected .v-caption-closable {
padding-right: 8px;
padding-left: 14px;
}
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close,
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close:hover,
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close:active {
+.#{$name}-tabs-bar .#{$name}-caption-close,
+.#{$name}-tabs-bar .#{$name}-caption-close:hover,
+.#{$name}-tabs-bar .#{$name}-caption-close:active {
text-indent: 0;
background: transparent;
margin-left: 3px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close {
+.#{$name}-tabs-bar .#{$name}-caption-close {
margin-top: 1px;
}
-.v-ff .v-tabsheet-tabs-bar .v-tabsheet-caption-close {
+.v-ff .#{$name}-tabs-bar .#{$name}-caption-close {
margin-top: -14px;
}
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close:hover {
+.#{$name}-tabs-bar .#{$name}-caption-close:hover {
background: #bfbfbf;
-webkit-box-shadow: 0 1px 0 #fff;
}
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close:active {
+.#{$name}-tabs-bar .#{$name}-caption-close:active {
background: #a9a9a9;
}
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close {
color: #404142;
}
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover {
+.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close:hover {
background: #5e666e;
color: #fff;
text-shadow: 0 -1px 0 #222;
}
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active {
+.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close:active {
background: #404142;
}
-.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell-selected {
+.#{$name}-tabs-bar .#{$name}-tabitemcell-selected {
background-image: url(img/bar/tab-left-sel.png); /** sprite-ref: verticals */
}
-.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell-selected-first {
+.#{$name}-tabs-bar .#{$name}-tabitemcell-selected-first {
background-image: url(img/bar/tab-first-left-sel.png); /** sprite-ref: verticals */
}
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected {
+.#{$name}-tabs-bar .#{$name}-tabitem-selected {
background-image: url(img/bar/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
color: #232930;
}
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-caption {
+.#{$name}-tabs-bar .#{$name}-tabitem-selected .v-caption {
background-image: url(img/bar/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
}
-.v-tabsheet-tabcontainer-bar .v-tabsheet-scroller {
+.#{$name}-tabcontainer-bar .#{$name}-scroller {
margin-top: -20px;
height: 19px;
border-right: none;
background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
-.v-tabsheet-tabcontainer-bar .v-tabsheet-scroller button {
+.#{$name}-tabcontainer-bar .#{$name}-scroller button {
margin-top: 1px;
}
-.v-tabsheet-content-bar,
-.white .v-tabsheet-content-bar {
+.#{$name}-content-bar,
+.white .#{$name}-content-bar {
border: none;
}
-.v-tabsheet-content-bar .v-tabsheet-tabsheetpanel {
+.#{$name}-content-bar .#{$name}-tabsheetpanel {
background: transparent;
}
-.v-tabsheet-deco-bar,
-.white .v-tabsheet-deco-bar {
+.#{$name}-deco-bar,
+.white .#{$name}-deco-bar {
height: 0;
border: none;
}
@import "tabsheet-hover-closable-style.scss";
@mixin reindeer-tabsheet {
-
+ // TODO use $exclude
@include reindeer-tabsheet-normal-style;
@include reindeer-tabsheet-scroller;
@include reindeer-tabsheet-borderless-style;
-@mixin reindeer-textfield {
+@mixin reindeer-textfield($name : v-textfield) {
/* Textfield on blue background */
-.blue .v-textfield,
+.blue .#{$name},
.blue .v-textarea {
border-color: #92a2aa;
border-top-color: #7c8a90;
border-bottom-color: #a1b3bc;
}
/* Default & white background */
-.v-textfield,
+.#{$name},
.v-textarea,
-.white .v-textfield,
+.white .#{$name},
.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.v-textfield,
-.v-window input.v-textfield,
+.v-app input.#{$name},
+.v-window input.#{$name},
.v-app textarea.v-textarea,
.v-window textarea.v-textarea {
padding: 3px 3px 4px;
}
-.v-app input.v-textfield.v-widget,
-.v-window input.v-textfield.v-widget {
+.v-app input.#{$name}.v-widget,
+.v-window input.#{$name}.v-widget {
height: 24px;
}
-.v-app .v-textfield-focus,
-.v-window .v-textfield-focus,
-.v-popupview-popup .v-textfield-focus,
+.v-app .#{$name}-focus,
+.v-window .#{$name}-focus,
+.v-popupview-popup .#{$name}-focus,
.v-app .v-textarea-focus,
.v-window .v-textarea-focus,
.v-popupview-popup .v-textarea-focus {
outline: none;
background-color: #fff;
}
-input.v-textfield-prompt,
+input.#{$name}-prompt,
textarea.v-textarea-prompt {
font-style: normal;
color: #999;
}
/* Small style textfield */
-.v-app input.v-textfield-small {
+.v-app input.#{$name}-small {
font-size: 11px;
line-height: normal;
height: auto;
.v-app textarea.v-textarea-small {
font-size: 11px;
}
-.v-app .v-table input.v-textfield.v-widget,
-.v-window .v-table input.v-textfield.v-widget {
+.v-app .v-table input.#{$name}.v-widget,
+.v-window .v-table input.#{$name}.v-widget {
padding: 1px 2px;
height: auto;
line-height: normal;
}
-.v-table-cell-wrapper > input.v-textfield {
+.v-table-cell-wrapper > input.#{$name} {
margin-top: -2px;
margin-bottom: -2px;
}
/* Textfield on black background */
-.black .v-textfield,
+.black .#{$name},
.black .v-textarea {
border-color: #38393a;
border-top-color: #2c2d2e;
.black .v-textarea {
background-image: none;
}
-.v-app .black .v-textfield-focus,
-.v-window-black .v-textfield-focus,
-.v-window .black .v-textfield-focus,
-.v-popupview-popup .black .v-textfield-focus,
+.v-app .black .#{$name}-focus,
+.v-window-black .#{$name}-focus,
+.v-window .black .#{$name}-focus,
+.v-popupview-popup .black .#{$name}-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.v-textfield-prompt {
+.black input.#{$name}-prompt {
color: #5f6366;
}
/* Readonly */
-input.v-textfield-readonly,
-.black input.v-textfield-readonly,
+input.#{$name}-readonly,
+.black input.#{$name}-readonly,
textarea.v-textarea-readonly,
.black textarea.v-textarea-readonly {
border: none;
-@mixin reindeer-tree {
+@mixin reindeer-tree($name : v-tree) {
-.v-tree-node {
+.#{$name}-node {
background: transparent url(img/arrows.png) no-repeat 6px -10px;
}
-.v-tree-node-expanded {
+.#{$name}-node-expanded {
background-position: -7px 5px;
}
-.v-tree-node-caption {
+.#{$name}-node-caption {
margin-left: 16px;
padding-bottom: 1px;
}
-.v-tree-node span {
+.#{$name}-node span {
padding: 1px 2px;
display: inline-block;
}
-.v-tree-node-selected span {
+.#{$name}-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;
}
-.v-tree-node-children {
+.#{$name}-node-children {
padding-left: 16px;
}
-.v-tree-node-caption.v-tree-node-focused span{
+.#{$name}-node-caption.#{$name}-node-focused span{
padding-left: 1px;
padding-top: 0px;
padding-bottom: 0px;
}
-.v-tree-node-focused span{
+.#{$name}-node-focused span{
border: 1px dotted black;
}
/***************************************
* Drag'n'drop styles
***************************************/
-.v-tree .v-tree-node-drag-top {
+.#{$name} .#{$name}-node-drag-top {
background-position: 6px -11px;
}
-.v-tree .v-tree-node-drag-top.v-tree-node-expanded {
+.#{$name} .#{$name}-node-drag-top.#{$name}-node-expanded {
background-position: -7px 4px;
}
-.v-tree-connectors .v-tree-node-drag-top,
-.v-tree-connectors .v-tree-node-expanded.v-tree-node-drag-top {
+.#{$name}-connectors .#{$name}-node-drag-top,
+.#{$name}-connectors .#{$name}-node-expanded.#{$name}-node-drag-top {
background-position: 2px -53px;
}
-.v-tree-connectors .v-tree-node-drag-top.v-tree-node-leaf {
+.#{$name}-connectors .#{$name}-node-drag-top.#{$name}-node-leaf {
background-position: 2px 50%;
}
-@mixin reindeer-window {
+@mixin reindeer-window($name : v-window) {
-.v-window {
+.#{$name} {
background: transparent;
}
-.v-window-wrap {
+.#{$name}-wrap {
border: 1px solid #808386;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-.v-sa .v-window-wrap,
-.v-op .v-window-wrap {
+.v-sa .#{$name}-wrap,
+.v-op .#{$name}-wrap {
border-color: rgba(0,0,0,.2);
}
-.v-window-outerheader {
+.#{$name}-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 */
}
-.v-window-header {
+.#{$name}-header {
font-weight: bold;
font-size: 12px;
line-height: normal;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
}
-.v-window-error .v-window-header {
+.#{$name}-error .#{$name}-header {
padding-left: 13px;
background: transparent url(../common/icons/error.png) no-repeat 0 50%;
}
-.v-window-resizebox {
+.#{$name}-resizebox {
width: 15px;
height: 15px;
cursor: se-resize;
background: transparent;
background-image: url(img/resize.png); /** sprite-ref: verticals */
}
-.v-window-footer {
+.#{$name}-footer {
background-color:white;
background-repeat: repeat-x;
background-image: url(img/footer-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
height: 15px;
}
-.v-window-closebox {
+.#{$name}-closebox {
top: 12px;
right: 10px;
width: 15px;
background: transparent;
background-image: url(img/close.png); /** sprite-ref: verticals */
}
-.v-window-closebox:hover {
+.#{$name}-closebox:hover {
background-image: url(img/close-hover.png); /** sprite-ref: verticals */
}
-.v-window-closebox:active {
+.#{$name}-closebox:active {
background-image: url(img/close-pressed.png); /** sprite-ref: verticals */
}
-.v-window-contents {
+.#{$name}-contents {
background: #fff;
}
-.v-window-modalitycurtain {
+.#{$name}-modalitycurtain {
background: #56595b;
}
Light style window -----------------------------
**/
-.v-window-light .v-window-outerheader {
+.#{$name}-light .#{$name}-outerheader {
background: transparent;
padding: 15px 32px 0 18px;
height: 23px;
}
-.v-window-light .v-window-header {
+.#{$name}-light .#{$name}-header {
font-size: 16px;
color: #292e34;
text-shadow: none;
}
-.v-window-light .v-window-resizebox {
+.#{$name}-light .#{$name}-resizebox {
width: 12px;
height: 12px;
background-image: url(img/resize-light.png); /** sprite-ref: verticals */
}
-.v-window-light .v-window-footer {
+.#{$name}-light .#{$name}-footer {
background: transparent;
height: 12px;
}
-.v-window-light .v-window-closebox {
+.#{$name}-light .#{$name}-closebox {
right: 1px;
top: 17px;
width: 19px;
height: 15px;
background-image: url(img/close-light.png); /** sprite-ref: verticals */
}
-.v-window-light .v-window-closebox:hover {
+.#{$name}-light .#{$name}-closebox:hover {
background-image: url(img/close-light-hover.png); /** sprite-ref: verticals */
}
-.v-window-light .v-window-closebox:active {
+.#{$name}-light .#{$name}-closebox:active {
background-image: url(img/close-light-pressed.png); /** sprite-ref: verticals */
}
-.v-window-light .v-window-contents {
+.#{$name}-light .#{$name}-contents {
background: transparent;
}
/* This must be the last sprite added to the verticals-sprite image */
-.v-window-light .v-window-wrap2 {
+.#{$name}-light .#{$name}-wrap2 {
background: #f7f7f8 repeat-x;
background-image: url(img/content-bg-light.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
Black style window -----------------------------
**/
-.v-window-black .v-window-wrap {
+.#{$name}-black .#{$name}-wrap {
border-color: #2e3030;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
overflow: hidden;
}
-.v-sa .v-window-black .v-window-wrap,
-.v-op .v-window-black .v-window-wrap {
+.v-sa .#{$name}-black .#{$name}-wrap,
+.v-op .#{$name}-black .#{$name}-wrap {
border-color: rgba(0,0,0,.8);
}
-.v-window-black .v-window-wrap2 {
+.#{$name}-black .#{$name}-wrap2 {
background-color: #1d2021;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
-.v-sa .v-window-black .v-window-wrap2,
-.v-op .v-window-black .v-window-wrap2 {
+.v-sa .#{$name}-black .#{$name}-wrap2,
+.v-op .#{$name}-black .#{$name}-wrap2 {
background-color: rgba(29,32,33,.9);
}
-.v-window-black .v-window-outerheader {
+.#{$name}-black .#{$name}-outerheader {
height: auto;
padding: 7px 14px;
height: 15px;
overflow: hidden;
border: none;
}
-.v-window-black .v-window-header {
+.#{$name}-black .#{$name}-header {
font-size: 12px;
font-weight: normal;
color: #dddfe1;
}
-.v-window-black .v-window-closebox {
+.#{$name}-black .#{$name}-closebox {
top: 8px;
}
-.v-window-black .v-window-footer {
+.#{$name}-black .#{$name}-footer {
background: transparent;
border: none;
height: 14px;
}
-.v-window-black .v-window-resizebox {
+.#{$name}-black .#{$name}-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 */
-.v-window-black .v-window-contents {
+.#{$name}-black .#{$name}-contents {
border: none;
background: transparent repeat-x;
background-image: url(img/black/content-bg.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
projects / vaadin-framework.git / commitdiff