@avenirs-esr/avenirs-dsav 0.1.131 → 0.1.132
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/dist/avenirs-dsav.css +1 -1
- package/package.json +1 -1
- package/src/styles/core/_palette.scss +3 -3
- package/src/styles/core/_radius.scss +17 -9
- package/src/styles/main.scss +2 -0
- package/src/styles/utilities/_border.md +70 -0
- package/src/styles/utilities/_border.scss +45 -0
- package/src/styles/utilities/_helpers.scss +8 -0
- package/src/styles/utilities/_palette.scss +14 -0
package/package.json
CHANGED
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
--light-foreground-critical: #7040F1;
|
|
33
33
|
--light-foreground-neutral: #666769;
|
|
34
34
|
--base: #14171A;
|
|
35
|
-
--title: #
|
|
36
|
-
--text1: #
|
|
37
|
-
--text2: #
|
|
35
|
+
--title: #161616;
|
|
36
|
+
--text1: #3A3A3A;
|
|
37
|
+
--text2: #656565;
|
|
38
38
|
--icon: #14171A7A;
|
|
39
39
|
--icon-filter: invert(65%) sepia(6%) saturate(100%) hue-rotate(180deg) brightness(75%) contrast(85%);
|
|
40
40
|
--divider: #14171A5C;
|
|
@@ -1,11 +1,19 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
|
|
3
|
+
$radius: (
|
|
4
|
+
none: 0, /* 0px */
|
|
5
|
+
xxs: 0.0625rem, /* 1px */
|
|
6
|
+
xs: 0.125rem, /* 2px */
|
|
7
|
+
sm: 0.25rem, /* 4px */
|
|
8
|
+
md: 0.5rem, /* 8px */
|
|
9
|
+
lg: 0.75rem, /* 12px */
|
|
10
|
+
xl: 1rem, /* 16px */
|
|
11
|
+
hg: 2rem, /* 32px */
|
|
12
|
+
full: 62.5rem, /* 1000px */
|
|
13
|
+
) !default;
|
|
14
|
+
|
|
1
15
|
:root {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
--radius-sm: 0.25rem; /* 4px */
|
|
6
|
-
--radius-md: 0.5rem; /* 8px */
|
|
7
|
-
--radius-lg: 0.75rem; /* 12px */
|
|
8
|
-
--radius-xl: 1rem; /* 16px */
|
|
9
|
-
--radius-hg: 2rem; /* 32px */
|
|
10
|
-
--radius-full: 62.5rem; /* 1000px */
|
|
16
|
+
@each $key, $value in $radius {
|
|
17
|
+
--radius-#{$key}: #{$value};
|
|
18
|
+
}
|
|
11
19
|
}
|
package/src/styles/main.scss
CHANGED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: page
|
|
3
|
+
lastUpdated: true
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Border
|
|
7
|
+
|
|
8
|
+
## ✨ Introduction
|
|
9
|
+
|
|
10
|
+
This `border` utility generates border width, border style and border radius classes for all defined sizes.
|
|
11
|
+
|
|
12
|
+
## 🏷️ Class patterns
|
|
13
|
+
|
|
14
|
+
| Class pattern | Description | Responsive variants |
|
|
15
|
+
|---------------|-------------|---------------------|
|
|
16
|
+
| `.av-border-width-{widthSize}` | Applies `border-width` with the specified size | `--sm`, `--md`, `--lg`, `--xl` |
|
|
17
|
+
| `.av-border-style-{style}` | Applies `border-style` with the specified style | `solid`, `dashed`, `dotted`, `none` |
|
|
18
|
+
| `.av-radius-{radiusSize}` | Applies `border-radius` with the specified size | `--sm`, `--md`, `--lg`, `--xl` |
|
|
19
|
+
|
|
20
|
+
📝 Notes:
|
|
21
|
+
- `{widthSize}` corresponds to the border width scale defined in this file: `none` (`0`), `sm` (`0.0625rem`), `md` (`0.125rem`), `lg` (`0.25rem`).
|
|
22
|
+
- `{radiusSize}` corresponds to the radius scale defined in the core: `none`, `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `hg`, `full`.
|
|
23
|
+
|
|
24
|
+
## 🎨 Some CSS results
|
|
25
|
+
|
|
26
|
+
### Border width classes
|
|
27
|
+
|
|
28
|
+
```css
|
|
29
|
+
.av-border-width-sm {
|
|
30
|
+
border-width: 0.0625rem !important;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.av-border-width-md {
|
|
34
|
+
border-width: 0.125rem !important;
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Border style classes
|
|
39
|
+
|
|
40
|
+
```css
|
|
41
|
+
.av-border-style-solid {
|
|
42
|
+
border-style: solid !important;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.av-border-style-dashed {
|
|
46
|
+
border-style: dashed !important;
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Border radius classes
|
|
51
|
+
|
|
52
|
+
```css
|
|
53
|
+
.av-radius-sm {
|
|
54
|
+
border-radius: var(--radius-sm) !important;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.av-radius-md {
|
|
58
|
+
border-radius: var(--radius-md) !important;
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## 💡 Examples of use
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<div class="av-border-width-sm av-border-style-solid av-radius-sm">
|
|
66
|
+
<!-- border-width-sm: border width sm (0.0625rem) on all screens -->
|
|
67
|
+
<!-- border-style-solid: solid border style on all screens -->
|
|
68
|
+
<!-- radius-sm: border radius sm (var(--radius-sm)) on all screens -->
|
|
69
|
+
</div>
|
|
70
|
+
```
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
@use '../core/radius' as r;
|
|
2
|
+
@use '../mixins/responsive-utility' as *;
|
|
3
|
+
@use "sass:map";
|
|
4
|
+
|
|
5
|
+
// === Border widths ===
|
|
6
|
+
$border-widths: (
|
|
7
|
+
none: 0, /* 0px */
|
|
8
|
+
sm: 0.0625rem, /* 1px */
|
|
9
|
+
md: 0.125rem, /* 2px */
|
|
10
|
+
lg: 0.25rem, /* 4px */
|
|
11
|
+
);
|
|
12
|
+
|
|
13
|
+
// === Border styles ===
|
|
14
|
+
$border-styles: (
|
|
15
|
+
solid,
|
|
16
|
+
dashed,
|
|
17
|
+
dotted,
|
|
18
|
+
none,
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
// === BASE CLASSES ===
|
|
22
|
+
|
|
23
|
+
// === Border width classes ===
|
|
24
|
+
// Ex : .av-border-sm / .av-border-lg
|
|
25
|
+
@each $size, $value in $border-widths {
|
|
26
|
+
@include utility-base("border-width-#{$size}", (
|
|
27
|
+
border-width: #{$value} !important
|
|
28
|
+
));
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// === Border style classes ===
|
|
32
|
+
// Ex : .av-border-solid / .av-border-dashed
|
|
33
|
+
@each $style in $border-styles {
|
|
34
|
+
@include utility-base("border-style-#{$style}", (
|
|
35
|
+
border-style: #{$style} !important
|
|
36
|
+
));
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// === Border radius classes ===
|
|
40
|
+
// Ex : .av-radius-sm / .av-radius-lg
|
|
41
|
+
@each $size, $value in r.$radius {
|
|
42
|
+
@include utility-base("radius-#{$size}", (
|
|
43
|
+
border-radius: var(--radius-#{$size}) !important
|
|
44
|
+
));
|
|
45
|
+
}
|
|
@@ -113,4 +113,12 @@ ol>li{
|
|
|
113
113
|
|
|
114
114
|
li::marker{
|
|
115
115
|
content: counter(li-counter, ".") ". ";
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
// === List reset class ===
|
|
119
|
+
// Ex: .av-list-reset
|
|
120
|
+
@include ns("list-reset") {
|
|
121
|
+
list-style: none;
|
|
122
|
+
padding: var(--spacing-none);
|
|
123
|
+
margin: var(--spacing-none);
|
|
116
124
|
}
|