diff options
Diffstat (limited to 'WebContent/VAADIN/themes/reindeer/datefield/datefield.scss')
| -rw-r--r-- | WebContent/VAADIN/themes/reindeer/datefield/datefield.scss | 373 |
1 files changed, 373 insertions, 0 deletions
diff --git a/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss new file mode 100644 index 0000000000..17b9d42cdb --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss @@ -0,0 +1,373 @@ +@mixin reindeer-datefield { + +.v-datefield { + overflow: hidden; +} +input.v-textfield-readonly:focus{ + background-color: transparent; +} +.v-datefield-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 { + display: none; +} +.v-datefield-calendarpanel td { + vertical-align: top; +} +td.v-datefield-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 { + display: block; + text-align: center; + height: 16px; + padding: 3px 10px 0 10px; + border-left: 1px solid #efefef; + border-right: 1px solid #d8d8d8; + text-shadow: #fff 0 1px 0; + overflow: hidden; + margin-top: 1px; +} +.v-datefield-year .v-datefield-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 { + width: 124px; +} +.v-datefield-month, +.v-datefield-day, +.v-datefield-full { + min-width: 240px; +} +.v-datefield-popupcalendar { + min-width: 0; + padding-right: 24px; +} +.v-datefield-year .v-datefield-calendarpanel { + width: 100px; +} +td.v-datefield-calendarpanel-prevyear { + text-align: right; +} +td.v-datefield-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 { + width: 24px; + height: 23px; + border: none; + background: transparent; + background-repeat: no-repeat; + background-image: url(img/year-prev.png); /** sprite-ref: verticals */ + overflow: hidden; + padding: 0; + text-indent: -9999px; + outline: none; + -webkit-border-radius: 0; + -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 { + text-indent: 0; + font-size: 1px; +} +.v-datefield-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 { + 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 { + background-image: url(img/year-next-pressed.png); /** sprite-ref: verticals */ +} +.v-datefield-calendarpanel-prevmonth, +.v-datefield-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 { + width: 100%; + height: 21px; + border-left: 1px solid #efefef; + border-right: 1px solid #d8d8d8; + background: transparent; + background-position: center top; + background-image: url(img/month-prev.png); /** sprite-ref: verticals; sprite-alignment: center */ + min-width: 24px; + margin-top: 1px; +} +.v-ie .v-datefield-calendarpanel-prevmonth button, +.v-ie .v-datefield-calendarpanel-nextmonth button { + border: none; +} +.v-datefield-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 { + 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 { + 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 { + text-align: center; + vertical-align: top; +} +.v-datefield-calendarpanel-body table { + border-collapse: collapse; + margin: 0; + padding: 0; + width: 220px; + margin: 0 auto; +} +.v-datefield-calendarpanel-weekdays td { + width: 14.2%; + overflow: hidden; + background-repeat: repeat-x; + background-image: url(img/weekday-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat; sprite-margin-bottom: 3px */ + font-size: 10px; + line-height: normal; + text-transform: uppercase; + color: #eaeff1; + text-shadow: #3b4651 0 -1px 0; + vertical-align: top; +} +.v-datefield-calendarpanel-weeknumbers td { + width: 12.4%; +} +.v-datefield-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 { + background-repeat: no-repeat; + background-image: url(img/weekday-first.png); /** sprite-ref: verticals; sprite-margin-bottom: 3px */ +} +.v-datefield-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 { + background: url(img/weekday-bg.png) repeat-x; + background-position: left top; +} +.v-ie .v-datefield-calendarpanel .v-first { + background: url(img/weekday-first.png) no-repeat; +} +.v-ie .v-datefield-calendarpanel .v-last { + background: url(img/weekday-last.png) no-repeat right top; +} +.v-datefield-calendarpanel-body td { + text-align: right; + height: 19px; +} +.v-datefield-calendarpanel-day, +.v-datefield-calendarpanel-weeknumber, +.v-datefield-calendarpanel-day-today { + padding: 2px 5px 2px 0; + display: block; + margin: 1px 0 0 5px; +} +.v-datefield-calendarpanel-weeknumber { + margin: 0; + padding-top: 4px; + padding-bottom: 3px; +} +.v-datefield-calendarpanel-day-today { + color: #4095d1; + border: none; +} +.v-datefield-calendarpanel-day-selected { + background: #507ba3; + color: #fff; + text-shadow: #3b5b79 0 1px 0; + border-radius: 2px; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; +} +.v-datefield-calendarpanel-time select { + padding: 0; + font-size: 11px; +} +.v-datefield-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 { + background: rgba(255,255,255,.95); +} +.v-has-width > input.v-datefield-textfield { + width: 100%; +} +.v-datefield-year > .v-datefield-textfield { + width: 4.5em; +} +.v-datefield-month > .v-datefield-textfield { + width: 5.5em; +} +.v-datefield-day > .v-datefield-textfield { + width: 6em; +} +.v-datefield-full >.v-datefield-textfield { + width: 12.5em; +} +.v-datefield-popupcalendar input.v-datefield-textfield { + border-right-width: 0; + -moz-border-radius-topright: 0; + -moz-border-radius-bottomright: 0; + -webkit-border-top-right-radius: 0; + -webkit-border-bottom-right-radius: 0; + height: 23px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.v-datefield.v-readonly input.v-datefield-textfield { + border-right-width: 1px; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; +} +.v-datefield-prompt .v-datefield-textfield { + color: #999; + font-style: normal; +} +.v-datefield-popupcalendar .v-datefield-button { + width: 24px; + margin-right: -24px; + height: 23px; + background: transparent; + border: none; + padding: 0; + background-image: url(img/popup-btn.png); /** sprite-ref: verticals */ + cursor: pointer; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} +.v-datefield-popupcalendar .v-datefield-button:active { + background-image: url(img/popup-btn-pressed.png); /** sprite-ref: verticals */ +} + +/* over black background */ +.black .v-datefield-popupcalendar .v-datefield-button { + background-image: url(img/popup-btn-black.png); /** sprite-ref: black-verticals */ +} +.black .v-datefield-popupcalendar .v-datefield-button:active { + background-image: url(img/popup-btn-black-pressed.png); /** sprite-ref: black-verticals */ +} + + +/*------------ +* on black background +*/ + +.black td.v-datefield-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 { + border-left: 1px solid #333638; + border-right: 1px solid #232527; + color: #c9ccce; + text-shadow: #000 0 -1px 0; + 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 { + background-image: url(img/year-prev-black.png); /** sprite-ref: black-verticals */ + height: 21px; +} +.black .v-datefield-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 { + 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 { + background-image: url(img/year-next-black-pressed.png); /** sprite-ref: black-verticals */ +} +.black .v-datefield-calendarpanel-prevmonth, +.black .v-datefield-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 { + 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 { + 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 { + 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 { + 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 { + border: none; +} +.black .v-datefield-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 { + border-top-color: #1b1c1d; +} +.black .v-datefield-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 { + background-image: url(img/weekday-last-black.png); /** sprite-ref: black-verticals; sprite-alignment: right */ +} +.black .v-datefield-prompt .v-datefield-textfield { + color: #5f6366; +} + +}
\ No newline at end of file |