@brandup/ui-kit 1.0.1

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.
Files changed (8) hide show
  1. package/README.md +108 -0
  2. package/package.json +35 -0
  3. package/source/adaptive.less +61 -0
  4. package/source/common.less +108 -0
  5. package/source/index.ts +8 -0
  6. package/source/inputs.less +107 -0
  7. package/source/reset.less +28 -0
  8. package/source/styles.less +3 -0
package/README.md ADDED
@@ -0,0 +1,108 @@
1
+ # brandup-ui-kit
2
+
3
+ ## Installation and use
4
+
5
+ Install NPM package [@brandup/ui](https://www.npmjs.com/package/@brandup/ui-kit).
6
+
7
+ ```
8
+ npm i @brandup/ui-kit@latest
9
+ ```
10
+
11
+ Add `@brandup/ui-kit` middleware to your application.
12
+
13
+ ```
14
+ import { ApplicationBuilder } from "@brandup/ui-app";
15
+ import { uiKitMiddlewareFactory } from "@brandup/ui-kit";
16
+
17
+ const builder = new ApplicationBuilder({});
18
+ builder
19
+ .useMiddleware(uiKitMiddlewareFactory)
20
+ .useMiddleware(... other middleware);
21
+
22
+ const app = builder.build({ basePath: "/" });
23
+
24
+ app.run();
25
+ ```
26
+
27
+ ## Styles
28
+
29
+ ### Reset styles
30
+
31
+ Reset styles for `<ul>`, `<ol>`, `<menu>`, `<img>` and others.
32
+
33
+ See [reset.less](source/reset.less) file.
34
+
35
+ ### Body styles
36
+
37
+ Default root styles for `<body>` tag.
38
+
39
+ ```
40
+ --main-background
41
+ --font-size
42
+ --font-family
43
+ --font-weight
44
+ --line-height
45
+ --text-color
46
+ ```
47
+
48
+ See [common.less](source/common.less) file.
49
+
50
+ ### Header styles
51
+
52
+ Default root styles for `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`.
53
+
54
+ ```
55
+ --h-line-height
56
+
57
+ --h1-font-size
58
+ --h1-font-weidth
59
+
60
+ --h2-font-size
61
+ --h2-font-weidth
62
+
63
+ --h3-font-size
64
+ --h3-font-weidth
65
+
66
+ --h4-font-size
67
+ --h4-font-weidth
68
+
69
+ --h5-font-size
70
+ --h5-font-weidth
71
+ ```
72
+
73
+ See [common.less](source/common.less) file.
74
+
75
+ ### SVG styles
76
+
77
+ Default root styles for `<svg>` tag.
78
+
79
+ ```
80
+ --svg-size: 20px;
81
+ --svg-width: var(--svg-size);
82
+ --svg-height: var(--svg-size);
83
+ --svg-fill: var(--text-color);
84
+ --svg-stroke: var(--text-color);
85
+ ```
86
+
87
+ See [common.less](source/common.less) file.
88
+
89
+ ### Content width
90
+
91
+ Add `content-width` class.
92
+
93
+ ```
94
+ --content-max-width
95
+ --content-min-width
96
+ --content-padding-lr
97
+ ```
98
+
99
+ See [common.less](source/common.less) file.
100
+
101
+ ### Input styles
102
+
103
+ Styles for:
104
+ - reset for input, textarea, button
105
+ - input[type=text]
106
+ - textarea
107
+
108
+ See [inputs.less](source/inputs.less) file.
package/package.json ADDED
@@ -0,0 +1,35 @@
1
+ {
2
+ "name": "@brandup/ui-kit",
3
+ "description": "Input control type and styles.",
4
+ "keywords": [
5
+ "brandup",
6
+ "javascript",
7
+ "typescript",
8
+ "ui"
9
+ ],
10
+ "author": {
11
+ "name": "Dmitry Kovyazin",
12
+ "email": "it@brandup.online"
13
+ },
14
+ "homepage": "https://github.com/brandup-online/brandup-ui/npm/brandup-ui-input",
15
+ "repository": {
16
+ "type": "git",
17
+ "url": "https://github.com/brandup-online/brandup-ui.git"
18
+ },
19
+ "bugs": {
20
+ "url": "https://github.com/brandup-online/brandup-ui/issues",
21
+ "email": "it@brandup.online"
22
+ },
23
+ "type": "module",
24
+ "license": "Apache-2.0",
25
+ "version": "1.0.1",
26
+ "main": "source/index.ts",
27
+ "types": "source/index.ts",
28
+ "dependencies": {
29
+ "@brandup/ui-app": "^1.0.32"
30
+ },
31
+ "files": [
32
+ "source",
33
+ "README.md"
34
+ ]
35
+ }
package/source/adaptive.less ADDED
@@ -0,0 +1,61 @@
1
+ @adaptive-desktop-small: 1650px;
2
+ @adaptive-notebook: 1550px;
3
+ @adaptive-notebook-small: 1370px;
4
+ @adaptive-tablet: 1030px;
5
+ @adaptive-tablet-small: 850px;
6
+ @adaptive-mobile: 500px;
7
+ @adaptive-mobile-small: 370px;
8
+
9
+ .adaptive-desktop-small(@rules) {
10
+ @media all and (max-width: @adaptive-desktop-small) {
11
+ @rules();
12
+ }
13
+ }
14
+
15
+ .adaptive-notebook(@rules) {
16
+ @media all and (max-width: @adaptive-notebook) {
17
+ @rules();
18
+ }
19
+ }
20
+
21
+ .adaptive-notebook-small(@rules) {
22
+ @media all and (max-width: @adaptive-notebook-small) {
23
+ @rules();
24
+ }
25
+ }
26
+
27
+ .adaptive-tablet(@rules) {
28
+ @media all and (max-width: @adaptive-tablet) {
29
+ @rules();
30
+ }
31
+ }
32
+
33
+ .adaptive-tablet-landscape(@rules) {
34
+ @media all and (max-width: @adaptive-tablet) and (orientation: landscape) {
35
+ @rules();
36
+ }
37
+ }
38
+
39
+ .adaptive-tablet-small(@rules) {
40
+ @media all and (max-width: @adaptive-tablet-small) {
41
+ @rules();
42
+ }
43
+ }
44
+
45
+ .adaptive-mobile(@rules) {
46
+ @media all and (max-width: @adaptive-mobile) {
47
+ @rules();
48
+ }
49
+ }
50
+
51
+ .adaptive-mobile-landscape(@rules) {
52
+ @media all and (max-width: @adaptive-mobile) and (orientation: landscape) {
53
+ @rules();
54
+ }
55
+ }
56
+
57
+ .adaptive-mobile-small(@rules) {
58
+ @media all and (max-width: var(-adaptive-mobile-small)) {
59
+ @rules();
60
+ }
61
+ }
package/source/common.less ADDED
@@ -0,0 +1,108 @@
1
+ :root {
2
+ // body
3
+ --main-background: #fff;
4
+ --font-size: 14px;
5
+ --font-family: system-ui, 'Segoe UI', Helvetica, 'Gill Sans', 'Verdana', 'Arial', sans-serif;
6
+ --font-weight: 400;
7
+ --line-height: 130%;
8
+ --text-color: #222;
9
+
10
+ // headers
11
+ --h-line-height: 130%;
12
+ --h1-font-size: 56px;
13
+ --h1-font-weidth: 600;
14
+ --h2-font-size: 50px;
15
+ --h2-font-weidth: 600;
16
+ --h3-font-size: 28px;
17
+ --h3-font-weidth: 600;
18
+ --h4-font-size: 22px;
19
+ --h4-font-weidth: 600;
20
+ --h5-font-size: 18px;
21
+ --h5-font-weidth: 600;
22
+
23
+ // content-width
24
+ --content-max-width: 1280px; // максимальная ширина контентной области
25
+ --content-min-width: 320px; // минимальная ширина контентной области
26
+ --content-padding-lr: 40px; // отступы контентной области слева и справа до краёв браузера
27
+
28
+ // svg
29
+ --svg-size: 20px;
30
+ --svg-width: var(--svg-size);
31
+ --svg-height: var(--svg-size);
32
+ --svg-fill: var(--text-color);
33
+ --svg-stroke: var(--text-color);
34
+ }
35
+
36
+ // Body styles
37
+
38
+ body {
39
+ -webkit-font-smoothing: antialiased;
40
+ -moz-osx-font-smoothing: grayscale;
41
+ text-rendering: optimizeLegibility;
42
+ -webkit-tap-highlight-color: transparent;
43
+ overflow: auto;
44
+ font-size: var(--font-size);
45
+ font-family: var(--font-family);
46
+ font-weight: var(--font-weight);
47
+ line-height: var(--line-height);
48
+ color: var(--text-color);
49
+ background: var(--main-background);
50
+ }
51
+
52
+ // Header styles
53
+
54
+ h1,
55
+ h2,
56
+ h3,
57
+ h4,
58
+ h5 {
59
+ padding: 0;
60
+ margin: 0;
61
+ line-height: var(--h-line-height);
62
+ }
63
+
64
+ h1 {
65
+ font-size: var(--h1-font-size);
66
+ font-weight: var(--h1-font-weidth);
67
+ }
68
+
69
+ h2 {
70
+ font-size: var(--h2-font-size);
71
+ font-weight: var(--h2-font-weidth);
72
+ }
73
+
74
+ h3 {
75
+ font-size: var(--h3-font-size);
76
+ font-weight: var(--h3-font-weidth);
77
+ }
78
+
79
+ h4 {
80
+ font-size: var(--h4-font-size);
81
+ font-weight: var(--h4-font-weidth);
82
+ }
83
+
84
+ h5 {
85
+ font-size: var(--h5-font-size);
86
+ font-weight: var(--h5-font-weidth);
87
+ }
88
+
89
+ // Svg styles
90
+
91
+ svg {
92
+ display: block;
93
+ width: var(--svg-width);
94
+ height: var(--svg-height);
95
+ fill: var(--svg-fill);
96
+ stroke: var(--svg-stroke);
97
+ }
98
+
99
+ // Content width styles
100
+
101
+ .content-width {
102
+ width: 100%;
103
+ max-width: var(--content-max-width);
104
+ margin: 0 auto;
105
+ padding-left: var(--content-padding-lr);
106
+ padding-right: var(--content-padding-lr);
107
+ box-sizing: border-box;
108
+ }
package/source/index.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { Middleware } from "@brandup/ui-app";
2
+ import "./styles.less";
3
+
4
+ export const uiKitMiddlewareFactory = (): Middleware => {
5
+ return {
6
+ name: "uikit"
7
+ };
8
+ };
package/source/inputs.less ADDED
@@ -0,0 +1,107 @@
1
+ /*
2
+
3
+ 1. Набор переменных для контролов пользовательских ввода данных.
4
+ 2. Стили для тегов: input, textarea, select
5
+
6
+ */
7
+
8
+ :root {
9
+ // placeholder
10
+ --placeholder-font-weidth: inherit;
11
+ --placeholder-font-style: inherit;
12
+ --placeholder-color: inherit;
13
+
14
+ // border
15
+ --input-border-width: 1px;
16
+ --input-border-color: #aaa;
17
+ --input-border-type: solid;
18
+ --input-border-radius: 0;
19
+ --input-fill: #fff;
20
+
21
+ // size
22
+ --input-width: auto;
23
+ --input-height: 42px;
24
+ --input-padding-lr: 13px;
25
+
26
+ // font
27
+ --input-color: var(--text-color);
28
+ --input-font-size: inherit;
29
+ --input-font-weidth: inherit;
30
+ --input-font-style: inherit;
31
+
32
+ --hover--input-border-color: #555;
33
+ --hover--input-fill: var(--input-fill);
34
+ --hover--input-color: var(--input-color);
35
+
36
+ --disabled--input-border-color: #aaa;
37
+ --disabled--input-fill: #eee;
38
+ --disabled--input-color: var(--input-color);
39
+
40
+ --invalid--input-border-color: red;
41
+ --invalid--input-fill: var(--input-fill);
42
+ --invalid--input-color: var(--input-color);
43
+ }
44
+
45
+ input,
46
+ textarea,
47
+ button {
48
+ appearance: none;
49
+ font-family: inherit;
50
+ font-size: unset;
51
+ line-height: unset;
52
+ color: unset;
53
+ box-sizing: border-box;
54
+ padding: 0;
55
+ margin: 0;
56
+ }
57
+
58
+ input[type=text], textarea {
59
+ outline: none;
60
+ border-style: var(--input-border-type);
61
+ border-width: var(--input-border-width);
62
+ border-color: var(--input-border-color);
63
+ border-radius: var(--input-border-radius);
64
+ background: var(--input-fill);
65
+ width: var(--input-width);
66
+ min-height: var(--input-height);
67
+ padding-left: var(--input-padding-lr);
68
+ padding-right: var(--input-padding-lr);
69
+
70
+ font-size: var(--input-font-size);
71
+ font-weight: var(--input-font-weidth);
72
+ font-style: var(--input-font-style);
73
+ color: var(--input-color);
74
+
75
+ &::placeholder {
76
+ font-weight: var(--placeholder-font-weidth);
77
+ font-style: var(--placeholder-font-style);
78
+ color: var(--placeholder-color);
79
+ }
80
+
81
+ &:hover, &:focus {
82
+ border-color: var(--hover--input-border-color);
83
+ background: var(--hover--input-fill);
84
+ color: var(--hover--input-color);
85
+ }
86
+
87
+ &:read-only {
88
+ cursor: default;
89
+ }
90
+
91
+ &:disabled {
92
+ border-color: var(--disabled--input-border-color);
93
+ background: var(--disabled--input-fill);
94
+ color: var(--disabled--input-color);
95
+ }
96
+
97
+ &:user-invalid {
98
+ border-color: var(--invalid--input-border-color);
99
+ background: var(--invalid--input-fill);
100
+ color: var(--invalid--input-color);
101
+ }
102
+ }
103
+
104
+ textarea {
105
+ padding-top: calc(1em / 2);
106
+ padding-bottom: calc(1em / 2);
107
+ }
package/source/reset.less ADDED
@@ -0,0 +1,28 @@
1
+ html,
2
+ body {
3
+ margin: 0;
4
+ padding: 0;
5
+ height: 100%;
6
+ }
7
+
8
+ ul,
9
+ ol,
10
+ menu {
11
+ list-style: none;
12
+ padding: 0;
13
+ margin: 0;
14
+
15
+ & li {
16
+ padding: 0;
17
+ margin: 0;
18
+ }
19
+ }
20
+
21
+ figure {
22
+ margin: 0;
23
+ padding: 0;
24
+ }
25
+
26
+ img {
27
+ display: block;
28
+ }
package/source/styles.less ADDED
@@ -0,0 +1,3 @@
1
+ @import "reset.less";
2
+ @import "common.less";
3
+ @import "inputs.less";