test-bentoweb-ui 1.0.44 → 1.0.45

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/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "test-bentoweb-ui",
3
- "version": "1.0.44",
3
+ "version": "1.0.45",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "files": [
7
- "dist"
7
+ "dist",
8
+ "src/assets/styles/_variables.scss"
8
9
  ],
9
10
  "main": "./dist/bentoweb-ui.umd.js",
10
11
  "module": "./dist/bentoweb-ui.es.js",
@@ -13,7 +14,8 @@
13
14
  "import": "./dist/bentoweb-ui.es.js",
14
15
  "require": "./dist/bentoweb-ui.umd.js"
15
16
  },
16
- "./dist/style.css": "./dist/bentoweb-ui.css"
17
+ "./dist/style.css": "./dist/bentoweb-ui.css",
18
+ "./scss": "./src/assets/styles/_variables.scss"
17
19
  },
18
20
  "scripts": {
19
21
  "dev": "vite",
@@ -0,0 +1,202 @@
1
+ @import '_mixins.scss';
2
+
3
+ /*===================
4
+ 1. Font
5
+ IBM Plex Sans Thai
6
+ =====================*/
7
+ @at-root {
8
+ @font-face {
9
+ font-family: 'IBM_Plex_Sans_Thai';
10
+ src: url('../fonts/IBMPlexSansThai-Regular.woff2') format('woff2'),
11
+ url('../fonts/IBMPlexSansThai-Regular.woff') format('woff');
12
+ font-weight: normal;
13
+ font-style: normal;
14
+ }
15
+ }
16
+ @at-root {
17
+ @font-face {
18
+ font-family: 'IBM_Plex_Sans_Thai';
19
+ src: url('../fonts/IBMPlexSansThai-Bold.woff2') format('woff2'),
20
+ url('../fonts/IBMPlexSansThai-Bold.woff') format('woff');
21
+ font-weight: 600;
22
+ font-style: normal;
23
+ }
24
+ }
25
+ @at-root {
26
+ @font-face {
27
+ font-family: 'IBM_Plex_Sans_Thai';
28
+ src: url('../fonts/IBMPlexSansThai-SemiBold.woff2') format('woff2'),
29
+ url('../fonts/IBMPlexSansThai-SemiBold.woff') format('woff');
30
+ font-weight: 700;
31
+ font-style: normal;
32
+ }
33
+ }
34
+
35
+
36
+ /*==================
37
+ Variable
38
+ ====================*/
39
+ /*=== Fonts ===*/
40
+ $font-primary: 'IBM_Plex_Sans_Thai',"tahoma","Helvetica Neue",Helvetica,Arial,sans-serif;
41
+ $font-tahoma:"Tahoma","Helvetica Neue",Helvetica,Arial,sans-serif;
42
+
43
+ /*=== Colors ===*/
44
+ $text-dark:#1E1E1E;
45
+ $text-primary:#F00051;
46
+ $text-secondary:#F5F5F6;
47
+ $text-muted:#636363;
48
+ $text-danger:#FF2A00;
49
+ $text-light: #F7F7F8;
50
+ $text-disable:#CCCCCC;
51
+ $text-link:#0077FF;
52
+ $text-success:#09C405;
53
+ $text-warning:#FF9409;
54
+
55
+ $blue-100:#0077FF;
56
+ $gray-100:#636363;
57
+ $gray-200:#939393;
58
+ $gray-300:#BFBFBF;
59
+
60
+ $white:#FFFFFF;
61
+ $bg-100:#EEEEEE;
62
+
63
+ $border-color:#EEEEEE;
64
+ $line-gray-100:#EEEEEE;
65
+ $line-gray-200:#DBDBDB;
66
+
67
+
68
+ $radius-8:8px;
69
+ $radius-10:10px;
70
+ $radius-15:15px;
71
+ $radius-0:0px;
72
+
73
+ $space-4: 4px;
74
+ $space-6: 6px;
75
+ $space-8: 8px;
76
+ $space-10: 10px;
77
+ $space-12: 12px;
78
+ $space-15: 15px;
79
+ $space-20: 20px;
80
+ $space-30: 30px;
81
+ $space-100: 100px;
82
+
83
+
84
+
85
+
86
+
87
+
88
+ $bg-dim-primary:#FFECF2;
89
+ $bg-dim-success:#EAFBEA;
90
+ $bg-dim-danger:#FFEEEB;
91
+ $bg-disable:#E3E3E3;
92
+ $bg-warning-subtle:#FFF2E1;
93
+
94
+ /*btw style*/
95
+ $body-bg:#EEE;
96
+ $body-font:$font-primary;
97
+ $body-color:$text-dark;
98
+
99
+ /*Modaal*/
100
+ $modal-lg: 1140px !default;
101
+ $modal-md: 660px !default;
102
+ $modal-sm: 300px !default;
103
+
104
+ /*Tabs*/
105
+ $nav-pills-border-color:$line-gray-200;
106
+ $nav-pills-color: $text-dark;
107
+
108
+ $nav-tabs-link-active-color:$text-primary;
109
+ $nav-tabs-link-active-bg:$bg-dim-primary;
110
+ $nav-tabs-link-active-border-color:$text-primary;
111
+
112
+ /*breadcrumb*/
113
+ $breadcrumb-color:$gray-200;
114
+ $breadcrumb-bg: white;
115
+ $breadcrumb-active-color: $text-dark;
116
+
117
+ /*pagination*/
118
+ $pagination-bg: $text-light;
119
+ $pagination-color: $text-dark;
120
+
121
+ $pagination-active-bg:$text-primary;
122
+ $pagination-active-color:white;
123
+
124
+ $pagination-disabled-bg: $text-light;
125
+ $pagination-disabled-color: $text-disable;
126
+
127
+ /*sidebar*/
128
+ $sidebar-heading-color:$gray-300;
129
+ $sidebar-color:$text-dark;
130
+
131
+ $sidebar-active-bg:$bg-dim-primary;
132
+ $sidebar-active-color:$text-primary;
133
+
134
+ /*table*/
135
+ $table-border-color:$border-color!important;
136
+ $table-th-color:$gray-200;
137
+
138
+ /*toggle switch*/
139
+ $toggle-bg-color:$text-light;
140
+ $toggle-label-text: $text-dark;
141
+ $toggle-active-bg:$bg-dim-primary;
142
+ $toggle-active-text:$text-primary;
143
+ $toggle-active-border:$text-primary;
144
+
145
+ /*Form*/
146
+ $form-text-font-weight:600;
147
+ $input-placeholder-color: $gray-200;
148
+ $input-border-color:$border-color;
149
+
150
+ /*Checkbox*/
151
+ $form-check-input-checked-bg-color:$text-primary;
152
+ $form-check-input-checked-border-color:$text-primary;
153
+ $form-check-input-checked-color: $text-primary;
154
+
155
+ $form-check-input-radio-bg-color:$text-dark;
156
+ $form-check-input-radio-border-color:$text-dark;
157
+ $form-check-input-radio-color:$text-dark;
158
+
159
+ /*vue3datepicke : Light mode configuration**/
160
+ $input-group-bg-color:$border-color!important;
161
+ $input-group-icon-color:$gray-200;
162
+
163
+ /*text*/
164
+ .text-primary{color: $text-primary!important;}
165
+ .text-danger{color: $text-danger!important;}
166
+ .text-muted{color: $gray-200!important;}
167
+ .text-gray-100{color: $gray-100;}
168
+ .text-gray-200{color: $gray-200;}
169
+ .text-gray-300{color: $gray-300;}
170
+
171
+ .size14{font-size: rem(14)!important;}
172
+ .size16{font-size: rem(16)!important;}
173
+ .size18{font-size: rem(18)!important;}
174
+ .size20{font-size: rem(20)!important;}
175
+ .size24{font-size: rem(24);}
176
+ .size25{font-size: rem(25);}
177
+ .size30{font-size: rem(30)!important;}
178
+ .size35{font-size: rem(35);}
179
+ .size40{font-size: rem(40);}
180
+ .size50{font-size: rem(50);}
181
+
182
+ .fw-bold{font-weight: 600!important;}
183
+ .fw-bolder{font-weight: 700!important;}
184
+
185
+ /*Padding*/
186
+ .py-10{padding-top: rem(10)!important; padding-bottom: rem(10)!important;}
187
+
188
+ .bg-primary{background-color: $bg-disable!important;}
189
+ .bg-warning-subtle{background-color: $bg-warning-subtle;}
190
+ .bg-100{background-color: $bg-100;}
191
+
192
+ .border-top{border-color: $border-color!important;}
193
+ .border-light{border-color: $border-color!important;}
194
+
195
+ .border-warning{border-color:$text-warning;}
196
+
197
+ .topic-normal{font-size: rem(25); font-weight: 700; margin-bottom: 0;}
198
+
199
+ /**/
200
+ .rounded-10{border-radius: rem(10);}
201
+
202
+