bootsteam-theme 5.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.gitattributes +66 -0
- package/README.md +5 -0
- package/dist/bootsteam-theme.css +12319 -0
- package/dist/bootsteam-theme.min.css +5 -0
- package/docs/alerts.html +118 -0
- package/docs/badges.html +140 -0
- package/docs/buttons.html +194 -0
- package/docs/carousel.html +109 -0
- package/docs/collapse.html +105 -0
- package/docs/containers.html +307 -0
- package/docs/css/bootsteam-theme.min.css +5 -0
- package/docs/dialogs.html +154 -0
- package/docs/forms.html +335 -0
- package/docs/index.html +108 -0
- package/docs/navs.html +250 -0
- package/docs/offcanvas.html +92 -0
- package/docs/plugins.html +99 -0
- package/docs/scripts/scripts.js +70 -0
- package/docs/scripts/themeHandler.js +57 -0
- package/docs/spinners.html +145 -0
- package/docs/tables.html +613 -0
- package/docs/themes.html +166 -0
- package/docs/toasts.html +119 -0
- package/docs/typography.html +176 -0
- package/docs-templates/alerts.html +76 -0
- package/docs-templates/badges.html +98 -0
- package/docs-templates/buttons.html +152 -0
- package/docs-templates/carousel.html +67 -0
- package/docs-templates/collapse.html +63 -0
- package/docs-templates/containers.html +265 -0
- package/docs-templates/dialogs.html +112 -0
- package/docs-templates/forms.html +293 -0
- package/docs-templates/index.html +66 -0
- package/docs-templates/navs.html +208 -0
- package/docs-templates/offcanvas.html +50 -0
- package/docs-templates/partials/_footer.html +4 -0
- package/docs-templates/partials/_head.html +7 -0
- package/docs-templates/partials/_nav.html +29 -0
- package/docs-templates/partials/_scripts.html +5 -0
- package/docs-templates/plugins.html +57 -0
- package/docs-templates/spinners.html +103 -0
- package/docs-templates/tables.html +571 -0
- package/docs-templates/themes.html +68 -0
- package/docs-templates/toasts.html +77 -0
- package/docs-templates/typography.html +134 -0
- package/gulpfile.js +51 -0
- package/package.json +17 -0
- package/src/_alerts.scss +65 -0
- package/src/_darkThemeOverrides.scss +74 -0
- package/src/_fieldset.scss +27 -0
- package/src/_forms.scss +134 -0
- package/src/_tables.scss +77 -0
- package/src/_twr-variables-dark.scss +23 -0
- package/src/_twr-variables.scss +71 -0
- package/src/bootsteam.scss +25 -0
- package/src/plugins/_allPlugins.scss +2 -0
- package/src/plugins/_slimSelect.scss +106 -0
- package/src/plugins/_summernote.scss +45 -0
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
@@include('./partials/_head.html', {
|
|
5
|
+
"title": "Toasts | Tower Bootstrap Theme"
|
|
6
|
+
})
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
@@include('./partials/_nav.html')
|
|
10
|
+
|
|
11
|
+
<main class="container mt-5 pt-2">
|
|
12
|
+
<ol class="breadcrumb">
|
|
13
|
+
<li class="breadcrumb-item"><a href="index.html">Homepage</a></li>
|
|
14
|
+
<li class="breadcrumb-item active">Toasts</li>
|
|
15
|
+
</ol>
|
|
16
|
+
|
|
17
|
+
<h2 class="display-4">Toasts</h2>
|
|
18
|
+
<hr />
|
|
19
|
+
|
|
20
|
+
<div class="row">
|
|
21
|
+
<div class="col-md-6 mb-4">
|
|
22
|
+
<div class="toast-container">
|
|
23
|
+
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
|
|
24
|
+
<div class="toast-header">
|
|
25
|
+
<strong class="me-auto">Default Toast</strong>
|
|
26
|
+
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="toast-body">
|
|
29
|
+
Hello, world! This is a toast message.
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
|
|
33
|
+
<div class="toast-header bg-primary text-white">
|
|
34
|
+
<strong class="me-auto">Primary Header Toast</strong>
|
|
35
|
+
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="toast-body">
|
|
38
|
+
Hello, world! This is a toast message.
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="col-md-6 mb-4">
|
|
44
|
+
<button type="button" class="btn btn-primary mb-2" onclick="toast('Default')">Toast Test</button>
|
|
45
|
+
<button type="button" class="btn btn-success mb-2" onclick="toast('bg-success', 'bg-success')">Toast Test</button>
|
|
46
|
+
<button type="button" class="btn btn-info mb-2" onclick="toast('bg-into', 'bg-info')">Toast Test</button>
|
|
47
|
+
<button type="button" class="btn btn-danger mb-2" onclick="toast('bg-danger', 'bg-danger')">Toast Test</button>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
<br />
|
|
51
|
+
<br />
|
|
52
|
+
<br />
|
|
53
|
+
<br />
|
|
54
|
+
<br />
|
|
55
|
+
<br />
|
|
56
|
+
<br />
|
|
57
|
+
<br />
|
|
58
|
+
<br />
|
|
59
|
+
</main>
|
|
60
|
+
|
|
61
|
+
<div id="toast-notifications" class="toast-container position-absolute p-3 bottom-0 end-0"></div>
|
|
62
|
+
|
|
63
|
+
<div id="toast-template" hidden>
|
|
64
|
+
<div class="toast fade hide" role="alert">
|
|
65
|
+
<div class="toast-header bg-primary text-white">
|
|
66
|
+
<strong class="me-auto">Toast</strong>
|
|
67
|
+
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
68
|
+
</div>
|
|
69
|
+
<div class="toast-body">
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
@@include('./partials/_footer.html')
|
|
75
|
+
@@include('./partials/_scripts.html')
|
|
76
|
+
</body>
|
|
77
|
+
</html>
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
@@include('./partials/_head.html', {
|
|
5
|
+
"title": "Typography | Tower Bootstrap Theme"
|
|
6
|
+
})
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
@@include('./partials/_nav.html')
|
|
10
|
+
|
|
11
|
+
<main class="container mt-5 pt-2">
|
|
12
|
+
<ol class="breadcrumb">
|
|
13
|
+
<li class="breadcrumb-item"><a href="index.html">Homepage</a></li>
|
|
14
|
+
<li class="breadcrumb-item active">Typography</li>
|
|
15
|
+
</ol>
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
<h2 class="display-5">Typography</h2>
|
|
19
|
+
<hr />
|
|
20
|
+
<div class="row">
|
|
21
|
+
<div class="col-12 col-sm-4">
|
|
22
|
+
<h1>Heading 1</h1>
|
|
23
|
+
<h2>Heading 2</h2>
|
|
24
|
+
<h3>Heading 3</h3>
|
|
25
|
+
<h4>Heading 4</h4>
|
|
26
|
+
<h5>Heading 5</h5>
|
|
27
|
+
<h6>Heading 6</h6>
|
|
28
|
+
<h3>
|
|
29
|
+
Heading
|
|
30
|
+
<small class="text-muted">with muted text</small>
|
|
31
|
+
</h3>
|
|
32
|
+
<p class="lead">Lead Paragraph. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<div class="col-12 col-sm-4">
|
|
36
|
+
<h4>Inline text elements</h4>
|
|
37
|
+
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
|
38
|
+
<p><del>This line of text is meant to be treated as deleted text.</del></p>
|
|
39
|
+
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
|
|
40
|
+
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
|
|
41
|
+
<p><u>This line of text will render as underlined</u></p>
|
|
42
|
+
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
|
43
|
+
<p><strong>This line rendered as bold text.</strong></p>
|
|
44
|
+
<p class="fw-semibold">fw-semibold - Custom class for font-weight: 600</p>
|
|
45
|
+
<p><em>This line rendered as italicized text.</em></p>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div class="col-12 col-sm-4">
|
|
49
|
+
<h4>Emphasis classes</h4>
|
|
50
|
+
<p class="text-primary">text-primary - Lorem ipsum dolor sit amet</p>
|
|
51
|
+
<p class="text-secondary">text-secondary - Lorem ipsum dolor sit amet</p>
|
|
52
|
+
<p class="text-success">text-success - Lorem ipsum dolor sit amet</p>
|
|
53
|
+
<p class="text-info">text-info - Lorem ipsum dolor sit amet</p>
|
|
54
|
+
<p class="text-warning">text-warning - Lorem ipsum dolor sit amet</p>
|
|
55
|
+
<p class="text-danger">text-danger - Lorem ipsum dolor sit amet</p>
|
|
56
|
+
<p class="text-light">text-light - Lorem ipsum dolor sit amet</p>
|
|
57
|
+
<p class="text-dark">text-dark - Lorem ipsum dolor sit amet</p>
|
|
58
|
+
<p class="text-muted">text-muted - Lorem ipsum dolor sit amet</p>
|
|
59
|
+
<p class="text-faded">text-faded - Custom class that uses opacity instead of changing the font color</p>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<div class="col-12 col-sm-4">
|
|
63
|
+
<h4>Display Headings</h4>
|
|
64
|
+
<div class="display-1">Display 1</div>
|
|
65
|
+
<div class="display-2">Display 2</div>
|
|
66
|
+
<div class="display-3">Display 3</div>
|
|
67
|
+
<div class="display-4">Display 4</div>
|
|
68
|
+
<div class="display-5">Display 5</div>
|
|
69
|
+
<div class="display-6">Display 6</div>
|
|
70
|
+
|
|
71
|
+
<em class="mt-2 d-block small">display-5 and display-6 are custom classes and are not normally in Bootstrap</em>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<div class="col-12 col-sm-4">
|
|
75
|
+
<h4>Lead</h4>
|
|
76
|
+
<p class="lead">
|
|
77
|
+
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
|
|
78
|
+
</p>
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<div class="col-12 col-sm-4">
|
|
82
|
+
<h4>Blockquote</h4>
|
|
83
|
+
<figure>
|
|
84
|
+
<blockquote class="blockquote">
|
|
85
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
86
|
+
</blockquote>
|
|
87
|
+
<figcaption class="blockquote-footer">
|
|
88
|
+
Someone famous in <cite title="Source Title">Source Title</cite>
|
|
89
|
+
</figcaption>
|
|
90
|
+
</figure>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<hr />
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
<h4>Fieldset</h4>
|
|
98
|
+
<fieldset>
|
|
99
|
+
<legend>Legend</legend>
|
|
100
|
+
<p>Content</p>
|
|
101
|
+
<div>More Content</div>
|
|
102
|
+
</fieldset>
|
|
103
|
+
|
|
104
|
+
<hr />
|
|
105
|
+
|
|
106
|
+
<h4>Code Elements</h4>
|
|
107
|
+
<h5>Inline Code</h5>
|
|
108
|
+
<p>
|
|
109
|
+
For example, <code><section></code> should be wrapped as inline.
|
|
110
|
+
</p>
|
|
111
|
+
|
|
112
|
+
<h5>User Input</h5>
|
|
113
|
+
<p>
|
|
114
|
+
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
|
|
115
|
+
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
|
|
116
|
+
</p>
|
|
117
|
+
|
|
118
|
+
<h5>pre</h5>
|
|
119
|
+
<pre><p>Sample text here...</p></pre>
|
|
120
|
+
|
|
121
|
+
<h5>Variables</h5>
|
|
122
|
+
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
|
|
123
|
+
|
|
124
|
+
<h5>Sample Output</h5>
|
|
125
|
+
<samp>This text is meant to be treated as sample output from a computer program.</samp>
|
|
126
|
+
|
|
127
|
+
<br />
|
|
128
|
+
<br />
|
|
129
|
+
</main>
|
|
130
|
+
|
|
131
|
+
@@include('./partials/_footer.html')
|
|
132
|
+
@@include('./partials/_scripts.html')
|
|
133
|
+
</body>
|
|
134
|
+
</html>
|
package/gulpfile.js
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/// <binding ProjectOpened='watch-sass, watch-html' />
|
|
2
|
+
var gulp = require('gulp')
|
|
3
|
+
sass = require('gulp-dart-sass')
|
|
4
|
+
cleancss = require('gulp-clean-css')
|
|
5
|
+
concat = require('gulp-concat')
|
|
6
|
+
rename = require('gulp-rename')
|
|
7
|
+
fileInclude = require('gulp-file-include')
|
|
8
|
+
htmlBeautify = require('gulp-html-beautify');
|
|
9
|
+
|
|
10
|
+
var options = {
|
|
11
|
+
css: {
|
|
12
|
+
sassMainFile: 'src/bootsteam.scss',
|
|
13
|
+
output: 'bootsteam-theme.css',
|
|
14
|
+
sassFiles: 'src/**/*.scss',
|
|
15
|
+
dest: 'dist',
|
|
16
|
+
docs: 'docs/css'
|
|
17
|
+
},
|
|
18
|
+
html: {
|
|
19
|
+
files: 'docs-templates/*.html',
|
|
20
|
+
watchFiles: 'docs-templates/**/*.html',
|
|
21
|
+
dest: 'docs'
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
gulp.task('build-css', function () {
|
|
26
|
+
return gulp.src(options.css.sassMainFile)
|
|
27
|
+
.pipe(sass({ errLogToConsole: true }).on('error', sass.logError))
|
|
28
|
+
.pipe(concat(options.css.output))
|
|
29
|
+
.pipe(gulp.dest(options.css.dest))
|
|
30
|
+
.pipe(cleancss())
|
|
31
|
+
.pipe(rename({ suffix: '.min' }))
|
|
32
|
+
.pipe(gulp.dest(options.css.dest))
|
|
33
|
+
.pipe(gulp.dest(options.css.docs));
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
gulp.task('build-html', function () {
|
|
37
|
+
return gulp.src(options.html.files)
|
|
38
|
+
.pipe(fileInclude())
|
|
39
|
+
.pipe(htmlBeautify())
|
|
40
|
+
.pipe(gulp.dest(options.html.dest));
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
gulp.task('watch-sass', function () {
|
|
44
|
+
return gulp.watch(options.css.sassFiles, gulp.parallel(['build-css']));
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
gulp.task('watch-html', function () {
|
|
48
|
+
return gulp.watch(options.html.watchFiles, gulp.parallel(['build-html']));
|
|
49
|
+
})
|
|
50
|
+
|
|
51
|
+
gulp.task('default', gulp.parallel(['build-css']));
|
package/package.json
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": "5.3.0",
|
|
3
|
+
"name": "bootsteam-theme",
|
|
4
|
+
"private": false,
|
|
5
|
+
"dependencies": {
|
|
6
|
+
"bootstrap": "5.3.2"
|
|
7
|
+
},
|
|
8
|
+
"devDependencies": {
|
|
9
|
+
"gulp": "4.0.2",
|
|
10
|
+
"gulp-clean-css": "4.3.0",
|
|
11
|
+
"gulp-dart-sass": "1.1.0",
|
|
12
|
+
"gulp-concat": "2.6.1",
|
|
13
|
+
"gulp-rename": "2.0.0",
|
|
14
|
+
"gulp-file-include": "2.3.0",
|
|
15
|
+
"gulp-html-beautify": "1.0.1"
|
|
16
|
+
}
|
|
17
|
+
}
|
package/src/_alerts.scss
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
///<reference path="twr-variables.scss" />
|
|
2
|
+
///<reference path="twr-variables-dark.scss" />
|
|
3
|
+
///<reference path="../node_modules/bootstrap/scss/variables.scss" />
|
|
4
|
+
|
|
5
|
+
.alert {
|
|
6
|
+
&.alert-success a {
|
|
7
|
+
color: $success;
|
|
8
|
+
|
|
9
|
+
&:hover {
|
|
10
|
+
color: darken($success, 5);
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&.alert-danger a {
|
|
15
|
+
color: $danger;
|
|
16
|
+
|
|
17
|
+
&:hover {
|
|
18
|
+
color: darken($danger, 5);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&.alert-info a {
|
|
23
|
+
color: $info;
|
|
24
|
+
|
|
25
|
+
&:hover {
|
|
26
|
+
color: darken($info, 5);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
[data-bs-theme="dark"] {
|
|
32
|
+
.alert {
|
|
33
|
+
&.alert-success a {
|
|
34
|
+
color: darken($success, 5);
|
|
35
|
+
|
|
36
|
+
&:hover {
|
|
37
|
+
color: darken($success, 10);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&.alert-danger a {
|
|
42
|
+
color: darken($danger, 5);
|
|
43
|
+
|
|
44
|
+
&:hover {
|
|
45
|
+
color: darken($danger, 10);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&.alert-warning a {
|
|
50
|
+
color: darken($warning, 5);
|
|
51
|
+
|
|
52
|
+
&:hover {
|
|
53
|
+
color: darken($warning, 10);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&.alert-info a {
|
|
58
|
+
color: $info;
|
|
59
|
+
|
|
60
|
+
&:hover {
|
|
61
|
+
color: darken($info, 10);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
///<reference path="twr-variables.scss" />
|
|
2
|
+
///<reference path="twr-variables-dark.scss" />
|
|
3
|
+
///<reference path="../node_modules/bootstrap/scss/variables.scss" />
|
|
4
|
+
|
|
5
|
+
@include color-mode(dark) {
|
|
6
|
+
strong, .font-weight-bold {
|
|
7
|
+
color: white;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
kbd {
|
|
11
|
+
color: $body-color-dark;
|
|
12
|
+
background-color: black;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.form-control, .form-select {
|
|
16
|
+
background-color: $input-bg-dark;
|
|
17
|
+
border-color: $input-border-color-dark;
|
|
18
|
+
|
|
19
|
+
&:disabled, &[readonly] {
|
|
20
|
+
color: darken($body-color-dark, 40);
|
|
21
|
+
background-color: darken($input-bg-dark, 4);
|
|
22
|
+
|
|
23
|
+
&::placeholder {
|
|
24
|
+
color: darken($body-color-dark, 40);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&:focus[readonly] {
|
|
29
|
+
border-color: lighten($input-border-color-dark, 5);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&:focus {
|
|
33
|
+
border-color: lighten($primary, 5);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&.is-valid {
|
|
37
|
+
border-color: $success;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&.is-invalid, &.input-validation-error {
|
|
41
|
+
border-color: $danger;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.form-select optgroup {
|
|
46
|
+
background: darken($body-bg-dark, 3);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.input-group > .form-control, .input-group > .form-select {
|
|
50
|
+
border-right-color: $input-border-color-dark;
|
|
51
|
+
border-left-color: $input-border-color-dark;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.input-group-text {
|
|
55
|
+
border-color: $input-border-color-dark;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.form-check-input {
|
|
59
|
+
border-color: lighten($input-border-color-dark, 3);
|
|
60
|
+
background-color: $input-bg-dark;
|
|
61
|
+
|
|
62
|
+
&:checked {
|
|
63
|
+
background-color: $primary;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.form-control::file-selector-button {
|
|
68
|
+
border-color: $input-border-color-dark;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.blockquote-footer {
|
|
72
|
+
color: $text-muted;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
///<reference path="twr-variables.scss" />
|
|
2
|
+
///<reference path="twr-variables-dark.scss" />
|
|
3
|
+
///<reference path="../node_modules/bootstrap/scss/variables.scss" />
|
|
4
|
+
|
|
5
|
+
fieldset {
|
|
6
|
+
border: 1px solid $input-border-color;
|
|
7
|
+
padding-top: 0.4rem;
|
|
8
|
+
padding-left: 0.8rem;
|
|
9
|
+
padding-right: 0.8rem;
|
|
10
|
+
padding-bottom: 0.8rem;
|
|
11
|
+
|
|
12
|
+
legend {
|
|
13
|
+
width: auto;
|
|
14
|
+
float: none;
|
|
15
|
+
font-size: 1.1rem;
|
|
16
|
+
padding-left: 0.3rem;
|
|
17
|
+
padding-right: 0.3rem;
|
|
18
|
+
margin-left: 0.3rem;
|
|
19
|
+
margin-bottom: 0;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@include color-mode(dark) {
|
|
24
|
+
fieldset {
|
|
25
|
+
border-color: $input-border-color-dark;
|
|
26
|
+
}
|
|
27
|
+
}
|
package/src/_forms.scss
ADDED
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
///<reference path="twr-variables.scss" />
|
|
2
|
+
///<reference path="twr-variables-dark.scss" />
|
|
3
|
+
///<reference path="../node_modules/bootstrap/scss/variables.scss" />
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
.form-control.input-validation-error {
|
|
7
|
+
&:focus:not(:read-only) {
|
|
8
|
+
border-color: var(--bs-form-invalid-color);
|
|
9
|
+
box-shadow: none;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
/* ASP.NET validation error messages */
|
|
16
|
+
.field-validation-error, .validation-summary-errors {
|
|
17
|
+
color: var(--bs-form-invalid-color);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* jQuery validation input validation error */
|
|
21
|
+
.form-control.input-validation-error, .form-select.input-validation-error {
|
|
22
|
+
border-color: var(--bs-form-invalid-color);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* input type=color fixes */
|
|
26
|
+
input[type="color"].form-control {
|
|
27
|
+
padding: .3rem .5rem
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
input[type="color"]:not(.form-control) {
|
|
31
|
+
padding: 0;
|
|
32
|
+
border: none;
|
|
33
|
+
display: block;
|
|
34
|
+
height: 1.8rem;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* custom label styles */
|
|
38
|
+
label {
|
|
39
|
+
font-size: 0.7em;
|
|
40
|
+
text-transform: uppercase;
|
|
41
|
+
margin-bottom: 0;
|
|
42
|
+
margin-left: 0.4em;
|
|
43
|
+
opacity: 0.7;
|
|
44
|
+
letter-spacing:0.5px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
label.form-check-label {
|
|
48
|
+
font-size: 1rem;
|
|
49
|
+
text-transform: none;
|
|
50
|
+
margin-left: 0;
|
|
51
|
+
opacity: 1;
|
|
52
|
+
letter-spacing: unset;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.form-floating > label {
|
|
56
|
+
font-size: 1rem;
|
|
57
|
+
text-transform: none;
|
|
58
|
+
margin-left: 0;
|
|
59
|
+
opacity: .7;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.form-floating > .form-control-plaintext ~ label::after,
|
|
63
|
+
.form-floating > .form-control:focus ~ label::after,
|
|
64
|
+
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
|
|
65
|
+
.form-floating > .form-select ~ label::after {
|
|
66
|
+
background-color: transparent;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
/* form-select fixes */
|
|
71
|
+
.form-select {
|
|
72
|
+
-moz-padding-start: $input-padding-x;
|
|
73
|
+
|
|
74
|
+
optgroup {
|
|
75
|
+
-moz-appearance: none;
|
|
76
|
+
background: darken($input-bg,5);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&[multiple] {
|
|
80
|
+
option:checked {
|
|
81
|
+
background: darken($primary, 10);
|
|
82
|
+
color: $white;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
option:hover {
|
|
86
|
+
color: $white;
|
|
87
|
+
background: darken($primary, 15);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&:disabled {
|
|
92
|
+
background: $input-disabled-bg;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.form-check-label, .form-check-input,
|
|
97
|
+
label.form-check, label.form-check-inline {
|
|
98
|
+
cursor: pointer;
|
|
99
|
+
display: inline-block;
|
|
100
|
+
margin-bottom: 0;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.form-help-text {
|
|
104
|
+
opacity: 0.7;
|
|
105
|
+
padding-left: 10px;
|
|
106
|
+
font-size: 0.8rem;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.form-check ~ .form-help-text {
|
|
110
|
+
transform: translateY(-7px);
|
|
111
|
+
padding-left: 25px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.form-control::file-selector-button {
|
|
115
|
+
border-top: 1px $input-border-color solid;
|
|
116
|
+
border-left: 1px $input-border-color solid;
|
|
117
|
+
border-right: 1px $input-border-color solid;
|
|
118
|
+
border-top-left-radius: $border-radius;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.form-control, .form-select {
|
|
122
|
+
&:disabled, &[readonly] {
|
|
123
|
+
color: lighten($body-color, 40);
|
|
124
|
+
background-color: lighten($input-bg, 4);
|
|
125
|
+
|
|
126
|
+
&::placeholder {
|
|
127
|
+
color: lighten($body-color, 40);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
&:focus[readonly] {
|
|
132
|
+
border-color: darken($input-border-color, 15);
|
|
133
|
+
}
|
|
134
|
+
}
|
package/src/_tables.scss
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
///<reference path="twr-variables.scss" />
|
|
2
|
+
///<reference path="twr-variables-dark.scss" />
|
|
3
|
+
///<reference path="../node_modules/bootstrap/scss/variables.scss" />
|
|
4
|
+
|
|
5
|
+
[data-bs-theme="dark"] {
|
|
6
|
+
.table-primary {
|
|
7
|
+
--bs-table-color: var(--bs-primary-text-emphasis);
|
|
8
|
+
--bs-table-bg: var(--bs-primary-bg-subtle);
|
|
9
|
+
--bs-table-hover-color: var(--bs-primary-text-emphasis);
|
|
10
|
+
--bs-table-hover-bg: #{lighten(shade-color($primary, 80%), 6)};
|
|
11
|
+
--bs-table-striped-color: var(--bs-primary-text-emphasis);
|
|
12
|
+
--bs-table-striped-bg: #{lighten(shade-color($primary, 80%), 3)};
|
|
13
|
+
--bs-table-active-color: #{saturate($primary-text-emphasis-dark, 30)};
|
|
14
|
+
--bs-table-active-bg: #{saturate(lighten(shade-color($primary, 80%), 6),60)};
|
|
15
|
+
border-color: var(--bs-primary-border-subtle);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.table-secondary {
|
|
19
|
+
--bs-table-color: var(--bs-secondary-text-emphasis);
|
|
20
|
+
--bs-table-bg: var(--bs-secondary-bg-subtle);
|
|
21
|
+
--bs-table-hover-color: var(--bs-secondary-text-emphasis);
|
|
22
|
+
--bs-table-hover-bg: #{lighten(shade-color($secondary, 80%), 5)};
|
|
23
|
+
--bs-table-striped-color: var(--bs-secondary-text-emphasis);
|
|
24
|
+
--bs-table-striped-bg: #{lighten(shade-color($secondary, 80%), 3)};
|
|
25
|
+
--bs-table-active-color: #{saturate($secondary-text-emphasis-dark, 20)};
|
|
26
|
+
--bs-table-active-bg: #{lighten(shade-color($secondary, 80%), 5)};
|
|
27
|
+
border-color: var(--bs-secondary-border-subtle);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.table-success {
|
|
31
|
+
--bs-table-color: var(--bs-success-text-emphasis);
|
|
32
|
+
--bs-table-bg: var(--bs-success-bg-subtle);
|
|
33
|
+
--bs-table-hover-color: var(--bs-success-text-emphasis);
|
|
34
|
+
--bs-table-hover-bg: #{lighten(shade-color($success, 80%), 5)};
|
|
35
|
+
--bs-table-striped-color: var(--bs-success-text-emphasis);
|
|
36
|
+
--bs-table-striped-bg: #{lighten(shade-color($success, 80%), 3)};
|
|
37
|
+
--bs-table-active-color: #{saturate($success-text-emphasis-dark, 30)};
|
|
38
|
+
--bs-table-active-bg: #{saturate(lighten(shade-color($success, 80%), 6),60)};
|
|
39
|
+
border-color: var(--bs-success-border-subtle);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.table-danger {
|
|
43
|
+
--bs-table-color: var(--bs-danger-text-emphasis);
|
|
44
|
+
--bs-table-bg: var(--bs-danger-bg-subtle);
|
|
45
|
+
--bs-table-hover-color: var(--bs-danger-text-emphasis);
|
|
46
|
+
--bs-table-hover-bg: #{lighten(shade-color($danger, 80%), 5)};
|
|
47
|
+
--bs-table-striped-color: var(--bs-danger-text-emphasis);
|
|
48
|
+
--bs-table-striped-bg: #{lighten(shade-color($danger, 80%), 3)};
|
|
49
|
+
--bs-table-active-color: #{saturate($danger-text-emphasis-dark, 30)};
|
|
50
|
+
--bs-table-active-bg: #{saturate(lighten(shade-color($danger, 80%), 6),60)};
|
|
51
|
+
border-color: var(--bs-danger-border-subtle);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.table-warning {
|
|
55
|
+
--bs-table-color: var(--bs-warning-text-emphasis);
|
|
56
|
+
--bs-table-bg: var(--bs-warning-bg-subtle);
|
|
57
|
+
--bs-table-hover-color: var(--bs-warning-text-emphasis);
|
|
58
|
+
--bs-table-hover-bg: #{lighten(shade-color($warning, 80%), 5)};
|
|
59
|
+
--bs-table-striped-color: var(--bs-warning-text-emphasis);
|
|
60
|
+
--bs-table-striped-bg: #{lighten(shade-color($warning, 80%), 3)};
|
|
61
|
+
--bs-table-active-color: #{saturate($warning-text-emphasis-dark, 30)};
|
|
62
|
+
--bs-table-active-bg: #{saturate(lighten(shade-color($warning, 80%), 6),60)};
|
|
63
|
+
border-color: var(--bs-warning-border-subtle);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.table-info {
|
|
67
|
+
--bs-table-color: var(--bs-info-text-emphasis);
|
|
68
|
+
--bs-table-bg: var(--bs-info-bg-subtle);
|
|
69
|
+
--bs-table-hover-color: var(--bs-info-text-emphasis);
|
|
70
|
+
--bs-table-hover-bg: #{lighten(shade-color($info, 80%), 5)};
|
|
71
|
+
--bs-table-striped-color: var(--bs-info-text-emphasis);
|
|
72
|
+
--bs-table-striped-bg: #{lighten(shade-color($info, 80%), 3)};
|
|
73
|
+
--bs-table-active-color: #{saturate($info-text-emphasis-dark, 30)};
|
|
74
|
+
--bs-table-active-bg: #{saturate(lighten(shade-color($info, 80%), 6),60)};
|
|
75
|
+
border-color: var(--bs-info-border-subtle);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
///<reference path="twr-variables.scss" />
|
|
2
|
+
///<reference path="../node_modules/bootstrap/scss/variables.scss" />
|
|
3
|
+
|
|
4
|
+
$body-color-dark: #c6d4df !default;
|
|
5
|
+
$body-bg-dark: #1b2838 !default;
|
|
6
|
+
|
|
7
|
+
$link-color-dark: lighten(#417a9b, 5) !default;
|
|
8
|
+
$link-hover-color-dark: darken($link-color-dark, 10) !default;
|
|
9
|
+
|
|
10
|
+
$body-secondary-bg-dark: lighten($body-bg-dark, 10) !default;
|
|
11
|
+
|
|
12
|
+
$body-tertiary-bg-dark: darken(mix($gray-800, $primary, 50%), 5) !default;//mix($gray-800, $gray-900, 50%) !default;
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
$form-switch-color-dark: lighten($body-secondary-bg-dark, 10) !default;
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
$form-invalid-color-dark: #ea868f !default;
|
|
19
|
+
$form-invalid-border-color-dark: #ea868f !default;
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
$input-border-color-dark: lighten($body-bg-dark, 10);
|
|
23
|
+
$input-bg-dark: lighten($body-bg-dark, 3);
|