JosunLP/BrowserExtensionTemplate
1
0
Fork 0
mirror of https://github.com/JosunLP/BrowserExtensionTemplate.git synced 2025-06-21 18:11:08 +00:00
Code Issues Projects Releases Wiki Activity Actions

style update

Browse source
This commit is contained in:
Jonas Pfalzgraf 2023-01-24 01:03:04 +01:00
parent 69b5363c88
commit 43b2d8c82b
6 changed files with 11 additions and 267 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
package.json
View file

@ -18,8 +18,8 @@
"@types/node": "^18.11.18", "@types/node": "^18.11.18",
"@webcomponents/webcomponentsjs": "^2.7.0", "@webcomponents/webcomponentsjs": "^2.7.0",
"sass": "^1.39.0", "sass": "^1.39.0",
"typescript": "^4.2.4",
"ts-loader": "^9.4.2", "ts-loader": "^9.4.2",
"typescript": "^4.2.4",
"webpack": "^5.75.0", "webpack": "^5.75.0",
"webpack-cli": "^5.0.1" "webpack-cli": "^5.0.1"
}, },
@ -45,6 +45,7 @@
"url": "https://github.com/JosunLP/BrowserExtensionTemplate/issues" "url": "https://github.com/JosunLP/BrowserExtensionTemplate/issues"
}, },
"dependencies": { "dependencies": {
"@webcomponents/custom-elements": "^1.5.1" "@webcomponents/custom-elements": "^1.5.1",
"bootstrap": "^5.2.3"
} }
} }

226
src/sass/_button.sass
View file

@ -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

36
src/sass/_input.sass
View file

@ -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

6
src/sass/_root.sass
View file

@ -5,6 +5,12 @@ $main-font-color-focus: lightgrey
$main-font-color-disabled: lightgrey $main-font-color-disabled: lightgrey
$main-font-color-active: lightgrey $main-font-color-active: lightgrey
$main-uschrift-font: 'Ubuntu', Arial $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 $seccond-color: #6c757d
$seccondary-color: darkgrey $seccondary-color: darkgrey
$seccondary-color-hover: black $seccondary-color-hover: black

3
src/sass/app.sass
View file

@ -1,8 +1,7 @@
@import 'root' @import 'root'
@import 'mixin' @import 'mixin'
@import 'content' @import 'content'
@import 'button' @import "../../node_modules/bootstrap/scss/bootstrap"
@import 'input'
body body
height: 30rem height: 30rem

2
src/settings.ts
View file

@ -14,8 +14,8 @@ class Settings {
const saveButton = new BasicButton('success', 'Save', 'saveSettings').render(); const saveButton = new BasicButton('success', 'Save', 'saveSettings').render();
settings.innerHTML = ` settings.innerHTML = `
<div class="form-group"> <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> <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> </div>
`; `;
settings.innerHTML += saveButton; settings.innerHTML += saveButton;