@oardi/css-utils 0.83.0 → 0.84.0

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/scss/components/expansion-panel.scss +14 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.83.0",
3
+ "version": "0.84.0",
4
4
  "author": "Ardian Shala",
5
5
  "homepage": "https://css-utils.oardi.com",
6
6
  "description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",
package/scss/components/expansion-panel.scss CHANGED
@@ -24,8 +24,6 @@
24
24
  --expansion-panel-icon-closed: '+';
25
25
  --expansion-panel-icon-open: '−';
26
26
 
27
- --expansion-panel-content-max-height: 32rem;
28
-
29
27
  --expansion-panel-focus-outline-width: var(--focus-outline-width);
30
28
  --expansion-panel-focus-outline-style: var(--focus-outline-style);
31
29
  --expansion-panel-focus-outline-color: var(--focus-outline-color);
@@ -110,7 +108,8 @@
110
108
  }
111
109
 
112
110
  .expansion-panel-content {
113
- max-height: 0;
111
+ display: grid;
112
+ grid-template-rows: 0fr;
114
113
  overflow: hidden;
115
114
  opacity: 0;
116
115
  background-color: var(--expansion-panel-content-bg-color);
@@ -118,16 +117,22 @@
118
117
  border-end-end-radius: var(--expansion-panel-border-radius);
119
118
 
120
119
  transition:
121
- max-height var(--expansion-panel-content-transition-duration)
120
+ grid-template-rows var(--expansion-panel-content-transition-duration)
122
121
  var(--expansion-panel-transition-easing),
123
122
  opacity var(--expansion-panel-transition-duration)
124
123
  var(--expansion-panel-transition-easing);
125
124
 
126
125
  .expansion-panel-inner {
127
- padding: var(--expansion-panel-inner-padding);
126
+ min-height: 0;
127
+ overflow: hidden;
128
+ padding-block: 0;
129
+ padding-inline: var(--expansion-panel-inner-padding);
128
130
  transform: translateY(-0.5rem);
129
- transition: transform var(--expansion-panel-content-transition-duration)
130
- var(--expansion-panel-transition-easing);
131
+ transition:
132
+ padding-block var(--expansion-panel-content-transition-duration)
133
+ var(--expansion-panel-transition-easing),
134
+ transform var(--expansion-panel-content-transition-duration)
135
+ var(--expansion-panel-transition-easing);
131
136
  }
132
137
  }
133
138
 
@@ -137,10 +142,11 @@
137
142
  }
138
143
 
139
144
  .expansion-panel-content {
140
- max-height: var(--expansion-panel-content-max-height);
145
+ grid-template-rows: 1fr;
141
146
  opacity: 1;
142
147
 
143
148
  .expansion-panel-inner {
149
+ padding-block: var(--expansion-panel-inner-padding);
144
150
  transform: translateY(0);
145
151
  }
146
152
  }