| @mixin base-datefield($primaryStyleName : v-datefield) { |
| |
| .#{$primaryStyleName} { |
| white-space: nowrap; |
| display: inline-block; /* Force minimum width */ |
| } |
| .#{$primaryStyleName}-textfield { |
| vertical-align: top; |
| } |
| .v-ie & .#{$primaryStyleName}-button:after { |
| content: "\200B"; |
| } |
| |
| .#{$primaryStyleName}-button { |
| cursor: pointer; |
| vertical-align: top; |
| } |
| .v-has-width > input.#{$primaryStyleName}-textfield { |
| width: 100%; |
| } |
| |
| .#{$primaryStyleName}-prompt .#{$primaryStyleName}-textfield { |
| color: #999; |
| font-style: italic; |
| } |
| .#{$primaryStyleName} .#{$primaryStyleName}-button-readonly { |
| display: none; |
| } |
| .#{$primaryStyleName}-calendarpanel table { |
| width: 100%; |
| } |
| .#{$primaryStyleName}-calendarpanel td { |
| padding: 0; |
| margin: 0; |
| } |
| .#{$primaryStyleName}-calendarpanel:focus { |
| outline:none; |
| } |
| .#{$primaryStyleName}-calendarpanel-header td { |
| text-align: center; |
| } |
| .#{$primaryStyleName}-calendarpanel-month { |
| text-align: center; |
| white-space: nowrap; |
| } |
| .#{$primaryStyleName}-calendarpanel-weeknumber { |
| color: #999; |
| border-right: 1px solid #ddd; |
| font-size: 11.7px; |
| } |
| .#{$primaryStyleName}-calendarpanel-day, |
| .#{$primaryStyleName}-calendarpanel-day-today { |
| cursor: pointer; |
| } |
| .#{$primaryStyleName}-calendarpanel-day-today { |
| border: 1px solid #ddd; |
| } |
| .v-disabled .#{$primaryStyleName}-calendarpanel-day, |
| .v-disabled .#{$primaryStyleName}-calendarpanel-day-today, |
| .v-disabled.#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button { |
| cursor: default; |
| } |
| .#{$primaryStyleName}-calendarpanel-day-disabled, |
| .#{$primaryStyleName}-calendarpanel-day-outside-range { |
| cursor: default; |
| opacity: .5; |
| } |
| |
| .#{$primaryStyleName}-calendarpanel-prevyear, |
| .#{$primaryStyleName}-calendarpanel-nextyear, |
| .#{$primaryStyleName}-calendarpanel-prevmonth, |
| .#{$primaryStyleName}-calendarpanel-nextmonth { |
| button.outside-range{ |
| opacity: .5; |
| } |
| } |
| |
| .#{$primaryStyleName}-calendarpanel-day-selected { |
| cursor: default; |
| background: #333; |
| color: #fff; |
| } |
| .#{$primaryStyleName}-calendarpanel-day-focused { |
| outline: 1px dotted black; |
| } |
| .#{$primaryStyleName}-calendarpanel-day-offmonth { |
| color: #666; |
| } |
| |
| .#{$primaryStyleName}-time { |
| white-space: nowrap; |
| } |
| .#{$primaryStyleName}-time .v-label { |
| display: inline; |
| } |
| .#{$primaryStyleName}-popup { |
| background: #fff; |
| .v-ie9 &, .v-ie10 &, .v-ie11 & { |
| box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .5); |
| } |
| } |
| .#{$primaryStyleName}-popupcalendar input.#{$primaryStyleName}-textfield { |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| } |
| /* Disabled by default |
| .#{$primaryStyleName}-error .v-textfield, |
| .#{$primaryStyleName}-error .#{$primaryStyleName}-calendarpanel { |
| background: #ffe0e0; |
| } |
| */ |
| |
| /* Disabled by default |
| .#{$primaryStyleName}-required .v-textfield, |
| .#{$primaryStyleName}-required .#{$primaryStyleName}-calendarpanel { |
| background:transparent; |
| background-color: #ffe0e0; |
| } |
| */ |
| |
| } |