diff options
Diffstat (limited to 'WebContent/VAADIN/themes/reindeer/button')
6 files changed, 84 insertions, 84 deletions
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-ie.scss b/WebContent/VAADIN/themes/reindeer/button/button-ie.scss index 5bf38c4442..db39bf5677 100644 --- a/WebContent/VAADIN/themes/reindeer/button/button-ie.scss +++ b/WebContent/VAADIN/themes/reindeer/button/button-ie.scss @@ -1,6 +1,6 @@ -@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; } diff --git a/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss b/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss index aebda24cd4..a5ec4422eb 100644 --- a/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss +++ b/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss @@ -1,15 +1,15 @@ -@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; @@ -17,12 +17,12 @@ 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; @@ -31,7 +31,7 @@ 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; } diff --git a/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss b/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss index ffb4d250d3..f4cd726412 100644 --- a/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss +++ b/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss @@ -1,30 +1,30 @@ -@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 */ } @@ -34,32 +34,32 @@ /* 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 */ } diff --git a/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss b/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss index 0ec33e330c..b141156ac8 100644 --- a/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss +++ b/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss @@ -1,37 +1,37 @@ -@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; } @@ -40,31 +40,31 @@ /* 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 */ } diff --git a/WebContent/VAADIN/themes/reindeer/button/button-standard.scss b/WebContent/VAADIN/themes/reindeer/button/button-standard.scss index 4df09bc1bd..f950060d4a 100644 --- a/WebContent/VAADIN/themes/reindeer/button/button-standard.scss +++ b/WebContent/VAADIN/themes/reindeer/button/button-standard.scss @@ -1,29 +1,29 @@ -@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; @@ -33,8 +33,8 @@ 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; @@ -44,7 +44,7 @@ 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; @@ -58,35 +58,35 @@ /************************** * 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; } diff --git a/WebContent/VAADIN/themes/reindeer/button/button.scss b/WebContent/VAADIN/themes/reindeer/button/button.scss index 34a4efda04..9f7e761a1b 100644 --- a/WebContent/VAADIN/themes/reindeer/button/button.scss +++ b/WebContent/VAADIN/themes/reindeer/button/button.scss @@ -10,7 +10,7 @@ @import "button-ie.scss"; @mixin reindeer-button { - + // TODO use $exclude @include reindeer-button-standard; @include reindeer-button-primary-style; @include reindeer-button-small-style; |