@oardi/css-utils 0.121.1 → 0.122.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 (4) hide show
  1. package/package.json +1 -1
  2. package/scss/components/expansion-panel.scss +7 -7
  3. package/scss/components/icon.scss +23 -0
  4. package/scss/index.scss +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.121.1",
3
+ "version": "0.122.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
@@ -60,7 +60,7 @@
60
60
  outline-offset: var(--expansion-panel-focus-outline-offset);
61
61
  }
62
62
 
63
- .expansion-panel-header {
63
+ > .expansion-panel-header {
64
64
  position: relative;
65
65
  display: flex;
66
66
  align-items: center;
@@ -115,7 +115,7 @@
115
115
  }
116
116
  }
117
117
 
118
- .expansion-panel-content {
118
+ > .expansion-panel-content {
119
119
  display: grid;
120
120
  grid-template-rows: 0fr;
121
121
  overflow: hidden;
@@ -130,7 +130,7 @@
130
130
  opacity var(--expansion-panel-transition-duration)
131
131
  var(--expansion-panel-transition-easing);
132
132
 
133
- .expansion-panel-inner {
133
+ > .expansion-panel-inner {
134
134
  min-height: 0;
135
135
  overflow: hidden;
136
136
  padding-block: 0;
@@ -145,15 +145,15 @@
145
145
  }
146
146
 
147
147
  &.is-open {
148
- .expansion-panel-header::after {
148
+ > .expansion-panel-header::after {
149
149
  content: var(--expansion-panel-icon-open);
150
150
  }
151
151
 
152
- .expansion-panel-content {
152
+ > .expansion-panel-content {
153
153
  grid-template-rows: 1fr;
154
154
  opacity: 1;
155
155
 
156
- .expansion-panel-inner {
156
+ > .expansion-panel-inner {
157
157
  padding-block: var(--expansion-panel-inner-padding);
158
158
  transform: translateY(0);
159
159
  }
@@ -161,7 +161,7 @@
161
161
  }
162
162
 
163
163
  &:not(.is-open) {
164
- .expansion-panel-header {
164
+ > .expansion-panel-header {
165
165
  border-end-start-radius: var(--expansion-panel-border-radius);
166
166
  border-end-end-radius: var(--expansion-panel-border-radius);
167
167
  }
package/scss/components/icon.scss ADDED
@@ -0,0 +1,23 @@
1
+ .icon {
2
+ display: inline-flex;
3
+
4
+ &-sm svg {
5
+ width: 1rem;
6
+ height: 1rem;
7
+ }
8
+
9
+ &-md svg {
10
+ width: 1.5rem;
11
+ height: 1.5rem;
12
+ }
13
+
14
+ &-lg svg {
15
+ width: 2rem;
16
+ height: 2rem;
17
+ }
18
+
19
+ &-xl svg {
20
+ width: 2.5rem;
21
+ height: 2.5rem;
22
+ }
23
+ }
package/scss/index.scss CHANGED
@@ -37,6 +37,7 @@
37
37
  @forward './components/file-upload.scss';
38
38
  @forward './components/form.scss';
39
39
  @forward './components/icon-button.scss';
40
+ @forward './components/icon.scss';
40
41
  @forward './components/input-group.scss';
41
42
  @forward './components/list.scss';
42
43
  @forward './components/menu.scss';