| @mixin base-window($primaryStyleName : v-window) { |
| |
| .#{$primaryStyleName} { |
| background: #fff; |
| } |
| .#{$primaryStyleName}-contents { |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| } |
| |
| .#{$primaryStyleName}.v-has-width > div.popupContent, |
| .#{$primaryStyleName}.v-has-width .#{$primaryStyleName}-wrap, |
| .#{$primaryStyleName}.v-has-width .#{$primaryStyleName}-contents, |
| .#{$primaryStyleName}.v-has-width .#{$primaryStyleName}-contents > div { |
| width: 100%; |
| } |
| |
| .#{$primaryStyleName}.v-has-height > div.popupContent, |
| .#{$primaryStyleName}.v-has-height .#{$primaryStyleName}-wrap, |
| .#{$primaryStyleName}.v-has-height .#{$primaryStyleName}-contents, |
| .#{$primaryStyleName}.v-has-height .#{$primaryStyleName}-contents > div { |
| height: 100%; |
| } |
| |
| .#{$primaryStyleName}-outerheader { |
| padding: 0.3em 1em; |
| height: 1.6em; |
| position: relative; |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| } |
| |
| .#{$primaryStyleName}-outerheader, |
| .#{$primaryStyleName}-draggingCurtain { |
| cursor: move; |
| } |
| .#{$primaryStyleName}-header { |
| font-weight: bold; |
| -khtml-user-select: none; |
| -moz-user-select: none; |
| -ie-user-select: none; |
| user-select: none; |
| } |
| /* A more specific selector to make sure padding isn't so easily overridden */ |
| div.#{$primaryStyleName}-header { |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| -ms-text-overflow: ellipsis; |
| overflow: hidden; |
| padding: 0; |
| } |
| .#{$primaryStyleName}-header .v-icon { |
| vertical-align: middle; /* This has to be 'middle', not 'bottom', to allow larger icons than 16px */ |
| } |
| .#{$primaryStyleName}-contents > div { |
| outline: none; |
| } |
| .#{$primaryStyleName}-footer { |
| overflow: hidden; |
| zoom: 1; |
| height: 10px; |
| position: relative; |
| cursor: move; |
| } |
| .#{$primaryStyleName}-resizebox { |
| width: 10px; |
| height: 10px; |
| background: #ddd; |
| overflow: hidden; |
| position: absolute; |
| right: 0; |
| } |
| |
| .#{$primaryStyleName}-resizebox, |
| .#{$primaryStyleName}-resizingCurtain { |
| cursor: se-resize; |
| } |
| |
| .#{$primaryStyleName} div.#{$primaryStyleName}-footer-noresize { |
| height: 0; |
| } |
| .#{$primaryStyleName}-resizebox-disabled, |
| .#{$primaryStyleName}-closebox-disabled, |
| .#{$primaryStyleName}-restorebox-disabled, |
| .#{$primaryStyleName}-maximizebox-disabled { |
| cursor: default; |
| display: none; |
| } |
| .#{$primaryStyleName}-closebox, |
| .#{$primaryStyleName}-restorebox, |
| .#{$primaryStyleName}-maximizebox { |
| position: absolute; |
| top: 0; |
| right: 0; |
| width: 1em; |
| height: 1em; |
| cursor: pointer; |
| overflow: hidden; |
| } |
| .#{$primaryStyleName}-maximizebox, |
| .#{$primaryStyleName}-restorebox { |
| right: 1.1em; |
| } |
| |
| .#{$primaryStyleName}-closebox { |
| background: red; |
| } |
| .#{$primaryStyleName}-maximizebox { |
| background: blue; |
| } |
| .#{$primaryStyleName}-restorebox { |
| background: yellow; |
| } |
| .#{$primaryStyleName}-modalitycurtain { |
| top: 0; |
| left: 0; |
| background: #999; |
| opacity: 0.5; |
| position: fixed; |
| width: 100%; |
| height: 100%; |
| filter: alpha(opacity=50); |
| } |
| /* Shadow for window */ |
| .v-shadow-window { |
| position: absolute; |
| display: none; |
| pointer-events: none; |
| |
| .v-ie8 & { |
| display: block; |
| } |
| } |
| .v-shadow-window .top-left { |
| position: absolute; overflow: hidden; |
| top: -10px; left: -15px; |
| width: 28px; height: 28px; |
| background: transparent url(img/shadow/top-left.png); |
| } |
| .v-shadow-window .top { |
| position: absolute; overflow: hidden; |
| top: -10px; left: 13px; |
| height: 28px; |
| right: 13px; |
| background: transparent url(img/shadow/top.png); |
| } |
| .v-shadow-window .top-right { |
| position: absolute; overflow: hidden; |
| top: -10px; right: -15px; |
| width: 28px; height: 28px; |
| background: transparent url(img/shadow/top-right.png); |
| } |
| .v-shadow-window .left { |
| position: absolute; overflow: hidden; |
| top: 18px; left: -15px; |
| width: 28px; |
| bottom: 10px; |
| background: transparent url(img/shadow/left.png); |
| } |
| .v-shadow-window .center { |
| position: absolute; overflow: hidden; |
| top: 18px; left: 13px; |
| bottom: 10px; right: 13px; |
| background: transparent url(img/shadow/center.png); |
| } |
| .v-shadow-window .right { |
| position: absolute; overflow: hidden; |
| top: 18px; right: -15px; |
| width: 28px; |
| bottom: 10px; |
| background: transparent url(img/shadow/right.png); |
| } |
| .v-shadow-window .bottom-left { |
| position: absolute; overflow: hidden; |
| bottom: -18px; left: -15px; |
| width: 28px; height: 28px; |
| background: transparent url(img/shadow/bottom-left.png); |
| } |
| .v-shadow-window .bottom { |
| position: absolute; overflow: hidden; |
| bottom: -18px; left: 13px; |
| right: 13px; height: 28px; |
| background: transparent url(img/shadow/bottom.png); |
| } |
| .v-shadow-window .bottom-right { |
| position: absolute; overflow: hidden; |
| bottom: -18px; right: -15px; |
| width: 28px; height: 28px; |
| background: transparent url(img/shadow/bottom-right.png); |
| } |
| |
| } |