{"action":"created","issue":{"url":"https://api.github.com/repos/wet-boew/wet-boew/issues/6550","labels_url":"https://api.github.com/repos/wet-boew/wet-boew/issues/6550/labels{/name}","comments_url":"https://api.github.com/repos/wet-boew/wet-boew/issues/6550/comments","events_url":"https://api.github.com/repos/wet-boew/wet-boew/issues/6550/events","html_url":"https://github.com/wet-boew/wet-boew/issues/6550","id":58307137,"number":6550,"title":"SCSS variables: Overlay Plugin questions","user":{"login":"melodyma","id":6571996,"avatar_url":"https://avatars.githubusercontent.com/u/6571996?v=3","gravatar_id":"","url":"https://api.github.com/users/melodyma","html_url":"https://github.com/melodyma","followers_url":"https://api.github.com/users/melodyma/followers","following_url":"https://api.github.com/users/melodyma/following{/other_user}","gists_url":"https://api.github.com/users/melodyma/gists{/gist_id}","starred_url":"https://api.github.com/users/melodyma/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/melodyma/subscriptions","organizations_url":"https://api.github.com/users/melodyma/orgs","repos_url":"https://api.github.com/users/melodyma/repos","events_url":"https://api.github.com/users/melodyma/events{/privacy}","received_events_url":"https://api.github.com/users/melodyma/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/wet-boew/wet-boew/labels/Core:%20CSS","name":"Core: CSS","color":"009800"}],"state":"open","locked":false,"assignee":{"login":"LaurentGoderre","id":1090826,"avatar_url":"https://avatars.githubusercontent.com/u/1090826?v=3","gravatar_id":"","url":"https://api.github.com/users/LaurentGoderre","html_url":"https://github.com/LaurentGoderre","followers_url":"https://api.github.com/users/LaurentGoderre/followers","following_url":"https://api.github.com/users/LaurentGoderre/following{/other_user}","gists_url":"https://api.github.com/users/LaurentGoderre/gists{/gist_id}","starred_url":"https://api.github.com/users/LaurentGoderre/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/LaurentGoderre/subscriptions","organizations_url":"https://api.github.com/users/LaurentGoderre/orgs","repos_url":"https://api.github.com/users/LaurentGoderre/repos","events_url":"https://api.github.com/users/LaurentGoderre/events{/privacy}","received_events_url":"https://api.github.com/users/LaurentGoderre/received_events","type":"User","site_admin":false},"milestone":null,"comments":1,"created_at":"2015-02-20T03:46:11Z","updated_at":"2015-06-15T17:27:22Z","closed_at":null,"body":"@LaurentGoderre - For overlay, this is what I propose as the parameters we should extract as variables. My notes are proceeded by  `//***` in the code snippets below. Things I think should be customizable are labelled as `//*** CUSTOMIZE` along with some inline questions and notes.\r\n\r\noverlay/_base.scss\r\n```scss\r\n.wb-overlay {\r\n\tbackground-clip: border-box;\r\n\tbackground-color: #fff; //*** CUSTOMIZE - Question: This colour is also inherited by the modal overlay background, but I think people may want to customize the side overlay vs. modal overlay backgrounds since side overlays are usually used for off-canvas navs vs. modals that are strictly modals.\r\n\tborder: 0;\r\n\tborder-radius: 0;\r\n\tdisplay: none;\r\n\t// Push the element onto the GPU stack\r\n\ttransform: translateZ(0);\r\n\tz-index: 1050;\r\n\r\n\t&.wb-inview {\r\n\t\tdisplay: block;\r\n\t}\r\n\r\n\t&.open {\r\n\t\tdisplay: inline-block;\r\n\t\tposition: fixed;\r\n\t}\r\n}\r\n\r\n%overlay-panel {\r\n\theight: 100%;\r\n\tmax-width: 90%;  //*** CUSTOMIZE \r\n\ttop: 0;\r\n}\r\n\r\n%overlay-bar {\r\n\tborder-bottom: 0;\r\n\tleft: 0;\r\n\tmax-height: 90%;  //*** CUSTOMIZE \r\n\tmin-width: 100%;\r\n}\r\n\r\n%overlay-popup {\r\n\tmax-height: 90%;  //*** CUSTOMIZE \r\n\tmax-width: 90%;  //*** CUSTOMIZE \r\n}\r\n\r\n/*\r\n *\tOverlay styles\r\n */\r\n.wb-panel-l {\r\n\t@extend %overlay-panel;\r\n\tleft: 0;\r\n}\r\n\r\n.wb-panel-r {\r\n\t@extend %overlay-panel;\r\n\tright: 0;\r\n}\r\n\r\n.wb-bar-t {\r\n\t@extend %overlay-bar;\r\n\ttop: 0;\r\n}\r\n\r\n.wb-bar-b {\r\n\t@extend %overlay-bar;\r\n\tbottom: 0;\r\n}\r\n\r\n.wb-popup-mid {\r\n\t@extend %overlay-popup;\r\n\tborder-radius: 6px;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tmargin: auto;\r\n\tright: 0;\r\n\ttop: 0;\r\n}\r\n\r\n.wb-popup-full {\r\n\theight: 100%;\r\n\tleft: 0;\r\n\ttop: 0;\r\n\twidth: 100%;\r\n}\r\n\r\n/*\r\n *\tOverlay parts\r\n */\r\n.overlay-def {\r\n\toverflow-y: auto;\r\n\r\n\theader {\r\n\t\tbackground-color: #000; //*** CURRENTLY NOT USED\r\n\t\tcolor: #fff;  //*** CUSTOMIZE \r\n\t\tdisplay: block;\r\n\t\tpadding: 0 44px 0 1em;  //*** CUSTOMIZE \r\n\t}\r\n\r\n\t.modal-title {\r\n\t\tfont-size: 1.15em;  //*** CUSTOMIZE \r\n\t\tpadding: 10px 0;  //*** CUSTOMIZE \r\n\t}\r\n\r\n\t&.wb-bar-t,\r\n\t&.wb-bar-b {\r\n\t\tbackground-color: #000; //*** Why is this not themed like the left and right side overlays?\r\n\t}\r\n\r\n\t.mfp-close {\r\n\t\tcolor: #fff;  //*** CUSTOMIZE \r\n\t}\r\n}\r\n\r\n.hidden-hd {\r\n\t.modal-body {\r\n\t\tpadding-top: 50px;\r\n\t}\r\n\r\n\t.overlay-close {\r\n\t\tbackground-color: #000;  //*** CUSTOMIZE \r\n\t\tborder-radius: 999px; //*** CHANGE TO 50%\r\n\t\theight: 1em;  //*** CUSTOMIZE \r\n\t\tline-height: 1em;\r\n\t\tmargin-right: 20px;\r\n\t\tmargin-top: 10px;\r\n\t\twidth: 1em;  //*** CUSTOMIZE \r\n\t}\r\n}\r\n\r\n[dir=rtl] {\r\n\t.mfp-close {\r\n\t\tleft: 0;\r\n\t\tright: auto;\r\n\t}\r\n\r\n\t.wb-panel-l {\r\n\t\tleft: auto;\r\n\t\tright: 0;\r\n\t}\r\n\r\n\t.wb-panel-r {\r\n\t\tleft: 0;\r\n\t\tright: auto;\r\n\t}\r\n\r\n\t.overlay-def {\r\n\t\theader {\r\n\t\t\tpadding: 0 1em 0 44px;\r\n\t\t}\r\n\t}\r\n}\r\n```\r\n\r\noverlay/_ie8.scss\r\nShould `1px solid #999;` be the scss placeholder and extended by left, right, top and bottom? \r\n```scss\r\n%overlay-ie8-border-left-999 {\r\n\tborder-left: 1px solid #999; //*** CUSTOMIZE\r\n}\r\n\r\n%overlay-ie8-border-right-999 {\r\n\tborder-right: 1px solid #999; //*** CUSTOMIZE\r\n}\r\n\r\n.lt-ie9 {\r\n\t.wb-panel-l {\r\n\t\t@extend %overlay-ie8-border-right-999;\r\n\t}\r\n\r\n\t.wb-panel-r {\r\n\t\t@extend %overlay-ie8-border-left-999;\r\n\t}\r\n\r\n\t.wb-bar-t {\r\n\t\tborder-bottom: 1px solid #999; //*** CUSTOMIZE\r\n\t}\r\n\r\n\t.wb-bar-b {\r\n\t\tborder-top: 1px solid #999; //*** CUSTOMIZE\r\n\t}\r\n\r\n\t&[dir=rtl] {\r\n\t\t.wb-panel-l {\r\n\t\t\t@extend %overlay-ie8-border-left-999;\r\n\t\t\tborder-right: 0;\r\n\t\t}\r\n\r\n\t\t.wb-panel-r {\r\n\t\t\t@extend %overlay-ie8-border-right-999;\r\n\t\t\tborder-left: 0;\r\n\t\t}\r\n\t}\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/wet-boew/wet-boew/issues/comments/112146808","html_url":"https://github.com/wet-boew/wet-boew/issues/6550#issuecomment-112146808","issue_url":"https://api.github.com/repos/wet-boew/wet-boew/issues/6550","id":112146808,"user":{"login":"hsrudnicki","id":8570320,"avatar_url":"https://avatars.githubusercontent.com/u/8570320?v=3","gravatar_id":"","url":"https://api.github.com/users/hsrudnicki","html_url":"https://github.com/hsrudnicki","followers_url":"https://api.github.com/users/hsrudnicki/followers","following_url":"https://api.github.com/users/hsrudnicki/following{/other_user}","gists_url":"https://api.github.com/users/hsrudnicki/gists{/gist_id}","starred_url":"https://api.github.com/users/hsrudnicki/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hsrudnicki/subscriptions","organizations_url":"https://api.github.com/users/hsrudnicki/orgs","repos_url":"https://api.github.com/users/hsrudnicki/repos","events_url":"https://api.github.com/users/hsrudnicki/events{/privacy}","received_events_url":"https://api.github.com/users/hsrudnicki/received_events","type":"User","site_admin":false},"created_at":"2015-06-15T17:27:22Z","updated_at":"2015-06-15T17:27:22Z","body":"Can this issue be closed?"}}