@i-cell/ids-styles 0.0.5 → 0.0.6
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/accessibility.css +11 -0
- package/dist/accessibility.min.css +1 -0
- package/dist/accessibility.plugin.js +20 -0
- package/dist/components.css +45 -8
- package/dist/components.min.css +1 -1
- package/dist/components.plugin.js +37 -9
- package/dist/paginator/paginator.css +45 -8
- package/dist/paginator/paginator.min.css +1 -1
- package/dist/paginator/paginator.plugin.js +37 -9
- package/package.json +2 -2
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// Tailwind CSS plugin for the accessibility component in the i-Cell Design System
|
|
2
|
+
module.exports = function AccessibilityPlugin() {
|
|
3
|
+
return function ({ addComponents }) {
|
|
4
|
+
const cssObj = {
|
|
5
|
+
'.sr-only': {
|
|
6
|
+
position: 'absolute',
|
|
7
|
+
width: '1px',
|
|
8
|
+
height: '1px',
|
|
9
|
+
padding: '0',
|
|
10
|
+
margin: '-1px',
|
|
11
|
+
overflow: 'hidden',
|
|
12
|
+
clip: 'rect(0, 0, 0, 0)',
|
|
13
|
+
whiteSpace: 'nowrap',
|
|
14
|
+
borderWidth: '0',
|
|
15
|
+
},
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
addComponents(cssObj);
|
|
19
|
+
};
|
|
20
|
+
};
|
package/dist/components.css
CHANGED
|
@@ -3942,6 +3942,7 @@
|
|
|
3942
3942
|
justify-content: center;
|
|
3943
3943
|
align-items: center;
|
|
3944
3944
|
font-style: normal;
|
|
3945
|
+
border-style: none;
|
|
3945
3946
|
}
|
|
3946
3947
|
.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:focus {
|
|
3947
3948
|
outline-width: var(--ids-comp-paginator-page-links-focused-outline-size-outline);
|
|
@@ -3951,12 +3952,12 @@
|
|
|
3951
3952
|
.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.first, .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous {
|
|
3952
3953
|
order: 1;
|
|
3953
3954
|
}
|
|
3954
|
-
.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-container {
|
|
3955
|
-
order: 2;
|
|
3956
|
-
}
|
|
3957
3955
|
.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next, .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.last {
|
|
3958
3956
|
order: 3;
|
|
3959
3957
|
}
|
|
3958
|
+
.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-container {
|
|
3959
|
+
order: 2;
|
|
3960
|
+
}
|
|
3960
3961
|
.ids-paginator .ids-paginator__navigation-container .ids-paginator__help-text {
|
|
3961
3962
|
order: 4;
|
|
3962
3963
|
}
|
|
@@ -3968,7 +3969,7 @@
|
|
|
3968
3969
|
white-space: nowrap;
|
|
3969
3970
|
}
|
|
3970
3971
|
.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container {
|
|
3971
|
-
gap: var(--ids-comp-paginator-size-gap-
|
|
3972
|
+
gap: var(--ids-comp-paginator-size-gap-compact);
|
|
3972
3973
|
}
|
|
3973
3974
|
.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button {
|
|
3974
3975
|
height: var(--ids-comp-paginator-page-links-size-height-compact);
|
|
@@ -3981,6 +3982,15 @@
|
|
|
3981
3982
|
line-height: var(--ids-comp-paginator-page-links-label-typography-line-height-compact);
|
|
3982
3983
|
border-radius: var(--ids-comp-paginator-page-links-page-link-size-border-radius-compact);
|
|
3983
3984
|
}
|
|
3985
|
+
.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow {
|
|
3986
|
+
gap: var(--ids-comp-paginator-page-links-size-gap-compact);
|
|
3987
|
+
}
|
|
3988
|
+
.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous > .ids-paginator__page-button-arrow__label {
|
|
3989
|
+
padding-right: var(--ids-comp-paginator-page-links-label-size-padding-right-compact);
|
|
3990
|
+
}
|
|
3991
|
+
.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next > .ids-paginator__page-button-arrow__label {
|
|
3992
|
+
padding-left: var(--ids-comp-paginator-page-links-label-size-padding-left-compact);
|
|
3993
|
+
}
|
|
3984
3994
|
.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
|
|
3985
3995
|
height: var(--ids-comp-paginator-page-links-size-height-compact);
|
|
3986
3996
|
width: var(--ids-comp-paginator-page-links-size-min-width-compact);
|
|
@@ -4009,6 +4019,15 @@
|
|
|
4009
4019
|
line-height: var(--ids-comp-paginator-page-links-label-typography-line-height-comfortable);
|
|
4010
4020
|
border-radius: var(--ids-comp-paginator-page-links-page-link-size-border-radius-comfortable);
|
|
4011
4021
|
}
|
|
4022
|
+
.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow {
|
|
4023
|
+
gap: var(--ids-comp-paginator-page-links-size-gap-comfortable);
|
|
4024
|
+
}
|
|
4025
|
+
.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous > .ids-paginator__page-button-arrow__label {
|
|
4026
|
+
padding-right: var(--ids-comp-paginator-page-links-label-size-padding-right-comfortable);
|
|
4027
|
+
}
|
|
4028
|
+
.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next > .ids-paginator__page-button-arrow__label {
|
|
4029
|
+
padding-left: var(--ids-comp-paginator-page-links-label-size-padding-left-comfortable);
|
|
4030
|
+
}
|
|
4012
4031
|
.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
|
|
4013
4032
|
height: var(--ids-comp-paginator-page-links-size-height-comfortable);
|
|
4014
4033
|
width: var(--ids-comp-paginator-page-links-size-min-width-comfortable);
|
|
@@ -4024,7 +4043,7 @@
|
|
|
4024
4043
|
padding: var(--ids-comp-paginator-help-text-size-padding-y-comfortable);
|
|
4025
4044
|
}
|
|
4026
4045
|
.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container {
|
|
4027
|
-
gap: var(--ids-comp-paginator-size-gap-
|
|
4046
|
+
gap: var(--ids-comp-paginator-size-gap-spacious);
|
|
4028
4047
|
}
|
|
4029
4048
|
.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button {
|
|
4030
4049
|
height: var(--ids-comp-paginator-page-links-size-height-spacious);
|
|
@@ -4037,6 +4056,15 @@
|
|
|
4037
4056
|
line-height: var(--ids-comp-paginator-page-links-label-typography-line-height-spacious);
|
|
4038
4057
|
border-radius: var(--ids-comp-paginator-page-links-page-link-size-border-radius-spacious);
|
|
4039
4058
|
}
|
|
4059
|
+
.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow {
|
|
4060
|
+
gap: var(--ids-comp-paginator-page-links-size-gap-spacious);
|
|
4061
|
+
}
|
|
4062
|
+
.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous > .ids-paginator__page-button-arrow__label {
|
|
4063
|
+
padding-right: var(--ids-comp-paginator-page-links-label-size-padding-right-spacious);
|
|
4064
|
+
}
|
|
4065
|
+
.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next > .ids-paginator__page-button-arrow__label {
|
|
4066
|
+
padding-left: var(--ids-comp-paginator-page-links-label-size-padding-left-spacious);
|
|
4067
|
+
}
|
|
4040
4068
|
.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
|
|
4041
4069
|
height: var(--ids-comp-paginator-page-links-size-height-spacious);
|
|
4042
4070
|
width: var(--ids-comp-paginator-page-links-size-min-width-spacious);
|
|
@@ -4052,7 +4080,7 @@
|
|
|
4052
4080
|
padding: var(--ids-comp-paginator-help-text-size-padding-y-spacious);
|
|
4053
4081
|
}
|
|
4054
4082
|
.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container {
|
|
4055
|
-
gap: var(--ids-comp-paginator-size-gap-
|
|
4083
|
+
gap: var(--ids-comp-paginator-size-gap-dense);
|
|
4056
4084
|
}
|
|
4057
4085
|
.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button {
|
|
4058
4086
|
height: var(--ids-comp-paginator-page-links-size-height-dense);
|
|
@@ -4065,6 +4093,15 @@
|
|
|
4065
4093
|
line-height: var(--ids-comp-paginator-page-links-label-typography-line-height-dense);
|
|
4066
4094
|
border-radius: var(--ids-comp-paginator-page-links-page-link-size-border-radius-dense);
|
|
4067
4095
|
}
|
|
4096
|
+
.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow {
|
|
4097
|
+
gap: var(--ids-comp-paginator-page-links-size-gap-dense);
|
|
4098
|
+
}
|
|
4099
|
+
.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous > .ids-paginator__page-button-arrow__label {
|
|
4100
|
+
padding-right: var(--ids-comp-paginator-page-links-label-size-padding-right-dense);
|
|
4101
|
+
}
|
|
4102
|
+
.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next > .ids-paginator__page-button-arrow__label {
|
|
4103
|
+
padding-left: var(--ids-comp-paginator-page-links-label-size-padding-left-dense);
|
|
4104
|
+
}
|
|
4068
4105
|
.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
|
|
4069
4106
|
height: var(--ids-comp-paginator-page-links-size-height-dense);
|
|
4070
4107
|
width: var(--ids-comp-paginator-page-links-size-min-width-dense);
|
|
@@ -4223,10 +4260,10 @@
|
|
|
4223
4260
|
.ids-paginator.ids-paginator-surface .ids-paginator__help-text {
|
|
4224
4261
|
color: var(--ids-comp-paginator-help-text-color-fg-surface-default);
|
|
4225
4262
|
}
|
|
4226
|
-
.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-container {
|
|
4263
|
+
.ids-paginator.ids-paginator-compact-layout .ids-paginator__navigation-container .ids-paginator__page-button-container {
|
|
4227
4264
|
display: none;
|
|
4228
4265
|
}
|
|
4229
|
-
.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__help-text {
|
|
4266
|
+
.ids-paginator.ids-paginator-compact-layout .ids-paginator__navigation-container .ids-paginator__help-text {
|
|
4230
4267
|
order: 2;
|
|
4231
4268
|
margin-left: 0;
|
|
4232
4269
|
}
|