@web-atoms/core-docs
Version:
140 lines • 4.64 kB
JavaScript
(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports);
if (v !== undefined) module.exports = v;
}
else if (typeof define === "function" && define.amd) {
define(["require", "exports", "@web-atoms/core/src/web/images/close-button-hover.svg", "../styles/AtomStyle"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AtomWindowStyle = void 0;
const close_button_hover_svg_1 = require("@web-atoms/core/src/web/images/close-button-hover.svg");
const AtomStyle_1 = require("../styles/AtomStyle");
/**
* Represents Window Style, in order to add more subclasses
* you can override content style
*/
class AtomWindowStyle extends AtomStyle_1.AtomStyle {
get root() {
return Object.assign(Object.assign({}, this.frameHost), { subclasses: {
" .close-button": this.closeButton,
" .command-bar-presenter": this.commandBarPresenter,
" .command-bar": this.commandBar,
" .content-presenter": this.contentPresenter,
" .content": this.content,
" .frame": this.frame,
" .title": this.title,
" .title-host": this.titleHost,
" .title-presenter": this.titlePresenter,
} });
}
get frameHost() {
return {
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundColor: "#50505080"
};
}
get frame() {
return {
position: "absolute",
minHeight: "100px",
minWidth: "300px",
margin: "auto",
border: "solid 1px #808080",
borderRadius: "5px",
backgroundColor: "white"
};
}
get titlePresenter() {
return {
position: "relative",
left: 0,
right: 0,
top: 0,
height: "37px"
};
}
get titleHost() {
return {
position: "absolute",
left: 0,
right: 0,
padding: "7px",
minHeight: "32px",
backgroundColor: "#404040",
color: "white",
top: 0,
borderTopRightRadius: "4px",
borderTopLeftRadius: "4px"
};
}
get title() {
return {
margin: "auto"
};
}
get closeButton() {
return {
position: "absolute",
right: "6px",
top: "7px",
width: "0",
height: "0",
padding: "9px",
border: "none",
backgroundColor: "transparent",
backgroundImage: close_button_hover_svg_1.default
// As suggested by srikanth sir
// subclasses: {
// ":hover": {
// backgroundImage: closeButtonHover
// }
// }
};
}
get content() {
return {};
}
get contentPresenter() {
return {
position: "relative",
padding: "10px",
background: "white"
};
}
get commandBarPresenter() {
return {
left: 0,
right: 0,
bottom: 0,
padding: "5px",
backgroundColor: "#d4d4d4",
textAlign: "right",
borderBottomRightRadius: "4px",
borderBottomLeftRadius: "4px",
};
}
get commandBar() {
return {
subclasses: {
" button": {
borderRadius: "3px",
marginLeft: "5px",
marginRight: "5px",
padding: "4px 16px",
backgroundColor: "whitesmoke",
border: "1px solid gray"
}
},
};
}
}
exports.AtomWindowStyle = AtomWindowStyle;
});
//# sourceMappingURL=AtomWindowStyle.js.map