felixfoertsch/webextensions-examples
1
0
Fork 0
mirror of https://github.com/mdn/webextensions-examples.git synced 2026-04-16 06:18:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

Use browser_style in webpack example

Browse Source
This commit is contained in:
Martin Giger
2016-10-16 15:27:56 +02:00
parent 7812c6ae9d
commit 2b4b64c4a3
3 changed files with 69 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
webpack-modules/addon/manifest.json
View File

@@ -9,7 +9,8 @@
"browser_action": {
"default_icon": "icons/leftpad-32.png",
"default_title": "Left Pad",
"default_popup": "popup/left-pad.html"
"default_popup": "popup/left-pad.html",
"browser_style": true
},
"background": {
"scripts": ["background_scripts/index.js"]

32
webpack-modules/addon/popup/left-pad.html
View File

@@ -2,15 +2,33 @@
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<body class="panel">
<form id="leftpad-form">
<label for="text">Text:</label><input type="text" id="text" required><br>
<label for="amount">Result length:</label><input type="number" id="amount" min="0" step="1" required><br>
<label for="with">Pad with:</label><input type="text" required value="_" id="with"><br>
<label for="result">Result:</label><output id="result"></output><br>
<button type="submit">Pad!</button>
<button id="pad-bg">Pad in background script</button>
<section class="panel-section panel-section-formElements">
<div class="panel-formElements-item">
<label for="text">Text:</label>
<input type="text" id="text" required>
</div>
<div class="panel-formElements-item">
<label for="amount">Result length:</label>
<input type="number" id="amount" min="0" step="1" required>
</div>
<div class="panel-formElements-item">
<label for="with">Pad with:</label>
<input type="text" required value="_" id="with">
</div>
<div class="panel-formElements-item">
<label for="result">Result:</label>
<output id="result"></output>
</div>
</section>
<footer class="panel-section panel-section-footer">
<button type="submit" class="panel-section-footer-button default">Pad!</button>
<div class="panel-section-footer-separator"></div>
<button id="pad-bg" class="panel-section-footer-button">Pad in background script</button>
</footer>
</form>
<script src="index.js"></script>
</body>

42
webpack-modules/addon/popup/style.css Normal file
View File

@@ -0,0 +1,42 @@
/*
* These styles extend the styles from browser_styles, see https://firefoxux.github.io/StyleGuide.
*/
/* For some reason the footer creates a horizontal overflow */
body {
overflow-x: hidden;
}
.panel-formElements-item label {
width: 80px;
}
.panel-formElements-item output,
.panel-formElements-item input[type="number"] {
flex-grow: 1;
}
input[type="number"] {
background-color: #fff;
border: 1px solid #b1b1b1;
box-shadow: 0 0 0 0 rgba(97, 181, 255, 0);
font: caption;
padding: 0 6px 0;
transition-duration: 250ms;
transition-property: box-shadow;
height: 24px;
}
input[type="number"]:hover {
border-color: #858585;
}
input[type="number"]:focus {
border-color: #0996f8;
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
}
/* Reset the default styles for buttons if it's a footer button */
button.panel-section-footer-button {
padding: 12px;
}