mirror of
https://github.com/JosunLP/BrowserExtensionTemplate.git
synced 2025-12-06 05:50:05 +00:00
Version 1.4.0 (#10)
* Feature/webpack integration (#9) * working webpack into template * removing package-lock.json * implementing source * style update
This commit is contained in:
Jonas Pfalzgraf
GitHub
parent
241d3d02c6
commit
2319a1fd9b
15 changed files with 217 additions and 766 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import { Session } from "./classes/session.js"
|
||||
import { Session } from "./classes/session"
|
||||
|
||||
class App {
|
||||
|
||||
|
|
@ -27,4 +27,4 @@ class App {
|
|||
}
|
||||
}
|
||||
|
||||
new App();
|
||||
new App();
|
||||
|
|
|
|||
|
|
@ -1,226 +0,0 @@
|
|||
@import 'mixin'
|
||||
|
||||
.btn-neutral
|
||||
color: #fff
|
||||
background-color: #000
|
||||
border-color: #000
|
||||
@include partialButton
|
||||
|
||||
.btn-neutral:hover
|
||||
color: #000
|
||||
background-color: #fff
|
||||
border-color: #fff
|
||||
|
||||
.btn-neutral:focus, .btn-neutral.focus
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5)
|
||||
|
||||
.btn-neutral.disabled, .btn-neutral:disabled
|
||||
color: #fff
|
||||
background-color: #000
|
||||
border-color: #000
|
||||
|
||||
.btn-neutral:not(:disabled):not(.disabled):active, .btn-neutral:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-neutral.dropdown-toggle
|
||||
color: #000
|
||||
background-color: #fff
|
||||
border-color: #fff
|
||||
|
||||
.btn-primary
|
||||
color: #fff
|
||||
background-color: #007bff
|
||||
border-color: #007bff
|
||||
@include partialButton
|
||||
|
||||
.btn-primary:hover
|
||||
color: #fff
|
||||
background-color: #0069d9
|
||||
border-color: #0062cc
|
||||
|
||||
.btn-primary:focus, .btn-primary.focus
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5)
|
||||
|
||||
.btn-primary.disabled, .btn-primary:disabled
|
||||
color: #fff
|
||||
background-color: #007bff
|
||||
border-color: #007bff
|
||||
|
||||
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-primary.dropdown-toggle
|
||||
color: #fff
|
||||
background-color: #0062cc
|
||||
border-color: #005cbf
|
||||
|
||||
.btn-secondary
|
||||
color: #fff
|
||||
background-color: #6c757d
|
||||
border-color: #6c757d
|
||||
@include partialButton
|
||||
|
||||
.btn-secondary:hover
|
||||
color: #fff
|
||||
background-color: #5a6268
|
||||
border-color: #545b62
|
||||
|
||||
.btn-secondary:focus, .btn-secondary.focus
|
||||
box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5)
|
||||
|
||||
.btn-secondary.disabled, .btn-secondary:disabled
|
||||
color: #fff
|
||||
background-color: #6c757d
|
||||
border-color: #6c757d
|
||||
|
||||
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-secondary.dropdown-toggle
|
||||
color: #fff
|
||||
background-color: #545b62
|
||||
border-color: #4e555b
|
||||
|
||||
.btn-success
|
||||
color: #fff
|
||||
background-color: #28a745
|
||||
border-color: #28a745
|
||||
@include partialButton
|
||||
|
||||
.btn-success:hover
|
||||
color: #fff
|
||||
background-color: #218838
|
||||
border-color: #1e7e34
|
||||
|
||||
.btn-success:focus, .btn-success.focus
|
||||
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5)
|
||||
|
||||
.btn-success.disabled, .btn-success:disabled
|
||||
color: #fff
|
||||
background-color: #28a745
|
||||
border-color: #28a745
|
||||
|
||||
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-success.dropdown-toggle
|
||||
color: #fff
|
||||
background-color: #1e7e34
|
||||
border-color: #1c7430
|
||||
|
||||
.btn-info
|
||||
color: #fff
|
||||
background-color: #17a2b8
|
||||
border-color: #17a2b8
|
||||
@include partialButton
|
||||
|
||||
.btn-info:hover
|
||||
color: #fff
|
||||
background-color: #138496
|
||||
border-color: #117a8b
|
||||
|
||||
.btn-info:focus, .btn-info.focus
|
||||
box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5)
|
||||
|
||||
.btn-info.disabled, .btn-info:disabled
|
||||
color: #fff
|
||||
background-color: #17a2b8
|
||||
border-color: #17a2b8
|
||||
|
||||
.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-info.dropdown-toggle
|
||||
color: #fff
|
||||
background-color: #117a8b
|
||||
border-color: #10707f
|
||||
|
||||
.btn-warning
|
||||
color: #212529
|
||||
background-color: #ffc107
|
||||
border-color: #ffc107
|
||||
@include partialButton
|
||||
|
||||
.btn-warning:hover
|
||||
color: #212529
|
||||
background-color: #e0a800
|
||||
border-color: #d39e00
|
||||
|
||||
.btn-warning:focus, .btn-warning.focus
|
||||
box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5)
|
||||
|
||||
.btn-warning.disabled, .btn-warning:disabled
|
||||
color: #212529
|
||||
background-color: #ffc107
|
||||
border-color: #ffc107
|
||||
|
||||
.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-warning.dropdown-toggle
|
||||
color: #212529
|
||||
background-color: #d39e00
|
||||
border-color: #c69500
|
||||
|
||||
.btn-danger
|
||||
color: #fff
|
||||
background-color: #dc3545
|
||||
border-color: #dc3545
|
||||
@include partialButton
|
||||
|
||||
.btn-danger:hover
|
||||
color: #fff
|
||||
background-color: #c82333
|
||||
border-color: #bd2130
|
||||
|
||||
.btn-danger:focus, .btn-danger.focus
|
||||
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5)
|
||||
|
||||
.btn-danger.disabled, .btn-danger:disabled
|
||||
color: #fff
|
||||
background-color: #dc3545
|
||||
border-color: #dc3545
|
||||
|
||||
.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-danger.dropdown-toggle
|
||||
color: #fff
|
||||
background-color: #bd2130
|
||||
border-color: #b21f2d
|
||||
|
||||
.btn-light
|
||||
color: #212529
|
||||
background-color: #f8f9fa
|
||||
border-color: #f8f9fa
|
||||
@include partialButton
|
||||
|
||||
.btn-light:hover
|
||||
color: #212529
|
||||
background-color: #e2e6ea
|
||||
border-color: #dae0e5
|
||||
|
||||
.btn-light:focus, .btn-light.focus
|
||||
box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5)
|
||||
|
||||
.btn-light.disabled, .btn-light:disabled
|
||||
color: #212529
|
||||
background-color: #f8f9fa
|
||||
border-color: #f8f9fa
|
||||
|
||||
.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-light.dropdown-toggle
|
||||
color: #212529
|
||||
background-color: #dae0e5
|
||||
border-color: #d3d9df
|
||||
|
||||
.btn-dark
|
||||
color: #fff
|
||||
background-color: #343a40
|
||||
border-color: #343a40
|
||||
@include partialButton
|
||||
|
||||
.btn-dark:hover
|
||||
color: #fff
|
||||
background-color: #23272b
|
||||
border-color: #1d2124
|
||||
|
||||
.btn-dark:focus, .btn-dark.focus
|
||||
box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5)
|
||||
|
||||
.btn-dark.disabled, .btn-dark:disabled
|
||||
color: #fff
|
||||
background-color: #343a40
|
||||
border-color: #343a40
|
||||
|
||||
.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-dark.dropdown-toggle
|
||||
color: #fff
|
||||
background-color: #1d2124
|
||||
border-color: #171a1d
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
@import 'root'
|
||||
|
||||
.text-input
|
||||
width: 80%
|
||||
height: 2rem
|
||||
border: none
|
||||
border-radius: 0.5rem
|
||||
padding: 0.5rem
|
||||
margin-bottom: 0.5rem
|
||||
font-size: 1rem
|
||||
font-family: 'Roboto', sans-serif
|
||||
color: $seccondary-color
|
||||
background-color: $background-color-content
|
||||
&:focus
|
||||
outline: none
|
||||
background-color: $background-color-content-focus
|
||||
color: $seccondary-color
|
||||
box-shadow: 0px 0px 30px silver
|
||||
&:disabled
|
||||
background-color: $background-color-content-disabled
|
||||
color: $seccondary-color-disabled
|
||||
box-shadow: none
|
||||
&:hover
|
||||
background-color: $background-color-content-hover
|
||||
color: $seccondary-color-hover
|
||||
box-shadow: 0px 0px 30px silver
|
||||
&:active
|
||||
background-color: $background-color-content-active
|
||||
color: $seccondary-color-active
|
||||
box-shadow: 0px 0px 30px silver
|
||||
|
||||
label
|
||||
font-size: 1rem
|
||||
font-family: 'Roboto', sans-serif
|
||||
color: $main-font-color
|
||||
margin-bottom: 0.5rem
|
||||
|
|
@ -5,6 +5,12 @@ $main-font-color-focus: lightgrey
|
|||
$main-font-color-disabled: lightgrey
|
||||
$main-font-color-active: lightgrey
|
||||
$main-uschrift-font: 'Ubuntu', Arial
|
||||
$primary-color: #007bff
|
||||
$primary-color-hover: #0069d9
|
||||
$primary-color-focus: #0062cc
|
||||
$primary-color-disabled: #0069d9
|
||||
$primary-color-active: #0062cc
|
||||
$background-color-content-shadow: #0069d9
|
||||
$seccond-color: #6c757d
|
||||
$seccondary-color: darkgrey
|
||||
$seccondary-color-hover: black
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
@import 'root'
|
||||
@import 'mixin'
|
||||
@import 'content'
|
||||
@import 'button'
|
||||
@import 'input'
|
||||
@import "../../node_modules/bootstrap/scss/bootstrap"
|
||||
|
||||
body
|
||||
height: 30rem
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Session } from "./classes/session.js";
|
||||
import { BasicButton } from "./components/button.js";
|
||||
import { Session } from "./classes/session";
|
||||
import { BasicButton } from "./components/button";
|
||||
|
||||
class Settings {
|
||||
|
||||
|
|
@ -14,8 +14,8 @@ class Settings {
|
|||
const saveButton = new BasicButton('success', 'Save', 'saveSettings').render();
|
||||
settings.innerHTML = `
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control text-input" id="contentTest" placeholder="Enter content test" value="${this.session.contentTest}">
|
||||
<label for="contentTest">Content Test</label>
|
||||
<input type="text" class="form-control text-input" id="contentTest" placeholder="Enter content test" value="${this.session.contentTest}">
|
||||
</div>
|
||||
`;
|
||||
settings.innerHTML += saveButton;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue