diff options
author | John Ahlroos <john@vaadin.com> | 2012-10-12 16:05:49 +0300 |
---|---|---|
committer | John Ahlroos <john@vaadin.com> | 2012-10-16 13:05:41 +0300 |
commit | 014f752f5620433cc0f429821c6464534227dfc9 (patch) | |
tree | 43293e5b330a752397d68344333f3d9a43d0648c /WebContent/VAADIN/themes | |
parent | 081d5dc14015838be5b358632474997a8b8855ba (diff) | |
download | vaadin-framework-014f752f5620433cc0f429821c6464534227dfc9.tar.gz vaadin-framework-014f752f5620433cc0f429821c6464534227dfc9.zip |
Fixed primary stylename handling for Datefield and InlineDatefield #9903
Change-Id: I4fb460a19a2bf40131172319070edde78851c4a7
Diffstat (limited to 'WebContent/VAADIN/themes')
10 files changed, 114 insertions, 77 deletions
diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss index 8a126476bc..7e2e20a969 100644 --- a/WebContent/VAADIN/themes/base/base.scss +++ b/WebContent/VAADIN/themes/base/base.scss @@ -10,6 +10,7 @@ @import "customcomponent/customcomponent.scss"; @import "customlayout/customlayout.scss"; @import "datefield/datefield.scss"; +@import "inlinedatefield/inlinedatefield.scss"; @import "dragwrapper/dragwrapper.scss"; @import "embedded/embedded.scss"; @import "formlayout/formlayout.scss"; @@ -60,6 +61,7 @@ @include base-customcomponent; @include base-customlayout; @include base-datefield; + @include base-inline-datefield; @include base-dragwrapper; @include base-embedded; @include base-formlayout; diff --git a/WebContent/VAADIN/themes/base/inlinedatefield/inlinedatefield.scss b/WebContent/VAADIN/themes/base/inlinedatefield/inlinedatefield.scss new file mode 100644 index 0000000000..0c42979b6b --- /dev/null +++ b/WebContent/VAADIN/themes/base/inlinedatefield/inlinedatefield.scss @@ -0,0 +1,5 @@ +@mixin base-inline-datefield($name : v-inline-datefield){ + + /* FIXME $name should be passed to the the mixing instead of the default. Fix when SASS compiler works. #9821 */ + @include base-datefield(v-inline-datefield); +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/liferay/datefield/datefield.scss b/WebContent/VAADIN/themes/liferay/datefield/datefield.scss index 4bfc810b52..ad26907a18 100644 --- a/WebContent/VAADIN/themes/liferay/datefield/datefield.scss +++ b/WebContent/VAADIN/themes/liferay/datefield/datefield.scss @@ -1,56 +1,56 @@ -@mixin liferay-datefield { +@mixin liferay-datefield($name : v-datefield) { -.v-datefield-popup { +.#{$name}-popup { padding: 3px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } -.v-datefield-calendarpanel-header { +.#{$name}-calendarpanel-header { height: 28px; } -.v-datefield-calendarpanel:focus { +.#{$name}-calendarpanel:focus { outline: none; } -.v-datefield-calendarpanel-body { +.#{$name}-calendarpanel-body { text-align: right; vertical-align: top; } -.v-datefield-popupcalendar .v-datefield-button { +.#{$name}-popupcalendar .#{$name}-button { background: transparent url(../common/buttons_sprites.png) no-repeat 0 -48px; width: 24px; height: 24px; border: none; } -.v-datefield-popupcalendar .v-datefield-button:hover { +.#{$name}-popupcalendar .#{$name}-button:hover { background-position: 0px -72px; } -.v-datefield-popupcalendar .v-datefield-button:focus { +.#{$name}-popupcalendar .#{$name}-button:focus { background-position: 0px -96px; } -.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-year .v-datefield-calendarpanel-month { +.#{$name}-year .#{$name}-calendarpanel-month { width: 35px; } -.v-datefield-calendarpanel-month { +.#{$name}-calendarpanel-month { background: transparent url(datefield_sprites.png) repeat-x 0 -112px; font-weight: bold; } -span.v-datefield-calendarpanel-month { +span.#{$name}-calendarpanel-month { display: block; text-align: center; background: transparent; @@ -58,15 +58,15 @@ span.v-datefield-calendarpanel-month { padding: 1px 3px 0; } -.v-datefield-calendarpanel-prevyear, -.v-datefield-calendarpanel-nextyear { +.#{$name}-calendarpanel-prevyear, +.#{$name}-calendarpanel-nextyear { width: 22px; } -.v-datefield-calendarpanel-prevyear button, -.v-datefield-calendarpanel-prevmonth button, -.v-datefield-calendarpanel-nextmonth button, -.v-datefield-calendarpanel-nextyear button { +.#{$name}-calendarpanel-prevyear button, +.#{$name}-calendarpanel-prevmonth button, +.#{$name}-calendarpanel-nextmonth button, +.#{$name}-calendarpanel-nextyear button { width: 22px; height: 28px; border: none; @@ -83,42 +83,42 @@ span.v-datefield-calendarpanel-month { 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-prevmonth button { +.#{$name}-calendarpanel-prevmonth button { background-position: 0 -56px; } -.v-datefield-calendarpanel-prevmonth { +.#{$name}-calendarpanel-prevmonth { background: transparent url(datefield_sprites.png) repeat-x 0 -112px; } -.v-datefield-calendarpanel-nextyear button { +.#{$name}-calendarpanel-nextyear button { background-position: 0 -28px; width: 100%; min-width: 22px; } -.v-datefield-calendarpanel-nextmonth button { +.#{$name}-calendarpanel-nextmonth button { background-position: 0 -84px; } -.v-datefield-calendarpanel-nextmonth { +.#{$name}-calendarpanel-nextmonth { background: transparent url(datefield_sprites.png) repeat-x 0 -112px; } -.v-datefield-calendarpanel-prevyear button { +.#{$name}-calendarpanel-prevyear button { width: 100%; min-width: 22px; } -.v-datefield-calendarpanel-day { +.#{$name}-calendarpanel-day { display: block; width: 22px; margin: 0 0 3px 3px; @@ -132,37 +132,37 @@ span.v-datefield-calendarpanel-month { border-radius: 4px; } -.v-datefield-calendarpanel-day-today { +.#{$name}-calendarpanel-day-today { font-weight: bold; } -.v-datefield-calendarpanel-day-selected { +.#{$name}-calendarpanel-day-selected { background: #b5b5b5 url(/html/themes/classic/images/application/state_active_bg.png) repeat-x 0 0; color: #000; border-color: #555; } -.v-datefield-calendarpanel-day-focused { +.#{$name}-calendarpanel-day-focused { outline: 1px dotted #555; } -.v-datefield-calendarpanel-weekdays { +.#{$name}-calendarpanel-weekdays { text-align: center; } -.v-datefield-calendarpanel-weekdays strong { +.#{$name}-calendarpanel-weekdays strong { font-weight: normal; } -.v-datefield-calendarpanel-weeknumber { +.#{$name}-calendarpanel-weeknumber { display: block; border: none; padding: 2px 0 2px 0; margin: 0; } -.v-datefield-calendarpanel-body table { +.#{$name}-calendarpanel-body table { margin: 0 auto; width: 200px; } diff --git a/WebContent/VAADIN/themes/liferay/inlinedatefield/inlinedatefield.scss b/WebContent/VAADIN/themes/liferay/inlinedatefield/inlinedatefield.scss new file mode 100644 index 0000000000..58aa928ee8 --- /dev/null +++ b/WebContent/VAADIN/themes/liferay/inlinedatefield/inlinedatefield.scss @@ -0,0 +1,8 @@ +@mixin liferay-inlinedatefield ($name : v-inline-datefield) { + + @include liferay-datefield(v-inline-datefield); + + .#{$name} { + line-height:19px; /* Override popup datefields line-height:0 to get correct line heights */ + } +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/liferay/liferay.scss b/WebContent/VAADIN/themes/liferay/liferay.scss index 7ec561ffc9..3128e48c76 100644 --- a/WebContent/VAADIN/themes/liferay/liferay.scss +++ b/WebContent/VAADIN/themes/liferay/liferay.scss @@ -7,6 +7,7 @@ @import "contextmenu/contextmenu.scss"; @import "datefield/datefield.scss"; +@import "inlinedatefield/inlinedatefield.scss"; @import "formlayout/formlayout.scss"; @import "menubar/menubar.scss"; @import "notification/notification.scss"; @@ -32,6 +33,7 @@ @include liferay-common; @include liferay-contextmenu; @include liferay-datefield; + @include liferay-inlinedatefield; @include liferay-formlayout; @include liferay-menubar; @include liferay-notification; diff --git a/WebContent/VAADIN/themes/reindeer/inlinedatefield/inlinedatefield.scss b/WebContent/VAADIN/themes/reindeer/inlinedatefield/inlinedatefield.scss new file mode 100644 index 0000000000..19402f8208 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/inlinedatefield/inlinedatefield.scss @@ -0,0 +1,8 @@ +@mixin reindeer-inlinedatefield ($name : v-inline-datefield) { + + @include reindeer-datefield(v-inline-datefield); + + .#{$name} { + line-height:14px; /* Override popup datefields line-height:0 to get correct line heights */ + } +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/reindeer.scss b/WebContent/VAADIN/themes/reindeer/reindeer.scss index e102e99bc5..ef827190b5 100644 --- a/WebContent/VAADIN/themes/reindeer/reindeer.scss +++ b/WebContent/VAADIN/themes/reindeer/reindeer.scss @@ -9,6 +9,7 @@ @import "common/common.scss"; @import "datefield/datefield.scss"; +@import "inlinedatefield/inlinedatefield.scss"; @import "formlayout/formlayout.scss"; @import "label/label.scss"; @import "layouts/layouts.scss"; @@ -39,6 +40,7 @@ @include reindeer-nativebutton; @include reindeer-common; @include reindeer-datefield; + @include reindeer-inlinedatefield; @include reindeer-formlayout; @include reindeer-label; @include reindeer-layouts; diff --git a/WebContent/VAADIN/themes/runo/datefield/datefield.scss b/WebContent/VAADIN/themes/runo/datefield/datefield.scss index 57ad061b65..82dad4a0ac 100644 --- a/WebContent/VAADIN/themes/runo/datefield/datefield.scss +++ b/WebContent/VAADIN/themes/runo/datefield/datefield.scss @@ -1,10 +1,10 @@ -@mixin runo-datefield { +@mixin runo-datefield($name : v-datefield) { -.v-datefield input.v-textfield, -.v-datefield input.v-textfield[type=text] { +.#{$name} input.v-textfield, +.#{$name} input.v-textfield[type=text] { height: 18px; } -.v-datefield-button { +.#{$name}-button { font-size:13px; width: 22px; height: 24px; @@ -14,7 +14,7 @@ background: transparent url(img/open-button.png) no-repeat right 0; vertical-align: top; } -.v-datefield-popup { +.#{$name}-popup { font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif; color: #464f52; font-size: 12px; @@ -25,39 +25,39 @@ -moz-border-radius: 4px; border-radius: 4px; } -.v-datefield-calendarpanel { +.#{$name}-calendarpanel { width: 230px; } -.v-datefield-popup .v-datefield-calendarpanel { +.#{$name}-popup .#{$name}-calendarpanel { width: 200px; } -.v-datefield-year .v-datefield-calendarpanel { +.#{$name}-year .#{$name}-calendarpanel { width: 100px; } -.v-datefield-calendarpanel td { +.#{$name}-calendarpanel td { text-align: right; } -.v-datefield-calendarpanel td span { +.#{$name}-calendarpanel td span { display: block; } -.v-datefield-calendarpanel-header { +.#{$name}-calendarpanel-header { height: 30px; font-size: 13px; } -td.v-datefield-calendarpanel-month { +td.#{$name}-calendarpanel-month { font-weight: bold; text-shadow: 0 1px 0 #fff; width: 150px; } -.v-datefield-calendarpanel-prevyear, -.v-datefield-calendarpanel-nextyear, -.v-datefield-calendarpanel-prevmonth, -.v-datefield-calendarpanel-nextmonth { +.#{$name}-calendarpanel-prevyear, +.#{$name}-calendarpanel-nextyear, +.#{$name}-calendarpanel-prevmonth, +.#{$name}-calendarpanel-nextmonth { width: 16px; } /* Year buttons */ -.v-datefield-calendarpanel .v-button-prevyear, -.v-datefield-calendarpanel .v-button-nextyear { +.#{$name}-calendarpanel .v-button-prevyear, +.#{$name}-calendarpanel .v-button-nextyear { display: block; width: 16px; height: 16px; @@ -67,16 +67,16 @@ td.v-datefield-calendarpanel-month { text-indent: -90000px; margin: 0 auto; } -.v-datefield-calendarpanel .v-button-nextyear { +.#{$name}-calendarpanel .v-button-nextyear { background: transparent url(img/nextyear.png) no-repeat; } -.v-datefield-calendarpanel .v-button-prevyear:hover, -.v-datefield-calendarpanel .v-button-nextyear:hover { +.#{$name}-calendarpanel .v-button-prevyear:hover, +.#{$name}-calendarpanel .v-button-nextyear:hover { background-position: left bottom; } /* Month buttons */ -.v-datefield-calendarpanel .v-button-prevmonth, -.v-datefield-calendarpanel .v-button-nextmonth { +.#{$name}-calendarpanel .v-button-prevmonth, +.#{$name}-calendarpanel .v-button-nextmonth { display: block; width: 11px; height: 16px; @@ -86,42 +86,42 @@ td.v-datefield-calendarpanel-month { text-indent: -90000px; margin: 0 auto; } -.v-datefield-calendarpanel .v-button-nextmonth { +.#{$name}-calendarpanel .v-button-nextmonth { background: transparent url(img/nextmonth.png) no-repeat; } -.v-datefield-calendarpanel .v-button-prevmonth:hover, -.v-datefield-calendarpanel .v-button-nextmonth:hover { +.#{$name}-calendarpanel .v-button-prevmonth:hover, +.#{$name}-calendarpanel .v-button-nextmonth:hover { background-position: left bottom; } -.v-datefield-calendarpanel strong { +.#{$name}-calendarpanel strong { color: #ee5311; display: block; width: 20px; font-size: 12px; } -.v-datefield-calendarpanel-day, -.v-datefield-calendarpanel-weeknumber, -.v-datefield-calendarpanel-day-today { +.#{$name}-calendarpanel-day, +.#{$name}-calendarpanel-weeknumber, +.#{$name}-calendarpanel-day-today { padding: 1px 3px; width: 14px; height: 16px; } -.v-datefield-calendarpanel-day-today { +.#{$name}-calendarpanel-day-today { border: 1px solid #429ce9; width: 12px; height: 14px; } -.v-datefield-calendarpanel-day-entry { +.#{$name}-calendarpanel-day-entry { color: #6a98b5; } -.v-datefield-calendarpanel-day-disabled { +.#{$name}-calendarpanel-day-disabled { font-weight: normal; color: #dddddd; } -.v-datefield-calendarpanel-day-entry.v-datefield-calendarpanel-day-disabled { +.#{$name}-calendarpanel-day-entry.#{$name}-calendarpanel-day-disabled { color: #afd6f8; } -.v-datefield-calendarpanel-day-selected { +.#{$name}-calendarpanel-day-selected { font-weight: bold; width: 14px; height: 16px; @@ -130,18 +130,18 @@ td.v-datefield-calendarpanel-month { background: transparent url(img/selected-bg.png) no-repeat 50% 50%; border: none; } -.v-datefield-time { +.#{$name}-time { font-size: 11px; } -.v-datefield-time .v-select { +.#{$name}-time .v-select { font-size: 10px; padding: 0; margin: 0; } -.v-datefield-rendererror .v-textfield { +.#{$name}-rendererror .v-textfield { background: #ff9999; } -.v-datefield-prompt .v-datefield-textfield { +.#{$name}-prompt .#{$name}-textfield { color: #999; font-style: normal; } diff --git a/WebContent/VAADIN/themes/runo/inlinedatefield/inlinedatefield.scss b/WebContent/VAADIN/themes/runo/inlinedatefield/inlinedatefield.scss new file mode 100644 index 0000000000..ada30fa40e --- /dev/null +++ b/WebContent/VAADIN/themes/runo/inlinedatefield/inlinedatefield.scss @@ -0,0 +1,8 @@ +@mixin runo-inline-datefield($name : v-inline-datefield){ + + @include runo-datefield(v-inline-datefield); + + .#{$name} { + line-height: 18px; /* Override inherited line-height: 0 needed for popup datefield */ + } +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/runo/runo.scss b/WebContent/VAADIN/themes/runo/runo.scss index 6db7c335cb..04f1ec5f13 100644 --- a/WebContent/VAADIN/themes/runo/runo.scss +++ b/WebContent/VAADIN/themes/runo/runo.scss @@ -6,6 +6,7 @@ @import "caption/caption.scss"; @import "common/common.scss"; @import "datefield/datefield.scss"; +@import "inlinedatefield/inlinedatefield.scss"; @import "formlayout/formlayout.scss"; @import "gridlayout/gridlayout.scss"; @import "label/label.scss"; @@ -38,6 +39,7 @@ @include runo-common; @include runo-datefield; + @include runo-inline-datefield; @include runo-formlayout; @include runo-gridlayout; @include runo-label; |