ecabs-components 1.1.84 → 1.1.85
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/README.md +3 -1
- package/esm2022/lib/base/consts/buttons.consts.mjs +1 -1
- package/esm2022/lib/ecabs-buttons-v2/ecabs-buttons-v2.component.mjs +21 -17
- package/esm2022/lib/ecabs-loading/spinner/spinner.component.mjs +3 -3
- package/fesm2022/ecabs-components.mjs +21 -17
- package/fesm2022/ecabs-components.mjs.map +1 -1
- package/lib/base/consts/buttons.consts.d.ts +2 -0
- package/lib/ecabs-buttons-v2/ecabs-buttons-v2.component.d.ts +8 -9
- package/package.json +1 -1
- package/src/assets/styles/material/overrides/_button.scss +155 -134
- package/src/assets/styles/scss/modules/_button.scss +281 -272
- package/src/assets/styles/scss/utilities/_mixins.scss +97 -65
|
@@ -1,65 +1,97 @@
|
|
|
1
|
-
// Calculates font size in REMs with a pixel fallback.
|
|
2
|
-
@mixin fontSize($size) {
|
|
3
|
-
font-size: $size;
|
|
4
|
-
font-size: calc-rem($size);
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
// ==========================================================================
|
|
8
|
-
// BEM Naming Functions
|
|
9
|
-
// ==========================================================================
|
|
10
|
-
// Element Mixin
|
|
11
|
-
@mixin e($element) {
|
|
12
|
-
&__#{$element} {
|
|
13
|
-
@content;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
// Modifier Mixin
|
|
18
|
-
@mixin m($modifier) {
|
|
19
|
-
&--#{$modifier} {
|
|
20
|
-
@content;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
// Generate ::before or ::after pseudo-element shapes
|
|
25
|
-
@mixin p-el($el-name, $h: 'null', $w: 'null') {
|
|
26
|
-
@if $el-name == 'before' or $el-name == 'after' {
|
|
27
|
-
&::#{$el-name} {
|
|
28
|
-
@extend %pseudos;
|
|
29
|
-
width: $w;
|
|
30
|
-
height: $h;
|
|
31
|
-
@content;
|
|
32
|
-
}
|
|
33
|
-
} @else {
|
|
34
|
-
@error '"#{$el-name}" is not a valid pseudo element.';
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
// ==========================================================================
|
|
39
|
-
// Media Query Functions
|
|
40
|
-
// ==========================================================================
|
|
41
|
-
@mixin media-q($break) {
|
|
42
|
-
@if $break == 'small' {
|
|
43
|
-
@media (min-width: map-get($breakpoints, 'xs')) and (max-width: map-get($breakpoints, 'md')) {
|
|
44
|
-
@content;
|
|
45
|
-
}
|
|
46
|
-
} @else if $break == 'medium' {
|
|
47
|
-
@media (min-width: map-get($breakpoints, 'md') + 1) {
|
|
48
|
-
@content;
|
|
49
|
-
}
|
|
50
|
-
} @else if $break == 'large' {
|
|
51
|
-
@media (min-width: map-get($breakpoints, 'lg')) {
|
|
52
|
-
@content;
|
|
53
|
-
}
|
|
54
|
-
} @else if $break == 'x-large' {
|
|
55
|
-
@media (min-width: map-get($breakpoints, 'xl')) {
|
|
56
|
-
@content;
|
|
57
|
-
}
|
|
58
|
-
} @else if $break == 'xx-large' {
|
|
59
|
-
@media (min-width: map-get($breakpoints, 'xxl')) {
|
|
60
|
-
@content;
|
|
61
|
-
}
|
|
62
|
-
} @else {
|
|
63
|
-
@error '"#{$break}" is not a valid breakpoint. Please enter a supported value (e.g. "small", "medium" or "large")';
|
|
64
|
-
}
|
|
65
|
-
}
|
|
1
|
+
// Calculates font size in REMs with a pixel fallback.
|
|
2
|
+
@mixin fontSize($size) {
|
|
3
|
+
font-size: $size;
|
|
4
|
+
font-size: calc-rem($size);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
// ==========================================================================
|
|
8
|
+
// BEM Naming Functions
|
|
9
|
+
// ==========================================================================
|
|
10
|
+
// Element Mixin
|
|
11
|
+
@mixin e($element) {
|
|
12
|
+
&__#{$element} {
|
|
13
|
+
@content;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// Modifier Mixin
|
|
18
|
+
@mixin m($modifier) {
|
|
19
|
+
&--#{$modifier} {
|
|
20
|
+
@content;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// Generate ::before or ::after pseudo-element shapes
|
|
25
|
+
@mixin p-el($el-name, $h: 'null', $w: 'null') {
|
|
26
|
+
@if $el-name == 'before' or $el-name == 'after' {
|
|
27
|
+
&::#{$el-name} {
|
|
28
|
+
@extend %pseudos;
|
|
29
|
+
width: $w;
|
|
30
|
+
height: $h;
|
|
31
|
+
@content;
|
|
32
|
+
}
|
|
33
|
+
} @else {
|
|
34
|
+
@error '"#{$el-name}" is not a valid pseudo element.';
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// ==========================================================================
|
|
39
|
+
// Media Query Functions
|
|
40
|
+
// ==========================================================================
|
|
41
|
+
@mixin media-q($break) {
|
|
42
|
+
@if $break == 'small' {
|
|
43
|
+
@media (min-width: map-get($breakpoints, 'xs')) and (max-width: map-get($breakpoints, 'md')) {
|
|
44
|
+
@content;
|
|
45
|
+
}
|
|
46
|
+
} @else if $break == 'medium' {
|
|
47
|
+
@media (min-width: map-get($breakpoints, 'md') + 1) {
|
|
48
|
+
@content;
|
|
49
|
+
}
|
|
50
|
+
} @else if $break == 'large' {
|
|
51
|
+
@media (min-width: map-get($breakpoints, 'lg')) {
|
|
52
|
+
@content;
|
|
53
|
+
}
|
|
54
|
+
} @else if $break == 'x-large' {
|
|
55
|
+
@media (min-width: map-get($breakpoints, 'xl')) {
|
|
56
|
+
@content;
|
|
57
|
+
}
|
|
58
|
+
} @else if $break == 'xx-large' {
|
|
59
|
+
@media (min-width: map-get($breakpoints, 'xxl')) {
|
|
60
|
+
@content;
|
|
61
|
+
}
|
|
62
|
+
} @else {
|
|
63
|
+
@error '"#{$break}" is not a valid breakpoint. Please enter a supported value (e.g. "small", "medium" or "large")';
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// ==========================================================================
|
|
68
|
+
// Sized-control button v2 metrics
|
|
69
|
+
// ==========================================================================
|
|
70
|
+
@mixin btn-size($height, $min-width, $padding-x, $font-size, $line-height) {
|
|
71
|
+
height: $height;
|
|
72
|
+
min-width: $min-width;
|
|
73
|
+
padding: 0 $padding-x;
|
|
74
|
+
font-size: $font-size;
|
|
75
|
+
font-weight: $font-weight-semibold;
|
|
76
|
+
line-height: $line-height;
|
|
77
|
+
letter-spacing: 0;
|
|
78
|
+
border-radius: calc-rem($border-radius-large);
|
|
79
|
+
text-align: center;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// Step for the button-toggle size scale, applied to Material's toggle internals.
|
|
83
|
+
@mixin toggle-size($height, $min-width, $font-size, $padding-x) {
|
|
84
|
+
.mat-button-toggle {
|
|
85
|
+
height: $height;
|
|
86
|
+
|
|
87
|
+
.mat-button-toggle-button {
|
|
88
|
+
height: $height;
|
|
89
|
+
min-width: $min-width;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.mat-button-toggle-label-content {
|
|
93
|
+
font-size: $font-size;
|
|
94
|
+
padding: 0 $padding-x;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|