Skip to content

Commit 549aea9

Browse files
AlexMiniAppsAlexMiniApps
committed
Added CSS var '--item-font-weight' to README
1 parent 7921989 commit 549aea9

File tree

2 files changed

+45
-43
lines changed

2 files changed

+45
-43
lines changed

‎README.md

+21-20
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ Include the component on page template HTML:
6767
[codeLength]="5"
6868
(codeChanged)="onCodeChanged($event)"
6969
(codeCompleted)="onCodeCompleted($event)">
70-
</code-input>
70+
</code-input>
7171
```
7272

7373
Inside a page script:
@@ -92,21 +92,22 @@ It is possible to configure the component via CSS vars
9292

9393
CSS vars:
9494

95-
| CSS Var | Description |
96-
|----------|--------------------|
97-
| `--text-security-type: disc;` | Text presentation type when the isCodeHidden is enabled |
98-
| `--item-spacing: 4px;` | Horizontal space between input items |
99-
| `--item-height: 4.375em;` | Height of input items |
100-
| `--item-border: 1px solid #dddddd;` | Border of input item for an empty value |
101-
| `--item-border-bottom: 1px solid #dddddd;` | Bottom border of input item for an empty value |
102-
| `--item-border-has-value: 1px solid #dddddd;` | Border of input item with a value |
103-
| `--item-border-bottom-has-value: 1px solid #dddddd;` | Bottom border of input item with a value |
104-
| `--item-border-focused: 1px solid #dddddd;` | Border of input item when focused |
105-
| `--item-border-bottom-focused: 1px solid #dddddd;` | Bottom border of input item when focused |
106-
| `--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` | Shadow of input item when focused |
107-
| `--item-border-radius: 5px;` | Border radius of input item |
108-
| `--item-background: transparent;` | Input item background |
109-
| `--color: #171516;` | Text color of input items |
95+
| CSS Var | Description |
96+
|--------------------------------------------------------------|--------------------------------------------------------|
97+
| `--text-security-type: disc;` | Text presentation type when the isCodeHidden is enabled |
98+
| `--item-spacing: 4px;` | Horizontal space between input items |
99+
| `--item-height: 4.375em;` | Height of input items |
100+
| `--item-border: 1px solid #dddddd;` | Border of input item for an empty value |
101+
| `--item-border-bottom: 1px solid #dddddd;` | Bottom border of input item for an empty value |
102+
| `--item-border-has-value: 1px solid #dddddd;` | Border of input item with a value |
103+
| `--item-border-bottom-has-value: 1px solid #dddddd;` | Bottom border of input item with a value |
104+
| `--item-border-focused: 1px solid #dddddd;` | Border of input item when focused |
105+
| `--item-border-bottom-focused: 1px solid #dddddd;` | Bottom border of input item when focused |
106+
| `--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` | Shadow of input item when focused |
107+
| `--item-border-radius: 5px;` | Border radius of input item |
108+
| `--item-background: transparent;` | Input item background |
109+
| `--item-font-weight: 300;` | Font weight of input item |
110+
| `--color: #171516;` | Text color of input items |
110111

111112
Example with only bottom borders:
112113

@@ -158,10 +159,10 @@ It can be reached as follows.
158159
Inside the page template HTML add a template ref:
159160

160161
```html
161-
<code-input
162-
...
163-
#codeInput
164-
...
162+
<code-input
163+
...
164+
#codeInput
165+
...
165166
>
166167
</code-input>
167168
```

‎angular-code-input/README.md

+24-23
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Code/pincode input component for angular
1+
# Code/pincode input component for angular
22

33
![](https://img.shields.io/npm/dm/angular-code-input?color=55aa33)
44
![](https://img.shields.io/github/stars/AlexMiniApps/angular-code-input)
@@ -86,27 +86,28 @@ Inside a page script:
8686

8787
#### View
8888

89-
It is possible to configure the component via CSS vars
89+
It is possible to configure the component via CSS vars
9090
<br />or using `::ng-deep` (deprecated) angular CSS selector
9191
[::ng-deep](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)
9292

9393
CSS vars:
9494

95-
| CSS Var | Description |
96-
|----------|--------------------|
97-
| `--text-security-type: disc;` | Text presentation type when the isCodeHidden is enabled |
98-
| `--item-spacing: 4px;` | Horizontal space between input items |
99-
| `--item-height: 4.375em;` | Height of input items |
100-
| `--item-border: 1px solid #dddddd;` | Border of input item for an empty value |
101-
| `--item-border-bottom: 1px solid #dddddd;` | Bottom border of input item for an empty value |
102-
| `--item-border-has-value: 1px solid #dddddd;` | Border of input item with a value |
103-
| `--item-border-bottom-has-value: 1px solid #dddddd;` | Bottom border of input item with a value |
104-
| `--item-border-focused: 1px solid #dddddd;` | Border of input item when focused |
105-
| `--item-border-bottom-focused: 1px solid #dddddd;` | Bottom border of input item when focused |
106-
| `--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` | Shadow of input item when focused |
107-
| `--item-border-radius: 5px;` | Border radius of input item |
108-
| `--item-background: transparent;` | Input item background |
109-
| `--color: #171516;` | Text color of input items |
95+
| CSS Var | Description |
96+
|--------------------------------------------------------------|--------------------------------------------------------|
97+
| `--text-security-type: disc;` | Text presentation type when the isCodeHidden is enabled |
98+
| `--item-spacing: 4px;` | Horizontal space between input items |
99+
| `--item-height: 4.375em;` | Height of input items |
100+
| `--item-border: 1px solid #dddddd;` | Border of input item for an empty value |
101+
| `--item-border-bottom: 1px solid #dddddd;` | Bottom border of input item for an empty value |
102+
| `--item-border-has-value: 1px solid #dddddd;` | Border of input item with a value |
103+
| `--item-border-bottom-has-value: 1px solid #dddddd;` | Bottom border of input item with a value |
104+
| `--item-border-focused: 1px solid #dddddd;` | Border of input item when focused |
105+
| `--item-border-bottom-focused: 1px solid #dddddd;` | Bottom border of input item when focused |
106+
| `--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` | Shadow of input item when focused |
107+
| `--item-border-radius: 5px;` | Border radius of input item |
108+
| `--item-background: transparent;` | Input item background |
109+
| `--item-font-weight: 300;` | Font weight of input item |
110+
| `--color: #171516;` | Text color of input items |
110111

111112
Example with only bottom borders:
112113

@@ -158,12 +159,12 @@ It can be reached as follows.
158159
Inside the page template HTML add a template ref:
159160

160161
```html
161-
<code-input
162-
...
163-
#codeInput
164-
...
165-
>
166-
</code-input>
162+
<code-input
163+
...
164+
#codeInput
165+
...
166+
>
167+
</code-input>
167168
```
168169

169170
Inside a page script attach the component:

0 commit comments

Comments
 (0)