Skip to content

Commit fefcce5

Browse files
javadbatjavadbat
committed
add message-box css variable
1 parent 1a9fa6e commit fefcce5

File tree

4 files changed

+39
-30
lines changed

4 files changed

+39
-30
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
#changelog
2+
## [3.4.3] - 2022-11-02
3+
### new features
4+
- add `--jb-date-input-message-box-padding` and `--jb-date-input-message-box-text-align` and `--jb-date-input-message-box-font-weight` css variable
25
## [3.4.2] - 2022-11-02
36
### new features
47
- add `--jb-date-input-box-shadow-focus` and `--jb-date-input-input-margin` css variable

‎README.md‎

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -230,33 +230,37 @@ body{
230230
```
231231
#### variable list
232232

233-
| css variable name | description |
234-
| ------------- | ------------- |
235-
| --jb-date-input-margin | web-component margin default is `0 12px` |
236-
| --jb-date-input-border-radius | web-component border-radius default is `16px` |
237-
| --jb-date-input-border-color | border color of select in normal mode |
238-
| --jb-date-input-border-color-focus | border color when user focus on input |
239-
| --jb-date-input-bgcolor | background color of input |
240-
| --jb-date-input-message-box-display | default is block but if you set it to none message box will be hidden |
241-
| --jb-date-input-message-box-color | change color of message under box |
242-
| --jb-date-input-message-box-color-error | change color of message under box |
243-
| --jb-date-input-text-align | text align of input |
244-
| --jb-date-input-box-height | height of input box |
245-
| --jb-date-input-border-width | general border width default is `1px` |
246-
| --jb-date-input-border-bottom-width | border bottom width default is `3px` |
247-
| --jb-date-input-label-font-size | font size of date input label default is `0.8em` |
248-
| --jb-date-input-label-margin | change label margin default is `0 4px` |
249-
| --jb-date-input-label-weight | label font-weight default is normal |
250-
| --jb-date-input-placeholder-color | input placeholder color default is `initial` |
251-
| --jb-date-input-placeholder-font-size | place holder font size default is `1.1em` |
252-
| --jb-date-input-value-color | date input value color default is `#1f1735` |
253-
| --jb-date-input-value-font-size | date input value font-size |
254-
| --jb-date-input-calender-wrapper-bg-color | calender background color default color is `#fff` |
255-
| --jb-date-input-calendar-wrapper-z-index | opend calendar `z-index` is `10` but you can change it to number you want |
256-
| --jb-date-input-calender-wrapper-border-radius| calendar border radius default is `24px` |
257-
| --jb-date-input-input-margin | input margin default is `4px 0` |
258-
| --jb-date-input-box-shadow | input box-shadow default is none |
259-
| --jb-date-input-box-shadow-focus | input box-shadow when input is focused default is none |
233+
| --jb-date-input-margin | web-component margin default is `0 12px` |
234+
| --jb-date-input-border-radius | web-component border-radius default is `16px` |
235+
| css variable name | description |
236+
| ------------- | ------------- |
237+
| --jb-date-input-border-color | border color of select in normal mode |
238+
| --jb-date-input-border-color-focus | border color when user focus on input |
239+
| --jb-date-input-bgcolor | background color of input |
240+
| --jb-date-input-message-box-display | default is block but if you set it to none message box will be hidden |
241+
| --jb-date-input-message-box-color | change color of message under box |
242+
| --jb-date-input-message-box-color-error | change color of message under box |
243+
| --jb-date-input-message-box-font-size | font-size of message box under the input box |
244+
| --jb-date-input-message-box-font-weight | font-weight of message box under the input box |
245+
| --jb-date-input-message-box-padding | font-size of message box under the input box |
246+
| --jb-date-input-text-align | text align of input |
247+
| --jb-date-input-box-height | height of input box |
248+
| --jb-date-input-border-width | general border width default is `1px` |
249+
| --jb-date-input-border-bottom-width | border bottom width default is `3px` |
250+
| --jb-date-input-label-font-size | font size of date input label default is `0.8em` |
251+
| --jb-date-input-label-margin | change label margin default is `0 4px` |
252+
| --jb-date-input-label-weight | label font-weight default is normal |
253+
| --jb-date-input-placeholder-color | input placeholder color default is `initial` |
254+
| --jb-date-input-placeholder-font-size | place holder font size default is `1.1em` |
255+
| --jb-date-input-value-color | date input value color default is `#1f1735` |
256+
| --jb-date-input-value-font-size | date input value font-size |
257+
| --jb-date-input-calender-wrapper-bg-color | calender background color default color is `#fff` |
258+
| --jb-date-input-calendar-wrapper-z-index | opend calendar `z-index` is `10` but you can change it to number you want |
259+
| --jb-date-input-calender-wrapper-border-radius| calendar border radius default is `24px` |
260+
| --jb-date-input-input-margin | input margin default is `4px 0` |
261+
| --jb-date-input-box-shadow | input box-shadow default is none |
262+
| --jb-date-input-box-shadow-focus | input box-shadow when input is focused default is none |
263+
260264

261265
if you want to change opened date picker style please read [jb-calendar](https://github.com/javadbat/jb-calendar) readme file
262266
## add custom element in input box

‎lib/JBDateInput.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,10 @@
9898
}
9999

100100
.message-box {
101-
font-size: 0.7em;
102-
padding: 2px 8px;
101+
font-size: var(--jb-date-input-message-box-font-size, 0.7em);
102+
font-weight: var(--jb-date-input-message-box-font-weight, normal);
103+
text-align: var(--jb-date-input-message-box-text-align, initial);
104+
padding: var(--jb-date-input-message-box-padding, 2px 8px);
103105
color: var(--jb-date-input-message-box-color, #929292);
104106
display: var(--jb-date-input-message-box-display, block);
105107

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"jalali web-component",
2929
"jalali web component"
3030
],
31-
"version": "3.4.2",
31+
"version": "3.4.3",
3232
"bugs": "https://github.com/javadbat/jb-date-input/issues",
3333
"license": "MIT",
3434
"files": [

0 commit comments

Comments
 (0)