123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 |
- @mixin runo-window($primaryStyleName : v-window) {
-
- /* add box-shadows to an overlay element */
- .#{$primaryStyleName} {
- box-shadow: 0 10px 24px 0 rgba(42, 45, 46, .4);
- border-radius: 10px;
- }
- .#{$primaryStyleName} {
- color: #464f52;
- font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
- font-size: 13px;
- line-height: 18px;
- background: transparent url(img/bottom-left.png) no-repeat left bottom;
- }
- .#{$primaryStyleName}-wrap {
- background: transparent url(img/top-left.png) no-repeat;
- }
- .#{$primaryStyleName}-outerheader {
- height: 49px;
- margin-left: 9px;
- padding: 15px 61px 11px 12px;
- background: transparent url(img/top-right.png) no-repeat right top;
- }
- .#{$primaryStyleName}-header {
- font-size: 18px;
- line-height: 1.2;
- font-weight: normal;
- letter-spacing: -0.03em;
- color: #f14c1a;
- text-shadow: 0 1px 0 #fff;
- }
- .#{$primaryStyleName}-contents > div {
- background: #fff;
- border: 2px solid #babfc0;
- border-top: none;
- border-bottom: none;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- .#{$primaryStyleName} div.#{$primaryStyleName}-footer {
- height: 8px;
- margin-left: 9px;
- background: transparent url(img/bottom-right.png) no-repeat right bottom;
- overflow: visible;
- }
- .#{$primaryStyleName}-resizebox {
- position: absolute; /* Needed to position the element over ScrollPanel, which is relatively positioned */
- right: 5px;
- width: 10px;
- height: 10px;
- margin-top: -7px;
- background: transparent url(img/resize.png);
- }
- .#{$primaryStyleName}-resizebox-disabled {
- background: transparent;
- display: block;
- }
- .#{$primaryStyleName}-closebox,
- .#{$primaryStyleName}-maximizebox,
- .#{$primaryStyleName}-restorebox {
- position: absolute;
- top: 21px;
- height: 12px;
- }
- .#{$primaryStyleName}-closebox {
- width: 12px;
- height: 12px;
- right: 24px;
- background: transparent url(img/close.png);
- &:hover {
- background-position: 0 -12px;
- }
- }
-
- .#{$primaryStyleName}-maximizebox,
- .#{$primaryStyleName}-restorebox {
- right: 42px;
- }
-
- .#{$primaryStyleName}-restorebox {
- width: 15px;
- height: 14px;
-
- background: transparent url(img/restore.png);
- &:hover {
- background-position: 0 -14px;
- }
- }
- .#{$primaryStyleName}-maximizebox {
- width: 13px;
- height: 12px;
-
- background: transparent url(img/maximize.png);
- &:hover {
- background-position: 0 -12px;
- }
- }
-
- .#{$primaryStyleName}-modalitycurtain {
- background: #fff;
- }
- /* Dialog style */
- .#{$primaryStyleName}-dialog {
- background-image: url(img/dialog/bottom-left.png);
-
- .#{$primaryStyleName}-outerheader {
- height: 32px;
- padding: 13px 30px 5px 8px;
- background: transparent url(img/top-right.png) no-repeat right top;
- }
- .#{$primaryStyleName}-header {
- font-size: 12px;
- line-height: normal;
- font-weight: bold;
- letter-spacing: 0;
- text-shadow: 0 1px 0 #fff;
- }
- .#{$primaryStyleName}-contents > div {
- background: #f1f3f3;
- }
- div.#{$primaryStyleName}-footer {
- background-image: url(img/dialog/bottom-right.png);
- }
- .#{$primaryStyleName}-closebox {
- top: 14px;
- right: 16px;
- background-image: url(img/dialog/close.png);
- }
-
- .#{$primaryStyleName}-restorebox {
- width: 12px;
- height: 12px;
- top: 15px;
- right: 32px;
-
- background: transparent url(img/dialog/restore.png);
- &:hover {
- background-position: 0 -12px;
- }
- }
-
- .#{$primaryStyleName}-maximizebox {
- width: 11px;
- height: 10px;
- top: 15px;
- right: 32px;
-
- background: transparent url(img/dialog/maximize.png);
- &:hover {
- background-position: 0 -10px;
- }
- }
- }
-
- }
|